Fix: cluster commands disappeared from Command Palette (#2886)

* Cluster commands disappeared from Command Palette, close #2760

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

* refactoring: get rid of ClusterStore.active && ClusterStore.activeCluster (managed via catalog's entity)

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

src/renderer/components/+cluster/cluster-overview.tsx

@@ -26,7 +26,7 @@ import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { nodesStore } from "../+nodes/nodes.store";
 import { podsStore } from "../+workloads-pods/pods.store";
-import { ClusterStore, getHostedCluster } from "../../../common/cluster-store";
+import { getHostedCluster } from "../../../common/cluster-store";
 import { interval } from "../../utils";
 import { TabLayout } from "../layout/tab-layout";
 import { Spinner } from "../spinner";
@@ -34,7 +34,8 @@ import { ClusterIssues } from "./cluster-issues";
 import { ClusterMetrics } from "./cluster-metrics";
 import { clusterOverviewStore } from "./cluster-overview.store";
 import { ClusterPieCharts } from "./cluster-pie-charts";
-import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
 
 @observer
 export class ClusterOverview extends React.Component {
@@ -87,12 +88,12 @@ export class ClusterOverview extends React.Component {
 
   render() {
     const isLoaded = nodesStore.isLoaded && podsStore.isLoaded;
-    const isMetricsHidden = ClusterStore.getInstance().isMetricHidden(ResourceType.Cluster);
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Cluster);
 
     return (
       <TabLayout>
         <div className="ClusterOverview">
-          {this.renderClusterOverview(isLoaded, isMetricsHidden)}
+          {this.renderClusterOverview(isLoaded, isMetricHidden)}
         </div>
       </TabLayout>
     );

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

@@ -35,8 +35,8 @@ import { IngressCharts } from "./ingress-charts";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 import { getBackendServiceNamePort } from "../../api/endpoints/ingress.api";
-import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
-import { ClusterStore } from "../../../common/cluster-store";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
 
 interface Props extends KubeObjectDetailsProps<Ingress> {
 }
@@ -74,7 +74,7 @@ export class IngressDetails extends React.Component<Props> {
               {
                 rule.http.paths.map((path, index) => {
                   const { serviceName, servicePort } = getBackendServiceNamePort(path.backend);
-                  const backend =`${serviceName}:${servicePort}`;
+                  const backend = `${serviceName}:${servicePort}`;
 
                   return (
                     <TableRow key={index}>
@@ -94,22 +94,23 @@ export class IngressDetails extends React.Component<Props> {
   }
 
   renderIngressPoints(ingressPoints: ILoadBalancerIngress[]) {
-    if (!ingressPoints || ingressPoints.length === 0) return null;
+    if (!ingressPoints || ingressPoints.length === 0) return null;
 
     return (
       <div>
         <Table className="ingress-points">
           <TableHead>
-            <TableCell className="name" >Hostname</TableCell>
+            <TableCell className="name">Hostname</TableCell>
             <TableCell className="ingresspoints">IP</TableCell>
           </TableHead>
-          {ingressPoints.map(({hostname, ip}, index) => {
+          {ingressPoints.map(({ hostname, ip }, index) => {
             return (
               <TableRow key={index}>
                 <TableCell className="name">{hostname ? hostname : "-"}</TableCell>
                 <TableCell className="ingresspoints">{ip ? ip : "-"}</TableCell>
               </TableRow>
-            );})
+            );
+          })
           })
         </Table>
       </div>
@@ -130,7 +131,7 @@ export class IngressDetails extends React.Component<Props> {
       "Network",
       "Duration",
     ];
-    const isMetricHidden = ClusterStore.getInstance().isMetricHidden(ResourceType.Ingress);
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Ingress);
     const { serviceName, servicePort } = ingress.getServiceNamePort();
 
     return (

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

@@ -38,8 +38,8 @@ import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
-import { ClusterStore } from "../../../common/cluster-store";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
 import { NodeDetailsResources } from "./node-details-resources";
 import { DrawerTitle } from "../drawer/drawer-title";
 
@@ -77,7 +77,7 @@ export class NodeDetails extends React.Component<Props> {
       "Disk",
       "Pods",
     ];
-    const isMetricHidden = ClusterStore.getInstance().isMetricHidden(ResourceType.Node);
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Node);
 
     return (
       <div className="NodeDetails">

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

@@ -35,8 +35,8 @@ import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
 import { getDetailsUrl, KubeObjectDetailsProps, KubeObjectMeta } from "../kube-object";
 import type { PersistentVolumeClaim } from "../../api/endpoints";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
-import { ClusterStore } from "../../../common/cluster-store";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
 
 interface Props extends KubeObjectDetailsProps<PersistentVolumeClaim> {
 }
@@ -64,7 +64,7 @@ export class PersistentVolumeClaimDetails extends React.Component<Props> {
     const metricTabs = [
       "Disk"
     ];
-    const isMetricHidden = ClusterStore.getInstance().isMetricHidden(ResourceType.VolumeClaim);
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.VolumeClaim);
 
     return (
       <div className="PersistentVolumeClaimDetails">

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

@@ -39,8 +39,8 @@ import { reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
-import { ClusterStore } from "../../../common/cluster-store";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
 
 interface Props extends KubeObjectDetailsProps<DaemonSet> {
 }
@@ -70,7 +70,7 @@ export class DaemonSetDetails extends React.Component<Props> {
     const nodeSelector = daemonSet.getNodeSelectors();
     const childPods = daemonSetStore.getChildPods(daemonSet);
     const metrics = daemonSetStore.metrics;
-    const isMetricHidden = ClusterStore.getInstance().isMetricHidden(ResourceType.DaemonSet);
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.DaemonSet);
 
     return (
       <div className="DaemonSetDetails">

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

@@ -40,10 +40,10 @@ import { reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
-import { ClusterStore } from "../../../common/cluster-store";
 import { replicaSetStore } from "../+workloads-replicasets/replicasets.store";
 import { DeploymentReplicaSets } from "./deployment-replicasets";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
 
 interface Props extends KubeObjectDetailsProps<Deployment> {
 }
@@ -74,7 +74,7 @@ export class DeploymentDetails extends React.Component<Props> {
     const childPods = deploymentStore.getChildPods(deployment);
     const replicaSets = replicaSetStore.getReplicaSetsByOwner(deployment);
     const metrics = deploymentStore.metrics;
-    const isMetricHidden = ClusterStore.getInstance().isMetricHidden(ResourceType.Deployment);
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Deployment);
 
     return (
       <div className="DeploymentDetails">

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

@@ -32,9 +32,9 @@ import { PodContainerPort } from "./pod-container-port";
 import { ResourceMetrics } from "../resource-metrics";
 import type { IMetrics } from "../../api/endpoints/metrics.api";
 import { ContainerCharts } from "./container-charts";
-import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
 import { LocaleDate } from "../locale-date";
-import { ClusterStore } from "../../../common/cluster-store";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
 
 interface Props {
   pod: Pod;
@@ -89,7 +89,7 @@ export class PodDetailsContainer extends React.Component<Props> {
       "Memory",
       "Filesystem",
     ];
-    const isMetricHidden = ClusterStore.getInstance().isMetricHidden(ResourceType.Container);
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Container);
 
     return (
       <div className="PodDetailsContainer">
@@ -125,7 +125,7 @@ export class PodDetailsContainer extends React.Component<Props> {
             ports.map((port) => {
               const key = `${container.name}-port-${port.containerPort}-${port.protocol}`;
 
-              return(
+              return (
                 <PodContainerPort pod={pod} port={port} key={key}/>
               );
             })

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

@@ -43,8 +43,8 @@ import { getItemMetrics } from "../../api/endpoints/metrics.api";
 import { PodCharts, podMetricTabs } from "./pod-charts";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
-import { ClusterStore } from "../../../common/cluster-store";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
 
 interface Props extends KubeObjectDetailsProps<Pod> {
 }
@@ -94,7 +94,7 @@ export class PodDetails extends React.Component<Props> {
     const nodeSelector = pod.getNodeSelectors();
     const volumes = pod.getVolumes();
     const metrics = podsStore.metrics;
-    const isMetricHidden = ClusterStore.getInstance().isMetricHidden(ResourceType.Pod);
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Pod);
 
     return (
       <div className="PodDetails">

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

@@ -38,8 +38,8 @@ import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
-import { ClusterStore } from "../../../common/cluster-store";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
 
 interface Props extends KubeObjectDetailsProps<ReplicaSet> {
 }
@@ -70,7 +70,7 @@ export class ReplicaSetDetails extends React.Component<Props> {
     const nodeSelector = replicaSet.getNodeSelectors();
     const images = replicaSet.getImages();
     const childPods = replicaSetStore.getChildPods(replicaSet);
-    const isMetricHidden = ClusterStore.getInstance().isMetricHidden(ResourceType.ReplicaSet);
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.ReplicaSet);
 
     return (
       <div className="ReplicaSetDetails">

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

@@ -39,8 +39,8 @@ import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
-import { ResourceType } from "../cluster-settings/components/cluster-metrics-setting";
-import { ClusterStore } from "../../../common/cluster-store";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { ClusterMetricsResourceType } from "../../../main/cluster";
 
 interface Props extends KubeObjectDetailsProps<StatefulSet> {
 }
@@ -69,7 +69,7 @@ export class StatefulSetDetails extends React.Component<Props> {
     const nodeSelector = statefulSet.getNodeSelectors();
     const childPods = statefulSetStore.getChildPods(statefulSet);
     const metrics = statefulSetStore.metrics;
-    const isMetricHidden = ClusterStore.getInstance().isMetricHidden(ResourceType.StatefulSet);
+    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.StatefulSet);
 
     return (
       <div className="StatefulSetDetails">
@@ -117,7 +117,6 @@ export class StatefulSetDetails extends React.Component<Props> {
   }
 }
 
-
 kubeObjectDetailRegistry.add({
   kind: "StatefulSet",
   apiVersions: ["apps/v1"],

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

@@ -35,6 +35,8 @@ import { catalogURL } from "../+catalog/catalog.route";
 
 @observer
 export class ClusterView extends React.Component {
+  private store = ClusterStore.getInstance();
+
   constructor(props: {}) {
     super(props);
     makeObservable(this);
@@ -45,7 +47,7 @@ export class ClusterView extends React.Component {
   }
 
   @computed get cluster(): Cluster | undefined {
-    return ClusterStore.getInstance().getById(this.clusterId);
+    return this.store.getById(this.clusterId);
   }
 
   @computed get isReady(): boolean {

src/renderer/components/cluster-settings/cluster-settings.command.ts

@@ -22,7 +22,7 @@
 import { navigate } from "../../navigation";
 import { commandRegistry } from "../../../extensions/registries/command-registry";
 import { entitySettingsURL } from "../+entity-settings";
-import { ClusterStore } from "../../../common/cluster-store";
+import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 
 commandRegistry.add({
   id: "cluster.viewCurrentClusterSettings",
@@ -30,7 +30,7 @@ commandRegistry.add({
   scope: "global",
   action: () => navigate(entitySettingsURL({
     params: {
-      entityId: ClusterStore.getInstance().active.id
+      entityId: getActiveClusterEntity()?.id,
     }
   })),
   isActive: (context) => !!context.entity

src/renderer/components/cluster-settings/components/cluster-metrics-setting.tsx

@@ -25,26 +25,13 @@ import { Select, SelectOption } from "../../select/select";
 import { Icon } from "../../icon/icon";
 import { Button } from "../../button/button";
 import { SubTitle } from "../../layout/sub-title";
-import type { Cluster } from "../../../../main/cluster";
+import { Cluster, ClusterMetricsResourceType } from "../../../../main/cluster";
 import { observable, reaction, makeObservable } from "mobx";
 
 interface Props {
   cluster: Cluster;
 }
 
-export enum ResourceType {
-  Cluster = "Cluster",
-  Node = "Node",
-  Pod = "Pod",
-  Deployment = "Deployment",
-  StatefulSet = "StatefulSet",
-  Container = "Container",
-  Ingress = "Ingress",
-  VolumeClaim = "VolumeClaim",
-  ReplicaSet = "ReplicaSet",
-  DaemonSet = "DaemonSet",
-}
-
 @observer
 export class ClusterMetricsSetting extends React.Component<Props> {
   @observable hiddenMetrics = observable.set<string>();
@@ -68,7 +55,7 @@ export class ClusterMetricsSetting extends React.Component<Props> {
     this.props.cluster.preferences.hiddenMetrics = Array.from(this.hiddenMetrics);
   };
 
-  onChangeSelect = (values: SelectOption<ResourceType>[]) => {
+  onChangeSelect = (values: SelectOption<ClusterMetricsResourceType>[]) => {
     for (const { value } of values) {
       if (this.hiddenMetrics.has(value)) {
         this.hiddenMetrics.delete(value);
@@ -80,7 +67,7 @@ export class ClusterMetricsSetting extends React.Component<Props> {
   };
 
   onChangeButton = () => {
-    Object.keys(ResourceType).map(value =>
+    Object.keys(ClusterMetricsResourceType).map(value =>
       this.hiddenMetrics.add(value)
     );
     this.save();
@@ -91,7 +78,7 @@ export class ClusterMetricsSetting extends React.Component<Props> {
     this.save();
   };
 
-  formatOptionLabel = ({ value: resource }: SelectOption<ResourceType>) => (
+  formatOptionLabel = ({ value: resource }: SelectOption<ClusterMetricsResourceType>) => (
     <div className="flex gaps align-center">
       <span>{resource}</span>
       {this.hiddenMetrics.has(resource) && <Icon smallest material="check" className="box right" />}
@@ -110,7 +97,7 @@ export class ClusterMetricsSetting extends React.Component<Props> {
           onMenuClose={this.save}
           closeMenuOnSelect={false}
           controlShouldRenderValue={false}
-          options={Object.values(ResourceType)}
+          options={Object.values(ClusterMetricsResourceType)}
           onChange={this.onChangeSelect}
           formatOptionLabel={this.formatOptionLabel}
         />

src/renderer/components/command-palette/command-container.tsx

@@ -30,6 +30,7 @@ import { subscribeToBroadcast } from "../../../common/ipc";
 import { CommandDialog } from "./command-dialog";
 import { CommandRegistration, commandRegistry } from "../../../extensions/registries/command-registry";
 import type { ClusterId } from "../../../common/cluster-store";
+import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 
 export type CommandDialogEvent = {
   component: React.ReactElement
@@ -78,7 +79,7 @@ export class CommandContainer extends React.Component<CommandContainerProps> {
 
   private runCommand(command: CommandRegistration) {
     command.action({
-      entity: commandRegistry.activeEntity
+      entity: catalogEntityRegistry.activeEntity
     });
   }
 

src/renderer/components/command-palette/command-dialog.tsx

@@ -25,11 +25,12 @@ import { computed, makeObservable, observable } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { commandRegistry } from "../../../extensions/registries/command-registry";
-import { ClusterStore } from "../../../common/cluster-store";
 import { CommandOverlay } from "./command-container";
 import { broadcastMessage } from "../../../common/ipc";
 import { navigate } from "../../navigation";
 import { clusterViewURL } from "../cluster-manager/cluster-view.route";
+import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
+import type { CatalogEntity } from "../../../common/catalog";
 
 @observer
 export class CommandDialog extends React.Component {
@@ -39,14 +40,18 @@ export class CommandDialog extends React.Component {
     super(props);
     makeObservable(this);
   }
-
+  
+  @computed get activeEntity(): CatalogEntity | undefined {
+    return catalogEntityRegistry.activeEntity;
+  }
+  
   @computed get options() {
     const context = {
-      entity: commandRegistry.activeEntity
+      entity: this.activeEntity
     };
 
     return commandRegistry.getItems().filter((command) => {
-      if (command.scope === "entity" && !ClusterStore.getInstance().active) {
+      if (command.scope === "entity" && !this.activeEntity) {
         return false;
       }
 
@@ -78,15 +83,15 @@ export class CommandDialog extends React.Component {
 
       if (command.scope === "global") {
         command.action({
-          entity: commandRegistry.activeEntity
+          entity: this.activeEntity
         });
-      } else if(commandRegistry.activeEntity) {
+      } else if(this.activeEntity) {
         navigate(clusterViewURL({
           params: {
-            clusterId: commandRegistry.activeEntity.metadata.uid
+            clusterId: this.activeEntity.metadata.uid
           }
         }));
-        broadcastMessage(`command-palette:run-action:${commandRegistry.activeEntity.metadata.uid}`, command.id);
+        broadcastMessage(`command-palette:run-action:${this.activeEntity.metadata.uid}`, command.id);
       }
     } catch(error) {
       console.error("[COMMAND-DIALOG] failed to execute command", command.id, error);