Merge pull request #11578 from hashicorp/f-ui/clickable-links-allocs

clickable links in allocations chart
hashicorp · Dec 20, 2021 · 0ec5db4 · 0ec5db4
2 parents ab9ba35 + 094c191
commit 0ec5db4
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 17 deletions.
diff --git a/ui/app/components/job-page/parts/summary.js b/ui/app/components/job-page/parts/summary.js
@@ -1,14 +1,32 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
+import { inject as service } from '@ember/service';
 import { classNames } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
 
 @classic
 @classNames('boxed-section')
 export default class Summary extends Component {
+  @service router;
+
   job = null;
   forceCollapsed = false;
 
+  @action
+  gotoAllocations(status) {
+    this.router.transitionTo('jobs.job.allocations', this.job, {
+      queryParams: {
+        status: JSON.stringify(status),
+        namespace: this.job.get('namespace.name'),
+      },
+    });
+  }
+
+  @action
+  onSliceClick(ev, slice) {
+    this.gotoAllocations([slice.label.camelize()]);
+  }
+
   @computed('forceCollapsed')
   get isExpanded() {
     if (this.forceCollapsed) return false;

diff --git a/ui/app/templates/components/job-page/parts/summary.hbs b/ui/app/templates/components/job-page/parts/summary.hbs
@@ -1,4 +1,10 @@
-<ListAccordion data-test-job-summary @source={{array this.job}} @key="id" @startExpanded={{this.isExpanded}} @onToggle={{action this.persist}} as |a|>
+<ListAccordion
+  data-test-job-summary
+  @source={{array this.job}}
+  @key="id"
+  @startExpanded={{this.isExpanded}}
+  @onToggle={{action this.persist}} as |a|
+>
   <a.head @buttonLabel={{if a.isOpen "collapse" "expand"}}>
     <div class="columns">
       <div class="column is-minimum nowrap">
@@ -14,15 +20,16 @@
           </span>
         {{/if}}
       </div>
-
       {{#unless a.isOpen}}
         <div class="column">
           <div class="inline-chart bumper-left">
             {{#if a.item.hasChildren}}
               {{#if (gt a.item.totalChildren 0)}}
                 <ChildrenStatusBar @job={{a.item}} @isNarrow={{true}} />
               {{else}}
-                <em class="is-faded">No Children</em>
+                <em class="is-faded">
+                  No Children
+                </em>
               {{/if}}
             {{else}}
               <AllocationStatusBar @allocationContainer={{a.item}} @isNarrow={{true}} />
@@ -33,17 +40,26 @@
     </div>
   </a.head>
   <a.body>
-    {{#component (if a.item.hasChildren "children-status-bar" "allocation-status-bar")
-    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.value 0) "is-empty"}}">
-          <JobPage::Parts::SummaryLegendItem @datum={{datum}} @index={{index}} />
-        </li>
-      {{/each}}
-    </ol>
-  {{/component}}
+    {{#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 (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}}
   </a.body>
-</ListAccordion>
+</ListAccordion>