From bcd53e73a2b2248caa4ecc68ebaa383fa47714a7 Mon Sep 17 00:00:00 2001 From: Kenia <19161242+kaxcode@users.noreply.github.com> Date: Wed, 4 Aug 2021 18:22:43 -0400 Subject: [PATCH] ui: Add Vault as a Service External Source (#10769) --- .changelog/10769.txt | 3 +++ .../consul/external-source/README.mdx | 21 +++++++++++++++++++ .../consul-ui/app/components/pill/index.scss | 3 +++ .../app/helpers/service/external-source.js | 2 +- .../app/styles/base/icons/base-variables.scss | 4 ++++ .../styles/base/icons/icon-placeholders.scss | 10 +++++++++ .../consul-ui/mock-api/v1/health/service/_ | 2 +- .../v1/internal/ui/gateway-services-nodes/_ | 2 +- .../v1/internal/ui/service-topology/_ | 2 +- .../mock-api/v1/internal/ui/services | 2 +- 10 files changed, 46 insertions(+), 5 deletions(-) create mode 100644 .changelog/10769.txt create mode 100644 ui/packages/consul-ui/app/components/consul/external-source/README.mdx diff --git a/.changelog/10769.txt b/.changelog/10769.txt new file mode 100644 index 0000000000..b3baba4c4a --- /dev/null +++ b/.changelog/10769.txt @@ -0,0 +1,3 @@ +```release-note:feature +ui: Add UI support to use Vault as an external source for a service +``` \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/consul/external-source/README.mdx b/ui/packages/consul-ui/app/components/consul/external-source/README.mdx new file mode 100644 index 0000000000..92bc55e16c --- /dev/null +++ b/ui/packages/consul-ui/app/components/consul/external-source/README.mdx @@ -0,0 +1,21 @@ +# Consul::ExternalSource + +A presentational component for showing the external source a service was registered with. + +```hbs + +``` + +### Arguments + +| Argument/Attribute | Type | Default | Description | +| --- | --- | --- | --- | +| `items` | `object` | | An object of service meta data that has the external source | + +### See + +- [Template Source Code](./index.hbs) +- [Styling Source Code](./index.scss) + + +--- diff --git a/ui/packages/consul-ui/app/components/pill/index.scss b/ui/packages/consul-ui/app/components/pill/index.scss index cd4d91c3dc..d8410f88cb 100644 --- a/ui/packages/consul-ui/app/components/pill/index.scss +++ b/ui/packages/consul-ui/app/components/pill/index.scss @@ -32,6 +32,9 @@ span.policy-service-identity::before { %pill.consul::before { @extend %with-logo-consul-color-icon, %as-pseudo; } +%pill.vault::before { + @extend %with-logo-vault-color-icon, %as-pseudo; +} %pill.aws::before { @extend %with-logo-aws-color-icon, %as-pseudo; } diff --git a/ui/packages/consul-ui/app/helpers/service/external-source.js b/ui/packages/consul-ui/app/helpers/service/external-source.js index 44d8107c88..07b2ea54c0 100644 --- a/ui/packages/consul-ui/app/helpers/service/external-source.js +++ b/ui/packages/consul-ui/app/helpers/service/external-source.js @@ -7,7 +7,7 @@ export function serviceExternalSource(params, hash) { source = get(params[0], 'Meta.external-source'); } const prefix = typeof hash.prefix === 'undefined' ? '' : hash.prefix; - if (source && ['kubernetes', 'terraform', 'nomad', 'consul', 'aws'].includes(source)) { + if (source && ['vault', 'kubernetes', 'terraform', 'nomad', 'consul', 'aws'].includes(source)) { return `${prefix}${source}`; } return; diff --git a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss index aeb0d256eb..bbb1de4237 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/base-variables.scss @@ -458,6 +458,10 @@ --logo-terraform-color-svg: url('data:image/svg+xml;charset=UTF-8,'); } +%logo-vault-color-svg-prop { + --logo-vault-color-svg: url('data:image/svg+xml;charset=UTF-8,'); +} + %logo-vmware-color-svg-prop { --logo-vmware-color-svg: url('data:image/svg+xml;charset=UTF-8,'); } diff --git a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss index e2bb1e0197..7c91433e37 100644 --- a/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss +++ b/ui/packages/consul-ui/app/styles/base/icons/icon-placeholders.scss @@ -1148,6 +1148,16 @@ mask-image: var(--logo-terraform-color-svg); } +%with-logo-vault-color-icon { + @extend %with-icon, %logo-vault-color-svg-prop; + background-image: var(--logo-vault-color-svg); +} +%with-logo-vault-color-mask { + @extend %with-mask, %logo-vault-color-svg-prop; + -webkit-mask-image: var(--logo-vault-color-svg); + mask-image: var(--logo-vault-color-svg); +} + %with-logo-vmware-color-icon { @extend %with-icon, %logo-vmware-color-svg-prop; background-image: var(--logo-vmware-color-svg); diff --git a/ui/packages/consul-ui/mock-api/v1/health/service/_ b/ui/packages/consul-ui/mock-api/v1/health/service/_ index cca5b7d8bc..bb0942b996 100644 --- a/ui/packages/consul-ui/mock-api/v1/health/service/_ +++ b/ui/packages/consul-ui/mock-api/v1/health/service/_ @@ -78,7 +78,7 @@ ${typeof location.search.ns !== '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(['consul', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}" + "external-source": "${fake.helpers.randomize(['vault', 'consul', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}" }, ` : ` "Meta": null, diff --git a/ui/packages/consul-ui/mock-api/v1/internal/ui/gateway-services-nodes/_ b/ui/packages/consul-ui/mock-api/v1/internal/ui/gateway-services-nodes/_ index 9df887538f..ef0f45ffa9 100644 --- a/ui/packages/consul-ui/mock-api/v1/internal/ui/gateway-services-nodes/_ +++ b/ui/packages/consul-ui/mock-api/v1/internal/ui/gateway-services-nodes/_ @@ -47,7 +47,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(['consul', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"`; + return `"${fake.helpers.randomize(['vault', 'consul', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"`; } ) } diff --git a/ui/packages/consul-ui/mock-api/v1/internal/ui/service-topology/_ b/ui/packages/consul-ui/mock-api/v1/internal/ui/service-topology/_ index d4f6ade68b..bd2335c0a8 100644 --- a/ui/packages/consul-ui/mock-api/v1/internal/ui/service-topology/_ +++ b/ui/packages/consul-ui/mock-api/v1/internal/ui/service-topology/_ @@ -83,7 +83,7 @@ ${ "Intention": { "Allowed": ${allowed}, "HasPermissions": ${hasPerms}, - "ExternalSource": "${fake.helpers.randomize(['nomad', 'kubernetes', ''])}", + "ExternalSource": "${fake.helpers.randomize(['vault', 'nomad', 'kubernetes', ''])}", "HasExact": ${fake.random.boolean()}, "DefaultAllow": ${fake.random.boolean()} } 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 1542c45942..52b34d27a6 100644 --- a/ui/packages/consul-ui/mock-api/v1/internal/ui/services +++ b/ui/packages/consul-ui/mock-api/v1/internal/ui/services @@ -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(['consul', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"`; + return `"${fake.helpers.randomize(['vault', 'nomad', 'terraform', 'kubernetes', 'aws', ''])}"`; } ) }