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}}
{{#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}}

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

@ -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));
}),
});

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

@ -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>

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

@ -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,

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')
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,

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

@ -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 `
[
${

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

@ -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 `
[
${

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
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"

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 |
| service | ~ |
| ingress-gateway | ingress-gateway |
| api-gateway | api-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
terminating-gateway: Terminating Gateway
mesh-gateway: Mesh Gateway
api-gateway: API Gateway
status: Health Status
service.meta: Service Meta
node.meta: Node Meta