File size: 3,828 Bytes
bf1e3ff 68ed806 d684338 f36a767 d684338 bf1e3ff e08f767 f36a767 bf1e3ff d684338 bf1e3ff 7e0b5ff 1e6f0e2 bf1e3ff 1e6f0e2 f36a767 bf1e3ff 1e6f0e2 7e0b5ff 1e6f0e2 60788d3 1e6f0e2 bf1e3ff f36a767 d684338 f36a767 d684338 bf1e3ff f36a767 11e3284 f36a767 11e3284 f36a767 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 122 123 124 125 126 127 128 |
import SvgIcon from '@/components/svg-icon';
import { useFetchSystemStatus } from '@/hooks/user-setting-hooks';
import {
ISystemStatus,
TaskExecutorHeartbeatItem,
} 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 { isObject } from 'lodash';
import styles from './index.less';
import TaskBarChat from './task-bar-chat';
const { Text } = Typography;
enum Status {
'green' = 'success',
'red' = 'error',
'yellow' = 'warning',
}
const TitleMap = {
doc_engine: 'Doc Engine',
storage: 'Object Storage',
redis: 'Redis',
database: 'Database',
task_executor_heartbeats: 'Task Executor',
};
const IconMap = {
es: 'es',
doc_engine: 'storage',
redis: 'redis',
storage: 'minio',
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_heartbeats' ? (
<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_heartbeats' ? (
isObject(info) ? (
<TaskBarChat
data={info as Record<string, TaskExecutorHeartbeatItem[]>}
></TaskBarChat>
) : (
<Text className={styles.error}>
{typeof info.error === 'string' ? 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;
|