[ui] alert a user on the jobs index page when a deploying job requires manual promotion

ui/app/adapters/job.js

@@ -10,6 +10,7 @@ import { base64EncodeString } from 'nomad-ui/utils/encode';
 import classic from 'ember-classic-decorator';
 import { inject as service } from '@ember/service';
 import { getOwner } from '@ember/application';
+import { get } from '@ember/object';
 
 @classic
 export default class JobAdapter extends WatchableNamespaceIDs {
@@ -202,4 +203,65 @@ export default class JobAdapter extends WatchableNamespaceIDs {
 
     return wsUrl;
   }
+
+  // TODO: Handle the in-job-page query for pack meta per https://github.com/hashicorp/nomad/pull/14833
+  query(store, type, query, snapshotRecordArray, options) {
+    options = options || {};
+    options.adapterOptions = options.adapterOptions || {};
+
+    const method = get(options, 'adapterOptions.method') || 'GET';
+    const url = this.urlForQuery(query, type.modelName, method);
+
+    let index = query.index || 1;
+
+    if (index && index > 1) {
+      query.index = index;
+    }
+
+    const signal = get(options, 'adapterOptions.abortController.signal');
+
+    return this.ajax(url, method, {
+      signal,
+      data: query,
+    }).then((payload) => {
+      // If there was a request body, append it to the payload
+      // We can use this in our serializer to maintain returned job order,
+      // even if one of the requested jobs is not found (has been GC'd) so as
+      // not to jostle the user's view.
+      if (query.jobs) {
+        payload._requestBody = query;
+      }
+      return payload;
+    });
+  }
+
+  handleResponse(status, headers) {
+    /**
+     * @type {Object}
+     */
+    const result = super.handleResponse(...arguments);
+    if (result) {
+      result.meta = result.meta || {};
+      if (headers['x-nomad-nexttoken']) {
+        result.meta.nextToken = headers['x-nomad-nexttoken'];
+      }
+      if (headers['x-nomad-index']) {
+        result.meta.index = headers['x-nomad-index'];
+      }
+    }
+    return result;
+  }
+
+  urlForQuery(query, modelName, method) {
+    let baseUrl = `/${this.namespace}/jobs/statuses`;
+    if (method === 'POST' && query.index) {
+      baseUrl += baseUrl.includes('?') ? '&' : '?';
+      baseUrl += `index=${query.index}`;
+    }
+    if (method === 'POST' && query.jobs) {
+      baseUrl += baseUrl.includes('?') ? '&' : '?';
+      baseUrl += 'namespace=*';
+    }
+    return baseUrl;
+  }
 }

ui/app/adapters/watchable.js

