Lens restructure (#540)

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

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

@@ -0,0 +1,2 @@
+export * from "./replicasets"
+export * from "./replicaset-details"

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

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

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

@@ -0,0 +1,102 @@
+import "./replicaset-details.scss";
+import React from "react";
+import { Trans } from "@lingui/macro";
+import { reaction } from "mobx";
+import { DrawerItem } from "../drawer";
+import { Badge } from "../badge";
+import { replicaSetStore } from "./replicasets.store";
+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 { disposeOnUnmount, observer } from "mobx-react";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { ReplicaSet, replicaSetApi } 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<ReplicaSet> {
+}
+
+@observer
+export class ReplicaSetDetails extends React.Component<Props> {
+  @disposeOnUnmount
+  clean = reaction(() => this.props.object, () => {
+    replicaSetStore.reset();
+  });
+
+  async componentDidMount() {
+    if (!podsStore.isLoaded) {
+      podsStore.loadAll();
+    }
+  }
+
+  componentWillUnmount() {
+    replicaSetStore.reset();
+  }
+
+  render() {
+    const { object: replicaSet } = this.props
+    if (!replicaSet) return null
+    const { metrics } = replicaSetStore
+    const { status } = replicaSet
+    const { availableReplicas, replicas } = status
+    const selectors = replicaSet.getSelectors()
+    const nodeSelector = replicaSet.getNodeSelectors()
+    const images = replicaSet.getImages()
+    const childPods = replicaSetStore.getChildPods(replicaSet)
+    return (
+      <div className="ReplicaSetDetails">
+        {podsStore.isLoaded && (
+          <ResourceMetrics
+            loader={() => replicaSetStore.loadMetrics(replicaSet)}
+            tabs={podMetricTabs} object={replicaSet} params={{ metrics }}
+          >
+            <PodCharts/>
+          </ResourceMetrics>
+        )}
+        <KubeObjectMeta object={replicaSet}/>
+        {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>Replicas</Trans>}>
+          {`${availableReplicas || 0} current / ${replicas || 0} desired`}
+        </DrawerItem>
+        <PodDetailsTolerations workload={replicaSet}/>
+        <PodDetailsAffinities workload={replicaSet}/>
+        <DrawerItem name={<Trans>Pod Status</Trans>} className="pod-status">
+          <PodDetailsStatuses pods={childPods}/>
+        </DrawerItem>
+        <ResourceMetricsText metrics={metrics}/>
+        <PodDetailsList pods={childPods} owner={replicaSet}/>
+        <KubeEventDetails object={replicaSet}/>
+      </div>
+    )
+  }
+}
+
+apiManager.registerViews(replicaSetApi, {
+  Details: ReplicaSetDetails,
+})

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

@@ -0,0 +1,30 @@
+.ReplicaSets {
+  position: relative;
+  min-height: 80px;
+
+  .Table {
+    margin: 0 (-$margin * 3);
+  }
+
+  .TableCell {
+    &:first-child {
+      margin-left: $margin;
+    }
+
+    &:last-child {
+      margin-right: $margin;
+    }
+
+    &.name {
+      flex-grow: 2;
+    }
+
+    &.namespace {
+      flex-grow: 1.2;
+    }
+
+    &.actions {
+      @include table-cell-action;
+    }
+  }
+}

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

@@ -0,0 +1,36 @@
+import { observable } from "mobx";
+import { autobind } from "../../utils";
+import { KubeObjectStore } from "../../kube-object.store";
+import { Deployment, IPodMetrics, podsApi, ReplicaSet, replicaSetApi } from "../../api/endpoints";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class ReplicaSetStore extends KubeObjectStore<ReplicaSet> {
+  api = replicaSetApi
+  @observable metrics: IPodMetrics = null;
+
+  loadMetrics(replicaSet: ReplicaSet) {
+    const pods = this.getChildPods(replicaSet);
+    return podsApi.getMetrics(pods, replicaSet.getNs(), "").then(metrics =>
+      this.metrics = metrics
+    );
+  }
+
+  getChildPods(replicaSet: ReplicaSet) {
+    return podsStore.getPodsByOwner(replicaSet);
+  }
+
+  getReplicaSetsByOwner(deployment: Deployment) {
+    return this.items.filter(replicaSet =>
+      !!replicaSet.getOwnerRefs().find(owner => owner.uid === deployment.getId())
+    )
+  }
+
+  reset() {
+    this.metrics = null;
+  }
+}
+
+export const replicaSetStore = new ReplicaSetStore();
+apiManager.registerStore(replicaSetApi, replicaSetStore);

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

@@ -0,0 +1,98 @@
+import "./replicasets.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { ReplicaSet, replicaSetApi } from "../../api/endpoints";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { replicaSetStore } from "./replicasets.store";
+import { Spinner } from "../spinner";
+import { prevDefault, stopPropagation } from "../../utils";
+import { DrawerTitle } from "../drawer";
+import { Table, TableCell, TableHead, TableRow } from "../table";
+import { showDetails } from "../../navigation";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  pods = "pods",
+  age = "age",
+}
+
+interface Props {
+  replicaSets: ReplicaSet[];
+}
+
+@observer
+export class ReplicaSets extends React.Component<Props> {
+  private sortingCallbacks = {
+    [sortBy.name]: (replicaSet: ReplicaSet) => replicaSet.getName(),
+    [sortBy.namespace]: (replicaSet: ReplicaSet) => replicaSet.getNs(),
+    [sortBy.age]: (replicaSet: ReplicaSet) => replicaSet.metadata.creationTimestamp,
+    [sortBy.pods]: (replicaSet: ReplicaSet) => this.getPodsLength(replicaSet),
+  }
+
+  getPodsLength(replicaSet: ReplicaSet) {
+    return replicaSetStore.getChildPods(replicaSet).length;
+  }
+
+  render() {
+    const { replicaSets } = this.props;
+    if (!replicaSets.length && !replicaSetStore.isLoaded) return (
+      <div className="ReplicaSets"><Spinner center/></div>
+    );
+    if (!replicaSets.length) return null;
+    return (
+      <div className="ReplicaSets flex column">
+        <DrawerTitle title={<Trans>Deploy Revisions</Trans>}/>
+        <Table
+          selectable
+          scrollable={false}
+          sortable={this.sortingCallbacks}
+          sortByDefault={{ sortBy: sortBy.pods, orderBy: "desc" }}
+          sortSyncWithUrl={false}
+          className="box grow"
+        >
+          <TableHead>
+            <TableCell className="name" sortBy={sortBy.name}><Trans>Name</Trans></TableCell>
+            <TableCell className="namespace" sortBy={sortBy.namespace}>Namespace</TableCell>
+            <TableCell className="pods" sortBy={sortBy.pods}><Trans>Pods</Trans></TableCell>
+            <TableCell className="age" sortBy={sortBy.age}><Trans>Age</Trans></TableCell>
+            <TableCell className="actions"/>
+          </TableHead>
+          {
+            replicaSets.map(replica => {
+              return (
+                <TableRow
+                  key={replica.getId()}
+                  sortItem={replica}
+                  nowrap
+                  onClick={prevDefault(() => showDetails(replica.selfLink, false))}
+                >
+                  <TableCell className="name">{replica.getName()}</TableCell>
+                  <TableCell className="namespace">{replica.getNs()}</TableCell>
+                  <TableCell className="pods">{this.getPodsLength(replica)}</TableCell>
+                  <TableCell className="age">{replica.getAge()}</TableCell>
+                  <TableCell className="actions" onClick={stopPropagation}>
+                    <ReplicaSetMenu object={replica}/>
+                  </TableCell>
+                </TableRow>
+              )
+            })
+          }
+        </Table>
+      </div>
+    );
+  }
+}
+
+export function ReplicaSetMenu(props: KubeObjectMenuProps<ReplicaSet>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(replicaSetApi, {
+  Menu: ReplicaSetMenu,
+});