From 7e9b7f4143d2b3a11598a326b85ca073da481442 Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Mon, 30 Nov 2020 17:22:43 +0000
Subject: [PATCH] ui: Moves healthcheck list to Glimmer template-only consul
 component (#9293)

---
 .../health-check/list}/index.hbs              | 11 +++++---
 .../consul/health-check/list/index.scss       |  5 ++++
 .../consul/health-check/list}/layout.scss     |  0
 .../consul/health-check/list}/skin.scss       |  0
 .../app/components/healthcheck-list/index.js  |  5 ----
 .../consul-ui/app/styles/components.scss      |  2 +-
 .../styles/components/healthcheck-output.scss |  4 ---
 .../components/healthcheck-output/index.scss  |  2 --
 .../templates/dc/nodes/show/healthchecks.hbs  |  2 +-
 .../dc/services/instance/healthchecks.hbs     |  2 +-
 .../components/healthcheck-list-test.js       | 25 -------------------
 11 files changed, 15 insertions(+), 43 deletions(-)
 rename ui/packages/consul-ui/app/components/{healthcheck-list => consul/health-check/list}/index.hbs (83%)
 create mode 100644 ui/packages/consul-ui/app/components/consul/health-check/list/index.scss
 rename ui/packages/consul-ui/app/{styles/components/healthcheck-output => components/consul/health-check/list}/layout.scss (100%)
 rename ui/packages/consul-ui/app/{styles/components/healthcheck-output => components/consul/health-check/list}/skin.scss (100%)
 delete mode 100644 ui/packages/consul-ui/app/components/healthcheck-list/index.js
 delete mode 100644 ui/packages/consul-ui/app/styles/components/healthcheck-output.scss
 delete mode 100644 ui/packages/consul-ui/app/styles/components/healthcheck-output/index.scss
 delete mode 100644 ui/packages/consul-ui/tests/integration/components/healthcheck-list-test.js

diff --git a/ui/packages/consul-ui/app/components/healthcheck-list/index.hbs b/ui/packages/consul-ui/app/components/consul/health-check/list/index.hbs
similarity index 83%
rename from ui/packages/consul-ui/app/components/healthcheck-list/index.hbs
rename to ui/packages/consul-ui/app/components/consul/health-check/list/index.hbs
index 502e51bc8..0c5fd6309 100644
--- a/ui/packages/consul-ui/app/components/healthcheck-list/index.hbs
+++ b/ui/packages/consul-ui/app/components/consul/health-check/list/index.hbs
@@ -1,7 +1,10 @@
-<div ...attributes>
+<div
+  class="consul-health-check-list"
+  ...attributes
+>
   <ul>
