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

ui: Add Consul API Gateway as an external source (#11371)

This commit is contained in:
Kenia 2021-11-10 16:54:12 -05:00 committed by GitHub
parent 317c875de9
commit 2bdc98552a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 93 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.changelog/11371.txt Normal file
View File

@ -0,0 +1,3 @@
```release-note:feature
ui: Adding support of Consul API Gateway as an external source.
```

37
ui/packages/consul-ui/app/components/consul/external-source/index.hbs
View File

@ -1,6 +1,35 @@
{{#if @item}}
{{#let (service/external-source @item) as |externalSource|}}
{{#if externalSource}}
{{#if (and @withInfo (eq externalSource 'consul-api-gateway'))}}
<dl class="tooltip-panel">
<dt>
<span
data-test-external-source={{externalSource}}
class="consul-external-source {{externalSource}}"
...attributes
>
Registered via {{t (concat "common.brand." externalSource)}}
</span>
</dt>
<dd>
<MenuPanel @position="left" @menu={{false}}>
<BlockSlot @name="header">
API Gateways manage north-south traffic from external services to services in the Datacenter. For more information, read our documentation.
</BlockSlot>
<BlockSlot @name="menu">
<li role="separator">
About {{t (concat "common.brand." externalSource)}}
</li>
<li role="none" class="learn-link">
<a tabindex="-1" role="menuitem" href={{concat (env 'CONSUL_DOCS_LEARN_URL')}} rel="noopener noreferrer" target="_blank">
Learn guides
</a>
</li>
</BlockSlot>
</MenuPanel>
</dd>
</dl>
{{else if externalSource}}
<span
data-test-external-source={{externalSource}}
class="consul-external-source {{externalSource}}"
@ -9,11 +38,7 @@
{{#if @label}}
{{@label}}
{{else}}
{{#if (eq externalSource 'aws')}}
Registered via {{uppercase externalSource}}
{{else}}
Registered via {{capitalize externalSource}}
{{/if}}
Registered via {{t (concat "common.brand." externalSource)}}
{{/if}}
</span>
{{/if}}

2
ui/packages/consul-ui/app/components/consul/intention/list/table/index.hbs
View File

@ -65,7 +65,7 @@ as |item index|>
{{/if}}
</td>
</BlockSlot>
{{#if (or (can "write intention" item=item) (can "view CRD intention" item=item))}}
{{#if (and (or (can "write intention" item=item) (can "view CRD intention" item=item)) (not-eq item.Meta.external-source 'consul-api-gateway'))}}
<BlockSlot @name="actions" as |index change checked|>
<PopoverMenu
@expanded={{if (eq checked index) true false}}

3
ui/packages/consul-ui/app/components/pill/index.scss
View File

@ -29,7 +29,8 @@ span.policy-service-identity::before {
%pill.nomad::before {
@extend %with-logo-nomad-color-icon, %as-pseudo;
}
%pill.consul::before {
%pill.consul::before,
%pill.consul-api-gateway::before {
@extend %with-logo-consul-color-icon, %as-pseudo;
}
%pill.vault::before {

2
ui/packages/consul-ui/app/components/popover-menu/layout.scss
View File

@ -5,7 +5,7 @@
display: block;
}
%popover-menu-panel {
width: 192px;
min-width: 192px;
}
%popover-menu-panel:not(.above) {
top: 38px;

6
ui/packages/consul-ui/app/components/popover-select/index.scss
View File

@ -55,12 +55,16 @@
%popover-select .oidc button::before {
@extend %with-logo-oidc-color-icon, %as-pseudo;
}
%popover-select .consul button::before {
%popover-select .consul button::before,
%popover-select .consul-api-gateway button::before {
@extend %with-logo-consul-color-icon, %as-pseudo;
}
%popover-select .nomad button::before {
@extend %with-logo-nomad-color-icon, %as-pseudo;
}
%popover-select .vault button::before {
@extend %with-logo-vault-color-icon, %as-pseudo;
}
%popover-select .terraform button::before {
@extend %with-logo-terraform-color-icon, %as-pseudo;
}

2
ui/packages/consul-ui/app/components/topology-metrics/index.hbs
View File

@ -48,6 +48,7 @@
<div class="metrics-header">
{{@service.Service.Service}}
</div>
{{#if (not-eq @service.Service.Meta.external-source 'consul-api-gateway')}}
{{#if @hasMetricsProvider}}
<TopologyMetrics::Series
@nspace={{or @service.Service.Namespace 'default'}}
@ -76,6 +77,7 @@
<a class="config-link" href="{{env 'CONSUL_DOCS_URL'}}/connect/observability/ui-visualization" target="_blank" rel="noopener noreferrer">Configure dashboard</a>
{{/if}}
</div>
{{/if}}
</div>
<div id="downstream-lines">
<TopologyMetrics::DownLines

7
ui/packages/consul-ui/app/helpers/service/external-source.js
View File

@ -7,7 +7,12 @@ export function serviceExternalSource(params, hash) {
source = get(params[0], 'Meta.external-source');
}
const prefix = typeof hash.prefix === 'undefined' ? '' : hash.prefix;
if (source && ['vault', 'kubernetes', 'terraform', 'nomad', 'consul', 'aws'].includes(source)) {
if (
source &&
['consul-api-gateway', 'vault', 'kubernetes', 'terraform', 'nomad', 'consul', 'aws'].includes(
source
)
) {
return `${prefix}${source}`;
}
return;

2
ui/packages/consul-ui/app/templates/dc/services/instance.hbs
View File

@ -97,7 +97,7 @@ as |item|}}
<h1>
<route.Title @title={{item.Service.ID}} />
</h1>
<Consul::ExternalSource @item={{item}} />
<Consul::ExternalSource @item={{item}} @withInfo={{true}} />
<Consul::Kind @item={{item}} @withInfo={{true}} />
{{#if (eq proxy.ServiceProxy.Mode 'transparent')}}
<Consul::TransparentProxy />

2
ui/packages/consul-ui/app/templates/dc/services/show.hbs
View File

@ -112,7 +112,7 @@ as |items item dc|}}
<h1>
<route.Title @title={{item.Service.Service}} />
</h1>
<Consul::ExternalSource @item={{item.Service}} />
<Consul::ExternalSource @item={{item.Service}} @withInfo={{true}} />
<Consul::Kind @item={{item.Service}} @withInfo={{true}} />
</BlockSlot>
<BlockSlot @name="nav">

2
ui/packages/consul-ui/mock-api/v1/connect/_
View File

@ -96,7 +96,7 @@ ${fake.helpers.randomize([
"Precedence": ${i + 1},
${ fake.random.number({min: 1, max: 10}) > 2 ? `
"Meta": {
"external-source": "${fake.helpers.randomize(['kubernetes'])}"
"external-source": "${fake.helpers.randomize(['kubernetes', 'consul-api-gateway'])}"
},
` : `` }
"CreatedAt": "2018-05-21T16:41:27.977155457Z",

2
ui/packages/consul-ui/mock-api/v1/connect/intentions/_
View File

@ -81,7 +81,7 @@ ${fake.helpers.randomize([
"Precedence": ${fake.random.number({min: 1, max: 100})},
${ !legacy && fake.random.number({min: 1, max: 10}) > 2 ? `
"Meta": {
"external-source": "${fake.helpers.randomize(['kubernetes'])}"
"external-source": "${fake.helpers.randomize(['kubernetes', 'consul-api-gateway'])}"
},
` : `` }
"CreatedAt": "2018-05-21T16:41:27.977155457Z",

2
ui/packages/consul-ui/mock-api/v1/connect/intentions/exact
View File

@ -83,7 +83,7 @@ ${fake.helpers.randomize([
"Precedence": ${fake.random.number({min: 1, max: 100})},
${ !legacy && fake.random.number({min: 1, max: 10}) > 2 ? `
"Meta": {
"external-source": "${fake.helpers.randomize(['kubernetes'])}"
"external-source": "${fake.helpers.randomize(['kubernetes', 'consul-api-gateway'])}"
},
` : `` }
"CreatedAt": "2018-05-21T16:41:27.977155457Z",

2
ui/packages/consul-ui/mock-api/v1/health/service/_
View File

@ -81,7 +81,7 @@ ${typeof location.search.partition !== 'undefined' ? `
${ fake.random.number({min: 1, max: 10}) > 2 ? `
"Meta": {
"consul-dashboard-url": "${fake.internet.protocol()}://${fake.internet.domainName()}/?id={{Service}}",
"external-source": "${fake.helpers.randomize(['vault', 'consul', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"
"external-source": "${fake.helpers.randomize(['consul-api-gateway', 'vault', 'consul', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"
},
` : `
"Meta": null,

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

@ -60,7 +60,7 @@ return `
],
${ fake.random.number({min: 1, max: 10}) > 2 ? `
"Meta": {
"external-source": "${fake.helpers.randomize(['consul', 'nomad', 'terraform', 'kubernetes', ''])}"
"external-source": "${fake.helpers.randomize(['consul-api-gateway', 'consul', 'nomad', 'terraform', 'kubernetes', ''])}"
},
` : `` }
"Address":"",

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

@ -82,7 +82,7 @@ ${ fake.random.number({min: 1, max: 10}) > 2 ? `
range(fake.random.number({min: 1, max: 1})).map(
function(item, i)
{
return `"${fake.helpers.randomize(['vault', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"`;
return `"${fake.helpers.randomize(['consul-api-gateway', 'vault', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"`;
}
)
}

22
ui/packages/consul-ui/tests/acceptance/dc/services/show/topology/metrics.feature
View File

@ -48,3 +48,25 @@ Feature: dc / services / show / topology / metrics
service: web
---
And I see the "[data-test-sparkline]" element
Scenario: Metrics enabled but serivce source is Consul API Gateway
Given 1 datacenter model with the value "datacenter"
And the local datacenter is "datacenter"
And 1 service model from yaml
---
- Service:
Name: web
Kind: ~
Meta:
external-source: consul-api-gateway
---
And ui_config from yaml
---
metrics_proxy_enabled: true
metrics_provider: 'prometheus'
---
When I visit the service page for yaml
---
dc: datacenter
service: web
---
And I don't see the "[data-test-sparkline]" element

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

@ -1,5 +1,6 @@
brand:
consul: Consul
consul-api-gateway: Consul API Gateway
terraform: Terraform
nomad: Nomad
vault: Vault