From 06046ae56f44ecd96ec6e3fb3aaf88d982104833 Mon Sep 17 00:00:00 2001 From: Andrew Stucki Date: Tue, 28 Feb 2023 21:48:41 -0500 Subject: [PATCH 1/6] Add some basic ui improvements for api-gateway services --- .../app/components/consul/kind/index.hbs | 182 +++++++++--------- .../app/components/consul/kind/index.js | 17 ++ .../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 | 8 +- .../dc/services/show/services.feature | 1 + .../consul-ui/translations/common/en-us.yaml | 1 + 10 files changed, 133 insertions(+), 93 deletions(-) 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 e5bfc6d4423c..cb8d7cfbf391 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/ingress-gateway') + (array 'terminating-gateway' '/connect/terminating-gateway') + (array 'api-gateway' '/connect/gateways/api-gateway') + (array 'mesh-gateway' '/connect/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 4798652642ba..2b69ae60d807 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,22 @@ 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]; + if (name !== '') { + return name; + } + return 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 5c76cf501ca2..bda5097c9c2b 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 14bae4384675..a5030e34ed25 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 1863dd6bbabc..51f98e25b53d 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 8bfe712541b4..f138a28d9f63 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 f44e59d179c5..e29f7feefb7c 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 ecfbc803230a..7efc61f13281 100644 --- a/ui/packages/consul-ui/tests/acceptance/dc/services/index.feature +++ b/ui/packages/consul-ui/tests/acceptance/dc/services/index.feature @@ -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 3b19a6995934..b6819558d845 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 5c584540eda6..18180f2073a1 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 From 884d72b392d113458931d9ea2f20c176daade176 Mon Sep 17 00:00:00 2001 From: Andrew Stucki Date: Tue, 28 Feb 2023 22:23:02 -0500 Subject: [PATCH 2/6] Add changelog entry --- .changelog/16476.txt | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .changelog/16476.txt diff --git a/.changelog/16476.txt b/.changelog/16476.txt new file mode 100644 index 000000000000..4732ed553c61 --- /dev/null +++ b/.changelog/16476.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: support filtering API gateways in the ui and displaying their documentation links +``` From 9ff6b8bb5c8faddff422b401f31db3eb4bf9ee3c Mon Sep 17 00:00:00 2001 From: Andrew Stucki Date: Wed, 1 Mar 2023 12:46:18 -0500 Subject: [PATCH 3/6] Use ternary for null check --- ui/packages/consul-ui/app/components/consul/kind/index.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) 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 2b69ae60d807..63117c19fe41 100644 --- a/ui/packages/consul-ui/app/components/consul/kind/index.js +++ b/ui/packages/consul-ui/app/components/consul/kind/index.js @@ -14,9 +14,6 @@ export default Component.extend({ tagName: '', Name: computed('item.Kind', function () { const name = normalizedGatewayLabels[this.item.Kind]; - if (name !== '') { - return name; - } - return titleize(humanize(this.item.Kind)); + return name ? name : titleize(humanize(this.item.Kind)); }), }); From 5a3e7ec13953d644086426c1869870edb0f40047 Mon Sep 17 00:00:00 2001 From: Andrew Stucki Date: Wed, 1 Mar 2023 12:51:31 -0500 Subject: [PATCH 4/6] Update gateway doc links --- ui/packages/consul-ui/app/components/consul/kind/index.hbs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 cb8d7cfbf391..58b981545612 100644 --- a/ui/packages/consul-ui/app/components/consul/kind/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/kind/index.hbs @@ -44,10 +44,10 @@ {{/let}} {{#let (from-entries (array - (array 'ingress-gateway' '/connect/ingress-gateway') - (array 'terminating-gateway' '/connect/terminating-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/mesh-gateway') + (array 'mesh-gateway' '/connect/gateways/mesh-gateway') ) ) as |link|}}
  • From 38fec2d0d8c3359f281ab61ab29a232df71abfb1 Mon Sep 17 00:00:00 2001 From: Andrew Stucki Date: Thu, 2 Mar 2023 12:52:00 -0500 Subject: [PATCH 5/6] rename changelog entry for new PR --- .changelog/{16476.txt => 16508.txt} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .changelog/{16476.txt => 16508.txt} (100%) diff --git a/.changelog/16476.txt b/.changelog/16508.txt similarity index 100% rename from .changelog/16476.txt rename to .changelog/16508.txt From 9844e073118bdbf4b905a67bfe384fc773e3c895 Mon Sep 17 00:00:00 2001 From: Andrew Stucki Date: Thu, 2 Mar 2023 13:29:49 -0500 Subject: [PATCH 6/6] Fix test --- .../consul-ui/tests/acceptance/dc/services/index.feature | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 7efc61f13281..df0ebc2dde39 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'