From 541ca945760502b65c10918f76ee548b7894671c Mon Sep 17 00:00:00 2001 From: Phil Renaud Date: Mon, 5 Dec 2022 14:50:17 -0500 Subject: [PATCH] [ui] Adding canary_tags the web UI (#15458) * Adding canary_tags to anyplace we show service tags * CSS moved and tabs to spaces --- .changelog/15458.txt | 3 + .../components/allocation-service-sidebar.hbs | 315 +++++++++--------- ui/app/models/service-fragment.js | 1 + ui/app/models/service.js | 1 + ui/app/styles/core/tag.scss | 17 + .../allocations/allocation/index.hbs | 3 + .../templates/components/job-service-row.hbs | 75 +++-- 7 files changed, 223 insertions(+), 192 deletions(-) create mode 100644 .changelog/15458.txt diff --git a/.changelog/15458.txt b/.changelog/15458.txt new file mode 100644 index 000000000..5aa3dc01b --- /dev/null +++ b/.changelog/15458.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: The web UI will now show canary_tags of services anyplace we would normally show tags. +``` diff --git a/ui/app/components/allocation-service-sidebar.hbs b/ui/app/components/allocation-service-sidebar.hbs index 37fe8d090..26347629a 100644 --- a/ui/app/components/allocation-service-sidebar.hbs +++ b/ui/app/components/allocation-service-sidebar.hbs @@ -1,156 +1,159 @@
- {{#if @service}} - {{keyboard-commands this.keyCommands}} -
-

- {{@service.name}} - {{#if (not-eq @service.provider "consul")}} - - {{#if (eq this.aggregateStatus 'Unhealthy')}} - - Unhealthy - {{else}} - - Healthy - {{/if}} - - {{/if}} -

- -
+ {{#if @service}} + {{keyboard-commands this.keyCommands}} +
+

+ {{@service.name}} + {{#if (not-eq @service.provider "consul")}} + + {{#if (eq this.aggregateStatus 'Unhealthy')}} + + Unhealthy + {{else}} + + Healthy + {{/if}} + + {{/if}} +

+ +
-
-
- - Service Details - +
+
+ + Service Details + -
- {{#if @service.connect}} - - - Connect - +
+ {{#if @service.connect}} + + + Connect + True - - {{/if}} - - - Allocation - - - {{@allocation.shortId}} - - - - - IP Address & Port - - - {{this.address}} - - - - - Client - - - - {{@allocation.node.shortId}} - - - - {{#if @service.tags.length}} - - - Tags - + + {{/if}} + + + Allocation + + + {{@allocation.shortId}} + + + + + IP Address & Port + + + {{this.address}} + + + + + Client + + + + {{@allocation.node.shortId}} + + + + {{#if @service.tags.length}} + + + Tags + {{#each @service.tags as |tag|}} {{tag}} {{/each}} - - {{/if}} -
-
-
- {{#if this.checks.length}} - - - - Check Name - - - Status - - - Output - - - - - - {{row.model.Check}} - - - - {{#if (eq row.model.Status "success")}} - - Healthy - {{else if (eq row.model.Status "failure")}} - - Unhealthy - {{else if (eq row.model.Status "pending")}} - Pending - {{/if}} - - - - - {{row.model.Output}} - - - - - -
- {{#each (dedupe-by-property (filter-by "Check" row.model.Check @service.healthChecks) prop="Timestamp") as |check|}} - - {{/each}} -
- - - - - {{/if}} - {{#if (eq @service.provider "consul")}} - - + {{#each @service.canary_tags as |tag|}} + {{tag}} + {{/each}} + + {{/if}} + + + + {{#if this.checks.length}} + + + + + + + + + + + + + + + + + + {{/if}} + {{#if (eq @service.provider "consul")}} +
+ Check Name + + Status + + Output +
+ {{row.model.Check}} + + + {{#if (eq row.model.Status "success")}} + + Healthy + {{else if (eq row.model.Status "failure")}} + + Unhealthy + {{else if (eq row.model.Status "pending")}} + Pending + {{/if}} + + + + {{row.model.Output}} + +
+
+ {{#each (dedupe-by-property (filter-by "Check" row.model.Check @service.healthChecks) prop="Timestamp") as |check|}} + + {{/each}} +
+
+ {{#if @service.onUpdate}} @@ -169,15 +172,15 @@ {{/if}} - -
On Update
- {{/if}} - {{#if (and (eq @service.provider "consul") this.consulRedirectLink)}} -
-

- Nomad cannot read health check information from Consul services, but you can view this information in your Consul UI. -

-
- {{/if}} - {{/if}} + + + {{/if}} + {{#if (and (eq @service.provider "consul") this.consulRedirectLink)}} +
+

+ Nomad cannot read health check information from Consul services, but you can view this information in your Consul UI. +

+
+ {{/if}} + {{/if}}
diff --git a/ui/app/models/service-fragment.js b/ui/app/models/service-fragment.js index 0d3e288c7..b4eb9561f 100644 --- a/ui/app/models/service-fragment.js +++ b/ui/app/models/service-fragment.js @@ -9,6 +9,7 @@ export default class Service extends Fragment { @attr('string') name; @attr('string') portLabel; @attr() tags; + @attr() canary_tags; @attr('string') onUpdate; @attr('string') provider; @fragment('consul-connect') connect; diff --git a/ui/app/models/service.js b/ui/app/models/service.js index 1c8907579..50f9c6a40 100644 --- a/ui/app/models/service.js +++ b/ui/app/models/service.js @@ -16,6 +16,7 @@ export default class Service extends Model { @attr('number') port; @attr('string') serviceName; @attr() tags; + @attr() canary_tags; @alias('serviceName') name; diff --git a/ui/app/styles/core/tag.scss b/ui/app/styles/core/tag.scss index f1e073bab..29a3ecdbd 100644 --- a/ui/app/styles/core/tag.scss +++ b/ui/app/styles/core/tag.scss @@ -81,4 +81,21 @@ height: 1rem; width: 1rem; } + + + $tagPadding: 0.75em; + + &.canary { + overflow: hidden; + &:before { + content: "Canary"; + background-color: $blue-light; + color: $black; + line-height: 1.5em; + margin-left: -$tagPadding; + margin-right: $tagPadding; + padding: 0 $tagPadding; + align-self: normal; + } + } } diff --git a/ui/app/templates/allocations/allocation/index.hbs b/ui/app/templates/allocations/allocation/index.hbs index e9c9951e9..1b04a968a 100644 --- a/ui/app/templates/allocations/allocation/index.hbs +++ b/ui/app/templates/allocations/allocation/index.hbs @@ -324,6 +324,9 @@ {{#each row.model.tags as |tag|}} {{tag}} {{/each}} + {{#each row.model.canary_tags as |tag|}} + {{tag}} + {{/each}} {{#if (eq row.model.provider "nomad")}} diff --git a/ui/app/templates/components/job-service-row.hbs b/ui/app/templates/components/job-service-row.hbs index 2de7000e4..63e4fe5e5 100644 --- a/ui/app/templates/components/job-service-row.hbs +++ b/ui/app/templates/components/job-service-row.hbs @@ -1,48 +1,51 @@ - {{#if (eq @service.provider "nomad")}} - - {{@service.name}} - {{else}} - - {{#if (and (eq @service.provider "consul") this.consulRedirectLink)}} - - {{@service.name}} - - {{else}} - {{@service.name}} - {{/if}} + {{keyboard-shortcut + enumerated=true + action=(action "gotoService" @service) + }} + > + {{#if (eq @service.provider "nomad")}} + + {{@service.name}} + {{else}} + + {{#if (and (eq @service.provider "consul") this.consulRedirectLink)}} + + {{@service.name}} + + {{else}} + {{@service.name}} + {{/if}} {{#if @service.connect}} {{/if}} - {{/if}} + {{/if}} + + + {{@service.level}} - - {{@service.level}} - {{#each @service.tags as |tag|}} - {{tag}} + {{tag}} + {{/each}} + {{#each @service.canary_tags as |tag|}} + {{tag}} {{/each}} - - {{#if (eq @service.provider "nomad")}} - {{@service.instances.length}} {{pluralize "allocation" @service.instances.length}} - {{else}} - -- - {{/if}} - + + {{#if (eq @service.provider "nomad")}} + {{@service.instances.length}} {{pluralize "allocation" @service.instances.length}} + {{else}} + -- + {{/if}} +