Merge branch 'master' into fix-cluster-delete

2025-05-20 05:10:56 +00:00 · 2021-09-01 15:33:51 +03:00 · 2021-09-01 15:33:51 +03:00 · b89e76191f
commit b89e76191f
parent e57fc99242 edee99a031
41 changed files with 597 additions and 305 deletions
--- a/.azure-pipelines.yml
+++ b/.azure-pipelines.yml
@ -16,8 +16,8 @@ jobs:
      vmImage: windows-2019
    strategy:
      matrix:
-        node_12.x:
-          node_version: 12.x
+        node_14.x:
+          node_version: 14.x
    steps:
      - powershell: |
          $CI_BUILD_TAG = git describe --tags
@ -48,12 +48,6 @@ jobs:
          GH_TOKEN: $(LENS_IDE_GH_TOKEN)
        displayName: Customize config

-      - script: make node_modules
-        displayName: Install dependencies
-
-      - script: make build-npm
-        displayName: Generate npm package
-
      - script: make build
        condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
        env:
@ -62,15 +56,16 @@ jobs:
          AWS_ACCESS_KEY_ID: $(AWS_ACCESS_KEY_ID)
          AWS_SECRET_ACCESS_KEY: $(AWS_SECRET_ACCESS_KEY)
          BUILD_NUMBER: $(Build.BuildNumber)
+          ELECTRON_BUILDER_EXTRA_ARGS: "--x64 --ia32"
        displayName: Build

  - job: macOS
    pool:
-      vmImage: macOS-10.14
+      vmImage: macOS-11
    strategy:
      matrix:
-        node_12.x:
-          node_version: 12.x
+        node_14.x:
+          node_version: 14.x
    steps:
      - script: CI_BUILD_TAG=`git describe --tags` && echo "##vso[task.setvariable variable=CI_BUILD_TAG]$CI_BUILD_TAG"
        condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
@ -99,12 +94,6 @@ jobs:
          GH_TOKEN: $(LENS_IDE_GH_TOKEN)
        displayName: Customize config

-      - script: make node_modules
-        displayName: Install dependencies
-
-      - script: make build-npm
-        displayName: Generate npm package
-
      - script: make build
        condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
        env:
@ -115,6 +104,7 @@ jobs:
          AWS_ACCESS_KEY_ID: $(AWS_ACCESS_KEY_ID)
          AWS_SECRET_ACCESS_KEY: $(AWS_SECRET_ACCESS_KEY)
          BUILD_NUMBER: $(Build.BuildNumber)
+          ELECTRON_BUILDER_EXTRA_ARGS: "--x64 --arm64"
        displayName: Build

  - job: Linux
@ -122,8 +112,8 @@ jobs:
      vmImage: ubuntu-16.04
    strategy:
      matrix:
-        node_12.x:
-          node_version: 12.x
+        node_14.x:
+          node_version: 14.x
    steps:
      - script: CI_BUILD_TAG=`git describe --tags` && echo "##vso[task.setvariable variable=CI_BUILD_TAG]$CI_BUILD_TAG"
        condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
@ -152,23 +142,6 @@ jobs:
          GH_TOKEN: $(LENS_IDE_GH_TOKEN)
        displayName: Customize config

-      - script: make node_modules
-        displayName: Install dependencies
-
-      - script: make build-npm
-        displayName: Generate npm package
-
-      - bash: |
-          sudo chown root:root /
-          sudo apt-get update && sudo apt-get install -y snapd
-          sudo snap install snapcraft --classic
-          echo -n "${SNAP_LOGIN}" | base64 -i -d > snap_login
-          snapcraft login --with snap_login
-        condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
-        env:
-          SNAP_LOGIN: $(SNAP_LOGIN)
-        displayName: Setup snapcraft
-
      - script: make build
        condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
        env:
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -12,7 +12,7 @@ jobs:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
-        os: [ubuntu-16.04, macos-10.15, windows-2019]
+        os: [ubuntu-16.04, macos-11, windows-2019]
        node-version: [14.x]
    steps:
      - name: Checkout Release from lens
@ -83,6 +83,15 @@ jobs:
        if: runner.os == 'Linux'

      - run: make integration
-        name: Run integration tests
+        name: Run macOS integration tests
        shell: bash
-        if: runner.os != 'Linux'
+        env:
+          ELECTRON_BUILDER_EXTRA_ARGS: "--x64 --arm64"
+        if: runner.os == 'macOS'
+
+      - run: make integration
+        name: Run Windows integration tests
+        shell: bash
+        env:
+          ELECTRON_BUILDER_EXTRA_ARGS: "--x64 --ia32"
+        if: runner.os == 'Windows'
--- a/5
+++ b/5
@ -4,6 +4,7 @@ CMD_ARGS = $(filter-out $@,$(MAKECMDGOALS))
  @:

 NPM_RELEASE_TAG ?= latest
+ELECTRON_BUILDER_EXTRA_ARGS ?=
 EXTENSIONS_DIR = ./extensions
 extensions = $(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), ${dir})
 extension_node_modules = $(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), ${dir}/node_modules)
@ -62,10 +63,8 @@ build: node_modules binaries/client
 ifeq "$(DETECTED_OS)" "Windows"
 # https://github.com/ukoloff/win-ca#clear-pem-folder-on-publish
 	rm -rf node_modules/win-ca/pem
-	yarn run electron-builder --publish onTag --x64 --ia32
-else
-	yarn run electron-builder --publish onTag
 endif
+	yarn run electron-builder --publish onTag $(ELECTRON_BUILDER_EXTRA_ARGS)

 $(extension_node_modules): node_modules
 	cd $(@:/node_modules=) && ../../node_modules/.bin/npm install --no-audit --no-fund
--- a/build/download_helm.ts
+++ b/build/download_helm.ts
@ -18,6 +18,18 @@
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
-import { helmCli } from "../src/main/helm/helm-cli";
+import packageInfo from "../package.json";
+import { isWindows } from "../src/common/vars";
+import { HelmCli } from "../src/main/helm/helm-cli";
+import * as path from "path";

-helmCli.ensureBinary();
+const helmVersion = packageInfo.config.bundledHelmVersion;
+
+if (!isWindows) {
+  Promise.all([
+    new HelmCli(path.join(process.cwd(), "binaries", "client", "x64"), helmVersion).ensureBinary(),
+    new HelmCli(path.join(process.cwd(), "binaries", "client", "arm64"), helmVersion).ensureBinary()
+  ]);
+} else {
+  new HelmCli(path.join(process.cwd(), "binaries", "client", "x64"), helmVersion).ensureBinary();
+}
--- a/build/download_kubectl.ts
+++ b/build/download_kubectl.ts
@ -26,6 +26,7 @@ import requestPromise from "request-promise-native";
 import { ensureDir, pathExists } from "fs-extra";
 import path from "path";
 import { noop } from "lodash";
+import { isLinux, isMac } from "../src/common/vars";

 class KubectlDownloader {
  public kubectlVersion: string;
@ -115,15 +116,21 @@ class KubectlDownloader {
    });
  }
 }
-
 const downloadVersion = packageInfo.config.bundledKubectlVersion;
 const baseDir = path.join(__dirname, "..", "binaries", "client");
