diff --git a/src/modules/docker/ContainerActionBar.tsx b/src/modules/docker/ContainerActionBar.tsx index 0ae7e2ed1..3fcfc2b9b 100644 --- a/src/modules/docker/ContainerActionBar.tsx +++ b/src/modules/docker/ContainerActionBar.tsx @@ -1,19 +1,15 @@ -import { Button, Group, Modal, Title } from '@mantine/core'; +import { Button, Group, Modal } from '@mantine/core'; import { showNotification, updateNotification } from '@mantine/notifications'; import { IconCheck, IconPlayerPlay, IconPlayerStop, - IconPlus, IconRefresh, IconRotateClockwise, IconTrash, } from '@tabler/icons'; import axios from 'axios'; import Dockerode from 'dockerode'; -import { tryMatchService } from '../../tools/addToHomarr'; -import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem'; -import { useState } from 'react'; function sendDockerCommand( action: string, @@ -60,22 +56,8 @@ export interface ContainerActionBarProps { } export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) { - const [opened, setOpened] = useState(false); return ( - setOpened(false)} - title="Add service" - > - - @@ -103,6 +86,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction variant="light" color="red" radius="md" + disabled={selected.length === 0} > Stop @@ -118,32 +102,13 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction variant="light" color="green" radius="md" + disabled={selected.length === 0} > Start - - diff --git a/src/modules/docker/DockerTable.tsx b/src/modules/docker/DockerTable.tsx index 1a6915089..67b9853b2 100644 --- a/src/modules/docker/DockerTable.tsx +++ b/src/modules/docker/DockerTable.tsx @@ -1,7 +1,9 @@ -import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core'; -import { IconSearch } from '@tabler/icons'; +import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput, Button, Modal, ActionIcon, Tooltip } from '@mantine/core'; +import { IconPlus, IconSearch } from '@tabler/icons'; import Dockerode from 'dockerode'; import { useEffect, useState } from 'react'; +import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem'; +import { tryMatchService } from '../../tools/addToHomarr'; import ContainerState from './ContainerState'; const useStyles = createStyles((theme) => ({ @@ -23,8 +25,10 @@ export default function DockerTable({ selection: Dockerode.ContainerInfo[]; }) { const [usedContainers, setContainers] = useState(containers); + const [rowSelected, setRowSelected] = useState(); const { classes, cx } = useStyles(); const [search, setSearch] = useState(''); + const [opened, setOpened] = useState(false); useEffect(() => { setContainers(containers); @@ -64,7 +68,9 @@ export default function DockerTable({ /> {element.Names[0].replace('/', '')} - {element.Image} + + {element.Image} + {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort) @@ -87,18 +93,49 @@ export default function DockerTable({ + + + + { + setRowSelected(element); + setOpened(true); + }} + > + + + + + ); }); return ( + setOpened(false)} + title="Add service" + > + + } value={search} onChange={handleSearchChange} + disabled={usedContainers.length === 0} /> @@ -106,15 +143,17 @@ export default function DockerTable({ + {rows} diff --git a/src/pages/api/docker/DockerSingleton.tsx b/src/pages/api/docker/DockerSingleton.tsx index 804444274..b388699c4 100644 --- a/src/pages/api/docker/DockerSingleton.tsx +++ b/src/pages/api/docker/DockerSingleton.tsx @@ -4,7 +4,10 @@ export default class DockerSingleton extends Docker { private static dockerInstance: DockerSingleton; private constructor() { - super(); + super({ + host: '192.168.1.56', + port: 2377, + }); } public static getInstance(): DockerSingleton {
0} indeterminate={selection.length > 0 && selection.length !== usedContainers.length} transitionDuration={0} + disabled={usedContainers.length === 0} /> Name Image Ports StateAction