ui: Adds readonly meta data to the serviceInstance and node detail pages (#6196)

ui-v2/app/helpers/object-entries.js

@@ -1,6 +1,9 @@
 import { helper } from '@ember/component/helper';
 
 export function objectEntries([obj = {}] /*, hash*/) {
+  if (obj == null) {
+    return [];
+  }
   return Object.entries(obj);
 }
 

ui-v2/app/styles/routes/dc/nodes/index.scss

@@ -8,3 +8,6 @@ html.template-node.template-list .healthy h2,
 html.template-node.template-list .unhealthy h2 {
   margin-bottom: 0.7em;
 }
+html.template-node.template-show #meta-data table tr {
+  cursor: default;
+}

ui-v2/app/styles/routes/dc/service/index.scss

@@ -1,4 +1,5 @@
 html.template-instance.template-show #addresses table tr,
-html.template-instance.template-show #upstreams table tr {
+html.template-instance.template-show #upstreams table tr,
+html.template-instance.template-show #meta-data table tr {
   cursor: default;
 }

ui-v2/app/templates/dc/nodes/metadata.hbs

@@ -0,0 +1,27 @@
+{{#if item.Meta}}
+  {{#with (object-entries item.Meta) as |meta|}}
+    {{#tabular-collection
+        data-test-metadata
+        items=meta as |item index|
+    }}
+        {{#block-slot 'header'}}
+            <th>Key</th>
+            <th>Value</th>
+        {{/block-slot}}
+        {{#block-slot 'row'}}
+            <td>
+              <span>
+                {{object-at 0 item}}
+              </span>
+            </td>
+            <td>
+              <span>{{object-at 1 item}}</span>
+            </td>
+        {{/block-slot}}
+    {{/tabular-collection}}
+  {{/with}}
+{{else}}
+  <p>
+    This node has no meta data.
+  </p>
+{{/if}}

ui-v2/app/templates/dc/nodes/show.hbs

@@ -20,6 +20,7 @@
                              'Services'
     (if tomography.distances 'Round Trip Time' '')
                              'Lock Sessions'
+                             'Meta Data'
               )
             )
             selected=selectedTab
@@ -52,6 +53,7 @@
                             (hash id=(slugify 'Services') partial='dc/nodes/services')
    (if tomography.distances (hash id=(slugify 'Round Trip Time') partial='dc/nodes/rtt') '')
                             (hash id=(slugify 'Lock Sessions') partial='dc/nodes/sessions')
+                            (hash id=(slugify 'Meta Data') partial='dc/nodes/metadata')
                 )
             ) as |panel|
         }}

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

@@ -77,6 +77,7 @@
                 'Addresses' ''
 )
                 'Tags'
+                'Meta Data'
               )
             )
             selected=selectedTab
@@ -95,6 +96,7 @@
                     (hash id=(slugify 'Addresses') partial='dc/services/addresses') ''
 )
                     (hash id=(slugify 'Tags') partial='dc/services/tags')
+                    (hash id=(slugify 'Meta Data') partial='dc/services/metadata')
                 )
             ) as |panel|
         }}

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

@@ -0,0 +1,27 @@
+{{#if item.Meta}}
+  {{#with (object-entries item.Meta) as |meta|}}
+    {{#tabular-collection
+        data-test-metadata
+        items=meta as |item index|
+    }}
+        {{#block-slot 'header'}}
+            <th>Key</th>
+            <th>Value</th>
+        {{/block-slot}}
+        {{#block-slot 'row'}}
+            <td>
+              <span>
+                {{object-at 0 item}}
+              </span>
+            </td>
+            <td>
+              <span>{{object-at 1 item}}</span>
+            </td>
+        {{/block-slot}}
+    {{/tabular-collection}}
+  {{/with}}
+{{else}}
+  <p>
+    This instance has no meta data.
+  </p>
+{{/if}}

ui-v2/tests/acceptance/dc/nodes/show.feature

@@ -19,6 +19,9 @@ Feature: dc / nodes / show: Show node
 
     When I click lockSessions on the tabs
     And I see lockSessionsIsSelected on the tabs
+
+    When I click metaData on the tabs
+    And I see metaDataIsSelected on the tabs
   Scenario: Given 1 node all the tabs are visible and clickable and the RTT one isn't there
     Given 1 node models from yaml
     ---

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

@@ -74,6 +74,11 @@ Feature: dc / services / instances / show: Show Service Instance
 
     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 1 of the metaData object
+
   Scenario: A Service instance warns when deregistered whilst blocking
     Given settings from yaml
     ---

ui-v2/tests/pages/dc/nodes/show.js

@@ -1,7 +1,13 @@
 export default function(visitable, deletable, clickable, attribute, collection, radiogroup) {
   return {
     visit: visitable('/:dc/nodes/:node'),
-    tabs: radiogroup('tab', ['health-checks', 'services', 'round-trip-time', 'lock-sessions']),
+    tabs: radiogroup('tab', [
+      'health-checks',
+      'services',
+      'round-trip-time',
+      'lock-sessions',
+      'meta-data',
+    ]),
     healthchecks: collection('[data-test-node-healthcheck]', {
       name: attribute('data-test-node-healthcheck'),
     }),
@@ -17,5 +23,6 @@ export default function(visitable, deletable, clickable, attribute, collection,
         TTL: attribute('data-test-session-ttl', '[data-test-session-ttl]'),
       })
     ),
+    metaData: collection('#meta-data [data-test-tabular-row]', {}),
   };
 }

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

@@ -2,7 +2,14 @@ export default function(visitable, attribute, collection, text, radiogroup) {
   return {
     visit: visitable('/:dc/services/:service/:node/:id'),
     externalSource: attribute('data-test-external-source', 'h1 span'),
-    tabs: radiogroup('tab', ['service-checks', 'node-checks', 'addresses', 'upstreams', 'tags']),
+    tabs: radiogroup('tab', [
+      'service-checks',
+      'node-checks',
+      'addresses',
+      'upstreams',
+      'tags',
+      'meta-data',
+    ]),
     serviceChecks: collection('#service-checks [data-test-healthchecks] li', {}),
     nodeChecks: collection('#node-checks [data-test-healthchecks] li', {}),
     upstreams: collection('#upstreams [data-test-tabular-row]', {
@@ -14,6 +21,7 @@ export default function(visitable, attribute, collection, text, radiogroup) {
     addresses: collection('#addresses [data-test-tabular-row]', {
       address: text('[data-test-address]'),
     }),
+    metaData: collection('#meta-data [data-test-tabular-row]', {}),
     proxy: {
       type: attribute('data-test-proxy-type', '[data-test-proxy-type]'),
       destination: attribute('data-test-proxy-destination', '[data-test-proxy-destination]'),