Add quick namespace filtering to Deployments view

Signed-off-by: Sebastian Malton <sebastian@malton.name>

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

@@ -42,5 +42,9 @@
         }
       }
     }
+
+    a.filterNamespace {
+      border-bottom: unset;
+    }
   }
 }

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

@@ -8,15 +8,20 @@ import "./deployments.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import type { Deployment } from "../../../common/k8s-api/endpoints";
-import { deploymentStore } from "./legacy-store";
-import { eventStore } from "../+events/legacy-store";
 import { KubeObjectListLayout } from "../kube-object-list-layout";
-import { cssNames } from "../../utils";
+import { cssNames, prevDefault } from "../../utils";
 import kebabCase from "lodash/kebabCase";
 import orderBy from "lodash/orderBy";
 import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 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";
 
 enum columnId {
   name = "name",
@@ -27,8 +32,14 @@ enum columnId {
   condition = "condition",
 }
 
+interface Dependencies {
+  deploymentStore: DeploymentStore;
+  eventStore: EventStore;
+  filterByNamespace: FilterByNamespace;
+}
+
 @observer
-export class Deployments extends React.Component {
+class NonInjectedDeployments extends React.Component<Dependencies> {
   renderPods(deployment: Deployment) {
     const { replicas, availableReplicas } = deployment.status ?? {};
 
@@ -50,6 +61,12 @@ export class Deployments extends React.Component {
   }
 
   render() {
+    const {
+      deploymentStore,
+      eventStore,
+      filterByNamespace,
+    } = this.props;
+
     return (
       <SiblingsInTabLayout>
         <KubeObjectListLayout
@@ -82,7 +99,13 @@ export class Deployments extends React.Component {
           renderTableContents={deployment => [
             deployment.getName(),
             <KubeObjectStatusIcon key="icon" object={deployment} />,
-            deployment.getNs(),
+            <a
+              key="namespace"
+              className="filterNamespace"
+              onClick={prevDefault(() => filterByNamespace(deployment.getNs()))}
+            >
+              {deployment.getNs()}
+            </a>,
             this.renderPods(deployment),
             deployment.getReplicas(),
             <KubeObjectAge key="age" object={deployment} />,
@@ -93,3 +116,12 @@ export class Deployments extends React.Component {
     );
   }
 }
+
+export const Deployments = withInjectables<Dependencies>(NonInjectedDeployments, {
+  getProps: (di, props) => ({
+    ...props,
+    deploymentStore: di.inject(deploymentStoreInjectable),
+    eventStore: di.inject(eventStoreInjectable),
+    filterByNamespace: di.inject(filterByNamespaceInjectable),
+  }),
+});

src/renderer/components/+workloads-deployments/legacy-store.ts

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import { asLegacyGlobalForExtensionApi } from "../../../extensions/as-legacy-globals-for-extension-api/as-legacy-global-object-for-extension-api";
-import deploymentStoreInjectable from "./store.injectable";
-
-/**
- * @deprecated use `di.inject(deploymentStoreInjectable)` instead
- */
-export const deploymentStore = asLegacyGlobalForExtensionApi(deploymentStoreInjectable);