Spaces:
Paused
Paused
File size: 2,739 Bytes
ab2ded1 |
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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
import SvgIcon from '@/components/svg-icon';
import { useFetchSystemStatus } from '@/hooks/user-setting-hooks';
import { ISystemStatus, Minio } from '@/interfaces/database/userSetting';
import { Badge, Card, Flex, Spin, Typography } from 'antd';
import classNames from 'classnames';
import lowerCase from 'lodash/lowerCase';
import upperFirst from 'lodash/upperFirst';
import { useEffect } from 'react';
import { toFixed } from '@/utils/common-util';
import styles from './index.less';
const { Text } = Typography;
enum Status {
'green' = 'success',
'red' = 'error',
'yellow' = 'warning',
}
const TitleMap = {
es: 'Elasticsearch',
minio: 'MinIO Object Storage',
redis: 'Redis',
mysql: 'Mysql',
};
const SystemInfo = () => {
const {
systemStatus,
fetchSystemStatus,
loading: statusLoading,
} = useFetchSystemStatus();
useEffect(() => {
fetchSystemStatus();
}, [fetchSystemStatus]);
return (
<section className={styles.systemInfo}>
<Spin spinning={statusLoading}>
<Flex gap={16} vertical>
{Object.keys(systemStatus).map((key) => {
const info = systemStatus[key as keyof ISystemStatus];
return (
<Card
type="inner"
title={
<Flex align="center" gap={10}>
<SvgIcon name={key} width={26}></SvgIcon>
<span className={styles.title}>
{TitleMap[key as keyof typeof TitleMap]}
</span>
<Badge
className={styles.badge}
status={Status[info.status as keyof typeof Status]}
/>
</Flex>
}
key={key}
>
{Object.keys(info)
.filter((x) => x !== 'status')
.map((x) => {
return (
<Flex
key={x}
align="center"
gap={16}
className={styles.text}
>
<b>{upperFirst(lowerCase(x))}:</b>
<Text
className={classNames({
[styles.error]: x === 'error',
})}
>
{toFixed(info[x as keyof Minio]) as any}
{x === 'elapsed' && ' ms'}
</Text>
</Flex>
);
})}
</Card>
);
})}
</Flex>
</Spin>
</section>
);
};
export default SystemInfo;
|