ui: Instance detail redesign (#7683)

* Remove Proxy link and add ExternalSource to instance detail page header

* Create HealthChecks tab with route and styling

* Fix up tests to fit redesign of Service Instances Detail page

ui-v2/app/components/healthcheck-list/index.hbs

@@ -1,7 +1,7 @@
-<ul data-test-healthchecks>
+<ul>
 {{#each (sort-by (action 'sortChecksByImportance') items) as |item| }}
 {{! TODO: this component and its child should be moved to a single component }}
-  <HealthcheckOutput @data-test-node-healthcheck={{item.Name}} @class={{item.Status}} @tagName="li">
+  <HealthcheckOutput class={{item.Status}} @tagName="li">
       <BlockSlot @name="header">
         <h3>{{item.Name}}</h3>
       </BlockSlot>

ui-v2/app/router.js

@@ -28,11 +28,8 @@ export const routes = {
       },
       instance: {
         _options: { path: '/:name/instances/:node/:id' },
-        servicechecks: {
-          _options: { path: '/service-checks' },
-        },
-        nodechecks: {
-          _options: { path: '/node-checks' },
+        healthchecks: {
+          _options: { path: '/health-checks' },
         },
         upstreams: {
           _options: { path: '/upstreams' },

ui-v2/app/routes/dc/services/instance/index.js

@@ -2,5 +2,5 @@ import Route from '@ember/routing/route';
 import to from 'consul-ui/utils/routing/redirect-to';
 
 export default Route.extend({
-  redirect: to('servicechecks'),
+  redirect: to('healthchecks'),
 });

ui-v2/app/styles/app.scss

@@ -13,7 +13,6 @@
 @import 'core/layout';
 
 @import 'routes/dc/settings/index';
-@import 'routes/dc/service/index';
 @import 'routes/dc/nodes/index';
 @import 'routes/dc/intention/index';
 @import 'routes/dc/kv/index';

ui-v2/app/styles/base/components/tabs/layout.scss

@@ -16,3 +16,9 @@
   padding-top: 13px;
   padding-bottom: 13px;
 }
+%tab-section section h3 {
+  margin: 24px 0;
+}
+%tab-section section:not(:last-child) {
+  border-bottom: 1px solid $gray-200;
+}

ui-v2/app/styles/components/app-view/layout.scss

@@ -20,6 +20,9 @@
 %app-view-header dt {
   font-weight: bold;
 }
+%app-view-header dd > a {
+  color: $black;
+}
 %app-view-header .title-bar {
   display: flex;
   align-items: center;

ui-v2/app/templates/dc/services/instance.hbs

@@ -11,19 +11,12 @@
         </ol>
     </BlockSlot>
     <BlockSlot @name="header">
-      <h1>
-        {{ item.ID }}
-{{#let (service/external-source item) as |externalSource| }}
-    {{#if externalSource }}
-        <span data-test-external-source={{externalSource}} style={{concat 'background-image: var(--' externalSource '-icon)'}} data-tooltip="Registered via {{externalSource}}">Registered via {{externalSource}}</span>
-    {{/if}}
-{{/let}}
-{{#if (eq item.Kind 'connect-proxy')}}
-        <span class="kind-proxy">Proxy</span>
-{{else if (eq item.Kind 'mesh-gateway')}}
-        <span class="kind-proxy">Mesh Gateway</span>
-{{/if}}
-      </h1>
+      <div class="title-bar">
+        <h1>
+          {{ item.ID }}
+        </h1>
+        <ConsulExternalSource @item={{item}} />
+      </div>
       <dl>
         <dt>Service Name</dt>
         <dd><a href="{{href-to 'dc.services.show' item.Service}}">{{item.Service}}</a></dd>
@@ -34,13 +27,6 @@
       </dl>
 {{#if proxy.ServiceName}}
       <dl>
-{{#if proxy.ServiceProxy.DestinationServiceID}}
-        <dt data-test-proxy-type="sidecar-proxy">Sidecar Proxy</dt>
-        <dd><a href="{{href-to 'dc.services.instance' proxy.ServiceName proxy.Node proxy.ServiceID}}">{{proxy.ServiceID}}</a></dd>
-{{else}}
-        <dt data-test-proxy-type="proxy">Proxy</dt>
-        <dd><a href="{{href-to 'dc.services.show' proxy.ServiceName}}">{{proxy.ServiceName}}</a></dd>
-{{/if}}
       </dl>
 {{/if}}
 {{#if (eq item.Kind 'connect-proxy')}}
@@ -65,8 +51,7 @@
         <TabNav @items={{
           compact
               (array
-                      (hash label="Service Checks" href=(href-to "dc.services.instance.servicechecks") selected=(is-href "dc.services.instance.servicechecks"))
-                      (hash label="Node Checks" href=(href-to "dc.services.instance.nodechecks") selected=(is-href "dc.services.instance.nodechecks"))
+                      (hash label="Health Checks" href=(href-to "dc.services.instance.healthchecks") selected=(is-href "dc.services.instance.healthchecks"))
 (if
   (eq item.Kind 'connect-proxy')
                       (hash label="Upstreams" href=(href-to "dc.services.instance.upstreams") selected=(is-href "dc.services.instance.upstreams")) ""

ui-v2/app/templates/dc/services/instance/healthchecks.hbs

@@ -0,0 +1,24 @@
+<div id="health-checks" class="tab-section">
+  <div role="tabpanel">
+    {{#if (gt item.ServiceChecks.length 0) }}
+      <section data-test-service-checks>
+        <h3>Service Checks</h3>
+        <HealthcheckList @items={{item.ServiceChecks}} @exposed={{proxy.ServiceProxy.Expose.Checks}} />
+      </section>
+    {{else}}
+      <p>
+        This instance has no service health checks.
+      </p>
+    {{/if}}
+    {{#if (gt item.NodeChecks.length 0) }}
+      <section data-test-node-checks>
+        <h3>Node Checks</h3>
+        <HealthcheckList @items={{item.NodeChecks}} />
+      </section>
+    {{else}}
+      <p>
+        This instance has no node health checks.
+      </p>
+    {{/if}}
+  </div>
+</div>

ui-v2/tests/acceptance/dc/services/instances/gateway.feature

@@ -23,9 +23,9 @@ Feature: dc / services / instances / gateway: Show Gateway Service Instance
       node: node-0
       id: gateway-with-id
     ---
-    Then the url should be /dc1/services/gateway/instances/node-0/gateway-with-id/service-checks
+    Then the url should be /dc1/services/gateway/instances/node-0/gateway-with-id/health-checks
 
-    And I see serviceChecksIsSelected on the tabs
+    And I see healthChecksIsSelected on the tabs
 
     When I click addresses on the tabs
     And I see addressesIsSelected on the tabs