Merge pull request #38 from nameczz/add-version

add attu version in menu

client/src/components/layout/Layout.tsx

@@ -8,6 +8,7 @@ import icons from '../icons/Icons';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
 import { authContext } from '../../context/Auth';
+import { rootContext } from '../../context/Root';
 import { IconsType } from '../icons/Types';
 import loadable from '@loadable/component';
 
@@ -47,6 +48,8 @@ const useStyles = makeStyles((theme: Theme) =>
 const Layout = (props: any) => {
   const history = useHistory();
   const { isAuth } = useContext(authContext);
+  const { versionInfo } = useContext(rootContext);
+
   const { t: navTrans } = useTranslation('nav');
   const classes = useStyles();
   const location = useLocation();
@@ -135,6 +138,7 @@ const Layout = (props: any) => {
               defaultActive={defaultActive}
               // used for nested child menu
               defaultOpen={{ [navTrans('overview')]: true }}
+              versionInfo={versionInfo}
             />
           )}
 

client/src/components/menu/NavMenu.tsx

@@ -138,13 +138,19 @@ const useStyles = makeStyles((theme: Theme) =>
     collapseIcon: {
       left: '73px',
     },
+    version: {
+      position: 'absolute',
+      left: '22px',
+      bottom: (props: any) => (props.expanded ? '20px' : '70px'),
+    },
   })
 );
 
 const NavMenu: FC<NavMenuType> = props => {
-  const { width, data, defaultActive = '' } = props;
-  const classes = useStyles({ width });
+  const { width, data, defaultActive = '', versionInfo } = props;
   const [expanded, setExpanded] = useState<boolean>(false);
+
+  const classes = useStyles({ width, expanded });
   const [active, setActive] = useState<string>(defaultActive);
 
   const { t: commonTrans } = useTranslation();
@@ -234,6 +240,13 @@ const NavMenu: FC<NavMenuType> = props => {
           <ChevronRightIcon />
         </Button>
         <NestList data={data} />
+        <Typography
+          classes={{
+            root: classes.version,
+          }}
+        >
+          v {versionInfo.attu}
+        </Typography>
         <CommunityBtn />
       </div>
     </List>

client/src/components/menu/Types.ts

@@ -33,4 +33,5 @@ export type NavMenuType = {
   defaultOpen?: { [x: string]: boolean };
   width: string;
   data: NavMenuItem[];
+  versionInfo: { attu: string; sdk: string };
 };

client/src/context/Root.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import React from 'react';
 import { ThemeProvider, makeStyles } from '@material-ui/core/styles';
 import { SwipeableDrawer } from '@material-ui/core';
@@ -11,6 +11,7 @@ import {
 import CustomSnackBar from '../components/customSnackBar/CustomSnackBar';
 import CustomDialog from '../components/customDialog/CustomDialog';
 import { theme } from '../styles/theme';
+import { MilvusHttp } from 'insight_src/http/Milvus';
 
 const DefaultDialogConfigs: DialogType = {
   open: false,
@@ -34,6 +35,7 @@ export const rootContext = React.createContext<RootContextType>({
   setDialog: params => {},
   handleCloseDialog: () => {},
   setDrawer: (params: any) => {},
+  versionInfo: { attu: '', sdk: '' },
 });
 
 const { Provider } = rootContext;
@@ -64,6 +66,7 @@ export const RootProvider = (props: { children: React.ReactNode }) => {
     open: false,
     child: <></>,
   });
+  const [versionInfo, setVersionInfo] = useState({ attu: '', sdk: '' });
 
   const handleSnackBarClose = () => {
     setSnackBar(v => ({ ...v, open: false }));
@@ -106,6 +109,14 @@ export const RootProvider = (props: { children: React.ReactNode }) => {
       setDrawer({ ...drawer, open: open });
     };
 
+  useEffect(() => {
+    const fetchVersion = async () => {
+      const res = await MilvusHttp.getVersion();
+      setVersionInfo(res);
+    };
+    fetchVersion();
+  }, []);
+
   return (
     <Provider
       value={{
@@ -114,6 +125,7 @@ export const RootProvider = (props: { children: React.ReactNode }) => {
         setDialog,
         handleCloseDialog,
         setDrawer,
+        versionInfo,
       }}
     >
       <ThemeProvider theme={theme}>

client/src/context/Types.ts

@@ -8,6 +8,7 @@ export type RootContextType = {
   setDialog: (params: DialogType) => void;
   handleCloseDialog: () => void;
   setDrawer: (params: any) => void;
+  versionInfo: { attu: string; sdk: string };
 };
 
 // this is for any custom dialog

client/src/http/Milvus.ts

@@ -7,6 +7,8 @@ export class MilvusHttp extends BaseModel {
   static CHECK_URL = '/milvus/check';
   static FLUSH_URL = '/milvus/flush';
   static METRICS_URL = '/milvus/metrics';
+  static VERSION_URL = '/milvus/version';
+
   static TIGGER_CRON_URL = '/crons';
 
   constructor(props: {}) {
@@ -18,6 +20,10 @@ export class MilvusHttp extends BaseModel {
     return super.create({ path: this.CONNECT_URL, data: { address } });
   }
 
+  static getVersion() {
+    return super.search({ path: this.VERSION_URL, params: {} });
+  }
+
   static check(address: string) {
     return super.search({ path: this.CHECK_URL, params: { address } });
   }

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "attu",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "license": "MIT",
   "author": {
     "name": "zilliz",
@@ -78,9 +78,9 @@
     "prebuild": "tslint -c tslint.json -p tsconfig.json --fix",
     "build": "yarn clean && tsc",
     "prestart": "rm -rf dist && yarn build",
-    "start": "nodemon dist/app.js",
+    "start": "nodemon dist/src/app.js",
     "start:plugin": "yarn build && cross-env PLUGIN_DEV=1 node dist/attu/express/src/app.js",
-    "start:prod": "node dist/app.js",
+    "start:prod": "node dist/src/app.js",
     "test": "cross-env NODE_ENV=test jest --passWithNoTests",
     "test:watch": "jest --watch",
     "test:cov": "cross-env NODE_ENV=test jest --passWithNoTests --coverage",

server/src/milvus/milvus.controller.ts

@@ -3,6 +3,7 @@ import { dtoValidationMiddleware } from '../middlewares/validation';
 import { MilvusService } from './milvus.service';
 import { ConnectMilvusDto, FlushDto } from './dto';
 import { INSIGHT_CACHE } from '../utils/Const';
+import packageJson from '../../package.json';
 
 export class MilvusController {
   private router: Router;
@@ -18,6 +19,8 @@ export class MilvusController {
   }
 
   generateRoutes() {
+    this.router.get('/version', this.getInfo.bind(this));
+
     this.router.post(
       '/connect',
       dtoValidationMiddleware(ConnectMilvusDto),
@@ -85,4 +88,12 @@ export class MilvusController {
       next(error);
     }
   }
+
+  async getInfo(req: Request, res: Response, next: NextFunction) {
+    const data = {
+      sdk: this.milvusService.sdkInfo,
+      attu: packageJson.version,
+    };
+    res.send(data);
+  }
 }

server/src/milvus/milvus.service.ts

@@ -11,6 +11,10 @@ export class MilvusService {
   static activeAddress: string;
   static activeMilvusClient: MilvusClient;
 
+  get sdkInfo() {
+    return MilvusClient.sdkInfo;
+  }
+
   get collectionManager() {
     this.checkMilvus();
     return MilvusService.activeMilvusClient.collectionManager;

server/tsconfig.json

@@ -10,6 +10,7 @@
     "sourceMap": true,
     "outDir": "dist",
     "baseUrl": ".",
+    "resolveJsonModule": true,
     "paths": {
       "*": ["node_modules/*"]
     }