More sensible allocTypes listing

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

Hide file tree

Showing 6 changed files with 39 additions and 44 deletions.
diff --git a/ui/app/components/job-status/allocation-row.hbs b/ui/app/components/job-status/allocation-row.hbs
@@ -7,11 +7,10 @@
     {{/each-in}}
   </div>
 {{else}}
-  <div class="alloc-representation">
+  <div class="ungrouped-allocs">
     {{#each-in @allocBlocks as |status count|}}
-      {{!-- {{log "eachin" status count}} --}}
       {{#if (gt count 0)}}
-        {{#each (range 0 count) as |alloc|}}
+        {{#each (range 0 count)}}
           <span class="represented-allocation {{status}}"></span>
         {{/each}}
       {{/if}}

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

diff --git a/ui/app/components/job-status/panel.hbs b/ui/app/components/job-status/panel.hbs
@@ -20,12 +20,12 @@
       <header>Manipulate mock data:</header>
       {{#each this.allocTypes as |type|}}
         <label>
-          <strong>{{capitalize type}}: {{get @job.summary type}}</strong>
+          <strong>{{capitalize type.label}}: {{get @job.summary type.property}}</strong>
           <input type="range" 
-              {{on "input" (fn this.modifyMockAllocs type)}}
+              {{on "input" (fn this.modifyMockAllocs type.property)}}
               min="0"
               max="1000"
-              value={{get @job.summary type}}
+              value={{get @job.summary type.property}}
               steps="1">
         </label>
       {{/each}}
@@ -35,15 +35,7 @@
     {{#if (eq this.mode "current")}}
       <h3 class="title is-4 running-allocs-title"><strong>{{@job.runningAllocs}}/{{this.totalAllocs}}</strong> Allocations Running</h3>
         <JobStatus::AllocationRow @totalAllocs={{this.totalAllocs}}
-          @allocBlocks={{hash
-            running=@job.runningAllocs
-            failed=@job.failedAllocs
-            unknown=@job.unknownAllocs
-            queued=@job.queuedAllocs
-            complete=@job.completeAllocs
-            starting=@job.startingAllocs
-            lost=@job.lostAllocs
-          }}
+          @allocBlocks={{this.allocBlocks}}
         />
     {{/if}}
     {{#if (eq this.mode "historical")}}

diff --git a/ui/app/components/job-status/panel.js b/ui/app/components/job-status/panel.js
@@ -7,14 +7,27 @@ import { action } from '@ember/object';
 export default class JobStatusPanelComponent extends Component {
 
   allocTypes = [
-    "runningAllocs",
-    "failedAllocs",
-    "unknownAllocs",
-    "queuedAllocs",
-    "completeAllocs",
-    "startingAllocs",
-    "lostAllocs"
-  ]
+    "running",
+    "failed",
+    "unknown",
+    // "queued",
+    "complete",
+    // "starting",
+    "lost"
+  ].map((type) => {
+    return {
+      label: type,
+      property: `${type}Allocs`
+    }
+  })
+
+  get allocBlocks() {
+    return this.allocTypes.reduce((blocks, type) => {
+      blocks[type.label] = this.args.job[type.property];
+      return blocks;
+    }, {});
+  }
+
   /**
    * @type {('current'|'historical')}
    */
@@ -27,11 +40,11 @@ export default class JobStatusPanelComponent extends Component {
 
   // TODO: eventually we will want this from a new property on a job.
   get totalAllocs() {
-    return this.allocTypes.reduce((sum, type) => sum + this.args.job[type], 0);
+    return this.allocTypes.reduce((sum, type) => sum + this.args.job[type.property], 0);
   }
 
   @action
-  modifyMockAllocs(type, { target: { value } }) {
-    this.args.job[type] = +value;
+  modifyMockAllocs(propName, { target: { value } }) {
+    this.args.job[propName] = +value;
   }
 }
diff --git a/ui/app/styles/components/job-status-panel.scss b/ui/app/styles/components/job-status-panel.scss
@@ -31,7 +31,7 @@
     }
   }
 
-  .alloc-representation {
+  .ungrouped-allocs {
     display: grid;
     gap: 10px;
     grid-auto-flow: column;
@@ -55,19 +55,19 @@
         grid-template-columns: auto;
       }
 
-      & > .allocs {
+      & > .ungrouped-allocs {
         display: grid;
         grid-auto-flow: column;
         gap: 10px;
-      }
-
-      .represented-allocation {
-        text-align: center;
-        font-size: 0;
+        grid-auto-columns: unset;
+        & > .represented-allocation {
+          width: 32px;
+        }
       }
 
       .represented-allocation.rest {
         font-size: 0.8rem;
+        text-align: center;
         display: grid;
         align-content: center;
         font-weight: bold;

diff --git a/ui/mirage/scenarios/default.js b/ui/mirage/scenarios/default.js
@@ -68,15 +68,6 @@ function smallCluster(server) {
     id: 'service-haver',
     namespaceId: 'default',
   });
-  server.create('job', {
-    withGroupServices: true,
-    withTaskServices: true,
-    name: 'mixed-alloc-job',
-    id: 'mixed-alloc-job',
-    namespaceId: 'default',
-    type: 'service',
-    activeDeployment: true,
-  });
   server.createList('allocFile', 5);
   server.create('allocFile', 'dir', { depth: 2 });
   server.createList('csi-plugin', 2);