Merge pull request #268 from zilliztech/dev

v0.2.0

.github/workflows/electron.yml

@@ -0,0 +1,42 @@
+name: Build electron app
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  release:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v1
+
+      - name: Install Node.js, NPM and Yarn
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14
+    
+      - name: Build client
+        run: |
+          cd client
+          yarn --network-timeout 100000
+          yarn build
+          cp -r build ../express
+
+      - name: Build/release Electron app
+        uses: samuelmeuli/action-electron-builder@v1
+        with:
+          package_root: './express'
+          # GitHub token, automatically provided to the action
+          # (No need to define this secret in the repo settings)
+          github_token: ${{ secrets.GH_TOKEN }}
+
+          # If the commit is tagged with a version (e.g. "v1.0.0"),
+          # release the app after building
+          release: ${{ startsWith(github.ref, 'refs/tags/v') }}

.gitignore

@@ -37,6 +37,8 @@ server/vectors.csv
 express/node_modules
 express/dist
 express/build
+express/electron-app
+
 
 
 # package.lock.json

client/package.json

@@ -46,6 +46,7 @@
   "jest": {
     "coverageDirectory": "<rootDir>/coverage/"
   },
+  "homepage": "./",
   "scripts": {
     "start": "react-app-rewired start -FAST_REFRESH=true",
     "start:plugin": "REACT_APP_PLUGIN_DEV=true react-app-rewired start -FAST_REFRESH=true",
@@ -82,4 +83,4 @@
     "@types/webpack-env": "^1.16.3",
     "prettier": "2.3.2"
   }
-}
+}

client/public/electron.js

