Adding canary_tags to anyplace we show service tags

hashicorp · Dec 2, 2022 · 66f3131 · 66f3131
1 parent 2d4611a
commit 66f3131
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 1 deletion.
diff --git a/.changelog/15458.txt 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
@@ -94,6 +94,9 @@
               {{#each @service.tags as |tag|}}
                 <span class="tag is-service">{{tag}}</span>
               {{/each}}
+							{{#each @service.canary_tags as |tag|}}
+								<span class="tag canary is-service">{{tag}}</span>
+							{{/each}}
 						</span>
 					{{/if}}
 				</div>

diff --git 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
@@ -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/components/services.scss b/ui/app/styles/components/services.scss
@@ -172,3 +172,21 @@ table.health-checks {
     }
   }
 }
+
+$tagPadding: 0.75em;
+
+.tag {
+  &.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
@@ -324,6 +324,9 @@
                 {{#each row.model.tags as |tag|}}
                   <span class="tag is-service">{{tag}}</span>
                 {{/each}}
+                {{#each row.model.canary_tags as |tag|}}
+                  <span class="tag canary is-service">{{tag}}</span>
+                {{/each}}
               </td>
               <td data-test-service-health class="is-2">
                 {{#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
@@ -35,7 +35,10 @@
 	</td>
   <td>
     {{#each @service.tags as |tag|}}
-			<span class="tag">{{tag}}</span>
+			<span class="tag is-service">{{tag}}</span>
+    {{/each}}
+    {{#each @service.canary_tags as |tag|}}
+			<span class="tag canary is-service">{{tag}}</span>
     {{/each}}
   </td>
 	<td>