Other statuses considered

hashicorp · Feb 16, 2023 · ce339cb · ce339cb
1 parent f8f3afb
commit ce339cb
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 72 deletions.
diff --git a/ui/app/components/job-status/allocation-row.js b/ui/app/components/job-status/allocation-row.js
@@ -3,14 +3,16 @@ import { action } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import { tracked } from '@glimmer/tracking';
 
+const UNGROUPED_ALLOCS_THRESHOLD = 50;
+
 export default class JobStatusAllocationRowComponent extends Component {
 
   @tracked element = null;
 
   @alias('element.clientWidth') width;
 
   get showSummaries() {
-    return this.args.totalAllocs > 60; // TODO: arbitrary
+    return this.args.totalAllocs > UNGROUPED_ALLOCS_THRESHOLD;
   }
 
   calcPerc(count) {

diff --git a/ui/app/components/job-status/allocation-status-block.hbs b/ui/app/components/job-status/allocation-status-block.hbs
@@ -1,10 +1,10 @@
 <div
   class="allocation-status-block {{unless this.countToShow "rest-only"}}"
-  style="width: {{@width}}%"
+  style={{html-safe (concat "width: " @width "%")}}
 >
   {{#if this.countToShow}}
     <div class="allocs">
-      {{#each (range 0 this.countToShow) as |alloc|}}
+      {{#each (range 0 this.countToShow)}}
         <span class="represented-allocation {{@status}}"></span>
       {{/each}}
     </div>

diff --git a/ui/app/components/job-status/allocation-status-block.js b/ui/app/components/job-status/allocation-status-block.js
@@ -1,18 +1,14 @@
 import Component from '@glimmer/component';
-import { htmlSafe } from '@ember/template';
 
 export default class JobStatusAllocationStatusBlockComponent extends Component {
-  // Only show as much as can reasonably fit in the panel, given @cxount and @percentage
-
   get countToShow() {
-    // TODO: 60 is a magic number representing the rest element + 10px gap. Make less magic.
-    // console.log('consider percentage', this.args.percentage, this.args.count, this.args.percentage * this.args.count)
-    // Show only as many as can fit within width, assuming each is 30px wide
-    // console.log('CTS', this.args.status, Math.floor((this.width - 60) / 30));
-    // Show all if there's room
-    // console.log('about to compare for', this.args.status, this.args.count, this.width / 30);
-    let cts = Math.floor((this.args.width-60) / 30);
-    return cts > 3 ? cts : 0;
+    const restWidth = 50;
+    const restGap = 10;
+    let cts = Math.floor((this.args.width-(restWidth+restGap)) / 42);
+    // Either show 3+ or show only a single/remaining box
+    return cts > 3
+      ? cts
+      : 0;
   }
 
   get remaining() {

diff --git a/ui/app/components/job-status/panel.hbs b/ui/app/components/job-status/panel.hbs
@@ -15,38 +15,22 @@
       </button>
     </div>
   </div>
-  <form class="fake-box-for-manipulating-allocs">
-    {{!-- TODO: TEMP --}}
-    <header>Fake some data:</header>
-    <label>
-      <strong>Running Allocs: {{@job.runningAllocs}}</strong>
-      <input type="range" 
-          oninput={{action (mut @job.summary.runningAllocs) value="target.value"}} 
-          min="0"
-          max="100"
-          value={{@job.summary.runningAllocs}}
-          steps="1">
-    </label>
-    <label>
-      <strong>Failed Allocs: {{@job.failedAllocs}}</strong>
-      <input type="range" 
-          oninput={{action (mut @job.summary.failedAllocs) value="target.value"}} 
-          min="0"
-          max="100"
-          value={{@job.summary.failedAllocs}}
-          steps="1">
-    </label>
-    <label>
-      <strong>Unknown Allocs: {{@job.unknownAllocs}}</strong>
-      <input type="range" 
-          oninput={{action (mut @job.summary.unknownAllocs) value="target.value"}} 
-          min="0"
-          max="100"
-          value={{@job.summary.unknownAllocs}}
-          steps="1">
-    </label>
-
-  </form>
+  {{#if this.showDataFaker}}
+    <form class="fake-box-for-manipulating-allocs">
+      <header>Manipulate mock data:</header>
+      {{#each this.allocTypes as |type|}}
+        <label>
+          <strong>{{capitalize type}}: {{get @job.summary type}}</strong>
+          <input type="range" 
+              {{on "input" (fn this.modifyMockAllocs type)}}
+              min="0"
+              max="1000"
+              value={{get @job.summary type}}
+              steps="1">
+        </label>
+      {{/each}}
+    </form>
+  {{/if}}
   <div class="boxed-section-body">
     {{#if (eq this.mode "current")}}
       <h3 class="title is-4 running-allocs-title"><strong>{{@job.runningAllocs}}/{{this.totalAllocs}}</strong> Allocations Running</h3>
@@ -55,6 +39,10 @@
             running=@job.runningAllocs
             failed=@job.failedAllocs
             unknown=@job.unknownAllocs
+            queued=@job.queuedAllocs
+            complete=@job.completeAllocs
+            starting=@job.startingAllocs
+            lost=@job.lostAllocs
           }}
         />
     {{/if}}

diff --git a/ui/app/components/job-status/panel.js b/ui/app/components/job-status/panel.js
@@ -1,15 +1,37 @@
 // @ts-check
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import config from 'nomad-ui/config/environment';
+import { action } from '@ember/object';
 
 export default class JobStatusPanelComponent extends Component {
+
+  allocTypes = [
+    "runningAllocs",
+    "failedAllocs",
+    "unknownAllocs",
+    "queuedAllocs",
+    "completeAllocs",
+    "startingAllocs",
+    "lostAllocs"
+  ]
   /**
    * @type {('current'|'historical')}
    */
   @tracked mode = 'current'; // can be either "current" or "historical"
 
-  // TODO: TEMP
+  // Convenience UI for manipulating number of allocations. Temporary and mirage only.
+  get showDataFaker() {
+    return config['ember-cli-mirage'];
+  }
+
+  // TODO: eventually we will want this from a new property on a job.
   get totalAllocs() {
-    return +(+this.args.job.runningAllocs + +this.args.job.failedAllocs + +this.args.job.unknownAllocs);
+    return this.allocTypes.reduce((sum, type) => sum + this.args.job[type], 0);
+  }
+
+  @action
+  modifyMockAllocs(type, { target: { value } }) {
+    this.args.job[type] = +value;
   }
 }
diff --git a/ui/app/styles/components/job-status-panel.scss b/ui/app/styles/components/job-status-panel.scss
@@ -34,29 +34,21 @@
   .alloc-representation {
     display: grid;
     gap: 10px;
-    // grid-template-columns: repeat( auto-fit, minmax(auto, 20px) );
     grid-auto-flow: column;
-    grid-auto-columns: minmax(1px, 20px);
-    // grid-auto-rows: 20px;
+    grid-auto-columns: minmax(1px, 32px);
     & > .represented-allocation {
       width: auto;
-      // min-width: 1px;
-      // max-width: 20px;
     }
   }
 
   .alloc-status-summaries {
     display: flex;
-    height: 20px;
+    height: 32px;
     gap: 0.5rem;
 
     .allocation-status-block {
-      // margin-right: 0.5rem;
       display: grid;
-      // grid-auto-flow: column;
-      // grid-template-columns: repeat(9, minmax(1fr, 20px));
       grid-template-columns: auto 50px;
-      // grid-auto-rows: 20px;
       gap: 10px;
 
       &.rest-only {
@@ -66,20 +58,15 @@
       & > .allocs {
         display: grid;
         grid-auto-flow: column;
-        // grid-auto-columns: minmax(10px, 20px);
         gap: 10px;
       }
 
       .represented-allocation {
-        color: white;
         text-align: center;
         font-size: 0;
       }
 
       .represented-allocation.rest {
-        // background-color: blue;
-        // grid-column: span 3; // TODO: probably not right
-        // width: 50px;
         font-size: 0.8rem;
         display: grid;
         align-content: center;
@@ -93,18 +80,41 @@
   .represented-allocation {
     background: $green;
     border-radius: 4px;
-    height: 20px;
-    width: 20px;
+    height: 32px;
+    width: 32px;
+    color: white;
+
+    $queued: $grey;
+    $starting: $grey-lighter;
+    $running: $primary;
+    $complete: $nomad-green-dark;
+    $failed: $danger;
+    $lost: $dark;
 
     &.running {
-      background: $green;
+      background: $running;
     }
     &.failed {
-      background: $red;
+      background: $failed;
     }
     &.unknown {
-      background: $yellow;
+      background: $unknown;
+    }
+    &.queued {
+      background: $queued;
+    }
+    &.complete {
+      background: $complete;
     }
+    &.starting {
+      background: $starting;
+      color: black;
+    }
+    &.lost {
+      background: $lost;
+    }
+
+
   }
 
 }

diff --git a/ui/app/templates/components/job-page/service.hbs b/ui/app/templates/components/job-page/service.hbs
@@ -5,7 +5,7 @@
     <jobPage.ui.StatsBox />
     <jobPage.ui.DasRecommendations />
     <jobPage.ui.StatusPanel />
-    {{!-- <jobPage.ui.Summary /> --}}
+    <jobPage.ui.Summary />
     <jobPage.ui.PlacementFailures />
     <jobPage.ui.LatestDeployment />
     <jobPage.ui.TaskGroups @sortProperty={{@sortProperty}} @sortDescending={{@sortDescending}} />

diff --git a/ui/mirage/factories/job-summary.js b/ui/mirage/factories/job-summary.js
@@ -14,11 +14,11 @@ export default Factory.extend({
         summary[group] = {
           Queued: faker.random.number(10),
           Complete: faker.random.number(10),
-          Failed: 15,
-          Running: 50,
+          Failed: faker.random.number(10),
+          Running: faker.random.number(10),
           Starting: faker.random.number(10),
           Lost: faker.random.number(10),
-          Unknown: 50,
+          Unknown: faker.random.number(10),
         };
         return summary;
       }, {});