ui: Add Vault as a Service External Source

[kaxcode]

✨ Description:

Vault is now using the service external-source flag. Vault has always been supported as an external-source, but hasn't always used the flag.

The Registered in <external-source> is the Consul::ExternalSource component.

The %pill styling is used by Consul::ExternalSource.

Changes:

• Added Vault logo to the code base
• Added styling support for the vault logo
• Added 'vault' to /service/external-source helper
• Updates to mock-data
• Added a Consul::ExternalSource README.mdx for documentation

Demo Link

📸 Screenshots:

You can now find Vault in...

• Service list row

• Service Instances list row

• At the top of the Service detail page

• At the top of the Service Instance page

⚡ Backend Changes:

Vault team added supported in this Vault repo PR

🤡 Updates to mock-api:

Updated mock data for the following endpoints:

• /health/service/
• /internal/ui/gateway-services-nodes/
• /internal/ui/service-topology/
• /internal/ui/services

🧪 Testing:

No testing added.

• Changelog
• Demo Link

[gsusmi]

@kaxcode , can you point me to a template that's populating pill class name? Trying to get a full picture. Ty!

[kaxcode]

@kaxcode , can you point me to a template that's populating pill class name? Trying to get a full picture. Ty!

@gsusmi
Yes, just updated the Description to link you to the component and the styling.

[gsusmi]

LGTM. Ty!

[ghost]

Looks good. My only feedback is that ['vault', 'kubernetes', 'terraform', 'nomad', 'consul', 'aws'] appears to be duplicated in a handful of places (in different orders). This smells like data and it might be useful to export from a single location, if feasible. Thoughts?

[kaxcode]

Looks good. My only feedback is that ['vault', 'kubernetes', 'terraform', 'nomad', 'consul', 'aws'] appears to be duplicated in a handful of places (in different orders). This smells like data and it might be useful to export from a single location, if feasible. Thoughts?

@randallmorey I agree. I'm not good at working with js template literal files though. Not sure how we can centralize data in the mock-data directory 😬

[ghost]

@randallmorey I agree. I'm not good at working with js template literal files though. Not sure how we can centralize data in the mock-data directory 😬

Understood. I'm not sure either! My suggestion isn't urgent. PR approved!

[hc-github-team-consul-core]

🍒 If backport labels were added before merging, cherry-picking will start automatically.

To retroactively trigger a backport after merging, add backport labels and re-run https://circleci.com/gh/hashicorp/consul/422224.