File size: 3,556 Bytes
bf1e3ff 68ed806 d684338 bf1e3ff e08f767 bf1e3ff d684338 bf1e3ff 1e6f0e2 bf1e3ff 1e6f0e2 d684338 bf1e3ff 1e6f0e2 bf1e3ff d684338 1e6f0e2 d684338 bf1e3ff d684338 11e3284 d684338 bf1e3ff d684338 bf1e3ff |
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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
import SvgIcon from '@/components/svg-icon';
import { useFetchSystemStatus } from '@/hooks/user-setting-hooks';
import {
ISystemStatus,
TaskExecutorElapsed,
} from '@/interfaces/database/user-setting';
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';
import TaskBarChat from './task-bar-chat';
const { Text } = Typography;
enum Status {
'green' = 'success',
'red' = 'error',
'yellow' = 'warning',
}
const TitleMap = {
es: 'Elasticsearch',
storage: 'Object Storage',
redis: 'Redis',
database: 'Database',
task_executor: 'Task Executor',
};
const IconMap = {
es: 'es',
storage: 'storage',
redis: 'redis',
database: 'database',
};
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}>
{key === 'task_executor' ? (
<img src="/logo.svg" alt="" width={26} />
) : (
<SvgIcon name={IconMap[key as keyof typeof IconMap]} 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}
>
{key === 'task_executor' ? (
info?.elapsed ? (
<TaskBarChat
data={info.elapsed as TaskExecutorElapsed}
></TaskBarChat>
) : (
<Text className={styles.error}>{info.error}</Text>
)
) : (
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 as Record<string, any>)[x]) as any}
{x === 'elapsed' && ' ms'}
</Text>
</Flex>
);
})
)}
</Card>
);
})}
</Flex>
</Spin>
</section>
);
};
export default SystemInfo;
|