ui: Move to a nested folder structure for Consul prefixed components (#8937)

* ui: Move all consul-* components to nested consul/* components

* Move tomography-graph

* Remove old basic rendering tests

ui-v2/app/components/consul-exposed-path-list/index.hbs

@@ -1,69 +0,0 @@
-<ul data-test-proxy-exposed-paths>
-{{#each items as |path|}}
-  <li>
-    <div class="header">
-    {{#let (concat address ':' path.Path) as |combinedAddress|}}
-      <p class="combined-address">
-        <span>
-          {{combinedAddress}}
-        </span>
-        <CopyButton
-          @value={{combinedAddress}}
-          @name="Address"
-        />
-      </p>
-    {{/let}}
-    </div>
-    <div class="detail">
-    {{#if path.Protocol}}
-      <dl class="protocol">
-        <dt>
-          <Tooltip>
-              Protocol
-          </Tooltip>
-        </dt>
-        <dd>
-          {{path.Protocol}}
-        </dd>
-      </dl>
-    {{/if}}
-    {{#if path.ListenerPort}}
-      <dl class="port">
-        <dt>
-          <Tooltip>
-              Port
-          </Tooltip>
-        </dt>
-        <dd>
-          listening on :{{path.ListenerPort}}
-        </dd>
-      </dl>
-    {{/if}}
-    {{#if path.LocalPathPort}}
-      <dl class="port">
-        <dt>
-          <Tooltip>
-              Port
-          </Tooltip>
-        </dt>
-        <dd>
-          local port :{{path.LocalPathPort}}
-        </dd>
-      </dl>
-    {{/if}}
-    {{#if path.Path}}
-      <dl class="path">
-        <dt>
-          <Tooltip>
-              Path
-          </Tooltip>
-        </dt>
-        <dd>
-          {{path.Path}}
-        </dd>
-      </dl>
-    {{/if}}
-    </div>
-  </li>
-{{/each}}
-</ul>

ui-v2/app/components/consul-instance-checks/index.hbs

@@ -1,32 +0,0 @@
-{{#if (gt items.length 0)}}
-  {{#if (eq healthCheck.check 'empty') }}
-    <dl class={{healthCheck.check}}>
-      <dt>
-        <Tooltip>
-          {{capitalize type}} Checks
-        </Tooltip>
-      </dt>
-      <dd>No {{type}} checks</dd>
-    </dl>
-  {{else}}
-    {{#if (eq healthCheck.count items.length)}}
-    <dl class={{healthCheck.check}}>
-      <dt>
-        <Tooltip>
-          {{capitalize type}} Checks
-        </Tooltip>
-      </dt>
-      <dd>All {{type}} checks {{healthCheck.status}}</dd>
-    </dl>
-    {{else}}
-    <dl class={{healthCheck.check}}>
-      <dt>
-        <Tooltip>
-          {{capitalize type}} Checks
-        </Tooltip>
-      </dt>
-      <dd>{{healthCheck.count}}/{{items.length}} {{type}} checks {{healthCheck.status}}</dd>
-    </dl>
-    {{/if}}
-  {{/if}}
-{{/if}}

ui-v2/app/components/consul-upstream-instance-list/index.js

@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: '',
-});

ui-v2/app/components/consul-upstream-search-bar/index.js

@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: '',
-});

ui-v2/app/components/consul/exposed-path/list/index.hbs

@@ -0,0 +1,76 @@
+<div
+  class="consul-exposed-path-list"
+  ...attributes
+>
+  <ul
+    data-test-proxy-exposed-paths
+  >
+  {{#each @items as |path|}}
+    <li>
+      <div class="header">
+      {{#let (concat address ':' path.Path) as |combinedAddress|}}
+        <p class="combined-address">
+          <span>
+            {{combinedAddress}}
+          </span>
+          <CopyButton
+            @value={{combinedAddress}}
+            @name="Address"
+          />
+        </p>
+      {{/let}}
+      </div>
+      <div class="detail">
+      {{#if path.Protocol}}
+        <dl class="protocol">
+          <dt>
+            <Tooltip>
+                Protocol
+            </Tooltip>
+          </dt>
+          <dd>
+            {{path.Protocol}}
+          </dd>
+        </dl>
+      {{/if}}
+      {{#if path.ListenerPort}}
+        <dl class="port">
+          <dt>
+            <Tooltip>
+                Port
+            </Tooltip>
+          </dt>
+          <dd>
+            listening on :{{path.ListenerPort}}
+          </dd>
+        </dl>
+      {{/if}}
+      {{#if path.LocalPathPort}}
+        <dl class="port">
+          <dt>
+            <Tooltip>
+                Port
+            </Tooltip>
+          </dt>
+          <dd>
+            local port :{{path.LocalPathPort}}
+          </dd>
+        </dl>
+      {{/if}}
+      {{#if path.Path}}
+        <dl class="path">
+          <dt>
+            <Tooltip>
+                Path
+            </Tooltip>
+          </dt>
+          <dd>
+            {{path.Path}}
+          </dd>
+        </dl>
+      {{/if}}
+      </div>
+    </li>
+  {{/each}}
+  </ul>
+</div>

ui-v2/app/components/consul/exposed-path/list/index.scss

@@ -0,0 +1,8 @@
+.consul-exposed-path-list {
+  > ul {
+    border-top: 1px solid $gray-200;
+  }
+  > ul > li {
+    @extend %composite-row;
+  }
+}

ui-v2/app/components/consul/external-source/index.hbs

@@ -1,9 +1,13 @@
-{{#if item}}
+{{#if @item}}
-  {{#let (service/external-source item) as |externalSource|}}
+  {{#let (service/external-source @item) as |externalSource|}}
     {{#if externalSource}}
-      <span data-test-external-source={{externalSource}} class="consul-external-source {{externalSource}}">
+      <span
-        {{#if label}}
+        data-test-external-source={{externalSource}}
-          {{label}}
+        class="consul-external-source {{externalSource}}"
+        ...attributes
+      >
+        {{#if @label}}
+          {{@label}}
         {{else}}
           {{#if (eq externalSource 'aws')}}
             Registered via {{uppercase externalSource}}

ui-v2/app/components/consul/external-source/index.scss

@@ -0,0 +1,3 @@
+.consul-external-source {
+  @extend %pill-200, %frame-gray-600;
+}

ui-v2/app/components/consul/instance-checks/index.hbs

@@ -0,0 +1,32 @@
+{{#if (gt @items.length 0)}}
+  {{#if (eq this.healthCheck.check 'empty') }}
+    <dl class={{this.healthCheck.check}}>
+      <dt>
+        <Tooltip>
+          {{capitalize @type}} Checks
+        </Tooltip>
+      </dt>
+      <dd>No {{@type}} checks</dd>
+    </dl>
+  {{else}}
+    {{#if (eq this.healthCheck.count @items.length)}}
+    <dl class={{this.healthCheck.check}}>
+      <dt>
+        <Tooltip>
+          {{capitalize @type}} Checks
+        </Tooltip>
+      </dt>
+      <dd>All {{@type}} checks {{this.healthCheck.status}}</dd>
+    </dl>
+    {{else}}
+    <dl class={{this.healthCheck.check}}>
+      <dt>
+        <Tooltip>
+          {{capitalize @type}} Checks
+        </Tooltip>
+      </dt>
+      <dd>{{this.healthCheck.count}}/{{@items.length}} {{@type}} checks {{this.healthCheck.status}}</dd>
+    </dl>
+    {{/if}}
+  {{/if}}
+{{/if}}

ui-v2/app/components/consul/instance-checks/index.js

@@ -1,14 +1,12 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
-import { computed } from '@ember/object';
 
-export default Component.extend({
+export default class ConsulInstanceChecks extends Component {
-  tagName: '',
+  get healthCheck() {
-  healthCheck: computed('items.[]', function() {
     let ChecksCritical = 0;
     let ChecksWarning = 0;
     let ChecksPassing = 0;
 
-    this.items.forEach(item => {
+    this.args.items.forEach(item => {
       switch (item.Status) {
         case 'critical':
           ChecksCritical += 1;
@@ -48,5 +46,5 @@ export default Component.extend({
           check: 'empty',
         };
     }
-  }),
+  }
-});
+}

ui-v2/app/components/consul/intention/form/fieldsets/index.hbs

@@ -155,7 +155,7 @@
         <a href="{{env 'CONSUL_DOCS_URL'}}/guides/acl-migrate-tokens.html" target="_blank" rel="noopener noreferrer">documentation</a>
       </p>
     </div>
-    <ConsulIntentionPermissionList
+    <Consul::Intention::Permission::List
       @items={{item.Permissions}}
       @onclick={{queue (action (mut permission)) (action (mut shouldShowPermissionForm) true)}}
       @ondelete={{action 'delete' 'Permissions' item}}
@@ -200,12 +200,12 @@
       <h3>Edit Permission</h3>
     </BlockSlot>
     <BlockSlot @name="body">
-      <ConsulIntentionPermissionForm
+      <Consul::Intention::Permission::Form
         @item={{permission}}
         @onsubmit={{action 'add' 'Permissions' item}}
       as |permissionForm|>
         <Ref @target={{this}} @name="permissionForm" @value={{permissionForm}} />
-      </ConsulIntentionPermissionForm>
+      </Consul::Intention::Permission::Form>
     </BlockSlot>
     <BlockSlot @name="actions">
       <button

ui-v2/app/components/consul/intention/form/index.hbs

@@ -41,7 +41,7 @@
         />
       {{/if}}
       <form onsubmit={{action api.submit}}>
-        <ConsulIntentionForm::Fieldsets
+        <Consul::Intention::Form::Fieldsets
           @nspaces={{nspaces}}
           @services={{services}}
           @SourceName={{SourceName}}
@@ -71,7 +71,7 @@
         </div>
       </form>
   {{else}}
-      <ConsulIntentionView
+      <Consul::Intention::View
         @item={{item}}
       />
   {{/if}}

ui-v2/app/components/consul/intention/list/table/index.hbs

@@ -51,7 +51,7 @@ as |item index|>
         </td>
         <td class="meta">
         {{#if item.IsManagedByCRD}}
-          <ConsulExternalSource @item={{item}} @label="Managed by CRD" />
+          <Consul::ExternalSource @item={{item}} @label="Managed by CRD" />
         {{/if}}
         </td>
     </BlockSlot>

ui-v2/app/components/consul/intention/permission/form/index.hbs

@@ -119,18 +119,18 @@ as |group|>
   <fieldset>
     <h2>Headers</h2>
 
-    <ConsulIntentionPermissionHeaderList
+    <Consul::Intention::Permission::Header::List
       @items={{changeset-get changeset 'HTTP.Header'}}
       @ondelete={{action 'delete' 'HTTP.Header' changeset}}
     as |headerList|>
 
-    </ConsulIntentionPermissionHeaderList>
+    </Consul::Intention::Permission::Header::List>
 
-    <ConsulIntentionPermissionHeaderForm
+    <Consul::Intention::Permission::Header::Form
       @onsubmit={{action 'add' 'HTTP.Header' changeset}}
     as |headerForm|>
       <Ref @target={{this}} @name="headerForm" @value={{headerForm}} />
-    </ConsulIntentionPermissionHeaderForm>
+    </Consul::Intention::Permission::Header::Form>
 
     <button
       type="button"

ui-v2/app/components/consul/intention/view/index.hbs

@@ -34,7 +34,7 @@
     </p>
   </div>
 
-  <ConsulIntentionPermissionList
+  <Consul::Intention::Permission::List
     @items={{item.Permissions}}
   />
 {{/if}}

ui-v2/app/components/consul/kind/index.scss

@@ -0,0 +1,6 @@
+.consul-kind {
+  @extend %pill-200, %frame-gray-600;
+}
+.consul-kind::before {
+  @extend %with-gateway-mask, %as-pseudo;
+}

ui-v2/app/components/consul/loader/README.mdx

@@ -1,8 +1,8 @@
-## ConsulLoader
+## Consul::Loader
 
-`<ConsulLoader />`
+`<Consul::Loader />`
 
-Simple template-only component to show the circulr animated Consul loader animation.
+Simple template-only component to show the circular animated Consul loader animation.
 
 | Argument | Type | Default | Description |
 | --- | --- | --- | --- |

ui-v2/app/components/consul/loader/index.hbs

@@ -1,4 +1,7 @@
-<div class="consul-loader" ...attributes>
+<div
+  class="consul-loader"
+  ...attributes
+>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="44px" height="44px" viewBox="0 0 44 44" version="1.1">
       <g>
           <circle r="1" cx="27" cy="2" style="transform-origin: 27px 2px" />

ui-v2/app/components/consul/nspace/list/index.hbs

@@ -17,7 +17,7 @@
         </dd>
       </dl>
   {{#if (env 'CONSUL_ACLS_ENABLED')}}
-      <ConsulTokenRulesetList @item={{item}} />
+      <Consul::Token::Ruleset::List @item={{item}} />
   {{/if}}
     </BlockSlot>
     <BlockSlot @name="actions" as |Actions|>

ui-v2/app/components/consul/role/list/index.hbs

@@ -4,7 +4,7 @@
       <a data-test-role={{item.Name}} href={{href-to 'dc.acls.roles.edit' item.ID}}>{{item.Name}}</a>
     </BlockSlot>
     <BlockSlot @name="details">
-      <ConsulTokenRulesetList @item={{item}} />
+      <Consul::Token::Ruleset::List @item={{item}} />
       <dl>
         <dt>Description</dt>
         <dd data-test-description>

ui-v2/app/components/consul/service-instance/list/index.hbs

@@ -13,12 +13,12 @@
     </BlockSlot>
     <BlockSlot @name="details">
     {{#if checks}}
-      <ConsulExternalSource @item={{item}} />
+      <Consul::ExternalSource @item={{item}} />
-      <ConsulInstanceChecks @type="service" @items={{get checks item.Service}} />
+      <Consul::InstanceChecks @type="service" @items={{get checks item.Service}} />
     {{else}}
-      <ConsulExternalSource @item={{item.Service}} />
+      <Consul::ExternalSource @item={{item.Service}} />
-      <ConsulInstanceChecks @type="service" @items={{filter-by 'ServiceID' '' item.Checks}} />
+      <Consul::InstanceChecks @type="service" @items={{filter-by 'ServiceID' '' item.Checks}} />
-      <ConsulInstanceChecks @type="node" @items={{reject-by 'ServiceID' '' item.Checks}} />
+      <Consul::InstanceChecks @type="node" @items={{reject-by 'ServiceID' '' item.Checks}} />
     {{/if}}
 {{#if item.ProxyInstance}}
       <dl class="mesh">

ui-v2/app/components/consul/service/list/index.hbs

@@ -44,8 +44,8 @@
     </dl>
   {{/if}}
 {{/if}}
-    <ConsulKind @item={{item}} />
+    <Consul::Kind @item={{item}} />
-    <ConsulExternalSource @item={{item}} />
+    <Consul::ExternalSource @item={{item}} />
   {{#if (and (not-eq item.InstanceCount 0) (and (not-eq item.Kind 'terminating-gateway') (not-eq item.Kind 'ingress-gateway'))) }}
     <span>
       {{format-number item.InstanceCount}} {{pluralize item.InstanceCount 'Instance' without-count=true}}

ui-v2/app/components/consul/token/list/index.hbs

@@ -19,7 +19,7 @@
               {{if item.Local 'local' 'global' }}
           </dd>
         </dl>
-        <ConsulTokenRulesetList @item={{item}} />
+        <Consul::Token::Ruleset::List @item={{item}} />
         <dl>
           <dt>Description</dt>
           <dd data-test-description>