auto-refresh menu, no-clusters page + navigation fixes

Signed-off-by: Roman <ixrock@gmail.com>

src/common/cluster-store.ts

@@ -77,10 +77,6 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
   @observable removedClusters = observable.map<ClusterId, Cluster>();
   @observable clusters = observable.map<ClusterId, Cluster>();
 
-  @computed get activeCluster(): Cluster | null {
-    return this.getById(this.activeClusterId);
-  }
-
   @computed get clustersList(): Cluster[] {
     return Array.from(this.clusters.values());
   }

src/main/kube-auth-proxy.ts

@@ -6,7 +6,7 @@ import { bundledKubectl, Kubectl } from "./kubectl"
 import logger from "./logger"
 
 export interface KubeAuthProxyResponse {
-  data: string; // stream=stdout
+  data: string;
   error?: boolean; // stream=stderr
 }
 

src/main/menu.ts

@@ -1,5 +1,6 @@
 import type { WindowManager } from "./window-manager";
 import { app, BrowserWindow, dialog, Menu, MenuItem, MenuItemConstructorOptions, shell, webContents } from "electron"
+import { autorun } from "mobx";
 import { broadcastIpc } from "../common/ipc";
 import { appName, isMac, issuesTrackerUrl, isWindows, slackUrl } from "../common/vars";
 import { clusterStore } from "../common/cluster-store";
@@ -7,20 +8,26 @@ import { addClusterURL } from "../renderer/components/+add-cluster/add-cluster.r
 import { preferencesURL } from "../renderer/components/+preferences/preferences.route";
 import { whatsNewURL } from "../renderer/components/+whats-new/whats-new.route";
 import { clusterSettingsURL } from "../renderer/components/+cluster-settings/cluster-settings.route";
