support client plugin

client/config-overrides.js

@@ -1,12 +1,7 @@
 const path = require('path');
-// const darkTheme = require("@ant-design/dark-theme").default;
+const { configPaths } = require('react-app-rewire-alias');
+const { aliasDangerous } = require('react-app-rewire-alias/lib/aliasDangerous');
 
-module.exports = {
-  // The paths config to use when compiling your react app
-  //  for development or production.
-  paths: function (paths, env) {
-    // ...add your paths config
-    paths.appBuild = path.resolve(__dirname, '../server/build');
-    return paths;
-  },
-};
+const aliasMap = configPaths('./tsconfig.paths.json'); // or jsconfig.paths.json
+
+module.exports = aliasDangerous(aliasMap);

client/package.json

@@ -6,9 +6,10 @@
   "bugs": "https://github.com/milvus-io/milvus-insight/issues",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.4",
+    "@loadable/component": "^5.15.0",
+    "@material-ui/core": "4.11.4",
     "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.58",
+    "@material-ui/lab": "4.0.0-alpha.58",
     "@mui/x-data-grid": "^4.0.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -26,10 +27,11 @@
     "i18next": "^20.3.1",
     "papaparse": "^5.3.1",
     "react": "^17.0.2",
+    "react-app-rewire-alias": "^1.1.4",
     "react-app-rewired": "^2.1.8",
     "react-dom": "^17.0.2",
     "react-highlight-words": "^0.17.0",
-    "react-i18next": "^11.10.0",
+    "react-i18next": "11.10.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "react-syntax-highlighter": "^15.4.4",
@@ -43,6 +45,7 @@
   },
   "scripts": {
     "start": "react-app-rewired start -FAST_REFRESH=true",
+    "start:plugin": "REACT_APP_PLUGIN_DEV=true react-app-rewired start -FAST_REFRESH=true",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "test:watch": "react-app-rewired test --watch",
@@ -71,6 +74,8 @@
   },
   "devDependencies": {
     "@testing-library/react-hooks": "^7.0.1",
+    "@types/loadable__component": "^5.13.4",
+    "@types/webpack-env": "^1.16.3",
     "prettier": "2.3.2"
   }
 }

client/src/components/layout/Layout.tsx

@@ -9,6 +9,8 @@ import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation } from 'react-router-dom';
 import { authContext } from '../../context/Auth';
 
+const PLUGIN_DEV = process.env?.REACT_APP_PLUGIN_DEV;
+
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
@@ -87,6 +89,29 @@ const Layout = (props: any) => {
     },
   ];
 
+  function importAll(r: any) {
+    r.keys().forEach((key: any) => {
+      const content = r(key);
+      const pathName = content.client?.path;
+      const icon = content.client?.icon || icons.navSystem;
+      const iconActiveClass =
+        content.client?.iconActiveClass || 'activeSearchIcon';
+      const iconNormalClass =
+        content.client?.iconNormalClass || 'normalSearchIcon';
+      if (!pathName) return;
+      menuItems.push({
+        icon,
+        label: content.client?.label,
+        onClick: () => history.push(`${pathName}`),
+        iconActiveClass,
+        iconNormalClass,
+      });
+    });
+  }
+  importAll(require.context('../../plugins', true, /config\.json$/));
+  PLUGIN_DEV &&
+    importAll(require.context('all_plugins/', true, /config\.json$/));
+
   return (
     <div className={classes.root}>
       <GlobalEffect>

client/src/pages/collections/Collections.tsx

@@ -171,7 +171,7 @@ const Collections = () => {
       // update collections
       fetchData();
       return { result: true, msg: '' };
-    } catch (err) {
+    } catch (err: any) {
       const {
         response: {
           data: { message },

client/src/pages/partitions/Partitions.tsx

@@ -205,7 +205,7 @@ const Partitions: FC<{
       fetchPartitions(collectionName);
 
       return { result: true, msg: '' };
-    } catch (err) {
+    } catch (err: any) {
       const {
         response: {
           data: { message },

client/src/router/Config.ts

@@ -3,8 +3,10 @@ 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';
+import loadable from '@loadable/component';
+
+const PLUGIN_DEV = process.env.REACT_APP_PLUGIN_DEV;
 
 const RouterConfig: RouterConfigType[] = [
   {
@@ -32,11 +34,30 @@ const RouterConfig: RouterConfigType[] = [
     component: VectorSearch,
     auth: true,
   },
-  {
-    path: '/system',
-    component: SystemView,
-    auth: true,
-  },
 ];
 
+function importAll(r: any, outOfRoot = false) {
+  r.keys().forEach((key: any) => {
+    const content = r(key);
+    const dirName = key.split('/config.json').shift().split('/')[1];
+    const pathName = content.client?.path;
+    const entry = content.client?.entry;
+    if (!(pathName || entry)) return;
+    console.log(content);
+    const auth = content.client?.auth || false;
+    const OtherComponent = outOfRoot
+      ? loadable(() => import(`all_plugins/${dirName}/client/${entry}`))
+      : loadable(() => import(`../plugins/${dirName}/${entry}`));
+    console.log(OtherComponent);
+    RouterConfig.push({
+      path: `/${pathName}`,
+      component: OtherComponent,
+      auth,
+    });
+  });
+}
+importAll(require.context('../plugins/', true, /config\.json$/));
+PLUGIN_DEV &&
+  importAll(require.context('all_plugins/', true, /config\.json$/), true);
+
 export default RouterConfig;

client/src/router/Types.ts

@@ -18,6 +18,6 @@ export type NavInfo = {
 
 export type RouterConfigType = {
   path: string;
-  component: () => JSX.Element;
+  component: any;
   auth: boolean;
 };

client/tsconfig.json

@@ -1,7 +1,12 @@
 {
   "compilerOptions": {
+    "experimentalDecorators": true,
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -16,5 +21,10 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": [
+    "src",
+    "../../src",
+    "all_plugins"
+  ],
+  "extends": "./tsconfig.paths.json"
 }

client/tsconfig.paths.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "all_plugins/*": ["src/plugins"]
+    }
+  }
+}

client/tsconfig.paths.plugin.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "all_plugins/*": ["../../src/*"]
+    }
+  }
+}