feat: clickable links in allocations chart on job overview page

hashicorp · Nov 25, 2021 · 60140c5 · 60140c5
1 parent febcd5e
commit 60140c5
Show file tree

Hide file tree

Showing 12 changed files with 196 additions and 123 deletions.
diff --git a/ui/app/components/job-page/parts/summary.js b/ui/app/components/job-page/parts/summary.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 import { classNames } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
 
@@ -8,6 +8,12 @@ import classic from 'ember-classic-decorator';
 export default class Summary extends Component {
   job = null;
   forceCollapsed = false;
+  gotoAllocations() {}
+
+  @action
+  onSliceClick(ev, slice) {
+    this.gotoAllocations([slice.label.camelize()]);
+  }
 
   @computed('forceCollapsed')
   get isExpanded() {

diff --git a/ui/app/controllers/jobs/job/index.js b/ui/app/controllers/jobs/job/index.js
@@ -49,4 +49,14 @@ export default class IndexController extends Controller.extend(WithNamespaceRese
       },
     });
   }
+
+  @action
+  gotoAllocations(status) {
+    this.transitionToRoute('jobs.job.allocations', this.job, {
+      queryParams: {
+        status: JSON.stringify(status),
+        namespace: this.job.get('namespace.name'),
+      },
+    });
+  }
 }
diff --git a/ui/app/templates/components/job-page/batch.hbs b/ui/app/templates/components/job-page/batch.hbs
@@ -1,21 +1,18 @@
 <JobPage::Parts::Body @job={{this.job}}>
-  <JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
-
+  <JobPage::Parts::Error
+    @errorMessage={{this.errorMessage}}
+    @onDismiss={{action "clearErrorMessage"}}
+  />
   <JobPage::Parts::Title @job={{this.job}} @handleError={{action "handleError"}} />
-
   <JobPage::Parts::StatsBox @job={{this.job}} />
-
-  <JobPage::Parts::Summary @job={{this.job}} />
-
+  <JobPage::Parts::Summary @job={{this.job}} @gotoAllocations={{this.gotoAllocations}} />
   <JobPage::Parts::PlacementFailures @job={{this.job}} />
-
   <JobPage::Parts::TaskGroups
     @job={{this.job}}
     @sortProperty={{this.sortProperty}}
     @sortDescending={{this.sortDescending}}
-    @gotoTaskGroup={{this.gotoTaskGroup}} />
-
+    @gotoTaskGroup={{this.gotoTaskGroup}}
+  />
   <JobPage::Parts::RecentAllocations @job={{this.job}} />
-
   <JobPage::Parts::Meta @job={{this.job}} />
-</JobPage::Parts::Body>
+</JobPage::Parts::Body>
diff --git a/ui/app/templates/components/job-page/parameterized-child.hbs b/ui/app/templates/components/job-page/parameterized-child.hbs
@@ -1,39 +1,49 @@
 <JobPage::Parts::Body @job={{this.job}}>
-  <JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
-
-  <JobPage::Parts::Title @job={{this.job}} @title={{this.job.trimmedName}} @handleError={{action "handleError"}} />
-
+  <JobPage::Parts::Error
+    @errorMessage={{this.errorMessage}}
+    @onDismiss={{action "clearErrorMessage"}}
+  />
+  <JobPage::Parts::Title
+    @job={{this.job}}
+    @title={{this.job.trimmedName}}
+    @handleError={{action "handleError"}}
+  />
   <JobPage::Parts::StatsBox @job={{this.job}}>
     <:before-namespace>
       <span class="pair" data-test-job-stat="parent">
-        <span class="term">Parent</span>
-        <LinkTo @route="jobs.job" @model={{this.job.parent}} @query={{hash jobNamespace=this.job.parent.namespace.name}}>
+        <span class="term">
+          Parent
+        </span>
+        <LinkTo
+          @route="jobs.job"
+          @model={{this.job.parent}}
+          @query={{hash jobNamespace=this.job.parent.namespace.name}}
+        >
           {{this.job.parent.name}}
         </LinkTo>
       </span>
     </:before-namespace>
   </JobPage::Parts::StatsBox>
