ui: Create Tags & Meta tab (#7954)

ui-v2/app/router.js

@@ -49,9 +49,6 @@ export const routes = {
         addresses: {
           _options: { path: '/addresses' },
         },
-        tags: {
-          _options: { path: '/tags' },
-        },
         metadata: {
           _options: { path: '/metadata' },
         },

ui-v2/app/routes/dc/services/instance/tags.js

@@ -1,14 +0,0 @@
-import Route from '@ember/routing/route';
-
-export default Route.extend({
-  model: function() {
-    const parent = this.routeName
-      .split('.')
-      .slice(0, -1)
-      .join('.');
-    return this.modelFor(parent);
-  },
-  setupController: function(controller, model) {
-    controller.setProperties(model);
-  },
-});

ui-v2/app/styles/base/components/tabs/layout.scss

@@ -29,5 +29,5 @@
   border-bottom: 1px solid $gray-200;
 }
 %tab-section section > h3 {
-  margin: 24px 0;
+  margin: 24px 0 12px 0;
 }

ui-v2/app/templates/dc/services/instance.hbs

@@ -39,8 +39,7 @@
                       (hash label="Proxy Info" href=(href-to "dc.services.instance.proxy") selected=(is-href "dc.services.instance.proxy"))
 
 )
-                      (hash label="Tags" href=(href-to "dc.services.instance.tags") selected=(is-href "dc.services.instance.tags"))
-                      (hash label="Metadata" href=(href-to "dc.services.instance.metadata") selected=(is-href "dc.services.instance.metadata"))
+                      (hash label="Tags & Meta" href=(href-to "dc.services.instance.metadata") selected=(is-href "dc.services.instance.metadata"))
               )
         }}/>
         {{outlet}}

ui-v2/app/templates/dc/services/instance/metadata.hbs

@@ -1,11 +1,24 @@
-<div id="metadata" class="tab-section">
+<div id="meta" class="tab-section">
   <div role="tabpanel">
-{{#if item.Meta}}
-  <ConsulMetadataList @items={{object-entries item.Meta}} />
-{{else}}
-  <p>
-    This instance has no metadata.
-  </p>
-{{/if}}
+    <section class="tags">
+      <h3>Tags</h3>
+    {{#if (gt item.Tags.length 0) }}
+      <TagList @item={{item}} />
+    {{else}}
+      <p>
+        There are no tags.
+      </p>
+    {{/if}}
+    </section>
+    <section class="metadata">
+      <h3>Meta</h3>
+    {{#if item.Meta}}
+      <ConsulMetadataList @items={{object-entries item.Meta}} />
+    {{else}}
+      <p>
+        This instance has no metadata.
+      </p>
+    {{/if}}
+    </section>
   </div>
 </div>

ui-v2/tests/acceptance/dc/services/instances/show.feature

@@ -68,14 +68,11 @@ Feature: dc / services / instances / show: Show Service Instance
     And I see 3 of the serviceChecks object
     And I see 3 of the nodeChecks object
 
-    When I click tags on the tabs
-    And I see tagsIsSelected on the tabs
+    When I click tags&Meta on the tabs
+    And I see tags&MetaIsSelected on the tabs
 
     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)"
-
-    When I click metadata on the tabs
-    And I see metadataIsSelected on the tabs
     And I see 3 of the metadata object
     And the title should be "service-1-with-id - Consul"
 

ui-v2/tests/pages/dc/services/instance.js

@@ -4,7 +4,7 @@ export default function(visitable, attribute, collection, text, tabs) {
     externalSource: attribute('data-test-external-source', '[data-test-external-source]', {
       scope: '.title',
     }),
-    tabs: tabs('tab', ['health-checks', 'proxy-info', 'addresses', 'tags', 'metadata']),
+    tabs: tabs('tab', ['health-checks', 'proxy-info', 'addresses', 'tags-&-meta']),
     serviceChecks: collection('[data-test-service-checks] li'),
     nodeChecks: collection('[data-test-node-checks] li'),
     upstreams: collection('[data-test-proxy-upstreams] > li', {
@@ -17,6 +17,6 @@ export default function(visitable, attribute, collection, text, tabs) {
     addresses: collection('#addresses [data-test-tabular-row]', {
       address: text('[data-test-address]'),
     }),
-    metadata: collection('#metadata [data-test-tabular-row]', {}),
+    metadata: collection('.metadata [data-test-tabular-row]', {}),
   };
 }