mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-07-27 20:29:10 +00:00
Anso
4488637656
* feat(resources): add network management with create, inspect, and topology visualization
Add full Docker network CRUD: create networks with custom drivers, subnets,
and IPAM config; inspect network details including connected containers and
IP addresses; interactive topology graph visualization (Pro-gated to
Skipper/Admiral tiers). Includes backend routes, DockerController methods,
unit tests, documentation with screenshots, and updated changelog.
* refactor(resources): address code review findings for network management
- Add batch GET /api/system/networks/topology endpoint to eliminate N+1
HTTP calls from the topology view
- Export DockerNetwork type from ResourcesView, remove duplicate in
NetworkTopologyView
- Wire up isInspectLoading state to Eye button (spinner + disabled)
- Remove unnecessary wrapper div around FilterToggle
- NetworkTopologyView is now self-contained (fetches from batch endpoint,
no longer needs networks prop)
* fix(resources): align pre-existing UI with design system standards
- Replace hardcoded red-500 on image/volume delete buttons with
text-destructive/60 hover:bg-destructive tokens
- Replace shadow-sm with shadow-card-bevel on all cards (Disk Footprint,
Quick Clean, Resource Tabs, Unmanaged Containers)
- Add strokeWidth={1.5} to all action button Trash2 icons
- Type network drivers as union type instead of raw strings (backend
NetworkDriver type + frontend NETWORK_DRIVERS constant)
* fix(resources): add generic type args to useNodesState/useEdgesState
Fixes TS2345 build error in CI where tsc -b (strict mode via
tsconfig.app.json) infers never[] from untyped empty array literals
passed to React Flow hooks.
* fix(resources): replace explicit any in catch blocks with unknown narrowing
ESLint no-explicit-any errors in CI for three catch blocks added by the
network management feature.
128 lines
5.3 KiB
Plaintext
128 lines
5.3 KiB
Plaintext
---
|
|
title: Resources Hub
|
|
description: Browse, filter, and clean up Docker images, volumes, networks, and unmanaged containers.
|
|
---
|
|
|
|
The **Resources** tab gives you a full view of everything Docker is storing on your host, broken down by type and ownership.
|
|
|
|
<Frame>
|
|
<img src="/images/resources/resources-overview.png" alt="Resources Hub showing disk footprint, quick clean panel, and images table" />
|
|
</Frame>
|
|
|
|
## Docker disk footprint
|
|
|
|
The stacked bar at the top visualises how your Docker disk usage is distributed:
|
|
|
|
| Segment | Meaning |
|
|
|---------|---------|
|
|
| **Sencho Managed** (green) | Images used by stacks in your `COMPOSE_DIR` |
|
|
| **External Projects** (orange) | Images used by Docker projects outside Sencho |
|
|
| **Reclaimable** (gray) | Unused images and dangling layers safe to delete |
|
|
|
|
Click any segment to automatically filter the tabs below to that category.
|
|
|
|
## Quick Clean panel
|
|
|
|
Four prune buttons let you reclaim disk space immediately. By default they operate on **Sencho-managed resources only** - they will not touch external Docker projects.
|
|
|
|
| Button | What it removes |
|
|
|--------|----------------|
|
|
| **Prune Unused Images** | Images with no running containers in Sencho stacks |
|
|
| **Prune Unused Volumes** | Volumes not attached to any Sencho container |
|
|
| **Prune Dead Networks** | Networks not connected to any Sencho container |
|
|
| **Purge Unmanaged Containers** | Containers Sencho doesn't recognise (started outside it) |
|
|
|
|
Each button has a **⋮ More options** menu that lets you target **all Docker resources** instead of Sencho-only. Use this carefully - it can affect other Compose projects running on the same host.
|
|
|
|
A confirmation dialog appears before any destructive operation, showing a summary of what will be removed.
|
|
|
|
## Resource tabs
|
|
|
|
### Images
|
|
|
|
Lists all Docker images on the host with their ID, repository tag, size, and status.
|
|
|
|
**Filter buttons:** `All` · `Managed` · `External`
|
|
|
|
**Status badges:**
|
|
- `In Use` + stack name - image is actively used by a running container
|
|
- `Unused` - image has no running containers; safe to delete
|
|
|
|
Click the trash icon on any row to delete an individual image. Sencho will warn you if the image is in use.
|
|
|
|
### Volumes
|
|
|
|
Lists all Docker volumes. Columns: name, driver, mount point, size, and managed status.
|
|
|
|
**Filter buttons:** `All` · `Managed` · `External`
|
|
|
|
<Warning>
|
|
Deleting a volume is permanent. Any data stored in it will be lost. Always back up important volume data before pruning.
|
|
</Warning>
|
|
|
|
### Networks
|
|
|
|
Lists all Docker networks. Columns: ID, name, driver, scope (`local`, `global`, `swarm`), and managed status.
|
|
|
|
**Filter buttons:** `All` · `Managed` · `External`
|
|
|
|
System networks (like `bridge`, `host`, `none`) are shown but cannot be deleted.
|
|
|
|
<Frame>
|
|
<img src="/images/networks/networks-list.png" alt="Networks list view with filter, inspect, and create actions" />
|
|
</Frame>
|
|
|
|
#### Create network
|
|
|
|
Click **+ Create Network** (admin only) to open the creation dialog.
|
|
|
|
<Frame>
|
|
<img src="/images/networks/create-network.png" alt="Create Network dialog with name, driver, subnet, and gateway fields" />
|
|
</Frame>
|
|
|
|
| Field | Required | Description |
|
|
|-------|----------|-------------|
|
|
| **Name** | Yes | Alphanumeric, hyphens, underscores, and dots |
|
|
| **Driver** | No | `bridge` (default), `overlay`, `macvlan`, `host`, or `none` |
|
|
| **Subnet** | No | CIDR notation, e.g. `172.20.0.0/16` |
|
|
| **Gateway** | No | Gateway IP, e.g. `172.20.0.1` |
|
|
| **Internal** | No | Isolates the network from external access |
|
|
| **Attachable** | No | Allows containers to be manually attached |
|
|
|
|
#### Inspect network
|
|
|
|
Click the eye icon on any network row to open a detail panel showing:
|
|
|
|
- **Overview** — ID, driver, scope, creation date, internal/attachable flags
|
|
- **IPAM configuration** — Subnet, gateway, and IP range
|
|
- **Connected containers** — Container name, IPv4 address, and MAC address
|
|
- **Labels** — All Docker labels applied to the network
|
|
|
|
<Frame>
|
|
<img src="/images/networks/network-inspect.png" alt="Network inspect panel showing IPAM config and connected containers" />
|
|
</Frame>
|
|
|
|
#### Network topology <span style={{fontSize: '0.75em', color: 'var(--brand)'}}>Pro</span>
|
|
|
|
Switch to the **Topology** view to see an interactive graph of your Docker networks and the containers connected to them. System networks (`bridge`, `host`, `none`) are excluded for clarity.
|
|
|
|
<Frame>
|
|
<img src="/images/networks/network-topology.png" alt="Network topology visualization showing containers connected to networks" />
|
|
</Frame>
|
|
|
|
- **Network nodes** — Dashed border cards showing network name and driver, color-coded by status (managed, external, system)
|
|
- **Container nodes** — Cards showing container name with IP addresses per network
|
|
- **Edges** — Animated connections between networks and their containers
|
|
- Pan, zoom, and drag nodes to explore the topology
|
|
- A mini map in the bottom-right provides an overview
|
|
|
|
<Note>
|
|
Network Topology requires a Sencho Pro license (Skipper or Admiral). Community users see an upgrade prompt.
|
|
</Note>
|
|
|
|
### Unmanaged
|
|
|
|
Lists containers running on the host that are not part of any Sencho-managed stack. This includes containers started with `docker run`, or Compose projects outside your `COMPOSE_DIR`.
|
|
|
|
This view is useful for identifying orphaned containers after a failed deployment or after moving stacks in and out of `COMPOSE_DIR`.
|