Improving metric queries (#3424)

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

@@ -26,7 +26,7 @@ import kebabCase from "lodash/kebabCase";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
-import type { Deployment } from "../../api/endpoints";
+import { Deployment, getMetricsForDeployments, IPodMetrics } from "../../api/endpoints";
 import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
 import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
 import { podsStore } from "../+workloads-pods/pods.store";
@@ -34,22 +34,30 @@ import type { KubeObjectDetailsProps } from "../kube-object";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { deploymentStore } from "./deployments.store";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
-import { reaction } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { replicaSetStore } from "../+workloads-replicasets/replicasets.store";
 import { DeploymentReplicaSets } from "./deployment-replicasets";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../main/cluster";
+import { boundMethod } from "../../utils";
 
 interface Props extends KubeObjectDetailsProps<Deployment> {
 }
 
 @observer
 export class DeploymentDetails extends React.Component<Props> {
+  @observable metrics: IPodMetrics = null;
+
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @disposeOnUnmount
   clean = reaction(() => this.props.object, () => {
-    deploymentStore.reset();
+    this.metrics = null;
   });
 
   componentDidMount() {
@@ -57,8 +65,11 @@ export class DeploymentDetails extends React.Component<Props> {
     replicaSetStore.reloadAll();
   }
 
-  componentWillUnmount() {
-    deploymentStore.reset();
+  @boundMethod
+  async loadMetrics() {
+    const { object: deployment } = this.props;
+
+    this.metrics = await getMetricsForDeployments([deployment], deployment.getNs(), "");
   }
 
   render() {
@@ -70,15 +81,14 @@ export class DeploymentDetails extends React.Component<Props> {
     const selectors = deployment.getSelectors();
     const childPods = deploymentStore.getChildPods(deployment);
     const replicaSets = replicaSetStore.getReplicaSetsByOwner(deployment);
-    const metrics = deploymentStore.metrics;
     const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Deployment);
 
     return (
       <div className="DeploymentDetails">
         {!isMetricHidden && podsStore.isLoaded && (
           <ResourceMetrics
-            loader={() => deploymentStore.loadMetrics(deployment)}
-            tabs={podMetricTabs} object={deployment} params={{ metrics }}
+            loader={this.loadMetrics}
+            tabs={podMetricTabs} object={deployment} params={{ metrics: this.metrics }}
           >
             <PodCharts/>
           </ResourceMetrics>
@@ -132,7 +142,7 @@ export class DeploymentDetails extends React.Component<Props> {
         </DrawerItem>
         <PodDetailsTolerations workload={deployment}/>
         <PodDetailsAffinities workload={deployment}/>
-        <ResourceMetricsText metrics={metrics}/>
+        <ResourceMetricsText metrics={this.metrics}/>
         <DeploymentReplicaSets replicaSets={replicaSets}/>
         <PodDetailsList pods={childPods} owner={deployment}/>
       </div>

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

@@ -18,17 +18,16 @@
  * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
+import { makeObservable } from "mobx";
 
-import { observable, makeObservable } from "mobx";
-import { Deployment, deploymentApi, IPodMetrics, podsApi, PodStatus } from "../../api/endpoints";
-import { KubeObjectStore } from "../../kube-object.store";
-import { autoBind } from "../../utils";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { apiManager } from "../../api/api-manager";
+import { Deployment, deploymentApi, PodStatus } from "../../api/endpoints";
+import { KubeObjectStore } from "../../kube-object.store";
+import { autoBind } from "../../utils";
 
 export class DeploymentStore extends KubeObjectStore<Deployment> {
   api = deploymentApi;
-  @observable metrics: IPodMetrics = null;
 
   constructor() {
     super();
@@ -43,12 +42,6 @@ export class DeploymentStore extends KubeObjectStore<Deployment> {
     ], "desc");
   }
 
-  async loadMetrics(deployment: Deployment) {
-    const pods = this.getChildPods(deployment);
-
-    this.metrics = await podsApi.getMetrics(pods, deployment.getNs(), "");
-  }
-
   getStatuses(deployments?: Deployment[]) {
     const status = { failed: 0, pending: 0, running: 0 };
 
@@ -74,10 +67,6 @@ export class DeploymentStore extends KubeObjectStore<Deployment> {
       .getByLabel(deployment.getTemplateLabels())
       .filter(pod => pod.getNs() === deployment.getNs());
   }
-
-  reset() {
-    this.metrics = null;
-  }
 }
 
 export const deploymentStore = new DeploymentStore();