Update system view (#540)

* part1 Signed-off-by: shanghaikid <[email protected]> * part2 Signed-off-by: shanghaikid <[email protected]> * finish refactor Signed-off-by: shanghaikid <[email protected]> * remove @mui/x-data-grid Signed-off-by: shanghaikid <[email protected]> * update Signed-off-by: shanghaikid <[email protected]> --------- Signed-off-by: shanghaikid <[email protected]>
zilliztech · Jun 18, 2024 · 4480c2d · 4480c2d
1 parent 945cf05
commit 4480c2d
Show file tree

Hide file tree

Showing 14 changed files with 260 additions and 204 deletions.
diff --git a/client/package.json b/client/package.json
@@ -19,7 +19,6 @@
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
     "@material-ui/pickers": "^3.3.10",
-    "@mui/x-data-grid": "^4.0.0",
     "axios": "^1.7.2",
     "codemirror": "^6.0.1",
     "d3": "^7.8.5",

diff --git a/client/src/components/grid/Table.tsx b/client/src/components/grid/Table.tsx
@@ -65,6 +65,12 @@ const useStyles = makeStyles(theme => ({
       },
     },
   },
+  selected: {
+    backgroundColor: '#f3fcfe !important',
+    '& td': {
+      background: 'inherit',
+    },
+  },
   cell: {
     borderBottom: '1px solid #e9e9ed',
 
@@ -168,6 +174,10 @@ const EnhancedTable: FC<TableType> = props => {
                       selected={isItemSelected && !disableSelect}
                       classes={{
                         hover: classes.rowHover,
+                        selected:
+                          isItemSelected && !disableSelect
+                            ? classes.selected
+                            : undefined,
                       }}
                     >
                       {openCheckBox && (
@@ -241,7 +251,7 @@ const EnhancedTable: FC<TableType> = props => {
                                     </Button>
                                   ) : colDef.formatter ? (
                                     colDef.formatter(row, row[colDef.id], i)
-                                    ) : (
+                                  ) : (
                                     <Typography title={row[colDef.id]}>
                                       {row[colDef.id]}
                                     </Typography>

diff --git a/client/src/i18n/cn/common.ts b/client/src/i18n/cn/common.ts
@@ -41,6 +41,8 @@ const commonTrans = {
     partitions: '分区',
     property: '属性',
     properties: '属性',
+    node: '节点',
+    nodes: '节点',
     results: '结果',
     of: '的',
     nextLabel: '下一页',

diff --git a/client/src/i18n/en/common.ts b/client/src/i18n/en/common.ts
@@ -42,6 +42,8 @@ const commonTrans = {
     partitions: 'Partitions',
     property: 'Property',
     properties: 'Properties',
+    node: 'Node',
+    nodes: 'Nodes',
     results: 'results',
     of: 'of',
     nextLabel: 'next page',

diff --git a/client/src/i18n/en/systemView.ts b/client/src/i18n/en/systemView.ts
@@ -7,10 +7,10 @@ const systemViewTrans = {
   configTitle: 'Config',
   valueTitle: 'Value',
   systemTitle: 'System',
-  thName: 'Node Name',
+  thName: 'Node',
   thIP: 'IP',
-  thCPUCount: 'CPU Core Count',
-  thCPUUsage: 'CPU Core Usage',
+  thCPUCount: 'CPU Core',
+  thCPUUsage: 'CPU Usage',
   thDiskUsage: 'Disk Usage',
   thMemUsage: 'Memory Usage',
   thVersion: 'version',

diff --git a/client/src/pages/system/DataCard.tsx b/client/src/pages/system/DataCard.tsx
@@ -8,9 +8,9 @@ import { DataProgressProps, DataSectionProps, DataCardProps } from './Types';
 const getStyles = makeStyles(theme => ({
   root: {
     backgroundColor: '#F6F6F6',
-    height: '100%',
     padding: theme.spacing(1.5, 2),
     boxSizing: 'border-box',
+    flexGrow: 1,
   },
 
   title: {
@@ -46,14 +46,14 @@ const getStyles = makeStyles(theme => ({
 
   ip: {
     color: theme.palette.attuDark.main,
-    fontSize: '16px',
+    fontSize: '11px',
     lineHeight: '24px',
   },
 
   sectionRoot: {
     borderSpacing: '0 1px',
     display: 'table',
-    marginTop: theme.spacing(2.5),
+    marginTop: theme.spacing(0.5),
     width: '100%',
   },
 
@@ -66,7 +66,7 @@ const getStyles = makeStyles(theme => ({
     color: theme.palette.attuGrey.dark,
     fontSize: '12px',
     lineHeight: '24px',
-    padding: theme.spacing(1, 2),
+    padding: theme.spacing(0.5, 1),
     textTransform: 'uppercase',
     width: '50%',
   },
@@ -76,8 +76,7 @@ const getStyles = makeStyles(theme => ({
     color: theme.palette.attuDark.main,
     display: 'table-cell',
     fontSize: '14px',
-    lineHeight: '24px',
-    padding: theme.spacing(1.5, 2),
+    padding: theme.spacing(1, 1),
     textTransform: 'capitalize',
     verticalAlign: 'middle',
     width: '50%',
@@ -138,13 +137,14 @@ const DataCard: FC<DataCardProps & React.HTMLAttributes<HTMLDivElement>> =
     const capacityTrans: { [key in string]: string } = commonTrans('capacity');
     const { node, extend } = props;
 
-    // const hardwareTitle = [t('hardwareTitle'), t('valueTitle')];
+    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 {
@@ -210,12 +210,13 @@ const DataCard: FC<DataCardProps & React.HTMLAttributes<HTMLDivElement>> =
             <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 className={classes.ip}>{`${t('thIP')}:${infos?.ip || ''}`}</div>
         </div>
-        {/* {extend && (
-          <DataSection titles={hardwareTitle} contents={hardwareContent} />
-        )} */}
         <DataSection titles={systemTitle} contents={systemContent} />
+        {extend && (
+          <DataSection titles={hardwareTitle} contents={hardwareContent} />
+        )}
+
         {systemConfig.length ? (
           <DataSection titles={configTitle} contents={systemConfig} />
         ) : null}

diff --git a/client/src/pages/system/MiniTopology.tsx b/client/src/pages/system/MiniTopology.tsx
@@ -3,10 +3,7 @@ import { makeStyles, Theme, useTheme } from '@material-ui/core';
 import { MiniTopoProps } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
-  container: {
-    height: '100%',
-    width: 'auto',
-  },
+  container: {},
   childNode: {
     transition: 'all .25s',
     cursor: 'pointer',
@@ -52,10 +49,10 @@ const capitalize = (s: string) => {
 const MiniTopo: FC<MiniTopoProps> = props => {
   const classes = getStyles();
   const theme = useTheme();
-  const { selectedCord, selectedChildNode, setCord } = props;
+  const { selectedCord, selectedChildNode, setCord, setShowChildView } = props;
 
-  const WIDTH = 400; // width for svg
-  const HEIGHT = 400; // height for svg
+  const WIDTH = 300; // width for svg
+  const HEIGHT = 300; // height for svg
   const LINE = 80; // line lenght from lv2 node
   const ANGLE = 10; // angle offset for lv2 node
   const R1 = 45; // root node radius
@@ -85,7 +82,7 @@ const MiniTopo: FC<MiniTopoProps> = props => {
       <g
         className={classes.childNode}
         onClick={() => {
-          setCord(null);
+          setShowChildView(false);
         }}
       >
         <circle