import { makeStyles, Theme } from '@material-ui/core'; import { CHART_WIDTH, LINE_CHART_SMALL_HEIGHT } from './consts'; import HealthyIndexRow from './HealthyIndexRow'; import LineChartSmall from './LineChartSmall'; import { ENodeService, INodeTreeStructure, IThreshold } from './Types'; import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight'; import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown'; import { Dispatch, SetStateAction, useState } from 'react'; const getStyles = makeStyles((theme: Theme) => ({ mainView: { width: '100%', marginTop: '16px', }, healthyIndexItem: { display: 'flex', marginTop: '8px', justifyContent: 'space-between', }, healthyIndexLabel: { fontWeight: 500, fontSize: '12px', color: '#444', display: 'flex', alignItems: 'center', cursor: 'pointer', }, healthyIndexLabelText: {}, healthyIndexRow: { width: `${CHART_WIDTH}px`, }, chartItem: { margin: '8px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', }, chartLabel: { width: `50px`, paddingLeft: '20px', fontSize: '12px', fontWeight: 500, color: '#444', }, chart: { height: `${LINE_CHART_SMALL_HEIGHT}px`, width: `${CHART_WIDTH}px`, }, })); const HealthyIndexTreeItem = ({ node, threshold, }: { node: INodeTreeStructure; threshold: IThreshold; }) => { const classes = getStyles(); const [open, setOpen] = useState(false); return ( <>
setOpen(!open)} > {open ? ( ) : ( )}
{`${ node.type }-${node.label.slice(-5)}`}
{open && ( <>
cpu
v.toFixed(3)} unit={'Core'} threshold={threshold.cpu} />
memory
(v / 1024 / 1024 / 1024).toFixed(1)} unit={'GB'} threshold={threshold.memory} />
)} ); }; const HealthyIndexWithTree = ({ nodeTree, setSelectedService, threshold, }: { nodeTree: INodeTreeStructure; setSelectedService: Dispatch>; threshold: IThreshold; }) => { const classes = getStyles(); return (
{!!nodeTree && (
setSelectedService(ENodeService.root)} > {nodeTree.label}
)} {!!nodeTree && nodeTree.children.map(node => ( ))}
); }; const HealthyIndexWithoutTree = ({ nodeTree, setSelectedService, }: { nodeTree: INodeTreeStructure; setSelectedService: Dispatch>; }) => { const classes = getStyles(); return (
{nodeTree.children.map(node => (
setSelectedService(node.service)} > {node.label}
))}
); }; const HealthyIndexDetailView = ({ nodeTree, setSelectedService, threshold, }: { nodeTree: INodeTreeStructure; setSelectedService: Dispatch>; threshold: IThreshold; }) => { return nodeTree.service === ENodeService.milvus ? ( ) : ( ); }; export default HealthyIndexDetailView;