From 0ad1d562db78ae0476396ecf95dd17e96ad64ffc Mon Sep 17 00:00:00 2001
From: John Cowen <jcowen@hashicorp.com>
Date: Wed, 20 Jun 2018 15:14:16 +0100
Subject: [PATCH] Use the pill styling elsewhere...

TODO: Probably change the %tag to %pill now I've remembered the word I was
looking for!
---
 ui-v2/app/styles/app.scss                     | 1 +
 ui-v2/app/styles/routes/dc/service/index.scss | 2 ++
 ui-v2/app/templates/dc/nodes/-services.hbs    | 6 ++++--
 ui-v2/app/templates/dc/services/index.hbs     | 6 ++++--
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ui-v2/app/styles/app.scss b/ui-v2/app/styles/app.scss
index cebc321f17..9fa550d5f8 100644
--- a/ui-v2/app/styles/app.scss
+++ b/ui-v2/app/styles/app.scss
@@ -45,6 +45,7 @@
 @import 'components/notice';
 
 @import 'routes/dc/service/index';
+@import 'routes/dc/nodes/index';
 @import 'routes/dc/kv/index';
 
 main a {
diff --git a/ui-v2/app/styles/routes/dc/service/index.scss b/ui-v2/app/styles/routes/dc/service/index.scss
index e8883041cd..d60c5c77a0 100644
--- a/ui-v2/app/styles/routes/dc/service/index.scss
+++ b/ui-v2/app/styles/routes/dc/service/index.scss
@@ -6,6 +6,8 @@ html.template-service.template-show main dl {
 html.template-service.template-show main dt {
   display: none;
 }
+// TODO: Generalize this, also see nodes/index
+html.template-service.template-list td.tags span,
 html.template-service.template-show main dd span {
   @extend %tag;
   background-color: $gray;
diff --git a/ui-v2/app/templates/dc/nodes/-services.hbs b/ui-v2/app/templates/dc/nodes/-services.hbs
index 185875f3ce..1aeaa01be3 100644
--- a/ui-v2/app/templates/dc/nodes/-services.hbs
+++ b/ui-v2/app/templates/dc/nodes/-services.hbs
@@ -20,9 +20,11 @@
             <td data-test-service-port="{{item.Port}}" class="port">
                 {{item.Port}}
             </td>
-            <td>
+            <td data-test-service-tags class="tags">
                 {{#if (gt item.Tags.length 0)}}
-                    {{join ', ' item.Tags}}
+                  {{#each item.Tags as |item|}}
+                    <span>{{item}}</span>
+                  {{/each}}
                 {{/if}}
             </td>
         {{/block-slot}}
diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs
index 067c63107c..5267078b6c 100644
--- a/ui-v2/app/templates/dc/services/index.hbs
+++ b/ui-v2/app/templates/dc/services/index.hbs
@@ -35,9 +35,11 @@
                         <dd title="Critical" class={{if (lt item.ChecksCritical 1) 'zero'}} style={{criticalWidth}}>{{format_number item.ChecksCritical}}</dd>
                     </dl>
                 </td>
-                <td style={{remainingWidth}}>
+                <td class="tags" style={{remainingWidth}}>
                 {{#if (gt item.Tags.length 0)}}
-                    {{join ', ' item.Tags}}
+                  {{#each item.Tags as |item|}}
+                    <span>{{item}}</span>
+                  {{/each}}
                 {{/if}}
                 </td>
             {{/block-slot}}