new overview

client/src/components/cards/EmptyCard.tsx

@@ -1,5 +1,11 @@
-import React, { FC } from 'react';
-import { makeStyles, Theme, Typography } from '@material-ui/core';
+import { FC } from 'react';
+import {
+  makeStyles,
+  Theme,
+  Typography,
+  Card,
+  CardContent,
+} from '@material-ui/core';
 import StatusIcon from '../status/StatusIcon';
 import { ChildrenStatusType } from '../status/Types';
 import { EmptyCardProps } from './Types';
@@ -8,6 +14,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     backgroundColor: '#fff',
     flexDirection: 'column',
+    textAlign: 'center',
   },
   text: {
     marginTop: theme.spacing(2),
@@ -34,14 +41,16 @@ const EmptyCard: FC<EmptyCardProps> = ({
   const classes = useStyles();
 
   return (
-    <section
+    <Card
       className={`flex-center card-wrapper ${classes.wrapper} ${wrapperClass}`}
     >
-      {loading && <StatusIcon type={ChildrenStatusType.CREATING} size={40} />}
-      {icon}
-      <Typography className={classes.text}>{text}</Typography>
-      <Typography className={classes.subText}>{subText}</Typography>
-    </section>
+      <CardContent>
+        {loading && <StatusIcon type={ChildrenStatusType.CREATING} size={40} />}
+        {icon}
+        <Typography className={classes.text}>{text}</Typography>
+        <Typography className={classes.subText}>{subText}</Typography>
+      </CardContent>
+    </Card>
   );
 };
 

client/src/components/menu/CommunityBtn.tsx

@@ -40,7 +40,6 @@ const getStyles = makeStyles((theme: Theme) => ({
     position: 'absolute',
     width: '360px',
     overflow: 'hidden',
-    fontFamily: 'Roboto',
   },
   head: {
     backgroundColor: theme.palette.primary.main,
@@ -54,7 +53,6 @@ const getStyles = makeStyles((theme: Theme) => ({
     fontSize: theme.spacing(2),
     lineHeight: theme.spacing(3),
     letterSpacing: '-0.01em',
-    fontFamily: 'Roboto'
   },
   titleDesc: {
     color: '#f0f4f9',

client/src/context/Data.tsx

@@ -1,10 +1,13 @@
 import { createContext, useEffect, useState } from 'react';
-import { DatabaseHttp } from '@/http';
+import { DatabaseHttp, UserHttp, MilvusHttp } from '@/http';
+import { parseJson, getNode, getSystemConfigs } from '@/utils';
+import { MILVUS_NODE_TYPE } from '@/consts';
 import { DataContextType } from './Types';
 
 export const dataContext = createContext<DataContextType>({
   database: 'default',
   databases: ['default'],
+  data: {},
   setDatabase: () => {},
   setDatabaseList: () => {},
 });
@@ -13,23 +16,84 @@ const { Provider } = dataContext;
 export const DataProvider = (props: { children: React.ReactNode }) => {
   const [database, setDatabase] = useState<string>('default');
   const [databases, setDatabases] = useState<string[]>(['default']);
+  const [data, setData] = useState<any>({});
 
-  const fetchDatabases = async () => {
+  const fetchData = async () => {
     try {
-      const res = await DatabaseHttp.getDatabases();
-      setDatabases(res.db_names);
+      // fetch all data
+      const [databases, metrics, users, roles] = await Promise.all([
+        DatabaseHttp.getDatabases(),
+        MilvusHttp.getMetrics(),
+        UserHttp.getUsers(),
+        UserHttp.getRoles(),
+      ]);
+
+      // parse data
+      const parsedJson = parseJson(metrics);
+
+      // get query nodes
+      const queryNodes = getNode(
+        parsedJson.allNodes,
+        MILVUS_NODE_TYPE.QUERYNODE
+      );
+
+      // get data nodes
+      const dataNodes = getNode(
+        parsedJson.allNodes,
+        MILVUS_NODE_TYPE.DATANODE
+      );
+
+      // get data nodes
+      const indexNodes = getNode(
+        parsedJson.allNodes,
+        MILVUS_NODE_TYPE.INDEXNODE
+      );
+
+      // get root coord
+      const rootCoord = getNode(
+        parsedJson.allNodes,
+        MILVUS_NODE_TYPE.ROOTCOORD
+      )[0];
+
+
+      // get system config
+      const systemConfig = getSystemConfigs(parsedJson.workingNodes);
+      const deployMode = rootCoord.infos.system_info.deploy_mode;
+      const systemInfo = rootCoord.infos.system_info;
+
+      const data = {
+        users: users.usernames,
+        roles: roles.results,
+        queryNodes,
+        dataNodes,
+        indexNodes,
+        rootCoord,
+        deployMode,
+        parsedJson,
+        systemConfig,
+        systemInfo,
+      };
+
+      console.log(data);
+
+      // store databases
+      setDatabases(databases.db_names);
+      // store other datas
+      setData(data);
     } catch (error) {
       // do nothing
+      console.log('fetch data error', error);
     }
   };
 
   useEffect(() => {
-    fetchDatabases();
+    fetchData();
   }, []);
 
   return (
     <Provider
       value={{
+        data,
         database,
         databases,
         setDatabase,

client/src/context/Types.ts

@@ -67,6 +67,7 @@ export type DataContextType = {
   databases: string[];
   setDatabase: Dispatch<SetStateAction<string>>;
   setDatabaseList: Dispatch<SetStateAction<string[]>>;
+  data?: any;
 };
 
 export type PrometheusContextType = {

client/src/i18n/en/overview.ts

@@ -1,9 +1,18 @@
 const overviewTrans = {
   load: 'Loaded Collections',
   all: 'All Collections',
-  data: 'Entites',
+  data: 'Entities',
   rows: '{{number}}',
   loading: 'Loading Collections',
+  sysInfo: 'System Info',
+  database: 'Database',
+  milvusVersion: 'Milvus Version',
+  upTime: 'Up Time',
+  deployMode: 'Deploy Mode',
+  databases: 'Databases',
+  users: 'Users',
+  roles: 'Roles',
+  days: 'days',
 };
 
 export default overviewTrans;

client/src/index.css

@@ -2,8 +2,8 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;