mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-07 09:24:09 +00:00
feat(resources): add network management with create, inspect, and topology visualization (#335)
* 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.
This commit is contained in:
@@ -62,12 +62,64 @@ Lists all Docker volumes. Columns: name, driver, mount point, size, and managed
|
||||
|
||||
### Networks
|
||||
|
||||
Lists all Docker networks. Columns: name, driver, scope (`local`, `global`, `swarm`), and managed status.
|
||||
Lists all Docker networks. Columns: ID, name, driver, scope (`local`, `global`, `swarm`), and managed status.
|
||||
|
||||
**Filter buttons:** `All` · `Managed` · `External` · `System`
|
||||
**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`.
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Reference in New Issue
Block a user