[ui, deployments] Linking allocblocks and legends to allocation / all…

…ocations index routes (#16821) * Conditional link-to component and basic linking to allocations and allocation routes * Job versions filter added to allocations index page * Steady state legends link * Legend links * Badge count links for versions * Fix: faded class on steady-state legend items * version link now wont show completed ones * Fix a11y violations with link labels
hashicorp · Apr 11, 2023 · 23709d2 · 23709d2
1 parent 075af25
commit 23709d2
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 19 deletions.
diff --git a/ui/app/components/conditional-link-to.hbs b/ui/app/components/conditional-link-to.hbs
@@ -0,0 +1,9 @@
+{{#if @condition}}
+  <LinkTo @route={{@route}} @model={{@model}} @query={{this.query}} class={{@class}} aria-label={{@label}}>
+    {{yield}}
+  </LinkTo>
+{{else}}
+  <span class={{@class}}>
+    {{yield}}
+  </span>
+{{/if}}
diff --git a/ui/app/components/conditional-link-to.js b/ui/app/components/conditional-link-to.js
@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+
+export default class ConditionalLinkToComponent extends Component {
+  get query() {
+    return this.args.query || {};
+  }
+}
diff --git a/ui/app/components/job-status/allocation-status-block.hbs b/ui/app/components/job-status/allocation-status-block.hbs
@@ -4,8 +4,14 @@
 >
   {{#if this.countToShow}}
     <div class="ungrouped-allocs">
-      {{#each (range 0 this.countToShow)}}
-        <span class="represented-allocation {{@status}} {{@health}} {{@canary}}">
+      {{#each (range 0 this.countToShow) as |i|}}
+        <ConditionalLinkTo
+          @condition={{not (eq @status "unplaced")}}
+          @route="allocations.allocation"
+          @model={{get @allocs i}}
+          @class="represented-allocation {{@status}} {{@health}} {{@canary}}"
+          @label="View allocation"
+        >
           {{#unless @steady}}
             {{#if (eq @status "running")}}
               <span class="alloc-health-indicator">
@@ -17,12 +23,20 @@
               </span>
             {{/if}}
           {{/unless}}
-        </span>
+        </ConditionalLinkTo>
       {{/each}}
     </div>
   {{/if}}
   {{#if this.remaining}}
-    <span class="represented-allocation rest {{@status}} {{@health}} {{@canary}}">
+
+    <ConditionalLinkTo
+      @condition={{not (eq @status "unplaced")}}
+      @route="jobs.job.allocations"
+      @model={{@allocs.0.job}}
+      @query={{hash status=(concat '["' @status '"]') version=(concat '[' @allocs.0.jobVersion ']')}}
+      @class="represented-allocation rest {{@status}} {{@health}} {{@canary}}"
+      @label="View all {{@status}} allocations"
+    >
       <span class="rest-count">{{#if this.countToShow}}+{{/if}}{{this.remaining}}</span>
       {{#unless @steady}}
         {{#if (eq @canary "canary")}}
@@ -38,6 +52,6 @@
           </span>
         {{/if}}
       {{/unless}}
-    </span>
+    </ConditionalLinkTo>
   {{/if}}
 </div>
diff --git a/ui/app/components/job-status/allocation-status-row.hbs b/ui/app/components/job-status/allocation-status-row.hbs
@@ -30,8 +30,14 @@
         {{#each-in allocsByStatus as |health allocsByHealth|}}
           {{#each-in allocsByHealth as |canary allocsByCanary|}}
             {{#if (gt allocsByCanary.length 0)}}
-              {{#each (range 0 allocsByCanary.length)}}
-                <span class="represented-allocation {{status}} {{health}} {{canary}}">
+              {{#each (range 0 allocsByCanary.length) as |i|}}
+                <ConditionalLinkTo
+                  @condition={{not (eq status "unplaced")}}
+                  @route="allocations.allocation"
+                  @model={{get allocsByCanary i}}
+                  @class="represented-allocation {{status}} {{health}} {{canary}}"
+                  @label="View allocation"
+                >
                   {{#unless @steady}}
                     {{#if (eq canary "canary")}}
                       <span class="alloc-canary-indicator" />
@@ -46,7 +52,7 @@
                       </span>
                     {{/if}}
                   {{/unless}}
-                </span>
+                </ConditionalLinkTo>
               {{/each}}
             {{/if}}
           {{/each-in}}

diff --git a/ui/app/components/job-status/panel/deploying.hbs b/ui/app/components/job-status/panel/deploying.hbs
@@ -62,10 +62,17 @@
         {{!-- Legend by Status, then by Health, then by Canary --}}
         <legend>
           {{#each-in this.newAllocsByStatus as |status count|}}
-            <span class="legend-item {{if (eq count 0) "faded"}}">
+            <ConditionalLinkTo
+              @condition={{not (eq status "unplaced")}}
+              @route="jobs.job.allocations"
+              @model={{@job}}
+              @query={{hash status=(concat '["' status '"]') version=(concat '[' this.job.latestDeployment.versionNumber ']')}}
+              @class="legend-item {{if (eq count 0) "faded"}}"
+              @label="View {{status}} allocations"
+            >
               <span class="represented-allocation {{status}}"></span>
-              {{count}} {{capitalize status}}
-            </span>
+                {{count}} {{capitalize status}}
+            </ConditionalLinkTo>
           {{/each-in}}
 
           {{#each-in this.newAllocsByHealth as |health count|}}
@@ -75,7 +82,7 @@
                   {{#if (eq health "healthy")}}
                     <FlightIcon @name="check" @color="#25ba81" />
                   {{else}}
-                    <FlightIcon @name="running" @color="black" />
+                    <FlightIcon @name="running" @color="black" class="not-animated" />
                   {{/if}}
                 </span>
               </span>

diff --git a/ui/app/components/job-status/panel/steady.hbs b/ui/app/components/job-status/panel/steady.hbs
@@ -27,10 +27,17 @@
       <div class="legend-and-summary">
         <legend>
           {{#each this.allocTypes as |type|}}
-            <span class="legend-item {{if (eq (get (get this.allocBlocks type.label) "length") 0) "faded"}}">
+            <ConditionalLinkTo
+              @condition={{not (eq type.label "unplaced")}}
+              @route="jobs.job.allocations"
+              @model={{@job}}
+              @query={{hash status=(concat '["' type.label '"]') version=(concat '[' (keys this.versions) ']')}}
+              @class="legend-item {{if (eq (get (get (get (get this.allocBlocks type.label) 'healthy') 'nonCanary') "length") 0) "faded"}}"
+              @label="View {{type.label}} allocations"
+            >
               <span class="represented-allocation {{type.label}}"></span>
               {{get (get (get (get this.allocBlocks type.label) 'healthy') 'nonCanary') "length"}} {{capitalize type.label}}
-            </span>
+            </ConditionalLinkTo>
           {{/each}}
         </legend>
 
@@ -39,8 +46,10 @@
           <ul>
             {{#each-in this.versions as |version allocs|}}
               <li>
-                <Hds::Badge @text={{version}} />
-                <Hds::BadgeCount @text={{allocs.length}} @type="inverted" />
+                <LinkTo @route="jobs.job.allocations" @model={{@job}} @query={{hash version=(concat '[' version ']')    status=(concat '["running", "pending", "failed"]')         }}>
+                  <Hds::Badge @text={{concat "v" version}} />
+                  <Hds::BadgeCount @text={{allocs.length}} @type="inverted" />
+                </LinkTo>
               </li>
             {{/each-in}}
           </ul>

diff --git a/ui/app/components/job-status/panel/steady.js b/ui/app/components/job-status/panel/steady.js
@@ -75,7 +75,7 @@ export default class JobStatusPanelSteadyComponent extends Component {
       .flatMap((allocType) => Object.values(allocType))
       .flatMap((allocHealth) => Object.values(allocHealth))
       .flatMap((allocCanary) => Object.values(allocCanary))
-      .map((a) => (!isNaN(a?.jobVersion) ? `v${a.jobVersion}` : 'pending')) // "starting" allocs, and possibly others, do not yet have a jobVersion
+      .map((a) => (!isNaN(a?.jobVersion) ? a.jobVersion : 'pending')) // "starting" allocs, and possibly others, do not yet have a jobVersion
       .reduce(
         (result, item) => ({
           ...result,

diff --git a/ui/app/controllers/jobs/job/allocations.js b/ui/app/controllers/jobs/job/allocations.js
@@ -41,12 +41,16 @@ export default class AllocationsController extends Controller.extend(
     {
       qpTaskGroup: 'taskGroup',
     },
+    {
+      qpVersion: 'version',
+    },
     'activeTask',
   ];
 
   qpStatus = '';
   qpClient = '';
   qpTaskGroup = '';
+  qpVersion = '';
   currentPage = 1;
   pageSize = 25;
   activeTask = null;
@@ -70,10 +74,16 @@ export default class AllocationsController extends Controller.extend(
     'allocations.[]',
     'selectionStatus',
     'selectionClient',
-    'selectionTaskGroup'
+    'selectionTaskGroup',
+    'selectionVersion'
   )
   get filteredAllocations() {
-    const { selectionStatus, selectionClient, selectionTaskGroup } = this;
+    const {
+      selectionStatus,
+      selectionClient,
+      selectionTaskGroup,
+      selectionVersion,
+    } = this;
 
     return this.allocations.filter((alloc) => {
       if (
@@ -94,6 +104,12 @@ export default class AllocationsController extends Controller.extend(
       ) {
         return false;
       }
+      if (
+        selectionVersion.length &&
+        !selectionVersion.includes(alloc.jobVersion)
+      ) {
+        return false;
+      }
       return true;
     });
   }
@@ -105,6 +121,7 @@ export default class AllocationsController extends Controller.extend(
   @selection('qpStatus') selectionStatus;
   @selection('qpClient') selectionClient;
   @selection('qpTaskGroup') selectionTaskGroup;
+  @selection('qpVersion') selectionVersion;
 
   @action
   gotoAllocation(allocation) {
@@ -158,6 +175,24 @@ export default class AllocationsController extends Controller.extend(
     return taskGroups.sort().map((tg) => ({ key: tg, label: tg }));
   }
 
+  @computed('model.allocations.[]', 'selectionVersion')
+  get optionsVersions() {
+    const versions = Array.from(
+      new Set(this.model.allocations.mapBy('jobVersion'))
+    ).compact();
+
+    // Update query param when the list of versions changes.
+    scheduleOnce('actions', () => {
+      // eslint-disable-next-line ember/no-side-effects
+      this.set(
+        'qpVersion',
+        serialize(intersection(versions, this.selectionVersion))
+      );
+    });
+
+    return versions.sort((a, b) => a - b).map((v) => ({ key: v, label: v }));
+  }
+
   setFacetQueryParam(queryParam, selection) {
     this.set(queryParam, serialize(selection));
   }

diff --git a/ui/app/styles/components/job-status-panel.scss b/ui/app/styles/components/job-status-panel.scss
@@ -65,6 +65,9 @@
         gap: 0.5rem;
         & > li {
           white-space: nowrap;
+          & a {
+            text-decoration: none;
+          }
         }
       }
     }
@@ -302,6 +305,10 @@
     }
   }
 
+  .legend-item .represented-allocation .flight-icon {
+    animation: none;
+  }
+
   & > .boxed-section-body > .deployment-allocations {
     margin-bottom: 1rem;
   }

diff --git a/ui/app/templates/jobs/job/allocations.hbs b/ui/app/templates/jobs/job/allocations.hbs
@@ -33,6 +33,13 @@
             @selection={{this.selectionTaskGroup}}
             @onSelect={{action this.setFacetQueryParam "qpTaskGroup"}}
           />
+          <MultiSelectDropdown
+            data-test-allocation-version-facet
+            @label="Job Version"
+            @options={{this.optionsVersions}}
+            @selection={{this.selectionVersion}}
+            @onSelect={{action this.setFacetQueryParam "qpVersion"}}
+          />
         </div>
       </div>
     </div>