@@ -24,11 +24,10 @@ export default class Watchable extends ApplicationAdapter {
   //
   // It's either this weird side-effecting thing that also requires a change
   // to ajaxOptions or overriding ajax completely.
-  ajax(url, type, options) {
+  ajax(url, type, options = {}) {
     const hasParams = hasNonBlockingQueryParams(options);
     if (!hasParams || type !== 'GET') return super.ajax(url, type, options);
-
-    const params = { ...options.data };
+    let params = { ...options?.data };
     delete params.index;
 
     // Options data gets appended as query params as part of ajaxOptions.
@@ -96,6 +95,7 @@ export default class Watchable extends ApplicationAdapter {
     additionalParams = {}
   ) {
     const url = this.buildURL(type.modelName, null, null, 'query', query);
+    const method = get(options, 'adapterOptions.method') || 'GET';
     let [urlPath, params] = url.split('?');
     params = assign(
       queryString.parse(params) || {},
@@ -105,15 +105,13 @@ export default class Watchable extends ApplicationAdapter {
     );
 
     if (get(options, 'adapterOptions.watch')) {
-      // The intended query without additional blocking query params is used
-      // to track the appropriate query index.
       params.index = this.watchList.getIndexFor(
         `${urlPath}?${queryString.stringify(query)}`
       );
     }
 
     const signal = get(options, 'adapterOptions.abortController.signal');
-    return this.ajax(urlPath, 'GET', {
+    return this.ajax(urlPath, method, {
       signal,
       data: params,
     }).then((payload) => {

ui/app/components/job-row.js

@@ -3,39 +3,139 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import Component from '@ember/component';
+// @ts-check
+
+import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
-import { lazyClick } from '../helpers/lazy-click';
-import {
-  classNames,
-  tagName,
-  attributeBindings,
-} from '@ember-decorators/component';
-import classic from 'ember-classic-decorator';
-
-@classic
-@tagName('tr')
-@classNames('job-row', 'is-interactive')
-@attributeBindings('data-test-job-row')
+import { task } from 'ember-concurrency';
+
 export default class JobRow extends Component {
   @service router;
   @service store;
   @service system;
 
-  job = null;
+  /**
+   * Promotion of a deployment will error if the canary allocations are not of status "Healthy";
+   * this function will check for that and disable the promote button if necessary.
+   * @returns {boolean}
+   */
+  get canariesHealthy() {
+    const relevantAllocs = this.args.job.allocations.filter(
+      (a) => !a.isOld && a.isCanary && !a.hasBeenRescheduled
+    );
+    return (
+      relevantAllocs.length &&
+      relevantAllocs.every((a) => a.clientStatus === 'running' && a.isHealthy)
+    );
+  }
+
+  /**
+   * Used to inform the user that an allocation has entered into a perment state of failure:
+   * That is, it has exhausted its restarts and its reschedules and is in a terminal state.
+   */
+  get someCanariesHaveFailedAndWontReschedule() {
+    const relevantAllocs = this.args.job.allocations.filter(
+      (a) => !a.isOld && a.isCanary && !a.hasBeenRescheduled
+    );
+
+    return relevantAllocs.some(
+      (a) =>
+        a.clientStatus === 'failed' ||
+        a.clientStatus === 'lost' ||
+        a.isUnhealthy
+    );
+  }
+
+  // eslint-disable-next-line require-yield
+  @task(function* () {
+    /**
+     * @typedef DeploymentSummary
+     * @property {string} id
+     * @property {boolean} isActive
+     * @property {string} jobVersion
+     * @property {string} status
+     * @property {string} statusDescription
+     * @property {boolean} allAutoPromote
+     * @property {boolean} requiresPromotion
+     */
+    /**
+     * @type {DeploymentSummary}
+     */
+    let latestDeploymentSummary = this.args.job.latestDeploymentSummary;
+
+    // Early return false if we don't have an active deployment
+    if (!latestDeploymentSummary.isActive) {
+      return false;
+    }
+
+    // Early return if we our deployment doesn't have any canaries
+    if (!this.args.job.hasActiveCanaries) {
+      console.log('!hasActiveCan');
+      return false;
+    }
+
+    if (latestDeploymentSummary.requiresPromotion) {
+      console.log('requires promotion, and...');
+      if (this.canariesHealthy) {
+        console.log('canaries are healthy.');
+        return 'canary-promote';
+      }
+
+      if (this.someCanariesHaveFailedAndWontReschedule) {
+        console.log('some canaries have failed.');
+        return 'canary-failure';
+      }
+      if (latestDeploymentSummary.allAutoPromote) {
+        console.log(
+          'This deployment is set to auto-promote; canaries are being checked now'
+        );
+        // return "This deployment is set to auto-promote; canaries are being checked now";
+        return false;
+      } else {
+        console.log(
+          'This deployment requires manual promotion and things are being checked now'
+        );
+        // return "This deployment requires manual promotion and things are being checked now";
+        return false;
+      }
+    }
+    return false;
+  })
+  requiresPromotionTask;
+
+  @task(function* () {
+    try {
+      yield this.args.job.latestDeployment.content.promote(); // TODO: need to do a deployment findRecord here first.
+      // dont bubble up
+      return false;
+    } catch (err) {
+      // TODO: handle error. add notifications.
+      console.log('caught error', err);
+      // this.handleError({
+      //   title: 'Could Not Promote Deployment',
+      //   // description: messageFromAdapterError(err, 'promote deployments'),
+      // });
 
-  // One of independent, parent, or child. Used to customize the template
-  // based on the relationship of this job to others.
-  context = 'independent';
+      // err.errors.forEach((err) => {
+      //   this.notifications.add({
+      //     title: "Could not promote deployment",
+      //     message: err.detail,
+      //     color: 'critical',
+      //     timeout: 8000,
+      //   });
+      // });
+    }
+  })
+  promote;
 
-  click(event) {
-    lazyClick([this.gotoJob, event]);
+  get latestDeploymentFailed() {
+    return this.args.job.latestDeploymentSummary.status === 'failed';
   }
 
   @action
   gotoJob() {
-    const { job } = this;
+    const { job } = this.args;
     this.router.transitionTo('jobs.job.index', job.idWithNamespace);
   }
 }

ui/app/components/job-search-box.hbs

@@ -0,0 +1,20 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<@S.TextInput
+  @type="search"
+  @value={{@searchText}}
+  aria-label="Job Search"
+  placeholder="Name contains myJob"
+  @icon="search"
+  @width="300px"
+  {{on "input" (action this.updateSearchText)}}
+  {{keyboard-shortcut 
+    label="Search Jobs"
+    pattern=(array "Shift+F")
+    action=(action this.focus)
+  }}
+  data-test-jobs-search
+/>

ui/app/components/job-search-box.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+// @ts-check
+
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { debounce } from '@ember/runloop';
+
+const DEBOUNCE_MS = 500;
+
+export default class JobSearchBoxComponent extends Component {
+  @service keyboard;
+
+  element = null;
+
+  @action
+  updateSearchText(event) {
+    debounce(this, this.sendUpdate, event.target.value, DEBOUNCE_MS);
+  }
+
+  sendUpdate(value) {
+    this.args.onSearchTextChange(value);
+  }
+
+  @action
+  focus(element) {
+    element.focus();
+    // Because the element is an input,
+    // and the "hide hints" part of our keynav implementation is on keyUp,
+    // but the focus action happens on keyDown,
+    // and the keynav explicitly ignores key input while focused in a text input,
+    // we need to manually hide the hints here.
+    this.keyboard.displayHints = false;
+  }
+}

ui/app/components/job-status/allocation-status-block.js

@@ -7,6 +7,9 @@ import Component from '@glimmer/component';
 
 export default class JobStatusAllocationStatusBlockComponent extends Component {
   get countToShow() {
+    if (this.args.compact) {
+      return 0;
+    }
     const restWidth = 50;
     const restGap = 10;
     let cts = Math.floor((this.args.width - (restWidth + restGap)) / 42);

ui/app/components/job-status/allocation-status-row.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<div class="allocation-status-row">
+<div class="allocation-status-row  {{if @compact "compact"}}">
   {{#if this.showSummaries}}
     <div class="alloc-status-summaries"
       {{did-insert this.captureElement}}
@@ -16,10 +16,14 @@
               <JobStatus::AllocationStatusBlock
                 @status={{status}}
                 @health={{health}}
+
                 @canary={{canary}}
                 @steady={{@steady}}
                 @count={{allocsByCanary.length}}
-                @width={{compute (action this.calcPerc) allocsByCanary.length}}
+                @width={{compute
+                  (action this.calcPerc) allocsByCanary.length
+                }}
+                @compact={{@compact}}
                 @allocs={{allocsByCanary}} />
             {{/if}}
           {{/each-in}}
@@ -50,5 +54,8 @@
       {{/each-in}}
     </div>
   {{/if}}
+  {{#if @compact}}
+    {{@runningAllocs}}/{{@groupCountSum}}
+  {{/if}}
 </div>