+import logger from "./logger";
 
 export function initMenu(windowManager: WindowManager) {
-  const menuItems: MenuItemConstructorOptions[] = [];
+  autorun(() => {
+    logger.debug(`[MENU]: refreshing menu, cluster=${clusterStore.activeClusterId}`);
+    buildMenu(windowManager);
+  });
+}
+
+function buildMenu(windowManager: WindowManager) {
+  const hasClusters = clusterStore.hasClusters();
+  const activeClusterId = clusterStore.activeClusterId;
+  const clusterView = windowManager.getClusterView(activeClusterId);
 
   function navigate(url: string) {
-    const activeClusterId = clusterStore.activeClusterId;
-    const view = windowManager.getClusterView(activeClusterId);
-    if (view) {
-      broadcastIpc({
-        channel: "menu:navigate",
-        webContentId: view.id,
-        args: [url],
-      });
-    }
+    broadcastIpc({
+      channel: "menu:navigate",
+      webContentId: clusterView ? clusterView.id : undefined /*no-clusters*/,
+      args: [url],
+    });
   }
 
   function macOnly(menuItems: MenuItemConstructorOptions[]): MenuItemConstructorOptions[] {
@@ -28,8 +35,7 @@ export function initMenu(windowManager: WindowManager) {
     return menuItems;
   }
 
-  // "File" submenu
-  menuItems.push({
+  const fileMenu: MenuItemConstructorOptions = {
     label: isMac ? app.getName() : "File",
     submenu: [
       {
@@ -38,12 +44,12 @@ export function initMenu(windowManager: WindowManager) {
           navigate(addClusterURL())
         }
       },
-      {
+      ...(hasClusters ? [{
         label: 'Cluster Settings',
         click() {
           navigate(clusterSettingsURL())
         }
-      },
+      }] : []),
       { type: 'separator' },
       {
         label: 'Preferences',
@@ -62,10 +68,9 @@ export function initMenu(windowManager: WindowManager) {
       { type: 'separator' },
       { role: 'quit' }
     ]
-  });
+  };
 
-  // "Edit" submenu
-  menuItems.push({
+  const editMenu: MenuItemConstructorOptions = {
     label: 'Edit',
     submenu: [
       { role: 'undo' },
@@ -78,10 +83,9 @@ export function initMenu(windowManager: WindowManager) {
       { type: 'separator' },
       { role: 'selectAll' },
     ]
-  });
+  };
 
-  // "View" submenu
-  menuItems.push({
+  const viewMenu: MenuItemConstructorOptions = {
     label: 'View',
     submenu: [
       {
@@ -113,10 +117,9 @@ export function initMenu(windowManager: WindowManager) {
       { type: 'separator' },
       { role: 'togglefullscreen' }
     ]
-  })
+  };
 
-  // "Help" submenu
-  menuItems.push({
+  const helpMenu: MenuItemConstructorOptions = {
     role: 'help',
     submenu: [
       {
@@ -162,8 +165,9 @@ export function initMenu(windowManager: WindowManager) {
         }
       }
     ]
-  });
+  };
 
-  const menu = Menu.buildFromTemplate(menuItems);
-  Menu.setApplicationMenu(menu);
+  Menu.setApplicationMenu(Menu.buildFromTemplate([
+    fileMenu, editMenu, viewMenu, helpMenu
+  ]));
 }

src/main/window-manager.ts

@@ -1,4 +1,4 @@
-import { autorun, reaction } from "mobx";
+import { reaction } from "mobx";
 import { BrowserWindow, shell } from "electron"
 import windowStateKeeper from "electron-window-state"
 import type { ClusterId } from "../common/cluster-store";
@@ -29,8 +29,12 @@ export class WindowManager {
 
     // Manage reactive state
     this.disposers.push(
-      // show and hide "no-clusters" window when necessary
-      autorun(this.handleNoClustersView),
+      // auto-show/hide "no-clusters" window when necessary
+      reaction(() => clusterStore.hasClusters(), hasClusters => {
+        this.handleNoClustersView({ activate: !hasClusters });
+      }, {
+        fireImmediately: true
+      }),
 
       // auto-show active cluster window and subscribe for push-events
       reaction(() => clusterStore.activeClusterId, this.activateView, {
@@ -48,10 +52,12 @@ export class WindowManager {
     );
   }
 
-  protected handleNoClustersView = async () => {
-    this.noClustersWindow = this.initClusterView(null);
-    await this.noClustersWindow.loadURL(`http://no-clusters.localhost:${this.proxyPort}`).catch(Function);
-    if (!clusterStore.hasClusters()) {
+  protected handleNoClustersView = async ({ activate = false } = {}) => {
+    if (!this.noClustersWindow) {
+      this.noClustersWindow = this.initClusterView(null);
+      await this.noClustersWindow.loadURL(`http://no-clusters.localhost:${this.proxyPort}`);
+    }
+    if (activate) {
       this.activeView = this.noClustersWindow;
       this.noClustersWindow.show();
       this.hideSplash();
@@ -69,8 +75,8 @@ export class WindowManager {
         resizable: false,
         show: false,
       });
+      await this.splashWindow.loadURL("static://splash.html");
     }
-    await this.splashWindow.loadURL("static://splash.html").catch(Function)
     this.splashWindow.show();
   }
 

src/renderer/api/kube-watch-api.ts

@@ -8,7 +8,7 @@ import type { KubeObjectStore } from "../kube-object.store";
 import { KubeApi } from "./kube-api";
 import { apiManager } from "./api-manager";
 import { apiPrefix, isDevelopment } from "../../common/vars";
-import { clusterStore } from "../../common/cluster-store";
+import { getHostedCluster } from "../../common/cluster-store";
 
 export interface IKubeWatchEvent<T = any> {
   type: "ADDED" | "MODIFIED" | "DELETED";
@@ -61,7 +61,7 @@ export class KubeWatchApi {
   }
 
   protected getQuery(): Partial<IKubeWatchRouteQuery> {
-    const { isAdmin, allowedNamespaces } = clusterStore.activeCluster;
+    const { isAdmin, allowedNamespaces } = getHostedCluster();
     return {
       api: this.activeApis.map(api => {
         if (isAdmin) return api.getWatchUrl();

src/renderer/api/rbac.ts

@@ -1,4 +1,4 @@
-import { clusterStore } from "../../common/cluster-store";
+import { getHostedCluster } from "../../common/cluster-store";
 
 // todo: refactor / move to cluster-store.ts?
 
@@ -6,7 +6,7 @@ export function isAllowedResource(resources: string | string[]) {
   if (!Array.isArray(resources)) {
     resources = [resources];
   }
-  const allowedResources = clusterStore.activeCluster?.allowedResources || [];
+  const { allowedResources } = getHostedCluster();
   for (const resource of resources) {
     if (!allowedResources.includes(resource)) {
       return false;

src/renderer/components/+apps-releases/release.store.ts

@@ -5,7 +5,7 @@ import { HelmRelease, helmReleasesApi, IReleaseCreatePayload, IReleaseUpdatePayl
 import { ItemStore } from "../../item.store";
 import { Secret } from "../../api/endpoints";
 import { secretsStore } from "../+config-secrets/secrets.store";
-import { clusterStore } from "../../../common/cluster-store";
+import { getHostedCluster } from "../../../common/cluster-store";
 
 @autobind()
 export class ReleaseStore extends ItemStore<HelmRelease> {
@@ -58,7 +58,7 @@ export class ReleaseStore extends ItemStore<HelmRelease> {
     this.isLoading = true;
     let items;
     try {
-      const { isAdmin, allowedNamespaces } = clusterStore.activeCluster;
+      const { isAdmin, allowedNamespaces } = getHostedCluster();
       items = await this.loadItems(!isAdmin ? allowedNamespaces : null);
     } finally {
       if (items) {

src/renderer/components/+cluster-settings/cluster-icon.scss

@@ -4,6 +4,7 @@
   position: relative;
   opacity: .75;
   border-radius: $radius;
+  user-select: none;
   cursor: pointer;
 
   &.active, &.interactive:hover {

src/renderer/components/app.tsx

@@ -1,7 +1,7 @@
 import "./app.scss";
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { autorun, computed, observable } from "mobx";
+import { observable, reaction } from "mobx";
 import { Redirect, Route, Switch } from "react-router";
 import { Notifications } from "./notifications";
 import { NotFound } from "./+404";
@@ -28,7 +28,7 @@ import { CustomResources } from "./+custom-resources/custom-resources";
 import { crdRoute } from "./+custom-resources";
 import { isAllowedResource } from "../api/rbac";
 import { AddCluster, addClusterRoute } from "./+add-cluster";
-import { LandingPage, landingRoute } from "./+landing-page";
+import { LandingPage, landingRoute, landingURL } from "./+landing-page";
 import { ClusterSettings, clusterSettingsRoute } from "./+cluster-settings";
 import { Workspaces, workspacesRoute } from "./+workspaces";
 import { ErrorBoundary } from "./error-boundary";
@@ -44,36 +44,41 @@ import { navigate, navigation } from "../navigation";
 export class App extends React.Component {
   @observable isReady = false;
 
-  @computed get clusterReady(): boolean {
-    const cluster = getHostedCluster();
-    if (cluster) {
-      return cluster.initialized && cluster.accessible;
-    }
+  get cluster() {
+    return getHostedCluster()
   }
 
   async componentDidMount() {
-    await clusterIpc.activate.invokeFromRenderer(); // refresh state, reconnect, etc.
-    this.isReady = true;
-
+    if (this.cluster) {
+      await clusterIpc.activate.invokeFromRenderer(); // refresh state, reconnect, etc.
+    }
     disposeOnUnmount(this, [
-      autorun(() => {
-        if (!this.clusterReady) {
-          navigate(clusterStatusURL());
-        } else if (clusterStatusURL() == navigation.getPath()) {
-          navigate("/"); // redirect when cluster accessible
-        }
+      reaction(() => this.startURL, this.onStartUrlChange, {
+        fireImmediately: true
       })
     ])
+    this.isReady = true;
+  }
+
+  protected onStartUrlChange = (startURL: string) => {
+    const path = navigation.getPath();
+    const redirectRequired = ["/", clusterStatusURL()].includes(path);
+    if (redirectRequired || !this.cluster?.accessible) {
+      navigate(startURL);
+    }
   }
 
   get startURL() {
-    if (!this.clusterReady) {
-      return clusterStatusURL();
+    if (this.cluster) {
+      if (!this.cluster.accessible) {
+        return clusterStatusURL();
+      }
+      if (isAllowedResource(["events", "nodes", "pods"])) {
+        return clusterURL();
+      }
+      return workloadsURL();
     }
-    if (isAllowedResource(["events", "nodes", "pods"])) {
-      return clusterURL();
-    }
-    return workloadsURL();
+    return landingURL();
   }
 
   render() {
@@ -87,19 +92,23 @@ export class App extends React.Component {
           <Route component={Preferences} {...preferencesRoute}/>
           <Route component={Workspaces} {...workspacesRoute}/>
           <Route component={AddCluster} {...addClusterRoute}/>
-          <Route component={Cluster} {...clusterRoute}/>
-          <Route component={ClusterStatus} {...clusterStatusRoute}/>
-          <Route component={ClusterSettings} {...clusterSettingsRoute}/>
-          <Route component={Nodes} {...nodesRoute}/>
-          <Route component={Workloads} {...workloadsRoute}/>
-          <Route component={Config} {...configRoute}/>
-          <Route component={Network} {...networkRoute}/>
-          <Route component={Storage} {...storageRoute}/>
-          <Route component={Namespaces} {...namespacesRoute}/>
-          <Route component={Events} {...eventRoute}/>
-          <Route component={CustomResources} {...crdRoute}/>
-          <Route component={UserManagement} {...usersManagementRoute}/>
-          <Route component={Apps} {...appsRoute}/>
+          {this.cluster && (
+            <>
+              <Route component={Cluster} {...clusterRoute}/>
+              <Route component={ClusterStatus} {...clusterStatusRoute}/>
+              <Route component={ClusterSettings} {...clusterSettingsRoute}/>
+              <Route component={Nodes} {...nodesRoute}/>
+              <Route component={Workloads} {...workloadsRoute}/>
+              <Route component={Config} {...configRoute}/>
+              <Route component={Network} {...networkRoute}/>
+              <Route component={Storage} {...storageRoute}/>
+              <Route component={Namespaces} {...namespacesRoute}/>
+              <Route component={Events} {...eventRoute}/>
+              <Route component={CustomResources} {...crdRoute}/>
+              <Route component={UserManagement} {...usersManagementRoute}/>
+              <Route component={Apps} {...appsRoute}/>
+            </>
+          )}
           <Redirect exact from="/" to={this.startURL}/>
           <Route component={NotFound}/>
         </Switch>

src/renderer/components/cluster-manager/cluster-status.tsx

@@ -21,13 +21,16 @@ export class ClusterStatus extends React.Component {
   }
 
   @computed get cluster() {
-    return getHostedCluster()
+    return getHostedCluster();
   }
 
   async componentDidMount() {
-    this.authOutput = [{ data: "Connecting ...\n" }];
-    ipcRenderer.on(`kube-auth:${this.cluster.id}`, (evt, res) => {
-      this.authOutput.push(res);
+    this.authOutput = [{ data: "Connecting..." }];
+    ipcRenderer.on(`kube-auth:${this.cluster.id}`, (evt, res: KubeAuthProxyResponse) => {
+      this.authOutput.push({
+        data: res.data.trimRight(),
+        error: res.error,
+      });
     })
   }
 
@@ -36,7 +39,7 @@ export class ClusterStatus extends React.Component {
   }
 
   reconnect = async () => {
-    this.authOutput = [{ data: "Reconnecting ...\n" }];
+    this.authOutput = [{ data: "Reconnecting..." }];
     this.isReconnecting = true;
     await clusterIpc.activate.invokeFromRenderer();
     this.isReconnecting = false;

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -56,8 +56,8 @@ export class ClustersMenu extends React.Component<Props> {
       menu.append(new MenuItem({
         label: _i18n._(t`Disconnect`),
         click: async () => {
-          await clusterIpc.disconnect.invokeFromRenderer();
           navigate(clusterStatusURL());
+          await clusterIpc.disconnect.invokeFromRenderer();
         }
       }))
     }

src/renderer/components/layout/main-layout.tsx

@@ -11,7 +11,7 @@ import { ErrorBoundary } from "../error-boundary";
 import { Dock } from "../dock";
 import { navigate, navigation } from "../../navigation";
 import { themeStore } from "../../theme.store";
-import { clusterStore } from "../../../common/cluster-store";
+import { getHostedCluster } from "../../../common/cluster-store";
 
 export interface TabRoute extends RouteProps {
   title: React.ReactNode;
@@ -47,7 +47,7 @@ export class MainLayout extends React.Component<Props> {
 
   render() {
     const { className, contentClass, headerClass, tabs, footer, footerClass, children } = this.props;
-    const clusterName = clusterStore.activeCluster?.contextName;
+    const { contextName: clusterName } = getHostedCluster();
     const routePath = navigation.location.pathname;
     return (
       <div className={cssNames("MainLayout", className, themeStore.activeTheme.type)}>

src/renderer/kube-object.store.ts

@@ -6,7 +6,7 @@ import { ItemStore } from "./item.store";
 import { apiManager } from "./api/api-manager";
 import { IKubeApiQueryParams, KubeApi } from "./api/kube-api";
 import { KubeJsonApiData } from "./api/kube-json-api";
-import { clusterStore } from "../common/cluster-store";
+import { getHostedCluster } from "../common/cluster-store";
 
 @autobind()
 export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemStore<T> {
@@ -76,7 +76,7 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
     this.isLoading = true;
     let items: T[];
     try {
-      const { isAdmin, allowedNamespaces } = clusterStore.activeCluster;
+      const { isAdmin, allowedNamespaces } = getHostedCluster();
       items = await this.loadItems(!isAdmin ? allowedNamespaces : null);
       items = this.filterItemsOnLoad(items);
     } finally {