Merge branch 'master' into fix-hpa-metrics-values

.github/workflows/codeql-analysis.yml

@@ -43,7 +43,7 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@v1
+        uses: github/codeql-action/init@v2
         with:
           languages: ${{ matrix.language }}
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -54,7 +54,7 @@ jobs:
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@v1
+        uses: github/codeql-action/autobuild@v2
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -68,4 +68,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v1
+        uses: github/codeql-action/analyze@v2

.github/workflows/release.yml

@@ -30,6 +30,7 @@ jobs:
           commit: master
           tag: ${{ steps.tagger.outputs.tagname }}
           body: ${{ github.event.pull_request.body }}
+          prerelease: ${{ endsWith(steps.tagger.outputs.tagname, '-alpha') || endsWith(steps.tagger.outputs.tagname, '-beta') }}
   publish-npm:
     uses: ./.github/workflows/publish-release-npm.yml
     needs: release

Makefile

@@ -3,7 +3,6 @@ CMD_ARGS = $(filter-out $@,$(MAKECMDGOALS))
 %:
   @:
 
-NPM_RELEASE_TAG ?= latest
 ELECTRON_BUILDER_EXTRA_ARGS ?=
 
 ifeq ($(OS),Windows_NT)
@@ -84,13 +83,11 @@ build-extension-types: node_modules packages/extensions/dist
 
 .PHONY: publish-extensions-npm
 publish-extensions-npm: node_modules build-extensions-npm
-	./node_modules/.bin/npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
+	./scripts/publish-extensions-npm.sh
-	cd packages/extensions && npm publish --access=public --tag=$(NPM_RELEASE_TAG) && git restore package.json
 
 .PHONY: publish-library-npm
 publish-library-npm: node_modules build-library-npm
-	./node_modules/.bin/npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
+	./scripts/publish-library-npm.sh
-	npm publish --access=public --tag=$(NPM_RELEASE_TAG)
 
 .PHONY: build-docs
 build-docs:

package.json

@@ -3,7 +3,7 @@
   "productName": "OpenLens",
   "description": "OpenLens - Open Source IDE for Kubernetes",
   "homepage": "https://github.com/lensapp/lens",
-  "version": "6.4.0-alpha.3",
+  "version": "6.4.0-alpha.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/lensapp/lens.git"
@@ -287,8 +287,6 @@
     "react-router": "^5.3.4",
     "react-virtualized-auto-sizer": "^1.0.7",
     "readable-stream": "^3.6.0",
-    "request": "^2.88.2",
-    "request-promise-native": "^1.0.9",
     "rfc6902": "^5.0.1",
     "selfsigned": "^2.1.1",
     "semver": "^7.3.8",
@@ -312,7 +310,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@sentry/types": "^6.19.7",
     "@swc/cli": "^0.1.59",
-    "@swc/core": "^1.3.26",
+    "@swc/core": "^1.3.27",
     "@swc/jest": "^0.2.24",
     "@testing-library/dom": "^7.31.2",
     "@testing-library/jest-dom": "^5.16.5",
@@ -355,8 +353,6 @@
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "@types/readable-stream": "^2.3.13",
-    "@types/request": "^2.48.7",
-    "@types/request-promise-native": "^1.0.18",
     "@types/semver": "^7.3.13",
     "@types/sharp": "^0.31.1",
     "@types/tar": "^6.1.3",
@@ -387,7 +383,7 @@
     "electron": "^19.1.9",
     "electron-builder": "^23.6.0",
     "electron-notarize": "^0.3.0",
-    "esbuild": "^0.17.0",
+    "esbuild": "^0.17.3",
     "esbuild-loader": "^2.21.0",
     "eslint": "^8.32.0",
     "eslint-import-resolver-typescript": "^3.5.3",
@@ -461,7 +457,6 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
-    "@types/request-promise-native": "^1.0.18",
     "@types/tar": "^6.1.3",
     "@types/tcp-port-used": "^1.0.1",
     "@types/url-parse": "^1.4.8",

scripts/publish-extensions-npm.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+./node_modules/.bin/npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
+
+NPM_RELEASE_TAG=$(cat package.json | jq .version --raw-output | rg '.*-(?P<channel>\w+).*' -r '$channel' | cat)
+
+cd packages/extensions && npm publish --access=public --tag=${NPM_RELEASE_TAG:-latest} && git restore package.json

scripts/publish-library-npm.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+./node_modules/.bin/npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
+
+NPM_RELEASE_TAG=$(cat package.json | jq .version --raw-output | rg '.*-(?P<channel>\w+).*' -r '$channel' | cat)
+
+npm publish --access=public --tag=${NPM_RELEASE_TAG:-latest}

src/common/cluster/cluster.ts

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import { action, comparer, computed, makeObservable, observable, reaction, when } from "mobx";
+import { action, comparer, computed, makeObservable, observable, reaction, runInAction, when } from "mobx";
 import type { ClusterContextHandler } from "../../main/context-handler/context-handler";
 import type { KubeConfig } from "@kubernetes/client-node";
 import { HttpError } from "@kubernetes/client-node";
@@ -11,13 +11,10 @@ import type { Kubectl } from "../../main/kubectl/kubectl";
 import type { KubeconfigManager } from "../../main/kubeconfig-manager/kubeconfig-manager";
 import type { KubeApiResource, KubeApiResourceDescriptor } from "../rbac";
 import { formatKubeApiResource } from "../rbac";
-import type { VersionDetector } from "../../main/cluster-detectors/version-detector";
-import type { DetectorRegistry } from "../../main/cluster-detectors/detector-registry";
 import plimit from "p-limit";
 import type { ClusterState, ClusterMetricsResourceType, ClusterId, ClusterMetadata, ClusterModel, ClusterPreferences, ClusterPrometheusPreferences, UpdateClusterModel, KubeAuthUpdate, ClusterConfigData } from "../cluster-types";
 import { ClusterMetadataKey, initialNodeShellImage, ClusterStatus, clusterModelIdChecker, updateClusterModelChecker } from "../cluster-types";
 import { disposer, isDefined, isRequestError, toJS } from "../utils";
-import type { Response } from "request";
 import { clusterListNamespaceForbiddenChannel } from "../ipc/cluster";
 import type { CanI } from "./authorization-review.injectable";
 import type { ListNamespaces } from "./list-namespaces.injectable";
@@ -27,11 +24,14 @@ import type { BroadcastMessage } from "../ipc/broadcast-message.injectable";
 import type { LoadConfigfromFile } from "../kube-helpers/load-config-from-file.injectable";
 import type { CanListResource, RequestNamespaceListPermissions, RequestNamespaceListPermissionsFor } from "./request-namespace-list-permissions.injectable";
 import type { RequestApiResources } from "../../main/cluster/request-api-resources.injectable";
