Lens restructure (#540)

Signed-off-by: Roman <ixrock@gmail.com>

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

@@ -0,0 +1,2 @@
+.DaemonSetDetails {
+}

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

@@ -0,0 +1,102 @@
+import "./daemonset-details.scss";
+
+import React from "react";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { DrawerItem } from "../drawer";
+import { Badge } from "../badge";
+import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses";
+import { PodDetailsTolerations } from "../+workloads-pods/pod-details-tolerations";
+import { PodDetailsAffinities } from "../+workloads-pods/pod-details-affinities";
+import { KubeEventDetails } from "../+events/kube-event-details";
+import { daemonSetStore } from "./daemonsets.store";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { DaemonSet, daemonSetApi } from "../../api/endpoints";
+import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
+import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
+import { reaction } from "mobx";
+import { PodDetailsList } from "../+workloads-pods/pod-details-list";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<DaemonSet> {
+}
+
+@observer
+export class DaemonSetDetails extends React.Component<Props> {
+  @disposeOnUnmount
+  clean = reaction(() => this.props.object, () => {
+    daemonSetStore.reset();
+  });
+
+  componentDidMount() {
+    if (!podsStore.isLoaded) {
+      podsStore.loadAll();
+    }
+  }
+
+  componentWillUnmount() {
+    daemonSetStore.reset();
+  }
+
+  render() {
+    const { object: daemonSet } = this.props;
+    if (!daemonSet) return null;
+    const { spec } = daemonSet
+    const selectors = daemonSet.getSelectors();
+    const images = daemonSet.getImages()
+    const nodeSelector = daemonSet.getNodeSelectors()
+    const childPods = daemonSetStore.getChildPods(daemonSet)
+    const metrics = daemonSetStore.metrics
+    return (
+      <div className="DaemonSetDetails">
+        {podsStore.isLoaded && (
+          <ResourceMetrics
+            loader={() => daemonSetStore.loadMetrics(daemonSet)}
+            tabs={podMetricTabs} object={daemonSet} params={{ metrics }}
+          >
+            <PodCharts/>
+          </ResourceMetrics>
+        )}
+        <KubeObjectMeta object={daemonSet}/>
+        {selectors.length > 0 &&
+        <DrawerItem name={<Trans>Selector</Trans>} labelsOnly>
+          {
+            selectors.map(label => <Badge key={label} label={label}/>)
+          }
+        </DrawerItem>
+        }
+        {nodeSelector.length > 0 &&
+        <DrawerItem name={<Trans>Node Selector</Trans>} labelsOnly>
+          {
+            nodeSelector.map(label => (<Badge key={label} label={label}/>))
+          }
+        </DrawerItem>
+        }
+        {images.length > 0 &&
+        <DrawerItem name={<Trans>Images</Trans>}>
+          {
+            images.map(image => <p key={image}>{image}</p>)
+          }
+        </DrawerItem>
+        }
+        <DrawerItem name={<Trans>Strategy Type</Trans>}>
+          {spec.updateStrategy.type}
+        </DrawerItem>
+        <PodDetailsTolerations workload={daemonSet}/>
+        <PodDetailsAffinities workload={daemonSet}/>
+        <DrawerItem name={<Trans>Pod Status</Trans>} className="pod-status">
+          <PodDetailsStatuses pods={childPods}/>
+        </DrawerItem>
+        <ResourceMetricsText metrics={metrics}/>
+        <PodDetailsList pods={childPods} owner={daemonSet}/>
+        <KubeEventDetails object={daemonSet}/>
+      </div>
+    )
+  }
+}
+
+apiManager.registerViews(daemonSetApi, {
+  Details: DaemonSetDetails,
+})

src/renderer/components/+workloads-daemonsets/daemonsets.scss

@@ -0,0 +1,20 @@
+.DaemonSets {
+  .TableCell {
+    &.name {
+      flex-grow: 1.6;
+    }
+
+    &.pods {
+      flex-grow: 0.3;
+    }
+
+    &.warning {
+      @include table-cell-warning;
+    }
+
+    &.labels {
+      flex-grow: 1.5;
+      @include table-cell-labels-offsets;
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+import { observable } from "mobx";
+import { KubeObjectStore } from "../../kube-object.store";
+import { autobind } from "../../utils";
+import { DaemonSet, daemonSetApi, IPodMetrics, Pod, podsApi, PodStatus } from "../../api/endpoints";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class DaemonSetStore extends KubeObjectStore<DaemonSet> {
+  api = daemonSetApi
+
+  @observable metrics: IPodMetrics = null;
+
+  loadMetrics(daemonSet: DaemonSet) {
+    const pods = this.getChildPods(daemonSet);
+    return podsApi.getMetrics(pods, daemonSet.getNs(), "").then(metrics =>
+      this.metrics = metrics
+    );
+  }
+
+  getChildPods(daemonSet: DaemonSet): Pod[] {
+    return podsStore.getPodsByOwner(daemonSet)
+  }
+
+  getStatuses(daemonSets?: DaemonSet[]) {
+    const status = { failed: 0, pending: 0, running: 0 }
+    daemonSets.forEach(daemonSet => {
+      const pods = this.getChildPods(daemonSet)
+      if (pods.some(pod => pod.getStatus() === PodStatus.FAILED)) {
+        status.failed++
+      }
+      else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
+        status.pending++
+      }
+      else {
+        status.running++
+      }
+    })
+    return status
+  }
+
+  reset() {
+    this.metrics = null;
+  }
+}
+
+export const daemonSetStore = new DaemonSetStore();
+apiManager.registerStore(daemonSetApi, daemonSetStore);

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

@@ -0,0 +1,89 @@
+import "./daemonsets.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { RouteComponentProps } from "react-router";
+import { DaemonSet, daemonSetApi } from "../../api/endpoints";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { eventStore } from "../+events/event.store";
+import { daemonSetStore } from "./daemonsets.store";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { nodesStore } from "../+nodes/nodes.store";
+import { KubeObjectListLayout } from "../kube-object";
+import { IDaemonSetsRouteParams } from "../+workloads";
+import { Trans } from "@lingui/macro";
+import { Badge } from "../badge";
+import { KubeEventIcon } from "../+events/kube-event-icon";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  pods = "pods",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<IDaemonSetsRouteParams> {
+}
+
+@observer
+export class DaemonSets extends React.Component<Props> {
+  getPodsLength(daemonSet: DaemonSet) {
+    return daemonSetStore.getChildPods(daemonSet).length;
+  }
+
+  renderNodeSelector(daemonSet: DaemonSet) {
+    return daemonSet.getNodeSelectors().map(selector => (
+      <Badge key={selector} label={selector}/>
+    ))
+  }
+
+  render() {
+    return (
+      <KubeObjectListLayout
+        className="DaemonSets" store={daemonSetStore}
+        dependentStores={[podsStore, nodesStore, eventStore]}
+        sortingCallbacks={{
+          [sortBy.name]: (daemonSet: DaemonSet) => daemonSet.getName(),
+          [sortBy.namespace]: (daemonSet: DaemonSet) => daemonSet.getNs(),
+          [sortBy.pods]: (daemonSet: DaemonSet) => this.getPodsLength(daemonSet),
+          [sortBy.age]: (daemonSet: DaemonSet) => daemonSet.metadata.creationTimestamp,
+        }}
+        searchFilters={[
+          (daemonSet: DaemonSet) => daemonSet.getSearchFields(),
+          (daemonSet: DaemonSet) => daemonSet.getLabels(),
+        ]}
+        renderHeaderTitle={<Trans>Daemon Sets</Trans>}
+        renderTableHeader={[
+          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          { title: <Trans>Pods</Trans>, className: "pods", sortBy: sortBy.pods },
+          { className: "warning" },
+          { title: <Trans>Node Selector</Trans>, className: "labels" },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+        ]}
+        renderTableContents={(daemonSet: DaemonSet) => [
+          daemonSet.getName(),
+          daemonSet.getNs(),
+          this.getPodsLength(daemonSet),
+          <KubeEventIcon object={daemonSet}/>,
+          this.renderNodeSelector(daemonSet),
+          daemonSet.getAge(),
+        ]}
+        renderItemMenu={(item: DaemonSet) => {
+          return <DaemonSetMenu object={item}/>
+        }}
+      />
+    )
+  }
+}
+
+export function DaemonSetMenu(props: KubeObjectMenuProps<DaemonSet>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(daemonSetApi, {
+  Menu: DaemonSetMenu,
+})

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

@@ -0,0 +1,2 @@
+export * from "./daemonsets"
+export * from "./daemonset-details"