🚧 Work in progress on the Docker integration

src/components/Docker/DockerDrawer.tsx

@@ -1,37 +1,114 @@
-import { ActionIcon, Drawer, Group, List, Text } from '@mantine/core';
+import {
+  ActionIcon,
+  Badge,
+  Checkbox,
+  createStyles,
+  Drawer,
+  Group,
+  List,
+  Menu,
+  ScrollArea,
+  Table,
+  Text,
+} from '@mantine/core';
 import { IconBrandDocker } from '@tabler/icons';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import Docker from 'dockerode';
+import DockerMenu from './DockerMenu';
+import ContainerState from './ContainerState';
+import ContainerActionBar from './ContainerActionBar';
+
+const useStyles = createStyles((theme) => ({
+  rowSelected: {
+    backgroundColor:
+      theme.colorScheme === 'dark'
+        ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
+        : theme.colors[theme.primaryColor][0],
+  },
+}));
 
 export default function DockerDrawer(props: any) {
   const [opened, setOpened] = useState(false);
-  const [containers, setContainers] = useState<any[]>([]);
+  const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
+  const { classes, cx } = useStyles();
+  const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
+  const toggleRow = (container: Docker.ContainerInfo) =>
+    setSelection((current) =>
+      current.includes(container) ? current.filter((c) => c !== container) : [...current, container]
+    );
+  const toggleAll = () =>
+    setSelection((current) =>
+      current.length === containers.length ? [] : containers.map((c) => c)
+    );
+
   useEffect(() => {
     axios.get('/api/docker/containers').then((res) => {
       setContainers(res.data);
     });
   }, []);
+  const rows = containers.map((element) => {
+    const selected = selection.includes(element);
+    return (
+      <tr key={element.Id} className={cx({ [classes.rowSelected]: selected })}>
+        <td>
+          <Checkbox
+            checked={selection.includes(element)}
+            onChange={() => toggleRow(element)}
+            transitionDuration={0}
+          />
+        </td>
+        <td>{element.Names[0].replace('/', '')}</td>
+        <td>{element.Image}</td>
+        <td>
+          <Group>
+            {element.Ports.slice(-3).map((port) => (
+              <Badge variant="outline">
+                {port.PrivatePort}:{port.PublicPort}
+              </Badge>
+            ))}
+            {element.Ports.length > 3 && (
+              <Badge variant="filled">
+                {element.Ports.length - 3} more
+              </Badge>
+            )}
+          </Group>
+        </td>
+        <td>
+          <ContainerState state={element.State} />
+        </td>
+      </tr>
+    );
+  });
+
   return (
     <>
-      <Drawer
-        opened={opened}
-        onClose={() => setOpened(false)}
-        title="Register"
-        padding="xl"
-        size="full"
-      >
-        <List>
-          {containers.map((container) => (
-            <List.Item key={container.Id}>
-              <Text>{container.Names[0]}</Text>
-              <Text>{container.State}</Text>
-              <Text>{container.Status}</Text>
-              <Text>{container.Image}</Text>
-            </List.Item>
-          ))}
-        </List>
+      <Drawer opened={opened} onClose={() => setOpened(false)} padding="xl" size="full">
+        <ScrollArea>
+          <ContainerActionBar selected={selection} />
+          <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
+            <caption>your docker containers</caption>
+            <thead>
+              <tr>
+                <th style={{ width: 40 }}>
+                  <Checkbox
+                    onChange={toggleAll}
+                    checked={selection.length === containers.length}
+                    indeterminate={selection.length > 0 && selection.length !== containers.length}
+                    transitionDuration={0}
+                  />
+                </th>
+                <th>Name</th>
+                <th>Image</th>
+                <th>Ports</th>
+                <th>State</th>
+              </tr>
+            </thead>
+            <tbody>{rows}</tbody>
+          </Table>
+        </ScrollArea>
       </Drawer>
+      <DockerMenu container={containers?.at(0)} />
       <Group position="center">
         <ActionIcon
           variant="default"