refactor overview statuses to be more DRY (#912)

* refactor overview statuses to be more DRY

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

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

@@ -11,11 +11,9 @@ export class DaemonSetStore extends KubeObjectStore<DaemonSet> {
 
   @observable metrics: IPodMetrics = null;
 
-  loadMetrics(daemonSet: DaemonSet) {
+  async loadMetrics(daemonSet: DaemonSet) {
     const pods = this.getChildPods(daemonSet);
-    return podsApi.getMetrics(pods, daemonSet.getNs(), "").then(metrics =>
-      this.metrics = metrics
-    );
+    this.metrics = await podsApi.getMetrics(pods, daemonSet.getNs(), "");
   }
 
   getChildPods(daemonSet: DaemonSet): Pod[] {

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

@@ -16,11 +16,9 @@ export class DeploymentStore extends KubeObjectStore<Deployment> {
     ], "desc");
   }
 
-  loadMetrics(deployment: Deployment) {
+  async loadMetrics(deployment: Deployment) {
     const pods = this.getChildPods(deployment);
-    return podsApi.getMetrics(pods, deployment.getNs(), "").then(metrics =>
-      this.metrics = metrics
-    );
+    this.metrics = await podsApi.getMetrics(pods, deployment.getNs(), "");
   }
 
   getStatuses(deployments?: Deployment[]) {

src/renderer/components/+workloads-overview/overview-statuses.tsx

@@ -5,72 +5,54 @@ import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
 import { OverviewWorkloadStatus } from "./overview-workload-status";
 import { Link } from "react-router-dom";
-import { cronJobsURL, daemonSetsURL, deploymentsURL, jobsURL, podsURL, statefulSetsURL } from "../+workloads";
-import { podsStore } from "../+workloads-pods/pods.store";
-import { deploymentStore } from "../+workloads-deployments/deployments.store";
-import { daemonSetStore } from "../+workloads-daemonsets/daemonsets.store";
-import { statefulSetStore } from "../+workloads-statefulsets/statefulset.store";
-import { jobStore } from "../+workloads-jobs/job.store";
-import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
+import { workloadURL, workloadStores } from "../+workloads";
 import { namespaceStore } from "../+namespaces/namespace.store";
 import { PageFiltersList } from "../item-object-list/page-filters-list";
 import { NamespaceSelectFilter } from "../+namespaces/namespace-select";
-import { isAllowedResource } from "../../../common/rbac";
+import { isAllowedResource, KubeResource } from "../../../common/rbac";
+import { ResourceNames } from "../../../renderer/utils/rbac";
+import { autobind } from "../../utils";
+import { _i18n } from "../../i18n";
+
+const resources: KubeResource[] = [
+  "pods",
+  "deployments",
+  "statefulsets",
+  "daemonsets",
+  "jobs",
+  "cronjobs",
+]
 
 @observer
 export class OverviewStatuses extends React.Component {
+  @autobind()
+  renderWorkload(resource: KubeResource): React.ReactElement {
+    const store = workloadStores[resource];
+    const items = store.getAllByNs(namespaceStore.contextNs)
+    return (
+      <div className="workload" key={resource}>
+        <div className="title">
+          <Link to={workloadURL[resource]()}>{ResourceNames[resource]} ({items.length})</Link>
+        </div>
+        <OverviewWorkloadStatus status={store.getStatuses(items)} />
+      </div>
+    )
+  }
+
   render() {
-    const { contextNs } = namespaceStore;
-    const pods = isAllowedResource("pods") ? podsStore.getAllByNs(contextNs) : [];
-    const deployments = isAllowedResource("deployments") ? deploymentStore.getAllByNs(contextNs) : [];
-    const statefulSets = isAllowedResource("statefulsets") ? statefulSetStore.getAllByNs(contextNs) : [];
-    const daemonSets = isAllowedResource("daemonsets") ? daemonSetStore.getAllByNs(contextNs) : [];
-    const jobs = isAllowedResource("jobs") ? jobStore.getAllByNs(contextNs) : [];
-    const cronJobs = isAllowedResource("cronjobs") ? cronJobStore.getAllByNs(contextNs) : [];
+    const workloads = resources
+      .filter(isAllowedResource)
+      .map(this.renderWorkload);
+
     return (
       <div className="OverviewStatuses">
         <div className="header flex gaps align-center">
           <h5 className="box grow"><Trans>Overview</Trans></h5>
-          <NamespaceSelectFilter/>
+          <NamespaceSelectFilter />
         </div>
-        <PageFiltersList/>
+        <PageFiltersList />
         <div className="workloads">
-          {isAllowedResource("pods") &&
-          <div className="workload">
-            <div className="title"><Link to={podsURL()}><Trans>Pods</Trans> ({pods.length})</Link></div>
-            <OverviewWorkloadStatus status={podsStore.getStatuses(pods)}/>
-          </div>
-          }
-          {isAllowedResource("deployments") &&
-          <div className="workload">
-            <div className="title"><Link to={deploymentsURL()}><Trans>Deployments</Trans> ({deployments.length})</Link></div>
-            <OverviewWorkloadStatus status={deploymentStore.getStatuses(deployments)}/>
-          </div>
-          }
-          {isAllowedResource("statefulsets") &&
-          <div className="workload">
-            <div className="title"><Link to={statefulSetsURL()}><Trans>StatefulSets</Trans> ({statefulSets.length})</Link></div>
-            <OverviewWorkloadStatus status={statefulSetStore.getStatuses(statefulSets)}/>
-          </div>
-          }
-          {isAllowedResource("daemonsets") &&
-          <div className="workload">
-            <div className="title"><Link to={daemonSetsURL()}><Trans>DaemonSets</Trans> ({daemonSets.length})</Link></div>
-            <OverviewWorkloadStatus status={daemonSetStore.getStatuses(daemonSets)}/>
-          </div>
-          }
-          {isAllowedResource("jobs") &&
-          <div className="workload">
-            <div className="title"><Link to={jobsURL()}><Trans>Jobs</Trans> ({jobs.length})</Link></div>
-            <OverviewWorkloadStatus status={jobStore.getStatuses(jobs)}/>
-          </div>
-          }
-          {isAllowedResource("cronjobs") &&
-          <div className="workload">
-            <div className="title"><Link to={cronJobsURL()}><Trans>CronJobs</Trans> ({cronJobs.length})</Link></div>
-            <OverviewWorkloadStatus status={cronJobStore.getStatuses(cronJobs)}/>
-          </div>
-          }
+          {workloads}
         </div>
       </div>
     )

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

@@ -10,11 +10,9 @@ export class ReplicaSetStore extends KubeObjectStore<ReplicaSet> {
   api = replicaSetApi
   @observable metrics: IPodMetrics = null;
 
-  loadMetrics(replicaSet: ReplicaSet) {
+  async loadMetrics(replicaSet: ReplicaSet) {
     const pods = this.getChildPods(replicaSet);
-    return podsApi.getMetrics(pods, replicaSet.getNs(), "").then(metrics =>
-      this.metrics = metrics
-    );
+    this.metrics = await podsApi.getMetrics(pods, replicaSet.getNs(), "");
   }
 
   getChildPods(replicaSet: ReplicaSet) {

src/renderer/components/+workloads-statefulsets/statefulset.store.ts

@@ -10,11 +10,9 @@ export class StatefulSetStore extends KubeObjectStore<StatefulSet> {
   api = statefulSetApi
   @observable metrics: IPodMetrics = null;
 
-  loadMetrics(statefulSet: StatefulSet) {
+  async loadMetrics(statefulSet: StatefulSet) {
     const pods = this.getChildPods(statefulSet);
-    return podsApi.getMetrics(pods, statefulSet.getNs(), "").then(metrics =>
-      this.metrics = metrics
-    );
+    this.metrics = await podsApi.getMetrics(pods, statefulSet.getNs(), "");
   }
 
   getChildPods(statefulSet: StatefulSet) {

src/renderer/components/+workloads/index.ts

@@ -1,3 +1,3 @@
 export * from "./workloads.route"
 export * from "./workloads"
-
+export * from "./workloads.stores"

src/renderer/components/+workloads/workloads.route.ts

@@ -1,6 +1,7 @@
 import { RouteProps } from "react-router"
 import { Workloads } from "./workloads";
 import { buildURL, IURLParams } from "../../navigation";
+import { KubeResource } from "../../../common/rbac";
 
 export const workloadsRoute: RouteProps = {
   get path() {
@@ -62,3 +63,12 @@ export const daemonSetsURL = buildURL<IDaemonSetsRouteParams>(daemonSetsRoute.pa
 export const statefulSetsURL = buildURL<IStatefulSetsRouteParams>(statefulSetsRoute.path)
 export const jobsURL = buildURL<IJobsRouteParams>(jobsRoute.path)
 export const cronJobsURL = buildURL<ICronJobsRouteParams>(cronJobsRoute.path)
+
+export const workloadURL: Partial<Record<KubeResource, ReturnType<typeof buildURL>>> = {
+  "pods": podsURL,
+  "deployments": deploymentsURL,
+  "daemonsets": daemonSetsURL,
+  "statefulsets": statefulSetsURL,
+  "jobs": jobsURL,
+  "cronjobs": cronJobsURL,
+}

src/renderer/components/+workloads/workloads.stores.ts

@@ -0,0 +1,17 @@
+import { KubeObjectStore } from "../../kube-object.store";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { deploymentStore } from "../+workloads-deployments/deployments.store";
+import { daemonSetStore } from "../+workloads-daemonsets/daemonsets.store";
+import { statefulSetStore } from "../+workloads-statefulsets/statefulset.store";
+import { jobStore } from "../+workloads-jobs/job.store";
+import { cronJobStore } from "../+workloads-cronjobs/cronjob.store";
+import { KubeResource } from "../../../common/rbac";
+
+export const workloadStores: Partial<Record<KubeResource, KubeObjectStore>> = {
+  "pods": podsStore,
+  "deployments": deploymentStore,
+  "daemonsets": daemonSetStore,
+  "statefulsets": statefulSetStore,
+  "jobs": jobStore,
+  "cronjobs": cronJobStore,
+}