-{{#each items as |item| }}
-    <li class={{concat 'healthcheck-output ' item.Status}}>
+{{#each @items as |item|}}
+    <li class={{concat 'health-check-output ' item.Status}}>
       <div>
         <header>
           <h3>{{item.Name}}</h3>
@@ -23,7 +26,7 @@
           <dt>Type</dt>
           <dd>
             {{item.Type}}
-  {{#if (and exposed (contains item.Type (array 'http' 'grpc')))}}
+  {{#if (and @exposed (contains item.Type (array 'http' 'grpc')))}}
             <em
               data-test-exposed="true"
               {{tooltip "Expose.checks is set to true, so all registered HTTP and gRPC check paths are exposed through Envoy for the Consul agent."}}
diff --git a/ui/packages/consul-ui/app/components/consul/health-check/list/index.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/index.scss
new file mode 100644
index 000000000..9f67dd146
--- /dev/null
+++ b/ui/packages/consul-ui/app/components/consul/health-check/list/index.scss
@@ -0,0 +1,5 @@
+@import './skin';
+@import './layout';
+.consul-health-check-list .health-check-output {
+  @extend %healthcheck-output;
+}
diff --git a/ui/packages/consul-ui/app/styles/components/healthcheck-output/layout.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/layout.scss
similarity index 100%
rename from ui/packages/consul-ui/app/styles/components/healthcheck-output/layout.scss
rename to ui/packages/consul-ui/app/components/consul/health-check/list/layout.scss
diff --git a/ui/packages/consul-ui/app/styles/components/healthcheck-output/skin.scss b/ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
similarity index 100%
rename from ui/packages/consul-ui/app/styles/components/healthcheck-output/skin.scss
rename to ui/packages/consul-ui/app/components/consul/health-check/list/skin.scss
diff --git a/ui/packages/consul-ui/app/components/healthcheck-list/index.js b/ui/packages/consul-ui/app/components/healthcheck-list/index.js
deleted file mode 100644
index 479865264..000000000
--- a/ui/packages/consul-ui/app/components/healthcheck-list/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: '',
-});
diff --git a/ui/packages/consul-ui/app/styles/components.scss b/ui/packages/consul-ui/app/styles/components.scss
index 360d7c3df..6af271573 100644
--- a/ui/packages/consul-ui/app/styles/components.scss
+++ b/ui/packages/consul-ui/app/styles/components.scss
@@ -18,7 +18,6 @@
 @import './components/pill';
 @import './components/table';
 @import './components/tag-list';
-@import './components/healthcheck-output';
 @import './components/freetext-filter';
 @import './components/filter-bar';
 @import './components/flash-message';
@@ -57,6 +56,7 @@
 @import 'consul-ui/components/consul/tomography/graph';
 @import 'consul-ui/components/consul/discovery-chain';
 @import 'consul-ui/components/consul/upstream-instance/list';
+@import 'consul-ui/components/consul/health-check/list';
 @import 'consul-ui/components/consul/exposed-path/list';
 @import 'consul-ui/components/consul/external-source';
 @import 'consul-ui/components/consul/kind';
diff --git a/ui/packages/consul-ui/app/styles/components/healthcheck-output.scss b/ui/packages/consul-ui/app/styles/components/healthcheck-output.scss
deleted file mode 100644
index 6c3ccb5ed..000000000
--- a/ui/packages/consul-ui/app/styles/components/healthcheck-output.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@import './healthcheck-output/index';
-.healthcheck-output {
-  @extend %healthcheck-output;
-}
diff --git a/ui/packages/consul-ui/app/styles/components/healthcheck-output/index.scss b/ui/packages/consul-ui/app/styles/components/healthcheck-output/index.scss
deleted file mode 100644
index bc1825219..000000000
--- a/ui/packages/consul-ui/app/styles/components/healthcheck-output/index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import './skin';
-@import './layout';
diff --git a/ui/packages/consul-ui/app/templates/dc/nodes/show/healthchecks.hbs b/ui/packages/consul-ui/app/templates/dc/nodes/show/healthchecks.hbs
index 2bbf0747b..21495928f 100644
--- a/ui/packages/consul-ui/app/templates/dc/nodes/show/healthchecks.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/nodes/show/healthchecks.hbs
@@ -1,7 +1,7 @@
 <div id="health-checks" class="tab-section">
   <div role="tabpanel">
     {{#if (gt item.Checks.length 0) }}
-      <HealthcheckList @items={{sort-by (comparator 'check' 'Status:asc') item.Checks}} />
+      <Consul::HealthCheck::List @items={{sort-by (comparator 'check' 'Status:asc') item.Checks}} />
     {{else}}
       <EmptyState>
         <BlockSlot @name="body">
diff --git a/ui/packages/consul-ui/app/templates/dc/services/instance/healthchecks.hbs b/ui/packages/consul-ui/app/templates/dc/services/instance/healthchecks.hbs
index edf2ac0c3..00ec73080 100644
--- a/ui/packages/consul-ui/app/templates/dc/services/instance/healthchecks.hbs
+++ b/ui/packages/consul-ui/app/templates/dc/services/instance/healthchecks.hbs
@@ -3,7 +3,7 @@
   {{#let (append item.Checks (or proxy.Checks (array))) as |checks|}}
     {{#if (gt checks.length 0) }}
       <section data-test-checks>
-        <HealthcheckList
+        <Consul::HealthCheck::List
           @items={{sort-by (comparator 'check' 'Status:asc') checks}}
           @exposed={{proxyMeta.ServiceProxy.Expose.Checks}}
         />
diff --git a/ui/packages/consul-ui/tests/integration/components/healthcheck-list-test.js b/ui/packages/consul-ui/tests/integration/components/healthcheck-list-test.js
deleted file mode 100644
index d5c4715bd..000000000
--- a/ui/packages/consul-ui/tests/integration/components/healthcheck-list-test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
-
-module('Integration | Component | healthcheck list', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
-    // Handle any actions with this.on('myAction', function(val) { ... });
-
-    await render(hbs`{{healthcheck-list}}`);
-
-    assert.dom('ul').exists({ count: 1 });
-
-    // Template block usage:
-    await render(hbs`
-      {{#healthcheck-list}}
-      {{/healthcheck-list}}
-    `);
-
-    assert.dom('ul').exists({ count: 1 });
-  });
-});