Merge pull request #220 from sutcalag/main

add system view svg template

client/src/components/icons/Icons.tsx

@@ -34,6 +34,7 @@ import { ReactComponent as UploadIcon } from '../../assets/icons/upload.svg';
 import { ReactComponent as VectorSearchIcon } from '../../assets/icons/nav-search.svg';
 import { ReactComponent as SearchEmptyIcon } from '../../assets/icons/search.svg';
 import { ReactComponent as CopyIcon } from '../../assets/icons/copy.svg';
+import { ReactComponent as SystemIcon } from '../../assets/icons/system.svg';
 
 const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   search: (props = {}) => <SearchIcon {...props} />,
@@ -73,6 +74,9 @@ const icons: { [x in IconsType]: (props?: any) => React.ReactElement } = {
   navSearch: (props = {}) => (
     <SvgIcon viewBox="0 0 20 20" component={VectorSearchIcon} {...props} />
   ),
+  navSystem: (props = {}) => (
+    <SvgIcon viewBox="0 0 20 20" component={SystemIcon} {...props} />
+  ),
   info: (props = {}) => (
     <SvgIcon viewBox="0 0 16 16" component={InfoIcon} {...props} />
   ),

client/src/components/icons/Types.ts

@@ -16,6 +16,7 @@ export type IconsType =
   | 'navCollection'
   | 'navConsole'
   | 'navSearch'
+  | 'navSystem'
   | 'expandLess'
   | 'expandMore'
   | 'back'

client/src/components/layout/Layout.tsx

@@ -55,6 +55,10 @@ const Layout = (props: any) => {
       return navTrans('search');
     }
 
+    if (location.pathname.includes('system')) {
+      return navTrans('system');
+    }
+
     return navTrans('overview');
   }, [location, navTrans]);
 
@@ -64,6 +68,11 @@ const Layout = (props: any) => {
       label: navTrans('overview'),
       onClick: () => history.push('/'),
     },
+    {
+      icon: icons.navSystem,
+      label: navTrans('system'),
+      onClick: () => history.push('/system'),
+    },
     {
       icon: icons.navCollection,
       label: navTrans('collection'),

client/src/hooks/Navigation.ts

@@ -47,6 +47,14 @@ export const useNavigationHook = (
         setNavInfo(navInfo);
         break;
       }
+      case ALL_ROUTER_TYPES.SYSTEM: {
+        const navInfo: NavInfo = {
+          navTitle: navTrans('system'),
+          backPath: '',
+        };
+        setNavInfo(navInfo);
+        break;
+      }
       default:
         break;
     }

client/src/i18n/cn/nav.ts

@@ -3,6 +3,7 @@ const navTrans = {
   collection: 'Collection',
   console: 'Search Console',
   search: 'Vector Search',
+  system: 'System View',
 };
 
 export default navTrans;

client/src/i18n/en/nav.ts

@@ -3,6 +3,7 @@ const navTrans = {
   collection: 'Collection',
   console: 'Search Console',
   search: 'Vector Search',
+  system: 'System View',
 };
 
 export default navTrans;

client/src/pages/system/LineChart.tsx