+import type { DetectClusterMetadata } from "../../main/cluster-detectors/detect-cluster-metadata.injectable";
+import type { FalibleOnlyClusterMetadataDetector } from "../../main/cluster-detectors/token";
 
 export interface ClusterDependencies {
   readonly directoryForKubeConfigs: string;
   readonly logger: Logger;
-  readonly detectorRegistry: DetectorRegistry;
+  readonly clusterVersionDetector: FalibleOnlyClusterMetadataDetector;
+  detectClusterMetadata: DetectClusterMetadata;
   createKubeconfigManager: (cluster: Cluster) => KubeconfigManager;
   createContextHandler: (cluster: Cluster) => ClusterContextHandler;
   createKubectl: (clusterVersion: string) => Kubectl;
@@ -39,7 +39,6 @@ export interface ClusterDependencies {
   requestApiResources: RequestApiResources;
   requestNamespaceListPermissionsFor: RequestNamespaceListPermissionsFor;
   createListNamespaces: (config: KubeConfig) => ListNamespaces;
-  createVersionDetector: (cluster: Cluster) => VersionDetector;
   broadcastMessage: BroadcastMessage;
   loadConfigfromFile: LoadConfigfromFile;
 }
@@ -455,10 +454,15 @@ export class Cluster implements ClusterModel {
   */
   async refreshMetadata() {
     this.dependencies.logger.info(`[CLUSTER]: refreshMetadata`, this.getMeta());
-     const metadata = await this.dependencies.detectorRegistry.detectForCluster(this);
-     const existingMetadata = this.metadata;
 
-     this.metadata = Object.assign(existingMetadata, metadata);
+    const newMetadata = await this.dependencies.detectClusterMetadata(this);
+
+    runInAction(() => {
+      this.metadata = {
+        ...this.metadata,
+        ...newMetadata,
+      };
+    });
   }
 
   /**
@@ -521,8 +525,7 @@ export class Cluster implements ClusterModel {
 
   protected async getConnectionStatus(): Promise<ClusterStatus> {
     try {
-      const versionDetector = this.dependencies.createVersionDetector(this);
+      const versionData = await this.dependencies.clusterVersionDetector.detect(this);
-      const versionData = await versionDetector.detect();
 
       this.metadata.version = versionData.value;
 
@@ -560,6 +563,8 @@ export class Cluster implements ClusterModel {
         const message = String(error.error || error.message) || String(error);
 
         this.broadcastConnectUpdate(message, true);
+      } else if (error instanceof Error || typeof error === "string") {
+        this.broadcastConnectUpdate(`${error}`, true);
       } else {
         this.broadcastConnectUpdate("Unknown error has occurred", true);
       }
@@ -652,7 +657,7 @@ export class Cluster implements ClusterModel {
       const namespaceList = [ctx?.namespace].filter(isDefined);
 
       if (namespaceList.length === 0 && error instanceof HttpError && error.statusCode === 403) {
-        const { response } = error as HttpError & { response: Response };
+        const { response } = error as HttpError & { response: { body: unknown }};
 
         this.dependencies.logger.info("[CLUSTER]: listing namespaces is forbidden, broadcasting", { clusterId: this.id, error: response.body });
         this.dependencies.broadcastMessage(clusterListNamespaceForbiddenChannel, this.id);

src/common/fetch/lens-fetch.global-override-for-injectable.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getGlobalOverrideForFunction } from "../test-utils/get-global-override-for-function";
+import lensFetchInjectable from "./lens-fetch.injectable";
+
+export default getGlobalOverrideForFunction(lensFetchInjectable);

src/common/fetch/lens-fetch.injectable.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import { Agent } from "https";
+import type { RequestInit, Response } from "node-fetch";
+import lensProxyPortInjectable from "../../main/lens-proxy/lens-proxy-port.injectable";
+import lensProxyCertificateInjectable from "../certificate/lens-proxy-certificate.injectable";
+import nodeFetchModuleInjectable from "./fetch-module.injectable";
+
+export type LensRequestInit = Omit<RequestInit, "agent">;
+
+export type LensFetch = (pathnameAndQuery: string, init?: LensRequestInit) => Promise<Response>;
+
+const lensFetchInjectable = getInjectable({
+  id: "lens-fetch",
+  instantiate: (di): LensFetch => {
+    const { default: fetch } = di.inject(nodeFetchModuleInjectable);
+    const lensProxyPort = di.inject(lensProxyPortInjectable);
+    const lensProxyCertificate = di.inject(lensProxyCertificateInjectable);
+
+    return async (pathnameAndQuery, init = {}) => {
+      const agent = new Agent({
+        ca: lensProxyCertificate.get().cert,
+      });
+
+      return fetch(`https://127.0.0.1:${lensProxyPort.get()}${pathnameAndQuery}`, {
+        ...init,
+        agent,
+      });
+    };
+  },
+  causesSideEffects: true,
+});
+
+export default lensFetchInjectable;

src/common/utils/type-narrowing.ts

@@ -130,7 +130,7 @@ export function isFunction(val: unknown): val is (...args: unknown[]) => unknown
 /**
  * Checks if the value in the second position is non-nullable
  */
-export function hasDefinedTupleValue<K, V>(pair: [K, V | undefined | null]): pair is [K, V] {
+export function hasDefinedTupleValue<K, V>(pair: readonly [K, V | undefined | null]): pair is [K, V] {
   return pair[1] != null;
 }
 

src/common/vars/extension-api-version.global-override-for-injectable.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getGlobalOverride } from "../test-utils/get-global-override";
+import extensionApiVersionInjectable from "./extension-api-version.injectable";
+
+export default getGlobalOverride(extensionApiVersionInjectable, () => "6.0.0");

src/common/vars/extension-api-version.injectable.ts

@@ -4,15 +4,16 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import { SemVer } from "semver";
-import applicationInformationToken from "./application-information-token";
+import packageJson from "../../../package.json";
 
 const extensionApiVersionInjectable = getInjectable({
   id: "extension-api-version",
-  instantiate: (di) => {
+  instantiate: () => {
-    const { major, minor, patch } = new SemVer(di.inject(applicationInformationToken).version);
+    const { major, minor, patch } = new SemVer(packageJson.version);
 
     return `${major}.${minor}.${patch}`;
   },
+  causesSideEffects: true,
 });
 
 export default extensionApiVersionInjectable;

src/extensions/common-api/k8s-api.ts

@@ -31,6 +31,7 @@ import type { JsonApiConfig } from "../../common/k8s-api/json-api";
 import type { KubeJsonApi as InternalKubeJsonApi } from "../../common/k8s-api/kube-json-api";
 import createKubeJsonApiInjectable from "../../common/k8s-api/create-kube-json-api.injectable";
 import type { RequestInit } from "node-fetch";
+import createKubeJsonApiForClusterInjectable from "../../common/k8s-api/create-kube-json-api-for-cluster.injectable";
 
 export const apiManager = asLegacyGlobalForExtensionApi(apiManagerInjectable);
 export const forCluster = asLegacyGlobalFunctionForExtensionApi(createKubeApiForClusterInjectable);
@@ -125,7 +126,7 @@ function KubeJsonApiCstr(config: JsonApiConfig, reqInit?: RequestInit) {
 export const KubeJsonApi = Object.assign(
   KubeJsonApiCstr as unknown as new (config: JsonApiConfig, reqInit?: RequestInit) => InternalKubeJsonApi,
   {
-    forCluster,
+    forCluster: asLegacyGlobalForExtensionApi(createKubeJsonApiForClusterInjectable),
   },
 );
 

src/features/cluster/kube-object-details/extension-api/__snapshots__/disable-kube-object-detail-items-when-cluster-is-not-relevant.test.tsx.snap

@@ -54,21 +54,6 @@ exports[`disable kube object detail items when cluster is not relevant given ext
         <div
           class="drawer-content flex column box grow"
         >
-          <div
-            class="DrawerItem"
-          >
-            <span
-              class="name"
-            >
-              Created
-            </span>
-            <span
-              class="value"
-            >
-              &lt;unknown&gt;
-               ago 
-            </span>
-          </div>
           <div
             class="DrawerItem"
           >
@@ -104,12 +89,17 @@ exports[`disable kube object detail items when cluster is not relevant given ext
           </div>
           <div>
             <div
-              class="DrawerTitle flex gaps align-center title"
+              class="DrawerTitle title"
             >
               <span>
                 Events
               </span>
             </div>
+            <div
+              class="empty"
+            >
+              No events found
+            </div>
           </div>
         </div>
       </div>
@@ -680,21 +670,6 @@ exports[`disable kube object detail items when cluster is not relevant given ext
         <div
           class="drawer-content flex column box grow"
         >
-          <div
-            class="DrawerItem"
-          >
-            <span
-              class="name"
-            >
-              Created
-            </span>
-            <span
-              class="value"
-            >
-              &lt;unknown&gt;
-               ago 
-            </span>
-          </div>
           <div
             class="DrawerItem"
           >
@@ -725,12 +700,17 @@ exports[`disable kube object detail items when cluster is not relevant given ext
           </div>
           <div>
             <div
-              class="DrawerTitle flex gaps align-center title"
+              class="DrawerTitle title"
             >
               <span>
                 Events
               </span>
             </div>
+            <div
+              class="empty"
+            >
+              No events found
+            </div>
           </div>
         </div>
       </div>
@@ -1301,21 +1281,6 @@ exports[`disable kube object detail items when cluster is not relevant given not
         <div
           class="drawer-content flex column box grow"
         >
-          <div
-            class="DrawerItem"
-          >
-            <span
-              class="name"
-            >
-              Created
-            </span>
-            <span
-              class="value"
-            >
-              &lt;unknown&gt;
-               ago 
-            </span>
-          </div>
           <div
             class="DrawerItem"
           >
@@ -1346,12 +1311,17 @@ exports[`disable kube object detail items when cluster is not relevant given not
           </div>
           <div>
             <div
-              class="DrawerTitle flex gaps align-center title"
+              class="DrawerTitle title"
             >
               <span>
                 Events
               </span>
             </div>
+            <div
+              class="empty"
+            >
+              No events found
+            </div>
           </div>
         </div>
       </div>

src/features/cluster/kube-object-details/extension-api/__snapshots__/reactively-hide-kube-object-detail-item.test.tsx.snap

@@ -54,21 +54,6 @@ exports[`reactively hide kube object detail item renders 1`] = `
         <div
           class="drawer-content flex column box grow"
         >
-          <div
-            class="DrawerItem"
-          >
-            <span
-              class="name"
-            >
-              Created
-            </span>
-            <span
-              class="value"
-            >
-              &lt;unknown&gt;
-               ago 
-            </span>
-          </div>
           <div
             class="DrawerItem"
           >
@@ -99,12 +84,17 @@ exports[`reactively hide kube object detail item renders 1`] = `
           </div>
           <div>
             <div
-              class="DrawerTitle flex gaps align-center title"
+              class="DrawerTitle title"
             >
               <span>
                 Events
               </span>
             </div>
+            <div
+              class="empty"
+            >
+              No events found
+            </div>
           </div>
         </div>
       </div>
@@ -675,21 +665,6 @@ exports[`reactively hide kube object detail item when the item is shown renders
         <div
           class="drawer-content flex column box grow"
         >
-          <div
-            class="DrawerItem"
-          >
-            <span
-              class="name"
-            >
-              Created
-            </span>
-            <span
-              class="value"
-            >
-              &lt;unknown&gt;
-               ago 
-            </span>
-          </div>
           <div
             class="DrawerItem"
           >
@@ -725,12 +700,17 @@ exports[`reactively hide kube object detail item when the item is shown renders
           </div>
           <div>
             <div
-              class="DrawerTitle flex gaps align-center title"
+              class="DrawerTitle title"
             >
               <span>
                 Events
               </span>
             </div>
+            <div
+              class="empty"
+            >
+              No events found
+            </div>
           </div>
         </div>
       </div>

src/features/helm-charts/upgrade-chart/__snapshots__/upgrade-chart-new-tab.test.ts.snap

@@ -1375,11 +1375,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   my-second-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    my-second-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -2172,11 +2178,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   my-second-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    my-second-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -2985,11 +2997,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   my-second-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    my-second-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -3834,11 +3852,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   my-second-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    my-second-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -4823,11 +4847,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   my-second-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    my-second-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -5814,11 +5844,17 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   my-second-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    my-second-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"

src/features/helm-releases/__snapshots__/showing-details-for-helm-release.test.ts.snap

@@ -2242,11 +2242,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -2328,11 +2334,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -3206,11 +3218,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -3292,11 +3310,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -4231,11 +4255,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -4317,11 +4347,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -5256,11 +5292,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -5342,11 +5384,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -6526,11 +6574,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -6612,11 +6666,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -7796,11 +7856,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -7882,11 +7948,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -11242,11 +11314,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -11328,11 +11406,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -12512,11 +12596,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -12598,11 +12688,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -13537,11 +13633,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -13623,11 +13725,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -14565,11 +14673,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -14651,11 +14765,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -15529,11 +15649,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -15615,11 +15741,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -16554,11 +16686,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"
@@ -16640,11 +16778,17 @@ exports[`showing details for helm release given application is started when navi
                               <div
                                 class="TableCell namespace"
                               >
-                                <a
+                                <div
-                                  class="filterNamespace"
+                                  class="badge NamespaceSelectBadge flat clickable"
                                 >
                                   some-other-namespace
-                                </a>
+                                </div>
+                                <div>
+                                  Set global namespace filter to:
+                                  <b>
+                                    some-other-namespace
+                                  </b>
+                                </div>
                               </div>
                               <div
                                 class="TableCell chart"

src/main/cluster-detectors/base-cluster-detector.ts

@@ -1,25 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import type { RequestPromiseOptions } from "request-promise-native";
-import type { Cluster } from "../../common/cluster/cluster";
-import type { K8sRequest } from "../k8s-request.injectable";
-
-export interface ClusterDetectionResult {
-  value: string | number | boolean;
-  accuracy: number;
-}
-
-export abstract class BaseClusterDetector {
-  abstract readonly key: string;
-
-  constructor(public readonly cluster: Cluster, private _k8sRequest: K8sRequest) {}
-
-  abstract detect(): Promise<ClusterDetectionResult | null>;
-
-  protected async k8sRequest<T = any>(path: string, options: RequestPromiseOptions = {}): Promise<T> {
-    return this._k8sRequest(this.cluster, path, options);
-  }
-}

src/main/cluster-detectors/cluster-distribution-detector.injectable.ts

@@ -0,0 +1,141 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { clusterMetadataDetectorInjectionToken } from "./token";
+import { ClusterMetadataKey } from "../../common/cluster-types";
+import { getInjectable } from "@ogre-tools/injectable";
+import k8SRequestInjectable from "../k8s-request.injectable";
+import type { Cluster } from "../../common/cluster/cluster";
+import requestClusterVersionInjectable from "./request-cluster-version.injectable";
+
+const isGKE = (version: string) => version.includes("gke");
+const isEKS = (version: string) => version.includes("eks");
+const isIKS = (version: string) => version.includes("IKS");
+const isAKS = (cluster: Cluster) => cluster.apiUrl.includes("azmk8s.io");
+const isMirantis = (version: string) => version.includes("-mirantis-") || version.includes("-docker-");
+const isDigitalOcean = (cluster: Cluster) => cluster.apiUrl.endsWith("k8s.ondigitalocean.com");
+const isMinikube = (cluster: Cluster) => cluster.contextName.startsWith("minikube");
+const isMicrok8s = (cluster: Cluster) => cluster.contextName.startsWith("microk8s");
+const isKind = (cluster: Cluster) => cluster.contextName.startsWith("kubernetes-admin@kind-");
+const isDockerDesktop = (cluster: Cluster) => cluster.contextName === "docker-desktop";
+const isTke = (version: string) => version.includes("-tke.");
+const isCustom = (version: string) => version.includes("+");
+const isVMWare = (version: string) => version.includes("+vmware");
+const isRke = (version: string) => version.includes("-rancher");
+const isRancherDesktop = (cluster: Cluster) => cluster.contextName === "rancher-desktop";
+const isK3s = (version: string) => version.includes("+k3s");
+const isK0s = (version: string) => version.includes("-k0s") || version.includes("+k0s");
+const isAlibaba = (version: string) => version.includes("-aliyun");
+const isHuawei = (version: string) => version.includes("-CCE");
+
+const clusterDistributionDetectorInjectable = getInjectable({
+  id: "cluster-distribution-detector",
+  instantiate: (di) => {
+    const k8sRequest = di.inject(k8SRequestInjectable);
+    const requestClusterVersion = di.inject(requestClusterVersionInjectable);
+    const isOpenshift = async (cluster: Cluster) => {
+      try {
+        const { paths = [] } = await k8sRequest(cluster, "") as { paths?: string[] };
+
+        return paths.includes("/apis/project.openshift.io");
+      } catch (e) {
+        return false;
+      }
+    };
+
+    return {
+      key: ClusterMetadataKey.DISTRIBUTION,
+      detect: async (cluster) => {
+        const version = await requestClusterVersion(cluster);
+
+        if (isRke(version)) {
+          return { value: "rke", accuracy: 80 };
+        }
+
+        if (isRancherDesktop(cluster)) {
+          return { value: "rancher-desktop", accuracy: 80 };
+        }
+
+        if (isK3s(version)) {
+          return { value: "k3s", accuracy: 80 };
+        }
+
+        if (isGKE(version)) {
+          return { value: "gke", accuracy: 80 };
+        }
+
+        if (isEKS(version)) {
+          return { value: "eks", accuracy: 80 };
+        }
+
+        if (isIKS(version)) {
+          return { value: "iks", accuracy: 80 };
+        }
+
+        if (isAKS(cluster)) {
+          return { value: "aks", accuracy: 80 };
+        }
+
+        if (isDigitalOcean(cluster)) {
+          return { value: "digitalocean", accuracy: 90 };
+        }
+
+        if (isK0s(version)) {
+          return { value: "k0s", accuracy: 80 };
+        }
+
+        if (isVMWare(version)) {
+          return { value: "vmware", accuracy: 90 };
+        }
+
+        if (isMirantis(version)) {
+          return { value: "mirantis", accuracy: 90 };
+        }
+
+        if (isAlibaba(version)) {
+          return { value: "alibaba", accuracy: 90 };
+        }
+
+        if (isHuawei(version)) {
+          return { value: "huawei", accuracy: 90 };
+        }
+
+        if (isTke(version)) {
+          return { value: "tencent", accuracy: 90 };
+        }
+
+        if (isMinikube(cluster)) {
+          return { value: "minikube", accuracy: 80 };
+        }
+
+        if (isMicrok8s(cluster)) {
+          return { value: "microk8s", accuracy: 80 };
+        }
+
+        if (isKind(cluster)) {
+          return { value: "kind", accuracy: 70 };
+        }
+
+        if (isDockerDesktop(cluster)) {
+          return { value: "docker-desktop", accuracy: 80 };
+        }
+
+        if (isCustom(version)) {
+          if (await isOpenshift(cluster)) {
+            return { value: "openshift", accuracy: 90 };
+          }
+
+          return { value: "custom", accuracy: 10 };
+        }
+
+        return { value: "unknown", accuracy: 10 };
+      },
+    };
+  },
+  injectionToken: clusterMetadataDetectorInjectionToken,
+});
+
+export default clusterDistributionDetectorInjectable;
+

src/main/cluster-detectors/cluster-id-detector.injectable.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { clusterMetadataDetectorInjectionToken } from "./token";
+import { createHash } from "crypto";
+import { ClusterMetadataKey } from "../../common/cluster-types";
+import { getInjectable } from "@ogre-tools/injectable";
+import k8SRequestInjectable from "../k8s-request.injectable";
+import type { Cluster } from "../../common/cluster/cluster";
+
+const clusterIdDetectorFactoryInjectable = getInjectable({
+  id: "cluster-id-detector-factory",
+  instantiate: (di) => {
+    const k8sRequest = di.inject(k8SRequestInjectable);
+    const getDefaultNamespaceId = async (cluster: Cluster) => {
+      const { metadata } = await k8sRequest(cluster, "/api/v1/namespaces/default") as { metadata: { uid: string }};
+
+      return metadata.uid;
+    };
+
+    return {
+      key: ClusterMetadataKey.CLUSTER_ID,
+      detect: async (cluster) => {
+        let id: string;
+
+        try {
+          id = await getDefaultNamespaceId(cluster);
+        } catch(_) {
+          id = cluster.apiUrl;
+        }
+        const value = createHash("sha256").update(id).digest("hex");
+
+        return { value, accuracy: 100 };
+      },
+    };
+  },
+  injectionToken: clusterMetadataDetectorInjectionToken,
+});
+
+export default clusterIdDetectorFactoryInjectable;
+

src/main/cluster-detectors/cluster-id-detector.ts

@@ -1,31 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { BaseClusterDetector } from "./base-cluster-detector";
-import { createHash } from "crypto";
-import { ClusterMetadataKey } from "../../common/cluster-types";
-
-export class ClusterIdDetector extends BaseClusterDetector {
-  key = ClusterMetadataKey.CLUSTER_ID;
-
-  public async detect() {
-    let id: string;
-
-    try {
-      id = await this.getDefaultNamespaceId();
-    } catch(_) {
-      id = this.cluster.apiUrl;
-    }
-    const value = createHash("sha256").update(id).digest("hex");
-
-    return { value, accuracy: 100 };
-  }
-
-  protected async getDefaultNamespaceId() {
-    const response = await this.k8sRequest("/api/v1/namespaces/default");
-
-    return response.metadata.uid;
-  }
-}

src/main/cluster-detectors/cluster-last-seen-detector.injectable.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { clusterMetadataDetectorInjectionToken } from "./token";
+import { ClusterMetadataKey } from "../../common/cluster-types";
+import { getInjectable } from "@ogre-tools/injectable";
+import requestClusterVersionInjectable from "./request-cluster-version.injectable";
+
+const clusterLastSeenDetectorInjectable = getInjectable({
+  id: "cluster-last-seen-detector",
+  instantiate: (di) => {
+    const requestClusterVersion = di.inject(requestClusterVersionInjectable);
+
+    return {
+      key: ClusterMetadataKey.LAST_SEEN,
+      detect: async (cluster) => {
+        try {
+          await requestClusterVersion(cluster);
+
+          return { value: new Date().toJSON(), accuracy: 100 };
+        } catch {
+          return null;
+        }
+      },
+    };
+  },
+  injectionToken: clusterMetadataDetectorInjectionToken,
+});
+
+export default clusterLastSeenDetectorInjectable;

src/main/cluster-detectors/cluster-nodes-count-detector.injectable.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { clusterMetadataDetectorInjectionToken } from "./token";
+import { ClusterMetadataKey } from "../../common/cluster-types";
+import { getInjectable } from "@ogre-tools/injectable";
+import k8SRequestInjectable from "../k8s-request.injectable";
+import type { Cluster } from "../../common/cluster/cluster";
+
+const clusterNodeCountDetectorInjectable = getInjectable({
+  id: "cluster-node-count-detector",
+  instantiate: (di) => {
+    const k8sRequest = di.inject(k8SRequestInjectable);
+    const requestNodeCount = async (cluster: Cluster) => {
+      const { items } = await k8sRequest(cluster, "/api/v1/nodes") as { items: unknown[] };
+
+      return items.length;
+    };
+
+    return {
+      key: ClusterMetadataKey.NODES_COUNT,
+      detect: async (cluster) => {
+        try {
+          return {
+            value: await requestNodeCount(cluster),
+            accuracy: 1000,
+          };
+        } catch {
+          return null;
+        }
+      },
+    };
+  },
+  injectionToken: clusterMetadataDetectorInjectionToken,
+});
+
+export default clusterNodeCountDetectorInjectable;
+

src/main/cluster-detectors/cluster-version-detector.injectable.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { clusterMetadataDetectorInjectionToken } from "./token";
+import { ClusterMetadataKey } from "../../common/cluster-types";
+import { getInjectable } from "@ogre-tools/injectable";
+import requestClusterVersionInjectable from "./request-cluster-version.injectable";
+
+const clusterVersionDetectorInjectable = getInjectable({
+  id: "cluster-version-detector",
+  instantiate: (di) => {
+    const requestClusterVersion = di.inject(requestClusterVersionInjectable);
+
+    return {
+      key: ClusterMetadataKey.VERSION,
+      detect: async (cluster) => ({
+        value: await requestClusterVersion(cluster),
+        accuracy: 100,
+      }),
+    };
+  },
+  injectionToken: clusterMetadataDetectorInjectionToken,
+});
+
+export default clusterVersionDetectorInjectable;
+

src/main/cluster-detectors/create-version-detector.injectable.ts

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import { VersionDetector } from "./version-detector";
-import k8sRequestInjectable from "../k8s-request.injectable";
-import type { Cluster } from "../../common/cluster/cluster";
-
-const createVersionDetectorInjectable = getInjectable({
-  id: "create-version-detector",
-
-  instantiate: (di) => {
-    const k8sRequest = di.inject(k8sRequestInjectable);
-
-    return (cluster: Cluster) =>
-      new VersionDetector(cluster, k8sRequest);
-  },
-});
-
-export default createVersionDetectorInjectable;

src/main/cluster-detectors/detect-cluster-metadata.injectable.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { pipeline } from "@ogre-tools/fp";
+import { getInjectable } from "@ogre-tools/injectable";
+import { groupBy, reduce } from "lodash";
+import { filter, map } from "lodash/fp";
+import type { ClusterMetadata } from "../../common/cluster-types";
+import type { Cluster } from "../../common/cluster/cluster";
+import { hasDefinedTupleValue, isDefined, object } from "../../common/utils";
+import type { ClusterDetectionResult, ClusterMetadataDetector } from "./token";
+import { clusterMetadataDetectorInjectionToken } from "./token";
+
+export type DetectClusterMetadata = (cluster: Cluster) => Promise<ClusterMetadata>;
+
+const pickHighestAccuracy = (prev: ClusterDetectionResult, curr: ClusterDetectionResult) => (
+  prev.accuracy > curr.accuracy
+    ? prev
+    : curr
+);
+
+const detectMetadataWithFor = (cluster: Cluster) => async (clusterMetadataDetector: ClusterMetadataDetector) => {
+  try {
+    return await clusterMetadataDetector.detect(cluster);
+  } catch {
+    return null;
+  }
+};
+
+const detectClusterMetadataInjectable = getInjectable({
+  id: "detect-cluster-metadata",
+  instantiate: (di): DetectClusterMetadata => {
+    const clusterMetadataDetectors = di.injectMany(clusterMetadataDetectorInjectionToken);
+
+    return async (cluster) => {
+      const entries = pipeline(
+        await Promise.all(clusterMetadataDetectors.map(detectMetadataWithFor(cluster))),
+        filter(isDefined),
+        (arg) => groupBy(arg, "key"),
+        (arg) => object.entries(arg),
+        map(([ key, results ]) => [key, reduce(results, pickHighestAccuracy)] as const),
+        filter(hasDefinedTupleValue),
+      );
+
+      return object.fromEntries(entries);
+    };
+  },
+});
+
+export default detectClusterMetadataInjectable;

src/main/cluster-detectors/detector-registry.injectable.ts

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import { DetectorRegistry } from "./detector-registry";
-import k8sRequestInjectable from "../k8s-request.injectable";
-
-const detectorRegistryInjectable = getInjectable({
-  id: "detector-registry",
-
-  instantiate: (di) =>
-    new DetectorRegistry({ k8sRequest: di.inject(k8sRequestInjectable) }),
-});
-
-export default detectorRegistryInjectable;

src/main/cluster-detectors/detector-registry.ts

@@ -1,55 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { observable } from "mobx";
-import type { ClusterMetadata } from "../../common/cluster-types";
-import type { Cluster } from "../../common/cluster/cluster";
-import type { BaseClusterDetector, ClusterDetectionResult } from "./base-cluster-detector";
-import type { K8sRequest } from "../k8s-request.injectable";
-
-interface Dependencies {
-  k8sRequest: K8sRequest;
-}
-
-export type DetectorConstructor = new (cluster: Cluster, k8sRequest: K8sRequest) => BaseClusterDetector;
-
-export class DetectorRegistry {
-  constructor(private dependencies: Dependencies) {}
-
-  registry = observable.array<DetectorConstructor>([], { deep: false });
-
-  add(detectorClass: DetectorConstructor): this {
-    this.registry.push(detectorClass);
-
-    return this;
-  }
-
-  async detectForCluster(cluster: Cluster): Promise<ClusterMetadata> {
-    const results: { [key: string]: ClusterDetectionResult } = {};
-
-    for (const detectorClass of this.registry) {
-      const detector = new detectorClass(cluster, this.dependencies.k8sRequest);
-
-      try {
-        const data = await detector.detect();
-
-        if (!data) continue;
-        const existingValue = results[detector.key];
-
-        if (existingValue && existingValue.accuracy > data.accuracy) continue; // previous value exists and is more accurate
-        results[detector.key] = data;
-      } catch (e) {
-        // detector raised error, do nothing
-      }
-    }
-    const metadata: ClusterMetadata = {};
-
-    for (const [key, result] of Object.entries(results)) {
-      metadata[key] = result.value;
-    }
-
-    return metadata;
-  }
-}

src/main/cluster-detectors/distribution-detector.ts

@@ -1,189 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { BaseClusterDetector } from "./base-cluster-detector";
-import { ClusterMetadataKey } from "../../common/cluster-types";
-
-export class DistributionDetector extends BaseClusterDetector {
-  key = ClusterMetadataKey.DISTRIBUTION;
-
-  public async detect() {
-    const version = await this.getKubernetesVersion();
-
-    if (this.isRke(version)) {
-      return { value: "rke", accuracy: 80 };
-    }
-
-    if (this.isRancherDesktop()) {
-      return { value: "rancher-desktop", accuracy: 80 };
-    }
-
-    if (this.isK3s(version)) {
-      return { value: "k3s", accuracy: 80 };
-    }
-
-    if (this.isGKE(version)) {
-      return { value: "gke", accuracy: 80 };
-    }
-
-    if (this.isEKS(version)) {
-      return { value: "eks", accuracy: 80 };
-    }
-
-    if (this.isIKS(version)) {
-      return { value: "iks", accuracy: 80 };
-    }
-
-    if (this.isAKS()) {
-      return { value: "aks", accuracy: 80 };
-    }
-
-    if (this.isDigitalOcean()) {
-      return { value: "digitalocean", accuracy: 90 };
-    }
-
-    if (this.isK0s(version)) {
-      return { value: "k0s", accuracy: 80 };
-    }
-
-    if (this.isVMWare(version)) {
-      return { value: "vmware", accuracy: 90 };
-    }
-
-    if (this.isMirantis(version)) {
-      return { value: "mirantis", accuracy: 90 };
-    }
-
-    if (this.isAlibaba(version)) {
-      return { value: "alibaba", accuracy: 90 };
-    }
-
-    if (this.isHuawei(version)) {
-      return { value: "huawei", accuracy: 90 };
-    }
-
-    if (this.isTke(version)) {
-      return { value: "tencent", accuracy: 90 };
-    }
-
-    if (this.isMinikube()) {
-      return { value: "minikube", accuracy: 80 };
-    }
-
-    if (this.isMicrok8s()) {
-      return { value: "microk8s", accuracy: 80 };
-    }
-
-    if (this.isKind()) {
-      return { value: "kind", accuracy: 70 };
-    }
-
-    if (this.isDockerDesktop()) {
-      return { value: "docker-desktop", accuracy: 80 };
-    }
-
-    if (this.isCustom(version) && await this.isOpenshift()) {
-      return { value: "openshift", accuracy: 90 };
-    }
-
-    if (this.isCustom(version)) {
-      return { value: "custom", accuracy: 10 };
-    }
-
-    return { value: "unknown", accuracy: 10 };
-  }
-
-  public async getKubernetesVersion() {
-    const response = await this.k8sRequest("/version");
-
-    return response.gitVersion;
-  }
-
-  protected isGKE(version: string) {
-    return version.includes("gke");
-  }
-
-  protected isEKS(version: string) {
-    return version.includes("eks");
-  }
-
-  protected isIKS(version: string) {
-    return version.includes("IKS");
-  }
-
-  protected isAKS() {
-    return this.cluster.apiUrl.includes("azmk8s.io");
-  }
-
-  protected isMirantis(version: string) {
-    return version.includes("-mirantis-") || version.includes("-docker-");
-  }
-
-  protected isDigitalOcean() {
-    return this.cluster.apiUrl.endsWith("k8s.ondigitalocean.com");
-  }
-
-  protected isMinikube() {
-    return this.cluster.contextName.startsWith("minikube");
-  }
-
-  protected isMicrok8s() {
-    return this.cluster.contextName.startsWith("microk8s");
-  }
-
-  protected isKind() {
-    return this.cluster.contextName.startsWith("kubernetes-admin@kind-");
-  }
-
-  protected isDockerDesktop() {
-    return this.cluster.contextName === "docker-desktop";
-  }
-
-  protected isTke(version: string) {
-    return version.includes("-tke.");
-  }
-
-  protected isCustom(version: string) {
-    return version.includes("+");
-  }
-
-  protected isVMWare(version: string) {
-    return version.includes("+vmware");
-  }
-
-  protected isRke(version: string) {
-    return version.includes("-rancher");
-  }
-
-  protected isRancherDesktop() {
-    return this.cluster.contextName === "rancher-desktop";
-  }
-
-  protected isK3s(version: string) {
-    return version.includes("+k3s");
-  }
-
-  protected isK0s(version: string) {
-    return version.includes("-k0s") || version.includes("+k0s");
-  }
-
-  protected isAlibaba(version: string) {
-    return version.includes("-aliyun");
-  }
-
-  protected isHuawei(version: string) {
-    return version.includes("-CCE");
-  }
-
-  protected async isOpenshift() {
-    try {
-      const response = await this.k8sRequest("");
-
-      return response.paths?.includes("/apis/project.openshift.io");
-    } catch (e) {
-      return false;
-    }
-  }
-}

src/main/cluster-detectors/last-seen-detector.ts

@@ -1,19 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { BaseClusterDetector } from "./base-cluster-detector";
-import { ClusterMetadataKey } from "../../common/cluster-types";
-
-export class LastSeenDetector extends BaseClusterDetector {
-  key = ClusterMetadataKey.LAST_SEEN;
-
-  public async detect() {
-    if (!this.cluster.accessible) return null;
-
-    await this.k8sRequest("/version");
-
-    return { value: new Date().toJSON(), accuracy: 100 };
-  }
-}

src/main/cluster-detectors/nodes-count-detector.ts

@@ -1,24 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { BaseClusterDetector } from "./base-cluster-detector";
-import { ClusterMetadataKey } from "../../common/cluster-types";
-
-export class NodesCountDetector extends BaseClusterDetector {
-  key = ClusterMetadataKey.NODES_COUNT;
-
-  public async detect() {
-    if (!this.cluster.accessible) return null;
-    const nodeCount = await this.getNodeCount();
-
-    return { value: nodeCount, accuracy: 100 };
-  }
-
-  protected async getNodeCount(): Promise<number> {
-    const response = await this.k8sRequest("/api/v1/nodes");
-
-    return response.items.length;
-  }
-}

src/main/cluster-detectors/request-cluster-version.injectable.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getInjectable } from "@ogre-tools/injectable";
+import type { Cluster } from "../../common/cluster/cluster";
+import k8SRequestInjectable from "../k8s-request.injectable";
+
+const requestClusterVersionInjectable = getInjectable({
+  id: "request-cluster-version",
+  instantiate: (di) => {
+    const k8sRequest = di.inject(k8SRequestInjectable);
+
+    return async (cluster: Cluster) => {
+      const { gitVersion } = await k8sRequest(cluster, "/version") as { gitVersion: string };
+
+      return gitVersion;
+    };
+  },
+});
+
+export default requestClusterVersionInjectable;

src/main/cluster-detectors/token.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { getInjectionToken } from "@ogre-tools/injectable";
+import type { Cluster } from "../../common/cluster/cluster";
+
+export interface ClusterDetectionResult {
+  value: string | number | boolean;
+  accuracy: number;
+}
+
+export interface FalibleOnlyClusterMetadataDetector {
+  readonly key: string;
+  detect(cluster: Cluster): Promise<ClusterDetectionResult>;
+}
+
+export interface ClusterMetadataDetector {
+  readonly key: string;
+  detect(cluster: Cluster): Promise<ClusterDetectionResult | null>;
+}
+
+export const clusterMetadataDetectorInjectionToken = getInjectionToken<ClusterMetadataDetector>({
+  id: "cluster-metadata-detector-token",
+});

src/main/cluster-detectors/version-detector.ts

@@ -1,23 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { BaseClusterDetector } from "./base-cluster-detector";
-import { ClusterMetadataKey } from "../../common/cluster-types";
-
-export class VersionDetector extends BaseClusterDetector {
-  key = ClusterMetadataKey.VERSION;
-
-  public async detect() {
-    const version = await this.getKubernetesVersion();
-
-    return { value: version, accuracy: 100 };
-  }
-
-  public async getKubernetesVersion() {
-    const response = await this.k8sRequest("/version");
-
-    return response.gitVersion;
-  }
-}

src/main/create-cluster/create-cluster.injectable.ts

@@ -14,11 +14,11 @@ import authorizationReviewInjectable from "../../common/cluster/authorization-re
 import listNamespacesInjectable from "../../common/cluster/list-namespaces.injectable";
 import createListApiResourcesInjectable from "../cluster/request-api-resources.injectable";
 import loggerInjectable from "../../common/logger.injectable";
-import detectorRegistryInjectable from "../cluster-detectors/detector-registry.injectable";
-import createVersionDetectorInjectable from "../cluster-detectors/create-version-detector.injectable";
 import broadcastMessageInjectable from "../../common/ipc/broadcast-message.injectable";
 import loadConfigfromFileInjectable from "../../common/kube-helpers/load-config-from-file.injectable";
 import requestNamespaceListPermissionsForInjectable from "../../common/cluster/request-namespace-list-permissions.injectable";
+import detectClusterMetadataInjectable from "../cluster-detectors/detect-cluster-metadata.injectable";
+import clusterVersionDetectorInjectable from "../cluster-detectors/cluster-version-detector.injectable";
 
 const createClusterInjectable = getInjectable({
   id: "create-cluster",
@@ -26,6 +26,8 @@ const createClusterInjectable = getInjectable({
   instantiate: (di) => {
     const dependencies: ClusterDependencies = {
       directoryForKubeConfigs: di.inject(directoryForKubeConfigsInjectable),
+      logger: di.inject(loggerInjectable),
+      clusterVersionDetector: di.inject(clusterVersionDetectorInjectable),
       createKubeconfigManager: di.inject(createKubeconfigManagerInjectable),
       createKubectl: di.inject(createKubectlInjectable),
       createContextHandler: di.inject(createContextHandlerInjectable),
@@ -33,11 +35,9 @@ const createClusterInjectable = getInjectable({
       requestNamespaceListPermissionsFor: di.inject(requestNamespaceListPermissionsForInjectable),
       requestApiResources: di.inject(createListApiResourcesInjectable),
       createListNamespaces: di.inject(listNamespacesInjectable),
-      logger: di.inject(loggerInjectable),
-      detectorRegistry: di.inject(detectorRegistryInjectable),
-      createVersionDetector: di.inject(createVersionDetectorInjectable),
       broadcastMessage: di.inject(broadcastMessageInjectable),
       loadConfigfromFile: di.inject(loadConfigfromFileInjectable),
+      detectClusterMetadata: di.inject(detectClusterMetadataInjectable),
     };
 
     return (model, configData) => new Cluster(dependencies, model, configData);

src/main/get-metrics.injectable.ts

@@ -4,16 +4,19 @@
  */
 import { getInjectable } from "@ogre-tools/injectable";
 import type { Cluster } from "../common/cluster/cluster";
+import nodeFetchModuleInjectable from "../common/fetch/fetch-module.injectable";
 import type { RequestMetricsParams } from "../common/k8s-api/endpoints/metrics.api/request-metrics.injectable";
+import { object } from "../common/utils";
 import k8sRequestInjectable from "./k8s-request.injectable";
 
-export type GetMetrics = (cluster: Cluster, prometheusPath: string, queryParams: RequestMetricsParams & { query: string }) => Promise<any>;
+export type GetMetrics = (cluster: Cluster, prometheusPath: string, queryParams: RequestMetricsParams & { query: string }) => Promise<unknown>;
 
 const getMetricsInjectable = getInjectable({
   id: "get-metrics",
 
   instantiate: (di): GetMetrics => {
     const k8sRequest = di.inject(k8sRequestInjectable);
+    const { FormData } = di.inject(nodeFetchModuleInjectable);
 
     return async (
       cluster,
@@ -22,13 +25,16 @@ const getMetricsInjectable = getInjectable({
     ) => {
       const prometheusPrefix = cluster.preferences.prometheus?.prefix || "";
       const metricsPath = `/api/v1/namespaces/${prometheusPath}/proxy${prometheusPrefix}/api/v1/query_range`;
+      const body = new FormData();
+
+      for (const [key, value] of object.entries(queryParams)) {
+        body.set(key, value.toString());
+      }
 
       return k8sRequest(cluster, metricsPath, {
         timeout: 0,
-        resolveWithFullResponse: false,
-        json: true,
         method: "POST",
-        form: queryParams,
+        body,
       });
     };
   },

src/main/k8s-request.injectable.ts

@@ -2,35 +2,49 @@
  * Copyright (c) OpenLens Authors. All rights reserved.
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
-import type { RequestPromiseOptions } from "request-promise-native";
-import request from "request-promise-native";
 import type { Cluster } from "../common/cluster/cluster";
 import { getInjectable } from "@ogre-tools/injectable";
-import lensProxyPortInjectable from "./lens-proxy/lens-proxy-port.injectable";
+import type { LensRequestInit } from "../common/fetch/lens-fetch.injectable";
-import lensProxyCertificateInjectable from "../common/certificate/lens-proxy-certificate.injectable";
+import lensFetchInjectable from "../common/fetch/lens-fetch.injectable";
+import { withTimeout } from "../common/fetch/timeout-controller";
 
-export type K8sRequest = (cluster: Cluster, path: string, options?: RequestPromiseOptions) => Promise<any>;
+export interface K8sRequestInit extends LensRequestInit {
+  timeout?: number;
+}
+
+export type K8sRequest = (cluster: Cluster, pathnameAndQuery: string, init?: K8sRequestInit) => Promise<unknown>;
 
 const k8sRequestInjectable = getInjectable({
   id: "k8s-request",
 
-  instantiate: (di) => {
+  instantiate: (di): K8sRequest => {
-    const lensProxyPort = di.inject(lensProxyPortInjectable);
+    const lensFetch = di.inject(lensFetchInjectable);
-    const lensProxyCertificate = di.inject(lensProxyCertificateInjectable);
 
     return async (
-      cluster: Cluster,
+      cluster,
-      path: string,
+      pathnameAndQuery,
-      options: RequestPromiseOptions = {},
+      {
+        timeout = 30_000,
+        signal,
+        ...init
+      } = {},
     ) => {
-      const kubeProxyUrl = `https://127.0.0.1:${lensProxyPort.get()}/${cluster.id}`;
+      const controller = timeout ? withTimeout(timeout) : undefined;
 
-      options.ca = lensProxyCertificate.get().cert;
+      if (controller) {
-      options.headers ??= {};
+        signal?.addEventListener("abort", () => controller.abort());
-      options.json ??= true;
+      }
-      options.timeout ??= 30000;
 
-      return request(kubeProxyUrl + path, options);
+      const response = await lensFetch(`/${cluster.id}${pathnameAndQuery}`, {
+        ...init,
+        signal: controller?.signal ?? signal,
+      });
+
+      if (response.status < 200 || response.status >= 300) {
+        throw new Error(`Failed to ${init.method ?? "get"} ${pathnameAndQuery} for clusterId=${cluster.id}: ${response.statusText}`, { cause: response });
+      }
+
+      return response.json();
     };
   },
 });

src/main/start-main-application/runnables/setup-detector-registry.injectable.ts

@@ -1,36 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-import { getInjectable } from "@ogre-tools/injectable";
-import { ClusterIdDetector } from "../../cluster-detectors/cluster-id-detector";
-import { LastSeenDetector } from "../../cluster-detectors/last-seen-detector";
-import { VersionDetector } from "../../cluster-detectors/version-detector";
-import { DistributionDetector } from "../../cluster-detectors/distribution-detector";
-import { NodesCountDetector } from "../../cluster-detectors/nodes-count-detector";
-import detectorRegistryInjectable from "../../cluster-detectors/detector-registry.injectable";
-import { onLoadOfApplicationInjectionToken } from "../runnable-tokens/on-load-of-application-injection-token";
-
-const setupDetectorRegistryInjectable = getInjectable({
-  id: "setup-detector-registry",
-
-  instantiate: (di) => {
-    const detectorRegistry = di.inject(detectorRegistryInjectable);
-
-    return {
-      id: "setup-detector-registry",
-      run: () => {
-        detectorRegistry
-          .add(ClusterIdDetector)
-          .add(LastSeenDetector)
-          .add(VersionDetector)
-          .add(DistributionDetector)
-          .add(NodesCountDetector);
-      },
-    };
-  },
-
-  injectionToken: onLoadOfApplicationInjectionToken,
-});
-
-export default setupDetectorRegistryInjectable;

src/renderer/cluster/create-cluster.injectable.ts

@@ -29,9 +29,12 @@ const createClusterInjectable = getInjectable({
       createAuthorizationReview: () => { throw new Error("Tried to access back-end feature in front-end."); },
       requestNamespaceListPermissionsFor: () => { throw new Error("Tried to access back-end feature in front-end."); },
       createListNamespaces: () => { throw new Error("Tried to access back-end feature in front-end."); },
-      requestApiResources: ()=> { throw new Error("Tried to access back-end feature in front-end."); },
+      requestApiResources: () => { throw new Error("Tried to access back-end feature in front-end."); },
-      detectorRegistry: undefined as never,
+      detectClusterMetadata: () => { throw new Error("Tried to access back-end feature in front-end."); },
-      createVersionDetector: () => { throw new Error("Tried to access back-end feature in front-end."); },
+      clusterVersionDetector: {
+        detect: () => { throw new Error("Tried to access back-end feature in front-end."); },
+        key: "irrelavent",
+      },
     };
 
     return (model, configData) => new Cluster(dependencies, model, configData);

src/renderer/components/+config-autoscalers/hpa.tsx

@@ -10,16 +10,15 @@ import { observer } from "mobx-react";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import type { HorizontalPodAutoscaler } from "../../../common/k8s-api/endpoints/horizontal-pod-autoscaler.api";
 import { Badge } from "../badge";
-import { cssNames, prevDefault } from "../../utils";
+import { cssNames } from "../../utils";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { HorizontalPodAutoscalerStore } from "./store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import horizontalPodAutoscalerStoreInjectable from "./store.injectable";
 import getHorizontalPodAutoscalerMetrics from "./get-hpa-metrics.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -34,7 +33,6 @@ enum columnId {
 
 interface Dependencies {
   horizontalPodAutoscalerStore: HorizontalPodAutoscalerStore;
-  filterByNamespace: FilterByNamespace;
   getMetrics: (hpa: HorizontalPodAutoscaler) => string[];
 }
 
@@ -92,13 +90,10 @@ class NonInjectedHorizontalPodAutoscalers extends React.Component<Dependencies>
           renderTableContents={hpa => [
             hpa.getName(),
             <KubeObjectStatusIcon key="icon" object={hpa} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={hpa.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(hpa.getNs()))}
+            />,
-            >
-              {hpa.getNs()}
-            </a>,
             this.getTargets(hpa),
             hpa.getMinPods(),
             hpa.getMaxPods(),
@@ -126,7 +121,6 @@ class NonInjectedHorizontalPodAutoscalers extends React.Component<Dependencies>
 export const HorizontalPodAutoscalers = withInjectables<Dependencies>(NonInjectedHorizontalPodAutoscalers, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     horizontalPodAutoscalerStore: di.inject(horizontalPodAutoscalerStoreInjectable),
     getMetrics: di.inject(getHorizontalPodAutoscalerMetrics),
   }),

src/renderer/components/+config-leases/leases.scss

@@ -21,8 +21,6 @@
       flex: .5;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+config-leases/leases.tsx

@@ -16,9 +16,7 @@ import { KubeObjectAge } from "../kube-object/age";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import leaseStoreInjectable from "./store.injectable";
 import type { LeaseStore } from "./store";
-import { prevDefault } from "../../utils";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 
 enum columnId {
   name = "name",
@@ -32,7 +30,6 @@ export interface LeaseProps extends KubeObjectDetailsProps<Lease> {
 
 interface Dependencies {
   leaseStore: LeaseStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -67,13 +64,10 @@ class NonInjectedLease extends React.Component<LeaseProps & Dependencies> {
           renderTableContents={lease => [
             lease.getName(),
             <KubeObjectStatusIcon key="icon" object={lease} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={lease.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(lease.getNs()))}
+            />,
-            >
-              {lease.getNs()}
-            </a>,
             lease.getHolderIdentity(),
             <KubeObjectAge key="age" object={lease} />,
           ]}
@@ -87,6 +81,5 @@ export const Leases = withInjectables<Dependencies, LeaseProps>(NonInjectedLease
   getProps: (di, props) => ({
     ...props,
     leaseStore: di.inject(leaseStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });

src/renderer/components/+config-limit-ranges/limit-ranges.tsx

@@ -11,12 +11,10 @@ import React from "react";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
-import { prevDefault } from "../../utils";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import type { LimitRangeStore } from "./store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import limitRangeStoreInjectable from "./store.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -25,7 +23,6 @@ enum columnId {
 }
 
 interface Dependencies {
-  filterByNamespace: FilterByNamespace;
   limitRangeStore: LimitRangeStore;
 }
 
@@ -58,13 +55,10 @@ class NonInjectedLimitRanges extends React.Component<Dependencies> {
           renderTableContents={limitRange => [
             limitRange.getName(),
             <KubeObjectStatusIcon key="icon" object={limitRange}/>,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={limitRange.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(limitRange.getNs()))}
+            />,
-            >
-              {limitRange.getNs()}
-            </a>,
             <KubeObjectAge key="age" object={limitRange} />,
           ]}
         />
@@ -76,7 +70,6 @@ class NonInjectedLimitRanges extends React.Component<Dependencies> {
 export const LimitRanges = withInjectables<Dependencies>(NonInjectedLimitRanges, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     limitRangeStore: di.inject(limitRangeStoreInjectable),
   }),
 });

src/renderer/components/+config-maps/config-maps.scss

@@ -21,8 +21,6 @@
       flex: .5;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+config-maps/config-maps.tsx

@@ -11,12 +11,10 @@ import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
-import { prevDefault } from "../../utils";
 import type { ConfigMapStore } from "./store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import configMapStoreInjectable from "./store.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -27,7 +25,6 @@ enum columnId {
 
 interface Dependencies {
   configMapStore: ConfigMapStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -61,13 +58,10 @@ class NonInjectedConfigMaps extends React.Component<Dependencies> {
           renderTableContents={configMap => [
             configMap.getName(),
             <KubeObjectStatusIcon key="icon" object={configMap} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={configMap.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(configMap.getNs()))}
+            />,
-            >
-              {configMap.getNs()}
-            </a>,
             configMap.getKeys().join(", "),
             <KubeObjectAge key="age" object={configMap} />,
           ]}
@@ -81,6 +75,5 @@ export const ConfigMaps = withInjectables<Dependencies>(NonInjectedConfigMaps, {
   getProps: (di, props) => ({
     ...props,
     configMapStore: di.inject(configMapStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.scss

@@ -21,8 +21,6 @@
       flex: .5;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx

@@ -13,12 +13,10 @@ import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
-import { prevDefault } from "../../utils";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import type { PodDisruptionBudgetStore } from "./store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import podDisruptionBudgetStoreInjectable from "./store.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -34,7 +32,6 @@ export interface PodDisruptionBudgetsProps extends KubeObjectDetailsProps<PodDis
 }
 
 interface Dependencies {
-  filterByNamespace: FilterByNamespace;
   podDisruptionBudgetStore: PodDisruptionBudgetStore;
 }
 
@@ -74,13 +71,10 @@ class NonInjectedPodDisruptionBudgets extends React.Component<PodDisruptionBudge
           renderTableContents={pdb => [
             pdb.getName(),
             <KubeObjectStatusIcon key="icon" object={pdb} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={pdb.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(pdb.getNs()))}
+            />,
-            >
-              {pdb.getNs()}
-            </a>,
             pdb.getMinAvailable(),
             pdb.getMaxUnavailable(),
             pdb.getCurrentHealthy(),
@@ -96,7 +90,6 @@ class NonInjectedPodDisruptionBudgets extends React.Component<PodDisruptionBudge
 export const PodDisruptionBudgets = withInjectables<Dependencies, PodDisruptionBudgetsProps>(NonInjectedPodDisruptionBudgets, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     podDisruptionBudgetStore: di.inject(podDisruptionBudgetStoreInjectable),
   }),
 });

src/renderer/components/+config-resource-quotas/resource-quotas.scss

@@ -9,8 +9,6 @@
       @include table-cell-warning;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+config-resource-quotas/resource-quotas.tsx

@@ -12,13 +12,11 @@ import { AddQuotaDialog } from "./add-dialog/view";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
-import { prevDefault } from "../../utils";
 import type { ResourceQuotaStore } from "./store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import resourceQuotaStoreInjectable from "./store.injectable";
 import openAddQuotaDialogInjectable from "./add-dialog/open.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -28,7 +26,6 @@ enum columnId {
 
 interface Dependencies {
   resourceQuotaStore: ResourceQuotaStore;
-  filterByNamespace: FilterByNamespace;
   openAddQuotaDialog: () => void;
 }
 
@@ -61,13 +58,10 @@ class NonInjectedResourceQuotas extends React.Component<Dependencies> {
           renderTableContents={resourceQuota => [
             resourceQuota.getName(),
             <KubeObjectStatusIcon key="icon" object={resourceQuota}/>,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={resourceQuota.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(resourceQuota.getNs()))}
+            />,
-            >
-              {resourceQuota.getNs()}
-            </a>,
             <KubeObjectAge key="age" object={resourceQuota} />,
           ]}
           addRemoveButtons={{
@@ -84,7 +78,6 @@ class NonInjectedResourceQuotas extends React.Component<Dependencies> {
 export const ResourceQuotas = withInjectables<Dependencies>(NonInjectedResourceQuotas, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     resourceQuotaStore: di.inject(resourceQuotaStoreInjectable),
     openAddQuotaDialog: di.inject(openAddQuotaDialogInjectable),
   }),

src/renderer/components/+config-secrets/secrets.scss

@@ -17,8 +17,6 @@
       @include table-cell-labels-offsets;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+config-secrets/secrets.tsx

@@ -13,13 +13,11 @@ import { Badge } from "../badge";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
-import { prevDefault } from "../../utils";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import type { SecretStore } from "./store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import secretStoreInjectable from "./store.injectable";
 import openAddSecretDialogInjectable from "./add-dialog/open.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -31,7 +29,6 @@ enum columnId {
 }
 
 interface Dependencies {
-  filterByNamespace: FilterByNamespace;
   secretStore: SecretStore;
   openAddSecretDialog: () => void;
 }
@@ -71,13 +68,10 @@ class NonInjectedSecrets extends React.Component<Dependencies> {
           renderTableContents={secret => [
             secret.getName(),
             <KubeObjectStatusIcon key="icon" object={secret} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={secret.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(secret.getNs()))}
+            />,
-            >
-              {secret.getNs()}
-            </a>,
             secret.getLabels().map(label => (
               <Badge
                 scrollable
@@ -104,7 +98,6 @@ class NonInjectedSecrets extends React.Component<Dependencies> {
 export const Secrets = withInjectables<Dependencies>(NonInjectedSecrets, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     secretStore: di.inject(secretStoreInjectable),
     openAddSecretDialog: di.inject(openAddSecretDialogInjectable),
   }),

src/renderer/components/+custom-resources/crd-resources.scss

@@ -4,7 +4,4 @@
  */
 
 .CrdResources {
-  a.filterNamespace {
-    border-bottom: unset;
-  }
 }

src/renderer/components/+custom-resources/crd-resources.tsx

@@ -19,9 +19,7 @@ import { KubeObjectAge } from "../kube-object/age";
 import type { CustomResourceDefinitionStore } from "./definition.store";
 import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
 import customResourceDefinitionStoreInjectable from "./definition.store.injectable";
-import { prevDefault } from "../../utils";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 
 enum columnId {
   name = "name",
@@ -34,7 +32,6 @@ interface Dependencies {
   name: IComputedValue<string>;
   apiManager: ApiManager;
   customResourceDefinitionStore: CustomResourceDefinitionStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -107,13 +104,7 @@ class NonInjectedCustomResources extends React.Component<Dependencies> {
           renderTableContents={customResource => [
             customResource.getName(),
             isNamespaced && (
-              <a
+              <NamespaceSelectBadge namespace={customResource.getNs() as string} />
-                key="namespace"
-                className="filterNamespace"
-                onClick={prevDefault(() => this.props.filterByNamespace(customResource.getNs() as string))}
-              >
-                {customResource.getNs()}
-              </a>
             ),
             ...extraColumns.map((column) => safeJSONPathValue(customResource, column.jsonPath)),
             <KubeObjectAge key="age" object={customResource} />,
@@ -141,7 +132,6 @@ export const CustomResources = withInjectables<Dependencies>(NonInjectedCustomRe
     ...di.inject(customResourcesRouteParametersInjectable),
     apiManager: di.inject(apiManagerInjectable),
     customResourceDefinitionStore: di.inject(customResourceDefinitionStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });
 

src/renderer/components/+events/event-details.tsx

@@ -78,7 +78,7 @@ const NonInjectedEventDetails = observer(({
 
       <DrawerTitle>Involved object</DrawerTitle>
       <Table>
-        <TableHead>
+        <TableHead flat>
           <TableCell>Name</TableCell>
           <TableCell>Namespace</TableCell>
           <TableCell>Kind</TableCell>

src/renderer/components/+events/events.tsx

@@ -19,7 +19,7 @@ import type { HeaderCustomizer } from "../item-object-list";
 import { Tooltip } from "../tooltip";
 import { Link } from "react-router-dom";
 import type { IClassName } from "../../utils";
-import { prevDefault, cssNames, stopPropagation } from "../../utils";
+import { cssNames, stopPropagation } from "../../utils";
 import { Icon } from "../icon";
 import type { ApiManager } from "../../../common/k8s-api/api-manager";
 import { withInjectables } from "@ogre-tools/injectable-react";
@@ -28,10 +28,9 @@ import { KubeObjectAge } from "../kube-object/age";
 import { ReactiveDuration } from "../duration/reactive-duration";
 import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
 import eventStoreInjectable from "./store.injectable";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
 import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   message = "message",
@@ -58,7 +57,6 @@ interface Dependencies {
   navigateToEvents: () => void;
   eventStore: EventStore;
   apiManager: ApiManager;
-  filterByNamespace: FilterByNamespace;
   getDetailsUrl: GetDetailsUrl;
 }
 
@@ -202,15 +200,7 @@ class NonInjectedEvents extends React.Component<Dependencies & EventsProps> {
               ),
             },
             compact
-              ? (
+              ? <NamespaceSelectBadge key="namespace" namespace={event.getNs()} />
-                <a
-                  key="namespace"
-                  className="filterNamespace"
-                  onClick={prevDefault(() => this.props.filterByNamespace(event.getNs()))}
-                >
-                  {event.getNs()}
-                </a>
-              )
               : event.getNs(),
             <Link
               key="link"
@@ -246,7 +236,6 @@ export const Events = withInjectables<Dependencies, EventsProps>(NonInjectedEven
     navigateToEvents: di.inject(navigateToEventsInjectable),
     apiManager: di.inject(apiManagerInjectable),
     eventStore: di.inject(eventStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     getDetailsUrl: di.inject(getDetailsUrlInjectable),
   }),
 });

src/renderer/components/+events/kube-event-details.module.scss

@@ -22,8 +22,8 @@
       }
     }
   }
-
+}
-  .no-items {
+
-    text-align: center;
+.empty {
-  }
+  opacity: 0.6;
 }

src/renderer/components/+events/kube-event-details.tsx

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import "./kube-event-details.scss";
+import styles from "./kube-event-details.module.scss";
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
@@ -57,14 +57,14 @@ class NonInjectedKubeEventDetails extends React.Component<KubeEventDetailsProps
 
     return (
       <div>
-        <DrawerTitle className="flex gaps align-center">
+        <DrawerTitle>
           <span>Events</span>
         </DrawerTitle>
         {events.length > 0 && (
-          <div className="KubeEventDetails">
+          <div className={styles.KubeEventDetails}>
             {events.map(event => (
-              <div className="event" key={event.getId()}>
+              <div className={styles.event} key={event.getId()}>
-                <div className={cssNames("title", { warning: event.isWarning() })}>
+                <div className={cssNames(styles.title, { [styles.warning]: event.isWarning() })}>
                   {event.message}
                 </div>
                 <DrawerItem name="Source">
@@ -85,6 +85,11 @@ class NonInjectedKubeEventDetails extends React.Component<KubeEventDetailsProps
             ))}
           </div>
         )}
+        {events.length === 0 && (
+          <div className={styles.empty}>
+            No events found
+          </div>
+        )}
       </div>
     );
   }

src/renderer/components/+helm-releases/releases.scss

@@ -21,8 +21,6 @@
       }
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+helm-releases/releases.tsx

@@ -23,9 +23,7 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import helmReleasesRouteParametersInjectable from "./helm-releases-route-parameters.injectable";
 import type { NavigateToHelmReleases } from "../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
 import navigateToHelmReleasesInjectable from "../../../common/front-end-routing/routes/cluster/helm/releases/navigate-to-helm-releases.injectable";
-import { prevDefault } from "../../utils";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 
 enum columnId {
   name = "name",
@@ -43,19 +41,9 @@ interface Dependencies {
   releasesArePending: IComputedValue<boolean>;
   namespace: IComputedValue<string>;
   navigateToHelmReleases: NavigateToHelmReleases;
-  filterByNamespace: FilterByNamespace;
 }
 
 class NonInjectedHelmReleases extends Component<Dependencies> {
-  // TODO: This side-effect in mount must go.
-  componentDidMount() {
-    const namespace = this.props.namespace.get();
-
-    if (namespace) {
-      this.props.filterByNamespace(namespace);
-    }
-  }
-
   onDetails = (item: HelmRelease) => {
     this.showDetails(item);
   };
@@ -188,13 +176,10 @@ class NonInjectedHelmReleases extends Component<Dependencies> {
           ]}
           renderTableContents={release => [
             release.getName(),
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={release.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(release.getNs()))}
+            />,
-            >
-              {release.getNs()}
-            </a>,
             release.getChart(),
             release.getRevision(),
             release.getVersion(),
@@ -226,7 +211,6 @@ export const HelmReleases = withInjectables<Dependencies>(NonInjectedHelmRelease
     releases: di.inject(removableReleasesInjectable),
     releasesArePending: di.inject(releasesInjectable).pending,
     navigateToHelmReleases: di.inject(navigateToHelmReleasesInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     ...di.inject(helmReleasesRouteParametersInjectable),
   }),
 });

src/renderer/components/+namespaces/namespace-select-badge.module.scss

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.NamespaceSelectBadge {
+  @include pseudo-link;
+  border-bottom: unset;
+}

src/renderer/components/+namespaces/namespace-select-badge.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import styles from "./namespace-select-badge.module.scss";
+import React from "react";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import type { BadgeProps } from "../badge";
+import { Badge } from "../badge";
+import type {
+  FilterByNamespace,
+} from "./namespace-select-filter-model/filter-by-namespace.injectable";
+import filterByNamespaceInjectable
+  from "./namespace-select-filter-model/filter-by-namespace.injectable";
+import { prevDefault, cssNames } from "../../utils";
+
+export interface NamespaceSelectBadgeProps extends BadgeProps {
+  namespace: string;
+}
+
+export interface Dependencies {
+  filterByNamespace: FilterByNamespace;
+}
+
+export function NamespaceSelectBadgeNonInjected(
+  {
+    namespace,
+    label,
+    filterByNamespace,
+    ...props
+  }: NamespaceSelectBadgeProps & Dependencies) {
+  return (
+    <Badge
+      flat={true}
+      expandable={false}
+      {...props}
+      label={namespace ?? label}
+      tooltip={(
+        <>
+          Set global namespace filter to:
+          <b>{namespace}</b>
+        </>
+      )}
+      className={cssNames(styles.NamespaceSelectBadge, props.className)}
+      onClick={prevDefault(() => filterByNamespace(namespace))}
+    />
+  );
+}
+
+export const NamespaceSelectBadge = withInjectables<Dependencies, NamespaceSelectBadgeProps>(NamespaceSelectBadgeNonInjected, {
+  getProps(di, props) {
+    return {
+      ...props,
+      filterByNamespace: di.inject(filterByNamespaceInjectable),
+    };
+  },
+});

src/renderer/components/+network-endpoints/endpoints.scss

@@ -13,8 +13,6 @@
       @include table-cell-warning;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+network-endpoints/endpoints.tsx

@@ -11,12 +11,10 @@ import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
-import { prevDefault } from "../../utils";
 import type { EndpointsStore } from "./store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import endpointsStoreInjectable from "./store.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -27,7 +25,6 @@ enum columnId {
 
 interface Dependencies {
   endpointsStore: EndpointsStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -59,13 +56,10 @@ class NonInjectedEndpoints extends React.Component<Dependencies> {
           renderTableContents={endpoint => [
             endpoint.getName(),
             <KubeObjectStatusIcon key="icon" object={endpoint} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={endpoint.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(endpoint.getNs()))}
+            />,
-            >
-              {endpoint.getNs()}
-            </a>,
             endpoint.toString(),
             <KubeObjectAge key="age" object={endpoint} />,
           ]}
@@ -86,6 +80,5 @@ export const Endpoints = withInjectables<Dependencies>(NonInjectedEndpoints, {
   getProps: (di, props) => ({
     ...props,
     endpointsStore: di.inject(endpointsStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });

src/renderer/components/+network-ingresses/ingress-details.tsx

@@ -37,7 +37,7 @@ class NonInjectedIngressDetails extends React.Component<IngressDetailsProps & De
           )}
           {rule.http && (
             <Table className="paths">
-              <TableHead>
+              <TableHead flat>
                 <TableCell className="path">Path</TableCell>
                 <TableCell className="link">Link</TableCell>
                 <TableCell className="backends">Backends</TableCell>

src/renderer/components/+network-ingresses/ingresses.scss

@@ -32,8 +32,6 @@
       @include table-cell-warning;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+network-ingresses/ingresses.tsx

@@ -12,12 +12,10 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import { computeRouteDeclarations } from "../../../common/k8s-api/endpoints";
-import { prevDefault } from "../../utils";
 import type { IngressStore } from "./ingress-store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import ingressStoreInjectable from "./ingress-store.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -29,13 +27,11 @@ enum columnId {
 
 interface Dependencies {
   ingressStore: IngressStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 const NonInjectedIngresses = observer((props: Dependencies) => {
   const {
     ingressStore,
-    filterByNamespace,
   } = props;
 
   return (
@@ -66,13 +62,7 @@ const NonInjectedIngresses = observer((props: Dependencies) => {
         renderTableContents={ ingress => [
           ingress.getName(),
           <KubeObjectStatusIcon key="icon" object={ ingress } />,
-          <a
+          <NamespaceSelectBadge key="namespace" namespace={ingress.getNs()} />,
-            key="namespace"
-            className="filterNamespace"
-            onClick={prevDefault(() => filterByNamespace(ingress.getNs()))}
-          >
-            {ingress.getNs()}
-          </a>,
           ingress.getLoadBalancers().map(lb => <p key={ lb }>{ lb }</p>),
           computeRouteDeclarations(ingress).map(decl => (
             decl.displayAsLink
@@ -112,6 +102,5 @@ export const Ingresses = withInjectables<Dependencies>(NonInjectedIngresses, {
   getProps: (di, props) => ({
     ...props,
     ingressStore: di.inject(ingressStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });

src/renderer/components/+network-policies/network-policies.scss

@@ -9,8 +9,6 @@
       @include table-cell-warning;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+network-policies/network-policies.tsx

@@ -12,11 +12,9 @@ import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { NetworkPolicyStore } from "./store";
-import { prevDefault } from "../../utils";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import networkPolicyStoreInjectable from "./store.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -27,7 +25,6 @@ enum columnId {
 
 interface Dependencies {
   networkPolicyStore: NetworkPolicyStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -59,13 +56,10 @@ class NonInjectedNetworkPolicies extends React.Component<Dependencies> {
           renderTableContents={networkPolicy => [
             networkPolicy.getName(),
             <KubeObjectStatusIcon key="icon" object={networkPolicy} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={networkPolicy.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(networkPolicy.getNs()))}
+            />,
-            >
-              {networkPolicy.getNs()}
-            </a>,
             networkPolicy.getTypes().join(", "),
             <KubeObjectAge key="age" object={networkPolicy} />,
           ]}
@@ -78,7 +72,6 @@ class NonInjectedNetworkPolicies extends React.Component<Dependencies> {
 export const NetworkPolicies = withInjectables<Dependencies>(NonInjectedNetworkPolicies, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     networkPolicyStore: di.inject(networkPolicyStoreInjectable),
   }),
 });

src/renderer/components/+network-port-forwards/port-forwards.scss

@@ -14,8 +14,6 @@
       flex: 0.6;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+network-port-forwards/port-forwards.tsx

@@ -19,9 +19,7 @@ import { computed, makeObservable } from "mobx";
 import portForwardsRouteParametersInjectable from "./port-forwards-route-parameters.injectable";
 import type { NavigateToPortForwards } from "../../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
 import navigateToPortForwardsInjectable from "../../../common/front-end-routing/routes/cluster/network/port-forwards/navigate-to-port-forwards.injectable";
-import { prevDefault } from "../../utils";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 
 enum columnId {
   name = "name",
@@ -37,7 +35,6 @@ interface Dependencies {
   portForwardStore: PortForwardStore;
   forwardport: IComputedValue<string>;
   navigateToPortForwards: NavigateToPortForwards;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -132,13 +129,10 @@ class NonInjectedPortForwards extends React.Component<Dependencies> {
           ]}
           renderTableContents={item => [
             item.getName(),
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={item.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(item.getNs()))}
+            />,
-            >
-              {item.getNs()}
-            </a>,
             item.getKind(),
             item.getPort(),
             item.getForwardPort(),
@@ -173,7 +167,6 @@ export const PortForwards = withInjectables<Dependencies>(NonInjectedPortForward
     portForwardStore: di.inject(portForwardStoreInjectable),
     ...di.inject(portForwardsRouteParametersInjectable),
     navigateToPortForwards: di.inject(navigateToPortForwardsInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });
 

src/renderer/components/+network-services/service-details-endpoint.tsx

@@ -46,7 +46,7 @@ class NonInjectedServiceDetailsEndpoint extends React.Component<ServiceDetailsEn
           scrollable={false}
           className="box grow"
         >
-          <TableHead>
+          <TableHead flat>
             <TableCell className="name" >Name</TableCell>
             <TableCell className="endpoints">Endpoints</TableCell>
           </TableHead>

src/renderer/components/+network-services/services.scss

@@ -26,8 +26,6 @@
       flex: 0.6;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+network-services/services.tsx

@@ -12,13 +12,11 @@ import { Badge } from "../badge";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
-import { prevDefault } from "../../utils";
 import type { ServiceStore } from "./store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import type { Service } from "../../../common/k8s-api/endpoints";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import serviceStoreInjectable from "./store.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -48,7 +46,6 @@ const formatExternalIps = (service: Service) => {
 
 interface Dependencies {
   serviceStore: ServiceStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -92,13 +89,10 @@ class NonInjectedServices extends React.Component<Dependencies> {
           renderTableContents={service => [
             service.getName(),
             <KubeObjectStatusIcon key="icon" object={ service } />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={service.getNs()}
-              onClick={ prevDefault(() => this.props.filterByNamespace(service.getNs())) }
+            />,
-            >
-              { service.getNs() }
-            </a>,
             service.getType(),
             service.getClusterIp(),
             service.getPorts().join(", "),
@@ -116,7 +110,6 @@ class NonInjectedServices extends React.Component<Dependencies> {
 export const Services = withInjectables<Dependencies>(NonInjectedServices, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     serviceStore: di.inject(serviceStoreInjectable),
   }),
 });

src/renderer/components/+nodes/details-resources.tsx

@@ -38,7 +38,7 @@ export function NodeDetailsResources({ type, node: { status = {}}}: NodeDetailsR
         selectable
         scrollable={false}
       >
-        <TableHead sticky={false}>
+        <TableHead sticky={false} flat>
           <TableCell className="cpu">CPU</TableCell>
           <TableCell className="memory">Memory</TableCell>
           <TableCell className="ephemeral-storage">Ephemeral Storage</TableCell>

src/renderer/components/+storage-volume-claims/volume-claims.scss

@@ -39,8 +39,6 @@
       flex: 0.4;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+storage-volume-claims/volume-claims.tsx

@@ -10,7 +10,7 @@ import { observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import { unitsToBytes } from "../../../common/utils/convertMemory";
-import { prevDefault, stopPropagation } from "../../utils";
+import { stopPropagation } from "../../utils";
 import type { StorageClassApi } from "../../../common/k8s-api/endpoints";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
@@ -18,13 +18,12 @@ import { KubeObjectAge } from "../kube-object/age";
 import type { PersistentVolumeClaimStore } from "./store";
 import type { PodStore } from "../+workloads-pods/store";
 import type { GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
 import persistentVolumeClaimStoreInjectable from "./store.injectable";
 import podStoreInjectable from "../+workloads-pods/store.injectable";
 import storageClassApiInjectable from "../../../common/k8s-api/endpoints/storage-class.api.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -41,7 +40,6 @@ interface Dependencies {
   storageClassApi: StorageClassApi;
   podStore: PodStore;
   getDetailsUrl: GetDetailsUrl;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -49,7 +47,6 @@ class NonInjectedPersistentVolumeClaims extends React.Component<Dependencies> {
   render() {
     const {
       persistentVolumeClaimStore,
-      filterByNamespace,
       getDetailsUrl,
       podStore,
       storageClassApi,
@@ -97,13 +94,10 @@ class NonInjectedPersistentVolumeClaims extends React.Component<Dependencies> {
             return [
               pvc.getName(),
               <KubeObjectStatusIcon key="icon" object={pvc} />,
-              <a
+              <NamespaceSelectBadge
                 key="namespace"
-                className="filterNamespace"
+                namespace={pvc.getNs()}
-                onClick={prevDefault(() => filterByNamespace(pvc.getNs()))}
+              />,
-              >
-                {pvc.getNs()}
-              </a>,
               <Link
                 key="link"
                 to={storageClassDetailsUrl}
@@ -134,7 +128,6 @@ class NonInjectedPersistentVolumeClaims extends React.Component<Dependencies> {
 export const PersistentVolumeClaims = withInjectables<Dependencies>(NonInjectedPersistentVolumeClaims, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     getDetailsUrl: di.inject(getDetailsUrlInjectable),
     persistentVolumeClaimStore: di.inject(persistentVolumeClaimStoreInjectable),
     podStore: di.inject(podStoreInjectable),

src/renderer/components/+user-management/+role-bindings/view.scss

@@ -13,8 +13,6 @@
       @include table-cell-warning;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+user-management/+role-bindings/view.tsx

@@ -14,17 +14,15 @@ import { KubeObjectAge } from "../../kube-object/age";
 import type { RoleStore } from "../+roles/store";
 import type { ServiceAccountStore } from "../+service-accounts/store";
 import type { RoleBindingStore } from "./store";
-import { prevDefault } from "../../../utils";
 import type { ClusterRoleStore } from "../+cluster-roles/store";
-import type { FilterByNamespace } from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import clusterRoleStoreInjectable from "../+cluster-roles/store.injectable";
-import filterByNamespaceInjectable from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import roleBindingStoreInjectable from "./store.injectable";
 import roleStoreInjectable from "../+roles/store.injectable";
 import serviceAccountStoreInjectable from "../+service-accounts/store.injectable";
 import type { OpenRoleBindingDialog } from "./dialog/open.injectable";
 import openRoleBindingDialogInjectable from "./dialog/open.injectable";
+import { NamespaceSelectBadge } from "../../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -38,7 +36,6 @@ interface Dependencies {
   roleStore: RoleStore;
   clusterRoleStore: ClusterRoleStore;
   serviceAccountStore: ServiceAccountStore;
-  filterByNamespace: FilterByNamespace;
   openRoleBindingDialog: OpenRoleBindingDialog;
 }
 
@@ -50,7 +47,6 @@ class NonInjectedRoleBindings extends React.Component<Dependencies> {
       roleBindingStore,
       roleStore,
       serviceAccountStore,
-      filterByNamespace,
       openRoleBindingDialog,
     } = this.props;
 
@@ -83,13 +79,10 @@ class NonInjectedRoleBindings extends React.Component<Dependencies> {
           renderTableContents={binding => [
             binding.getName(),
             <KubeObjectStatusIcon key="icon" object={binding} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={binding.getNs()}
-              onClick={prevDefault(() => filterByNamespace(binding.getNs()))}
+            />,
-            >
-              {binding.getNs()}
-            </a>,
             binding.getSubjectNames(),
             <KubeObjectAge key="age" object={binding} />,
           ]}
@@ -108,7 +101,6 @@ export const RoleBindings = withInjectables<Dependencies>(NonInjectedRoleBinding
   getProps: (di, props) => ({
     ...props,
     clusterRoleStore: di.inject(clusterRoleStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     roleBindingStore: di.inject(roleBindingStoreInjectable),
     roleStore: di.inject(roleStoreInjectable),
     serviceAccountStore: di.inject(serviceAccountStoreInjectable),

src/renderer/components/+user-management/+roles/view.scss

@@ -13,8 +13,6 @@
       @include table-cell-warning;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+user-management/+roles/view.tsx

@@ -13,12 +13,10 @@ import { AddRoleDialog } from "./add-dialog/view";
 import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../../kube-object/age";
 import type { RoleStore } from "./store";
-import { prevDefault } from "../../../utils";
-import type { FilterByNamespace } from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import roleStoreInjectable from "./store.injectable";
 import openAddRoleDialogInjectable from "./add-dialog/open.injectable";
+import { NamespaceSelectBadge } from "../../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -28,7 +26,6 @@ enum columnId {
 
 interface Dependencies {
   roleStore: RoleStore;
-  filterByNamespace: FilterByNamespace;
   openAddRoleDialog: () => void;
 }
 
@@ -36,7 +33,6 @@ interface Dependencies {
 class NonInjectedRoles extends React.Component<Dependencies> {
   render() {
     const {
-      filterByNamespace,
       roleStore,
       openAddRoleDialog,
     } = this.props;
@@ -66,13 +62,10 @@ class NonInjectedRoles extends React.Component<Dependencies> {
           renderTableContents={role => [
             role.getName(),
             <KubeObjectStatusIcon key="icon" object={role} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={role.getNs()}
-              onClick={prevDefault(() => filterByNamespace(role.getNs()))}
+            />,
-            >
-              {role.getNs()}
-            </a>,
             <KubeObjectAge key="age" object={role} />,
           ]}
           addRemoveButtons={{
@@ -89,7 +82,6 @@ class NonInjectedRoles extends React.Component<Dependencies> {
 export const Roles = withInjectables<Dependencies>(NonInjectedRoles, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     roleStore: di.inject(roleStoreInjectable),
     openAddRoleDialog: di.inject(openAddRoleDialogInjectable),
   }),

src/renderer/components/+user-management/+service-accounts/view.scss

@@ -9,8 +9,6 @@
       @include table-cell-warning;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+user-management/+service-accounts/view.tsx

@@ -12,14 +12,12 @@ import { KubeObjectStatusIcon } from "../../kube-object-status-icon";
 import { CreateServiceAccountDialog } from "./create-dialog/view";
 import { SiblingsInTabLayout } from "../../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../../kube-object/age";
-import { prevDefault } from "../../../utils";
 import type { ServiceAccountStore } from "./store";
-import type { FilterByNamespace } from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import filterByNamespaceInjectable from "../../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import serviceAccountStoreInjectable from "./store.injectable";
 import type { OpenCreateServiceAccountDialog } from "./create-dialog/open.injectable";
 import openCreateServiceAccountDialogInjectable from "./create-dialog/open.injectable";
+import { NamespaceSelectBadge } from "../../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -29,7 +27,6 @@ enum columnId {
 
 interface Dependencies {
   serviceAccountStore: ServiceAccountStore;
-  filterByNamespace: FilterByNamespace;
   openCreateServiceAccountDialog: OpenCreateServiceAccountDialog;
 }
 
@@ -37,7 +34,6 @@ interface Dependencies {
 class NonInjectedServiceAccounts extends React.Component<Dependencies> {
   render() {
     const {
-      filterByNamespace,
       serviceAccountStore,
       openCreateServiceAccountDialog,
     } = this.props;
@@ -67,13 +63,10 @@ class NonInjectedServiceAccounts extends React.Component<Dependencies> {
           renderTableContents={account => [
             account.getName(),
             <KubeObjectStatusIcon key="icon" object={account} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={account.getNs()}
-              onClick={prevDefault(() => filterByNamespace(account.getNs()))}
+            />,
-            >
-              {account.getNs()}
-            </a>,
             <KubeObjectAge key="age" object={account} />,
           ]}
           addRemoveButtons={{
@@ -90,7 +83,6 @@ class NonInjectedServiceAccounts extends React.Component<Dependencies> {
 export const ServiceAccounts = withInjectables<Dependencies>(NonInjectedServiceAccounts, {
   getProps: (di, props) => ({
     ...props,
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     serviceAccountStore: di.inject(serviceAccountStoreInjectable),
     openCreateServiceAccountDialog: di.inject(openCreateServiceAccountDialogInjectable),
   }),

src/renderer/components/+workloads-cronjobs/cronjobs.scss

@@ -9,8 +9,6 @@
       @include table-cell-warning;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+workloads-cronjobs/cronjobs.tsx

@@ -17,9 +17,7 @@ import type { EventStore } from "../+events/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import cronJobStoreInjectable from "./store.injectable";
 import eventStoreInjectable from "../+events/store.injectable";
-import { prevDefault } from "../../utils";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 
 enum columnId {
   name = "name",
@@ -34,14 +32,12 @@ enum columnId {
 interface Dependencies {
   cronJobStore: CronJobStore;
   eventStore: EventStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 const NonInjectedCronJobs = observer((props: Dependencies) => {
   const {
     cronJobStore,
     eventStore,
-    filterByNamespace,
   } = props;
 
   return (
@@ -82,13 +78,10 @@ const NonInjectedCronJobs = observer((props: Dependencies) => {
         renderTableContents={cronJob => [
           cronJob.getName(),
           <KubeObjectStatusIcon key="icon" object={cronJob} />,
-          <a
+          <NamespaceSelectBadge
             key="namespace"
-            className="filterNamespace"
+            namespace={cronJob.getNs()}
-            onClick={prevDefault(() => filterByNamespace(cronJob.getNs()))}
+          />,
-          >
-            {cronJob.getNs()}
-          </a>,
           cronJob.isNeverRun() ? "never"  : cronJob.getSchedule(),
           cronJob.getSuspendFlag(),
           cronJobStore.getActiveJobsNum(cronJob),
@@ -105,6 +98,5 @@ export const CronJobs = withInjectables<Dependencies>(NonInjectedCronJobs, {
     ...props,
     cronJobStore: di.inject(cronJobStoreInjectable),
     eventStore: di.inject(eventStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });

src/renderer/components/+workloads-daemonsets/daemonsets.scss

@@ -22,8 +22,6 @@
       @include table-cell-labels-offsets;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+workloads-daemonsets/daemonsets.tsx

@@ -15,12 +15,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { DaemonSetStore } from "./store";
 import type { EventStore } from "../+events/store";
-import { prevDefault } from "../../utils";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import daemonSetStoreInjectable from "./store.injectable";
 import eventStoreInjectable from "../+events/store.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -33,14 +31,12 @@ enum columnId {
 interface Dependencies {
   daemonSetStore: DaemonSetStore;
   eventStore: EventStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 const NonInjectedDaemonSets = observer((props: Dependencies) => {
   const {
     daemonSetStore,
     eventStore,
-    filterByNamespace,
   } = props;
 
   const getPodsLength = (daemonSet: DaemonSet) => daemonSetStore.getChildPods(daemonSet).length;
@@ -66,7 +62,12 @@ const NonInjectedDaemonSets = observer((props: Dependencies) => {
         renderHeaderTitle="Daemon Sets"
         renderTableHeader={[
           { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
-          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          {
+            title: "Namespace",
+            className: "namespace",
+            sortBy: columnId.namespace,
+            id: columnId.namespace,
+          },
           { title: "Pods", className: "pods", sortBy: columnId.pods, id: columnId.pods },
           { className: "warning", showWithColumn: columnId.pods },
           { title: "Node Selector", className: "labels scrollable", id: columnId.labels },
@@ -74,13 +75,10 @@ const NonInjectedDaemonSets = observer((props: Dependencies) => {
         ]}
         renderTableContents={daemonSet => [
           daemonSet.getName(),
-          <a
+          <NamespaceSelectBadge
             key="namespace"
-            className="filterNamespace"
+            namespace={daemonSet.getNs()}
-            onClick={prevDefault(() => filterByNamespace(daemonSet.getNs()))}
+          />,
-          >
-            {daemonSet.getNs()}
-          </a>,
           getPodsLength(daemonSet),
           <KubeObjectStatusIcon key="icon" object={daemonSet} />,
           daemonSet.getNodeSelectors().map(selector => (
@@ -102,6 +100,5 @@ export const DaemonSets = withInjectables<Dependencies>(NonInjectedDaemonSets, {
     ...props,
     daemonSetStore: di.inject(daemonSetStoreInjectable),
     eventStore: di.inject(eventStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });

src/renderer/components/+workloads-deployments/deployment-replicasets.tsx

@@ -78,7 +78,7 @@ class NonInjectedDeploymentReplicaSets extends React.Component<DeploymentReplica
           sortSyncWithUrl={false}
           className="box grow"
         >
-          <TableHead>
+          <TableHead flat>
             <TableCell className="name" sortBy={sortBy.name}>Name</TableCell>
             <TableCell className="warning"/>
             <TableCell className="namespace" sortBy={sortBy.namespace}>Namespace</TableCell>

src/renderer/components/+workloads-deployments/deployments.scss

@@ -43,8 +43,6 @@
       }
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+workloads-deployments/deployments.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import { observer } from "mobx-react";
 import type { Deployment } from "../../../common/k8s-api/endpoints";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
-import { cssNames, prevDefault } from "../../utils";
+import { cssNames } from "../../utils";
 import kebabCase from "lodash/kebabCase";
 import orderBy from "lodash/orderBy";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
@@ -17,11 +17,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { DeploymentStore } from "./store";
 import type { EventStore } from "../+events/store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import deploymentStoreInjectable from "./store.injectable";
 import eventStoreInjectable from "../+events/store.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -35,7 +34,6 @@ enum columnId {
 interface Dependencies {
   deploymentStore: DeploymentStore;
   eventStore: EventStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 @observer
@@ -64,7 +62,6 @@ class NonInjectedDeployments extends React.Component<Dependencies> {
     const {
       deploymentStore,
       eventStore,
-      filterByNamespace,
     } = this.props;
 
     return (
@@ -90,22 +87,34 @@ class NonInjectedDeployments extends React.Component<Dependencies> {
           renderTableHeader={[
             { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
             { className: "warning", showWithColumn: columnId.name },
-            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            {
+              title: "Namespace",
+              className: "namespace",
+              sortBy: columnId.namespace,
+              id: columnId.namespace,
+            },
             { title: "Pods", className: "pods", id: columnId.pods },
-            { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas },
+            {
+              title: "Replicas",
+              className: "replicas",
+              sortBy: columnId.replicas,
+              id: columnId.replicas,
+            },
             { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
-            { title: "Conditions", className: "conditions", sortBy: columnId.condition, id: columnId.condition },
+            {
+              title: "Conditions",
+              className: "conditions",
+              sortBy: columnId.condition,
+              id: columnId.condition,
+            },
           ]}
           renderTableContents={deployment => [
             deployment.getName(),
             <KubeObjectStatusIcon key="icon" object={deployment} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={deployment.getNs()}
-              onClick={prevDefault(() => filterByNamespace(deployment.getNs()))}
+            />,
-            >
-              {deployment.getNs()}
-            </a>,
             this.renderPods(deployment),
             deployment.getReplicas(),
             <KubeObjectAge key="age" object={deployment} />,
@@ -122,6 +131,5 @@ export const Deployments = withInjectables<Dependencies>(NonInjectedDeployments,
     ...props,
     deploymentStore: di.inject(deploymentStoreInjectable),
     eventStore: di.inject(eventStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });

src/renderer/components/+workloads-jobs/jobs.scss

@@ -19,8 +19,6 @@
       @include job-condition-colors;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+workloads-jobs/jobs.tsx

@@ -14,12 +14,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { JobStore } from "./store";
 import type { EventStore } from "../+events/store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
-import { prevDefault } from "../../utils";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import eventStoreInjectable from "../+events/store.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import jobStoreInjectable from "./store.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -32,13 +30,11 @@ enum columnId {
 interface Dependencies {
   jobStore: JobStore;
   eventStore: EventStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 const NonInjectedJobs = observer((props: Dependencies) => {
   const {
     eventStore,
-    filterByNamespace,
     jobStore,
   } = props;
 
@@ -73,13 +69,10 @@ const NonInjectedJobs = observer((props: Dependencies) => {
 
           return [
             job.getName(),
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={job.getNs()}
-              onClick={prevDefault(() => filterByNamespace(job.getNs()))}
+            />,
-            >
-              {job.getNs()}
-            </a>,
             `${job.getCompletions()} / ${job.getDesiredCompletions()}`,
             <KubeObjectStatusIcon key="icon" object={job} />,
             <KubeObjectAge key="age" object={job} />,
@@ -98,7 +91,6 @@ export const Jobs = withInjectables<Dependencies>(NonInjectedJobs, {
   getProps: (di, props) => ({
     ...props,
     eventStore: di.inject(eventStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     jobStore: di.inject(jobStoreInjectable),
   }),
 });

src/renderer/components/+workloads-pods/pod-details-list.tsx

@@ -190,7 +190,7 @@ class NonInjectedPodDetailsList extends React.Component<PodDetailsListProps & De
           )}
           className="box grow"
         >
-          <TableHead>
+          <TableHead flat>
             <TableCell className="name" sortBy={sortBy.name}>Name</TableCell>
             <TableCell className="warning"/>
             <TableCell className="node" sortBy={sortBy.node}>Node</TableCell>

src/renderer/components/+workloads-pods/pods.scss

@@ -38,8 +38,6 @@
       flex-grow: 0.7;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+workloads-pods/pods.tsx

@@ -11,7 +11,7 @@ import { Link } from "react-router-dom";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
 import type { NodeApi, Pod } from "../../../common/k8s-api/endpoints";
 import { StatusBrick } from "../status-brick";
-import { cssNames, getConvertedParts, object, prevDefault, stopPropagation } from "../../utils";
+import { cssNames, getConvertedParts, object, stopPropagation } from "../../utils";
 import startCase from "lodash/startCase";
 import kebabCase from "lodash/kebabCase";
 import type { ApiManager } from "../../../common/k8s-api/api-manager";
@@ -28,8 +28,7 @@ import type { PodStore } from "./store";
 import nodeApiInjectable from "../../../common/k8s-api/endpoints/node.api.injectable";
 import eventStoreInjectable from "../+events/store.injectable";
 import podStoreInjectable from "./store.injectable";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 
 enum columnId {
   name = "name",
@@ -45,7 +44,6 @@ enum columnId {
 
 interface Dependencies {
   getDetailsUrl: GetDetailsUrl;
-  filterByNamespace: FilterByNamespace;
   apiManager: ApiManager;
   eventStore: EventStore;
   podStore: PodStore;
@@ -111,7 +109,7 @@ class NonInjectedPods extends React.Component<Dependencies> {
           className="Pods"
           store={podStore}
           dependentStores={[eventStore]} // status icon component uses event store
-          tableId = "workloads_pods"
+          tableId="workloads_pods"
           isConfigurable
           sortingCallbacks={{
             [columnId.name]: pod => getConvertedParts(pod.getName()),
@@ -134,10 +132,30 @@ class NonInjectedPods extends React.Component<Dependencies> {
           renderTableHeader={[
             { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
             { className: "warning", showWithColumn: columnId.name },
-            { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+            {
-            { title: "Containers", className: "containers", sortBy: columnId.containers, id: columnId.containers },
+              title: "Namespace",
-            { title: "Restarts", className: "restarts", sortBy: columnId.restarts, id: columnId.restarts },
+              className: "namespace",
-            { title: "Controlled By", className: "owners", sortBy: columnId.owners, id: columnId.owners },
+              sortBy: columnId.namespace,
+              id: columnId.namespace,
+            },
+            {
+              title: "Containers",
+              className: "containers",
+              sortBy: columnId.containers,
+              id: columnId.containers,
+            },
+            {
+              title: "Restarts",
+              className: "restarts",
+              sortBy: columnId.restarts,
+              id: columnId.restarts,
+            },
+            {
+              title: "Controlled By",
+              className: "owners",
+              sortBy: columnId.owners,
+              id: columnId.owners,
+            },
             { title: "Node", className: "node", sortBy: columnId.node, id: columnId.node },
             { title: "QoS", className: "qos", sortBy: columnId.qos, id: columnId.qos },
             { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
@@ -152,13 +170,10 @@ class NonInjectedPods extends React.Component<Dependencies> {
               expandable={false}
             />,
             <KubeObjectStatusIcon key="icon" object={pod} />,
-            <a
+            <NamespaceSelectBadge
               key="namespace"
-              className="filterNamespace"
+              namespace={pod.getNs()}
-              onClick={prevDefault(() => this.props.filterByNamespace(pod.getNs()))}
+            />,
-            >
-              {pod.getNs()}
-            </a>,
             this.renderContainersStatus(pod),
             pod.getRestartsCount(),
             pod.getOwnerRefs().map(ref => {
@@ -186,7 +201,9 @@ class NonInjectedPods extends React.Component<Dependencies> {
                 tooltip={pod.getNodeName()}
                 expandable={false}
               >
-                <Link to={getDetailsUrl(nodeApi.getUrl({ name: pod.getNodeName() }))} onClick={stopPropagation}>
+                <Link
+                  to={getDetailsUrl(nodeApi.getUrl({ name: pod.getNodeName() }))}
+                  onClick={stopPropagation}>
                   {pod.getNodeName()}
                 </Link>
               </Badge>
@@ -210,6 +227,5 @@ export const Pods = withInjectables<Dependencies>(NonInjectedPods, {
     nodeApi: di.inject(nodeApiInjectable),
     eventStore: di.inject(eventStoreInjectable),
     podStore: di.inject(podStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
   }),
 });

src/renderer/components/+workloads-replicasets/replicasets.scss

@@ -13,8 +13,6 @@
       @include table-cell-warning;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+workloads-replicasets/replicasets.tsx

@@ -13,12 +13,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { ReplicaSetStore } from "./store";
 import type { EventStore } from "../+events/store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
-import { prevDefault } from "../../utils";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import eventStoreInjectable from "../+events/store.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import replicaSetStoreInjectable from "./store.injectable";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -32,13 +30,11 @@ enum columnId {
 interface Dependencies {
   replicaSetStore: ReplicaSetStore;
   eventStore: EventStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 const NonInjectedReplicaSets = observer((props: Dependencies) => {
   const {
     eventStore,
-    filterByNamespace,
     replicaSetStore,
   } = props;
 
@@ -65,22 +61,34 @@ const NonInjectedReplicaSets = observer((props: Dependencies) => {
         renderTableHeader={[
           { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
           { className: "warning", showWithColumn: columnId.name },
-          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          {
-          { title: "Desired", className: "desired", sortBy: columnId.desired, id: columnId.desired },
+            title: "Namespace",
-          { title: "Current", className: "current", sortBy: columnId.current, id: columnId.current },
+            className: "namespace",
+            sortBy: columnId.namespace,
+            id: columnId.namespace,
+          },
+          {
+            title: "Desired",
+            className: "desired",
+            sortBy: columnId.desired,
+            id: columnId.desired,
+          },
+          {
+            title: "Current",
+            className: "current",
+            sortBy: columnId.current,
+            id: columnId.current,
+          },
           { title: "Ready", className: "ready", sortBy: columnId.ready, id: columnId.ready },
           { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={replicaSet => [
           replicaSet.getName(),
           <KubeObjectStatusIcon key="icon" object={replicaSet} />,
-          <a
+          <NamespaceSelectBadge
             key="namespace"
-            className="filterNamespace"
+            namespace={replicaSet.getNs()}
-            onClick={prevDefault(() => filterByNamespace(replicaSet.getNs()))}
+          />,
-          >
-            {replicaSet.getNs()}
-          </a>,
           replicaSet.getDesired(),
           replicaSet.getCurrent(),
           replicaSet.getReady(),
@@ -95,7 +103,6 @@ export const ReplicaSets = withInjectables<Dependencies>(NonInjectedReplicaSets,
   getProps: (di, props) => ({
     ...props,
     eventStore: di.inject(eventStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     replicaSetStore: di.inject(replicaSetStoreInjectable),
   }),
 });

src/renderer/components/+workloads-statefulsets/statefulsets.scss

@@ -17,8 +17,6 @@
       @include table-cell-warning;
     }
 
-    a.filterNamespace {
+
-      border-bottom: unset;
-    }
   }
 }

src/renderer/components/+workloads-statefulsets/statefulsets.tsx

@@ -14,12 +14,10 @@ import { SiblingsInTabLayout } from "../layout/siblings-in-tab-layout";
 import { KubeObjectAge } from "../kube-object/age";
 import type { StatefulSetStore } from "./store";
 import type { EventStore } from "../+events/store";
-import type { FilterByNamespace } from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import eventStoreInjectable from "../+events/store.injectable";
-import filterByNamespaceInjectable from "../+namespaces/namespace-select-filter-model/filter-by-namespace.injectable";
 import statefulSetStoreInjectable from "./store.injectable";
-import { prevDefault } from "../../utils";
+import { NamespaceSelectBadge } from "../+namespaces/namespace-select-badge";
 
 enum columnId {
   name = "name",
@@ -32,7 +30,6 @@ enum columnId {
 interface Dependencies {
   statefulSetStore: StatefulSetStore;
   eventStore: EventStore;
-  filterByNamespace: FilterByNamespace;
 }
 
 const renderPodCounts = (statefulSet: StatefulSet) => {
@@ -44,7 +41,6 @@ const renderPodCounts = (statefulSet: StatefulSet) => {
 const NonInjectedStatefulSets = observer((props: Dependencies) => {
   const {
     eventStore,
-    filterByNamespace,
     statefulSetStore,
   } = props;
 
@@ -68,21 +64,28 @@ const NonInjectedStatefulSets = observer((props: Dependencies) => {
         renderHeaderTitle="Stateful Sets"
         renderTableHeader={[
           { title: "Name", className: "name", sortBy: columnId.name, id: columnId.name },
-          { title: "Namespace", className: "namespace", sortBy: columnId.namespace, id: columnId.namespace },
+          {
+            title: "Namespace",
+            className: "namespace",
+            sortBy: columnId.namespace,
+            id: columnId.namespace,
+          },
           { title: "Pods", className: "pods", id: columnId.pods },
-          { title: "Replicas", className: "replicas", sortBy: columnId.replicas, id: columnId.replicas },
+          {
+            title: "Replicas",
+            className: "replicas",
+            sortBy: columnId.replicas,
+            id: columnId.replicas,
+          },
           { className: "warning", showWithColumn: columnId.replicas },
           { title: "Age", className: "age", sortBy: columnId.age, id: columnId.age },
         ]}
         renderTableContents={statefulSet => [
           statefulSet.getName(),
-          <a
+          <NamespaceSelectBadge
             key="namespace"
-            className="filterNamespace"
+            namespace={statefulSet.getNs()}
-            onClick={prevDefault(() => filterByNamespace(statefulSet.getNs()))}
+          />,
-          >
-            {statefulSet.getNs()}
-          </a>,
           renderPodCounts(statefulSet),
           statefulSet.getReplicas(),
           <KubeObjectStatusIcon key="icon" object={statefulSet} />,
@@ -97,7 +100,6 @@ export const StatefulSets = withInjectables<Dependencies>(NonInjectedStatefulSet
   getProps: (di, props) => ({
     ...props,
     eventStore: di.inject(eventStoreInjectable),
-    filterByNamespace: di.inject(filterByNamespaceInjectable),
     statefulSetStore: di.inject(statefulSetStoreInjectable),
   }),
 });

src/renderer/components/drawer/drawer.scss

@@ -86,9 +86,5 @@
   .drawer-content {
     overflow: auto;
     padding: var(--spacing);
-
-    .Table .TableHead {
-      border-bottom: 1px solid var(--borderFaintColor);
-    }
   }
 }

src/renderer/components/kube-object-meta/kube-object-meta.tsx

@@ -62,7 +62,7 @@ const NonInjectedKubeObjectMeta = observer(({
 
   return (
     <>
-      <DrawerItem name="Created" hidden={isHidden("creationTimestamp")}>
+      <DrawerItem name="Created" hidden={isHidden("creationTimestamp") || !creationTimestamp}>
         <KubeObjectAge object={object} compact={false} />
         {" ago "}
         {creationTimestamp && <LocaleDate date={creationTimestamp} />}