✨ add start/stop/restart feature on containers

src/components/Docker/ContainerActionBar.tsx

@@ -4,6 +4,7 @@ import {
   IconCheck,
   IconPlayerPlay,
   IconPlayerStop,
+  IconRefresh,
   IconRotateClockwise,
   IconX,
 } from '@tabler/icons';
@@ -12,10 +13,10 @@ import Dockerode from 'dockerode';
 
 function sendNotification(action: string, containerId: string, containerName: string) {
   showNotification({
-    id: 'load-data',
+    id: containerId,
     loading: true,
     title: `${action}ing container ${containerName}`,
-    message: 'Your password is being checked...',
+    message: undefined,
     autoClose: false,
     disallowClose: true,
   });
@@ -23,19 +24,19 @@ function sendNotification(action: string, containerId: string, containerName: st
     setTimeout(() => {
       if (res.data.success === true) {
         updateNotification({
-          id: 'load-data',
-          title: 'Container restarted',
-          message: 'Your container was successfully restarted',
+          id: containerId,
+          title: `Container ${containerName} ${action}ed`,
+          message: `Your container was successfully ${action}ed`,
           icon: <IconCheck />,
           autoClose: 2000,
         });
       }
       if (res.data.success === false) {
         updateNotification({
-          id: 'load-data',
+          id: containerId,
           color: 'red',
-          title: 'There was an error restarting your container.',
-          message: 'Your container has encountered issues while restarting.',
+          title: 'There was an error with your container.',
+          message: undefined,
           icon: <IconX />,
           autoClose: 2000,
         });
@@ -44,39 +45,58 @@ function sendNotification(action: string, containerId: string, containerName: st
   });
 }
 
-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 interface ContainerActionBarProps {
   selected: Dockerode.ContainerInfo[];
+  reload: () => void;
 }
 
-export default function ContainerActionBar(props: ContainerActionBarProps) {
-  const { selected } = props;
+export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
   return (
     <Group>
       <Button
         leftIcon={<IconRotateClockwise />}
-        onClick={() => selected.map((container) => restart(container))}
-        variant="filled"
+        onClick={() =>
+          Promise.all(
+            selected.map((container) =>
+              sendNotification('restart', container.Id, container.Names[0])
+            )
+          ).then(() => reload())
+        }
+        variant="light"
         color="orange"
         radius="md"
       >
         Restart
       </Button>
-      <Button leftIcon={<IconPlayerStop />} variant="filled" color="red" radius="md">
+      <Button
+        leftIcon={<IconPlayerStop />}
+        onClick={() =>
+          Promise.all(
+            selected.map((container) => sendNotification('stop', container.Id, container.Names[0]))
+          ).then(() => reload())
+        }
+        variant="light"
+        color="red"
+        radius="md"
+      >
         Stop
       </Button>
-      <Button leftIcon={<IconPlayerPlay />} variant="filled" color="green" radius="md">
+      <Button
+        leftIcon={<IconPlayerPlay />}
+        onClick={() =>
+          Promise.all(
+            selected.map((container) => sendNotification('start', container.Id, container.Names[0]))
+          ).then(() => reload())
+        }
+        variant="light"
+        color="green"
+        radius="md"
+      >
         Start
       </Button>
+      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light">
+        Refresh data
+      </Button>
     </Group>
   );
 }

src/components/Docker/DockerDrawer.tsx

@@ -33,6 +33,12 @@ export default function DockerDrawer(props: any) {
   const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
   const { classes, cx } = useStyles();
   const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
+  function reload() {
+    axios.get('/api/docker/containers').then((res) => {
+      setContainers(res.data);
+    });
+  }
+
   const toggleRow = (container: Docker.ContainerInfo) =>
     setSelection((current) =>
       current.includes(container) ? current.filter((c) => c !== container) : [...current, container]
@@ -43,9 +49,7 @@ export default function DockerDrawer(props: any) {
     );
 
   useEffect(() => {
-    axios.get('/api/docker/containers').then((res) => {
-      setContainers(res.data);
-    });
+    reload();
   }, []);
   const rows = containers.map((element) => {
     const selected = selection.includes(element);
@@ -62,15 +66,15 @@ export default function DockerDrawer(props: any) {
         <td>{element.Image}</td>
         <td>
           <Group>
-            {element.Ports.slice(-3).map((port) => (
-              <Badge variant="outline">
-                {port.PrivatePort}:{port.PublicPort}
-              </Badge>
-            ))}
+            {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
+              .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>
+              <Badge variant="filled">{element.Ports.length - 3} more</Badge>
             )}
           </Group>
         </td>
@@ -85,7 +89,7 @@ export default function DockerDrawer(props: any) {
     <>
       <Drawer opened={opened} onClose={() => setOpened(false)} padding="xl" size="full">
         <ScrollArea>
-          <ContainerActionBar selected={selection} />
+          <ContainerActionBar selected={selection} reload={reload} />
           <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
             <caption>your docker containers</caption>
             <thead>

src/pages/api/docker/container/[id].tsx

@@ -29,11 +29,39 @@ async function Get(req: NextApiRequest, res: NextApiResponse) {
       });
     }
   });
-  if (action === 'restart') {
-    await container.restart();
-    return res.status(200).json({
-      success: true,
-    });
+
+  switch (action) {
+    case 'start':
+      container.start((err, data) => {
+        if (err) {
+          res.status(500).json({
+            message: err,
+          });
+        }
+      });
+      break;
+    case 'stop':
+      container.stop((err, data) => {
+        if (err) {
+          res.status(500).json({
+            message: err,
+          });
+        }
+      });
+      break;
+    case 'restart':
+      container.restart((err, data) => {
+        if (err) {
+          res.status(500).json({
+            message: err,
+          });
+        }
+      });
+      break;
+    default:
+      res.status(400).json({
+        message: 'Invalid action',
+      });
   }
   return res.status(200).json({
     success: true,