@@ -0,0 +1,110 @@
+
+import { makeStyles, Theme } from '@material-ui/core';
+
+const getStyles = makeStyles((theme: Theme) => ({
+  root: {
+    transform: 'scaleY(-1)',
+  },
+  ycoord: {
+    cursor: 'pointer',
+
+    "& circle": {
+      transition: 'all .25s',
+    },
+
+    "&:hover, &:focus": {
+      "& line": {
+        transition: 'all .25s',
+        opacity: 1,
+      },
+    },
+
+    "&:hover": {
+      "& circle": {
+        fill: '#06AFF2',
+      },
+    },
+
+    "&:focus": {
+      outline: 'none',
+
+      "& circle": {
+        fill: '#06F3AF',
+      },
+    },
+  }
+}));
+
+const LineChart = (props: any) => {
+  const fullHeight = 100;
+  const fullWidth = 300;
+  const step = 30;
+  const classes = getStyles();
+  // const { nodes } = props;
+  const nodes = [
+    {
+      percent: 90,
+      value: 2000,
+      timestamp: 1629947929204,
+    },
+
+    {
+      percent: 30,
+      value: 2000,
+      timestamp: 1629947329204,
+    },
+
+    {
+      percent: 50,
+      value: 2000,
+      timestamp: 1629947129204,
+    },
+
+    {
+      percent: 80,
+      value: 2000,
+      timestamp: 1629947129204,
+    },
+
+    {
+      percent: 30,
+      value: 2000,
+      timestamp: 1629947129204,
+    },
+
+    {
+      percent: 20,
+      value: 2000,
+      timestamp: 1629947129204,
+    },
+  ];
+
+  return (
+    <svg className={classes.root} width="300" height="100" viewBox="0 0 300 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      {
+        nodes.map((node, index) => {
+          const x1 = fullWidth - (nodes.length - index + 1) * step;
+          const y1 = node.percent;
+          let line = null;
+          if (index < nodes.length - 1) {
+            const x2 = fullWidth - (nodes.length - index) * step;
+            const y2 = nodes[index + 1]['percent'];
+            line = <line x1={x1} y1={y1} x2={x2} y2={y2} stroke="#06AFF2" />;
+          }
+          return (
+            <g>
+              {line}
+              <g className={classes.ycoord} tabIndex={0}>
+                <circle cx={x1} cy={y1} r={3} fill="white" stroke="#06AFF2" />
+                <rect opacity="0" x={x1 - 5} y={0} width="10" height={fullHeight} fill="#E9E9ED" />
+                <line opacity="0" x1={x1} y1={0} x2={x1} y2={fullWidth} stroke="#06AFF2" stroke-dasharray="2.5" />
+              </g>
+            </g>
+          )
+        })
+      }
+    </svg >
+  );
+};
+
+export default LineChart;

client/src/pages/system/Progress.tsx

@@ -0,0 +1,37 @@
+
+import { makeStyles, Theme } from '@material-ui/core';
+
+const getStyles = makeStyles((theme: Theme) => ({
+  root: {
+    transform: 'scaleY(-1)',
+  },
+  ycoord: {
+    cursor: 'pointer',
+
+    "&:hover": {
+      "& line": {
+        transition: 'all .25s',
+        opacity: 1,
+      },
+
+      "& circle": {
+        transition: 'all .25s',
+        fill: '#06AFF2',
+      },
+    },
+  }
+}));
+
+const Progress = (props: any) => {
+  const classes = getStyles();
+  const { percent = 0, color = '#06F3AF' } = props;
+
+  return (
+    <svg className={classes.root} width="300" height="100" viewBox="0 0 300 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <line x1={10} y1={50} x2={250} y2={50} stroke-width="12" stroke="#AEAEBB" stroke-linecap="round" />
+      <line x1={10} y1={50} x2={250 * percent / 100} y2={50} stroke-width="12" stroke={color} stroke-linecap="round" />
+    </svg >
+  );
+};
+
+export default Progress;

client/src/pages/system/SystemView.tsx

@@ -0,0 +1,21 @@
+import { useNavigationHook } from '../../hooks/Navigation';
+import { ALL_ROUTER_TYPES } from '../../router/Types';
+import Topo from './Topology';
+import LineChart from './LineChart';
+import Progress from './Progress';
+
+const SystemView = () => {
+  useNavigationHook(ALL_ROUTER_TYPES.SYSTEM);
+
+  return (
+    <div>
+
+      <Progress percent={50} color={"#06F3AF"} />
+      <Progress percent={90} color={"#635DCE"} />
+      <LineChart />
+      <Topo />
+    </div>
+  );
+};
+
+export default SystemView;

client/src/router/Config.ts

@@ -3,6 +3,7 @@ import Collections from '../pages/collections/Collections';
 import Connect from '../pages/connect/Connect';
 import Overview from '../pages/overview/Overview';
 import VectorSearch from '../pages/seach/VectorSearch';
+import SystemView from '../pages/system/SystemView';
 import { RouterConfigType } from './Types';
 
 const RouterConfig: RouterConfigType[] = [
@@ -31,6 +32,11 @@ const RouterConfig: RouterConfigType[] = [
     component: VectorSearch,
     auth: true,
   },
+  {
+    path: '/system',
+    component: SystemView,
+    auth: true,
+  },
 ];
 
 export default RouterConfig;

client/src/router/Types.ts

@@ -7,6 +7,8 @@ export enum ALL_ROUTER_TYPES {
   COLLECTION_DETAIL = 'collection_detail',
   // 'search'
   SEARCH = 'search',
+  // 'system'
+  SYSTEM = 'system'
 }
 
 export type NavInfo = {