luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

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
This commit is contained in:
Andrew Stucki 2023-03-03 16:59:04 -05:00 committed by GitHub
parent 71379b9621
commit 431b5b4859
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 134 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/16508.txt Normal file
View File

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

182
ui/packages/consul-ui/app/components/consul/kind/index.hbs
View File

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

14
ui/packages/consul-ui/app/components/consul/kind/index.js
View File

@ -1,5 +1,19 @@
import Component from '@ember/component'; 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({ export default Component.extend({
tagName: '', tagName: '',
Name: computed('item.Kind', function () {
const name = normalizedGatewayLabels[this.item.Kind];
return name ? name : titleize(humanize(this.item.Kind));
}),
}); });

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

@ -102,7 +102,7 @@
{{t 'common.consul.service'}} {{t 'common.consul.service'}}
</Option> </Option>
<Optgroup @label={{t 'common.consul.gateway'}}> <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}}> <Option @value={{kind}} @selected={{includes kind @filter.kind.value}}>
{{t (concat 'common.consul.' kind)}} {{t (concat 'common.consul.' kind)}}
</Option> </Option>

1
ui/packages/consul-ui/app/filter/predicates/service.js
View File

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

10
ui/packages/consul-ui/app/models/service-instance.js
View File

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

2
ui/packages/consul-ui/mock-api/v1/internal/ui/exported-services
View File

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

2
ui/packages/consul-ui/mock-api/v1/internal/ui/services
View File

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

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

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

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

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

1
ui/packages/consul-ui/translations/common/en-us.yaml
View File

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