ui: Add Consul API Gateway as an external source (#11371)
This commit is contained in:
parent
317c875de9
commit
2bdc98552a
|
@ -0,0 +1,3 @@
|
|||
```release-note:feature
|
||||
ui: Adding support of Consul API Gateway as an external source.
|
||||
```
|
|
@ -1,21 +1,46 @@
|
|||
{{#if @item}}
|
||||
{{#let (service/external-source @item) as |externalSource|}}
|
||||
{{#if externalSource}}
|
||||
<span
|
||||
data-test-external-source={{externalSource}}
|
||||
class="consul-external-source {{externalSource}}"
|
||||
...attributes
|
||||
>
|
||||
{{#if @label}}
|
||||
{{@label}}
|
||||
{{else}}
|
||||
{{#if (eq externalSource 'aws')}}
|
||||
Registered via {{uppercase externalSource}}
|
||||
{{else}}
|
||||
Registered via {{capitalize externalSource}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{#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}}"
|
||||
...attributes
|
||||
>
|
||||
{{#if @label}}
|
||||
{{@label}}
|
||||
{{else}}
|
||||
Registered via {{t (concat "common.brand." externalSource)}}
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/let}}
|
||||
{{/if}}
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
display: block;
|
||||
}
|
||||
%popover-menu-panel {
|
||||
width: 192px;
|
||||
min-width: 192px;
|
||||
}
|
||||
%popover-menu-panel:not(.above) {
|
||||
top: 38px;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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,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;
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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":"",
|
||||
|
|
|
@ -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', ''])}"`;
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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,5 +1,6 @@
|
|||
brand:
|
||||
consul: Consul
|
||||
consul-api-gateway: Consul API Gateway
|
||||
terraform: Terraform
|
||||
nomad: Nomad
|
||||
vault: Vault
|
||||
|
|
Loading…
Reference in New Issue