Add some basic UI improvements for api-gateway services (#16508)

* Add some basic ui improvements for api-gateway services

* Add changelog entry

* Use ternary for null check

* Update gateway doc links

* rename changelog entry for new PR

* Fix test

.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,5 +1,4 @@
 {{#if item.Kind}}
-  {{#let (titleize (humanize item.Kind)) as |Name|}}
   {{#if withInfo}}
     <dl class="tooltip-panel">
       <dt>
@@ -14,6 +13,8 @@
               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}}
@@ -24,6 +25,8 @@
                   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}}
@@ -41,9 +44,10 @@
             </li>
       {{/let}}
       {{#let (from-entries (array
-              (array 'ingress-gateway' '/connect/ingress-gateway')
-              (array 'terminating-gateway' '/connect/terminating-gateway')
-              (array 'mesh-gateway' '/connect/mesh-gateway')
+          (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">
@@ -75,6 +79,13 @@
               </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>
@@ -85,5 +96,4 @@
       {{Name}}
     </span>
   {{/if}}
-  {{/let}}
 {{/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