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

Address PR comments

Browse Source
This commit is contained in:
ajnart
2022-11-22 18:15:37 +09:00
parent 3d7449d871
commit fb78736a83
2 changed files with 16 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput } from '@mantine/core'; import { Table, Checkbox, Group, Badge, createStyles, ScrollArea, TextInput, useMantineTheme } from '@mantine/core';
import { useElementSize } from '@mantine/hooks'; import { useElementSize } from '@mantine/hooks';
import { IconSearch } from '@tabler/icons'; import { IconSearch } from '@tabler/icons';
import Dockerode from 'dockerode'; import Dockerode from 'dockerode';
@@ -24,6 +24,7 @@ export default function DockerTable({
containers: Dockerode.ContainerInfo[]; containers: Dockerode.ContainerInfo[];
selection: Dockerode.ContainerInfo[]; selection: Dockerode.ContainerInfo[];
}) { }) {
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers); const [usedContainers, setContainers] = useState<Dockerode.ContainerInfo[]>(containers);
const { classes, cx } = useStyles(); const { classes, cx } = useStyles();
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
@@ -69,8 +70,8 @@ export default function DockerTable({
/> />
</td> </td>
<td>{element.Names[0].replace('/', '')}</td> <td>{element.Names[0].replace('/', '')}</td>
{width > 576 ? <td>{element.Image}</td> : null} {width > MIN_WIDTH_MOBILE && <td>{element.Image}</td>}
{width > 576 ? ( {width > MIN_WIDTH_MOBILE && (
<td> <td>
<Group> <Group>
{element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort) {element.Ports.sort((a, b) => a.PrivatePort - b.PrivatePort)
@@ -92,7 +93,7 @@ export default function DockerTable({
)} )}
</Group> </Group>
</td> </td>
) : null} )}
<td> <td>
<ContainerState state={element.State} /> <ContainerState state={element.State} />
</td> </td>
@@ -123,8 +124,8 @@ export default function DockerTable({
/> />
</th> </th>
<th>{t('table.header.name')}</th> <th>{t('table.header.name')}</th>
{width > 576 ? <th>{t('table.header.image')}</th> : null} {width > MIN_WIDTH_MOBILE ? <th>{t('table.header.image')}</th> : null}
{width > 576 ? <th>{t('table.header.ports')}</th> : null} {width > MIN_WIDTH_MOBILE ? <th>{t('table.header.ports')}</th> : null}
<th>{t('table.header.state')}</th> <th>{t('table.header.state')}</th>
</tr> </tr>
</thead> </thead>

22
src/modules/torrents/TorrentsModule.tsx
View File

@@ -9,6 +9,7 @@ import {
ScrollArea, ScrollArea,
Center, Center,
Stack, Stack,
useMantineTheme,
} from '@mantine/core'; } from '@mantine/core';
import { IconDownload as Download } from '@tabler/icons'; import { IconDownload as Download } from '@tabler/icons';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -23,8 +24,6 @@ import { AddItemShelfButton } from '../../components/AppShelf/AddAppShelfItem';
import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval'; import { useSetSafeInterval } from '../../tools/hooks/useSetSafeInterval';
import { humanFileSize } from '../../tools/humanFileSize'; import { humanFileSize } from '../../tools/humanFileSize';
const MIM_WIDTH_MOBILE = 576;
export const TorrentsModule: IModule = { export const TorrentsModule: IModule = {
id: 'torrents-status', id: 'torrents-status',
title: 'Torrent', title: 'Torrent',
@@ -54,6 +53,7 @@ export default function TorrentsComponent() {
const setSafeInterval = useSetSafeInterval(); const setSafeInterval = useSetSafeInterval();
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const { ref, width, height } = useElementSize(); const { ref, width, height } = useElementSize();
const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
const { t } = useTranslation(`modules/${TorrentsModule.id}`); const { t } = useTranslation(`modules/${TorrentsModule.id}`);
@@ -114,9 +114,9 @@ export default function TorrentsComponent() {
<tr ref={ref}> <tr ref={ref}>
<th>{t('card.table.header.name')}</th> <th>{t('card.table.header.name')}</th>
<th>{t('card.table.header.size')}</th> <th>{t('card.table.header.size')}</th>
{width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.download')}</th>} {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.download')}</th>}
{width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.upload')}</th>} {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.upload')}</th>}
{width > MIM_WIDTH_MOBILE && <th>{t('card.table.header.estimatedTimeOfArrival')}</th>} {width > MIN_WIDTH_MOBILE && <th>{t('card.table.header.estimatedTimeOfArrival')}</th>}
<th>{t('card.table.header.progress')}</th> <th>{t('card.table.header.progress')}</th>
</tr> </tr>
); );
@@ -161,25 +161,21 @@ export default function TorrentsComponent() {
<td> <td>
<Text size="xs">{humanFileSize(size)}</Text> <Text size="xs">{humanFileSize(size)}</Text>
</td> </td>
{width > 576 ? ( {width > MIN_WIDTH_MOBILE && (
<td> <td>
<Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text> <Text size="xs">{downloadSpeed > 0 ? `${downloadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
</td> </td>
) : (
''
)} )}
{width > 576 ? ( {width > MIN_WIDTH_MOBILE && (
<td> <td>
<Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text> <Text size="xs">{uploadSpeed > 0 ? `${uploadSpeed.toFixed(1)} Mb/s` : '-'}</Text>
</td> </td>
) : (
''
)} )}
{width > 576 ? ( {width > MIN_WIDTH_MOBILE && (
<td> <td>
<Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text> <Text size="xs">{torrent.eta <= 0 ? '∞' : calculateETA(torrent.eta)}</Text>
</td> </td>
) : null} )}
<td> <td>
<Text>{(torrent.progress * 100).toFixed(1)}%</Text> <Text>{(torrent.progress * 100).toFixed(1)}%</Text>
<Progress <Progress