Fix the flickering issue with start/stop job

When the server doesn't respond immediately, there is a visible window
of time between the action being submitted and the blocking query coming
back with the new job status.

ui/app/components/job-page/parts/title.js

@@ -12,7 +12,10 @@ export default Component.extend({
 
   stopJob: task(function*() {
     try {
-      yield this.get('job').stop();
+      const job = this.get('job');
+      yield job.stop();
+      // Eagerly update the job status to avoid flickering
+      this.job.set('status', 'dead');
     } catch (err) {
       this.get('handleError')({
         title: 'Could Not Stop Job',
@@ -31,6 +34,8 @@ export default Component.extend({
     try {
       yield job.parse();
       yield job.update();
+      // Eagerly update the job status to avoid flickering
+      job.set('status', 'running');
     } catch (err) {
       let message = messageFromAdapterError(err);
       if (!message || message === 'Forbidden') {

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

@@ -1,5 +1,6 @@
 import Component from '@ember/component';
 import { equal } from '@ember/object/computed';
+import RSVP from 'rsvp';
 
 export default Component.extend({
   classNames: ['two-step-button'],
@@ -23,5 +24,10 @@ export default Component.extend({
     promptForConfirmation() {
       this.set('state', 'prompt');
     },
+    confirm() {
+      RSVP.resolve(this.get('onConfirm')()).then(() => {
+        this.send('setToIdle');
+      });
+    },
   },
 });

ui/app/templates/components/job-page/parts/title.hbs

@@ -9,6 +9,7 @@
       cancelText="Cancel"
       confirmText="Yes, Stop"
       confirmationMessage="Are you sure you want to stop this job?"
+      awaitingConfirmation=stopJob.isRunning
       onConfirm=(perform stopJob)}}
   {{else}}
     {{two-step-button
@@ -17,6 +18,7 @@
       cancelText="Cancel"
       confirmText="Yes, Start"
       confirmationMessage="Are you sure you want to start this job?"
+      awaitingConfirmation=startJob.isRunning
       onConfirm=(perform startJob)}}
   {{/if}}
 </h1>

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

@@ -19,10 +19,7 @@
     data-test-confirm-button
     class="button is-danger is-small {{if awaitingConfirmation "is-loading"}}"
     disabled={{awaitingConfirmation}}
-    onclick={{action (queue
-      (action "setToIdle")
-      (action onConfirm)
-    )}}>
+    onclick={{action "confirm"}}>
     {{confirmText}}
   </button>
 {{/if}}