ui: Redesign - Service List page with Gateways (#7781)

* Return all services except Proxies

* Add Gateway icon to the codebase

* Create and implement ConsulExternalSource component

* Fix tests to work with new mock data and add a Gateway test

* Update consul-api-double to 2.14.3

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

@@ -6,7 +6,7 @@
           (component 'consul-external-source' item=item _externalSource=externalSource)
         }}
       {{else}}
-        <span data-test-external-source={{externalSource}} class="consul-external-source source-{{externalSource}}">
+        <span data-test-external-source={{externalSource}} class="consul-external-source {{externalSource}}">
           {{#if (eq externalSource 'aws')}}
             <span>Registered via {{uppercase externalSource}}</span>
           {{else}}

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

@@ -0,0 +1,11 @@
+{{#if item.Kind}}
+  {{#if (has-block)}}
+    {{yield
+      (component 'consul-kind' item=item)
+    }}
+  {{else}}
+    <span data-test-kind={{item.Kind}} class="consul-kind gateway">
+        <span>{{titleize (humanize item.Kind)}}</span>
+    </span>
+  {{/if}}
+{{/if}}

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

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

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

@@ -5,6 +5,11 @@
     {{item.Name}}
   </a>
   <ul>
+    <ConsulKind @item={{item}} as |Kind|>
+      <li>
+        <Kind />
+      </li>
+    </ConsulKind>
     <ConsulExternalSource @item={{item}} as |ExternalSource|>
       <li>
         <ExternalSource />

ui-v2/app/controllers/dc/services/index.js

@@ -21,7 +21,7 @@ export default Controller.extend(WithEventSource, WithSearching, {
   }),
   services: computed('items.[]', function() {
     return this.items.filter(function(item) {
-      return typeof item.Kind === 'undefined';
+      return item.Kind !== 'connect-proxy';
     });
   }),
   proxies: computed('items.[]', function() {

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

@@ -11,3 +11,23 @@
   margin-right: 4px;
   font-size: 0;
 }
+%reduced-pill {
+  background-color: $gray-100;
+  padding: 0 8px;
+  border-radius: $decor-radius-100;
+  height: 18px;
+  line-height: 0.7rem;
+}
+%reduced-pill > span {
+  font-size: 14px;
+  font-weight: normal;
+  position: relative;
+  color: $gray-500;
+}
+%reduced-pill::before {
+  width: 14px;
+  height: 14px;
+  margin-right: 2px;
+  position: relative;
+  top: 2px;
+}

ui-v2/app/styles/base/components/pill/skin.scss

@@ -12,3 +12,25 @@
   width: 10px;
   height: 10px;
 }
+%reduced-pill::before {
+  @extend %as-pseudo;
+}
+%reduced-pill.kubernetes::before {
+  @extend %with-kubernetes-logo-color-icon;
+}
+%reduced-pill.terraform::before {
+  @extend %with-terraform-logo-color-icon;
+}
+%reduced-pill.nomad::before {
+  @extend %with-nomad-logo-color-icon;
+}
+%reduced-pill.consul::before {
+  @extend %with-consul-logo-color-icon;
+}
+%reduced-pill.aws::before {
+  @extend %with-logo-aws-color-icon;
+}
+%reduced-pill.gateway::before {
+  @extend %with-gateway-mask;
+  background-color: $gray-500;
+}

ui-v2/app/styles/base/icons/base-variables.scss

@@ -61,6 +61,7 @@ $flag-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="
 $folder-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" fill="%23000"/></svg>');
 $folder-outline-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%231563ff"/></svg>');
 $folder-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" fill="%23000"/></svg>');
+$gateway-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.009 19.08C20.7 14.366 19.214 3 12.045 3c-4.068 0-6.306 3.658-7.538 7.684h2.111c.477-1.412 1.073-2.675 1.806-3.652.997-1.33 2.149-2.022 3.62-2.022 1.472 0 2.624.692 3.621 2.022 1.04 1.387 1.807 3.352 2.344 5.5.53 2.12.8 4.265.936 5.898.03.35-.25.65-.602.65H5.746a.602.602 0 01-.602-.65c.097-1.164.262-2.588.541-4.077H3.642a44.169 44.169 0 00-.561 4.726c-.073 1.109.82 2.01 1.93 2.01h14.066c1.111 0 2.004-.901 1.932-2.01zm-8.152-5.695H3V11.71h9.857L9.859 8.703l1.18-1.18 5.025 5.024-5.024 5.025-1.181-1.181 2.998-3.006z" fill="%231F2124"/></svg>');
 $gift-fill-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.856 6.447c.29.58.643 1.1 1.062 1.553H4a2 2 0 0 0-2 2v2h9V9h2v3h9v-2a2 2 0 0 0-2-2h-2.918c.419-.453.773-.973 1.062-1.553C18.79 5.158 19 3.891 19 3V2h-1c-2.89 0-4.87 1.239-6 3.278C10.87 3.238 8.89 2 6 2H5v1c0 .891.211 2.158.856 3.447zM11 14H3v6c0 1.473.895 2 2 2h6v-8zm2 8v-8h8v6c0 1.473-.895 2-2 2h-6zm3.356-16.447c.23-.463.396-.96.504-1.464-1.567.263-2.584 1.094-3.216 2.358-.185.37-.327.763-.432 1.163l-.072.3c1.567-.262 2.584-1.093 3.216-2.357zM7.14 4.089c.108.504.273 1.001.504 1.464.632 1.264 1.648 2.095 3.216 2.358l-.072-.301a6.008 6.008 0 0 0-.432-1.163C9.724 5.183 8.708 4.352 7.14 4.09z" fill="%23000"/></svg>');
 $gift-outline-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.856 6.447c.29.58.643 1.1 1.062 1.553H4a2 2 0 0 0-2 2v4h1v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6h1v-4a2 2 0 0 0-2-2h-2.918c.419-.453.773-.973 1.062-1.553C18.79 5.158 19 3.891 19 3V2h-1c-2.89 0-4.87 1.239-6 3.278C10.87 3.238 8.89 2 6 2H5v1c0 .891.211 2.158.856 3.447zM13 20h6v-6h-6v6zm0-8h7v-2h-7v2zm-2-2H4v2h7v-2zm0 4v6H5v-6h6zm5.356-8.447c.23-.463.396-.96.504-1.464-1.567.263-2.584 1.094-3.216 2.358-.185.37-.327.763-.432 1.163l-.072.3c1.567-.262 2.584-1.093 3.216-2.357zM7.14 4.089c.108.504.273 1.001.504 1.464.632 1.264 1.648 2.095 3.216 2.358l-.072-.301a6.008 6.008 0 0 0-.432-1.163C9.724 5.183 8.708 4.352 7.14 4.09z" fill="%23000"/></svg>');
 $git-branch-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.286 9.699a1.556 1.556 0 0 1-1.543-1.543c0-.836.707-1.543 1.543-1.543.835 0 1.543.707 1.543 1.543 0 .835-.708 1.543-1.543 1.543zM8.57 19.984a1.556 1.556 0 0 1-1.542-1.543c0-.835.707-1.542 1.542-1.542.836 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543zm0-15.955c.849 0 1.543.707 1.543 1.542 0 .836-.707 1.543-1.543 1.543A1.564 1.564 0 0 1 7.03 5.571c0-.835.707-1.542 1.542-1.542zm10.286 4.114a2.562 2.562 0 0 0-2.571-2.572A2.562 2.562 0 0 0 15 10.354v.386c-.026.669-.296 1.26-.81 1.774-.514.515-1.106.785-1.774.81-1.067.026-1.903.206-2.572.58V7.783A2.563 2.563 0 0 0 8.56 3 2.552 2.552 0 0 0 6 5.571a2.571 2.571 0 0 0 1.286 2.212v8.434C6.527 16.667 6 17.49 6 18.43A2.563 2.563 0 0 0 8.571 21a2.563 2.563 0 0 0 2.572-2.571c0-.682-.257-1.286-.682-1.749.116-.077.618-.526.759-.604.321-.142.72-.219 1.209-.219 1.35-.064 2.507-.578 3.535-1.607 1.029-1.029 1.543-2.546 1.607-3.883h-.025c.784-.463 1.311-1.286 1.311-2.224z" fill="%23000"/></svg>');

ui-v2/app/styles/base/icons/icon-placeholders.scss

@@ -618,6 +618,16 @@
   mask-image: $folder-outline-svg;
 }
 
+%with-gateway-icon {
+  @extend %with-icon;
+  background-image: $gateway-svg;
+}
+%with-gateway-mask {
+  @extend %with-mask;
+  -webkit-mask-image: $gateway-svg;
+  mask-image: $gateway-svg;
+}
+
 %with-gift-fill-icon {
   @extend %with-icon;
   background-image: $gift-fill-svg;

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

@@ -1,35 +0,0 @@
-.consul-external-source {
-  background-color: $gray-100;
-  padding: 0 8px;
-  border-radius: $decor-radius-100;
-  height: 18px;
-  line-height: 0.7rem;
-}
-.consul-external-source > span {
-  font-size: 14px;
-  font-weight: normal;
-  position: relative;
-  color: $gray-500;
-}
-.consul-external-source::before {
-  width: 14px;
-  height: 14px;
-  margin-right: 2px;
-  position: relative;
-  top: 2px;
-}
-.source-kubernetes::before {
-  @extend %with-kubernetes-logo-color-icon, %as-pseudo;
-}
-.source-terraform::before {
-  @extend %with-terraform-logo-color-icon, %as-pseudo;
-}
-.source-nomad::before {
-  @extend %with-nomad-logo-color-icon, %as-pseudo;
-}
-.source-consul::before {
-  @extend %with-consul-logo-color-icon, %as-pseudo;
-}
-.source-aws::before {
-  @extend %with-logo-aws-color-icon, %as-pseudo;
-}

ui-v2/app/styles/components/index.scss

@@ -28,7 +28,6 @@
 @import './discovery-chain';
 @import './consul-intention-list';
 @import './empty-state';
-@import './consul-external-source';
 @import './tabular-details';
 @import './tabular-collection';
 @import './list-collection';

ui-v2/app/styles/components/pill.scss

@@ -42,3 +42,8 @@ td.policy-management a::after {
   @extend %with-star-icon, %as-pseudo;
   margin-left: 3px;
 }
+
+.consul-external-source,
+.consul-kind {
+  @extend %reduced-pill;
+}

ui-v2/ember-cli-build.js

@@ -17,7 +17,14 @@ module.exports = function(defaults) {
         includePolyfill: true,
       },
       'ember-cli-string-helpers': {
-        only: ['capitalize', 'lowercase', 'truncate', 'uppercase'],
+        only: [
+          'capitalize', 
+          'lowercase', 
+          'truncate', 
+          'uppercase', 
+          'humanize', 
+          'titleize'
+        ],
       },
       'ember-cli-math-helpers': {
         only: ['div'],

ui-v2/tests/acceptance/components/catalog-filter.feature

@@ -127,29 +127,27 @@ Feature: components / catalog-filter
     -------------------------------------------------
   Scenario: Freetext filtering the service listing
     Given 1 datacenter model with the value "dc-1"
-    And 6 service models from yaml
+    And 3 service models from yaml
     ---
       - Name: Service-0
         Tags: ['one', 'two', 'three']
         ChecksPassing: 0
         ChecksWarning: 0
         ChecksCritical: 1
-      - Name: Service-0-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-1
         Tags: ['two', 'three']
         ChecksPassing: 0
         ChecksWarning: 1
         ChecksCritical: 0
-      - Name: Service-1-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-2
         Tags: ['three']
         ChecksPassing: 1
         ChecksWarning: 0
         ChecksCritical: 0
-      - Name: Service-2-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
+
 
     ---
     When I visit the services page for yaml

ui-v2/tests/acceptance/dc/error.feature

@@ -6,17 +6,14 @@ Feature: dc / error: Recovering from a dc 500 error
     - dc-1
     - dc-500
     ---
-    And 6 service models from yaml
+    And 3 service models from yaml
     ---
       - Name: Service-0
-      - Name: Service-0-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-1
-      - Name: Service-1-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-2
-      - Name: Service-2-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
     ---
     And the url "/v1/internal/ui/services" responds with a 500 status
     When I visit the services page for yaml

ui-v2/tests/acceptance/dc/nspaces/manage.feature

@@ -13,26 +13,20 @@ Feature: dc / nspaces / manage : Managing Namespaces
     ---
       - dc-1
     ---
-    And 12 service models from yaml
+    And 6 service models from yaml
     ---
       - Name: Service-0
-      - Name: Service-0-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-1
-      - Name: Service-1-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-2
-      - Name: Service-2-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-3
-      - Name: Service-3-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-4
-      - Name: Service-4-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-5
-      - Name: Service-5-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
     ---
 
     When I visit the services page for yaml

ui-v2/tests/acceptance/dc/services/dc-switch.feature

@@ -6,26 +6,20 @@ Feature: dc / services / dc-switch : Switching Datacenters
       - dc-1
       - dc-2
     ---
-    And 12 service models from yaml
+    And 6 service models from yaml
     ---
       - Name: Service-0
-      - Name: Service-0-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-1
-      - Name: Service-1-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-2
-      - Name: Service-2-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-3
-      - Name: Service-3-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-4
-      - Name: Service-4-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-5
-      - Name: Service-5-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
     ---
 
     When I visit the services page for yaml

ui-v2/tests/acceptance/dc/services/index.feature

@@ -1,32 +1,37 @@
 @setupApplicationTest
 Feature: dc / services / index: List Services
-  Scenario:
+  Scenario: Viewing the service list page with services
     Given 1 datacenter model with the value "dc-1"
     And 10 service models from yaml
     ---
       - Name: Service-0
         ExternalSources:
           - consul
+        Kind: ~
       - Name: Service-0-proxy
         Kind: 'connect-proxy'
       - Name: Service-1
         ExternalSources:
           - nomad
+        Kind: ~
       - Name: Service-1-proxy
         Kind: 'connect-proxy'
       - Name: Service-2
         ExternalSources:
           - terraform
+        Kind: ~
       - Name: Service-2-proxy
         Kind: 'connect-proxy'
       - Name: Service-3
         ExternalSources:
           - kubernetes
+        Kind: ~
       - Name: Service-3-proxy
         Kind: 'connect-proxy'
       - Name: Service-4
         ExternalSources:
           - aws
+        Kind: ~
       - Name: Service-4-proxy
         Kind: 'connect-proxy'
     ---
@@ -46,4 +51,30 @@ Feature: dc / services / index: List Services
     - kubernetes
     - aws
     ---
+  Scenario: Viewing the service list page with gateways
+    Given 1 datacenter model with the value "dc-1"
+    And 3 service models from yaml
+    ---
+      - Name: Service-0-proxy
+        Kind: 'connect-proxy'
+      - Name: Service-1-ingress-gateway
+        Kind: 'ingress-gateway'
+      - Name: Service-2-terminating-gateway
+        Kind: 'terminating-gateway'
+    ---
+
+    When I visit the services page for yaml
+    ---
+      dc: dc-1
+    ---
+    Then the url should be /dc-1/services
+    And the title should be "Services - Consul"
+    Then I see 2 service models
+    And I see kind on the services like yaml
+    ---
+    - ingress-gateway
+    - terminating-gateway
+    ---
+
+
 

ui-v2/tests/acceptance/dc/services/list.feature

@@ -2,17 +2,14 @@
 Feature: dc / services / list
   Scenario: Listing service
     Given 1 datacenter model with the value "dc-1"
-    And 6 service models from yaml
+    And 3 service models from yaml
     ---
       - Name: Service-0
-      - Name: Service-0-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-1
-      - Name: Service-1-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
       - Name: Service-2
-      - Name: Service-2-proxy
+        Kind: ~
-        Kind: 'connect-proxy'
     ---
     When I visit the services page for yaml
     ---

ui-v2/tests/acceptance/page-navigation.feature

@@ -42,7 +42,7 @@ Feature: page-navigation
   Where:
     -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
     | Item      | Model      | URL                                                      | Endpoint                                                                    | Back                |
-    | service   | services   | /dc-1/services/service-0/instances                       | /v1/discovery-chain/service-0?dc=dc-1&ns=@namespace                         | /dc-1/services      |
+    | service   | services   | /dc-1/services/service-0-terminating-gateway/instances                       | /v1/discovery-chain/service-0-terminating-gateway?dc=dc-1&ns=@namespace                         | /dc-1/services      |
     | node      | nodes      | /dc-1/nodes/node-0/health-checks                         | /v1/session/node/node-0?dc=dc-1&ns=@namespace                               | /dc-1/nodes         |
     | kv        | kvs        | /dc-1/kv/0-key-value/edit                                | /v1/session/info/ee52203d-989f-4f7a-ab5a-2bef004164ca?dc=dc-1&ns=@namespace | /dc-1/kv            |
     # | acl       | acls       | /dc-1/acls/anonymous                                     | /v1/acl/info/anonymous?dc=dc-1                                             | /dc-1/acls         |

ui-v2/tests/integration/components/consul-kind.js

@@ -0,0 +1,26 @@
+import { module, skip } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | consul-kind', function(hooks) {
+  setupRenderingTest(hooks);
+
+  skip('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<ConsulKind />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <ConsulKind>
+        template block text
+      </ConsulKind>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

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

@@ -3,6 +3,7 @@ export default function(visitable, clickable, text, attribute, collection, page,
     name: text('a span:nth-child(2)'),
     service: clickable('a'),
     externalSource: attribute('data-test-external-source', '[data-test-external-source]'),
+    kind: attribute('data-test-kind', '[data-test-kind]'),
   };
   return {
     visit: visitable('/:dc/services'),

ui-v2/yarn.lock

@@ -1211,9 +1211,9 @@
     js-yaml "^3.13.1"
 
 "@hashicorp/consul-api-double@^2.6.2":
-  version "2.14.1"
+  version "2.14.3"
-  resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.14.1.tgz#c4beefa853368319324a6092fc4eb4371f9f8ffc"
+  resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-2.14.3.tgz#57974cd877cd457d660f1168abdfd0b3fc79ea1b"
-  integrity sha512-ZJtjkAuFHqcLTRjVaqx4NYnkZ17v5/DjaDhjH/kRVBx0gXcyKUEeMe34g69PfqgRo6ZYMVYMbSDq0JHTGcIShQ==
+  integrity sha512-3E7aBFbeWWdCk3f07x5z3puGfV3DEyxrpElWD/J4NWxZIgJ92iYV2LKkLZ5u19UGAI5lVdhT3wYaBOqmC725pA==
 
 "@hashicorp/ember-cli-api-double@^3.0.2":
   version "3.0.2"