feat: add clicking functionality to alloc status legend

ui/app/components/allocation-status-bar.js

@@ -5,11 +5,24 @@ export default class AllocationStatusBar extends DistributionBar {
   layoutName = 'components/distribution-bar';
 
   allocationContainer = null;
+  job = null;
 
   'data-test-allocation-status-bar' = true;
 
+  generateLegendLink(job, status) {
+    if (!job || status === 'queued') return null;
+
+    return {
+      queryParams: {
+        status: JSON.stringify([status]),
+        namespace: job.belongsTo('namespace').id(),
+      },
+    };
+  }
+
   @computed(
-    'allocationContainer.{queuedAllocs,completeAllocs,failedAllocs,runningAllocs,startingAllocs}'
+    'allocationContainer.{queuedAllocs,completeAllocs,failedAllocs,runningAllocs,startingAllocs}',
+    'job.namespace'
   )
   get data() {
     if (!this.allocationContainer) {
@@ -25,21 +38,43 @@ export default class AllocationStatusBar extends DistributionBar {
       'lostAllocs'
     );
     return [
-      { label: 'Queued', value: allocs.queuedAllocs, className: 'queued' },
+      {
+        label: 'Queued',
+        value: allocs.queuedAllocs,
+        className: 'queued',
+        legendLink: this.generateLegendLink(this.job, 'queued'),
+      },
       {
         label: 'Starting',
         value: allocs.startingAllocs,
         className: 'starting',
         layers: 2,
+        legendLink: this.generateLegendLink(this.job, 'starting'),
+      },
+      {
+        label: 'Running',
+        value: allocs.runningAllocs,
+        className: 'running',
+        legendLink: this.generateLegendLink(this.job, 'running'),
       },
-      { label: 'Running', value: allocs.runningAllocs, className: 'running' },
       {
         label: 'Complete',
         value: allocs.completeAllocs,
         className: 'complete',
+        legendLink: this.generateLegendLink(this.job, 'complete'),
+      },
+      {
+        label: 'Failed',
+        value: allocs.failedAllocs,
+        className: 'failed',
+        legendLink: this.generateLegendLink(this.job, 'failed'),
+      },
+      {
+        label: 'Lost',
+        value: allocs.lostAllocs,
+        className: 'lost',
+        legendLink: this.generateLegendLink(this.job, 'lost'),
       },
-      { label: 'Failed', value: allocs.failedAllocs, className: 'failed' },
-      { label: 'Lost', value: allocs.lostAllocs, className: 'lost' },
     ];
   }
 }

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

@@ -40,26 +40,57 @@
     </div>
   </a.head>
   <a.body>
-    {{#component
-      (if a.item.hasChildren "children-status-bar" "allocation-status-bar")
-      allocationContainer=a.item.summary
-      job=a.item.summary
-      onSliceClick=this.onSliceClick
-      class="split-view" as |chart|
-    }}
-      <ol data-test-legend class="legend">
-        {{#each chart.data as |datum index|}}
-          <li
-            class="{{datum.className}}
+    {{#if a.item.hasChildren}}
+      <ChildrenStatusBar
+        @allocationContainer={{a.item.summary}}
+        @job={{a.item.summary}}
+        @class="split-view" as |chart|
+      >
+        <ol data-test-legend class="legend">
+          {{#each chart.data as |datum index|}}
+            <li
+              class="{{datum.className}}
 
-              {{if (eq datum.label chart.activeDatum.label) "is-active"}}
+                {{if (eq datum.label chart.activeDatum.label) "is-active"}}
 
-              {{if (eq datum.value 0) "is-empty"}}"
-          >
-            <JobPage::Parts::SummaryLegendItem @datum={{datum}} @index={{index}} />
-          </li>
-        {{/each}}
-      </ol>
-    {{/component}}
+                {{if (eq datum.value 0) "is-empty"}}"
+            >
+              <JobPage::Parts::SummaryLegendItem @datum={{datum}} @index={{index}} />
+            </li>
+          {{/each}}
+        </ol>
+      </ChildrenStatusBar>
+    {{else}}
+      <AllocationStatusBar
+        @allocationContainer={{a.item.summary}}
+        @job={{this.job}}
+        @onSliceClick={{this.onSliceClick}}
+        @class="split-view" as |chart|
+      >
+        <ol data-test-legend class="legend">
+          {{#each chart.data as |datum index|}}
+            <li
+              class="{{datum.className}}
+
+                {{if (eq datum.label chart.activeDatum.label) "is-active"}}
+
+                {{if (eq datum.value 0) "is-empty"}}"
+            >
+              {{#if (and (gt datum.value 0) datum.legendLink)}}
+                <LinkTo
+                  @route="jobs.job.allocations"
+                  @model={{this.job}}
+                  @query={{datum.legendLink.queryParams}}
+                >
+                  <JobPage::Parts::SummaryLegendItem @datum={{datum}} @index={{index}} />
+                </LinkTo>
+              {{else}}
+                <JobPage::Parts::SummaryLegendItem @datum={{datum}} @index={{index}} />
+              {{/if}}
+            </li>
+          {{/each}}
+        </ol>
+      </AllocationStatusBar>
+    {{/if}}
   </a.body>
 </ListAccordion>