✨ Make discord integration a module

This allows for an error message if the docker integration fails to load

src/components/modules/dash./DashdotModule.tsx

@@ -181,7 +181,7 @@ export function DashdotComponent() {
               <div className={classes.tableRow}>
                 <p className={classes.tableLabel}>Storage:</p>
                 <p className={classes.tableValue}>
-                  {(100 * totalUsed / (totalSize || 1)).toFixed(1)}%{'\n'}
+                  {((100 * totalUsed) / (totalSize || 1)).toFixed(1)}%{'\n'}
                   {bytePrettyPrint(totalUsed)} / {bytePrettyPrint(totalSize)}
                 </p>
               </div>

src/components/modules/docker/ContainerActionBar.tsx

@@ -0,0 +1,182 @@
+import { Button, Group, Modal, Title } from '@mantine/core';
+import { useBooleanToggle } from '@mantine/hooks';
+import { showNotification, updateNotification } from '@mantine/notifications';
+import {
+  IconCheck,
+  IconPlayerPlay,
+  IconPlayerStop,
+  IconPlus,
+  IconRefresh,
+  IconRotateClockwise,
+  IconTrash,
+  IconX,
+} from '@tabler/icons';
+import axios from 'axios';
+import Dockerode from 'dockerode';
+import { tryMatchService } from '../../../tools/addToHomarr';
+import { useConfig } from '../../../tools/state';
+import { AddAppShelfItemForm } from '../../AppShelf/AddAppShelfItem';
+
+function sendDockerCommand(action: string, containerId: string, containerName: string) {
+  showNotification({
+    id: containerId,
+    loading: true,
+    title: `${action}ing container ${containerName.substring(1)}`,
+    message: undefined,
+    autoClose: false,
+    disallowClose: true,
+  });
+  axios.get(`/api/docker/container/${containerId}?action=${action}`).then((res) => {
+    setTimeout(() => {
+      if (res.data.success === true) {
+        updateNotification({
+          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: containerId,
+          color: 'red',
+          title: 'There was an error with your container.',
+          message: undefined,
+          icon: <IconX />,
+          autoClose: 2000,
+        });
+      }
+    }, 500);
+  });
+}
+
+export interface ContainerActionBarProps {
+  selected: Dockerode.ContainerInfo[];
+  reload: () => void;
+}
+
+export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
+  const { config, setConfig } = useConfig();
+  const [opened, setOpened] = useBooleanToggle(false);
+  return (
+    <Group>
+      <Modal
+        size="xl"
+        radius="md"
+        opened={opened}
+        onClose={() => setOpened(false)}
+        title="Add service"
+      >
+        <AddAppShelfItemForm
+          setOpened={setOpened}
+          {...tryMatchService(selected.at(0))}
+          message="Add service to homarr"
+        />
+      </Modal>
+      <Button
+        leftIcon={<IconRotateClockwise />}
+        onClick={() =>
+          Promise.all(
+            selected.map((container) =>
+              sendDockerCommand('restart', container.Id, container.Names[0].substring(1))
+            )
+          ).then(() => reload())
+        }
+        variant="light"
+        color="orange"
+        radius="md"
+      >
+        Restart
+      </Button>
+      <Button
+        leftIcon={<IconPlayerStop />}
+        onClick={() =>
+          Promise.all(
+            selected.map((container) => {
+              if (
+                container.State === 'stopped' ||
+                container.State === 'created' ||
+                container.State === 'exited'
+              ) {
+                return showNotification({
+                  id: container.Id,
+                  title: `Failed to stop ${container.Names[0].substring(1)}`,
+                  message: "You can't stop a stopped container",
+                  autoClose: 1000,
+                });
+              }
+              return sendDockerCommand('stop', container.Id, container.Names[0].substring(1));
+            })
+          ).then(() => reload())
+        }
+        variant="light"
+        color="red"
+        radius="md"
+      >
+        Stop
+      </Button>
+      <Button
+        leftIcon={<IconPlayerPlay />}
+        onClick={() =>
+          Promise.all(
+            selected.map((container) =>
+              sendDockerCommand('start', container.Id, container.Names[0].substring(1))
+            )
+          ).then(() => reload())
+        }
+        variant="light"
+        color="green"
+        radius="md"
+      >
+        Start
+      </Button>
+      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" radius="md">
+        Refresh data
+      </Button>
+      <Button
+        leftIcon={<IconPlus />}
+        color="indigo"
+        variant="light"
+        radius="md"
+        onClick={() => {
+          if (selected.length !== 1) {
+            showNotification({
+              autoClose: 5000,
+              title: <Title order={4}>Please only add one service at a time!</Title>,
+              color: 'red',
+              message: undefined,
+            });
+          } else {
+            setOpened(true);
+          }
+        }}
+      >
+        Add to Homarr
+      </Button>
+      <Button
+        leftIcon={<IconTrash />}
+        color="red"
+        variant="light"
+        radius="md"
+        onClick={() =>
+          Promise.all(
+            selected.map((container) => {
+              if (container.State === 'running') {
+                return showNotification({
+                  id: container.Id,
+                  title: `Failed to delete ${container.Names[0].substring(1)}`,
+                  message: "You can't delete a running container",
+                  autoClose: 1000,
+                });
+              }
+              return sendDockerCommand('remove', container.Id, container.Names[0].substring(1));
+            })
+          ).then(() => reload())
+        }
+      >
+        Remove
+      </Button>
+    </Group>
+  );
+}

src/components/modules/docker/ContainerState.tsx

