🔧 add configuration to docker module

data/configs/default.json

@@ -1,20 +1,35 @@
 {
   "name": "default",
-  "services": [
-    {
-      "name": "example",
-      "id": "09c45847-8afc-4c1a-9697-f03192de948a",
-      "type": "Other",
-      "icon": "https://c.tenor.com/o656qFKDzeUAAAAC/rick-astley-never-gonna-give-you-up.gif",
-      "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-    }
-  ],
+  "services": [],
   "settings": {
-    "searchUrl": "https://google.com/search?q="
+    "searchUrl": "https://google.com/search?q=",
+    "appCardWidth": 0.8
   },
   "modules": {
     "Search Bar": {
       "enabled": true
+    },
+    "Docker": {
+      "enabled": true,
+      "options": {
+        "endpoint": {
+          "value": "http://192.168.1.56:2376"
+        }
+      }
+    },
+    "Weather": {
+      "enabled": true,
+      "options": {
+        "location": {
+          "value": "Perros-Guirec"
+        }
+      }
+    },
+    "Download Speed": {
+      "enabled": false
+    },
+    "Ping Services": {
+      "enabled": true
     }
   }
 }

src/modules/docker/ContainerActionBar.tsx

@@ -11,9 +11,9 @@ import {
 } from '@tabler/icons';
 import axios from 'axios';
 import Dockerode from 'dockerode';
+import { useState } from 'react';
 import { tryMatchService } from '../../tools/addToHomarr';
 import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
-import { useState } from 'react';
 
 function sendDockerCommand(
   action: string,
@@ -30,7 +30,7 @@ function sendDockerCommand(
     disallowClose: true,
   });
   axios
-    .get(`/api/docker/container/${containerId}?action=${action}`)
+    .get(`localhost:2375/containers/${containerId}/${action}`)
     .then((res) => {
       updateNotification({
         id: containerId,
@@ -88,6 +88,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         variant="light"
         color="orange"
         radius="md"
+        disabled={selected.length === 0}
       >
         Restart
       </Button>
@@ -103,6 +104,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         variant="light"
         color="red"
         radius="md"
+        disabled={selected.length === 0}
       >
         Stop
       </Button>
@@ -118,10 +120,11 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         variant="light"
         color="green"
         radius="md"
+        disabled={selected.length === 0}
       >
         Start
       </Button>
-      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" radius="md">
+      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" color="violet" radius="md">
         Refresh data
       </Button>
       <Button
@@ -141,6 +144,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
             setOpened(true);
           }
         }}
+        disabled={selected.length === 0}
       >
         Add to Homarr
       </Button>
@@ -156,6 +160,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
             )
           )
         }
+        disabled={selected.length === 0}
       >
         Remove
       </Button>

src/modules/docker/DockerModule.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Drawer, Group, LoadingOverlay, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, Drawer, Text, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import Docker from 'dockerode';
@@ -14,6 +14,12 @@ export const DockerModule: IModule = {
   description: 'Allows you to easily manage your torrents',
   icon: IconBrandDocker,
   component: DockerMenuButton,
+  options: {
+    endpoint: {
+      name: 'Docker Api endpoint entry',
+      value: '',
+    },
+  },
 };
 
 export default function DockerMenuButton(props: any) {
@@ -21,6 +27,7 @@ export default function DockerMenuButton(props: any) {
   const [containers, setContainers] = useState<Docker.ContainerInfo[]>([]);
   const [selection, setSelection] = useState<Docker.ContainerInfo[]>([]);
   const { config } = useConfig();
+  const dockerApi = (config?.modules?.[DockerModule.title]?.options?.endpoint?.value as string) ?? ''; // http://192.168.1.56:2376
   const moduleEnabled = config.modules?.[DockerModule.title]?.enabled ?? false;
 
   useEffect(() => {
@@ -33,7 +40,7 @@ export default function DockerMenuButton(props: any) {
     }
     setTimeout(() => {
       axios
-        .get('/api/docker/containers')
+        .get(`${dockerApi}/v1.41/containers/json`)
         .then((res) => {
           setContainers(res.data);
           setSelection([]);
@@ -54,8 +61,7 @@ export default function DockerMenuButton(props: any) {
   if (!exists) {
     return null;
   }
-  // Check if the user has at least one container
-  if (containers.length < 1) return null;
+  //  Always allow user to see DockerTable component through ActionIcon in order to set Docker's settings
   return (
     <>
       <Drawer

src/modules/docker/DockerTable.tsx

@@ -99,6 +99,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>
@@ -106,9 +107,10 @@ export default function DockerTable({
             <th style={{ width: 40 }}>
               <Checkbox
                 onChange={toggleAll}
-                checked={selection.length === usedContainers.length}
+                checked={selection.length === usedContainers.length && usedContainers.length > 0}
                 indeterminate={selection.length > 0 && selection.length !== usedContainers.length}
                 transitionDuration={0}
+                disabled={usedContainers.length === 0}
               />
             </th>
             <th>Name</th>