Display aliases and ip addresses on networks table if possible

src/Service.tsx

@@ -16,7 +16,7 @@ import LabelsTable, { createLabels, LabelDetails } from './tables/LabelsTable';
 import TasksTable, { createTaskDetails, TaskDetails } from './tables/TasksTable';
 import SecretsTable, { buildServicesBySecret, createSecretDetails, SecretDetails } from './tables/SecretsTable';
 import ConfigsTable, { buildServicesByConfig, ConfigDetails, createConfigDetails } from './tables/ConfigsTable';
-import NetworksTable, { createNetworkDetails, NetworkDetails } from './tables/NetworksTable';
+import NetworkAttachmentsTable, { createNetworkAttachmentDetails, NetworkAttachmentDetails } from './tables/NetworkAttachmentsTable';
 import SimpleTable from './SimpleTable';
 
 interface ServiceProps {
@@ -36,7 +36,7 @@ function ServiceUi(props: ServiceProps) {
   const [tab, setTab] = useState(0)
 
   const [labelDetails, setLabelDetails] = useState<LabelDetails[]>([])
-  const [networkDetails, setNetworkDetails] = useState<NetworkDetails[]>([])
+  const [networkDetails, setNetworkDetails] = useState<NetworkAttachmentDetails[]>([])
   const [configDetails, setConfigDetails] = useState<ConfigDetails[]>([])
   const [secretDetails, setSecretDetails] = useState<SecretDetails[]>([])
   const [taskDetails, setTaskDetails] = useState<TaskDetails[]>([])
@@ -89,11 +89,11 @@ function ServiceUi(props: ServiceProps) {
           if (current.Target) {
             const net = networks.find(n => n.Id = current.Target)
             if (net) {
-              result.push(createNetworkDetails(net))
+              result.push(createNetworkAttachmentDetails(net, service?.Spec?.Networks?.find(nac => nac.Target == current.Target)))
             }
           }
           return result
-        }, [] as NetworkDetails[]))
+        }, [] as NetworkAttachmentDetails[]))
       } else {
         setNetworkDetails([])
       }
