From 5ab2f2a6f4d3673d3c1e93fe36b67730d3259c76 Mon Sep 17 00:00:00 2001
From: Noan <noan.perrot@gmail.com>
Date: Mon, 22 Aug 2022 23:01:47 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20port=20in=20Service=20URL?=
 =?UTF-8?q?=20for=20Docker=20Module?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data/configs/default.json                 |  2 +-
 src/modules/docker/ContainerActionBar.tsx | 11 +++--------
 src/modules/docker/DockerModule.tsx       | 14 ++++----------
 src/modules/docker/DockerTable.tsx        |  4 +---
 4 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/data/configs/default.json b/data/configs/default.json
index 07dfe37b0..3f2acea0d 100644
--- a/data/configs/default.json
+++ b/data/configs/default.json
@@ -17,4 +17,4 @@
       "enabled": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/modules/docker/ContainerActionBar.tsx b/src/modules/docker/ContainerActionBar.tsx
index b25c03c11..0ae7e2ed1 100644
--- a/src/modules/docker/ContainerActionBar.tsx
+++ b/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(`localhost:2375/containers/${containerId}/${action}`)
+    .get(`/api/docker/container/${containerId}?action=${action}`)
     .then((res) => {
       updateNotification({
         id: containerId,
@@ -88,7 +88,6 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         variant="light"
         color="orange"
         radius="md"
-        disabled={selected.length === 0}
       >
         Restart
       </Button>
@@ -104,7 +103,6 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
         variant="light"
         color="red"
         radius="md"
-        disabled={selected.length === 0}
       >
         Stop
       </Button>
@@ -120,11 +118,10 @@ 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" color="violet" radius="md">
+      <Button leftIcon={<IconRefresh />} onClick={() => reload()} variant="light" radius="md">
         Refresh data
       </Button>
       <Button
@@ -144,7 +141,6 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
             setOpened(true);
           }
         }}
-        disabled={selected.length === 0}
       >
         Add to Homarr
       </Button>
@@ -160,7 +156,6 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
             )
           )
         }
-        disabled={selected.length === 0}
       >
         Remove
       </Button>
diff --git a/src/modules/docker/DockerModule.tsx b/src/modules/docker/DockerModule.tsx
index 3981b36ca..caca75306 100644
--- a/src/modules/docker/DockerModule.tsx
+++ b/src/modules/docker/DockerModule.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Drawer, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, Drawer, Group, LoadingOverlay, Text, Tooltip } from '@mantine/core';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import Docker from 'dockerode';
@@ -14,12 +14,6 @@ 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) {
@@ -27,7 +21,6 @@ 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(() => {
@@ -40,7 +33,7 @@ export default function DockerMenuButton(props: any) {
     }
     setTimeout(() => {
       axios
-        .get(`${dockerApi}/v1.41/containers/json`)
+        .get('/api/docker/containers')
         .then((res) => {
           setContainers(res.data);
           setSelection([]);
@@ -61,7 +54,8 @@ export default function DockerMenuButton(props: any) {
   if (!exists) {
     return null;
   }
-  //  Always allow user to see DockerTable component through ActionIcon in order to set Docker's settings
+  // Check if the user has at least one container
+  if (containers.length < 1) return null;
   return (
     <>
       <Drawer
diff --git a/src/modules/docker/DockerTable.tsx b/src/modules/docker/DockerTable.tsx
index 022af0d6f..1a6915089 100644
--- a/src/modules/docker/DockerTable.tsx
+++ b/src/modules/docker/DockerTable.tsx
@@ -99,7 +99,6 @@ 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>
@@ -107,10 +106,9 @@ export default function DockerTable({
             <th style={{ width: 40 }}>
               <Checkbox
                 onChange={toggleAll}
-                checked={selection.length === usedContainers.length && usedContainers.length > 0}
+                checked={selection.length === usedContainers.length}
                 indeterminate={selection.length > 0 && selection.length !== usedContainers.length}
                 transitionDuration={0}
-                disabled={usedContainers.length === 0}
               />
             </th>
             <th>Name</th>