Lens restructure (#540)

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

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

@@ -0,0 +1,2 @@
+export * from "./jobs"
+export * from "./job-details"

src/renderer/components/+workloads-jobs/job-details.scss

@@ -0,0 +1,8 @@
+
+.JobDetails {
+  .conditions {
+    .Badge {
+      @include job-condition-bgs;
+    }
+  }
+}

src/renderer/components/+workloads-jobs/job-details.tsx

@@ -0,0 +1,112 @@
+import "./job-details.scss";
+
+import React from "react";
+import kebabCase from "lodash/kebabCase";
+import { 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 { Link } from "react-router-dom";
+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 { jobStore } from "./job.store";
+import { getDetailsUrl } from "../../navigation";
+import { KubeObjectDetailsProps } from "../kube-object";
+import { Job, jobApi } from "../../api/endpoints";
+import { PodDetailsList } from "../+workloads-pods/pod-details-list";
+import { lookupApiLink } from "../../api/kube-api";
+import { apiManager } from "../../api/api-manager";
+import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+
+interface Props extends KubeObjectDetailsProps<Job> {
+}
+
+@observer
+export class JobDetails extends React.Component<Props> {
+  async componentDidMount() {
+    if (!podsStore.isLoaded) {
+      podsStore.loadAll();
+    }
+  }
+
+  render() {
+    const { object: job } = this.props;
+    if (!job) return null;
+    const selectors = job.getSelectors()
+    const nodeSelector = job.getNodeSelectors()
+    const images = job.getImages()
+    const childPods = jobStore.getChildPods(job)
+    const ownerRefs = job.getOwnerRefs()
+    const condition = job.getCondition()
+    return (
+      <div className="JobDetails">
+        <KubeObjectMeta object={job}/>
+        <DrawerItem name={<Trans>Selector</Trans>} labelsOnly>
+          {
+            Object.keys(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>
+        }
+        {ownerRefs.length > 0 &&
+        <DrawerItem name={<Trans>Controlled by</Trans>}>
+          {
+            ownerRefs.map(ref => {
+              const { name, kind } = ref;
+              const detailsUrl = getDetailsUrl(lookupApiLink(ref, job))
+              return (
+                <p key={name}>
+                  {kind} <Link to={detailsUrl}>{name}</Link>
+                </p>
+              );
+            })
+          }
+        </DrawerItem>
+        }
+        <DrawerItem name={<Trans>Conditions</Trans>} className="conditions" labelsOnly>
+          {condition && (
+            <Badge
+              className={kebabCase(condition.type)}
+              label={condition.type}
+              tooltip={condition.message}
+            />
+          )}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Completions</Trans>}>
+          {job.getDesiredCompletions()}
+        </DrawerItem>
+        <DrawerItem name={<Trans>Parallelism</Trans>}>
+          {job.getParallelism()}
+        </DrawerItem>
+        <PodDetailsTolerations workload={job}/>
+        <PodDetailsAffinities workload={job}/>
+        <DrawerItem name={<Trans>Pod Status</Trans>} className="pod-status">
+          <PodDetailsStatuses pods={childPods}/>
+        </DrawerItem>
+        <PodDetailsList pods={childPods} owner={job}/>
+        <KubeEventDetails object={job}/>
+      </div>
+    )
+  }
+}
+
+apiManager.registerViews(jobApi, {
+  Details: JobDetails
+});

src/renderer/components/+workloads-jobs/job.store.ts

@@ -0,0 +1,45 @@
+import { KubeObjectStore } from "../../kube-object.store";
+import { autobind } from "../../utils";
+import { Job, jobApi } from "../../api/endpoints/job.api";
+import { CronJob, Pod, PodStatus } from "../../api/endpoints";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { apiManager } from "../../api/api-manager";
+
+@autobind()
+export class JobStore extends KubeObjectStore<Job> {
+  api = jobApi
+
+  getChildPods(job: Job): Pod[] {
+    return podsStore.getPodsByOwner(job)
+  }
+
+  getJobsByOwner(cronJob: CronJob) {
+    return this.items.filter(job =>
+      job.getNs() == cronJob.getNs() &&
+      job.getOwnerRefs().find(ref => ref.name === cronJob.getName() && ref.kind === cronJob.kind)
+    )
+  }
+
+  getStatuses(jobs?: Job[]) {
+    const status = { failed: 0, pending: 0, running: 0, succeeded: 0 }
+    jobs.forEach(job => {
+      const pods = this.getChildPods(job)
+      if (pods.some(pod => pod.getStatus() === PodStatus.FAILED)) {
+        status.failed++
+      }
+      else if (pods.some(pod => pod.getStatus() === PodStatus.PENDING)) {
+        status.pending++
+      }
+      else if (pods.some(pod => pod.getStatus() === PodStatus.RUNNING)) {
+        status.running++
+      }
+      else {
+        status.succeeded++
+      }
+    })
+    return status
+  }
+}
+
+export const jobStore = new JobStore();
+apiManager.registerStore(jobApi, jobStore);

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

@@ -0,0 +1,17 @@
+@import "../+workloads/workloads-mixins";
+
+.Jobs {
+  .TableCell {
+    &.name {
+      flex-grow: 2;
+    }
+
+    &.warning {
+      @include table-cell-warning;
+    }
+
+    &.conditions {
+      @include job-condition-colors;
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+import "./jobs.scss";
+
+import React from "react";
+import { observer } from "mobx-react";
+import { RouteComponentProps } from "react-router";
+import { Trans } from "@lingui/macro";
+import { podsStore } from "../+workloads-pods/pods.store";
+import { jobStore } from "./job.store";
+import { eventStore } from "../+events/event.store";
+import { Job, jobApi } from "../../api/endpoints/job.api";
+import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
+import { KubeObjectListLayout } from "../kube-object";
+import { IJobsRouteParams } from "../+workloads";
+import { KubeEventIcon } from "../+events/kube-event-icon";
+import kebabCase from "lodash/kebabCase";
+import { apiManager } from "../../api/api-manager";
+
+enum sortBy {
+  name = "name",
+  namespace = "namespace",
+  conditions = "conditions",
+  age = "age",
+}
+
+interface Props extends RouteComponentProps<IJobsRouteParams> {
+}
+
+@observer
+export class Jobs extends React.Component<Props> {
+  render() {
+    return (
+      <KubeObjectListLayout
+        className="Jobs" store={jobStore}
+        dependentStores={[podsStore, eventStore]}
+        sortingCallbacks={{
+          [sortBy.name]: (job: Job) => job.getName(),
+          [sortBy.namespace]: (job: Job) => job.getNs(),
+          [sortBy.conditions]: (job: Job) => job.getCondition() != null ? job.getCondition().type : "",
+          [sortBy.age]: (job: Job) => job.metadata.creationTimestamp,
+        }}
+        searchFilters={[
+          (job: Job) => job.getSearchFields(),
+        ]}
+        renderHeaderTitle={<Trans>Jobs</Trans>}
+        renderTableHeader={[
+          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
+          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
+          { title: <Trans>Completions</Trans>, className: "completions" },
+          { className: "warning" },
+          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
+          { title: <Trans>Conditions</Trans>, className: "conditions", sortBy: sortBy.conditions },
+        ]}
+        renderTableContents={(job: Job) => {
+          const condition = job.getCondition();
+          return [
+            job.getName(),
+            job.getNs(),
+            `${job.getCompletions()} / ${job.getDesiredCompletions()}`,
+            <KubeEventIcon object={job}/>,
+            job.getAge(),
+            condition && {
+              title: condition.type,
+              className: kebabCase(condition.type),
+            }
+          ]
+        }}
+        renderItemMenu={(item: Job) => {
+          return <JobMenu object={item}/>
+        }}
+      />
+    )
+  }
+}
+
+export function JobMenu(props: KubeObjectMenuProps<Job>) {
+  return (
+    <KubeObjectMenu {...props}/>
+  )
+}
+
+apiManager.registerViews(jobApi, {
+  Menu: JobMenu,
+})