Beginnings of a legend

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

Hide file tree

Showing 3 changed files with 31 additions and 6 deletions.
diff --git a/ui/app/components/job-status/panel.hbs b/ui/app/components/job-status/panel.hbs
@@ -34,9 +34,19 @@
   <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>
-        <JobStatus::AllocationRow @totalAllocs={{this.totalAllocs}}
-          @allocBlocks={{this.allocBlocks}}
-        />
+
+      <JobStatus::AllocationRow @totalAllocs={{this.totalAllocs}}
+        @allocBlocks={{this.allocBlocks}}
+      />
+
+      <legend>
+        {{#each this.allocTypes as |type|}}
+          <span class="legend-item">
+            <span class="represented-allocation {{type.label}}"></span>
+            {{capitalize type.label}}
+          </span>
+        {{/each}}
+      </legend>
     {{/if}}
     {{#if (eq this.mode "historical")}}
       But what about before?

diff --git a/ui/app/components/job-status/panel.js b/ui/app/components/job-status/panel.js
@@ -8,12 +8,12 @@ export default class JobStatusPanelComponent extends Component {
 
   allocTypes = [
     "running",
-    "failed",
+    // "failed",
     "unknown",
     // "queued",
     "complete",
     // "starting",
-    "lost"
+    // "lost"
   ].map((type) => {
     return {
       label: type,

diff --git a/ui/app/styles/components/job-status-panel.scss b/ui/app/styles/components/job-status-panel.scss
@@ -44,7 +44,7 @@
   .alloc-status-summaries {
     display: flex;
     height: 32px;
-    gap: 0.5rem;
+    gap: 1.5rem;
 
     .allocation-status-block {
       display: grid;
@@ -117,6 +117,21 @@
 
   }
 
+  legend {
+    padding: 2rem 0;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    .legend-item {
+      display: grid;
+      gap: 0.5rem;
+      grid-template-columns: auto 1fr;
+      .represented-allocation {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
 }
 
 .fake-box-for-manipulating-allocs {