ui: Add Vault as a Service External Source (#10769)

.changelog/10769.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+ui: Add UI support to use Vault as an external source for a service
+```

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
+<Consul::ExternalSource @item={{items}} />
+```
+
+### 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)
+
+
+---

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;
 }

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;

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,<svg viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="%235C4EE5" d="M5.51 3.15l4.886 2.821v5.644L5.509 8.792z"/><path fill="%234040B2" d="M10.931 5.971v5.644l4.888-2.823V3.15z"/><path fill="%235C4EE5" d="M.086 0v5.642l4.887 2.823V2.82zM5.51 15.053l4.886 2.823v-5.644l-4.887-2.82z"/></g></svg>');
 }
 
+%logo-vault-color-svg-prop {
+  --logo-vault-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L14.9453 30L30 0H0ZM16.724 6.02083H18.4635V7.76042H16.724V6.02083ZM11.5208 12.9766H13.2604V11.237H11.5208V12.9766ZM13.2604 10.3724H11.5208V8.6302H13.2604V10.3724ZM11.5208 7.76823H13.2604V6.02083H11.5208V7.76823ZM15.8646 15.5937H14.1302V13.8463H15.8698L15.8646 15.5937ZM14.1302 12.9896H15.8646L15.8698 11.237H14.1302V12.9896ZM15.8646 10.3854H14.1302V8.6302H15.8698L15.8646 10.3854ZM14.1302 7.78125H15.8646L15.8698 6.02083H14.1302V7.78125ZM16.7187 8.65105H18.4635V10.3906H16.7239L16.7187 8.65105ZM16.7344 11.237V13L18.4896 12.9766V11.237H16.7344Z" fill="black"/></svg>');
+}
+
 %logo-vmware-color-svg-prop {
   --logo-vmware-color-svg: url('data:image/svg+xml;charset=UTF-8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.096 8.663c-.251-.566-.873-.822-1.453-.558-.58.265-.795.927-.532 1.493l2.436 5.437c.383.852.787 1.298 1.545 1.298.81 0 1.163-.486 1.545-1.298l2.147-4.8a.308.308 0 0 1 .306-.202c.183 0 .336.15.336.352v4.645c0 .716.387 1.303 1.131 1.303s1.146-.587 1.146-1.303v-3.801c0-.733.512-1.21 1.21-1.21.697 0 1.16.494 1.16 1.21v3.801c0 .716.389 1.303 1.132 1.303.743 0 1.147-.587 1.147-1.303v-3.801c0-.733.51-1.21 1.208-1.21.696 0 1.162.494 1.162 1.21v3.801c0 .716.388 1.303 1.131 1.303.744 0 1.147-.587 1.147-1.303v-4.326C22 9.114 20.755 8 19.256 8c-1.497 0-2.434 1.063-2.434 1.063-.498-.663-1.185-1.062-2.347-1.062-1.227 0-2.3 1.062-2.3 1.062-.499-.663-1.348-1.062-2.05-1.062-1.087 0-1.95.491-2.477 1.727l-1.556 3.765-1.996-4.83z" fill="%23696566"/></svg>');
 }

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);

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,

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', ''])}"`;
           }
         )
       }

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()}
       }

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', ''])}"`;
                         }
                     )
                 }