@@ -0,0 +1,180 @@
+const { app, Menu, BrowserWindow } = require("electron");
+// Module to control application life.
+// Module to create native browser window.
+
+const path = require("path");
+const url = require("url");
+
+const isMac = process.platform === "darwin";
+
+const template = [
+  // { role: 'appMenu' }
+  ...(isMac
+    ? [
+        {
+          label: app.name,
+          submenu: [
+            { role: "about" },
+            { type: "separator" },
+            { role: "services" },
+            { type: "separator" },
+            { role: "hide" },
+            { role: "hideothers" },
+            { role: "unhide" },
+            { type: "separator" },
+            { role: "quit" }
+          ]
+        }
+      ]
+    : []),
+  // { role: 'fileMenu' }
+  {
+    label: "File",
+    submenu: [isMac ? { role: "close" } : { role: "quit" }]
+  },
+  // { role: 'editMenu' }
+  {
+    label: "Edit",
+    submenu: [
+      { role: "undo" },
+      { role: "redo" },
+      { type: "separator" },
+      { role: "cut" },
+      { role: "copy" },
+      { role: "paste" },
+      ...(isMac
+        ? [
+            { role: "pasteAndMatchStyle" },
+            { role: "delete" },
+            { role: "selectAll" },
+            { type: "separator" },
+            {
+              label: "Speech",
+              submenu: [{ role: "startspeaking" }, { role: "stopspeaking" }]
+            }
+          ]
+        : [{ role: "delete" }, { type: "separator" }, { role: "selectAll" }])
+    ]
+  },
+  // { role: 'viewMenu' }
+  {
+    label: "View",
+    submenu: [
+      { role: "reload" },
+      { role: "forcereload" },
+      { role: "toggledevtools" },
+      { type: "separator" },
+      { role: "resetzoom" },
+      { role: "zoomin" },
+      { role: "zoomout" },
+      { type: "separator" },
+      { role: "togglefullscreen" }
+    ]
+  },
+  // { role: 'windowMenu' }
+  {
+    label: "Window",
+    submenu: [
+      { role: "minimize" },
+      { role: "zoom" },
+      ...(isMac
+        ? [
+            { type: "separator" },
+            { role: "front" },
+            { type: "separator" },
+            { role: "window" }
+          ]
+        : [{ role: "close" }])
+    ]
+  },
+  {
+    role: "help",
+    submenu: [
+      {
+        label: "Learn More",
+        click: async () => {
+          const { shell } = require("electron");
+          await shell.openExternal("https://www.milvus.io");
+        }
+      },
+      {
+        label: "Documentation",
+        click: async () => {
+          const { shell } = require("electron");
+          await shell.openExternal(
+            "https://www.milvus.io/docs/about_milvus/overview.md"
+          );
+        }
+      },
+      {
+        label: "Github",
+        click: async () => {
+          const { shell } = require("electron");
+          await shell.openExternal("https://github.com/milvus-io/milvus");
+        }
+      }
+    ]
+  }
+];
+
+const menu = Menu.buildFromTemplate(template);
+Menu.setApplicationMenu(menu);
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow;
+
+function createWindow() {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    webPreferences: { devTools: false },
+    icon: "./milvus-icon.png"
+  });
+  // mainWindow.maximize();
+  // mainWindow.show();
+  // and load the index.html of the app.
+
+  const startUrl =
+    process.env.ELECTRON_START_URL ||
+    url.format({
+      pathname: path.join(__dirname, "./index.html"),
+      protocol: "file:",
+      slashes: true
+    });
+  mainWindow.loadURL(startUrl);
+
+  // Open the DevTools.
+  //   mainWindow.webContents.openDevTools();
+
+  // Emitted when the window is closed.
+  mainWindow.on("closed", function() {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null;
+  });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on("ready", createWindow);
+
+// Quit when all windows are closed.
+app.on("window-all-closed", function() {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+
+app.on("activate", function() {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow();
+  }
+});

client/src/router/Router.tsx

@@ -1,4 +1,4 @@
-import { Switch, Route, BrowserRouter, Redirect } from 'react-router-dom';
+import { Switch, Route, Redirect, HashRouter } from 'react-router-dom';
 import routerConfig from './Config';
 import Layout from '../components/layout/Layout';
 import { useContext } from 'react';
@@ -12,7 +12,7 @@ const RouterWrapper = () => {
   const { isAuth } = useContext(authContext);
 
   return (
-    <BrowserRouter>
+    <HashRouter>
       <Layout>
         <Switch>
           {routerConfig.map(v => (
@@ -48,7 +48,7 @@ const RouterWrapper = () => {
           ></Route>
         </Switch>
       </Layout>
-    </BrowserRouter>
+    </HashRouter>
   );
 };
 export default RouterWrapper;

express/electron-starter.js

@@ -0,0 +1,72 @@
+const electron = require('electron');
+require('./dist/app');
+
+// Module to control application life.
+const app = electron.app;
+// Module to create native browser window.
+const BrowserWindow = electron.BrowserWindow;
+
+const path = require('path');
+const url = require('url');
+
+// Keep a global reference of the window object, if you don't, the window will
+// be closed automatically when the JavaScript object is garbage collected.
+let mainWindow;
+
+function createWindow() {
+  // Create the browser window.
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    webPreferences: {
+      // devTools: true,
+      webSecurity: false,
+      nodeIntegration: true,
+      enableRemoteModule: true,
+    },
+  });
+  // mainWindow.maximize();
+  // mainWindow.show();
+  // and load the index.html of the app.
+
+  const startUrl =
+    process.env.ELECTRON_START_URL ||
+    url.format({
+      pathname: path.join(__dirname, './build/index.html'),
+      protocol: 'file:',
+      slashes: true,
+    });
+  mainWindow.loadURL(startUrl);
+  // mainWindow.loadURL('http://127.0.0.1:3000');
+  mainWindow.focus();
+
+  // Emitted when the window is closed.
+  mainWindow.on('closed', function () {
+    // Dereference the window object, usually you would store windows
+    // in an array if your app supports multi windows, this is the time
+    // when you should delete the corresponding element.
+    mainWindow = null;
+  });
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.on('ready', createWindow);
+
+// Quit when all windows are closed.
+app.on('window-all-closed', function () {
+  // On OS X it is common for applications and their menu bar
+  // to stay active until the user quits explicitly with Cmd + Q
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', function () {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (mainWindow === null) {
+    createWindow();
+  }
+});

express/package.json

@@ -1,8 +1,16 @@
 {
-  "name": "express",
-  "version": "1.0.0",
-  "main": "dist/app.js",
+  "name": "milvus-insight",
+  "version": "0.2.0",
   "license": "MIT",
+  "author": {
+    "name": "ued",
+    "email": "ued@zilliz.com"
+  },
+  "description": "Milvus Insight help to manage Milvus easily",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zilliztech/milvus-insight"
+  },
   "dependencies": {
     "@zilliz/milvus2-sdk-node": "^1.0.19",
     "chalk": "^4.1.2",
@@ -54,6 +62,8 @@
     "@types/swagger-jsdoc": "^6.0.1",
     "@types/swagger-ui-express": "^4.1.3",
     "@types/ws": "^8.2.0",
+    "electron": "^16.0.2",
+    "electron-builder": "^22.14.5",
     "jest": "^27.3.1",
     "nodemon": "^2.0.14",
     "prettier": "^2.4.1",
@@ -67,7 +77,7 @@
     "prebuild": "tslint -c tslint.json -p tsconfig.json --fix",
     "build": "yarn clean && tsc",
     "prestart": "rm -rf dist && yarn build",
-    "start": "nodemon ./src/app",
+    "start": "nodemon dist/app.js",
     "start:plugin": "yarn build && cross-env PLUGIN_DEV=1 node dist/milvus-insight/express/src/app.js",
     "start:prod": "node dist/app.js",
     "test": "cross-env NODE_ENV=test jest --passWithNoTests",
@@ -75,7 +85,10 @@
     "test:cov": "cross-env NODE_ENV=test jest --passWithNoTests --coverage",
     "test:report": "cross-env NODE_ENV=test jest --watchAll=false --coverage --coverageReporters='text-summary'",
     "clean": "rimraf dist",
-    "format": "prettier --write '**/*.{ts,js}'"
+    "format": "prettier --write '**/*.{ts,js}'",
+    "mac": "electron-builder --mac",
+    "linux": "electron-builder --linux",
+    "win": "electron-builder --win"
   },
   "nodemonConfig": {
     "ignore": [
@@ -89,5 +102,39 @@
       "src"
     ],
     "ext": "ts yml"
+  },
+  "homepage": "./",
+  "main": "electron-starter.js",
+  "build": {
+    "appId": "milvus",
+    "directories": {
+      "output": "electron-app"
+    },
+    "files": [
+      "build/**/*",
+      "dist/**/*",
+      "node_modules/**/*",
+      "electron-starter.js",
+      "package.json",
+      "preload.js"
+    ],
+    "linux": {
+      "icon": "./build/milvus-icon.icns",
+      "target": [
+        "deb"
+      ]
+    },
+    "mac": {
+      "icon": "./build/milvus-icon.icns",
+      "target": "dmg"
+    },
+    "win": {
+      "icon": "./build/milvus-icon.png",
+      "target": [
+        {
+          "target": "nsis"
+        }
+      ]
+    }
   }
-}
+}