[ui] Service health check in-session history (#14515)

* Preliminary version

* Addition of a filtering helper and more styling for service check history

* Fixed-widths on table cols

* Account for new rows in test

* Explanation for magic numbers

ui/app/components/allocation-service-sidebar.hbs

@@ -91,13 +91,13 @@
 		{{#if this.checks.length}}
 			<ListTable class="health-checks" @source={{this.checks}} as |t|>
 				<t.head>
-					<th>
+					<th class="name">
 						Name
 					</th>
-					<th>
+					<th class="status">
 						Status
 					</th>
-					<td>
+					<td class="output">
 						Output
 					</td>
 				</t.head>
@@ -125,6 +125,15 @@
 							</code>
 						</td>
 					</tr>
+					<tr class="service-status-indicators">
+						<td colspan="3">
+							<div>
+								{{#each (dedupe-by-property (filter-by "Check" row.model.Check @service.healthChecks) prop="Timestamp") as |check|}}
+									<ServiceStatusIndicator @check={{check}} />
+								{{/each}}
+							</div>
+						</td>
+					</tr>
 				</t.body>
 			</ListTable>
 		{{/if}}

ui/app/components/service-status-indicator.hbs

@@ -0,0 +1 @@
+<span class="service-status-indicator status-{{@check.Status}} tooltip is-right-aligned" aria-label="{{@check.Status}} at {{format-ts @check.Timestamp}}"></span>

ui/app/helpers/dedupe-by-property.js

@@ -0,0 +1,15 @@
+// Takes an array and a property name and returns a new array with all the duplicates removed.
+import { helper } from '@ember/component/helper';
+
+export default helper(function dedupeByProperty([arr], { prop }) {
+  const seen = new Set();
+  return arr.filter((item) => {
+    const val = item[prop];
+    if (seen.has(val)) {
+      return false;
+    } else {
+      seen.add(val);
+      return true;
+    }
+  });
+});

ui/app/routes/allocations/allocation.js

@@ -25,7 +25,7 @@ export default class AllocationRoute extends Route.extend(WithWatchers) {
       if (doesAllocHaveServices) {
         controller.set(
           'watchHealthChecks',
-          this.watchHealthChecks.perform(model, 'getServiceHealth')
+          this.watchHealthChecks.perform(model, 'getServiceHealth', 2000)
         );
       }
     }

ui/app/styles/components/services.scss

@@ -67,3 +67,54 @@
     margin-right: 5px;
   }
 }
+
+table.health-checks {
+  table-layout: fixed;
+  th.name {
+    width: 20%;
+  }
+  th.status {
+    width: 15%;
+  }
+  th.output {
+    width: 65%;
+  }
+  tbody tr td {
+    border-bottom-width: 0;
+  }
+
+  .service-status-indicators {
+    td {
+      border-bottom-width: 1px;
+      text-align: right;
+      & > div {
+        display: grid;
+        grid-auto-flow: column;
+        justify-content: end;
+        gap: 2px;
+        width: calc(
+          750px - 3rem - 50px
+        ); //Sidebar width - padding - table padding
+        height: 20px;
+        padding-top: 30px;
+        margin-top: -20px;
+        overflow: hidden;
+        box-sizing: content-box;
+        .service-status-indicator {
+          width: 8px;
+          height: 8px;
+          display: block;
+          position: relative;
+          &.status-success {
+            background-color: $nomad-green;
+            top: 0px;
+          }
+          &.status-failure {
+            background-color: $red;
+            top: 12px;
+          }
+        }
+      }
+    }
+  }
+}

ui/tests/integration/components/allocation-service-sidebar-test.js

@@ -78,7 +78,7 @@ module(
       );
       assert.dom('h1 .aggregate-status').includesText('Healthy');
       assert
-        .dom('table.health-checks tbody tr')
+        .dom('table.health-checks tbody tr:not(.service-status-indicators)')
         .exists({ count: 2 }, 'has two rows');
 
       this.set('service', unhealthyService);