123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231 |
- import { FC } from 'react';
- import { useTranslation } from 'react-i18next';
- import { makeStyles } from '@material-ui/core';
- import Progress from './Progress';
- import {
- formatByteSize,
- formatSystemTime,
- getByteString,
- } from '../../utils/Format';
- import { DataProgressProps, DataSectionProps, DataCardProps } from './Types';
- const getStyles = makeStyles(() => ({
- root: {
- backgroundColor: '#F6F6F6',
- borderTopRightRadius: '8px',
- borderBottomRightRadius: '8px',
- height: '100%',
- padding: '20px 16px',
- boxSizing: 'border-box',
- },
- title: {
- display: 'flex',
- justifyContent: 'space-between',
- },
- content: {
- color: '#010E29',
- fontSize: '20px',
- fontWeight: 600,
- lineHeight: '36px',
- },
- desc: {
- color: '#82838E',
- fontSize: '14px',
- lineHeight: '36px',
- marginLeft: '8px',
- },
- rootName: {
- color: '#82838E',
- fontSize: '20px',
- lineHeight: '24px',
- },
- childName: {
- color: '#06AFF2',
- fontSize: '20px',
- lineHeight: '24px',
- },
- ip: {
- color: '#010E29',
- fontSize: '16px',
- lineHeight: '24px',
- },
- sectionRoot: {
- borderSpacing: '0 1px',
- display: 'table',
- marginTop: '24px',
- width: '100%',
- },
- sectionRow: {
- display: 'table-row',
- },
- sectionHeaderCell: {
- display: 'table-cell',
- color: '#82838E',
- fontSize: '12px',
- lineHeight: '24px',
- padding: '8px 16px',
- textTransform: 'uppercase',
- width: '50%',
- },
- sectionCell: {
- backgroundColor: 'white',
- color: '#010E29',
- display: 'table-cell',
- fontSize: '14px',
- lineHeight: '24px',
- padding: '12px 16px',
- textTransform: 'capitalize',
- verticalAlign: 'middle',
- width: '50%',
- },
- progressTitle: {
- fontSize: '14px',
- color: '#010E29',
- lineHeight: '24px',
- display: 'flex',
- justifyContent: 'space-between',
- },
- }));
- const DataSection: FC<DataSectionProps> = props => {
- const classes = getStyles();
- const { titles, contents } = props;
- return (
- <div className={classes.sectionRoot}>
- <div className={classes.sectionRow}>
- {titles.map(titleEntry => (
- <div key={titleEntry} className={classes.sectionHeaderCell}>
- {titleEntry}
- </div>
- ))}
- </div>
- {contents.map(contentEntry => {
- return (
- <div key={contentEntry.label} className={classes.sectionRow}>
- <div className={classes.sectionCell}>{contentEntry.label}</div>
- <div className={classes.sectionCell}>{contentEntry.value}</div>
- </div>
- );
- })}
- </div>
- );
- };
- const DataProgress: FC<DataProgressProps> = ({ percent = 0, desc = '' }) => {
- const classes = getStyles();
- return (
- <div>
- <div className={classes.progressTitle}>
- <span>{`${Number(percent * 100).toFixed(2)}%`}</span>
- <span>{desc}</span>
- </div>
- <Progress percent={percent} color="#06AFF2" />
- </div>
- );
- };
- const DataCard: FC<DataCardProps & React.HTMLAttributes<HTMLDivElement>> =
- props => {
- const classes = getStyles();
- const { t } = useTranslation('systemView');
- const { t: commonTrans } = useTranslation();
- const capacityTrans: { [key in string]: string } = commonTrans('capacity');
- const { node, extend } = props;
- // const hardwareTitle = [t('hardwareTitle'), t('valueTitle')];
- const hardwareContent = [];
- const configTitle = [t('configTitle'), t('valueTitle')];
- const systemConfig: { label: string; value: any }[] = [];
- const systemTitle = [t('systemTitle'), t('valueTitle')];
- const systemContent = [];
- const {
- created_time: createTime,
- updated_time: updateTime,
- system_info = {},
- hardware_infos: infos = {},
- system_configurations,
- } = node?.infos || {};
- const {
- cpu_core_count: cpu = 0,
- cpu_core_usage: cpuUsage = 0,
- // memory = 1,
- memory_usage: memoryUsage = 0,
- disk = 1,
- disk_usage: diskUsage = 0,
- } = infos;
- const memUsage = formatByteSize(memoryUsage, capacityTrans);
- if (extend) {
- hardwareContent.push({ label: t('thCPUCount'), value: cpu });
- hardwareContent.push({
- label: t('thCPUUsage'),
- value: <DataProgress percent={cpuUsage / 100} />,
- });
- hardwareContent.push({
- label: t('thMemUsage'),
- value: `${memUsage.value} ${memUsage.unit}`,
- });
- hardwareContent.push({
- label: t('thDiskUsage'),
- value: (
- <DataProgress
- percent={diskUsage / disk}
- desc={getByteString(diskUsage, disk, capacityTrans)}
- />
- ),
- });
- }
- if (system_configurations) {
- Object.keys(system_configurations).forEach(key => {
- systemConfig.push({ label: key, value: system_configurations[key] });
- });
- }
- const { deploy_mode: mode = '', build_version: version = '' } = system_info;
- systemContent.push({ label: t('thVersion'), value: version });
- systemContent.push({ label: t('thDeployMode'), value: mode });
- systemContent.push({
- label: t('thCreateTime'),
- value: createTime ? formatSystemTime(createTime) : '',
- });
- systemContent.push({
- label: t('thUpdateTime'),
- value: updateTime ? formatSystemTime(updateTime) : '',
- });
- return (
- <div className={classes.root}>
- <div className={classes.title}>
- <div>
- <span className={classes.rootName}>Milvus / </span>
- <span className={classes.childName}>{node?.infos?.name}</span>
- </div>
- {/* <div className={classes.ip}>{`${t('thIP')}:${infos?.ip || ''}`}</div> */}
- </div>
- {/* {extend && (
- <DataSection titles={hardwareTitle} contents={hardwareContent} />
- )} */}
- <DataSection titles={systemTitle} contents={systemContent} />
- {systemConfig.length ? (
- <DataSection titles={configTitle} contents={systemConfig} />
- ) : null}
- </div>
- );
- };
- export default DataCard;
|