Merge pull request #57 from hashicorp/CC-6223

CC-6223: Update how statuses are displayed on Cut::ListItem::Service
hashicorp · Sep 5, 2023 · d4369d4 · d4369d4 · vercel · Sep 5, 2023
2 parents 5ee2994 + a101b25
commit d4369d4
Show file tree

Hide file tree

Showing 10 changed files with 100 additions and 68 deletions.
diff --git a/.changeset/beige-clouds-work.md b/.changeset/beige-clouds-work.md
@@ -0,0 +1,5 @@
+---
+'@hashicorp/consul-ui-toolkit': minor
+---
+
+Service list item now displays an overall service health status
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -27,14 +27,14 @@
 ### Publishing toolkit locally
 
 - from root `publish:local:toolkit`
-- or `cd toolkit` and `yarn publish:local` – Publishing `@hashocorp/consul-ui-toolkit` to local `.yalc` store
-- from the dependent project `yalc link @hashocorp/consul-ui-toolkit`
+- or `cd toolkit` and `yarn publish:local` – Publishing `@hashicorp/consul-ui-toolkit` to local `.yalc` store
+- from the dependent project `yalc link @hashicorp/consul-ui-toolkit`
   - in HCP you will need to run `yalc link @hashicorp/consul-ui-toolkit` in both the `hcp` folder and the `engines/consul` folder
 
 ### Remove toolkit package from local .yalc store
 
 - from root `cleanup:local:toolkit`
-- or `cd toolkit` and `yarn cleanup:local` – Removing `@hashocorp/consul-ui-toolkit` from local `.yalc` store
+- or `cd toolkit` and `yarn cleanup:local` – Removing `@hashicorp/consul-ui-toolkit` from local `.yalc` store
 - Run `yalc remove @hashicorp/consul-ui-toolkit` or `yalc remove --all` to remove the symlinks in any dependent project that currently has a `yalc link` set up.
 
 ## Running the test application

diff --git a/documentation/tests/integration/components/service-list-item-test.js b/documentation/tests/integration/components/service-list-item-test.js
@@ -41,8 +41,6 @@ module('Integration | Component | cut/list-item/service', function (hooks) {
       },
     };
     this.set('service', service);