@@ -319,7 +319,7 @@ function ServiceUi(props: ServiceProps) {
                 </Section>
 
                 <Section id="service.networks" heading="Networks" xs={12} >
-                  <NetworksTable id="service.networks.table" networks={networkDetails} />
+                  <NetworkAttachmentsTable id="service.networks.table" networks={networkDetails} />
                 </Section>
 
                 <Section id="service.reach" heading="Reach" xs={12} >

src/Task.tsx

@@ -13,7 +13,7 @@ import { DockerApi } from './DockerApi';
 import KeyValueTable from './KeyValueTable';
 import SimpleTable from './SimpleTable';
 import LabelsTable, { LabelDetails, createLabels } from './tables/LabelsTable';
-import NetworksTable, { createNetworkDetails, NetworkDetails } from './tables/NetworksTable';
+import NetworkAttachmentsTable, { createNetworkAttachmentDetails, NetworkAttachmentDetails } from './tables/NetworkAttachmentsTable';
 import ServicesTable, { createServiceDetails, ServiceDetails } from './tables/ServicesTable';
 
 interface TaskUiProps {
@@ -30,7 +30,7 @@ function TaskUi(props: TaskUiProps) {
 
   const [labelDetails, setLabelDetails] = useState<LabelDetails[]>([])
   const [serviceDetails, setServiceDetails] = useState<ServiceDetails[]>([])
-  const [networkDetails, setNetworkDetails] = useState<NetworkDetails[]>([])
+  const [networkDetails, setNetworkDetails] = useState<NetworkAttachmentDetails[]>([])
 
   const [task, setTask] = useState<Task | undefined>()
 
@@ -70,18 +70,25 @@ function TaskUi(props: TaskUiProps) {
       labels = createLabels(labels, task?.Labels, 'Task');
       labels = createLabels(labels, task?.Spec?.ContainerSpec?.Labels, 'Container');
       setLabelDetails(labels)
+
+      const service = task?.ServiceID ? servicesById.get(task?.ServiceID) : undefined
 
       setNetworkDetails(task?.Spec?.Networks?.reduce((result, current) => {
         if (current.Target) {
-          const net = networksById.get(current.Target)
+          const net = networksById.get(current.Target)          
           if (net) {
-            result.push(createNetworkDetails(net))
+            result.push(
+              createNetworkAttachmentDetails(
+                net
+                , service?.Spec?.Networks?.find(nac => nac.Target === current.Target)
+                , Object.entries(container?.NetworkSettings?.Networks || {})?.find(entry => entry[1].NetworkID === current.Target)?.[1]
+              )
+            )
           }
         }
         return result
-      }, [] as NetworkDetails[]) || [])
+      }, [] as NetworkAttachmentDetails[]) || [])
 
-      const service = task?.ServiceID ? servicesById.get(task?.ServiceID) : undefined
       if (service) {
         setServiceDetails([createServiceDetails(service, exposedPorts)])
       }
@@ -281,7 +288,7 @@ function TaskUi(props: TaskUiProps) {
                 </Section>
 
                 <Section id="task.networks" heading="Networks" xs={12} >
-                  <NetworksTable id="task.networks.table" networks={networkDetails} />
+                  <NetworkAttachmentsTable id="task.networks.table" networks={networkDetails} />
                 </Section>
 
                 <Section id="tasks.reach" heading="Reach" xs={12} >

src/tables/NetworkAttachmentsTable.tsx

@@ -0,0 +1,87 @@
+import MaterialTable from '../MaterialTable';
+import { Link } from 'react-router-dom';
+import { MRT_ColumnDef } from 'material-react-table';
+import { EndpointSettings, Network, NetworkAttachmentConfig } from '../docker-schema';
+import { Dimensions } from '../app-types';
+
+export interface NetworkAttachmentDetails {
+  id: string
+  name?: string
+  aliases?: string
+  address?: string
+  driver?: string
+  scope?: string
+  encrypted?: string
+}
+const networkColumns: MRT_ColumnDef<NetworkAttachmentDetails>[] = [
+  {
+    accessorKey: 'id',
+    header: 'ID',
+    size: 220,
+    Cell: ({ renderedCellValue, row }) => (<Link to={"/network/" + row.original.id} >{renderedCellValue}</Link>)
+  },
+  {
+    accessorKey: 'name',
+    header: 'NAME',
+    size: 400,
+  },
+  {
+    accessorKey: 'aliases',
+    header: 'ALIASES',
+    size: 400,
+  },
+  {
+    accessorKey: 'address',
+    header: 'ADDRESS',
+    size: 400,
+  },
+  {
+    accessorKey: 'driver',
+    header: 'DRIVER',
+    size: 150,
+  },
+  {
+    accessorKey: 'scope',
+    header: 'SCOPE',
+    size: 160,
+  },
+  {
+    accessorKey: 'encrypted',
+    header: 'ENCRYPTED',
+    size: 180,
+  },
+]
+
+interface NetworkAttachmentsTableProps {
+  id: string
+  networks: NetworkAttachmentDetails[]
+  border?: boolean
+  maxSize?: Dimensions
+}
+function NetworkAttachmentsTable(props: NetworkAttachmentsTableProps) {
+  return (
+    <MaterialTable
+      id={props.id}
+      columns={networkColumns}
+      data={props.networks}
+      border={props.border}
+      virtual={false}
+      muiTableContainerProps={ props.maxSize ? { sx: { maxHeight: props.maxSize.height + 'px', maxWidth: props.maxSize.width + 'px' } } : {}}
+    />
+  )
+}
+
+export function createNetworkAttachmentDetails(net: Network, attachment?: NetworkAttachmentConfig, endpoint?: EndpointSettings): NetworkAttachmentDetails {
+
+  return {
+    id: net.Id || ''
+    , name: net.Name
+    , aliases: attachment?.Aliases?.join(', ') || ''
+    , address: endpoint?.IPAddress || ''
+    , driver: net.Driver
+    , scope: net.Scope
+    , encrypted: net?.Options?.encrypted
+  }
+}
+
+export default NetworkAttachmentsTable;