[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

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: The web UI will now show canary_tags of services anyplace we would normally show tags.
+```

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>

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;

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;
 

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

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

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>