-    let { success, critical, warning } = service.metadata.healthCheck.instance;
-    let healthCheckTotal = critical + success + warning;
 
     await render(
       hbs`
@@ -51,34 +49,18 @@ module('Integration | Component | cut/list-item/service', function (hooks) {
     assert.true(cutService.renders, 'renders component');
     assert.deepEqual(cutService.title, 'Service 1', 'service name is set');
     assert.false(
-      cutService.metadata.healthCheck.allHealthy,
-      'no all healthy badge if some warning or critical present'
-    );
-    assert.false(
-      cutService.metadata.healthCheck.success.renders,
-      'no success healthcheck if some warning or critical present'
+      cutService.metadata.healthCheck.healthy.renders,
+      'healthy status badge does not render if there are warning or critical healthchecks'
     );
     assert.true(
       cutService.metadata.healthCheck.critical.renders,
-      'renders critical'
+      'renders critical status badge'
     );
-    assert.true(
-      cutService.metadata.healthCheck.critical.text.includes(
-        `${critical}/${healthCheckTotal}`
-      ),
-      'renders correct number of critical checks'
-    );
-
-    assert.true(
+    assert.false(
       cutService.metadata.healthCheck.warning.renders,
-      'renders warning'
-    );
-    assert.true(
-      cutService.metadata.healthCheck.warning.text.includes(
-        `${warning}/${healthCheckTotal}`
-      ),
-      'renders correct number of warning checks'
+      'warning status badge does not render if there are critical healthchecks'
     );
+
     assert.true(cutService.metadata.kind.renders, 'renders kind name');
     assert.true(
       cutService.metadata.kind.text
@@ -161,10 +143,10 @@ module('Integration | Component | cut/list-item/service', function (hooks) {
     assert.true(cutService.renders, 'renders');
     assert.deepEqual(cutService.title, 'Service 1', 'service name is set');
     assert.true(
-      cutService.metadata.healthCheck.allHealthy,
-      'present All Healthy badge cause no critical and warning checks'
+      cutService.metadata.healthCheck.healthy.renders,
+      'renders healthy status badge'
     );
-    assert.false(cutService.metadata.healthCheck.success.renders, 'success');
+
     assert.false(cutService.metadata.healthCheck.critical.renders, 'critical');
     assert.false(cutService.metadata.healthCheck.warning.renders, 'warning');
     assert.false(cutService.metadata.kind.renders, 'kind');

diff --git a/documentation/tests/pages/service-list-item.js b/documentation/tests/pages/service-list-item.js
@@ -3,34 +3,37 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { create, isPresent, isVisible, text } from 'ember-cli-page-object';
+import { create, isPresent, text } from 'ember-cli-page-object';
 
 const listItemSelector = '[data-test-service-list-item]';
 export default create({
   renders: isPresent(listItemSelector),
   title: text(`${listItemSelector} [data-test-service-name]`),
   metadata: {
     healthCheck: {
-      allHealthy: isVisible(
-        `${listItemSelector} [data-test-health-check-all-healthy]`
-      ),
-      success: {
+      healthy: {
         renders: isPresent(
-          `${listItemSelector} [data-test-health-check-success]`
+          `${listItemSelector} [data-test-service-health-check-healthy]`
+        ),
+        text: text(
+          `${listItemSelector} [data-test-service-health-check-healthy]`
         ),
-        text: text(`${listItemSelector} [data-test-health-check-success]`),
       },
       critical: {
         renders: isPresent(
-          `${listItemSelector} [data-test-health-check-critical]`
+          `${listItemSelector} [data-test-service-health-check-critical]`
+        ),
+        text: text(
+          `${listItemSelector} [data-test-service-health-check-critical]`
         ),
-        text: text(`${listItemSelector} [data-test-health-check-critical]`),
       },
       warning: {
         renders: isPresent(
-          `${listItemSelector} [data-test-health-check-warning]`
+          `${listItemSelector} [data-test-service-health-check-warning]`
+        ),
+        text: text(
+          `${listItemSelector} [data-test-service-health-check-warning]`
         ),
-        text: text(`${listItemSelector} [data-test-health-check-warning]`),
       },
     },
     kind: {

diff --git a/toolkit/package.json b/toolkit/package.json
@@ -122,6 +122,7 @@
       "./components/cut/metadata/external-source/index.js": "./dist/_app_/components/cut/metadata/external-source/index.js",
       "./components/cut/metadata/health-check-badge-set/index.js": "./dist/_app_/components/cut/metadata/health-check-badge-set/index.js",
       "./components/cut/metadata/in-service-mesh/index.js": "./dist/_app_/components/cut/metadata/in-service-mesh/index.js",
+      "./components/cut/metadata/service-health-badge/index.js": "./dist/_app_/components/cut/metadata/service-health-badge/index.js",
       "./components/cut/metadata/tags/index.js": "./dist/_app_/components/cut/metadata/tags/index.js",
       "./components/cut/metadata/types.js": "./dist/_app_/components/cut/metadata/types.js",
       "./components/cut/text-with-icon/index.js": "./dist/_app_/components/cut/text-with-icon/index.js",

diff --git a/toolkit/src/components/cut/list-item/service/index.hbs b/toolkit/src/components/cut/list-item/service/index.hbs
@@ -20,25 +20,11 @@
       <T.Section as |SC|>
         <SC.Title data-test-service-name>{{@service.name}}</SC.Title>
         <SC.Metadata>
-          {{#if this.isAllHealthy}}
-            <Hds::Badge
-              @color='success'
-              @icon='check'
-              @text='Healthy'
-              @size='small'
-              data-test-health-check-all-healthy
-            />
-          {{else}}
-            <!--Instance health check-->
-            {{#if @service.metadata.healthCheck.instance}}
-              <Cut::Metadata::HealthCheckBadgeSet
-                @successCount={{@service.metadata.healthCheck.instance.success}}
-                @warningCount={{@service.metadata.healthCheck.instance.warning}}
-                @criticalCount={{@service.metadata.healthCheck.instance.critical}}
-                @type='instance'
-              />
-            {{/if}}
-          {{/if}}
+          <Cut::Metadata::ServiceHealthBadge
+            @successCount={{@service.metadata.healthCheck.instance.success}}
+            @warningCount={{@service.metadata.healthCheck.instance.warning}}
+            @criticalCount={{@service.metadata.healthCheck.instance.critical}}
+          />
           {{#if @service.metadata.kind}}
             <Cut::TextWithIcon
               @icon='gateway'

diff --git a/toolkit/src/components/cut/list-item/service/index.ts b/toolkit/src/components/cut/list-item/service/index.ts
@@ -13,14 +13,6 @@ export default class ServiceListItemComponent extends Component<ServiceListItemS
   ServiceGatewayType = SERVICE_GATEWAY_TYPE;
   NormalizedGatewayLabels = NORMALIZED_GATEWAY_LABELS;
 
-  get isAllHealthy() {
-    const { healthCheck } = this.args.service.metadata;
-
-    return healthCheck.instance
-      ? !healthCheck.instance.critical && !healthCheck.instance.warning
-      : true;
-  }
-
   get isIngressGateway() {
     return (
       this.args.service.metadata.kind === this.ServiceGatewayType.IngressGateway

diff --git a/toolkit/src/components/cut/metadata/service-health-badge/index.hbs b/toolkit/src/components/cut/metadata/service-health-badge/index.hbs
@@ -0,0 +1,37 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+}}
+
+<Hds::TooltipButton 
+  @text={{if 
+    this.statusIsCritical '1 or more instances is critical'
+    (if this.statusIsWarning '1 or more instances has a warning'
+    'All instances are healthy')
+  }} 
+  @placement="bottom-start">
+  {{#if this.statusIsCritical}}
+    <Hds::Badge
+      @color='critical'
+      @icon='x'
+      @text="Critical"
+      @size="small"
+      data-test-service-health-check-critical
+    />
+  {{else if this.statusIsWarning}}
+    <Hds::Badge
+      @color='warning'
+      @icon='alert-triangle'
+      @text="Warning"
+      @size="small"
+      data-test-service-health-check-warning
+    />
+  {{else}}
+    <Hds::Badge
+      @color='success'
+      @icon='check'
+      @text="Healthy"
+      @size="small"
+      data-test-service-health-check-healthy
+    />
+  {{/if}}
+</Hds::TooltipButton>
diff --git a/toolkit/src/components/cut/metadata/service-health-badge/index.ts b/toolkit/src/components/cut/metadata/service-health-badge/index.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ */
+
+import Component from '@glimmer/component';
+import { MetadataServiceHealthBadgeSignature } from '../types';
+
+export default class MetadataServiceHealthBadgeComponent extends Component<MetadataServiceHealthBadgeSignature> {
+  get statusIsCritical() {
+    const { criticalCount } = this.args;
+    return criticalCount && criticalCount > 0;
+  }
+
+  get statusIsWarning() {
+    const { warningCount } = this.args;
+    return warningCount && warningCount > 0 && !this.statusIsCritical;
+  }
+}
diff --git a/toolkit/src/components/cut/metadata/types.ts b/toolkit/src/components/cut/metadata/types.ts
@@ -13,6 +13,14 @@ export interface MetadataHealthCheckBadgeSetSignature {
   };
 }
 
+export interface MetadataServiceHealthBadgeSignature {
+  Args: {
+    successCount?: number;
+    criticalCount?: number;
+    warningCount?: number;
+  };
+}
+
 export interface MetadataExternalSourceSignature {
   Args: {
     externalSource: ExternalSource;