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",