From 431b5b4859633862b4bb042f43cea42ffe2596d8 Mon Sep 17 00:00:00 2001 From: Andrew Stucki Date: Fri, 3 Mar 2023 16:59:04 -0500 Subject: [PATCH] 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 | 3 + .../app/components/consul/kind/index.hbs | 182 +++++++++--------- .../app/components/consul/kind/index.js | 14 ++ .../consul/service/search-bar/index.hbs | 2 +- .../app/filter/predicates/service.js | 1 + .../consul-ui/app/models/service-instance.js | 10 +- .../mock-api/v1/internal/ui/exported-services | 2 +- .../mock-api/v1/internal/ui/services | 2 +- .../acceptance/dc/services/index.feature | 10 +- .../dc/services/show/services.feature | 1 + .../consul-ui/translations/common/en-us.yaml | 1 + 11 files changed, 134 insertions(+), 94 deletions(-) create mode 100644 .changelog/16508.txt diff --git a/.changelog/16508.txt b/.changelog/16508.txt new file mode 100644 index 000000000..4732ed553 --- /dev/null +++ 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 index e5bfc6d44..58b981545 100644 --- 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}} -
-
- - {{Name}} - -
-
- - - {{#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}} - - -
  • - {{#if (eq item.Kind 'ingress-gateway')}} - About Ingress gateways - {{else if (eq item.Kind 'terminating-gateway')}} - About Terminating gateways - {{else}} - About Mesh gateways - {{/if}} -
    • - {{#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|}} -
  • - - Learn guides - -
    • - {{/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|}} -
  • - - Documentation - -
    • -
  • - Other gateway types -
    • - {{#if (not-eq item.Kind 'mesh-gateway')}} -
  • - - Mesh gateways - -
    • + {{#if withInfo}} +
    +
    + + {{Name}} + +
    +
    + + + {{#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}} + + +
  • + {{#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')}} -
  • - - Terminating gateways - -
    • - {{/if}} - {{#if (not-eq item.Kind 'ingress-gateway')}} -
  • - - Ingress gateways - -
    • - {{/if}} - {{/let}} -     -     -
    -
    - {{else}} - - {{Name}} - - {{/if}} - {{/let}} + + {{#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|}} +
  • + + Learn guides + +
    • + {{/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|}} +
  • + + Documentation + +
    • +
  • + Other gateway types +
    • + {{#if (not-eq item.Kind 'mesh-gateway')}} +
  • + + Mesh gateways + +
    • + {{/if}} + {{#if (not-eq item.Kind 'terminating-gateway')}} +
  • + + Terminating gateways + +
    • + {{/if}} + {{#if (not-eq item.Kind 'ingress-gateway')}} +
  • + + Ingress gateways + +
    • + {{/if}} + {{#if (not-eq item.Kind 'api-gateway')}} +
  • + + API gateways + +
    • + {{/if}} + {{/let}} +     +     +
    +
    + {{else}} + + {{Name}} + + {{/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 index 479865264..63117c19f 100644 --- 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 index 5c76cf501..bda5097c9 100644 --- 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'}} - {{#each (array 'ingress-gateway' 'terminating-gateway' 'mesh-gateway') as |kind|}} + {{#each (array 'api-gateway' 'ingress-gateway' 'terminating-gateway' 'mesh-gateway') as |kind|}} diff --git a/ui/packages/consul-ui/app/filter/predicates/service.js b/ui/packages/consul-ui/app/filter/predicates/service.js index 14bae4384..a5030e34e 100644 --- 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 index 1863dd6bb..51f98e25b 100644 --- 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 index 8bfe71254..f138a28d9 100644 --- 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 index f44e59d17..e29f7feef 100644 --- 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 index ecfbc8032..df0ebc2dd 100644 --- 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 index 3b19a6995..b6819558d 100644 --- 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 index 5c584540e..18180f207 100644 --- 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