🔀 Merge pull request #374 from Skeeww/ui/docker

💄Improve Docker module UI
2026-01-07 08:02:12 +01:00 · 2022-09-02 13:03:03 +02:00
parent 17364f46cd 713dec2969
commit 91ed7a24ca
7 changed files with 99 additions and 59 deletions
--- a/next-i18next.config.js
+++ b/next-i18next.config.js
@@ -1,6 +1,5 @@
 module.exports = {
  // https://www.i18next.com/overview/configuration-options#logging
-  debug: process.env.NODE_ENV === 'development',
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'de', 'en', 'es', 'fr', 'it', 'ja', 'nl', 'pl', 'ru', 'sl', 'sv', 'zh'],
--- a/public/locales/en/modules/docker.json
+++ b/public/locales/en/modules/docker.json
@@ -37,12 +37,14 @@
    "start": {
      "title": "Start"
    },
-    "refreshData": "Refresh data",
-    "addToHomarr": {
-      "title": "Add to Homarr"
+    "refreshData": {
+      "title": "Refresh data"
    },
    "remove": {
      "title": "Remove"
+    },
+    "addToHomarr": {
+      "title": "Add to Homarr"
    }
  },
  "messages": {
--- a/src/components/AppShelf/AddAppShelfItem.tsx
+++ b/src/components/AppShelf/AddAppShelfItem.tsx
@@ -25,10 +25,11 @@ import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { useConfig } from '../../tools/state';
-import { ServiceTypeList, StatusCodes, tryMatchPort } from '../../tools/types';
+import { tryMatchPort, ServiceTypeList, StatusCodes, Config } from '../../tools/types';
 import Tip from '../layout/Tip';

 export function AddItemShelfButton(props: any) {
+  const { config, setConfig } = useConfig();
  const [opened, setOpened] = useState(false);
  const { t } = useTranslation('layout/add-service-app-shelf');
  return (
@@ -40,7 +41,7 @@ export function AddItemShelfButton(props: any) {
        opened={props.opened || opened}
        onClose={() => setOpened(false)}
      >
-        <AddAppShelfItemForm setOpened={setOpened} />
+        <AddAppShelfItemForm config={config} setConfig={setConfig} setOpened={setOpened} />
      </Modal>
      <Tooltip withinPortal label={t('actionIcon.tooltip')}>
        <ActionIcon
@@ -83,9 +84,17 @@ function MatchService(name: string, form: any) {

 const DEFAULT_ICON = '/favicon.png';

-export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } & any) {
-  const { setOpened } = props;
-  const { config, setConfig } = useConfig();
+interface AddAppShelfItemFormProps {
+  setOpened: (b: boolean) => void;
+  config: Config;
+  setConfig: (config: Config) => void;
+  // Any other props you want to pass to the form
+  [key: string]: any;
+}
+
+export function AddAppShelfItemForm(props: AddAppShelfItemFormProps) {
+  const { setOpened, config, setConfig } = props;
+  // Only get config and setConfig from useCOnfig if they are not present in props
  const [isLoading, setLoading] = useState(false);
  const { t } = useTranslation('layout/add-service-app-shelf');

@@ -201,6 +210,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
              }),
            });
          } else {
+            console.log(newForm);
            setConfig({
              ...config,
              services: [...config.services, newForm],
@@ -401,8 +411,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
              )}
            </Stack>
          </Tabs.Panel>
-          <Tabs.Panel value={t('modal.tabs.advancedOptions.title')}>
-            <Space h="sm" />
+          <Tabs.Panel value="Advanced Options">
            <Stack>
              <Switch
                label={t('modal.tabs.advancedOptions.form.ping.label')}
--- a/src/modules/docker/ContainerActionBar.tsx
+++ b/src/modules/docker/ContainerActionBar.tsx
@@ -1,4 +1,6 @@
-import { Button, Group, Modal, Title } from '@mantine/core';
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { Button, Group, TextInput, Title } from '@mantine/core';
+import { closeAllModals, closeModal, openModal } from '@mantine/modals';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import {
  IconCheck,
@@ -11,10 +13,14 @@ import {
 } from '@tabler/icons';
 import axios from 'axios';
 import Dockerode from 'dockerode';
-import { useState } from 'react';
 import { useTranslation } from 'next-i18next';
-import { tryMatchService } from '../../tools/addToHomarr';
+import { useState } from 'react';
+import { TFunction } from 'react-i18next';
 import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
+import { tryMatchService } from '../../tools/addToHomarr';
+import { useConfig } from '../../tools/state';
+
+let t: TFunction<'modules/docker', undefined>;

 function sendDockerCommand(
  action: string,
@@ -22,8 +28,6 @@ function sendDockerCommand(
  containerName: string,
  reload: () => void
 ) {
-  const { t } = useTranslation('modules/docker');
-
  showNotification({
    id: containerId,
    loading: true,
@@ -63,24 +67,28 @@ export interface ContainerActionBarProps {
 }

 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
-  const [opened, setOpened] = useState<boolean>(false);
-  const { t } = useTranslation('modules/docker');
+  t = useTranslation('modules/docker').t;
+  const [isLoading, setisLoading] = useState(false);
+  const { config, setConfig } = useConfig();

  return (
    <Group>
-      <Modal
-        size="xl"
+      <Button
+        leftIcon={<IconRefresh />}
+        onClick={() => {
+          setisLoading(true);
+          setTimeout(() => {
+            reload();
+            setisLoading(false);
+          }, 750);
+        }}
+        variant="light"
+        color="violet"
+        loading={isLoading}
        radius="md"
-        opened={opened}
-        onClose={() => setOpened(false)}
-        title={t('actionBar.addService.title')}
      >
-        <AddAppShelfItemForm
-          setOpened={setOpened}
-          {...tryMatchService(selected.at(0))}
-          message={t('actionBar.addService.message')}
-        />
-      </Modal>
+        {t('actionBar.refreshData.title')}
+      </Button>
      <Button
        leftIcon={<IconRotateClockwise />}
        onClick={() =>
@@ -93,6 +101,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
        variant="light"
        color="orange"
        radius="md"
+        disabled={selected.length === 0}
      >
        {t('actionBar.restart.title')}
      </Button>
@@ -108,6 +117,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
        variant="light"
        color="red"
        radius="md"
+        disabled={selected.length === 0}
      >
        {t('actionBar.stop.title')}
      </Button>
@@ -123,32 +133,10 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
        variant="light"
        color="green"
        radius="md"
+        disabled={selected.length === 0}
      >
        {t('actionBar.start.title')}
      </Button>
-      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" radius="md">
-        {t('actionBar.refreshData.title')}
-      </Button>
-      <Button
-        leftIcon={<IconPlus />}
-        color="indigo"
-        variant="light"
-        radius="md"
-        onClick={() => {
-          if (selected.length !== 1) {
-            showNotification({
-              autoClose: 5000,
-              title: <Title order={5}>{t('errors.oneServiceAtATime')}</Title>,
-              color: 'red',
-              message: undefined,
-            });
-          } else {
-            setOpened(true);
-          }
-        }}
-      >
-        {t('actionBar.addToHomarr.title')}
-      </Button>
      <Button
        leftIcon={<IconTrash />}
        color="red"
@@ -161,9 +149,37 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
            )
          )
        }
+        disabled={selected.length === 0}
      >
        {t('actionBar.remove.title')}
      </Button>
+      <Button
+        leftIcon={<IconPlus />}
+        color="indigo"
+        variant="light"
+        radius="md"
+        disabled={selected.length === 0 || selected.length > 1}
+        onClick={() => {
+          openModal({
+            size: 'xl',
+            modalId: selected.at(0)!.Id,
+            radius: 'md',
+            title: t('actionBar.addService.title'),
+            zIndex: 500,
+            children: (
+              <AddAppShelfItemForm
+                setConfig={setConfig}
+                config={config}
+                setOpened={() => closeModal(selected.at(0)!.Id)}
+                message={t('actionBar.addService.message')}
+                {...tryMatchService(selected.at(0)!)}
+              />
+            ),
+          });
+        }}
+      >
+        {t('actionBar.addToHomarr.title')}
+      </Button>
    </Group>
  );
 }
--- a/src/modules/docker/DockerModule.tsx
+++ b/src/modules/docker/DockerModule.tsx
@@ -42,7 +42,9 @@ export default function DockerMenuButton(props: any) {
          setContainers(res.data);
          setSelection([]);
        })
-        .catch(() =>
+        .catch(() => {
+          // Remove containers from the list
+          setContainers([]);
          // Send an Error notification
          showNotification({
            autoClose: 1500,
@@ -50,8 +52,8 @@ export default function DockerMenuButton(props: any) {
            color: 'red',
            icon: <IconX />,
            message: t('errors.integrationFailed.message'),
-          })
-        );
+          });
+        });
    }, 300);
  }
  const exists = config.modules?.[DockerModule.id]?.enabled ?? false;
