Legen, wait for it...

hashicorp · Apr 5, 2023 · ccd137e · ccd137e
1 parent 7954fc8
commit ccd137e
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 2 deletions.
diff --git a/ui/app/components/job-status/panel/deploying.hbs b/ui/app/components/job-status/panel/deploying.hbs
@@ -58,7 +58,42 @@
       </div>
 
       <div class="legend-and-summary">
+
+        {{!-- Legend by Status, then by Health, then by Canary --}}
         <legend>
+          {{#each-in this.newAllocsByStatus as |status count|}}
+            <span class="legend-item {{if (eq count 0) "faded"}}">
+              <span class="represented-allocation {{status}}"></span>
+              {{count}} {{capitalize status}}
+            </span>
+          {{/each-in}}
+
+          {{#each-in this.newAllocsByHealth as |health count|}}
+            <span class="legend-item {{if (eq count 0) "faded"}}">
+              <span class="represented-allocation unplaced">
+                <span class="alloc-health-indicator">
+                  {{#if (eq health "healthy")}}
+                    <FlightIcon @name="check" @color="#25ba81" />
+                  {{else}}
+                    <FlightIcon @name="running" @color="black" />
+                  {{/if}}
+                </span>
+              </span>
+              {{count}} {{capitalize health}}
+            </span>
+          {{/each-in}}
+
+          <span class="legend-item {{if (eq this.newAllocsByCanary.canary 0) "faded"}}">
+            <span class="represented-allocation pending canary">
+              <span class="alloc-canary-indicator" />
+            </span>
+            {{this.newAllocsByCanary.canary}} Canary
+          </span>
+
+        </legend>
+
+
+        {{!-- <legend>
           {{#each this.allocTypes as |type|}}
             {{#each-in (get this.newVersionAllocBlocks type.label) as |health allocsByHealth|}}
               {{#each-in allocsByHealth as |canary allocsByCanary|}}
@@ -69,7 +104,7 @@
               {{/each-in}}
             {{/each-in}}
           {{/each}}
-        </legend>
+        </legend> --}}
       </div>
 
       <div class="history-and-params">

diff --git a/ui/app/components/job-status/panel/deploying.js b/ui/app/components/job-status/panel/deploying.js
@@ -135,6 +135,38 @@ export default class JobStatusPanelDeployingComponent extends Component {
     ];
   }
 
+  // #region legend
+  get newAllocsByStatus() {
+    return Object.entries(this.newVersionAllocBlocks).reduce(
+      (counts, [status, healthStatusObj]) => {
+        counts[status] = Object.values(healthStatusObj)
+          .flatMap((canaryStatusObj) => Object.values(canaryStatusObj))
+          .flatMap((canaryStatusArray) => canaryStatusArray).length;
+        return counts;
+      },
+      {}
+    );
+  }
+
+  get newAllocsByCanary() {
+    return Object.values(this.newVersionAllocBlocks)
+      .flatMap((healthStatusObj) => Object.values(healthStatusObj))
+      .flatMap((canaryStatusObj) => Object.entries(canaryStatusObj))
+      .reduce((counts, [canaryStatus, items]) => {
+        counts[canaryStatus] = (counts[canaryStatus] || 0) + items.length;
+        return counts;
+      }, {});
+  }
+
+  get newAllocsByHealth() {
+    return {
+      healthy: this.newRunningHealthyAllocBlocks.length,
+      'health unknown':
+        this.totalAllocs - this.newRunningHealthyAllocBlocks.length,
+    };
+  }
+  // #endregion legend
+
   get oldRunningHealthyAllocBlocks() {
     return this.oldVersionAllocBlocks.running?.healthy?.nonCanary || [];
   }

diff --git a/ui/app/styles/components/job-status-panel.scss b/ui/app/styles/components/job-status-panel.scss
@@ -52,7 +52,7 @@
 
     legend {
       display: grid;
-      grid-template-columns: repeat(2, 1fr);
+      grid-template-columns: repeat(4, 1fr);
       gap: 0.5rem;
     }
     .versions {
@@ -274,6 +274,7 @@
       position: absolute;
       bottom: 0;
       left: 0;
+      border-radius: 4px;
 
       &:after {
         content: '';