Add some basic UI improvements for api-gateway services

.changelog/16508.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: support filtering API gateways in the ui and displaying their documentation links
+```

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

@@ -1,89 +1,99 @@
 {{#if item.Kind}}
-  {{#let (titleize (humanize item.Kind)) as |Name|}}
-    {{#if withInfo}}
-        <dl class="tooltip-panel">
-          <dt>
-            <span data-test-kind={{item.Kind}} class="consul-kind">
-              {{Name}}
-            </span>
-          </dt>
-          <dd>
-            <MenuPanel @position="left">
-              <BlockSlot @name="header">
-                {{#if (eq item.Kind 'ingress-gateway')}}
-                  Ingress gateways enable ingress traffic from services outside the Consul service mesh to services inside the Consul service mesh.
-                {{else if (eq item.Kind 'terminating-gateway')}}
-                  Terminating gateways allow connect-enabled services in Consul service mesh to communicate with services outside the service mesh.
-                {{else}}
-                  Mesh gateways enable routing of Connect traffic between different Consul datacenters.
-                {{/if}}
-              </BlockSlot>
-              <BlockSlot @name="menu">
-                <li role="separator">
-                  {{#if (eq item.Kind 'ingress-gateway')}}
-                      About Ingress gateways
-                  {{else if (eq item.Kind 'terminating-gateway')}}
-                      About Terminating gateways
-                  {{else}}
-                      About Mesh gateways
-                  {{/if}}
-                </li>
-          {{#let (from-entries (array
-              (array 'ingress-gateway' '/consul/developer-mesh/ingress-gateways')
-              (array 'terminating-gateway' '/consul/developer-mesh/understand-terminating-gateways')
-              (array 'mesh-gateway' '/consul/developer-mesh/connect-gateways')
-            )
-          ) as |link|}}
-                <li role="none" class="learn-link">
-                  <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_LEARN_URL') (get link item.Kind)}} rel="noopener noreferrer" target="_blank">
-                    Learn guides
-                  </a>
-                </li>
-          {{/let}}
-          {{#let (from-entries (array
-              (array 'ingress-gateway' '/connect/ingress-gateway')
-              (array 'terminating-gateway' '/connect/terminating-gateway')
-              (array 'mesh-gateway' '/connect/mesh-gateway')
-            )
-          ) as |link|}}
-                <li role="none" class="docs-link">
-                  <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_URL') (get link item.Kind)}} rel="noopener noreferrer" target="_blank">
-                    Documentation
-                  </a>
-                </li>
-                <li role="separator">
-                  Other gateway types
-                </li>
-              {{#if (not-eq item.Kind 'mesh-gateway')}}
-                <li role="none" class="docs-link">
-                  <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_URL') (get link 'mesh-gateway')}} rel="noopener noreferrer" target="_blank">
-                    Mesh gateways
-                  </a>
-                </li>
+  {{#if withInfo}}
+    <dl class="tooltip-panel">
+      <dt>
+        <span data-test-kind={{item.Kind}} class="consul-kind">
+          {{Name}}
+        </span>
+      </dt>
+      <dd>
+        <MenuPanel @position="left">
+          <BlockSlot @name="header">
+            {{#if (eq item.Kind 'ingress-gateway')}}
+              Ingress gateways enable ingress traffic from services outside the Consul service mesh to services inside the Consul service mesh.
+            {{else if (eq item.Kind 'terminating-gateway')}}
+              Terminating gateways allow connect-enabled services in Consul service mesh to communicate with services outside the service mesh.
+            {{else if (eq item.Kind 'api-gateway')}}
+              API gateways enable ingress traffic from services outside the Consul service mesh to services inside the Consul service mesh.
+            {{else}}
+              Mesh gateways enable routing of Connect traffic between different Consul datacenters.
+            {{/if}}
+          </BlockSlot>
+          <BlockSlot @name="menu">
+            <li role="separator">
+              {{#if (eq item.Kind 'ingress-gateway')}}
+                  About Ingress gateways
+              {{else if (eq item.Kind 'terminating-gateway')}}
+                  About Terminating gateways
+              {{else if (eq item.Kind 'api-gateway')}}
+                  About API gateways
+              {{else}}
+                  About Mesh gateways
               {{/if}}
-              {{#if (not-eq item.Kind 'terminating-gateway')}}
-                <li role="none" class="docs-link">
-                  <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_URL') (get link 'terminating-gateway')}} rel="noopener noreferrer" target="_blank">
-                    Terminating gateways
-                  </a>
-                </li>
-              {{/if}}
-              {{#if (not-eq item.Kind 'ingress-gateway')}}
-                <li role="none" class="docs-link">
-                  <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_URL') (get link 'ingress-gateway')}} rel="noopener noreferrer" target="_blank">
-                    Ingress gateways
-                  </a>
-                </li>
-              {{/if}}
-          {{/let}}
-              </BlockSlot>
-            </MenuPanel>
-          </dd>
-        </dl>
-      {{else}}
-          <span data-test-kind={{item.Kind}} class="consul-kind">
-            {{Name}}
-          </span>
-      {{/if}}
-  {{/let}}
+            </li>
+      {{#let (from-entries (array
+          (array 'ingress-gateway' '/consul/developer-mesh/ingress-gateways')
+          (array 'terminating-gateway' '/consul/developer-mesh/understand-terminating-gateways')
+          (array 'mesh-gateway' '/consul/developer-mesh/connect-gateways')
+        )
+      ) as |link|}}
+            <li role="none" class="learn-link">
+              <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_LEARN_URL') (get link item.Kind)}} rel="noopener noreferrer" target="_blank">
+                Learn guides
+              </a>
+            </li>
+      {{/let}}
+      {{#let (from-entries (array
+          (array 'ingress-gateway' '/connect/gateways/ingress-gateway')
+          (array 'terminating-gateway' '/connect/gateways/terminating-gateway')
+          (array 'api-gateway' '/connect/gateways/api-gateway')
+          (array 'mesh-gateway' '/connect/gateways/mesh-gateway')
+        )
+      ) as |link|}}
+            <li role="none" class="docs-link">
+              <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_URL') (get link item.Kind)}} rel="noopener noreferrer" target="_blank">
+                Documentation
+              </a>
+            </li>
+            <li role="separator">
+              Other gateway types
+            </li>
+          {{#if (not-eq item.Kind 'mesh-gateway')}}
+            <li role="none" class="docs-link">
+              <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_URL') (get link 'mesh-gateway')}} rel="noopener noreferrer" target="_blank">
+                Mesh gateways
+              </a>
+            </li>
+          {{/if}}
+          {{#if (not-eq item.Kind 'terminating-gateway')}}
+            <li role="none" class="docs-link">
+              <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_URL') (get link 'terminating-gateway')}} rel="noopener noreferrer" target="_blank">
+                Terminating gateways
+              </a>
+            </li>
+          {{/if}}
+          {{#if (not-eq item.Kind 'ingress-gateway')}}
+            <li role="none" class="docs-link">
+              <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_URL') (get link 'ingress-gateway')}} rel="noopener noreferrer" target="_blank">
+                Ingress gateways
+              </a>
+            </li>
+          {{/if}}
+          {{#if (not-eq item.Kind 'api-gateway')}}
+            <li role="none" class="docs-link">
+              <a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_URL') (get link 'api-gateway')}} rel="noopener noreferrer" target="_blank">
+                API gateways
+              </a>
+            </li>
+          {{/if}}
+      {{/let}}
+          </BlockSlot>
+        </MenuPanel>
+      </dd>
+    </dl>
+  {{else}}
+    <span data-test-kind={{item.Kind}} class="consul-kind">
+      {{Name}}
+    </span>
+  {{/if}}
 {{/if}}

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

@@ -1,5 +1,19 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { titleize } from 'ember-cli-string-helpers/helpers/titleize';
+import { humanize } from 'ember-cli-string-helpers/helpers/humanize';
+
+const normalizedGatewayLabels = {
+  'api-gateway': 'API Gateway',
+  'mesh-gateway': 'Mesh Gateway',
+  'ingress-gateway': 'Ingress Gateway',
+  'terminating-gateway': 'Terminating Gateway',
+};
 
 export default Component.extend({
   tagName: '',
+  Name: computed('item.Kind', function () {
+    const name = normalizedGatewayLabels[this.item.Kind];
+    return name ? name : titleize(humanize(this.item.Kind));
+  }),
 });

ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs

@@ -102,7 +102,7 @@
             {{t 'common.consul.service'}}
           </Option>
           <Optgroup @label={{t 'common.consul.gateway'}}>
-            {{#each (array 'ingress-gateway' 'terminating-gateway' 'mesh-gateway') as |kind|}}
+            {{#each (array 'api-gateway' 'ingress-gateway' 'terminating-gateway' 'mesh-gateway') as |kind|}}
               <Option @value={{kind}} @selected={{includes kind @filter.kind.value}}>
                 {{t (concat 'common.consul.' kind)}}
               </Option>

ui/packages/consul-ui/app/filter/predicates/service.js

@@ -2,6 +2,7 @@ import setHelpers from 'mnemonist/set';
 
 export default {
   kind: {
+    'api-gateway': (item, value) => item.Kind === value,
     'ingress-gateway': (item, value) => item.Kind === value,
     'terminating-gateway': (item, value) => item.Kind === value,
     'mesh-gateway': (item, value) => item.Kind === value,

ui/packages/consul-ui/app/models/service-instance.js

@@ -64,9 +64,13 @@ export default class ServiceInstance extends Model {
 
   @computed('Service.Kind')
   get IsProxy() {
-    return ['connect-proxy', 'mesh-gateway', 'ingress-gateway', 'terminating-gateway'].includes(
-      this.Service.Kind
-    );
+    return [
+      'connect-proxy',
+      'mesh-gateway',
+      'ingress-gateway',
+      'terminating-gateway',
+      'api-gateway',
+    ].includes(this.Service.Kind);
   }
 
   // IsOrigin means that the service can have associated up or down streams,

ui/packages/consul-ui/mock-api/v1/internal/ui/exported-services

@@ -3,7 +3,7 @@ ${[0].map(
   () => {
     let prevKind;
     let name;
-    const gateways = ['mesh-gateway', 'ingress-gateway', 'terminating-gateway'];
+    const gateways = ['mesh-gateway', 'ingress-gateway', 'terminating-gateway', 'api-gateway'];
     return `
 [
   ${

ui/packages/consul-ui/mock-api/v1/internal/ui/services

@@ -2,7 +2,7 @@ ${[0].map(
   () => {
     let prevKind;
     let name;
-    const gateways = ['mesh-gateway', 'ingress-gateway', 'terminating-gateway'];
+    const gateways = ['mesh-gateway', 'ingress-gateway', 'terminating-gateway', 'api-gateway'];
     return `
 [
   ${

ui/packages/consul-ui/tests/acceptance/dc/services/index.feature

@@ -71,7 +71,7 @@ Feature: dc / services / index: List Services
     ---
   Scenario: Viewing the service list page with gateways
     Given 1 datacenter model with the value "dc-1"
-    And 3 service models from yaml
+    And 4 service models from yaml
     ---
       - Name: Service-0-proxy
         Kind: 'connect-proxy'
@@ -88,6 +88,11 @@ Feature: dc / services / index: List Services
         ChecksPassing: 0
         ChecksWarning: 0
         ChecksCritical: 1
+      - Name: Service-3-api-gateway
+        Kind: 'api-gateway'
+        ChecksPassing: 0
+        ChecksWarning: 0
+        ChecksCritical: 1
     ---
 
     When I visit the services page for yaml
@@ -96,11 +101,12 @@ Feature: dc / services / index: List Services
     ---
     Then the url should be /dc-1/services
     And the title should be "Services - Consul"
-    Then I see 2 service models
+    Then I see 3 service models
     And I see kind on the services like yaml
     ---
     - ingress-gateway
     - terminating-gateway
+    - api-gateway
     ---
   Scenario: View a Service in mesh
     Given 1 datacenter model with the value "dc-1"

ui/packages/consul-ui/tests/acceptance/dc/services/show/services.feature

@@ -50,6 +50,7 @@ Feature: dc / services / show / services
     | Name                | Kind                |
     | service             | ~                   |
     | ingress-gateway     | ingress-gateway     |
+    | api-gateway         | api-gateway         |
     | mesh-gateway        | mesh-gateway        |
     ---------------------------------------------
 

ui/packages/consul-ui/translations/common/en-us.yaml

@@ -32,6 +32,7 @@ consul:
   ingress-gateway: Ingress Gateway
   terminating-gateway: Terminating Gateway
   mesh-gateway: Mesh Gateway
+  api-gateway: API Gateway
   status: Health Status
   service.meta: Service Meta
   node.meta: Node Meta