..

Signed-off-by: min.tian <min.tian.cn@gmail.com>

client/src/pages/systemHealthy/HealthyIndexDetailView.tsx

@@ -1,5 +1,168 @@
-const HealthyIndexDetailView = () => {
-  return <div></div>;
+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 } from './Types';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import { useState } from 'react';
+
+const getStyles = makeStyles((theme: Theme) => ({
+  mainView: {
+    width: '100%',
+    marginTop: '16px',
+  },
+  healthyIndexItem: {
+    display: 'flex',
+    marginTop: '8px',
+    justifyContent: 'space-between',
+  },
+  healthyIndexLabel: {
+    // width: `${CHART_LABEL_WIDTH}px`,
+
+    fontWeight: 500,
+    fontSize: '12px',
+    color: '#444',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+  },
+  healthyIndexLabelText: {},
+  healthyIndexRow: {
+    width: `${CHART_WIDTH}px`,
+    // border: '1px solid brown',
+  },
+  chartItem: {
+    margin: '8px 0',
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+  },
+  chartLabel: {
+    width: `50px`,
+    paddingLeft: '20px',
+    fontSize: '12px',
+    fontWeight: 500,
+    color: '#444',
+  },
+  chart: {
+    height: `${LINE_CHART_SMALL_HEIGHT}px`,
+    width: `${CHART_WIDTH}px`,
+
+    // border: '1px solid brown',
+  },
+}));
+
+const HealthyIndexTreeItem = ({ node }: { node: INodeTreeStructure }) => {
+  const classes = getStyles();
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <div
+        key={`${node.service}-${node.type}-${node.label}`}
+        className={classes.healthyIndexItem}
+      >
+        <div
+          className={classes.healthyIndexLabel}
+          onClick={() => setOpen(!open)}
+        >
+          {open ? (
+            <KeyboardArrowDownIcon fontSize="small" />
+          ) : (
+            <KeyboardArrowRightIcon fontSize="small" />
+          )}
+          <div className={classes.healthyIndexLabelText}>{`${
+            node.type
+          }-${node.label.slice(-5)}`}</div>
+        </div>
+        <div className={classes.healthyIndexRow}>
+          <HealthyIndexRow statusList={node.healthyStatus} />
+        </div>
+      </div>
+      {open && (
+        <>
+          <div className={classes.chartItem}>
+            <div className={classes.chartLabel}>cpu</div>
+            <div className={classes.chart}>
+              <LineChartSmall
+                data={node.cpu || []}
+                format={(v: number) => v.toFixed(3)}
+                unit={'Core'}
+              />
+            </div>
+          </div>
+          <div className={classes.chartItem}>
+            <div className={classes.chartLabel}>memory</div>
+            <div className={classes.chart}>
+              <LineChartSmall
+                data={node.memory || []}
+                format={(v: number) => (v / 1024 / 1024 / 1024).toFixed(1)}
+                unit={'GB'}
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+const HealthyIndexWithTree = ({
+  nodeTree,
+}: {
+  nodeTree: INodeTreeStructure;
+}) => {
+  const classes = getStyles();
+  return (
+    <div className={classes.mainView}>
+      {!!nodeTree && (
+        <div className={classes.healthyIndexItem}>
+          <div className={classes.healthyIndexLabel}>{nodeTree.label}</div>
+          <div className={classes.healthyIndexRow}>
+            <HealthyIndexRow statusList={nodeTree?.healthyStatus || []} />
+          </div>
+        </div>
+      )}
+      {nodeTree.children.map(node => (
+        <HealthyIndexTreeItem key={node.label} node={node} />
+      ))}
+    </div>
+  );
+};
+
+const HealthyIndexWithoutTree = ({
+  nodeTree,
+}: {
+  nodeTree: INodeTreeStructure;
+}) => {
+  const classes = getStyles();
+  return (
+    <div className={classes.mainView}>
+      {nodeTree.children.map(node => (
+        <div
+          key={`${node.service}-${node.type}`}
+          className={classes.healthyIndexItem}
+        >
+          <div className={classes.healthyIndexLabel}>{node.label}</div>
+          <div className={classes.healthyIndexRow}>
+            <HealthyIndexRow statusList={node.healthyStatus} />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const HealthyIndexDetailView = ({
+  nodeTree,
+}: {
+  nodeTree: INodeTreeStructure;
+}) => {
+  return nodeTree.service === ENodeService.milvus ? (
+    <HealthyIndexWithoutTree nodeTree={nodeTree} />
+  ) : (
+    <HealthyIndexWithTree nodeTree={nodeTree} />
+  );
 };
 
 export default HealthyIndexDetailView;

client/src/pages/systemHealthy/HealthyIndexOverview.tsx

@@ -4,13 +4,21 @@ import {
   CHART_WIDTH,
   LINE_CHART_LARGE_HEIGHT,
   MAIN_VIEW_WIDTH,
+  TOPO_HEIGHT,
 } from './consts';
+import HealthyIndexDetailView from './HealthyIndexDetailView';
 import HealthyIndexLegend from './HealthyIndexLegend';
 import HealthyIndexRow from './HealthyIndexRow';
 import LineChartLarge from './LineChartLarge';
 import ThresholdSetting from './ThresholdSetting';
 import TimeRangeTabs from './TimeRangeTabs';
-import { ILineChartData, INodeTreeStructure, IThreshold, ITimeRangeOption } from './Types';
+import {
+  ENodeService,
+  ILineChartData,
+  INodeTreeStructure,
+  IThreshold,
+  ITimeRangeOption,
+} from './Types';
 // import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications';
 
 // export const CHART_LABEL_WIDTH = 70;
@@ -18,8 +26,9 @@ import { ILineChartData, INodeTreeStructure, IThreshold, ITimeRangeOption } from
 const getStyles = makeStyles((theme: Theme) => ({
   root: {
     width: `${MAIN_VIEW_WIDTH}px`,
-    height: '100%',
-    padding: '16px 24px',
+    height: `${TOPO_HEIGHT}px`,
+    overflow: 'auto',
+    padding: '16px 56px 16px 24px',
     // boxShadow: '0 0 5px #ccc',
     fontSize: '14px',
   },
@@ -29,9 +38,11 @@ const getStyles = makeStyles((theme: Theme) => ({
   },
   titleContainer: {},
   title: {
-    fontSize: '18px',
-    fontWeight: 500,
+    display: 'flex',
+    alignItems: 'flex-end',
   },
+  titleMain: { fontSize: '18px', fontWeight: 500 },
+  titleExt: { fontSize: '18px', fontWeight: 500, marginLeft: '8px' },
   timeRangeTabs: {
     fontSize: '12px',
   },
@@ -40,25 +51,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     alignItems: 'flex-end',
   },
   settingIcon: { marginLeft: '16px', display: 'flex', alignItems: 'flex-end' },
-  mainView: {
-    width: '100%',
-    marginTop: '16px',
-  },
-  healthyIndexItem: {
-    display: 'flex',
-    marginTop: '8px',
-    justifyContent: 'space-between',
-  },
-  healthyIndexLabel: {
-    // width: `${CHART_LABEL_WIDTH}px`,
 
-    fontWeight: 500,
-    color: '#444',
-  },
-  healthyIndexRow: {
-    width: `${CHART_WIDTH}px`,
-    // border: '1px solid brown',
-  },
   chartView: { width: '100%', marginTop: '30px' },
   chartItem: {
     margin: '24px 0',
@@ -80,14 +73,14 @@ const getStyles = makeStyles((theme: Theme) => ({
 }));
 
 const HealthyIndexOverview = ({
-  nodes,
+  selectedNode,
   lineChartsData,
   threshold,
   setThreshold,
   timeRange,
   setTimeRange,
 }: {
-  nodes: INodeTreeStructure[];
+  selectedNode: INodeTreeStructure;
   lineChartsData: ILineChartData[];
   threshold: IThreshold;
   setThreshold: Dispatch<SetStateAction<IThreshold>>;
@@ -99,8 +92,15 @@ const HealthyIndexOverview = ({
     <div className={classes.root}>
       <div className={classes.headerContent}>
         <div className={classes.titleContainer}>
-          <div className={classes.title}>Healthy Status</div>
-          <div className={classes.timeRangeTabs}> 
+          <div className={classes.title}>
+            <div className={classes.titleMain}>Healthy Status</div>
+            {selectedNode.service !== ENodeService.milvus && (
+              <div className={classes.titleExt}>
+                {`> ${selectedNode.service}`}
+              </div>
+            )}
+          </div>
+          <div className={classes.timeRangeTabs}>
             <TimeRangeTabs timeRange={timeRange} setTimeRange={setTimeRange} />
           </div>
         </div>
@@ -114,31 +114,24 @@ const HealthyIndexOverview = ({
           </div>
         </div>
       </div>
-      <div className={classes.mainView}>
-        {nodes.map(node => (
-          <div className={classes.healthyIndexItem}>
-            <div className={classes.healthyIndexLabel}>{node.label}</div>
-            <div className={classes.healthyIndexRow}>
-              <HealthyIndexRow statusList={node.healthyStatus} />
-            </div>
-          </div>
-        ))}
-      </div>
-      <div className={classes.chartView}>
-        <div className={classes.title}>Search Query History</div>
-        {lineChartsData.map(chartData => (
-          <div className={classes.chartItem}>
-            <div className={classes.chartLabel}>{chartData.label}</div>
-            <div className={classes.chart}>
-              <LineChartLarge
-                data={chartData.data}
-                format={chartData.format}
-                unit={chartData.unit}
-              />
+      <HealthyIndexDetailView nodeTree={selectedNode} />
+      {selectedNode.service === ENodeService.milvus && (
+        <div className={classes.chartView}>
+          <div className={classes.title}>Search Query History</div>
+          {lineChartsData.map(chartData => (
+            <div className={classes.chartItem}>
+              <div className={classes.chartLabel}>{chartData.label}</div>
+              <div className={classes.chart}>
+                <LineChartLarge
+                  data={chartData.data}
+                  format={chartData.format}
+                  unit={chartData.unit}
+                />
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };

client/src/pages/systemHealthy/LineChartSmall.tsx

@@ -1,11 +1,101 @@
+import * as d3 from 'd3';
+import {
+  CHART_WIDTH,
+  LINE_CHART_LARGE_HEIGHT,
+  LINE_CHART_SMALL_HEIGHT,
+  LINE_COLOR,
+  LINE_LABEL_FONT_SIZE,
+  LINE_LABEL_Y_PADDING,
+  LINE_SMALL_LABEL_FONT_SIZE,
+} from './consts';
+
 const LineChartSmall = ({
   data,
   format = d => d,
+  unit = '',
 }: {
   data: number[];
   format?: (d: any) => string;
+  unit?: string;
 }) => {
-  return <div></div>;
-};
+  const length = data.length;
+  const width = CHART_WIDTH;
+  const height = LINE_CHART_SMALL_HEIGHT - 3;
+  const fontSize = LINE_SMALL_LABEL_FONT_SIZE;
+
+  const xDomain = [0, length];
+  const xRange = [0, CHART_WIDTH];
+  let maxData = d3.max(data, d => d) as number;
+  maxData = maxData === 0 ? 1 : maxData;
+
+  const yDomain = [0, maxData * 1.1];
+  const yRange = [height, 0];
 
+  const xScale = d3.scaleLinear(xDomain, xRange);
+  const yScale = d3.scaleLinear(yDomain, yRange);
+
+  const nodes = data
+    .map((d, i) => (d >= 0 ? [xScale(i + 0.5), yScale(d)] : undefined))
+    .filter(a => a) as [number, number][];
+
+  const line = d3
+    .line()
+    .curve(d3.curveBumpX)
+    .x(d => d[0])
+    .y(d => d[1]);
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      style={{ overflow: 'visible' }}
+      fontSize={fontSize}
+    >
+      <g className="x-axis">
+        <line x1={0} y1={height} x2={width} y2={height} stroke="#666" />
+        <line
+          x1={width - LINE_LABEL_Y_PADDING}
+          y1={yScale(maxData)}
+          x2={width}
+          y2={yScale(maxData)}
+          stroke="#666"
+          strokeWidth="2"
+        />
+      </g>
+      <g className="y-axis">
+        <text x={width + LINE_LABEL_Y_PADDING} y={height} textAnchor="start">
+          {0}
+        </text>
+        <text
+          x={width + LINE_LABEL_Y_PADDING}
+          y={yScale(maxData) + 3}
+          textAnchor="start"
+        >
+          {format(maxData)}
+        </text>
+        {unit && (
+          <text
+            x={width + LINE_LABEL_Y_PADDING}
+            y={yScale(maxData) + 3 + fontSize}
+            textAnchor="start"
+            fill={'#333'}
+            fontSize={fontSize - 2}
+          >
+            ({unit})
+          </text>
+        )}
+      </g>
+      <g className="line">
+        <path
+          d={line(nodes) as any}
+          fill="none"
+          stroke={`${LINE_COLOR}`}
+          strokeWidth={3}
+          opacity={0.8}
+          strokeLinecap="round"
+        />
+      </g>
+    </svg>
+  );
+};
 export default LineChartSmall;

client/src/pages/systemHealthy/SystemHealthyView.tsx

@@ -92,8 +92,13 @@ const SystemHealthyView = () => {
   };
   const [threshold, setThreshold] = useState<IThreshold>(defaultThreshold);
   const [prometheusData, setPrometheusData] = useState<IPrometheusAllData>();
-  const nodes = useMemo<INodeTreeStructure[]>(
-    () => (prometheusData ? reconNodeTree(prometheusData, threshold) : []),
+  const nodeTree = useMemo<INodeTreeStructure>(
+    () =>
+      prometheusData
+        ? reconNodeTree(prometheusData, threshold)
+        : ({
+            children: [] as INodeTreeStructure[],
+          } as INodeTreeStructure),
     [prometheusData, threshold]
   );
   const lineChartsData = useMemo<ILineChartData[]>(
@@ -118,7 +123,6 @@ const SystemHealthyView = () => {
         : [],
     [prometheusData]
   );
-  const [selectedNode, setSelectedNode] = useState<INodeTreeStructure>();
 
   const updateData = async () => {
     const curT = new Date().getTime();
@@ -146,24 +150,28 @@ const SystemHealthyView = () => {
     ENodeService.data,
   ];
 
-  const exploreDetailHandler = (service: ENodeService) => {
-    console.log('service', service);
-    if (hasDetailServices.indexOf(service) >= 0) {
-      const node = nodes.find(node => node.service === service);
-      node !== selectedNode && setSelectedNode(node);
-    }
-  };
+  const [selectedService, setSelectedService] = useState<ENodeService>(
+    ENodeService.root
+  );
+
+  const selectedNode = useMemo<INodeTreeStructure>(() => {
+    if (hasDetailServices.indexOf(selectedService) >= 0) {
+      return nodeTree.children.find(
+        node => node.service === selectedService
+      ) as INodeTreeStructure;
+    } else return nodeTree;
+  }, [selectedService, nodeTree]);
 
   return (
     <div className={classes.root}>
       <div className={classes.mainView}>
         <Topology
-          nodes={nodes}
-          // selectedNode={selectedNode as INodeTreeStructure}
-          onClick={exploreDetailHandler}
+          nodeTree={nodeTree}
+          selectedService={selectedService}
+          onClick={setSelectedService}
         />
         <HealthyIndexOverview
-          nodes={nodes}
+          selectedNode={selectedNode}
           lineChartsData={lineChartsData}
           threshold={threshold}
           setThreshold={setThreshold}
@@ -171,29 +179,6 @@ const SystemHealthyView = () => {
           setTimeRange={setTimeRange}
         />
       </div>
-      <div
-        className={clsx(
-          classes.detailView,
-          selectedNode ? classes.showDetailView : classes.hideDetailView
-        )}
-      >
-        <button
-          className={classes.childCloseBtn}
-          onClick={() => setSelectedNode(undefined)}
-        >
-          <KeyboardArrowDown />
-        </button>
-        <div className={classes.detailViewContainer}>
-          {selectedNode && (
-            <Topology
-              nodes={selectedNode.children}
-              // selectedNode={selectedNode}
-              onClick={exploreDetailHandler}
-            />
-          )}
-          <HealthyIndexDetailView />
-        </div>
-      </div>
     </div>
   );
 };

client/src/pages/systemHealthy/ThresholdSetting.tsx

@@ -79,7 +79,7 @@ function ThresholdSettingDialog({
   const inputConfigs: ITextfieldConfig[] = useMemo(
     () => [
       {
-        label: `CPU (Cores)`,
+        label: `CPU (Core)`,
         key: 'prometheus_address',
         onChange: (v: string) => handleFormChange('cpu', +v),
         variant: 'filled',

client/src/pages/systemHealthy/TimeRangeTabs.tsx

@@ -8,24 +8,23 @@ const getStyles = makeStyles((theme: Theme) => ({
   root: {
     fontSize: '14px',
     display: 'flex',
-    alignItems: "flex-end",
+    alignItems: 'flex-end',
     color: '#999',
     fontWeight: 500,
   },
   divider: {
-    margin: "0 4px"
+    margin: '0 4px',
   },
   label: {
-    cursor: "pointer",
+    cursor: 'pointer',
     '&:hover': {
-
-    fontSize: "16px",
-    }
+      fontSize: '16px',
+    },
   },
   active: {
     fontWeight: 600,
-    fontSize: "16px",
-    color: "#222"
+    fontSize: '16px',
+    color: '#222',
   },
 }));
 
@@ -43,6 +42,7 @@ const TimeRangeTabs = ({
         <>
           {i > 0 && <div className={classes.divider}> / </div>}
           <div
+            key={timeRangeOption.label}
             className={clsx(
               classes.label,
               timeRangeOption.value === timeRange.value && classes.active

client/src/pages/systemHealthy/Topology.tsx

@@ -8,6 +8,7 @@ import {
 } from './consts';
 import { getIcon } from './getIcon';
 import { ENodeService, ENodeType, INodeTreeStructure } from './Types';
+import clsx from 'clsx';
 
 const getStyles = makeStyles((theme: Theme) => ({
   root: {
@@ -38,6 +39,20 @@ const getStyles = makeStyles((theme: Theme) => ({
       outline: 'none',
     },
   },
+  selected: {
+    '& svg path': {
+      fill: 'white',
+    },
+
+    '& circle': {
+      fill: theme.palette.primary.main,
+      stroke: theme.palette.primary.main,
+    },
+
+    '& text': {
+      fill: 'white',
+    },
+  },
 }));
 
 const nodesLayout = (
@@ -68,11 +83,13 @@ const nodesLayout = (
 };
 
 const Topology = ({
-  nodes,
+  nodeTree,
   onClick,
+  selectedService,
 }: {
-  nodes: INodeTreeStructure[];
+  nodeTree: INodeTreeStructure;
   onClick: (service: ENodeService) => void;
+  selectedService: ENodeService;
 }) => {
   const width = TOPO_WIDTH;
   const height = TOPO_HEIGHT;
@@ -81,9 +98,7 @@ const Topology = ({
   const theme = useTheme();
 
   const { rootNode, childrenNodes, rootPos, childrenPos, subChildrenPos } =
-    nodesLayout(nodes, width, height);
-
-  console.log('!!');
+    nodesLayout(nodeTree.children, width, height);
 
   return (
     <div className={classes.root}>
@@ -91,6 +106,7 @@ const Topology = ({
         {childrenNodes.map((node, i) => {
           const childPos = childrenPos[i];
           const subChildPos = subChildrenPos[i];
+
           return (
             <>
               {node.children.length > 0 && (
@@ -129,7 +145,13 @@ const Topology = ({
                   >{`${node.children.length - 1} Node(s)`}</text>
                 </g>
               )}
-              <g className={classes.node} onClick={() => onClick(node.service)}>
+              <g
+                className={clsx(
+                  classes.node,
+                  node.service === selectedService && classes.selected
+                )}
+                onClick={() => onClick(node.service)}
+              >
                 <line
                   x1={rootPos[0]}
                   y1={rootPos[1]}
@@ -163,7 +185,13 @@ const Topology = ({
                 </text>
               </g>
 
-              <g className={classes.node}>
+              <g
+                onClick={() => onClick(rootNode.service)}
+                className={clsx(
+                  classes.node,
+                  rootNode.service === selectedService && classes.selected
+                )}
+              >
                 <circle
                   cx={rootPos[0]}
                   cy={rootPos[1]}

client/src/pages/systemHealthy/consts.ts

@@ -17,9 +17,11 @@ export const HEALTHY_STATUS_COLORS = {
 };
 
 export const LINE_CHART_LARGE_HEIGHT = 60;
+export const LINE_CHART_SMALL_HEIGHT = 42;
 export const LINE_COLOR = '#394E97';
 export const LINE_LABEL_Y_PADDING = 6;
 export const LINE_LABEL_FONT_SIZE = 14;
+export const LINE_SMALL_LABEL_FONT_SIZE = 12;
 export const timeRangeOptions: ITimeRangeOption[] = [
     {
       label: '1h',

client/src/pages/systemHealthy/dataHandler.ts

@@ -109,15 +109,21 @@ export const reconNodeTree = (
     threshold
   );
 
-  return [
-    rootNode,
-    indexNode,
-    queryNode,
-    dataNode,
-    metaNode,
-    msgstreamNode,
-    objstorageNode,
-  ] as INodeTreeStructure[];
+  return {
+    service: ENodeService.milvus,
+    type: ENodeType.overview,
+    label: 'Overview',
+    healthyStatus: [],
+    children: [
+      rootNode,
+      indexNode,
+      queryNode,
+      dataNode,
+      metaNode,
+      msgstreamNode,
+      objstorageNode,
+    ],
+  } as INodeTreeStructure;
 };
 
 export const THIRD_PARTY_SERVICE_HEALTHY_THRESHOLD = 0.95;