mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-10 15:35:55 +01:00
⬇️ Downgrade NextJS and React
Middleware didn't work in v12.2.3. Hopefully the password protection will work again now.
This commit is contained in:
ajnart
164
src/modules/docker/ContainerActionBar.tsx
Normal file
164
src/modules/docker/ContainerActionBar.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
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,
|
||||
} from '@tabler/icons';
|
||||
import axios from 'axios';
|
||||
import Dockerode from 'dockerode';
|
||||
import { tryMatchService } from '../../tools/addToHomarr';
|
||||
import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
|
||||
|
||||
function sendDockerCommand(
|
||||
action: string,
|
||||
containerId: string,
|
||||
containerName: string,
|
||||
reload: () => void
|
||||
) {
|
||||
showNotification({
|
||||
id: containerId,
|
||||
loading: true,
|
||||
title: `${action}ing container ${containerName}`,
|
||||
message: undefined,
|
||||
autoClose: false,
|
||||
disallowClose: true,
|
||||
});
|
||||
axios
|
||||
.get(`/api/docker/container/${containerId}?action=${action}`)
|
||||
.then((res) => {
|
||||
updateNotification({
|
||||
id: containerId,
|
||||
title: `Container ${containerName} ${action}ed`,
|
||||
message: `Your container was successfully ${action}ed`,
|
||||
icon: <IconCheck />,
|
||||
autoClose: 2000,
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
updateNotification({
|
||||
id: containerId,
|
||||
color: 'red',
|
||||
title: 'There was an error',
|
||||
message: err.response.data.reason,
|
||||
autoClose: 2000,
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
reload();
|
||||
});
|
||||
}
|
||||
|
||||
export interface ContainerActionBarProps {
|
||||
selected: Dockerode.ContainerInfo[];
|
||||
reload: () => void;
|
||||
}
|
||||
|
||||
export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
|
||||
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), reload)
|
||||
)
|
||||
)
|
||||
}
|
||||
variant="light"
|
||||
color="orange"
|
||||
radius="md"
|
||||
>
|
||||
Restart
|
||||
</Button>
|
||||
<Button
|
||||
leftIcon={<IconPlayerStop />}
|
||||
onClick={() =>
|
||||
Promise.all(
|
||||
selected.map((container) =>
|
||||
sendDockerCommand('stop', container.Id, container.Names[0].substring(1), 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), 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={5}>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) =>
|
||||
sendDockerCommand('remove', container.Id, container.Names[0].substring(1), reload)
|
||||
)
|
||||
)
|
||||
}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
49
src/modules/docker/ContainerState.tsx
Normal file
49
src/modules/docker/ContainerState.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
84
src/modules/docker/DockerModule.tsx
Normal file
84
src/modules/docker/DockerModule.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
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 '../ModuleTypes';
|
||||
|
||||
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();
|
||||
const moduleEnabled = config.modules?.[DockerModule.title]?.enabled ?? false;
|
||||
|
||||
useEffect(() => {
|
||||
reload();
|
||||
}, [config.modules]);
|
||||
|
||||
function reload() {
|
||||
if (!moduleEnabled) {
|
||||
return;
|
||||
}
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
125
src/modules/docker/DockerTable.tsx
Normal file
125
src/modules/docker/DockerTable.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
|
||||
import { IconSearch } from '@tabler/icons';
|
||||
import Dockerode from 'dockerode';
|
||||
import { useEffect, useState } from 'react';
|
||||
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 [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
|
||||
const { classes, cx } = useStyles();
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
setContainers(containers);
|
||||
}, [containers]);
|
||||
|
||||
const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { value } = event.currentTarget;
|
||||
setSearch(value);
|
||||
setContainers(filterContainers(containers, value));
|
||||
};
|
||||
|
||||
function filterContainers(data: Dockerode.ContainerInfo[], search: string) {
|
||||
const query = search.toLowerCase().trim();
|
||||
return data.filter((item) =>
|
||||
item.Names.some((name) => name.toLowerCase().includes(query) || item.Image.includes(query))
|
||||
);
|
||||
}
|
||||
|
||||
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 === usedContainers.length ? [] : usedContainers.map((c) => c)
|
||||
);
|
||||
|
||||
const rows = usedContainers.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)
|
||||
// Remove duplicates with filter function
|
||||
.filter(
|
||||
(port, index, self) =>
|
||||
index === self.findIndex((t) => t.PrivatePort === port.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 (
|
||||
<ScrollArea style={{ height: '80vh' }}>
|
||||
<TextInput
|
||||
placeholder="Search by container or image name"
|
||||
mt="md"
|
||||
icon={<IconSearch size={14} />}
|
||||
value={search}
|
||||
onChange={handleSearchChange}
|
||||
/>
|
||||
<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 === usedContainers.length}
|
||||
indeterminate={selection.length > 0 && selection.length !== usedContainers.length}
|
||||
transitionDuration={0}
|
||||
/>
|
||||
</th>
|
||||
<th>Name</th>
|
||||
<th>Image</th>
|
||||
<th>Ports</th>
|
||||
<th>State</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>{rows}</tbody>
|
||||
</Table>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
1
src/modules/docker/index.ts
Normal file
1
src/modules/docker/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { DockerModule } from './DockerModule';
|
||||
Reference in New Issue
Block a user