new overview

Signed-off-by: ruiyi.jiang <ruiyi.jiang@zilliz.com>

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;

client/src/pages/overview/Overview.tsx

@@ -1,6 +1,15 @@
-import { makeStyles, Theme, Typography, useTheme } from '@material-ui/core';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import {
+  makeStyles,
+  Theme,
+  Typography,
+  useTheme,
+  Card,
+  CardContent,
+} from '@material-ui/core';
+import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
 import { rootContext, webSocketContext, dataContext } from '@/context';
 import EmptyCard from '@/components/cards/EmptyCard';
 import icons from '@/components/icons/Icons';
@@ -13,22 +22,92 @@ import CollectionCard from './collectionCard/CollectionCard';
 import StatisticsCard from './statisticsCard/StatisticsCard';
 
 const useStyles = makeStyles((theme: Theme) => ({
+  overviewContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: theme.spacing(4),
+  },
   collectionTitle: {
     margin: theme.spacing(2, 0),
-    lineHeight: '20px',
-    fontSize: '14px',
-    color: theme.palette.attuGrey.dark,
+    fontSize: 16,
+    fontWeight: 'bold',
   },
   cardsWrapper: {
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fill, minmax(380px, 1fr))',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
+    gap: theme.spacing(2),
+  },
+  sysCardsWrapper: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
     gap: theme.spacing(2),
   },
+  h2: {
+    fontWeight: 'bold',
+    fontSize: '22px',
+    margin: theme.spacing(1, 0, 2, 0),
+  },
+  dbWrapper: {
+    width: '55%',
+    order: 1,
+    padding: theme.spacing(1, 0, 0),
+  },
+  emptyCard: {
+    minHeight: '50vh',
+    color: 'transparent',
+  },
+  sysWrapper: {
+    width: '45%',
+    background: 'rgb(239, 239, 239)',
+    padding: theme.spacing(1, 2, 2),
+    order: 1,
+    borderRadius: 8,
+  },
+  sysCard: {
+    '& p': {
+      fontSize: '24px',
+      margin: 0,
+    },
+    '& h3': {
+      margin: 0,
+      fontSize: '14px',
+      color: theme.palette.attuGrey.dark,
+    },
+    '& a': {
+      textDecoration: 'none',
+      color: '#000',
+    },
+  },
 }));
 