--- a/src/modules/docker/DockerTable.tsx
+++ b/src/modules/docker/DockerTable.tsx
@@ -1,9 +1,19 @@
-import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
+import {
+  Table,
+  Checkbox,
+  Group,
+  Badge,
+  createStyles,
+  ScrollArea,
+  TextInput,
+  Modal,
+} from '@mantine/core';
 import { IconSearch } from '@tabler/icons';
-import { useTranslation } from 'next-i18next';
-
 import Dockerode from 'dockerode';
+import { useTranslation } from 'next-i18next';
 import { useEffect, useState } from 'react';
+import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
+import { tryMatchService } from '../../tools/addToHomarr';
 import ContainerState from './ContainerState';

 const useStyles = createStyles((theme) => ({
@@ -105,6 +115,7 @@ export default function DockerTable({
        icon={<IconSearch size={14} />}
        value={search}
        onChange={handleSearchChange}
+        disabled={usedContainers.length === 0}
      />
      <Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
        <thead>
@@ -112,9 +123,10 @@ export default function DockerTable({
            <th style={{ width: 40 }}>
              <Checkbox
                onChange={toggleAll}
-                checked={selection.length === usedContainers.length}
+                checked={selection.length === usedContainers.length && selection.length > 0}
                indeterminate={selection.length > 0 && selection.length !== usedContainers.length}
                transitionDuration={0}
+                disabled={usedContainers.length === 0}
              />
            </th>
            <th>{t('table.header.name')}</th>
--- a/src/pages/api/docker/DockerSingleton.tsx
+++ b/src/pages/api/docker/DockerSingleton.tsx