generated from mantinedev/next-pages-template
-
-
Notifications
You must be signed in to change notification settings - Fork 260
/
HealthMonitoringFileSystem.tsx
66 lines (60 loc) · 2.06 KB
/
HealthMonitoringFileSystem.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { Center, Flex, Group, HoverCard, RingProgress, Text } from '@mantine/core';
import { IconServer } from '@tabler/icons-react';
import { useTranslation } from 'react-i18next';
import { humanFileSize } from '~/tools/humanFileSize';
import { ringColor } from './HealthMonitoringTile';
const HealthMonitoringFileSystem = ({ fileSystem }: any) => {
const { t } = useTranslation('modules/health-monitoring');
interface FileSystemDisk {
devicename: string;
used: string;
percentage: number;
available: number;
}
const sortedFileSystem = fileSystem.slice().sort((a: FileSystemDisk, b: FileSystemDisk) => {
return a.devicename.localeCompare(b.devicename);
});
return (
<Group position="center">
<Flex
direction={{ base: 'column', sm: 'row' }}
gap={{ base: 'sm', sm: 'lg' }}
justify={{ sm: 'center' }}
>
{sortedFileSystem.map((disk: FileSystemDisk) => (
<RingProgress
size={120}
roundCaps
thickness={12}
label={
<Center style={{ flexDirection: 'column' }}>
{disk.devicename}
<HoverCard width={280} radius="sm" position="top-end" withinPortal>
<HoverCard.Target>
<IconServer size={40} />
</HoverCard.Target>
<HoverCard.Dropdown>
<Text fz="lg" tt="uppercase" fw={700} c="dimmed" align="center">
{t('fileSystem.available', {
available: humanFileSize(disk.available),
percentage: 100 - disk.percentage,
})}
</Text>
</HoverCard.Dropdown>
</HoverCard>
</Center>
}
sections={[
{
value: disk.percentage,
color: ringColor(disk.percentage),
tooltip: disk.used,
},
]}
/>
))}
</Flex>
</Group>
);
};
export default HealthMonitoringFileSystem;