From d3930d55aa8b9eaecd434bde37c9f4f80be3a607 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Fri, 2 Aug 2019 13:53:52 +0200 Subject: [PATCH] ui: Adds readonly meta data to the serviceInstance and node detail pages (#6196) --- ui-v2/app/helpers/object-entries.js | 3 +++ ui-v2/app/styles/routes/dc/nodes/index.scss | 3 +++ ui-v2/app/styles/routes/dc/service/index.scss | 3 ++- ui-v2/app/templates/dc/nodes/metadata.hbs | 27 +++++++++++++++++++ ui-v2/app/templates/dc/nodes/show.hbs | 2 ++ ui-v2/app/templates/dc/services/instance.hbs | 2 ++ ui-v2/app/templates/dc/services/metadata.hbs | 27 +++++++++++++++++++ ui-v2/tests/acceptance/dc/nodes/show.feature | 3 +++ .../dc/services/instances/show.feature | 5 ++++ ui-v2/tests/pages/dc/nodes/show.js | 9 ++++++- ui-v2/tests/pages/dc/services/instance.js | 10 ++++++- 11 files changed, 91 insertions(+), 3 deletions(-) create mode 100644 ui-v2/app/templates/dc/nodes/metadata.hbs create mode 100644 ui-v2/app/templates/dc/services/metadata.hbs diff --git a/ui-v2/app/helpers/object-entries.js b/ui-v2/app/helpers/object-entries.js index f2ba716ac..802675e3b 100644 --- a/ui-v2/app/helpers/object-entries.js +++ b/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); } diff --git a/ui-v2/app/styles/routes/dc/nodes/index.scss b/ui-v2/app/styles/routes/dc/nodes/index.scss index 2bb95dfe9..d4374c0d8 100644 --- a/ui-v2/app/styles/routes/dc/nodes/index.scss +++ b/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; +} diff --git a/ui-v2/app/styles/routes/dc/service/index.scss b/ui-v2/app/styles/routes/dc/service/index.scss index 07ac54024..ccb191157 100644 --- a/ui-v2/app/styles/routes/dc/service/index.scss +++ b/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; } diff --git a/ui-v2/app/templates/dc/nodes/metadata.hbs b/ui-v2/app/templates/dc/nodes/metadata.hbs new file mode 100644 index 000000000..512e80801 --- /dev/null +++ b/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'}} + Key + Value + {{/block-slot}} + {{#block-slot 'row'}} + + + {{object-at 0 item}} + + + + {{object-at 1 item}} + + {{/block-slot}} + {{/tabular-collection}} + {{/with}} +{{else}} +

+ This node has no meta data. +

+{{/if}} diff --git a/ui-v2/app/templates/dc/nodes/show.hbs b/ui-v2/app/templates/dc/nodes/show.hbs index 627de3e5b..9f099e9c2 100644 --- a/ui-v2/app/templates/dc/nodes/show.hbs +++ b/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| }} diff --git a/ui-v2/app/templates/dc/services/instance.hbs b/ui-v2/app/templates/dc/services/instance.hbs index d108dcfcf..23fa1c733 100644 --- a/ui-v2/app/templates/dc/services/instance.hbs +++ b/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| }} diff --git a/ui-v2/app/templates/dc/services/metadata.hbs b/ui-v2/app/templates/dc/services/metadata.hbs new file mode 100644 index 000000000..4aad7e1c8 --- /dev/null +++ b/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'}} + Key + Value + {{/block-slot}} + {{#block-slot 'row'}} + + + {{object-at 0 item}} + + + + {{object-at 1 item}} + + {{/block-slot}} + {{/tabular-collection}} + {{/with}} +{{else}} +

+ This instance has no meta data. +

+{{/if}} diff --git a/ui-v2/tests/acceptance/dc/nodes/show.feature b/ui-v2/tests/acceptance/dc/nodes/show.feature index eca463a6b..2a5012e84 100644 --- a/ui-v2/tests/acceptance/dc/nodes/show.feature +++ b/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 --- diff --git a/ui-v2/tests/acceptance/dc/services/instances/show.feature b/ui-v2/tests/acceptance/dc/services/instances/show.feature index 81bdd04c1..a876652eb 100644 --- a/ui-v2/tests/acceptance/dc/services/instances/show.feature +++ b/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 --- diff --git a/ui-v2/tests/pages/dc/nodes/show.js b/ui-v2/tests/pages/dc/nodes/show.js index 755306ff7..5fe0bb903 100644 --- a/ui-v2/tests/pages/dc/nodes/show.js +++ b/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]', {}), }; } diff --git a/ui-v2/tests/pages/dc/services/instance.js b/ui-v2/tests/pages/dc/services/instance.js index 667e92e19..46328c015 100644 --- a/ui-v2/tests/pages/dc/services/instance.js +++ b/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]'),