UI: Run a job from the Web UI

ui/app/adapters/job.js

@@ -59,6 +59,36 @@ export default Watchable.extend({
     const url = this.urlForFindRecord(job.get('id'), 'job');
     return this.ajax(url, 'DELETE');
   },
+
+  parse(spec) {
+    const url = addToPath(this.urlForFindAll('job'), '/parse');
+    return this.ajax(url, 'POST', {
+      data: {
+        JobHCL: spec,
+        Canonicalize: true,
+      },
+    });
+  },
+
+  plan(job) {
+    const url = addToPath(this.urlForFindRecord(job.get('id'), 'job'), '/plan');
+    return this.ajax(url, 'POST', {
+      data: {
+        Job: job.get('_newDefinitionJSON'),
+        Diff: true,
+      },
+    });
+  },
+
+  // Running a job doesn't follow REST create semantics so it's easier to
+  // treat it as an action.
+  run(job) {
+    return this.ajax(this.urlForCreateRecord('job'), 'POST', {
+      data: {
+        Job: job.get('_newDefinitionJSON'),
+      },
+    });
+  },
 });
 
 function associateNamespace(url, namespace) {

ui/app/controllers/jobs/run.js

@@ -0,0 +1,65 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import { task } from 'ember-concurrency';
+import messageFromAdapterError from 'nomad-ui/utils/message-from-adapter-error';
+import localStorageProperty from 'nomad-ui/utils/properties/local-storage';
+
+export default Controller.extend({
+  parseError: null,
+  planError: null,
+  runError: null,
+
+  planOutput: null,
+
+  showPlanMessage: localStorageProperty('nomadMessageJobPlan', true),
+  showEditorMessage: localStorageProperty('nomadMessageJobEditor', true),
+
+  stage: computed('planOutput', function() {
+    return this.get('planOutput') ? 'plan' : 'editor';
+  }),
+
+  plan: task(function*() {
+    this.reset();
+
+    try {
+      yield this.get('model').parse();
+    } catch (err) {
+      const error = messageFromAdapterError(err) || 'Could not parse input';
+      this.set('parseError', error);
+      return;
+    }
+
+    try {
+      const planOutput = yield this.get('model').plan();
+      this.set('planOutput', planOutput.Diff);
+    } catch (err) {
+      const error = messageFromAdapterError(err) || 'Could not plan job';
+      this.set('planError', error);
+    }
+  }).drop(),
+
+  submit: task(function*() {
+    try {
+      yield this.get('model').run();
+
+      const id = this.get('model.plainId');
+      const namespace = this.get('model.namespace.name') || 'default';
+
+      this.reset();
+
+      // navigate to the new job page
+      this.transitionToRoute('jobs.job', id, {
+        queryParams: { jobNamespace: namespace },
+      });
+    } catch (err) {
+      const error = messageFromAdapterError(err) || 'Could not submit job';
+      this.set('runError', error);
+    }
+  }),
+
+  reset() {
+    this.set('planOutput', null);
+    this.set('planError', null);
+    this.set('parseError', null);
+  },
+});

ui/app/models/job.js

@@ -4,6 +4,8 @@ import Model from 'ember-data/model';
 import attr from 'ember-data/attr';
 import { belongsTo, hasMany } from 'ember-data/relationships';
 import { fragmentArray } from 'ember-data-model-fragments/attributes';
+import RSVP from 'rsvp';
+import { assert } from '@ember/debug';
 
 const JOB_TYPES = ['service', 'batch', 'system'];
 
@@ -191,6 +193,54 @@ export default Model.extend({
     return this.store.adapterFor('job').stop(this);
   },
 
+  plan() {
+    assert('A job must be parsed before planned', this.get('_newDefinitionJSON'));
+    return this.store.adapterFor('job').plan(this);
+  },
+
+  run() {
+    assert('A job must be parsed before ran', this.get('_newDefinitionJSON'));
+    return this.store.adapterFor('job').run(this);
+  },
+
+  parse() {
+    const definition = this.get('_newDefinition');
+    let promise;
+
+    try {
+      // If the definition is already JSON then it doesn't need to be parsed.
+      const json = JSON.parse(definition);
+      this.set('_newDefinitionJSON', definition);
+      this.setIDByPayload(json);
+      promise = RSVP.resolve(definition);
+    } catch (err) {
+      // If the definition is invalid JSON, assume it is HCL. If it is invalid
+      // in anyway, the parse endpoint will throw an error.
+      promise = this.store
+        .adapterFor('job')
+        .parse(this.get('_newDefinition'))
+        .then(response => {
+          this.set('_newDefinitionJSON', response);
+          this.setIDByPayload(response);
+        });
+    }
+
+    return promise;
+  },
+
+  setIDByPayload(payload) {
+    const namespace = payload.Namespace || 'default';
+    const id = payload.Name;
+
+    this.set('plainId', id);
+    this.set('id', JSON.stringify([id, namespace]));
+
+    const namespaceRecord = this.store.peekRecord('namespace', namespace);
+    if (namespaceRecord) {
+      this.set('namespace', namespaceRecord);
+    }
+  },
+
   statusClass: computed('status', function() {
     const classMap = {
       pending: 'is-pending',
@@ -206,4 +256,13 @@ export default Model.extend({
     // Lazily decode the base64 encoded payload
     return window.atob(this.get('payload') || '');
   }),
+
+  // An arbitrary HCL or JSON string that is used by the serializer to plan
+  // and run this job. Used for both new job models and saved job models.
+  _newDefinition: attr('string'),
+
+  // The new definition may be HCL, in which case the API will need to parse the
+  // spec first. In order to preserve both the original HCL and the parsed response
+  // that will be submitted to the create job endpoint, another prop is necessary.
+  _newDefinitionJSON: attr('string'),
 });

ui/app/router.js

@@ -8,6 +8,7 @@ const Router = EmberRouter.extend({
 
 Router.map(function() {
   this.route('jobs', function() {
+    this.route('run');
     this.route('job', { path: '/:job_name' }, function() {
       this.route('task-group', { path: '/:name' });
       this.route('definition');

ui/app/routes/jobs/run.js

@@ -0,0 +1,26 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default Route.extend({
+  store: service(),
+  system: service(),
+
+  breadcrumbs: [
+    {
+      label: 'Run',
+      args: ['jobs.run'],
+    },
+  ],
+
+  model() {
+    return this.get('store').createRecord('job', {
+      namespace: this.get('system.activeNamespace'),
+    });
+  },
+
+  resetController(controller, isExiting) {
+    if (isExiting) {
+      controller.get('model').deleteRecord();
+    }
+  },
+});

ui/app/styles/components/codemirror.scss

@@ -4,6 +4,10 @@ $dark-bright: lighten($dark, 15%);
   height: auto;
 }
 
+.CodeMirror-scroll {
+  min-height: 500px;
+}
+
 .cm-s-hashi,
 .cm-s-hashi-read-only {
   &.CodeMirror {
@@ -39,7 +43,7 @@ $dark-bright: lighten($dark, 15%);
   }
 
   span.cm-comment {
-    color: $grey-light;
+    color: $grey;
   }
 
   span.cm-string,

ui/app/styles/core.scss

@@ -1,34 +1,35 @@
 // Utils
-@import "./utils/reset.scss";
-@import "./utils/z-indices";
-@import "./utils/product-colors";
-@import "./utils/bumper";
+@import './utils/reset.scss';
+@import './utils/z-indices';
+@import './utils/product-colors';
+@import './utils/bumper';
+@import './utils/layout';
 
 // Start with Bulma variables as a foundation
-@import "bulma/sass/utilities/initial-variables";
+@import 'bulma/sass/utilities/initial-variables';
 
 // Override variables where appropriate
-@import "./core/variables.scss";
+@import './core/variables.scss';
 
 // Bring in the rest of Bulma
-@import "bulma/bulma";
+@import 'bulma/bulma';
 
 // Override Bulma details where appropriate
-@import "./core/buttons";
-@import "./core/breadcrumb";
-@import "./core/columns";
-@import "./core/forms";
-@import "./core/icon";
-@import "./core/level";
-@import "./core/menu";
-@import "./core/message";
-@import "./core/navbar";
-@import "./core/notification";
-@import "./core/pagination";
-@import "./core/progress";
-@import "./core/section";
-@import "./core/table";
-@import "./core/tabs";
-@import "./core/tag";
-@import "./core/title";
-@import "./core/typography";
+@import './core/buttons';
+@import './core/breadcrumb';
+@import './core/columns';
+@import './core/forms';
+@import './core/icon';
+@import './core/level';
+@import './core/menu';
+@import './core/message';
+@import './core/navbar';
+@import './core/notification';
+@import './core/pagination';
+@import './core/progress';
+@import './core/section';
+@import './core/table';
+@import './core/tabs';
+@import './core/tag';
+@import './core/title';
+@import './core/typography';

ui/app/styles/utils/layout.scss

@@ -0,0 +1,3 @@
+.is-associative {
+  margin-top: -0.75em;
+}

ui/app/templates/components/job-page/parts/recent-allocations.hbs

@@ -2,7 +2,7 @@
   <div class="boxed-section-head">
     Recent Allocations
   </div>
-  <div class="boxed-section-body is-full-bleed">
+  <div class="boxed-section-body {{if job.allocations.length "is-full-bleed"}}">
     {{#if job.allocations.length}}
       {{#list-table
         source=sortedAllocations

ui/app/templates/jobs/index.hbs

@@ -2,11 +2,16 @@
   {{#if isForbidden}}
     {{partial "partials/forbidden-message"}}
   {{else}}
-    {{#if filteredJobs.length}}
-      <div class="content">
-        <div>{{search-box data-test-jobs-search searchTerm=(mut searchTerm) placeholder="Search jobs..."}}</div>
+    <div class="columns">
+      {{#if filteredJobs.length}}
+        <div class="column">
+          {{search-box data-test-jobs-search searchTerm=(mut searchTerm) placeholder="Search jobs..."}}
+        </div>
+      {{/if}}
+      <div class="column is-centered">
+        {{#link-to "jobs.run" data-test-run-job class="button is-primary is-pulled-right"}}Run Job{{/link-to}}
       </div>
-    {{/if}}
+    </div>
     {{#list-pagination
       source=sortedJobs
       size=pageSize