Inject dependencies to PodDetailsList

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -183,7 +183,6 @@ class NonInjectedNodeDetails extends React.Component<NodeDetailsProps & Dependen
         <NodeDetailsResources node={node} type="allocatable"/>
         <PodDetailsList
           pods={childPods}
-          owner={node}
           maxCpu={node.getCpuCapacity()}
           maxMemory={node.getMemoryCapacity()}
         />

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

@@ -133,7 +133,7 @@ class NonInjectedDaemonSetDetails extends React.Component<DaemonSetDetailsProps
           <PodDetailsStatuses pods={childPods}/>
         </DrawerItem>
         <ResourceMetricsText metrics={this.metrics}/>
-        <PodDetailsList pods={childPods} owner={daemonSet}/>
+        <PodDetailsList pods={childPods}/>
       </div>
     );
   }

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

@@ -161,7 +161,7 @@ class NonInjectedDeploymentDetails extends React.Component<DeploymentDetailsProp
         <PodDetailsAffinities workload={deployment}/>
         <ResourceMetricsText metrics={this.metrics}/>
         <DeploymentReplicaSets replicaSets={replicaSets}/>
-        <PodDetailsList pods={childPods} owner={deployment}/>
+        <PodDetailsList pods={childPods}/>
       </div>
     );
   }

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

@@ -149,7 +149,7 @@ class NonInjectedJobDetails extends React.Component<JobDetailsProps & Dependenci
         <DrawerItem name="Pod Status" className="pod-status">
           <PodDetailsStatuses pods={childPods}/>
         </DrawerItem>
-        <PodDetailsList pods={childPods} owner={job}/>
+        <PodDetailsList pods={childPods} />
       </div>
     );
   }

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

@@ -5,20 +5,22 @@
 
 import "./pod-details-list.scss";
 
-import React from "react";
+import { withInjectables } from "@ogre-tools/injectable-react";
 import kebabCase from "lodash/kebabCase";
 import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { podStore } from "./legacy-store";
+import React from "react";
 import type { Pod } from "../../../common/k8s-api/endpoints";
-import { autoBind, bytesToUnits, cssNames, interval, prevDefault } from "../../utils";
+import { bytesToUnits, cssNames, interval, prevDefault } from "../../utils";
-import { LineProgress } from "../line-progress";
-import type { KubeObject } from "../../../common/k8s-api/kube-object";
-import { Table, TableCell, TableHead, TableRow } from "../table";
-import { Spinner } from "../spinner";
 import { DrawerTitle } from "../drawer";
-import { KubeObjectStatusIcon } from "../kube-object-status-icon";
 import { showDetails } from "../kube-detail-params";
+import getDetailsUrlInjectable, { type GetDetailsUrl } from "../kube-detail-params/get-details-url.injectable";
+import { KubeObjectStatusIcon } from "../kube-object-status-icon";
+import { LineProgress } from "../line-progress";
+import { Spinner } from "../spinner";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import type { PodStore } from "./store";
+import podStoreInjectable from "./store.injectable";
 
 enum sortBy {
   name = "name",
@@ -30,26 +32,25 @@ enum sortBy {
 
 export interface PodDetailsListProps {
   pods: Pod[];
-  owner: KubeObject;
   maxCpu?: number;
   maxMemory?: number;
 }
 
-@observer
+interface Dependencies {
-export class PodDetailsList extends React.Component<PodDetailsListProps> {
+  getDetailsUrl: GetDetailsUrl;
-  constructor(props: PodDetailsListProps) {
+  podStore: PodStore;
-    super(props);
+}
-    autoBind(this);
-  }
 
+@observer
+export class NonInjectedPodDetailsList extends React.Component<PodDetailsListProps & Dependencies> {
   private metricsWatcher = interval(120, () => {
-    podStore.loadKubeMetrics(this.props.owner.getNs());
+    this.props.podStore.loadKubeMetrics(this.props.pods[0]?.getNs());
   });
 
   componentDidMount() {
     this.metricsWatcher.start(true);
     disposeOnUnmount(this, [
-      reaction(() => this.props.owner, () => this.metricsWatcher.restart(true)),
+      reaction(() => this.props.pods[0]?.getNs(), () => this.metricsWatcher.restart(true)),
     ]);
   }
 
@@ -114,7 +115,7 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
       return;
     }
 
-    const metrics = podStore.getPodKubeMetrics(pod);
+    const metrics = this.props.podStore.getPodKubeMetrics(pod);
 
     return (
       <TableRow
@@ -138,7 +139,7 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
   }
 
   render() {
-    const { pods } = this.props;
+    const { pods, podStore } = this.props;
 
     if (!podStore.isLoaded) {
       return (
@@ -149,7 +150,11 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
     }
 
     if (!pods.length) {
-      return null;
+      return (
+        <div>
+          No items found
+        </div>
+      );
     }
 
     const virtual = pods.length > 20;
@@ -197,3 +202,11 @@ export class PodDetailsList extends React.Component<PodDetailsListProps> {
     );
   }
 }
+
+export const PodDetailsList = withInjectables<Dependencies, PodDetailsListProps>(NonInjectedPodDetailsList, {
+  getProps: (di, props) => ({
+    ...props,
+    getDetailsUrl: di.inject(getDetailsUrlInjectable),
+    podStore: di.inject(podStoreInjectable),
+  }),
+});

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

@@ -133,7 +133,7 @@ class NonInjectedReplicaSetDetails extends React.Component<ReplicaSetDetailsProp
           <PodDetailsStatuses pods={childPods}/>
         </DrawerItem>
         <ResourceMetricsText metrics={this.metrics}/>
-        <PodDetailsList pods={childPods} owner={replicaSet}/>
+        <PodDetailsList pods={childPods}/>
       </div>
     );
   }

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

@@ -132,7 +132,7 @@ class NonInjectedStatefulSetDetails extends React.Component<StatefulSetDetailsPr
           <PodDetailsStatuses pods={childPods}/>
         </DrawerItem>
         <ResourceMetricsText metrics={this.metrics}/>
-        <PodDetailsList pods={childPods} owner={statefulSet}/>
+        <PodDetailsList pods={childPods}/>
       </div>
     );
   }