diff --git a/ui-v2/app/styles/app.scss b/ui-v2/app/styles/app.scss index cebc321f1..9fa550d5f 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/components/table.scss b/ui-v2/app/styles/components/table.scss index 49578096e..c78786af2 100644 --- a/ui-v2/app/styles/components/table.scss +++ b/ui-v2/app/styles/components/table.scss @@ -1,4 +1,9 @@ @import './icons'; +@import './tag'; +td strong { + @extend %tag; + background-color: $gray; +} th { color: $text-light !important; } @@ -53,12 +58,6 @@ table td a { tbody { overflow-x: visible !important; } -td strong { - display: inline-block; - background-color: $gray; - padding: 1px 5px; - border-radius: $radius-small; -} th, td:not(.actions), td:not(.actions) a { diff --git a/ui-v2/app/styles/components/tag.scss b/ui-v2/app/styles/components/tag.scss new file mode 100644 index 000000000..f31eb7be8 --- /dev/null +++ b/ui-v2/app/styles/components/tag.scss @@ -0,0 +1,5 @@ +%tag { + display: inline-block; + padding: 1px 5px; + border-radius: $radius-small; +} diff --git a/ui-v2/app/styles/routes/dc/nodes/index.scss b/ui-v2/app/styles/routes/dc/nodes/index.scss new file mode 100644 index 000000000..f7c3003be --- /dev/null +++ b/ui-v2/app/styles/routes/dc/nodes/index.scss @@ -0,0 +1,6 @@ +// TODO: Generalize this, also see services/index +html.template-node.template-show td.tags span { + @extend %tag; + background-color: $gray; + margin-bottom: 0.5em; +} diff --git a/ui-v2/app/styles/routes/dc/service/index.scss b/ui-v2/app/styles/routes/dc/service/index.scss index 975da4ad7..d60c5c77a 100644 --- a/ui-v2/app/styles/routes/dc/service/index.scss +++ b/ui-v2/app/styles/routes/dc/service/index.scss @@ -1,9 +1,15 @@ +@import '../../../components/tag'; html.template-service.template-show main dl { display: flex; margin-bottom: 1.4em; } -html.template-service.template-show main dt::after { - content: ':'; - display: inline-block; - margin-right: 0.2em; +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; + margin-bottom: 0.5em; } diff --git a/ui-v2/app/templates/dc/nodes/-services.hbs b/ui-v2/app/templates/dc/nodes/-services.hbs index 185875f3c..1aeaa01be 100644 --- a/ui-v2/app/templates/dc/nodes/-services.hbs +++ b/ui-v2/app/templates/dc/nodes/-services.hbs @@ -20,9 +20,11 @@ {{item.Port}} - + {{#if (gt item.Tags.length 0)}} - {{join ', ' item.Tags}} + {{#each item.Tags as |item|}} + {{item}} + {{/each}} {{/if}} {{/block-slot}} diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs index 067c63107..5267078b6 100644 --- a/ui-v2/app/templates/dc/services/index.hbs +++ b/ui-v2/app/templates/dc/services/index.hbs @@ -35,9 +35,11 @@
{{format_number item.ChecksCritical}}
- + {{#if (gt item.Tags.length 0)}} - {{join ', ' item.Tags}} + {{#each item.Tags as |item|}} + {{item}} + {{/each}} {{/if}} {{/block-slot}} diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs index 23dc23af9..acccf3468 100644 --- a/ui-v2/app/templates/dc/services/show.hbs +++ b/ui-v2/app/templates/dc/services/show.hbs @@ -19,7 +19,9 @@
Tags
- {{join ', ' item.Tags}} + {{#each item.Tags as |item|}} + {{item}} + {{/each}}
{{/if}} diff --git a/ui-v2/tests/acceptance/dc/services/show.feature b/ui-v2/tests/acceptance/dc/services/show.feature index 29daba7b6..bf64a5d5b 100644 --- a/ui-v2/tests/acceptance/dc/services/show.feature +++ b/ui-v2/tests/acceptance/dc/services/show.feature @@ -17,6 +17,7 @@ Feature: dc / services / show: Show Service dc: dc1 service: service-0 --- - Then I see the text "Tag1, Tag2, Tag3" in "[data-test-tags]" - Then ok + Then I see the text "Tag1" in "[data-test-tags] span:nth-child(1)" + Then I see the text "Tag2" in "[data-test-tags] span:nth-child(2)" + Then I see the text "Tag3" in "[data-test-tags] span:nth-child(3)"