diff --git a/src/routes/networks/+page.svelte b/src/routes/networks/+page.svelte index a0993bb..b1b0fec 100644 --- a/src/routes/networks/+page.svelte +++ b/src/routes/networks/+page.svelte @@ -9,7 +9,7 @@ import { Button } from '$lib/components/ui/button'; import { Input } from '$lib/components/ui/input'; import MultiSelectFilter from '$lib/components/MultiSelectFilter.svelte'; - import { Trash2, Search, Plus, Eye, Check, XCircle, RefreshCw, Icon, AlertTriangle, X, Network, Link, Copy, CopyPlus, Share2, Server, Globe, MonitorSmartphone, Cpu, CircleOff } from 'lucide-svelte'; + import { Trash2, Search, Plus, Eye, Check, XCircle, RefreshCw, Icon, AlertTriangle, X, Network, Link, Copy, CopyPlus, Share2, Server, Globe, MonitorSmartphone, Cpu, CircleOff, GitGraph } from 'lucide-svelte'; import { broom } from '@lucide/lab'; import { copyToClipboard } from '$lib/utils/clipboard'; import ConfirmPopover from '$lib/components/ConfirmPopover.svelte'; @@ -25,6 +25,7 @@ import PageHeader from '$lib/components/PageHeader.svelte'; import { DataGrid } from '$lib/components/data-grid'; import { ipToNumber } from '$lib/utils/ip'; + import NetworkGraphModal from './NetworkGraphModal.svelte'; type SortField = 'name' | 'driver' | 'containers' | 'subnet' | 'gateway'; type SortDirection = 'asc' | 'desc'; @@ -83,6 +84,7 @@ let showCreateModal = $state(false); let showInspectModal = $state(false); let showConnectModal = $state(false); + let showGraphModal = $state(false); let inspectNetworkId = $state(''); let inspectNetworkName = $state(''); let connectNetwork = $state(null); @@ -351,6 +353,10 @@ showConnectModal = true; } + function openGraphModal() { + showGraphModal = true; + } + async function disconnectContainer(networkId: string, networkName: string, containerId: string, containerName: string) { disconnectingContainerId = containerId; try { @@ -554,6 +560,10 @@ Refresh + {#if $canAccess('networks', 'create')}