[attu metrics] layout

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

client/src/pages/systemHealthy/HealthyIndexDetailView.tsx

@@ -10,7 +10,7 @@ import { Dispatch, SetStateAction, useState } from 'react';
 const getStyles = makeStyles((theme: Theme) => ({
   mainView: {
     width: '100%',
-    marginTop: '20px',
+    marginTop: '16px',
   },
   healthyIndexItem: {
     display: 'flex',

client/src/pages/systemHealthy/HealthyIndexOverview.tsx

@@ -4,11 +4,9 @@ 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';
@@ -19,16 +17,12 @@ import {
   IThreshold,
   ITimeRangeOption,
 } from './Types';
-// import SettingsApplicationsIcon from '@mui/icons-material/SettingsApplications';
-
-// export const CHART_LABEL_WIDTH = 70;
 
 const getStyles = makeStyles((theme: Theme) => ({
   root: {
     width: `${MAIN_VIEW_WIDTH}px`,
-    height: `${TOPO_HEIGHT}px`,
     overflow: 'auto',
-    padding: '8px 56px 0px 24px',
+    padding: '8px 56px 60px 24px',
     fontSize: '14px',
   },
   headerContent: {
@@ -40,7 +34,7 @@ const getStyles = makeStyles((theme: Theme) => ({
     display: 'flex',
     alignItems: 'flex-end',
   },
-  titleMain: { fontSize: '18px', fontWeight: 500 },
+  titleMain: { fontSize: '18px', fontWeight: 500, cursor: 'pointer' },
   titleExt: { fontSize: '18px', fontWeight: 500, marginLeft: '8px' },
   timeRangeTabs: {
     fontSize: '12px',
@@ -66,8 +60,6 @@ const getStyles = makeStyles((theme: Theme) => ({
   chart: {
     height: `${LINE_CHART_LARGE_HEIGHT}px`,
     width: `${CHART_WIDTH}px`,
-
-    // border: '1px solid brown',
   },
 }));
 
@@ -94,7 +86,12 @@ const HealthyIndexOverview = ({
       <div className={classes.headerContent}>
         <div className={classes.titleContainer}>
           <div className={classes.title}>
-            <div className={classes.titleMain}>Healthy Status</div>
+            <div
+              className={classes.titleMain}
+              onClick={() => setSelectedService(ENodeService.root)}
+            >
+              Healthy Status
+            </div>
             {selectedNode.service !== ENodeService.milvus && (
               <div className={classes.titleExt}>
                 {`> ${selectedNode.service}`}

client/src/pages/systemHealthy/LineChartSmall.tsx

@@ -105,7 +105,7 @@ const LineChartSmall = ({
             x2={xScale(data.length - 0.5)}
             y2={yScale(threshold)}
             stroke={HEALTHY_STATUS_COLORS[EHealthyStatus.warning]}
-            strokeWidth={3}
+            strokeWidth={LINE_WIDTH + 1}
             strokeLinecap="round"
             strokeDasharray={"6 8"}
           />

client/src/pages/systemHealthy/SystemHealthyView.tsx

@@ -29,9 +29,9 @@ import { useTranslation } from 'react-i18next';
 const getStyles = makeStyles((theme: Theme) => ({
   root: {
     fontFamily: 'Roboto',
-    margin: '8px 40px',
+    margin: '16px 40px',
     position: 'relative',
-    height: 'fit-content',
+    height: '88%',
     display: 'flex',
     flexDirection: 'column',
   },
@@ -40,7 +40,6 @@ const getStyles = makeStyles((theme: Theme) => ({
     boxShadow: '3px 3px 10px rgba(0, 0, 0, 0.05)',
     display: 'grid',
     gridTemplateColumns: '1fr auto',
-    marginTop: '8px',
     height: '100%',
   },
 }));

client/src/pages/systemHealthy/Topology.tsx

@@ -18,6 +18,16 @@ const getStyles = makeStyles((theme: Theme) => ({
     borderBottomLeftRadius: '8px',
     overflow: 'auto',
     backgroundColor: 'white',
+    position: 'relative',
+  },
+  svg: {
+    overflow: 'visible',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    margin: 'auto',
   },
   prometheusInfoContainer: {
     position: 'absolute',
@@ -158,7 +168,12 @@ const Topology = ({
           </div>
         ))}
       </div>
-      <svg width={width} height={height} style={{ overflow: 'visible' }}>
+      <svg
+        className={classes.svg}
+        width={width}
+        height={height}
+        style={{ overflow: 'visible' }}
+      >
         {childrenNodes.map((node, i) => {
           const childPos = childrenPos[i];
           const subChildPos = subChildrenPos[i];