UI: Stop job button

ui/app/adapters/job.js

@@ -74,14 +74,24 @@ export default Watchable.extend({
 
   forcePeriodic(job) {
     if (job.get('periodic')) {
-      const [path, params] = this.buildURL('job', job.get('id'), job, 'findRecord').split('?');
-      let url = `${path}/periodic/force`;
-
-      if (params) {
-        url += `?${params}`;
-      }
-
+      const url = addToPath(this.urlForFindRecord(job.get('id'), 'job'), '/periodic/force');
       return this.ajax(url, 'POST');
     }
   },
+
+  stop(job) {
+    const url = this.urlForFindRecord(job.get('id'), 'job');
+    return this.ajax(url, 'DELETE');
+  },
 });
+
+function addToPath(url, extension = '') {
+  const [path, params] = url.split('?');
+  let newUrl = `${path}${extension}`;
+
+  if (params) {
+    newUrl += `?${params}`;
+  }
+
+  return newUrl;
+}

ui/app/components/two-step-button.js

@@ -0,0 +1,26 @@
+import Component from '@ember/component';
+import { equal } from '@ember/object/computed';
+
+export default Component.extend({
+  classNames: ['two-step-button'],
+
+  idleText: '',
+  cancelText: '',
+  confirmText: '',
+  confirmationMessage: '',
+  onConfirm() {},
+  onCancel() {},
+
+  state: 'idle',
+  isIdle: equal('state', 'idle'),
+  isPendingConfirmation: equal('state', 'prompt'),
+
+  actions: {
+    setToIdle() {
+      this.set('state', 'idle');
+    },
+    promptForConfirmation() {
+      this.set('state', 'prompt');
+    },
+  },
+});

ui/app/models/job.js

@@ -162,6 +162,10 @@ export default Model.extend({
     return this.store.adapterFor('job').forcePeriodic(this);
   },
 
+  stop() {
+    return this.store.adapterFor('job').stop(this);
+  },
+
   statusClass: computed('status', function() {
     const classMap = {
       pending: 'is-pending',

ui/app/styles/components.scss

@@ -1,18 +1,19 @@
-@import "./components/badge";
-@import "./components/boxed-section";
-@import "./components/cli-window";
-@import "./components/ember-power-select";
-@import "./components/empty-message";
-@import "./components/error-container";
-@import "./components/gutter";
-@import "./components/inline-definitions";
-@import "./components/job-diff";
-@import "./components/json-viewer";
-@import "./components/loading-spinner";
-@import "./components/metrics";
-@import "./components/node-status-light";
-@import "./components/page-layout";
-@import "./components/simple-list";
-@import "./components/status-text";
-@import "./components/timeline";
-@import "./components/tooltip";
+@import './components/badge';
+@import './components/boxed-section';
+@import './components/cli-window';
+@import './components/ember-power-select';
+@import './components/empty-message';
+@import './components/error-container';
+@import './components/gutter';
+@import './components/inline-definitions';
+@import './components/job-diff';
+@import './components/json-viewer';
+@import './components/loading-spinner';
+@import './components/metrics';
+@import './components/node-status-light';
+@import './components/page-layout';
+@import './components/simple-list';
+@import './components/status-text';
+@import './components/timeline';
+@import './components/tooltip';
+@import './components/two-step-button';

ui/app/styles/components/two-step-button.scss

@@ -0,0 +1,14 @@
+.two-step-button {
+  display: inline;
+  position: relative;
+
+  .confirmation-text {
+    position: absolute;
+    left: 0;
+    top: -1.2em;
+    font-size: $body-size;
+    font-weight: $weight-normal;
+    color: darken($grey-blue, 20%);
+    white-space: nowrap;
+  }
+}

ui/app/templates/components/two-step-button.hbs

@@ -0,0 +1,19 @@
+{{#if isIdle}}
+  <button class="button is-warning is-small is-inline" onclick={{action "promptForConfirmation"}}>
+    {{idleText}}
+  </button>
+{{else if isPendingConfirmation}}
+  <span class="confirmation-text">{{confirmationMessage}}</span>
+  <button class="button is-dark is-outlined is-small is-inline" onclick={{action (queue
+    (action "setToIdle")
+    (action onCancel)
+  )}}>
+    {{cancelText}}
+  </button>
+  <button class="button is-danger is-small is-inline" onclick={{action (queue
+    (action "setToIdle")
+    (action onConfirm)
+  )}}>
+    {{confirmText}}
+  </button>
+{{/if}}