..

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

client/src/pages/systemHealthy/HealthyIndexOverview.tsx

@@ -8,9 +8,9 @@ import {
 import HealthyIndexLegend from './HealthyIndexLegend';
 import HealthyIndexRow from './HealthyIndexRow';
 import LineChartLarge from './LineChartLarge';
-import ThresholdPanel from './ThresholdPanel';
 import ThresholdSetting from './ThresholdSetting';
-import { ILineChartData, INodeTreeStructure, IThreshold } from './Types';
+import TimeRangeTabs from './TimeRangeTabs';
+import { ILineChartData, INodeTreeStructure, IThreshold, ITimeRangeOption } from './Types';
 // import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications';
 
 // export const CHART_LABEL_WIDTH = 70;
@@ -19,7 +19,7 @@ const getStyles = makeStyles((theme: Theme) => ({
   root: {
     width: `${MAIN_VIEW_WIDTH}px`,
     height: '100%',
-    padding: '12px 16px',
+    padding: '16px 24px',
     // boxShadow: '0 0 5px #ccc',
     fontSize: '14px',
   },
@@ -42,11 +42,11 @@ const getStyles = makeStyles((theme: Theme) => ({
   settingIcon: { marginLeft: '16px', display: 'flex', alignItems: 'flex-end' },
   mainView: {
     width: '100%',
-    marginTop: '12px',
+    marginTop: '16px',
   },
   healthyIndexItem: {
     display: 'flex',
-    marginTop: '6px',
+    marginTop: '8px',
     justifyContent: 'space-between',
   },
   healthyIndexLabel: {
@@ -84,28 +84,24 @@ const HealthyIndexOverview = ({
   lineChartsData,
   threshold,
   setThreshold,
+  timeRange,
+  setTimeRange,
 }: {
   nodes: INodeTreeStructure[];
   lineChartsData: ILineChartData[];
   threshold: IThreshold;
   setThreshold: Dispatch<SetStateAction<IThreshold>>;
+  timeRange: ITimeRangeOption;
+  setTimeRange: Dispatch<SetStateAction<ITimeRangeOption>>;
 }) => {
   const classes = getStyles();
-  console.log('nodes', nodes);
-  console.log('lineChartsData', lineChartsData);
   return (
     <div className={classes.root}>
       <div className={classes.headerContent}>
         <div className={classes.titleContainer}>
           <div className={classes.title}>Healthy Status</div>
-          <div className={classes.timeRangeTabs}>
-            <span>
-              <b>7day</b>
-            </span>
-            <span> / </span>
-            <span>24h</span>
-            <span> / </span>
-            <span>1h</span>
+          <div className={classes.timeRangeTabs}> 
+            <TimeRangeTabs timeRange={timeRange} setTimeRange={setTimeRange} />
           </div>
         </div>
         <div className={classes.legendContainer}>

client/src/pages/systemHealthy/SystemHealthyView.tsx

@@ -22,6 +22,7 @@ import { reconNodeTree } from './dataHandler';
 import HealthyIndexOverview from './HealthyIndexOverview';
 import HealthyIndexDetailView from './HealthyIndexDetailView';
 import { KeyboardArrowDown } from '@material-ui/icons';
+import { timeRangeOptions } from './consts';
 // import data from "./data.json";
 
 const getStyles = makeStyles((theme: Theme) => ({
@@ -82,29 +83,12 @@ const SystemHealthyView = () => {
   const classes = getStyles();
 
   const INTERVAL = 60000;
-  const timeRangeOptions: ITimeRangeOption[] = [
-    {
-      label: '1h',
-      value: 60 * 60 * 1000,
-      step: 3 * 60 * 1000,
-    },
-    {
-      label: '24h',
-      value: 24 * 60 * 60 * 1000,
-      step: 60 * 60 * 1000,
-    },
-    {
-      label: '7d',
-      value: 7 * 24 * 60 * 60 * 1000,
-      step: 8 * 60 * 60 * 1000,
-    },
-  ];
   const [timeRange, setTimeRange] = useState<ITimeRangeOption>(
     timeRangeOptions[2]
   );
   const defaultThreshold = {
     cpu: 1,
-    memory: 1 * 1024 * 1024 * 1024,
+    memory: 8 * 1024 * 1024 * 1024,
   };
   const [threshold, setThreshold] = useState<IThreshold>(defaultThreshold);
   const [prometheusData, setPrometheusData] = useState<IPrometheusAllData>();
@@ -149,7 +133,7 @@ const SystemHealthyView = () => {
 
   useEffect(() => {
     updateData();
-  }, []);
+  }, [timeRange]);
 
   useInterval(() => {
     console.log('interval');
@@ -183,6 +167,8 @@ const SystemHealthyView = () => {
           lineChartsData={lineChartsData}
           threshold={threshold}
           setThreshold={setThreshold}
+          timeRange={timeRange}
+          setTimeRange={setTimeRange}
         />
       </div>
       <div

client/src/pages/systemHealthy/ThresholdPanel.tsx

@@ -1,14 +0,0 @@
-import { Dispatch } from 'react';
-import { ITimeRangeOption } from './Types';
-
-const ThresholdPanel = ({
-  timeRange,
-  setTimeRange,
-}: {
-  timeRange: ITimeRangeOption;
-  setTimeRange: Dispatch<ITimeRangeOption>;
-}) => {
-  return <div></div>;
-};
-
-export default ThresholdPanel;

client/src/pages/systemHealthy/ThresholdSetting.tsx

@@ -16,8 +16,7 @@ import { useFormValidation } from '../../hooks/Form';
 import { formatForm } from '../../utils/Form';
 import { HEALTHY_STATUS_COLORS } from './consts';
 import { EHealthyStatus, IThreshold } from './Types';
-import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications';
-import SettingsSharpIcon from '@mui/icons-material/SettingsSharp';
+import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined';
 import CustomButton from '../../components/customButton/CustomButton';
 export interface SimpleDialogProps {
   open: boolean;
@@ -159,11 +158,11 @@ const ThresholdSetting = ({
 
   return (
     <>
-      <SettingsApplicationsIcon
+      <SettingsOutlinedIcon
         onClick={handleClickOpen}
         sx={{
           cursor: 'pointer',
-          transform: `translate(0, 2px)`
+          opacity: 0.8
         }}
       />
       <ThresholdSettingDialog

client/src/pages/systemHealthy/TimeRangeTabs.tsx

@@ -0,0 +1,60 @@
+import { makeStyles, Theme } from '@material-ui/core';
+import { Dispatch, SetStateAction } from 'react';
+import { timeRangeOptions } from './consts';
+import { ITimeRangeOption } from './Types';
+import clsx from 'clsx';
+
+const getStyles = makeStyles((theme: Theme) => ({
+  root: {
+    fontSize: '14px',
+    display: 'flex',
+    alignItems: "flex-end",
+    color: '#999',
+    fontWeight: 500,
+  },
+  divider: {
+    margin: "0 4px"
+  },
+  label: {
+    cursor: "pointer",
+    '&:hover': {
+
+    fontSize: "16px",
+    }
+  },
+  active: {
+    fontWeight: 600,
+    fontSize: "16px",
+    color: "#222"
+  },
+}));
+
+const TimeRangeTabs = ({
+  timeRange,
+  setTimeRange,
+}: {
+  timeRange: ITimeRangeOption;
+  setTimeRange: Dispatch<SetStateAction<ITimeRangeOption>>;
+}) => {
+  const classes = getStyles();
+  return (
+    <div className={classes.root}>
+      {timeRangeOptions.map((timeRangeOption, i: number) => (
+        <>
+          {i > 0 && <div className={classes.divider}> / </div>}
+          <div
+            className={clsx(
+              classes.label,
+              timeRangeOption.value === timeRange.value && classes.active
+            )}
+            onClick={() => setTimeRange(timeRangeOption)}
+          >
+            {timeRangeOption.label}
+          </div>
+        </>
+      ))}
+    </div>
+  );
+};
+
+export default TimeRangeTabs;

client/src/pages/systemHealthy/Topology.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, Theme, useTheme } from '@material-ui/core';
-import { Dispatch } from 'react';
+import { Dispatch, memo } from 'react';
 import {
   TOPO_HEIGHT,
   TOPO_LINK_LENGTH,
@@ -83,6 +83,8 @@ const Topology = ({
   const { rootNode, childrenNodes, rootPos, childrenPos, subChildrenPos } =
     nodesLayout(nodes, width, height);
 
+  console.log('!!');
+
   return (
     <div className={classes.root}>
       <svg width={width} height={height} style={{ overflow: 'visible' }}>
@@ -92,7 +94,10 @@ const Topology = ({
           return (
             <>
               {node.children.length > 0 && (
-                <g className={classes.node} onClick={() => onClick(node.service)}>
+                <g
+                  className={classes.node}
+                  onClick={() => onClick(node.service)}
+                >
                   <line
                     x1={childPos[0]}
                     y1={childPos[1]}

client/src/pages/systemHealthy/consts.ts

@@ -1,4 +1,4 @@
-import { EHealthyStatus } from './Types';
+import { EHealthyStatus, ITimeRangeOption } from './Types';
 
 export const TOPO_WIDTH = 800;
 export const TOPO_HEIGHT = 600;
@@ -20,3 +20,20 @@ export const LINE_CHART_LARGE_HEIGHT = 60;
 export const LINE_COLOR = '#394E97';
 export const LINE_LABEL_Y_PADDING = 6;
 export const LINE_LABEL_FONT_SIZE = 14;
+export const timeRangeOptions: ITimeRangeOption[] = [
+    {
+      label: '1h',
+      value: 60 * 60 * 1000,
+      step: 3 * 60 * 1000,
+    },
+    {
+      label: '24h',
+      value: 24 * 60 * 60 * 1000,
+      step: 60 * 60 * 1000,
+    },
+    {
+      label: '7d',
+      value: 7 * 24 * 60 * 60 * 1000,
+      step: 8 * 60 * 60 * 1000,
+    },
+  ];