@@ -0,0 +1,49 @@
+import { Badge, BadgeVariant, MantineSize } from '@mantine/core';
+import Dockerode from 'dockerode';
+
+export interface ContainerStateProps {
+  state: Dockerode.ContainerInfo['State'];
+}
+
+export default function ContainerState(props: ContainerStateProps) {
+  const { state } = props;
+  const options: {
+    size: MantineSize;
+    radius: MantineSize;
+    variant: BadgeVariant;
+  } = {
+    size: 'md',
+    radius: 'md',
+    variant: 'outline',
+  };
+  switch (state) {
+    case 'running': {
+      return (
+        <Badge color="green" {...options}>
+          Running
+        </Badge>
+      );
+    }
+    case 'created': {
+      return (
+        <Badge color="cyan" {...options}>
+          Created
+        </Badge>
+      );
+    }
+    case 'exited': {
+      return (
+        <Badge color="red" {...options}>
+          Stopped
+        </Badge>
+      );
+    }
+    default: {
+      return (
+        <Badge color="purple" {...options}>
+          Unknown
+        </Badge>
+      );
+    }
+  }
+}

src/components/modules/docker/DockerModule.tsx

@@ -0,0 +1,80 @@
+import { ActionIcon, Drawer, Group, LoadingOverlay, Text } from '@mantine/core';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import Docker from 'dockerode';
+import { IconBrandDocker, IconX } from '@tabler/icons';
+import { showNotification } from '@mantine/notifications';
+import ContainerActionBar from './ContainerActionBar';
+import DockerTable from './DockerTable';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
+
+export const DockerModule: IModule = {
+  title: 'Docker',
+  description: 'Allows you to easily manage your torrents',
+  icon: IconBrandDocker,
+  component: DockerMenuButton,
+};
+
+export default function DockerMenuButton(props: any) {
+  const [opened, setOpened] = useState(false);
+  const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
+  const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
+  const [visible, setVisible] = useState(false);
+  const { config } = useConfig();
+
+  useEffect(() => {
+    reload();
+  }, []);
+
+  function reload() {
+    setVisible(true);
+    setTimeout(() => {
+      axios
+        .get('/api/docker/containers')
+        .then((res) => {
+          setContainers(res.data);
+          setSelection([]);
+          setVisible(false);
+        })
+        .catch(() =>
+          // Send an Error notification
+          showNotification({
+            autoClose: 1500,
+            title: <Text>Docker integration failed</Text>,
+            color: 'red',
+            icon: <IconX />,
+            message: 'Did you forget to mount the docker socket ?',
+          })
+        );
+    }, 300);
+  }
+  const exists = config.modules?.[DockerModule.title]?.enabled ?? false;
+  if (!exists) {
+    return null;
+  }
+  // Check if the user has at least one container
+  if (containers.length < 1) return null;
+  return (
+    <>
+      <Drawer opened={opened} onClose={() => setOpened(false)} padding="xl" size="full">
+        <ContainerActionBar selected={selection} reload={reload} />
+        <div style={{ position: 'relative' }}>
+          <LoadingOverlay transitionDuration={500} visible={visible} />
+          <DockerTable containers={containers} selection={selection} setSelection={setSelection} />
+        </div>
+      </Drawer>
+      <Group position="center">
+        <ActionIcon
+          variant="default"
+          radius="md"
+          size="xl"
+          color="blue"
+          onClick={() => setOpened(true)}
+        >
+          <IconBrandDocker />
+        </ActionIcon>
+      </Group>
+    </>
+  );
+}

src/components/modules/docker/DockerTable.tsx

@@ -0,0 +1,90 @@
+import { Table, Checkbox, Group, Badge, createStyles } from '@mantine/core';
+import Dockerode from 'dockerode';
+import ContainerState from './ContainerState';
+
+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 DockerTable({
+  containers,
+  selection,
+  setSelection,
+}: {
+  setSelection: any;
+  containers: Dockerode.ContainerInfo[];
+  selection: Dockerode.ContainerInfo[];
+}) {
+  const { classes, cx } = useStyles();
+
+  const toggleRow = (container: Dockerode.ContainerInfo) =>
+    setSelection((current: Dockerode.ContainerInfo[]) =>
+      current.includes(container) ? current.filter((c) => c !== container) : [...current, container]
+    );
+  const toggleAll = () =>
+    setSelection((current: any) =>
+      current.length === containers.length ? [] : containers.map((c) => c)
+    );
+
+  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.sort((a, b) => a.PrivatePort - b.PrivatePort)
+              .slice(-3)
+              .map((port) => (
+                <Badge key={port.PrivatePort} 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 (
+    <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>
+  );
+}

src/components/modules/docker/index.ts

@@ -0,0 +1 @@
+export { DockerModule } from './DockerModule';

src/components/modules/index.ts

@@ -5,3 +5,4 @@ export * from './downloads';
 export * from './ping';
 export * from './search';
 export * from './weather';
+export * from './docker';

src/components/modules/search/SearchModule.tsx

@@ -1,4 +1,4 @@
-import { Kbd, createStyles, Text, Popover, Autocomplete, Tooltip } from '@mantine/core';
+import { Kbd, createStyles, Autocomplete } from '@mantine/core';
 import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
 import { useEffect, useRef, useState } from 'react';
 import {

src/components/modules/weather/WeatherModule.tsx

@@ -157,7 +157,7 @@ export default function WeatherComponent(props: any) {
       });
   }, [cityInput]);
   if (!weather.current_weather) {
-        return (
+    return (
       <>
         <Skeleton height={40} width={100} mb="xl" />
         <Group noWrap direction="row">