Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 07:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix docker module for mobile

Browse Source 
Signed-off-by: ajnart <thomascamlong@gmail.com>
This commit is contained in:
ajnart
2022-11-22 09:56:40 +09:00
committed by ajnart
parent f3a7aafe87
commit c15ab30c7a
2 changed files with 31 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/modules/docker/ContainerActionBar.tsx
View File

@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { Button, Group, TextInput, Title } from '@mantine/core';
import { closeAllModals, closeModal, openModal } from '@mantine/modals';
import { Button, Group } from '@mantine/core';
import { closeModal, openModal } from '@mantine/modals';
import { showNotification, updateNotification } from '@mantine/notifications';
import {
IconCheck,
@@ -72,7 +72,7 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
const { config, setConfig } = useConfig();
return (
<Group>
<Group spacing="xs">
<Button
leftIcon={<IconRefresh />}
onClick={() => {

52
src/modules/docker/DockerTable.tsx
View File

@@ -1,4 +1,5 @@
import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core';
import { useElementSize } from '@mantine/hooks';
import { IconSearch } from '@tabler/icons';
import Dockerode from 'dockerode';
import { useTranslation } from 'next-i18next';
@@ -26,6 +27,7 @@ export default function DockerTable({
const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
const { classes, cx } = useStyles();
const [search, setSearch] = useState('');
const { ref, width, height } = useElementSize();
const { t } = useTranslation('modules/docker');
@@ -67,28 +69,30 @@ export default function DockerTable({
/>
</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}
{width > 576 ? <td>{element.Image}</td> : null}
{width > 576 ? (
<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">
{t('table.body.portCollapse', { ports: element.Ports.length - 3 })}
</Badge>
))}
{element.Ports.length > 3 && (
<Badge variant="filled">
{t('table.body.portCollapse', { ports: element.Ports.length - 3 })}
</Badge>
)}
</Group>
</td>
)}
</Group>
</td>
) : null}
<td>
<ContainerState state={element.State} />
</td>
@@ -106,7 +110,7 @@ export default function DockerTable({
onChange={handleSearchChange}
disabled={usedContainers.length === 0}
/>
<Table captionSide="bottom" highlightOnHover sx={{ minWidth: 800 }} verticalSpacing="sm">
<Table ref={ref} captionSide="bottom" highlightOnHover verticalSpacing="sm">
<thead>
<tr>
<th style={{ width: 40 }}>
@@ -119,8 +123,8 @@ export default function DockerTable({
/>
</th>
<th>{t('table.header.name')}</th>
<th>{t('table.header.image')}</th>
<th>{t('table.header.ports')}</th>
{width > 576 ? <th>{t('table.header.image')}</th> : null}
{width > 576 ? <th>{t('table.header.ports')}</th> : null}
<th>{t('table.header.state')}</th>
</tr>
</thead>