Lens restructure (#540)

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

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

@@ -0,0 +1,2 @@
+export * from "./statefulsets"
+export * from "./statefulset-details"

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

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

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

@@ -0,0 +1,100 @@
+import "./statefulset-details.scss";
+
+import React from "react";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { reaction } from "mobx";
+import { Trans } from "@lingui/macro";
+import { Badge } from "../badge";
+import { DrawerItem } from "../drawer";
+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 { podsStore } from "../+workloads-pods/pods.store";
+import { statefulSetStore } from "./statefulset.store";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { StatefulSet, statefulSetApi } from "../../api/endpoints";
+import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
+import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
+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<StatefulSet> {
+}
+
+@observer
+export class StatefulSetDetails extends React.Component<Props> {
+  @disposeOnUnmount
+  clean = reaction(() => this.props.object, () => {
+    statefulSetStore.reset();
+  });
+
+  componentDidMount() {
+    if (!podsStore.isLoaded) {
+      podsStore.loadAll();
+    }
+  }
+
+  componentWillUnmount() {
+    statefulSetStore.reset();
+  }
+
+  render() {
+    const { object: statefulSet } = this.props;
+    if (!statefulSet) return null
+    const images = statefulSet.getImages()
+    const selectors = statefulSet.getSelectors()
+    const nodeSelector = statefulSet.getNodeSelectors()
+    const childPods = statefulSetStore.getChildPods(statefulSet)
+    const metrics = statefulSetStore.metrics
+    return (
+      <div className="StatefulSetDetails">
+        {podsStore.isLoaded && (
+          <ResourceMetrics
+            loader={() => statefulSetStore.loadMetrics(statefulSet)}
+            tabs={podMetricTabs} object={statefulSet} params={{ metrics }}
+          >
+            <PodCharts/>
+          </ResourceMetrics>
+        )}
+        <KubeObjectMeta object={statefulSet}/>
+        {selectors.length &&
+        <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>
+        }
+        <PodDetailsTolerations workload={statefulSet}/>
+        <PodDetailsAffinities workload={statefulSet}/>
+        <DrawerItem name={<Trans>Pod Status</Trans>} className="pod-status">
+          <PodDetailsStatuses pods={childPods}/>
+        </DrawerItem>
+        <ResourceMetricsText metrics={metrics}/>
+        <PodDetailsList pods={childPods} owner={statefulSet}/>
+        <KubeEventDetails object={statefulSet}/>
+      </div>
+    )
+  }
+}
+
+apiManager.registerViews(statefulSetApi, {
+  Details: StatefulSetDetails
+})

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

@@ -0,0 +1,47 @@
+import { observable } from "mobx";
+import { autobind } from "../../utils";
+import { KubeObjectStore } from "../../kube-object.store";
+import { IPodMetrics, podsApi, PodStatus, StatefulSet, statefulSetApi } from "../../api/endpoints";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class StatefulSetStore extends KubeObjectStore<StatefulSet> {
+  api = statefulSetApi
+  @observable metrics: IPodMetrics = null;
+
+  loadMetrics(statefulSet: StatefulSet) {
+    const pods = this.getChildPods(statefulSet);
+    return podsApi.getMetrics(pods, statefulSet.getNs(), "").then(metrics =>
+      this.metrics = metrics
+    );
+  }
+
+  getChildPods(statefulSet: StatefulSet) {
+    return podsStore.getPodsByOwner(statefulSet)
+  }
+
+  getStatuses(statefulSets: StatefulSet[]) {
+    const status = { failed: 0, pending: 0, running: 0 }
+    statefulSets.forEach(statefulSet => {
+      const pods = this.getChildPods(statefulSet)
+      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 statefulSetStore = new StatefulSetStore();
+apiManager.registerStore(statefulSetApi, statefulSetStore);

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

@@ -0,0 +1,15 @@
+.StatefulSets {
+  .TableCell {
+    &.name {
+      flex-grow: 2;
+    }
+
+    &.pods {
+      flex-grow: 0.3;
+    }
+
+    &.warning {
+      @include table-cell-warning;
+    }
+  }
+}

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

@@ -0,0 +1,79 @@
+import "./statefulsets.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { RouteComponentProps } from "react-router";
+import { Trans } from "@lingui/macro";
+import { StatefulSet, statefulSetApi } from "../../api/endpoints";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { statefulSetStore } from "./statefulset.store";
+import { nodesStore } from "../+nodes/nodes.store";
+import { eventStore } from "../+events/event.store";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { KubeObjectListLayout } from "../kube-object";
+import { IStatefulSetsRouteParams } from "../+workloads";
+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<IStatefulSetsRouteParams> {
+}
+
+@observer
+export class StatefulSets extends React.Component<Props> {
+  getPodsLength(statefulSet: StatefulSet) {
+    return statefulSetStore.getChildPods(statefulSet).length;
+  }
+
+  render() {
+    return (
+      <KubeObjectListLayout
+        className="StatefulSets" store={statefulSetStore}
+        dependentStores={[podsStore, nodesStore, eventStore]}
+        sortingCallbacks={{
+          [sortBy.name]: (statefulSet: StatefulSet) => statefulSet.getName(),
+          [sortBy.namespace]: (statefulSet: StatefulSet) => statefulSet.getNs(),
+          [sortBy.age]: (statefulSet: StatefulSet) => statefulSet.metadata.creationTimestamp,
+          [sortBy.pods]: (statefulSet: StatefulSet) => this.getPodsLength(statefulSet),
+        }}
+        searchFilters={[
+          (statefulSet: StatefulSet) => statefulSet.getSearchFields(),
+        ]}
+        renderHeaderTitle={<Trans>Stateful 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>Age</Trans>, className: "age", sortBy: sortBy.age },
+        ]}
+        renderTableContents={(statefulSet: StatefulSet) => [
+          statefulSet.getName(),
+          statefulSet.getNs(),
+          this.getPodsLength(statefulSet),
+          <KubeEventIcon object={statefulSet}/>,
+          statefulSet.getAge(),
+        ]}
+        renderItemMenu={(item: StatefulSet) => {
+          return <StatefulSetMenu object={item}/>
+        }}
+      />
+    )
+  }
+}
+
+export function StatefulSetMenu(props: KubeObjectMenuProps<StatefulSet>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(statefulSetApi, {
+  Menu: StatefulSetMenu,
+})