Merge pull request #2411 from xtreme-vikram-yadav/update-tray

Update tray menu

web/electron/paths.ts

@@ -17,3 +17,8 @@ export const iconPath = path.join(
   app.getAppPath(),
   'dist/octant/assets/icons/icon.png'
 );
+
+export const greyIconPath = path.join(
+  app.getAppPath(),
+  'dist/octant/assets/icons/icon-grey.png'
+);

web/electron/tray-menu.ts

@@ -4,47 +4,109 @@
  *
  */
 
-import { app, BrowserWindow, Menu, Tray, nativeImage, shell } from 'electron';
-import { errLogPath, iconPath } from './paths';
+import { app, BrowserWindow, Menu, Tray, nativeImage, shell, MenuItem } from 'electron';
+import { errLogPath, iconPath, greyIconPath } from './paths';
+import * as WebSocket from 'ws';
+import * as open from 'open';
 
 export class TrayMenu {
   public readonly tray: Tray;
+  public wsConn : WebSocket;
+  private menuState : {
+    contexts: string[],
+    namespaces: string[],
+    currentContext: (string | null),
+    buildInfo: {version: string, commit: string, time: string}
+  }
 
-  constructor(public window: BrowserWindow) {
+  constructor(public window: BrowserWindow, public websocketUrl: string) {
     this.tray = new Tray(this.createNativeImage());
-    this.tray.setContextMenu(this.createMenu(window));
-  }
+    this.wsConn = new WebSocket(this.websocketUrl);
+    this.menuState = { contexts: [], namespaces: [], currentContext: null, 
+      buildInfo: {version: '', commit: '', time: ''}
+    }
 
+    this.setMenu();
+    this.startOctantEventListener();
+  }
+
   createNativeImage(): Electron.NativeImage {
-    const image = nativeImage.createFromPath(iconPath);
+    const image = nativeImage.createFromPath(greyIconPath);
     image.setTemplateImage(true);
     return image.resize({ width: 16, height: 16 });
   }
 
-  createMenu(win: BrowserWindow): Menu {
-    const menu = Menu.buildFromTemplate([
-      {
-        label: 'Open Octant',
-        type: 'normal',
-        click: () => {
-          win.show();
-        },
-      },
-      {
-        label: 'View Logs',
-        type: 'normal',
-        click: () => {
-          shell.showItemInFolder(errLogPath);
-        },
-      },
-      {
-        label: 'Quit',
-        type: 'normal',
-        click: () => {
-          app.quit();
-        },
-      },
-    ]);
-    return menu;
+  startOctantEventListener() {
+    this.wsConn.on('message', (msg) => {
+      const config = JSON.parse(`${msg}`);
+
+      switch (config.type) {
+        case 'event.octant.dev/kubeConfig':
+          this.menuState.contexts = config.data.contexts.map(c => c.name);
+          this.menuState.currentContext = config.data.currentContext;
+          this.setMenu();
+          break;
+        case 'event.octant.dev/buildInfo':
+          this.menuState.buildInfo = config.data;
+          this.setAboutOptions();
+          this.setMenu();
+          break;
+      }
+    });
+  }
+
+  setMenu() {
+    let menu = new Menu();
+    menu.append(new MenuItem({label: 'Open Octant', type: 'normal', click: () => this.window.show()}));
+    menu.append(new MenuItem({label: 'View Logs', type: 'normal', click: () => shell.showItemInFolder(errLogPath)}));
+
+    menu.append(this.contextSubMenu());
+    menu.append(this.aboutOctantSubMenu());
+    menu.append(this.openIssueMenuItem());
+    menu.append(this.octantDocsMenuItem());
+
+    menu.append(new MenuItem({label: 'Quit', type: 'normal', click: () => app.quit()}))
+    this.tray.setContextMenu(menu);
+  }
+
+  contextSubMenu() : MenuItem {
+    let contextMenu = new Menu();
+    const cItems = this.menuState.contexts.forEach((context) => {
+      contextMenu.append(new MenuItem({
+        label: context, 
+        type: 'checkbox', 
+        checked: context === this.menuState.currentContext,
+        click: () => { this.wsConn.send(JSON.stringify({
+          type: 'action.octant.dev/setContext',
+          payload: { requestedContext: context }
+        })) }
+      }));
+    });
+
+
+    return new MenuItem({label: 'Contexts', type: 'submenu', submenu: contextMenu});
+  }
+
+  aboutOctantSubMenu() : MenuItem {
+    return new MenuItem({label: 'About Octant', role: 'about'});
+  }
+
+  openIssueMenuItem() : MenuItem {
+    const newIssueLink = 'https://github.com/vmware-tanzu/octant/issues/new/choose';
+    return new MenuItem({label: 'Open an Issue/Provide Feedback', type: 'normal', click: () => open(newIssueLink)});
+  }
+
+  octantDocsMenuItem() : MenuItem {
+    const docsLink = 'https://octant.dev/';
+    return new MenuItem({label: 'Octant Documentation', type: 'normal', click: () => open(docsLink)});
+  }
+
+  setAboutOptions() : void {
+    app.setAboutPanelOptions({
+      applicationName: 'Octant',
+      applicationVersion: `Version: ${this.menuState.buildInfo.version}\nCommit: ${this.menuState.buildInfo.commit}\nBuilt: ${this.menuState.buildInfo.time}`,
+      website: 'https://octant.dev',
+      iconPath: iconPath
+    })
   }
 }

web/main.ts

@@ -235,12 +235,13 @@ try {
       w.webContents.send('port-message', port);
     });
 
-    tray = new TrayMenu(win);
+    const websocketUrl = `ws://localhost:${port}/api/v1/stream`
+    tray = new TrayMenu(win, websocketUrl);
 
     // In event of a black background issue: https://github.com/electron/electron/issues/15947
     // setTimeout(createWindow, 400);
     session.defaultSession.webRequest.onBeforeSendHeaders(
-      { urls: ['ws://localhost:' + port + '/api/v1/stream'] },
+      { urls: [websocketUrl] },
       (details, callback) => {
         details.requestHeaders['Origin'] = null;
         callback({ cancel: false, requestHeaders: details.requestHeaders });

web/package.json

@@ -86,6 +86,7 @@
     "lodash-es": "^4.17.15",
     "monaco-editor": "^0.21.2",
     "ngx-highlightjs": "^4.1.2",
+    "open": "^8.0.7",
     "overlayscrollbars-ngx": "^0.2.2",
     "rxjs": "^6.6.3",
     "serialize-javascript": "^5.0.1",