ui: Show service and node checks as a merged list sorted by health (#8797)

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

@@ -1,22 +1,17 @@
-<div id="health-checks" class="tab-section">
+<div class="tab-section">
   <div role="tabpanel">
-    {{#if (gt item.ServiceChecks.length 0) }}
-      <section data-test-service-checks>
-        <HealthcheckList @items={{sort-by (comparator 'check' 'Status:asc') item.ServiceChecks}} @exposed={{proxy.ServiceProxy.Expose.Checks}} />
+    {{#if (gt item.Checks.length 0) }}
+      <section data-test-checks>
+        <HealthcheckList @items={{sort-by (comparator 'check' 'Status:asc') item.Checks}} @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>
-        <HealthcheckList @items={{sort-by (comparator 'check' 'Status:asc') item.NodeChecks}} />
-      </section>
-    {{else}}
-      <p>
-        This instance has no node health checks.
-      </p>
+      <EmptyState>
+        <BlockSlot @name="body">
+          <p>
+            This instance has no health checks.
+          </p>
+        </BlockSlot>
+      </EmptyState>
     {{/if}}
   </div>
 </div>

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

@@ -47,11 +47,11 @@ Feature: dc / services / instances / show: Show Service Instance
           Status: critical
     ---
   Scenario: A Service instance has no Proxy
-    Given 1 proxy model from yaml	
-    ---	
-    - ServiceProxy:	
-        DestinationServiceName: service-1	
-        DestinationServiceID: ~	
+    Given 1 proxy model from yaml
+    ---
+    - ServiceProxy:
+        DestinationServiceName: service-1
+        DestinationServiceID: ~
     ---
     When I visit the instance page for yaml
     ---
@@ -65,8 +65,7 @@ Feature: dc / services / instances / show: Show Service Instance
 
     And I don't see upstreams on the tabs
     And I see healthChecksIsSelected on the tabs
-    And I see 3 of the serviceChecks object
-    And I see 3 of the nodeChecks object
+    And I see 6 of the checks object
 
     When I click tags&Meta on the tabs
     And I see tags&MetaIsSelected on the tabs
@@ -78,10 +77,10 @@ Feature: dc / services / instances / show: Show Service Instance
 
   Scenario: A Service instance warns when deregistered whilst blocking
     Given 1 proxy model from yaml
-    ---	
-    - ServiceProxy:	
-        DestinationServiceName: service-1	
-        DestinationServiceID: ~	
+    ---
+    - ServiceProxy:
+        DestinationServiceName: service-1
+        DestinationServiceID: ~
     ---
     Given settings from yaml
     ---
@@ -102,10 +101,10 @@ Feature: dc / services / instances / show: Show Service Instance
     And pause until I see the text "deregistered" in "[data-notification]"
   Scenario: A Service instance without a Proxy does not display Proxy Info tab
     Given 1 proxy model from yaml
-    ---	
-    - ServiceProxy:	
-        DestinationServiceName: service-1	
-        DestinationServiceID: ~	
+    ---
+    - ServiceProxy:
+        DestinationServiceName: service-1
+        DestinationServiceID: ~
     ---
     When I visit the instance page for yaml
     ---
@@ -115,4 +114,4 @@ Feature: dc / services / instances / show: Show Service Instance
       id: service-0-with-id
     ---
     Then the url should be /dc1/services/service-0/instances/node-0/service-0-with-id/health-checks
-    And I don't see proxy on the tabs
+    And I don't see proxy on the tabs

ui-v2/tests/pages/dc/services/instance.js

@@ -5,8 +5,7 @@ export default function(visitable, attribute, collection, text, tabs) {
       scope: '.title',
     }),
     tabs: tabs('tab', ['health-checks', 'proxy-info', 'addresses', 'tags-&-meta']),
-    serviceChecks: collection('[data-test-service-checks] li'),
-    nodeChecks: collection('[data-test-node-checks] li'),
+    checks: collection('[data-test-checks] li'),
     upstreams: collection('[data-test-proxy-upstreams] > li', {
       name: text('[data-test-destination-name]'),
     }),