Add cronjob trigger (#694)

Signed-off-by: Nox <aurelien.gaston@krondor.fr>

Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com>

src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.scss

@@ -0,0 +1,18 @@
+.CronJobTriggerDialog {
+  .Wizard {
+    .header {
+      span {
+        color: #a0a0a0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .WizardStep {
+      .step-content {
+        min-height: 90px;
+        overflow: hidden;
+      }
+    }
+  }
+}

src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx

@@ -0,0 +1,128 @@
+import "./cronjob-trigger-dialog.scss";
+
+import React, { Component } from "react";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { Trans } from "@lingui/macro";
+import { Dialog, DialogProps } from "../dialog";
+import { Wizard, WizardStep } from "../wizard";
+import { CronJob, cronJobApi, jobApi, Job } from "../../api/endpoints";
+import { Notifications } from "../notifications";
+import { cssNames } from "../../utils";
+import { Input } from "../input";
+import { systemName, maxLength } from "../input/input.validators";
+
+interface Props extends Partial<DialogProps> {
+}
+
+@observer
+export class CronJobTriggerDialog extends Component<Props> {
+  @observable static isOpen = false;
+  @observable static data: CronJob = null;
+
+  @observable jobName = "";
+
+  @observable ready = false;
+
+  static open(cronjob: CronJob) {
+    CronJobTriggerDialog.isOpen = true;
+    CronJobTriggerDialog.data = cronjob;
+  }
+
+  static close() {
+    CronJobTriggerDialog.isOpen = false;
+  }
+
+  get cronjob() {
+    return CronJobTriggerDialog.data;
+  }
+
+  close = () => {
+    CronJobTriggerDialog.close();
+  }
+
+  onOpen = async () => {
+    const { cronjob } = this;
+    this.jobName = cronjob ? cronjob.getName() + "-manual-" + Math.random().toString(36).slice(2, 7) : "";
+    this.jobName = this.jobName.slice(0, 63);
+    this.ready = true;
+  }
+
+  onClose = () => {
+    this.ready = false;
+  }
+
+  trigger = async () => {
+    const { cronjob } = this;
+    const { close } = this;
+    try {
+      const cronjobDefinition = await cronJobApi.get({
+        name: cronjob.getName(),
+        namespace: cronjob.getNs()
+      });
+
+      await jobApi.create({
+        name: this.jobName,
+        namespace: cronjob.getNs()
+      }, {
+        spec: cronjobDefinition.spec.jobTemplate.spec
+      });
+
+      close();
+    } catch (err) {
+      Notifications.error(err);
+    }
+  }
+
+  renderContents() {
+    return (
+      <>
+        <div className="flex gaps">
+          <Trans>Job name</Trans>:
+        </div>
+        <div className="flex gaps">
+          <Input
+            required autoFocus
+            placeholder={this.jobName}
+            validators={[systemName, maxLength]}
+            maxLength={63}
+            value={this.jobName} onChange={v => this.jobName = v.toLowerCase()}
+            className="box grow"
+          />
+        </div>
+      </>
+    )
+  }
+
+  render() {
+    const { className, ...dialogProps } = this.props;
+    const cronjobName = this.cronjob ? this.cronjob.getName() : "";
+    console.log(cronjobName);
+    const header = (
+      <h5>
+        <Trans>Trigger CronJob <span>{cronjobName}</span></Trans>
+      </h5>
+    );
+    return (
+      <Dialog
+        {...dialogProps}
+        isOpen={CronJobTriggerDialog.isOpen}
+        className={cssNames("CronJobTriggerDialog", className)}
+        onOpen={this.onOpen}
+        onClose={this.onClose}
+        close={this.close}
+      >
+        <Wizard header={header} done={this.close}>
+          <WizardStep
+            contentClass="flex gaps column"
+            next={this.trigger}
+            nextLabel={<Trans>Trigger</Trans>}
+            disabledNext={!this.ready}
+          >
+            {this.renderContents()}
+          </WizardStep>
+        </Wizard>
+      </Dialog>
+    );
+  }
+}

src/renderer/components/+workloads-cronjobs/cronjob.store.ts

@@ -9,13 +9,13 @@ export class CronJobStore extends KubeObjectStore<CronJob> {
   api = cronJobApi
 
   getStatuses(cronJobs?: CronJob[]) {
-    const status = { failed: 0, running: 0 }
+    const status = { suspended: 0, scheduled: 0 }
     cronJobs.forEach(cronJob => {
       if (cronJob.spec.suspend) {
-        status.failed++
+        status.suspended++
       }
       else {
-        status.running++
+        status.scheduled++
       }
     })
     return status

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

@@ -3,8 +3,10 @@ import "./cronjobs.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { RouteComponentProps } from "react-router";
-import { Trans } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { CronJob, cronJobApi } from "../../api/endpoints/cron-job.api";
+import { MenuItem } from "../menu";
+import { Icon } from "../icon";
 import { cronJobStore } from "./cronjob.store";
 import { jobStore } from "../+workloads-jobs/job.store";
 import { eventStore } from "../+events/event.store";
@@ -12,7 +14,9 @@ import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-
 import { ICronJobsRouteParams } from "../+workloads";
 import { KubeObjectListLayout } from "../kube-object";
 import { KubeEventIcon } from "../+events/kube-event-icon";
+import { _i18n } from "../../i18n";
 import { apiManager } from "../../api/api-manager";
+import { CronJobTriggerDialog } from "./cronjob-trigger-dialog";
 
 enum sortBy {
   name = "name",
@@ -79,8 +83,14 @@ export class CronJobs extends React.Component<Props> {
 }
 
 export function CronJobMenu(props: KubeObjectMenuProps<CronJob>) {
+  const { object, toolbar } = props;
   return (
-    <KubeObjectMenu {...props}/>
+    <KubeObjectMenu {...props}>
+      <MenuItem onClick={() => CronJobTriggerDialog.open(object)}>
+        <Icon material="play_circle_filled" title={_i18n._(t`Trigger`)} interactive={toolbar}/>
+        <span className="title"><Trans>Trigger</Trans></span>
+      </MenuItem>
+    </KubeObjectMenu>
   )
 }
 

src/renderer/components/+workloads-overview/overview-workload-status.scss

@@ -3,6 +3,8 @@
   --workload-status-pending: #{$pod-status-pending-color};
   --workload-status-evicted: #{$pod-status-evicted-color};
   --workload-status-succeeded: #{$pod-status-succeeded-color};
+  --workload-status-scheduled: #{$cronjob-scheduled};
+  --workload-status-suspended: #{$cronjob-suspended};
   --workload-status-failed: #{$pod-status-failed-color};
   --workload-status-terminated: #{$pod-status-terminated-color};
   --workload-status-unknown: #{$pod-status-unknown-color};

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

@@ -26,6 +26,10 @@ $deployment-replicafailure: $colorError;
 $job-complete: $colorSuccess;
 $job-failed: $colorError;
 
+// Cronjob
+$cronjob-scheduled: $colorSuccess;
+$cronjob-suspended: $colorTerminated;
+
 // Pod Statuses
 $pod-status-color-list: (
   running: $pod-status-running-color,
@@ -48,6 +52,12 @@ $job-condition-color-list: (
   failed: $job-failed,
 );
 
+// Cronjob Conditions
+$cronjob-condition-color-list: (
+  scheduled: $cronjob-scheduled,
+  suspended: $cronjob-suspended,
+);
+
 @mixin pod-status-bgs {
   @each $status, $color in $pod-status-color-list {
     &.#{$status} {

src/renderer/components/app.tsx

@@ -25,6 +25,7 @@ import { KubeObjectDetails } from "./kube-object/kube-object-details";
 import { AddRoleBindingDialog } from "./+user-management-roles-bindings";
 import { PodLogsDialog } from "./+workloads-pods/pod-logs-dialog";
 import { DeploymentScaleDialog } from "./+workloads-deployments/deployment-scale-dialog";
+import { CronJobTriggerDialog } from "./+workloads-cronjobs/cronjob-trigger-dialog";
 import { CustomResources } from "./+custom-resources/custom-resources";
 import { crdRoute } from "./+custom-resources";
 import { isAllowedResource } from "../../common/rbac";
@@ -80,6 +81,7 @@ export class App extends React.Component {
             <AddRoleBindingDialog/>
             <PodLogsDialog/>
             <DeploymentScaleDialog/>
+            <CronJobTriggerDialog/>
           </ErrorBoundary>
         </Router>
       </I18nProvider>