+const SysCard = (data: {
+  title: string;
+  count: number | string;
+  des?: string;
+  link?: string;
+}) => {
+  const classes = useStyles();
+
+  const content = (
+    <>
+      <Typography component={'p'}>{data.count}</Typography>
+      <Typography component={'h3'}>{data.title}</Typography>
+      {data.des ? <Typography component={'p'}>{data.des}</Typography> : null}
+    </>
+  );
+
+  return (
+    <Card className={classes.sysCard}>
+      <CardContent>
+        {data.link ? <Link to={data.link}>{content}</Link> : content}
+      </CardContent>
+    </Card>
+  );
+};
+
 const Overview = () => {
   useNavigationHook(ALL_ROUTER_TYPES.OVERVIEW);
-  const { database } = useContext(dataContext);
+  const { database, databases, data } = useContext(dataContext);
   const classes = useStyles();
   const theme = useTheme();
   const { t: overviewTrans } = useTranslation('overview');
@@ -106,33 +185,93 @@ const Overview = () => {
 
   const CollectionIcon = icons.navCollection;
 
+  // calculation diff to the rootCoord create time
+  const duration = useMemo(() => {
+    let rootCoordCreatedTime = data.rootCoord?.infos?.created_time;
+
+    let duration = '0';
+    if (rootCoordCreatedTime) {
+      rootCoordCreatedTime = rootCoordCreatedTime.substring(
+        0,
+        rootCoordCreatedTime.lastIndexOf('m=')
+      );
+
+      const rootCoordCreatedTimeObj = dayjs(rootCoordCreatedTime);
+
+      const now = dayjs();
+      duration = now.diff(rootCoordCreatedTimeObj, 'day', true).toFixed(2);
+    }
+
+    return `${duration} ${overviewTrans('days')}`;
+  }, [data.rootCoord]);
+
   return (
-    <section className="page-wrapper">
-      <StatisticsCard data={statisticsData.data} />
-      <Typography className={classes.collectionTitle}>
-        {overviewTrans('load')}
-      </Typography>
-
-      {loadCollections.length > 0 ? (
-        <div className={classes.cardsWrapper}>
-          {loadCollections.map(collection => (
-            <CollectionCard
-              key={collection._id}
-              data={collection}
-              onRelease={onRelease}
+    <section className={`page-wrapper  ${classes.overviewContainer}`}>
+      <section className={classes.dbWrapper}>
+        <Typography component={'h2'} className={classes.h2}>
+          {overviewTrans('database')} {database}
+        </Typography>
+
+        <StatisticsCard data={statisticsData.data} />
+        <Typography component={'h4'} className={classes.collectionTitle}>
+          {overviewTrans('load')}
+        </Typography>
+
+        {loadCollections.length > 0 ? (
+          <div className={classes.cardsWrapper}>
+            {loadCollections.map(collection => (
+              <CollectionCard
+                key={collection._id}
+                data={collection}
+                onRelease={onRelease}
+              />
+            ))}
+          </div>
+        ) : (
+          <EmptyCard
+            loading={loading}
+            wrapperClass={classes.emptyCard}
+            icon={!loading ? <CollectionIcon /> : undefined}
+            text={
+              loading ? overviewTrans('loading') : collectionTrans('noLoadData')
+            }
+          />
+        )}
+      </section>
+
+      {data?.systemInfo ? (
+        <section className={classes.sysWrapper}>
+          <Typography component={'h2'} className={classes.h2}>
+            {overviewTrans('sysInfo')}
+          </Typography>
+          <div className={classes.sysCardsWrapper}>
+            <SysCard
+              title={'Milvus Version'}
+              count={data?.systemInfo?.build_version}
+            />
+            <SysCard title={overviewTrans('upTime')} count={duration} />
+            <SysCard
+              title={overviewTrans('deployMode')}
+              count={data?.deployMode}
+            />
+            <SysCard
+              title={overviewTrans('databases')}
+              count={databases?.length}
+              link="databases"
+            />
+            <SysCard
+              title={overviewTrans('users')}
+              count={data?.users?.length}
+              link="users"
+            />
+            <SysCard
+              title={overviewTrans('roles')}
+              count={data?.roles?.length}
+              link="users?activeIndex=1"
             />
-          ))}
-        </div>
-      ) : (
-        <EmptyCard
-          loading={loading}
-          wrapperClass="page-empty-card"
-          icon={!loading ? <CollectionIcon /> : undefined}
-          text={
-            loading ? overviewTrans('loading') : collectionTrans('noLoadData')
-          }
-        />
-      )}
+          </div>
+        </section>
+      ) : null}
     </section>
   );
 };

client/src/pages/overview/collectionCard/CollectionCard.tsx

@@ -1,4 +1,11 @@
-import { makeStyles, Theme, Typography, Divider } from '@material-ui/core';
+import {
+  makeStyles,
+  Theme,
+  Typography,
+  Divider,
+  Card,
+  CardContent,
+} from '@material-ui/core';
 import { FC, useContext } from 'react';
 import CustomButton from '@/components/customButton/CustomButton';
 import icons from '@/components/icons/Icons';
@@ -13,7 +20,6 @@ import { CollectionCardProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
-    padding: theme.spacing(2),
     textAlign: 'end',
     '& .link': {
       display: 'flex',
@@ -115,45 +121,50 @@ const CollectionCard: FC<CollectionCardProps> = ({
   };
 
   return (
-    <div
+    <Card
       className={`card-wrapper ${classes.wrapper} ${wrapperClass} ${
         data._status === LOADING_STATE.LOADING && classes.loading
       }`}
     >
-      <div>
-        <Status status={status} percentage={_loadedPercentage} />
-      </div>
-      <Link className="link" to={`/collections/${name}`}>
-        {name}
-        <RightArrowIcon classes={{ root: classes.icon }} />
-      </Link>
-      <ul className={classes.content}>
-        {_replicas && _replicas.length > 1 ? (
+      <CardContent>
+        <div>
+          <Status status={status} percentage={_loadedPercentage} />
+        </div>
+        <Link className="link" to={`/collections/${name}`}>
+          {name}
+          <RightArrowIcon classes={{ root: classes.icon }} />
+        </Link>
+        <ul className={classes.content}>
+          {_replicas && _replicas.length > 1 ? (
+            <li>
+              <Typography>{collectionTrans('replicaNum')}</Typography>:
+              <Typography className={classes.rowCount}>
+                {_replicas.length}
+              </Typography>
+            </li>
+          ) : null}
           <li>
-            <Typography>{collectionTrans('replicaNum')}</Typography>:
-            <Typography className={classes.rowCount}>
-              {_replicas.length}
-            </Typography>
+            <Typography>{collectionTrans('rowCount')}</Typography>:
+            <Typography className={classes.rowCount}>{rowCount}</Typography>
           </li>
-        ) : null}
-        <li>
-          <Typography>{collectionTrans('rowCount')}</Typography>:
-          <Typography className={classes.rowCount}>{rowCount}</Typography>
-        </li>
-      </ul>
-      <Divider classes={{ root: classes.divider }} />
-      <CustomButton
-        variant="contained"
-        className={classes.btn}
-        onClick={onVectorSearchClick}
-      >
-        <VectorSearchIcon classes={{ root: classes.search }} />
-        {btnTrans('vectorSearch')}
-      </CustomButton>
-      <CustomIconButton onClick={onReleaseClick} tooltip={btnTrans('release')}>
-        <ReleaseIcon classes={{ root: classes.release }} />
-      </CustomIconButton>
-    </div>
+        </ul>
+        <Divider classes={{ root: classes.divider }} />
+        <CustomButton
+          variant="contained"
+          className={classes.btn}
+          onClick={onVectorSearchClick}
+        >
+          <VectorSearchIcon classes={{ root: classes.search }} />
+          {btnTrans('vectorSearch')}
+        </CustomButton>
+        <CustomIconButton
+          onClick={onReleaseClick}
+          tooltip={btnTrans('release')}
+        >
+          <ReleaseIcon classes={{ root: classes.release }} />
+        </CustomIconButton>
+      </CardContent>
+    </Card>
   );
 };
 

client/src/pages/overview/statisticsCard/StatisticsCard.tsx

@@ -1,17 +1,18 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core';
+import {
+  makeStyles,
+  Theme,
+  Typography,
+  Card,
+  CardContent,
+} from '@material-ui/core';
 import { FC } from 'react';
 import { StatisticsCardProps } from './Types';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     display: `grid`,
-    gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
     columnGap: theme.spacing(2),
-    padding: theme.spacing(3),
-  },
-  itemWrapper: {
-    paddingLeft: theme.spacing(1),
-    borderLeft: '3px solid #f0f4f9',
   },
   label: {
     fontSize: '12px',
@@ -32,19 +33,21 @@ const StatisticsCard: FC<StatisticsCardProps> = ({
   const classes = useStyles();
 
   return (
-    <div className={`card-wrapper ${classes.wrapper} ${wrapperClass}`}>
-      {data.map(item => (
-        <div key={item.label} className={classes.itemWrapper}>
-          <Typography className={classes.label}>{item.label}</Typography>
-          <Typography
-            className={classes.value}
-            style={{ color: item.valueColor }}
-          >
-            {item.value}
-          </Typography>
-        </div>
-      ))}
-    </div>
+    <Card className={`card-wrapper ${wrapperClass}`}>
+      <CardContent className={`${classes.wrapper}`}>
+        {data.map(item => (
+          <div key={item.label}>
+            <Typography className={classes.label}>{item.label}</Typography>
+            <Typography
+              className={classes.value}
+              style={{ color: item.valueColor }}
+            >
+              {item.value}
+            </Typography>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
   );
 };
 

client/src/pages/system/MiniTopology.tsx

@@ -96,7 +96,6 @@ const MiniTopo: FC<MiniTopoProps> = props => {
           stroke={theme.palette.primary.main}
         />
         <text
-          fontFamily="Roboto"
           alignmentBaseline="middle"
           textAnchor="middle"
           fill={theme.palette.primary.main}
@@ -133,7 +132,6 @@ const MiniTopo: FC<MiniTopoProps> = props => {
           />
         </svg>
         <text
-          fontFamily="Roboto"
           textAnchor="middle"
           fill={theme.palette.attuGrey.dark}
           fontSize="12"

client/src/pages/system/NodeListView.tsx

@@ -12,7 +12,6 @@ import { NodeListViewProps, Node } from './Types';
 
 const getStyles = makeStyles((theme: Theme) => ({
   root: {
-    fontFamily: 'Roboto',
     margin: '14px 40px',
     display: 'grid',
     gridTemplateColumns: 'auto 400px',

client/src/pages/system/SystemView.tsx

@@ -14,7 +14,6 @@ import DataCard from './DataCard';
 
 const getStyles = makeStyles((theme: Theme) => ({
   root: {
-    fontFamily: 'Roboto',
     margin: '12px 24px',
     position: 'relative',
     height: 'fit-content',

client/src/pages/system/Topology.tsx

@@ -384,7 +384,6 @@ const Topo = (props: any) => {
                     </svg>
                   )}
                   <text
-                    fontFamily="Roboto"
                     textAnchor="middle"
                     fill={theme.palette.primary.main}
                     fontWeight="700"
@@ -512,7 +511,6 @@ const Topo = (props: any) => {
                       />
                     </svg>
                     <text
-                      fontFamily="Roboto"
                       textAnchor="middle"
                       fill={theme.palette.attuGrey.dark}
                       fontSize="12"
@@ -543,7 +541,6 @@ const Topo = (props: any) => {
             stroke={theme.palette.primary.main}
           />
           <text
-            fontFamily="Roboto"
             textAnchor="middle"
             alignmentBaseline="middle"
             fill={theme.palette.primary.main}

client/src/pages/systemHealthy/SystemHealthyView.tsx

@@ -26,7 +26,6 @@ import { timeRangeOptions } from './consts';
 
 const getStyles = makeStyles((theme: Theme) => ({
   root: {
-    fontFamily: 'Roboto',
     margin: '16px 40px',
     position: 'relative',
     height: '88%',

client/src/pages/systemHealthy/Topology.tsx

@@ -207,7 +207,6 @@ const Topology = ({
                   )}
 
                   <text
-                    fontFamily="Roboto"
                     textAnchor="middle"
                     fill={theme.palette.attuGrey.dark}
                     fontSize="12"
@@ -242,7 +241,6 @@ const Topology = ({
                   getIcon(node, theme, childPos[0] - 12, childPos[1] - 20)}
 
                 <text
-                  fontFamily="Roboto"
                   textAnchor="middle"
                   fill={theme.palette.primary.main}
                   fontWeight="700"
@@ -271,7 +269,6 @@ const Topology = ({
                   stroke={theme.palette.primary.main}
                 />
                 <text
-                  fontFamily="Roboto"
                   textAnchor="middle"
                   alignmentBaseline="middle"
                   fill={theme.palette.primary.main}

client/src/styles/theme.ts

@@ -27,7 +27,7 @@ declare module '@material-ui/core/styles/createPalette' {
 const commonThemes = {
   typography: {
     fontFamily: [
-      'Roboto',
+      'Inter',
       '-apple-system',
       'BlinkMacSystemFont',
       '"Segoe UI"',

client/src/utils/Metric.ts

@@ -17,6 +17,8 @@ export const parseJson = (jsonData: any) => {
     (node: any) => node?.infos?.has_error !== true
   );
 
+  const allNodes = jsonData?.response?.nodes_info;
+
   workingNodes.forEach((node: any) => {
     const type = node?.infos?.type;
     if (node.connected) {
@@ -40,7 +42,7 @@ export const parseJson = (jsonData: any) => {
     system.disk += info.disk;
     system.diskUsage += info.disk_usage;
   });
-  return { nodes, childNodes, system, workingNodes };
+  return { nodes, childNodes, system, workingNodes, allNodes };
 };
 
 // get nodes

server/src/collections/collections.controller.ts

@@ -89,7 +89,7 @@ export class CollectionController {
     try {
       const result =
         type === 1
-          ? await this.collectionsService.getLoadedColletions()
+          ? await this.collectionsService.getLoadedCollections()
           : await this.collectionsService.getAllCollections();
       res.send(result);
     } catch (error) {

server/src/collections/collections.service.ts

@@ -213,7 +213,7 @@ export class CollectionsService {
     return data;
   }
 
-  async getLoadedColletions() {
+  async getLoadedCollections() {
     const data = [];
     const res = await this.getCollections({
       type: ShowCollectionsType.Loaded,