open-nomad/ui/app/templates/components/job-editor.hbs

<div>
  {{#if this.error}}
    <div data-test-error={{this.error.type}} class="notification is-danger">
      <h3 class="title is-4" data-test-error-title>{{conditionally-capitalize this.error.type true}} Error</h3>
      <p data-test-error-message>{{this.error.message}}</p>
    </div>
  {{/if}}
  {{#if (eq this.stage "editor")}}

    <header class="run-job-header">
      <h1 class="title is-3">Run a job</h1>
      <p>
        Paste or author HCL or JSON to submit to your cluster, or select from a list of templates. A plan will be requested before the job is submitted. You can also attach a job spec by uploading a job file or dragging &amp; dropping a file to the editor.
      </p>
    </header>

    <div class="boxed-section">
      <div class="boxed-section-head">
        Job Definition
        {{#if @cancelable}}
          <button
            class="button is-light is-compact pull-right"
            onclick={{action @onCancel}}
            data-test-cancel-editing
            type="button"
          >Cancel</button>
        {{/if}}
      </div>
      <div class="boxed-section-body is-full-bleed">
        <div
          data-test-editor
          {{code-mirror
            screenReaderLabel="Job definition"
            content=@job._newDefinition
            theme="hashi"
            onUpdate=this.updateCode
            mode="javascript"
          }}
        />
      </div>
    </div>

    <div class="is-associative buttonset">
      <Hds::Button
        {{on "click" (perform this.plan)}}
        disabled={{or this.plan.isRunning (not @job._newDefinition)}}
        data-test-plan
        @text="Plan"
      />
      {{#if @job.isNew}}
        <Hds::ButtonSet>
          <label class="job-spec-upload hds-button hds-button--color-secondary hds-button--size-medium">
            <div class="hds-button__text">Upload file</div>
            <input type="file" onchange={{action this.uploadJobSpec}} accept=".hcl,.json,.nomad" />
          </label>
          {{#if (can "write variable" path="*" namespace="*")}}
            <Hds::Button @icon="file-plus" @text="Save as template" @color="tertiary" @route="jobs.run.templates.new"  {{on "click" @handleSaveAsTemplate}} data-test-save-as-template />
            <Hds::Button @icon="file-text" @text="Choose from a template" @color="tertiary" @route="jobs.run.templates" data-test-choose-template />
          {{/if}}
        </Hds::ButtonSet>
      {{/if}}
    </div>
  {{/if}}

  {{#if (eq this.stage "plan")}}
    {{#if this.showPlanMessage}}
      <div class="notification is-info">
        <div class="columns">
          <div class="column">
            <h3 class="title is-4" data-test-plan-help-title>Job Plan</h3>
            <p data-test-plan-help-message>This is the impact running this job
              will have on your cluster.</p>
          </div>
          <div class="column is-centered is-minimum">
            <Hds::Button @text="Okay" {{on "click" (toggle-action "showPlanMessage" this)}} data-test-plan-help-dismiss />
          </div>
        </div>
      </div>
    {{/if}}
    <div class="boxed-section">
      <div class="boxed-section-head">Job Plan</div>
      <div class="boxed-section-body is-dark">
        <JobDiff
          data-test-plan-output
          @diff={{this.planOutput.diff}}
          @verbose={{false}}
        />
      </div>
    </div>
    <div
      class="boxed-section
        {{if this.planOutput.failedTGAllocs 'is-warning' 'is-primary'}}"
      data-test-dry-run-message
    >
      <div class="boxed-section-head" data-test-dry-run-title>Scheduler dry-run</div>
      <div class="boxed-section-body" data-test-dry-run-body>
        {{#if this.planOutput.failedTGAllocs}}
          {{#each this.planOutput.failedTGAllocs as |placementFailure|}}
            <PlacementFailure @failedTGAlloc={{placementFailure}} />
          {{/each}}
        {{else}}
          All tasks successfully allocated.
        {{/if}}
      </div>
    </div>
    {{#if
      (and
        this.planOutput.preemptions.isFulfilled this.planOutput.preemptions.length
      )
    }}
      <div class="boxed-section is-warning" data-test-preemptions>
        <div class="boxed-section-head" data-test-preemptions-title>
          Preemptions (if you choose to run this job, these allocations will be
          stopped)
        </div>
        <div class="boxed-section-body" data-test-preemptions-body>
          <ListTable
            @source={{this.planOutput.preemptions}}
            @class="allocations is-isolated"
            as |t|
          >
            <t.head>
              <th class="is-narrow"></th>
              <th>ID</th>
              <th>Task Group</th>
              <th>Created</th>
              <th>Modified</th>
              <th>Status</th>
              <th>Version</th>
              <th>Node</th>
              <th>Volume</th>
              <th>CPU</th>
              <th>Memory</th>
            </t.head>
            <t.body as |row|>
              <AllocationRow @allocation={{row.model}} @context="job" />
            </t.body>
          </ListTable>
        </div>
      </div>
    {{/if}}
    <Hds::ButtonSet class="is-associative">
      <Hds::Button @text="Run" {{on "click" (perform this.submit)}} disabled={{this.submit.isRunning}} data-test-run />
      <Hds::Button @color="secondary" @text="Cancel" {{on "click" this.reset}} disabled={{this.submit.isRunning}} data-test-cancel />
    </Hds::ButtonSet>
  {{/if}}
</div>