Backport of Add some basic UI improvements for api-gateway services i…

…nto release/1.15.x (#16533) * backport of commit 06046ae * backport of commit 884d72b * backport of commit 9ff6b8b * backport of commit 5a3e7ec * backport of commit 38fec2d * backport of commit 9844e07 --------- Co-authored-by: Andrew Stucki <[email protected]>
hashicorp · Mar 3, 2023 · e69ed7a · e69ed7a
1 parent 2f8de3c
commit e69ed7a
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 94 deletions.
diff --git a/.changelog/16508.txt b/.changelog/16508.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: support filtering API gateways in the ui and displaying their documentation links
+```
diff --git a/ui/packages/consul-ui/app/components/consul/kind/index.hbs b/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}}
diff --git a/ui/packages/consul-ui/app/components/consul/kind/index.js b/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));
+ }),
 });
diff --git a/ui/packages/consul-ui/app/components/consul/service/search-bar/index.hbs b/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>

diff --git a/ui/packages/consul-ui/app/filter/predicates/service.js b/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,

diff --git a/ui/packages/consul-ui/app/models/service-instance.js b/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,

diff --git a/ui/packages/consul-ui/mock-api/v1/internal/ui/exported-services b/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 `
 [
  ${

diff --git a/ui/packages/consul-ui/mock-api/v1/internal/ui/services b/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 `
 [
  ${

diff --git a/ui/packages/consul-ui/tests/acceptance/dc/services/index.feature b/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"

diff --git a/ui/packages/consul-ui/tests/acceptance/dc/services/show/services.feature b/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 |
  ---------------------------------------------
 

diff --git a/ui/packages/consul-ui/translations/common/en-us.yaml b/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