-const downloads = [
-  { platform: "linux", arch: "amd64", target: path.join(baseDir, "linux", "x64", "kubectl") },
-  { platform: "darwin", arch: "amd64", target: path.join(baseDir, "darwin", "x64", "kubectl") },
-  { platform: "windows", arch: "amd64", target: path.join(baseDir, "windows", "x64", "kubectl.exe") },
-  { platform: "windows", arch: "386", target: path.join(baseDir, "windows", "ia32", "kubectl.exe") }
-];
+
+const downloads = [];
+
+if (isMac) {
+  downloads.push({ platform: "darwin", arch: "amd64", target: path.join(baseDir, "darwin", "x64", "kubectl") });
+  downloads.push({ platform: "darwin", arch: "arm64", target: path.join(baseDir, "darwin", "arm64", "kubectl") });
+} else if (isLinux) {
+  downloads.push({ platform: "linux", arch: "amd64", target: path.join(baseDir, "linux", "x64", "kubectl") });
+  downloads.push({ platform: "linux", arch: "arm64", target: path.join(baseDir, "linux", "arm64", "kubectl") });
+} else {
+  downloads.push({ platform: "windows", arch: "amd64", target: path.join(baseDir, "windows", "x64", "kubectl.exe") });
+  downloads.push({ platform: "windows", arch: "386", target: path.join(baseDir, "windows", "ia32", "kubectl.exe") });
+}

 downloads.forEach((dlOpts) => {
  console.log(dlOpts);
--- a/integration/tests/app-preferences.tests.ts
+++ b/integration/tests/app-preferences.tests.ts
@ -63,7 +63,7 @@ describe("preferences page tests", () => {
    }
  }, 10*60*1000);

-  it("ensures helm repos", async () => {
+  utils.itIf(process.platform !== "win32")("ensures helm repos", async () => {
    await window.click("[data-testid=kubernetes-tab]");
    await window.waitForSelector("[data-testid=repository-name]", {
      timeout: 100_000,
--- a/package.json
+++ b/package.json
@ -3,7 +3,7 @@
  "productName": "OpenLens",
  "description": "OpenLens - Open Source IDE for Kubernetes",
  "homepage": "https://github.com/lensapp/lens",
-  "version": "5.2.0-beta.2",
+  "version": "5.2.0-beta.3",
  "main": "static/build/main.js",
  "copyright": "© 2021 OpenLens Authors",
  "license": "MIT",
@ -30,7 +30,6 @@
    "build:win": "yarn run compile && electron-builder --win --dir",
    "integration": "jest --runInBand --detectOpenHandles --forceExit integration",
    "dist": "yarn run compile && electron-builder --publish onTag",
-    "dist:win": "yarn run compile && electron-builder --publish onTag --x64 --ia32",
    "dist:dir": "yarn run dist --dir -c.compression=store -c.mac.identity=null",
    "download-bins": "concurrently yarn:download:*",
    "download:kubectl": "yarn run ts-node build/download_kubectl.ts",
@ -48,7 +47,7 @@
  },
  "config": {
    "bundledKubectlVersion": "1.21.2",
-    "bundledHelmVersion": "3.5.4",
+    "bundledHelmVersion": "3.6.3",
    "sentryDsn": ""
  },
  "engines": {
@ -122,11 +121,11 @@
      ],
      "extraResources": [
        {
-          "from": "binaries/client/linux/x64/kubectl",
-          "to": "./x64/kubectl"
+          "from": "binaries/client/linux/${arch}/kubectl",
+          "to": "./${arch}/kubectl"
        },
        {
-          "from": "binaries/client/helm3/helm3",
+          "from": "binaries/client/${arch}/helm3/helm3",
          "to": "./helm3/helm3"
        }
      ]
@ -138,11 +137,11 @@
      "entitlementsInherit": "build/entitlements.mac.plist",
      "extraResources": [
        {
-          "from": "binaries/client/darwin/x64/kubectl",
-          "to": "./x64/kubectl"
+          "from": "binaries/client/darwin/${arch}/kubectl",
+          "to": "./${arch}/kubectl"
        },
        {
-          "from": "binaries/client/helm3/helm3",
+          "from": "binaries/client/${arch}/helm3/helm3",
          "to": "./helm3/helm3"
        }
      ]
@ -161,7 +160,7 @@
          "to": "./ia32/kubectl.exe"
        },
        {
-          "from": "binaries/client/helm3/helm3.exe",
+          "from": "binaries/client/x64/helm3/helm3.exe",
          "to": "./helm3/helm3.exe"
        }
      ]
@ -288,7 +287,7 @@
    "@types/module-alias": "^2.0.0",
    "@types/node": "12.20",
    "@types/node-fetch": "^2.5.12",
-    "@types/npm": "^2.0.31",
+    "@types/npm": "^2.0.32",
    "@types/progress-bar-webpack-plugin": "^2.1.2",
    "@types/proper-lockfile": "^4.1.1",
    "@types/randomcolor": "^0.5.6",
@ -326,11 +325,11 @@
    "concurrently": "^5.2.0",
    "css-loader": "^5.2.6",
    "deepdash": "^5.3.5",
-    "dompurify": "^2.0.17",
+    "dompurify": "^2.3.1",
    "electron": "^12.0.17",
    "electron-builder": "^22.10.5",
    "electron-notarize": "^0.3.0",
-    "esbuild": "^0.12.12",
+    "esbuild": "^0.12.24",
    "esbuild-loader": "^2.13.1",
    "eslint": "^7.7.0",
    "eslint-plugin-header": "^3.1.1",
@ -351,12 +350,13 @@
    "json-to-pretty-yaml": "^1.2.2",
    "make-plural": "^6.2.2",
    "mini-css-extract-plugin": "^1.6.0",
+    "node-gyp": "7.1.2",
    "node-loader": "^1.0.3",
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.12",
    "playwright": "^1.14.0",
    "postcss": "^8.3.6",
-    "postcss-loader": "4.0.3",
+    "postcss-loader": "4.3.0",
    "postinstall-postinstall": "^2.1.0",
    "progress-bar-webpack-plugin": "^2.1.0",
    "randomcolor": "^0.6.2",
--- a/src/common/cluster-types.ts
+++ b/src/common/cluster-types.ts
@ -95,6 +95,7 @@ export interface ClusterPreferences extends ClusterPrometheusPreferences {
  hiddenMetrics?: string[];
  nodeShellImage?: string;
  imagePullSecret?: string;
+  defaultNamespace?: string;
 }

 /**
--- a/src/renderer/components/cluster-manager/welcome-topbar.tsx
+++ b/src/renderer/components/cluster-manager/welcome-topbar.tsx
@ -19,12 +19,16 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

-import React from "react";
-import { TopBar } from "../layout/topbar";
+import { reduce } from "../iter";

-export function WelcomeTopbar() {
-  return (
-    <TopBar label="Welcome">
-    </TopBar>
-  );
-}
+describe("iter", () => {
+  describe("reduce", () => {
+    it("can reduce a value", () => {
+      expect(reduce([1, 2, 3], (acc: number[], current: number) => [current, ...acc], [0])).toEqual([3, 2, 1, 0]);
+    });
+
+    it("can reduce an empty iterable", () => {
+      expect(reduce([], (acc: number[], current: number) => [acc[0] + current], [])).toEqual([]);
+    });
+  });
+});
--- a/src/common/utils/iter.ts
+++ b/src/common/utils/iter.ts
@ -156,3 +156,22 @@ export function find<T>(src: Iterable<T>, match: (i: T) => any): T | undefined {

  return void 0;
 }
+
+/**
+ * Iterate over `src` calling `reducer` with the previous produced value and the current
+ * yielded value until `src` is exausted. Then return the final value.
+ * @param src The value to iterate over
+ * @param reducer A function for producing the next item from an accumilation and the current item
+ * @param initial The initial value for the iteration
+ */
+export function reduce<T, R>(src: Iterable<T>, reducer: (acc: Iterable<R>, cur: T) => Iterable<R>, initial: Iterable<R>): Iterable<R>;
+
+export function reduce<T, R = T>(src: Iterable<T>, reducer: (acc: R, cur: T) => R, initial: R): R {
+  let acc = initial;
+
+  for (const item of src) {
+    acc = reducer(acc, item);
+  }
+
+  return acc;
+}
--- a/src/extensions/common-api/index.ts
+++ b/src/extensions/common-api/index.ts
@ -26,6 +26,7 @@ import * as Store from "./stores";
 import * as Util from "./utils";
 import * as Catalog from "./catalog";
 import * as Types from "./types";
+import logger from "../../common/logger";

 export {
  App,
@ -34,4 +35,5 @@ export {
  Store,
  Types,
  Util,
+  logger
 };
--- a/src/extensions/lens-renderer-extension.ts
+++ b/src/extensions/lens-renderer-extension.ts
@ -21,9 +21,11 @@

 import type * as registries from "./registries";
 import type { Cluster } from "../main/cluster";
-import { LensExtension } from "./lens-extension";
+import { Disposers, LensExtension } from "./lens-extension";
 import { getExtensionPageUrl } from "./registries/page-registry";
 import type { CatalogEntity } from "../common/catalog";
+import type { Disposer } from "../common/utils";
+import { catalogEntityRegistry, EntityFilter } from "../renderer/api/catalog-entity-registry";

 export class LensRendererExtension extends LensExtension {
  globalPages: registries.PageRegistration[] = [];
@ -59,4 +61,17 @@ export class LensRendererExtension extends LensExtension {
  async isEnabledForCluster(cluster: Cluster): Promise<Boolean> {
    return (void cluster) || true;
  }
+
+  /**
+   * Add a filtering function for the catalog. This will be removed if the extension is disabled.
+   * @param fn The function which should return a truthy value for those entities which should be kepted
+   * @returns A function to clean up the filter
+   */
+  addCatalogFilter(fn: EntityFilter): Disposer {
+    const dispose = catalogEntityRegistry.addCatalogFilter(fn);
+
+    this[Disposers].push(dispose);
+
+    return dispose;
+  }
 }
--- a/src/main/catalog/catalog-entity-registry.ts
+++ b/src/main/catalog/catalog-entity-registry.ts
@ -43,24 +43,20 @@ export class CatalogEntityRegistry {
  }

  @computed get items(): CatalogEntity[] {
-    const allItems = Array.from(iter.flatMap(this.sources.values(), source => source.get()));
-
-    return allItems.filter((entity) => this.categoryRegistry.getCategoryForEntity(entity) !== undefined);
+    return Array.from(
+      iter.filter(
+        iter.flatMap(this.sources.values(), source => source.get()),
+        entity => this.categoryRegistry.getCategoryForEntity(entity)
+      )
+    );
  }

  getById<T extends CatalogEntity>(id: string): T | undefined {
-    const item = this.items.find((entity) => entity.metadata.uid === id);
-
-    if (item) return item as T;
-
-
-    return undefined;
+    return this.items.find((entity) => entity.metadata.uid === id) as T | undefined;
  }

  getItemsForApiKind<T extends CatalogEntity>(apiVersion: string, kind: string): T[] {
-    const items = this.items.filter((item) => item.apiVersion === apiVersion && item.kind === kind);
-
-    return items as T[];
+    return this.items.filter((item) => item.apiVersion === apiVersion && item.kind === kind) as T[];
  }

  getItemsByEntityClass<T extends CatalogEntity>({ apiVersion, kind }: CatalogEntityKindData): T[] {
--- a/src/main/cluster.ts
+++ b/src/main/cluster.ts
@ -216,6 +216,18 @@ export class Cluster implements ClusterModel, ClusterState {
    return toJS({ prometheus, prometheusProvider });
  }

+  /**
+   * defaultNamespace preference
+   *
+   * @computed
+   * @internal
+   */
+  @computed get defaultNamespace(): string {
+    const { defaultNamespace } = this.preferences;
+
+    return defaultNamespace;
+  }
+
  constructor(model: ClusterModel) {
    makeObservable(this);
    this.id = model.id;
@ -298,10 +310,25 @@ export class Cluster implements ClusterModel, ClusterState {
          clearInterval(refreshTimer);
          clearInterval(refreshMetadataTimer);
        },
+        reaction(() => this.defaultNamespace, () => this.recreateProxyKubeconfig()),
      );
    }
  }

+  /**
+   * @internal
+   */
+  async recreateProxyKubeconfig() {
+    logger.info("Recreate proxy kubeconfig");
+
+    try {
+      this.kubeconfigManager.clear();
+    } catch {
+      // do nothing
+    }
+    this.getProxyKubeconfig();
+  }
+
  /**
   * internal
   */
@ -706,11 +733,11 @@ export class Cluster implements ClusterModel, ClusterState {
  }

  get nodeShellImage(): string {
-    return this.preferences.nodeShellImage || initialNodeShellImage;
+    return this.preferences?.nodeShellImage || initialNodeShellImage;
  }

-  get imagePullSecret(): string {
-    return this.preferences.imagePullSecret || "";
+  get imagePullSecret(): string | undefined {
+    return this.preferences?.imagePullSecret;
  }

  isInLocalKubeconfig() {
--- a/src/main/helm/helm-cli.ts
+++ b/src/main/helm/helm-cli.ts
@ -58,7 +58,7 @@ const helmVersion = packageInfo.config.bundledHelmVersion;
 let baseDir = process.resourcesPath;

 if (!isProduction) {
-  baseDir = path.join(process.cwd(), "binaries", "client");
+  baseDir = path.join(process.cwd(), "binaries", "client", process.arch);
 }

 export const helmCli = new HelmCli(baseDir, helmVersion);
--- a/src/main/kubeconfig-manager.ts
+++ b/src/main/kubeconfig-manager.ts
@ -56,6 +56,15 @@ export class KubeconfigManager {
    return this.tempFile;
  }

+  async clear() {
+    if (!this.tempFile) {
+      return;
+    }
+
+    logger.info(`Deleting temporary kubeconfig: ${this.tempFile}`);
+    await fs.unlink(this.tempFile);
+  }
+
  async unlink() {
    if (!this.tempFile) {
      return;
@ -106,7 +115,7 @@ export class KubeconfigManager {
          user: "proxy",
          name: contextName,
          cluster: contextName,
-          namespace: kubeConfig.getContextObject(contextName).namespace,
+          namespace: cluster.defaultNamespace || kubeConfig.getContextObject(contextName).namespace,
        }
      ]
    };
--- a/src/main/lens-binary.ts
+++ b/src/main/lens-binary.ts
@ -60,13 +60,13 @@ export class LensBinary {
    this.logger = console;
    let arch = null;

-    if (process.arch == "x64") {
+    if (process.env.BINARY_ARCH) {
+      arch = process.env.BINARY_ARCH;
+    } else if (process.arch == "x64") {
      arch = "amd64";
-    }
-    else if (process.arch == "x86" || process.arch == "ia32") {
+    } else if (process.arch == "x86" || process.arch == "ia32") {
      arch = "386";
-    }
-    else {
+    } else {
      arch = process.arch;
    }
    this.arch = arch;
--- a/src/main/shell-session/node-shell-session.ts
+++ b/src/main/shell-session/node-shell-session.ts
@ -25,6 +25,7 @@ import * as k8s from "@kubernetes/client-node";
 import type { KubeConfig } from "@kubernetes/client-node";
 import type { Cluster } from "../cluster";
 import { ShellOpenError, ShellSession } from "./shell-session";
+import { get } from "lodash";

 export class NodeShellSession extends ShellSession {
  ShellType = "node-shell";
@ -49,7 +50,7 @@ export class NodeShellSession extends ShellSession {
      await this.waitForRunningPod();
    } catch (error) {
      this.deleteNodeShellPod();
-      this.sendResponse("Error occurred. ");
+      this.sendResponse(`Error occurred: ${get(error, "response.body.message", error?.toString() || "unknown error")}`);

      throw new ShellOpenError("failed to create node pod", error);
    }
@ -57,10 +58,16 @@ export class NodeShellSession extends ShellSession {
    const args = ["exec", "-i", "-t", "-n", "kube-system", this.podId, "--", "sh", "-c", "((clear && bash) || (clear && ash) || (clear && sh))"];
    const env = await this.getCachedShellEnv();

-    super.open(shell, args, env);
+    await super.open(shell, args, env);
  }

  protected createNodeShellPod() {
+    const imagePullSecrets = this.cluster.imagePullSecret
+      ? [{
+        name: this.cluster.imagePullSecret,
+      }]
+      : undefined;
+
    return this
      .kc
      .makeApiClient(k8s.CoreV1Api)
@ -88,9 +95,7 @@ export class NodeShellSession extends ShellSession {
            command: ["nsenter"],
            args: ["-t", "1", "-m", "-u", "-i", "-n", "sleep", "14000"]
          }],
-          imagePullSecrets: [{
-            name: this.cluster.imagePullSecret,
-          }]
+          imagePullSecrets,
        }
      });
  }
--- a/src/main/window-manager.ts
+++ b/src/main/window-manager.ts
@ -244,6 +244,7 @@ export class WindowManager extends Singleton {
      this.sendToView({ channel: IpcRendererNavigationEvents.RELOAD_PAGE, frameInfo });
    } else {
      webContents.getFocusedWebContents()?.reload();
+      webContents.getFocusedWebContents()?.clearHistory();
    }
  }

--- a/src/migrations/user-store/5.0.3-beta.1.ts
+++ b/src/migrations/user-store/5.0.3-beta.1.ts
@ -40,6 +40,9 @@ export default {
      syncPaths.add(path.join(os.homedir(), ".kube"));

      for (const cluster of clusters) {
+        if (!cluster.kubeConfigPath) {
+          continue;
+        }
        const dirOfKubeconfig = path.dirname(cluster.kubeConfigPath);

        if (dirOfKubeconfig === storedKubeConfigFolder()) {
--- a/src/renderer/api/tests/catalog-entity-registry.test.ts
+++ b/src/renderer/api/tests/catalog-entity-registry.test.ts
@ -23,7 +23,8 @@ import { CatalogEntityRegistry } from "../catalog-entity-registry";
 import "../../../common/catalog-entities";
 import { catalogCategoryRegistry } from "../../../common/catalog/catalog-category-registry";
 import { CatalogCategory, CatalogEntityData, CatalogEntityKindData } from "../catalog-entity";
-import { WebLink } from "../../../common/catalog-entities";
+import { KubernetesCluster, WebLink } from "../../../common/catalog-entities";
+import { observable } from "mobx";

 class TestCatalogEntityRegistry extends CatalogEntityRegistry {
  replaceItems(items: Array<CatalogEntityData & CatalogEntityKindData>) {
@ -51,6 +52,49 @@ class FooBarCategory extends CatalogCategory {
    }
  };
 }
+const entity = new WebLink({
+  metadata: {
+    uid: "test",
+    name: "test-link",
+    source: "test",
+    labels: {}
+  },
+  spec: {
+    url: "https://k8slens.dev"
+  },
+  status: {
+    phase: "available"
+  }
+});
+const entity2 = new WebLink({
+  metadata: {
+    uid: "test2",
+    name: "test-link",
+    source: "test",
+    labels: {}
+  },
+  spec: {
+    url: "https://k8slens.dev"
+  },
+  status: {
+    phase: "available"
+  }
+});
+const entitykc = new KubernetesCluster({
+  metadata: {
+    uid: "test3",
+    name: "test-link",
+    source: "test",
+    labels: {}
+  },
+  spec: {
+    kubeconfigPath: "",
+    kubeconfigContext: "",
+  },
+  status: {
+    phase: "connected"
+  }
+});

 describe("CatalogEntityRegistry", () => {
  describe("updateItems", () => {
@ -250,4 +294,25 @@ describe("CatalogEntityRegistry", () => {
    catalogCategoryRegistry.add(new FooBarCategory());
    expect(catalog.items.length).toBe(1);
  });
+
+  it("does not return items that are filtered out", () => {
+    const source = observable.array([entity, entity2, entitykc]);
+    const catalog = new TestCatalogEntityRegistry(catalogCategoryRegistry);
+
+    catalog.replaceItems(source);
+
+    expect(catalog.items.length).toBe(3);
+    expect(catalog.filteredItems.length).toBe(3);
+
+    const d = catalog.addCatalogFilter(entity => entity.kind === KubernetesCluster.kind);
+
+    expect(catalog.items.length).toBe(3);
+    expect(catalog.filteredItems.length).toBe(1);
+
+    // Remove filter
+    d();
+
+    expect(catalog.items.length).toBe(3);
+    expect(catalog.filteredItems.length).toBe(3);
+  });
 });
--- a/src/renderer/api/catalog-entity-registry.ts
+++ b/src/renderer/api/catalog-entity-registry.ts
@ -25,10 +25,17 @@ import { CatalogCategory, CatalogEntity, CatalogEntityData, catalogCategoryRegis
 import "../../common/catalog-entities";
 import type { Cluster } from "../../main/cluster";
 import { ClusterStore } from "../../common/cluster-store";
+import { Disposer, iter } from "../utils";
+import { once } from "lodash";
+
+export type EntityFilter = (entity: CatalogEntity) => any;

 export class CatalogEntityRegistry {
  @observable.ref activeEntity: CatalogEntity;
  protected _entities = observable.map<string, CatalogEntity>([], { deep: true });
+  protected filters = observable.set<EntityFilter>([], {
+    deep: false,
+  });

  /**
   * Buffer for keeping entities that don't yet have CatalogCategory synced
@ -95,27 +102,56 @@ export class CatalogEntityRegistry {
    return Array.from(this._entities.values());
  }

-  @computed get entities(): Map<string, CatalogEntity> {
-    this.processRawEntities();
+  @computed get filteredItems() {
+    return Array.from(
+      iter.reduce(
+        this.filters,
+        iter.filter,
+        this.items,
+      )
+    );
+  }

-    return this._entities;
+  @computed get entities(): Map<string, CatalogEntity> {
+    return new Map(
+      this.items.map(entity => [entity.getId(), entity])
+    );
+  }
+
+  @computed get filteredEntities(): Map<string, CatalogEntity> {
+    return new Map(
+      this.filteredItems.map(entity => [entity.getId(), entity])
+    );
  }

  getById<T extends CatalogEntity>(id: string) {
    return this.entities.get(id) as T;
  }

-  getItemsForApiKind<T extends CatalogEntity>(apiVersion: string, kind: string): T[] {
-    const items = this.items.filter((item) => item.apiVersion === apiVersion && item.kind === kind);
+  getItemsForApiKind<T extends CatalogEntity>(apiVersion: string, kind: string, { filtered = false } = {}): T[] {
+    const byApiKind = (item: CatalogEntity) => item.apiVersion === apiVersion && item.kind === kind;
+    const entities = filtered ? this.filteredItems : this.items;

-    return items as T[];
+    return entities.filter(byApiKind) as T[];
  }

-  getItemsForCategory<T extends CatalogEntity>(category: CatalogCategory): T[] {
-    const supportedVersions = category.spec.versions.map((v) => `${category.spec.group}/${v.name}`);
-    const items = this.items.filter((item) => supportedVersions.includes(item.apiVersion) && item.kind === category.spec.names.kind);
+  getItemsForCategory<T extends CatalogEntity>(category: CatalogCategory, { filtered = false } = {}): T[] {
+    const supportedVersions = new Set(category.spec.versions.map((v) => `${category.spec.group}/${v.name}`));
+    const byApiVersionKind = (item: CatalogEntity) => supportedVersions.has(item.apiVersion) && item.kind === category.spec.names.kind;
+    const entities = filtered ? this.filteredItems : this.items;

-    return items as T[];
+    return entities.filter(byApiVersionKind) as T[];
+  }
+
+  /**
+   * Add a new filter to the set of item filters
+   * @param fn The function that should return a truthy value if that entity should be sent currently "active"
+   * @returns A function to remove that filter
+   */
+  addCatalogFilter(fn: EntityFilter): Disposer {
+    this.filters.add(fn);
+
+    return once(() => void this.filters.delete(fn));
  }
 }

--- a/src/renderer/components/+catalog/catalog-entity.store.tsx
+++ b/src/renderer/components/+catalog/catalog-entity.store.tsx
@ -129,10 +129,10 @@ export class CatalogEntityStore extends ItemStore<CatalogEntityItem<CatalogEntit

  @computed get entities() {
    if (!this.activeCategory) {
-      return catalogEntityRegistry.items.map(entity => new CatalogEntityItem(entity));
+      return catalogEntityRegistry.filteredItems.map(entity => new CatalogEntityItem(entity));
    }

-    return catalogEntityRegistry.getItemsForCategory(this.activeCategory).map(entity => new CatalogEntityItem(entity));
+    return catalogEntityRegistry.getItemsForCategory(this.activeCategory, { filtered: true }).map(entity => new CatalogEntityItem(entity));
  }

  @computed get selectedItem() {
--- a/src/renderer/components/+catalog/catalog-menu.module.css
+++ b/src/renderer/components/+catalog/catalog-menu.module.css
@ -27,4 +27,9 @@
  @apply uppercase font-bold;
  color: var(--textColorAccent);
  font-size: small;
+}
+
+.catalog {
+  @apply p-5 font-bold text-2xl;
+  color: var(--textColorAccent);
 }
--- a/src/renderer/components/+catalog/catalog-menu.tsx
+++ b/src/renderer/components/+catalog/catalog-menu.tsx
@ -58,6 +58,7 @@ export function CatalogMenu(props: Props) {
    // Overwrite Material UI styles with injectFirst https://material-ui.com/guides/interoperability/#controlling-priority-4
    <StylesProvider injectFirst>
      <div className="flex flex-col w-full">
+        <div className={styles.catalog}>Catalog</div>
        <TreeView
          defaultExpanded={["catalog"]}
          defaultCollapseIcon={<Icon material="expand_more"/>}
--- a/src/renderer/components/+catalog/catalog.tsx
+++ b/src/renderer/components/+catalog/catalog.tsx
@ -43,7 +43,7 @@ import { catalogURL, CatalogViewRouteParam } from "../../../common/routes";
 import { CatalogMenu } from "./catalog-menu";
 import { HotbarIcon } from "../hotbar/hotbar-icon";
 import { RenderDelay } from "../render-delay/render-delay";
-import { CatalogTopbar } from "../cluster-manager/catalog-topbar";
+import { TopBar } from "../layout/topbar";

 export const previousActiveTab = createAppStorage("catalog-previous-active-tab", "");

@ -247,7 +247,7 @@ export class Catalog extends React.Component<Props> {

    return (
      <>
-        <CatalogTopbar/>
+        <TopBar/>
        <MainLayout sidebar={this.renderNavigation()}>
          <div className="p-6 h-full">
            { this.renderList() }
--- a/src/renderer/components/+welcome/test/welcome.test.tsx
+++ b/src/renderer/components/+welcome/test/welcome.test.tsx
@ -26,6 +26,15 @@ import { Welcome } from "../welcome";
 import { TopBarRegistry, WelcomeMenuRegistry, WelcomeBannerRegistry } from "../../../../extensions/registries";
 import { defaultWidth } from "../welcome";

+jest.mock(
+  "electron",
+  () => ({
+    ipcRenderer: {
+      on: jest.fn(),
+    },
+  })
+);
+
 describe("<Welcome/>", () => {
  beforeEach(() => {
    TopBarRegistry.createInstance();
--- a/src/renderer/components/+welcome/welcome.tsx
+++ b/src/renderer/components/+welcome/welcome.tsx
@ -26,8 +26,8 @@ import Carousel from "react-material-ui-carousel";
 import { Icon } from "../icon";
 import { productName, slackUrl } from "../../../common/vars";
 import { WelcomeMenuRegistry } from "../../../extensions/registries";
-import { WelcomeTopbar } from "../cluster-manager/welcome-topbar";
 import { WelcomeBannerRegistry } from "../../../extensions/registries";
+import { TopBar } from "../layout/topbar";

 export const defaultWidth = 320;

@ -49,7 +49,7 @@ export class Welcome extends React.Component {

    return (
      <>
-        <WelcomeTopbar/>
+        <TopBar/>
        <div className="flex justify-center Welcome align-center">
          <div style={{ width: `${maxWidth}px` }} data-testid="welcome-banner-container">
            {welcomeBanner.length > 0 ? (
--- a/src/renderer/components/app.tsx
+++ b/src/renderer/components/app.tsx
@ -72,6 +72,7 @@ import { catalogEntityRegistry } from "../api/catalog-entity-registry";
 import { getHostedClusterId } from "../utils";
 import { ClusterStore } from "../../common/cluster-store";
 import type { ClusterId } from "../../common/cluster-types";
+import { watchHistoryState } from "../remote-helpers/history-updater";

@observer
 export class App extends React.Component {
@ -128,7 +129,9 @@ export class App extends React.Component {
    disposeOnUnmount(this, [
      kubeWatchApi.subscribeStores([podsStore, nodesStore, eventStore, namespaceStore], {
        preload: true,
-      })
+      }),
+
+      watchHistoryState()
    ]);
  }

--- a/src/renderer/components/cluster-manager/cluster-topbar.tsx
+++ b/src/renderer/components/cluster-manager/cluster-topbar.tsx
@ -1,61 +0,0 @@
-/**
- * Copyright (c) 2021 OpenLens Authors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of
- * this software and associated documentation files (the "Software"), to deal in
- * the Software without restriction, including without limitation the rights to
- * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
- * the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
- * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
- * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
- * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
- * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-import { observer } from "mobx-react";
-import React from "react";
-
-import { previousActiveTab } from "../+catalog";
-import { ClusterStore } from "../../../common/cluster-store";
-import { catalogURL } from "../../../common/routes";
-import { navigate } from "../../navigation";
-import { Icon } from "../icon";
-import { TopBar } from "../layout/topbar";
-
-import type { RouteComponentProps } from "react-router";
-import type { ClusterViewRouteParams } from "../../../common/routes";
-import type { Cluster } from "../../../main/cluster";
-import { TooltipPosition } from "../tooltip";
-
-interface Props extends RouteComponentProps<ClusterViewRouteParams> {
-}
-
-export const ClusterTopbar = observer((props: Props) => {
-  const getCluster = (): Cluster | undefined => {
-    return ClusterStore.getInstance().getById(props.match.params.clusterId);
-  };
-
-  return (
-    <TopBar label={getCluster()?.name}>
-      <div>
-        <Icon
-          style={{ cursor: "default" }}
-          material="close"
-          onClick={() => {
-            navigate(`${catalogURL()}/${previousActiveTab.get()}`);
-          }}
-          tooltip={{
-            preferredPositions: TooltipPosition.BOTTOM_RIGHT,
-            children: "Back to Catalog"
-          }}
-        />
-      </div>
-    </TopBar>
-  );
-});
--- a/src/renderer/components/cluster-manager/cluster-view.tsx
+++ b/src/renderer/components/cluster-manager/cluster-view.tsx
@ -34,7 +34,7 @@ import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { navigate } from "../../navigation";
 import { catalogURL, ClusterViewRouteParams } from "../../../common/routes";
 import { previousActiveTab } from "../+catalog";
-import { ClusterTopbar } from "./cluster-topbar";
+import { TopBar } from "../layout/topbar";

 interface Props extends RouteComponentProps<ClusterViewRouteParams> {
 }
@ -105,7 +105,7 @@ export class ClusterView extends React.Component<Props> {
  render() {
    return (
      <div className="ClusterView flex column align-center">
-        <ClusterTopbar {...this.props}/>
+        <TopBar/>
        {this.renderStatus()}
      </div>
    );
--- a/src/renderer/components/cluster-settings/components/cluster-home-dir-setting.tsx
+++ b/src/renderer/components/cluster-settings/components/cluster-home-dir-setting.tsx
@ -33,43 +33,76 @@ interface Props {
@observer
 export class ClusterHomeDirSetting extends React.Component<Props> {
  @observable directory = "";
+  @observable defaultNamespace = "";

  constructor(props: Props) {
    super(props);
    makeObservable(this);
  }

-  componentDidMount() {
+  async componentDidMount() {
+    const kubeconfig = await this.props.cluster.getKubeconfig();
+
+    const defaultNamespace = this.props.cluster.preferences?.defaultNamespace || kubeconfig.getContextObject(this.props.cluster.contextName).namespace;
+
    disposeOnUnmount(this,
      autorun(() => {
        this.directory = this.props.cluster.preferences.terminalCWD || "";
+        this.defaultNamespace = defaultNamespace || "";
      })
    );
  }

-  save = () => {
+  saveCWD = () => {
    this.props.cluster.preferences.terminalCWD = this.directory;
  };

-  onChange = (value: string) => {
+  onChangeTerminalCWD = (value: string) => {
    this.directory = value;
  };

+  saveDefaultNamespace = () => {
+    if (this.defaultNamespace) {
+      this.props.cluster.preferences.defaultNamespace = this.defaultNamespace;
+    } else {
+      this.props.cluster.preferences.defaultNamespace = undefined;
+    }
+  };
+
+  onChangeDefaultNamespace = (value: string) => {
+    this.defaultNamespace = value;
+  };
+
  render() {
    return (
      <>
-        <SubTitle title="Working Directory"/>
-        <Input
-          theme="round-black"
-          value={this.directory}
-          onChange={this.onChange}
-          onBlur={this.save}
-          placeholder="$HOME"
-        />
-        <small className="hint">
-          An explicit start path where the terminal will be launched,{" "}
-          this is used as the current working directory (cwd) for the shell process.
-        </small>
+        <section>
+          <SubTitle title="Working Directory"/>
+          <Input
+            theme="round-black"
+            value={this.directory}
+            onChange={this.onChangeTerminalCWD}
+            onBlur={this.saveCWD}
+            placeholder="$HOME"
+          />
+          <small className="hint">
+            An explicit start path where the terminal will be launched,{" "}
+            this is used as the current working directory (cwd) for the shell process.
+          </small>
+        </section>
+        <section>
+          <SubTitle title="Default Namespace"/>
+          <Input
+            theme="round-black"
+            value={this.defaultNamespace}
+            onChange={this.onChangeDefaultNamespace}
+            onBlur={this.saveDefaultNamespace}
+            placeholder={this.defaultNamespace}
+          />
+          <small className="hint">
+            Default namespace used for kubectl.
+          </small>
+        </section>
      </>
    );
  }
--- a/src/renderer/components/cluster-settings/components/cluster-node-shell-setting.tsx
+++ b/src/renderer/components/cluster-settings/components/cluster-node-shell-setting.tsx
@ -20,11 +20,11 @@
 */

 import type { Cluster } from "../../../../main/cluster";
-import { autorun, makeObservable, observable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { SubTitle } from "../../layout/sub-title";
 import React from "react";
 import { Input } from "../../input/input";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import { Icon } from "../../icon/icon";
 import { initialNodeShellImage } from "../../../../common/cluster-types";

@ -34,59 +34,42 @@ interface Props {

@observer
 export class ClusterNodeShellSetting extends React.Component<Props> {
-  @observable nodeShellImage = "";
-  @observable imagePullSecret = "";
+  @observable nodeShellImage = this.props.cluster.preferences?.nodeShellImage || "";
+  @observable imagePullSecret = this.props.cluster.preferences?.imagePullSecret || "";

  constructor(props: Props) {
    super(props);
    makeObservable(this);
  }

-  componentDidMount() {
-    disposeOnUnmount(this,
-      autorun(() => {
-        this.nodeShellImage = this.props.cluster.nodeShellImage;
-        this.imagePullSecret = this.props.cluster.imagePullSecret;
-      })
-    );
+  componentWillUnmount() {
+    this.props.cluster.preferences ??= {};
+    this.props.cluster.preferences.nodeShellImage = this.nodeShellImage || undefined;
+    this.props.cluster.preferences.imagePullSecret = this.imagePullSecret || undefined;
  }

-  onImageChange = (value: string) => {
-    this.nodeShellImage = value;
-  };
-
-  onSecretChange = (value: string) => {
-    this.imagePullSecret = value;
-  };
-
-  saveImage = () => {
-    this.props.cluster.preferences.nodeShellImage = this.nodeShellImage;
-  };
-
-  saveSecret = () => {
-    this.props.cluster.preferences.imagePullSecret = this.imagePullSecret;
-  };
-
-  resetImage = () => {
-    this.nodeShellImage = initialNodeShellImage; //revert to default
-  };
-
-  clearSecret = () => {
-    this.imagePullSecret = "";
-  };
-
  render() {
-
    return (
      <>
        <section>
          <SubTitle title="Node shell image" id="node-shell-image"/>
          <Input
            theme="round-black"
+            placeholder={`Default image: ${initialNodeShellImage}`}
            value={this.nodeShellImage}
-            onChange={this.onImageChange}
-            onBlur={this.saveImage}
-            iconRight={<Icon small material="close" onClick={this.resetImage} tooltip="Reset"/>}
+            onChange={value => this.nodeShellImage = value}
+            iconRight={
+              this.nodeShellImage
+                ? (
+                  <Icon
+                    smallest
+                    material="close"
+                    onClick={() => this.nodeShellImage = ""}
+                    tooltip="Reset"
+                  />
+                )
+                : undefined
+            }
          />
          <small className="hint">
            Node shell image. Used for creating node shell pod.
@ -95,15 +78,25 @@ export class ClusterNodeShellSetting extends React.Component<Props> {
        <section>
          <SubTitle title="Image pull secret" id="image-pull-secret"/>
          <Input
-            placeholder={"Add a secret name..."}
+            placeholder="Specify a secret name..."
            theme="round-black"
            value={this.imagePullSecret}
-            onChange={this.onSecretChange}
-            onBlur={this.saveSecret}
-            iconRight={<Icon small material="close" onClick={this.clearSecret} tooltip="Clear"/>}
+            onChange={value => this.imagePullSecret = value}
+            iconRight={
+              this.imagePullSecret
+                ? (
+                  <Icon
+                    smallest
+                    material="close"
+                    onClick={() => this.imagePullSecret = ""}
+                    tooltip="Clear"
+                  />
+                )
+                : undefined
+            }
          />
          <small className="hint">
-            Name of a pre-existing secret (optional). Used for pulling image from a private registry.
+            Name of a pre-existing secret. An optional setting. Used for pulling image from a private registry.
          </small>
        </section>
      </>
--- a/src/renderer/components/hotbar/hotbar-menu.tsx
+++ b/src/renderer/components/hotbar/hotbar-menu.tsx
@ -52,7 +52,7 @@ export class HotbarMenu extends React.Component<Props> {
      return null;
    }

-    return item ? catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid) : null;
+    return catalogEntityRegistry.getById(item?.entity.uid) ?? null;
  }

  onDragEnd(result: DropResult) {
--- a/src/renderer/components/layout/tests/topbar.test.tsx
+++ b/src/renderer/components/layout/tests/topbar.test.tsx
@ -20,11 +20,46 @@
 */

 import React from "react";
-import { render } from "@testing-library/react";
+import { render, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { TopBar } from "../topbar";
 import { TopBarRegistry } from "../../../../extensions/registries";

+jest.mock(
+  "electron",
+  () => ({
+    ipcRenderer: {
+      on: jest.fn(
+        (channel: string, listener: (event: any, ...args: any[]) => void) => {
+          if (channel === "history:can-go-back") {
+            listener({}, true);
+          }
+
+          if (channel === "history:can-go-forward") {
+            listener({}, true);
+          }
+        }
+      ),
+    },
+  })
+);
+
+const goBack = jest.fn();
+const goForward = jest.fn();
+
+jest.mock("@electron/remote", () => {
+  return {
+    webContents: {
+      getFocusedWebContents: () => {
+        return {
+          goBack,
+          goForward
+        };
+      }
+    }
+  };
+});
+
 describe("<TopBar/>", () => {
  beforeEach(() => {
    TopBarRegistry.createInstance();
@ -35,15 +70,38 @@ describe("<TopBar/>", () => {
  });

  it("renders w/o errors", () => {
-    const { container } = render(<TopBar label="test bar" />);
+    const { container } = render(<TopBar/>);

    expect(container).toBeInstanceOf(HTMLElement);
  });

-  it("renders title", async () => {
-    const { getByTestId } = render(<TopBar label="topbar" />);
+  it("renders history arrows", async () => {
+    const { getByTestId } = render(<TopBar/>);

-    expect(await getByTestId("topbarLabel")).toHaveTextContent("topbar");
+    expect(await getByTestId("history-back")).toBeInTheDocument();
+    expect(await getByTestId("history-forward")).toBeInTheDocument();
+  });
+
+  it("enables arrow by ipc event", async () => {
+    const { getByTestId } = render(<TopBar/>);
+
+    expect(await getByTestId("history-back")).not.toHaveClass("disabled");
+    expect(await getByTestId("history-forward")).not.toHaveClass("disabled");
+  });
+
+  it("triggers browser history back and forward", async () => {
+    const { getByTestId } = render(<TopBar/>);
+
+    const prevButton = await getByTestId("history-back");
+    const nextButton = await getByTestId("history-forward");
+
+    fireEvent.click(prevButton);
+
+    expect(goBack).toBeCalled();
+
+    fireEvent.click(nextButton);
+
+    expect(goForward).toBeCalled();
  });

  it("renders items", async () => {
@ -58,7 +116,7 @@ describe("<TopBar/>", () => {
      }
    ]);

-    const { getByTestId } = render(<TopBar label="topbar" />);
+    const { getByTestId } = render(<TopBar/>);

    expect(await getByTestId(testId)).toHaveTextContent(text);
  });
--- a/src/renderer/components/layout/sidebar.scss
+++ b/src/renderer/components/layout/sidebar.scss
@ -45,4 +45,12 @@
    padding: $padding;
    text-align: center;
  }
+
+  .cluster-name {
+    padding: 1.25rem;
+    font-weight: bold;
+    font-size: 1.5rem;
+    word-break: break-all;
+    color: var(--textColorAccent);
+  }
 }
--- a/src/renderer/components/layout/sidebar.tsx
+++ b/src/renderer/components/layout/sidebar.tsx
@ -40,6 +40,8 @@ import { SidebarItem } from "./sidebar-item";
 import { Apps } from "../+apps";
 import * as routes from "../../../common/routes";
 import { Config } from "../+config";
+import { ClusterStore } from "../../../common/cluster-store";
+import { App } from "../app";

 interface Props {
  className?: string;
@ -181,6 +183,9 @@ export class Sidebar extends React.Component<Props> {

    return (
      <div className={cssNames(Sidebar.displayName, "flex column", className)}>
+        <div className="cluster-name">
+          {ClusterStore.getInstance().getById(App.clusterId)?.name}
+        </div>
        <div className={cssNames("sidebar-nav flex column box grow-fixed")}>
          <SidebarItem
            id="cluster"
--- a/src/renderer/components/layout/topbar.module.css
+++ b/src/renderer/components/layout/topbar.module.css
@ -30,11 +30,8 @@
  grid-area: topbar;
 }

-.title {
-  @apply font-bold px-6;
-  color: var(--textColorAccent);
-  align-items: center;
-  display: flex;
+.history {
+  @apply flex items-center;
 }

 .controls {
--- a/src/renderer/components/layout/topbar.tsx
+++ b/src/renderer/components/layout/topbar.tsx
@ -20,15 +20,30 @@
 */

 import styles from "./topbar.module.css";
-import React from "react";
+import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 import { TopBarRegistry } from "../../../extensions/registries";
+import { Icon } from "../icon";
+import { webContents } from "@electron/remote";
+import { observable } from "mobx";
+import { ipcRendererOn } from "../../../common/ipc";
+import { watchHistoryState } from "../../remote-helpers/history-updater";

 interface Props extends React.HTMLAttributes<any> {
-  label: React.ReactNode;
 }

-export const TopBar = observer(({ label, children, ...rest }: Props) => {
+const prevEnabled = observable.box(false);
+const nextEnabled = observable.box(false);
+
+ipcRendererOn("history:can-go-back", (event, state: boolean) => {
+  prevEnabled.set(state);
+});
+
+ipcRendererOn("history:can-go-forward", (event, state: boolean) => {
+  nextEnabled.set(state);
+});
+
+export const TopBar = observer(({ children, ...rest }: Props) => {
  const renderRegisteredItems = () => {
    const items = TopBarRegistry.getInstance().getItems();

@ -37,7 +52,7 @@ export const TopBar = observer(({ label, children, ...rest }: Props) => {
    }

    return (
-      <div className="px-6">
+      <div>
        {items.map((registration, index) => {
          if (!registration?.components?.Item) {
            return null;
@ -53,9 +68,38 @@ export const TopBar = observer(({ label, children, ...rest }: Props) => {
    );
  };

+  const goBack = () => {
+    webContents.getFocusedWebContents()?.goBack();
+  };
+
+  const goForward = () => {
+    webContents.getFocusedWebContents()?.goForward();
+  };
+
+  useEffect(() => {
+    const disposer = watchHistoryState();
+
+    return () => disposer();
+  }, []);
+
  return (
    <div className={styles.topBar} {...rest}>
-      <div className={styles.title} data-testid="topbarLabel">{label}</div>
+      <div className={styles.history}>
+        <Icon
+          data-testid="history-back"
+          material="arrow_back"
+          className="ml-5"
+          onClick={goBack}
+          disabled={!prevEnabled.get()}
+        />
+        <Icon
+          data-testid="history-forward"
+          material="arrow_forward"
+          className="ml-5"
+          onClick={goForward}
+          disabled={!nextEnabled.get()}
+        />
+      </div>
      <div className={styles.controls}>
        {renderRegisteredItems()}
        {children}
--- a/src/renderer/components/cluster-manager/catalog-topbar.tsx
+++ b/src/renderer/components/cluster-manager/catalog-topbar.tsx
@ -19,23 +19,14 @@
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

-import React from "react";
-import { welcomeURL } from "../../../common/routes";
-import { navigate } from "../../navigation";
-import { Icon } from "../icon";
-import { TopBar } from "../layout/topbar";
+import { webContents } from "@electron/remote";
+import { reaction } from "mobx";
+import { broadcastMessage } from "../../common/ipc";
+import { navigation } from "../navigation";

-export function CatalogTopbar() {
-  return (
-    <TopBar label="Catalog">
-      <div>
-        <Icon
-          style={{ cursor: "default" }}
-          material="close"
-          onClick={() => navigate(welcomeURL())}
-          tooltip="Close Catalog"
-        />
-      </div>
-    </TopBar>
-  );
+export function watchHistoryState() {
+  return reaction(() => navigation.location, () => {
+    broadcastMessage("history:can-go-back", webContents.getFocusedWebContents()?.canGoBack());
+    broadcastMessage("history:can-go-forward", webContents.getFocusedWebContents()?.canGoForward());
+  });
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -1717,10 +1717,10 @@
    "@types/node" "*"
    form-data "^3.0.0"

-"@types/node@*":
-  version "14.14.41"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.41.tgz#d0b939d94c1d7bd53d04824af45f1139b8c45615"
-  integrity sha512-dueRKfaJL4RTtSa7bWeTK1M+VH+Gns73oCgzvYfHZywRCoPSd8EkXBL0mZ9unPTveBn+D9phZBaxuzpwjWkW0g==
+"@types/node@*", "@types/node@^14.6.2":
+  version "14.17.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.5.tgz#b59daf6a7ffa461b5648456ca59050ba8e40ed54"
+  integrity sha512-bjqH2cX/O33jXT/UmReo2pM7DIJREPMnarixbQ57DOOzzFaI6D2+IcwaJQaJpv0M1E9TIhPCYVxrkcityLjlqA==

 "@types/node@12.20", "@types/node@^12.0.12":
  version "12.20.21"
@ -1732,20 +1732,15 @@
  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.24.tgz#c57511e3a19c4b5e9692bb2995c40a3a52167944"
  integrity sha512-5SCfvCxV74kzR3uWgTYiGxrd69TbT1I6+cMx1A5kEly/IVveJBimtAMlXiEyVFn5DvUFewQWxOOiJhlxeQwxgA==

-"@types/node@^14.6.2":
-  version "14.17.5"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.5.tgz#b59daf6a7ffa461b5648456ca59050ba8e40ed54"
-  integrity sha512-bjqH2cX/O33jXT/UmReo2pM7DIJREPMnarixbQ57DOOzzFaI6D2+IcwaJQaJpv0M1E9TIhPCYVxrkcityLjlqA==
-
 "@types/normalize-package-data@^2.4.0":
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==

-"@types/npm@^2.0.31":
-  version "2.0.31"
-  resolved "https://registry.yarnpkg.com/@types/npm/-/npm-2.0.31.tgz#aad3aef7e165f2911a052abf548fbcc1bb468577"
-  integrity sha512-v4JpUx83wVGItleYsnYeZrM8NTLSnYDfTE/iGm4owy6zZPNFNmnsvvrxiYtG3cVHt/XutzTjUBQ9Bh8bnvEkCw==
+"@types/npm@^2.0.32":
+  version "2.0.32"
+  resolved "https://registry.yarnpkg.com/@types/npm/-/npm-2.0.32.tgz#036682075b9c2116b510fe24b52a5b932e3a99d5"
+  integrity sha512-9Lg4woNVzJCtac0lET91H65lbO+8YXfk0nmlmoPGhHXMdaVEDloH6zOPIYMy2n39z/aCXXQR0nax66EDekAyIQ==
  dependencies:
    "@types/node" "*"

@ -5065,10 +5060,10 @@ domhandler@^2.3.0:
  dependencies:
    domelementtype "1"

-dompurify@^2.0.17:
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.0.17.tgz#505ffa126a580603df4007e034bdc9b6b738668e"
-  integrity sha512-nNwwJfW55r8akD8MSFz6k75bzyT2y6JEa1O3JrZFBf+Y5R9JXXU4OsRl0B9hKoPgHTw2b7ER5yJ5Md97MMUJPg==
+dompurify@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.3.1.tgz#a47059ca21fd1212d3c8f71fdea6943b8bfbdf6a"
+  integrity sha512-xGWt+NHAQS+4tpgbOAI08yxW0Pr256Gu/FNE2frZVTbgrBUn8M7tz7/ktS/LZ2MHeGqz6topj0/xY+y8R5FBFw==

 domutils@1.5.1:
  version "1.5.1"
@ -5500,10 +5495,10 @@ esbuild@^0.11.19:
  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.11.23.tgz#c42534f632e165120671d64db67883634333b4b8"
  integrity sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==

-esbuild@^0.12.12:
-  version "0.12.12"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.12.tgz#2c3815c508e20f771cf6b2ffb03aa7349e651657"
-  integrity sha512-fdB/8HRg9u95Zi4/qV+osrfzpvLzubFKUr8SkZf/kUKImLiX61Y7qBzV14FCKphFk7YoXWY85nbPGkI6pq+Zeg==
+esbuild@^0.12.24:
+  version "0.12.24"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.24.tgz#21966fad25a80f368ed308101e88102bce0dc68f"
+  integrity sha512-C0ibY+HsXzYB6L/pLWEiWjMpghKsIc58Q5yumARwBQsHl9DXPakW+5NI/Y9w4YXiz0PEP6XTGTT/OV4Nnsmb4A==

 escalade@^3.1.1:
  version "3.1.1"
@ -6851,6 +6846,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==

+graceful-fs@^4.2.3:
+  version "4.2.8"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
+  integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
+
 "graceful-readlink@>= 1.0.0":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
@ -10014,6 +10014,22 @@ node-forge@^0.8.2:
  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.8.5.tgz#57906f07614dc72762c84cef442f427c0e1b86ee"
  integrity sha512-vFMQIWt+J/7FLNyKouZ9TazT74PRV3wgv9UT4cRjC8BffxFbKXkgIWR42URCPSnHm/QDz6BOlb2Q0U4+VQT67Q==

+node-gyp@7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-7.1.2.tgz#21a810aebb187120251c3bcec979af1587b188ae"
+  integrity sha512-CbpcIo7C3eMu3dL1c3d0xw449fHIGALIJsRP4DDPHpyiW8vcriNY7ubh9TE4zEKfSxscY7PjeFnshE7h75ynjQ==
+  dependencies:
+    env-paths "^2.2.0"
+    glob "^7.1.4"
+    graceful-fs "^4.2.3"
+    nopt "^5.0.0"
+    npmlog "^4.1.2"
+    request "^2.88.2"
+    rimraf "^3.0.2"
+    semver "^7.3.2"
+    tar "^6.0.2"
+    which "^2.0.2"
+
 node-gyp@^3.8.0:
  version "3.8.0"
  resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
@ -10169,6 +10185,13 @@ nopt@^4.0.1, nopt@^4.0.3:
    abbrev "1"
    osenv "^0.1.4"

+nopt@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-5.0.0.tgz#530942bb58a512fccafe53fe210f13a25355dc88"
+  integrity sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
+  dependencies:
+    abbrev "1"
+
 nopt@~1.0.10:
  version "1.0.10"
  resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
@ -11305,16 +11328,16 @@ postcss-load-config@^3.0.1, postcss-load-config@^3.1.0:
    lilconfig "^2.0.3"
    yaml "^1.10.2"

-postcss-loader@4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.0.3.tgz#337f51bbdfb02269fb42f7db9fc7f0a93c1b2e3f"
-  integrity sha512-jHboC/AOnJLPu8/974hODCJ/rNAa2YhhJOclUeuRlAmFpKmEcBY6az8y1ejHyYc2LThzPl8qPRekh2Yz3CiRKA==
+postcss-loader@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.3.0.tgz#2c4de9657cd4f07af5ab42bd60a673004da1b8cc"
+  integrity sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==
  dependencies:
    cosmiconfig "^7.0.0"
    klona "^2.0.4"
    loader-utils "^2.0.0"
-    schema-utils "^2.7.1"
-    semver "^7.3.2"
+    schema-utils "^3.0.0"
+    semver "^7.3.4"

 postcss-modules-extract-imports@^3.0.0:
  version "3.0.0"
@ -12648,7 +12671,7 @@ schema-utils@^1.0.0:
    ajv-errors "^1.0.0"
    ajv-keywords "^3.1.0"

-schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.7.1:
+schema-utils@^2.6.1, schema-utils@^2.6.5:
  version "2.7.1"
  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==