Improving metric queries (#3424)

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

@@ -23,16 +23,15 @@ import "./ingress-details.scss";
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { reaction } from "mobx";
+import { observable, reaction } from "mobx";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import type { ILoadBalancerIngress, Ingress } from "../../api/endpoints";
 import { Table, TableCell, TableHead, TableRow } from "../table";
-import { ingressStore } from "./ingress.store";
 import { ResourceMetrics } from "../resource-metrics";
 import type { KubeObjectDetailsProps } from "../kube-object";
 import { IngressCharts } from "./ingress-charts";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
-import { getBackendServiceNamePort } from "../../api/endpoints/ingress.api";
+import { getBackendServiceNamePort, getMetricsForIngress, IIngressMetrics } from "../../api/endpoints/ingress.api";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../main/cluster";
 
@@ -41,13 +40,17 @@ interface Props extends KubeObjectDetailsProps<Ingress> {
 
 @observer
 export class IngressDetails extends React.Component<Props> {
+  @observable metrics: IIngressMetrics = null;
+
   @disposeOnUnmount
   clean = reaction(() => this.props.object, () => {
-    ingressStore.reset();
+    this.metrics = null;
   });
 
-  componentWillUnmount() {
-    ingressStore.reset();
+  async loadMetrics() {
+    const { object: ingress } = this.props;
+
+    this.metrics = await getMetricsForIngress(ingress.getName(), ingress.getNs());
   }
 
   renderPaths(ingress: Ingress) {
@@ -124,7 +127,7 @@ export class IngressDetails extends React.Component<Props> {
 
     const { spec, status } = ingress;
     const ingressPoints = status?.loadBalancer?.ingress;
-    const { metrics } = ingressStore;
+    const { metrics } = this;
     const metricTabs = [
       "Network",
       "Duration",
@@ -136,7 +139,7 @@ export class IngressDetails extends React.Component<Props> {
       <div className="IngressDetails">
         {!isMetricHidden && (
           <ResourceMetrics
-            loader={() => ingressStore.loadMetrics(ingress)}
+            loader={this.loadMetrics}
             tabs={metricTabs} object={ingress} params={{ metrics }}
           >
             <IngressCharts/>

src/renderer/components/+network-ingresses/ingress.store.ts

@@ -18,31 +18,12 @@
  * 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 { observable, makeObservable } from "mobx";
-import { KubeObjectStore } from "../../kube-object.store";
-import { autoBind } from "../../utils";
-import { IIngressMetrics, Ingress, ingressApi } from "../../api/endpoints";
 import { apiManager } from "../../api/api-manager";
+import { Ingress, ingressApi } from "../../api/endpoints";
+import { KubeObjectStore } from "../../kube-object.store";
 
 export class IngressStore extends KubeObjectStore<Ingress> {
   api = ingressApi;
-  @observable metrics: IIngressMetrics = null;
-
-  constructor() {
-    super();
-
-    makeObservable(this);
-    autoBind(this);
-  }
-
-  async loadMetrics(ingress: Ingress) {
-    this.metrics = await this.api.getMetrics(ingress.getName(), ingress.getNs());
-  }
-
-  reset() {
-    this.metrics = null;
-  }
 }
 
 export const ingressStore = new IngressStore();