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,
+}

src/renderer/kube-object.store.ts

@@ -19,6 +19,8 @@ export abstract class KubeObjectStore<T extends KubeObject = any> extends ItemSt
     kubeWatchApi.addListener(this, this.onWatchApiEvent);
   }
 
+  getStatuses?(items: T[]): Record<string, number>;
+
   getAllByNs(namespace: string | string[], strict = false): T[] {
     const namespaces: string[] = [].concat(namespace);
     if (namespaces.length) {

src/renderer/utils/rbac.ts

@@ -0,0 +1,28 @@
+import { KubeResource } from "../../common/rbac";
+import { _i18n } from "../i18n";
+
+export const ResourceNames: Record<KubeResource, string> = {
+  "namespaces": _i18n._("Namespaces"),
+  "nodes": _i18n._("Nodes"),
+  "events": _i18n._("Events"),
+  "resourcequotas": _i18n._("Resource Quotas"),
+  "services": _i18n._("Services"),
+  "secrets": _i18n._("Secrets"),
+  "configmaps": _i18n._("Config Maps"),
+  "ingresses": _i18n._("Ingresses"),
+  "networkpolicies": _i18n._("Network Policies"),
+  "persistentvolumes": _i18n._("Persistent Volumes"),
+  "storageclasses": _i18n._("Storage Classes"),
+  "pods": _i18n._("Pods"),
+  "daemonsets": _i18n._("Daemon Sets"),
+  "deployments": _i18n._("Deployments"),
+  "statefulsets": _i18n._("Stateful Sets"),
+  "replicasets": _i18n._("Replica Sets"),
+  "jobs": _i18n._("Jobs"),
+  "cronjobs": _i18n._("Cron Jobs"),
+  "endpoints": _i18n._("Endpoints"),
+  "customresourcedefinitions": _i18n._("Custom Resource Definitions"),
+  "horizontalpodautoscalers": _i18n._("Horizontal Pod Autoscalers"),
+  "podsecuritypolicies": _i18n._("Pod Security Policies"),
+  "poddisruptionbudgets": _i18n._("Pod Disruption Budgets"),
+}