🚧 Work in progress on the Docker integration

src/components/Docker/DockerMenu.tsx

@@ -0,0 +1,93 @@
+import { Center, createStyles, Menu, Text, useMantineTheme } from '@mantine/core';
+import { showNotification, updateNotification } from '@mantine/notifications';
+import {
+  IconCheck,
+  IconCodePlus,
+  IconDownload,
+  IconFileText,
+  IconPlayerPlay,
+  IconPlayerStop,
+  IconRotateClockwise,
+  IconX,
+} from '@tabler/icons';
+import axios from 'axios';
+import Dockerode from 'dockerode';
+
+function sendNotification(action: string, containerId: string, containerName: string) {
+  showNotification({
+    id: 'load-data',
+    loading: true,
+    title: `${action}ing container ${containerName}`,
+    message: 'Your password is being checked...',
+    autoClose: false,
+    disallowClose: true,
+  });
+  axios.get(`/api/docker/container/${containerId}?action=${action}`).then((res) => {
+    setTimeout(() => {
+      if (res.data.success === true) {
+        updateNotification({
+          id: 'load-data',
+          title: 'Container restarted',
+          message: 'Your container was successfully restarted',
+          icon: <IconCheck />,
+          autoClose: 2000,
+        });
+      }
+      if (res.data.success === false) {
+        updateNotification({
+          id: 'load-data',
+          color: 'red',
+          title: 'There was an error restarting your container.',
+          message: 'Your container has encountered issues while restarting.',
+          icon: <IconX />,
+          autoClose: 2000,
+        });
+      }
+    }, 500);
+  });
+}
+
+function restart(container: Dockerode.ContainerInfo) {
+  sendNotification('restart', container.Id, container.Names[0]);
+}
+function stop(container: Dockerode.ContainerInfo) {
+  console.log('stoping container', container.Id);
+}
+function start(container: Dockerode.ContainerInfo) {
+  console.log('starting container', container.Id);
+}
+
+export default function DockerMenu(props: any) {
+  const { container }: { container: Dockerode.ContainerInfo } = props;
+  const theme = useMantineTheme();
+  if (container === undefined) {
+    return null;
+  }
+  return (
+    <Menu shadow="lg" radius="md">
+      <Menu.Label>Actions</Menu.Label>
+      <Menu.Item icon={<IconRotateClockwise color="orange" />} onClick={() => restart(container)}>
+        <Text>Restart</Text>
+      </Menu.Item>
+      {container.State === 'running' ? (
+        <Menu.Item icon={<IconPlayerStop color="red" />}>
+          <Text>Stop</Text>
+        </Menu.Item>
+      ) : (
+        <Menu.Item icon={<IconPlayerPlay color="green" />}>
+          <Text>Start</Text>
+        </Menu.Item>
+      )}
+      {/* <Menu.Item icon={<IconDownload color="blue" />}>
+        <Text>Pull latest image </Text>
+      </Menu.Item>
+      <Menu.Item icon={<IconFileText color="grey" />}>
+        <Text>Logs</Text>
+      </Menu.Item> */}
+      <Menu.Label>Homarr</Menu.Label>
+      <Menu.Item icon={<IconCodePlus color={theme.primaryColor} />}>
+        <Text>Add to Homarr</Text>
+      </Menu.Item>
+    </Menu>
+  );
+}