-
   {{#if this.job.hasClientStatus}}
     <JobPage::Parts::JobClientStatusSummary
       @gotoClients={{this.gotoClients}}
       @job={{this.job}}
       @jobClientStatus={{this.jobClientStatus}}
     />
   {{/if}}
-
-  <JobPage::Parts::Summary @job={{this.job}} @forceCollapsed={{this.job.hasClientStatus}} />
-
+  <JobPage::Parts::Summary
+    @job={{this.job}}
+    @gotoAllocations={{this.gotoAllocations}}
+    @forceCollapsed={{this.job.hasClientStatus}}
+  />
   <JobPage::Parts::PlacementFailures @job={{this.job}} />
-
   <JobPage::Parts::TaskGroups
     @job={{this.job}}
     @sortProperty={{this.sortProperty}}
     @sortDescending={{this.sortDescending}}
-    @gotoTaskGroup={{this.gotoTaskGroup}} />
-
+    @gotoTaskGroup={{this.gotoTaskGroup}}
+  />
   <JobPage::Parts::RecentAllocations @job={{this.job}} />
-
   <div class="boxed-section">
     <div class="boxed-section-head">
       Meta
@@ -43,20 +53,29 @@
     {{else}}
       <div class="boxed-section-body">
         <div data-test-empty-meta-message class="empty-message">
-          <h3 class="empty-message-headline">No Meta Attributes</h3>
-          <p class="empty-message-body">This job is configured with no meta attributes.</p>
+          <h3 class="empty-message-headline">
+            No Meta Attributes
+          </h3>
+          <p class="empty-message-body">
+            This job is configured with no meta attributes.
+          </p>
         </div>
       </div>
     {{/if}}
   </div>
-
   <div class="boxed-section">
-    <div class="boxed-section-head">Payload</div>
+    <div class="boxed-section-head">
+      Payload
+    </div>
     <div class="boxed-section-body is-dark">
       {{#if this.payloadJSON}}
         <JsonViewer @json={{this.payloadJSON}} />
       {{else}}
-        <pre class="cli-window is-elastic"><code>{{this.payload}}</code></pre>
+        <pre class="cli-window is-elastic">
+          <code>
+            {{this.payload}}
+          </code>
+        </pre>
       {{/if}}
     </div>
   </div>

diff --git a/ui/app/templates/components/job-page/parameterized.hbs b/ui/app/templates/components/job-page/parameterized.hbs
@@ -1,19 +1,21 @@
 <JobPage::Parts::Body @job={{this.job}}>
-  <JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
-
+  <JobPage::Parts::Error
+    @errorMessage={{this.errorMessage}}
+    @onDismiss={{action "clearErrorMessage"}}
+  />
   <JobPage::Parts::Title @job={{this.job}} @handleError={{action "handleError"}}>
-    <span class="tag is-hollow">Parameterized</span>
+    <span class="tag is-hollow">
+      Parameterized
+    </span>
   </JobPage::Parts::Title>
-
   <JobPage::Parts::StatsBox @job={{this.job}} />
-
-  <JobPage::Parts::Summary @job={{this.job}} />
+  <JobPage::Parts::Summary @job={{this.job}} @gotoAllocations={{this.gotoAllocations}} />
   <JobPage::Parts::Children
     @job={{this.job}}
     @sortProperty={{this.sortProperty}}
     @sortDescending={{this.sortDescending}}
     @currentPage={{this.currentPage}}
-    @gotoJob={{this.gotoJob}} />
-
+    @gotoJob={{this.gotoJob}}
+  />
   <JobPage::Parts::Meta @job={{this.job}} />
-</JobPage::Parts::Body>
+</JobPage::Parts::Body>
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>
diff --git a/ui/app/templates/components/job-page/periodic-child.hbs b/ui/app/templates/components/job-page/periodic-child.hbs
@@ -1,38 +1,48 @@
 <JobPage::Parts::Body @job={{this.job}}>
-  <JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
-
-  <JobPage::Parts::Title @job={{this.job}} @title={{this.job.trimmedName}} @handleError={{action "handleError"}} />
-
+  <JobPage::Parts::Error
+    @errorMessage={{this.errorMessage}}
+    @onDismiss={{action "clearErrorMessage"}}
+  />
+  <JobPage::Parts::Title
+    @job={{this.job}}
+    @title={{this.job.trimmedName}}
+    @handleError={{action "handleError"}}
+  />
   <JobPage::Parts::StatsBox @job={{this.job}}>
     <:before-namespace>
       <span class="pair" data-test-job-stat="parent">
-        <span class="term">Parent</span>
-        <LinkTo @route="jobs.job" @model={{this.job.parent}} @query={{hash namespace=this.job.parent.namespace.name}}>
+        <span class="term">
+          Parent
+        </span>
+        <LinkTo
+          @route="jobs.job"
+          @model={{this.job.parent}}
+          @query={{hash namespace=this.job.parent.namespace.name}}
+        >
           {{this.job.parent.name}}
         </LinkTo>
       </span>
     </:before-namespace>
   </JobPage::Parts::StatsBox>
-
   {{#if this.job.hasClientStatus}}
     <JobPage::Parts::JobClientStatusSummary
       @gotoClients={{this.gotoClients}}
       @job={{this.job}}
       @jobClientStatus={{this.jobClientStatus}}
     />
   {{/if}}
-
-  <JobPage::Parts::Summary @job={{this.job}} @forceCollapsed={{this.job.hasClientStatus}} />
-
+  <JobPage::Parts::Summary
+    @job={{this.job}}
+    @gotoAllocations={{this.gotoAllocations}}
+    @forceCollapsed={{this.job.hasClientStatus}}
+  />
   <JobPage::Parts::PlacementFailures @job={{this.job}} />
-
   <JobPage::Parts::TaskGroups
     @job={{this.job}}
     @sortProperty={{this.sortProperty}}
     @sortDescending={{this.sortDescending}}
-    @gotoTaskGroup={{this.gotoTaskGroup}} />
-
+    @gotoTaskGroup={{this.gotoTaskGroup}}
+  />
   <JobPage::Parts::RecentAllocations @job={{this.job}} />
-
   <JobPage::Parts::Meta @job={{this.job}} />
-</JobPage::Parts::Body>
+</JobPage::Parts::Body>
diff --git a/ui/app/templates/components/job-page/periodic.hbs b/ui/app/templates/components/job-page/periodic.hbs
@@ -1,27 +1,42 @@
 <JobPage::Parts::Body @job={{this.job}}>
-  <JobPage::Parts::Error @errorMessage={{this.errorMessage}} @onDismiss={{action "clearErrorMessage"}} />
-
-  <JobPage::Parts::Title @job={{this.job}} @title={{this.job.trimmedName}} @handleError={{action "handleError"}}>
-    <span class="tag is-hollow">periodic</span>
-    <button data-test-force-launch class="button is-warning is-small is-inline" onclick={{action "forceLaunch"}} type="button">Force Launch</button>
+  <JobPage::Parts::Error
+    @errorMessage={{this.errorMessage}}
+    @onDismiss={{action "clearErrorMessage"}}
+  />
+  <JobPage::Parts::Title
+    @job={{this.job}}
+    @title={{this.job.trimmedName}}
+    @handleError={{action "handleError"}}
+  >
+    <span class="tag is-hollow">
+      periodic
+    </span>
+    <button
+      data-test-force-launch
+      class="button is-warning is-small is-inline"
+      onclick={{action "forceLaunch"}}
+      type="button"
+    >
+      Force Launch
+    </button>
   </JobPage::Parts::Title>
-
   <JobPage::Parts::StatsBox @job={{this.job}}>
     <:after-namespace>
       <span class="pair" data-test-job-stat="cron">
-        <span class="term">Cron</span>
+        <span class="term">
+          Cron
+        </span>
         {{this.job.periodicDetails.Spec}}
       </span>
     </:after-namespace>
   </JobPage::Parts::StatsBox>
-
-  <JobPage::Parts::Summary @job={{this.job}} />
+  <JobPage::Parts::Summary @job={{this.job}} @gotoAllocations={{this.gotoAllocations}} />
   <JobPage::Parts::Children
     @job={{this.job}}
     @sortProperty={{this.sortProperty}}
     @sortDescending={{this.sortDescending}}
     @currentPage={{this.currentPage}}
-    @gotoJob={{this.gotoJob}} />
-
+    @gotoJob={{this.gotoJob}}
+  />
   <JobPage::Parts::Meta @job={{this.job}} />
-</JobPage::Parts::Body>
+</JobPage::Parts::Body>