From 40a270a4928079dc6548923bf14905b798c5ad52 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 12 Jul 2018 13:35:33 +0100 Subject: [PATCH 1/3] Acceptance tests to search/look for service id's --- .../components/catalog-filter.feature | 33 ++++++++++++++++++- .../tests/acceptance/dc/services/show.feature | 12 +++++++ ui-v2/tests/pages/dc/nodes/show.js | 1 + ui-v2/tests/pages/dc/services/show.js | 2 ++ 4 files changed, 47 insertions(+), 1 deletion(-) diff --git a/ui-v2/tests/acceptance/components/catalog-filter.feature b/ui-v2/tests/acceptance/components/catalog-filter.feature index 9db4e0ee7c..962edec414 100644 --- a/ui-v2/tests/acceptance/components/catalog-filter.feature +++ b/ui-v2/tests/acceptance/components/catalog-filter.feature @@ -65,7 +65,7 @@ Feature: components / catalog-filter --- - ID: node-0 --- - When I visit the node page for yaml + When I visit the [Page] page for yaml --- dc: dc1 node: node-0 @@ -81,8 +81,39 @@ Feature: components / catalog-filter --- And I see 1 [Model] model And I see 1 [Model] model with the port "65535" + Then I fill in with yaml + --- + s: service-0-with-id + --- + And I see 1 [Model] model + And I see 1 [Model] model with the id "service-0-with-id" Where: ------------------------------------------------- | Model | Page | Url | | service | node | /dc-1/nodes/node-0 | ------------------------------------------------- + Scenario: Filtering [Model] in [Page] + Given 1 datacenter model with the value "dc1" + And 2 [Model] models from yaml + --- + - ID: node-0 + --- + When I visit the [Page] page for yaml + --- + dc: dc1 + service: service-0 + --- + Then I fill in with yaml + --- + s: service-0-with-id + --- + And I see 1 [Model] model + Then I see id on the unhealthy like yaml + --- + - service-0-with-id + --- + Where: + ------------------------------------------------- + | Model | Page | Url | + | nodes | service | /dc-1/services/service-0 | + ------------------------------------------------- diff --git a/ui-v2/tests/acceptance/dc/services/show.feature b/ui-v2/tests/acceptance/dc/services/show.feature index dd220c4044..29b3c4f892 100644 --- a/ui-v2/tests/acceptance/dc/services/show.feature +++ b/ui-v2/tests/acceptance/dc/services/show.feature @@ -28,14 +28,17 @@ Feature: dc / services / show: Show Service - Checks: - Status: passing Service: + ID: passing-service-8080 Port: 8080 Node: Address: 1.1.1.1 - Service: + ID: service-8000 Port: 8000 Node: Address: 2.2.2.2 - Service: + ID: service-8888 Port: 8888 Node: Address: 3.3.3.3 @@ -54,3 +57,12 @@ Feature: dc / services / show: Show Service - "2.2.2.2:8000" - "3.3.3.3:8888" --- + Then I see id on the healthy like yaml + --- + - "passing-service-8080" + --- + Then I see id on the unhealthy like yaml + --- + - "service-8000" + - "service-8888" + --- diff --git a/ui-v2/tests/pages/dc/nodes/show.js b/ui-v2/tests/pages/dc/nodes/show.js index 4296397685..01bfc7737b 100644 --- a/ui-v2/tests/pages/dc/nodes/show.js +++ b/ui-v2/tests/pages/dc/nodes/show.js @@ -6,6 +6,7 @@ export default function(visitable, deletable, clickable, attribute, collection, name: attribute('data-test-node-healthcheck'), }), services: collection('#services [data-test-tabular-row]', { + id: attribute('data-test-service-id', '[data-test-service-id]'), port: attribute('data-test-service-port', '.port'), }), sessions: collection( diff --git a/ui-v2/tests/pages/dc/services/show.js b/ui-v2/tests/pages/dc/services/show.js index 483e3a4127..7e2a895bf3 100644 --- a/ui-v2/tests/pages/dc/services/show.js +++ b/ui-v2/tests/pages/dc/services/show.js @@ -7,10 +7,12 @@ export default function(visitable, attribute, collection, text, filter) { healthy: collection('[data-test-healthy] [data-test-node]', { name: attribute('data-test-node'), address: text('header strong'), + id: text('header em'), }), unhealthy: collection('[data-test-unhealthy] [data-test-node]', { name: attribute('data-test-node'), address: text('header strong'), + id: text('header em'), }), filter: filter, }; From 310a038f872b4299bbc9daf207daaf2fd8773626 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 12 Jul 2018 13:36:47 +0100 Subject: [PATCH 2/3] Show Service.ID's throughout the app, allow searching by Service.ID 1. In the Services > Services detail page for both healthy and unhealthy nodes, also add searching by Service.ID here 2. In the Nodes > Node detail > [Services] tab only if its different from the Service name, add searching by Service.ID here --- .../app/components/healthchecked-resource.js | 3 +++ ui-v2/app/controllers/dc/nodes/show.js | 3 +++ ui-v2/app/controllers/dc/services/show.js | 8 +++++++- .../components/healthchecked-resource.scss | 19 +++++++++++++++---- ui-v2/app/styles/core/typography.scss | 5 ++++- .../components/healthchecked-resource.hbs | 3 ++- ui-v2/app/templates/dc/nodes/-services.hbs | 2 +- ui-v2/app/templates/dc/nodes/index.hbs | 2 +- ui-v2/app/templates/dc/services/show.hbs | 4 +++- 9 files changed, 39 insertions(+), 10 deletions(-) diff --git a/ui-v2/app/components/healthchecked-resource.js b/ui-v2/app/components/healthchecked-resource.js index 26710ca623..bd9f597cb5 100644 --- a/ui-v2/app/components/healthchecked-resource.js +++ b/ui-v2/app/components/healthchecked-resource.js @@ -15,6 +15,9 @@ export default Component.extend({ }), gridRowEnd: computed('UnhealthyChecks', function() { let spans = 3; + if (get(this, 'service')) { + spans++; + } if (get(this, 'healthy.length') > 0) { spans++; } diff --git a/ui-v2/app/controllers/dc/nodes/show.js b/ui-v2/app/controllers/dc/nodes/show.js index 0884b58489..cec7398db8 100644 --- a/ui-v2/app/controllers/dc/nodes/show.js +++ b/ui-v2/app/controllers/dc/nodes/show.js @@ -23,6 +23,9 @@ export default Controller.extend(WithFiltering, { get(item, 'Service') .toLowerCase() .indexOf(term) !== -1 || + get(item, 'ID') + .toLowerCase() + .indexOf(term) !== -1 || get(item, 'Port') .toString() .toLowerCase() diff --git a/ui-v2/app/controllers/dc/services/show.js b/ui-v2/app/controllers/dc/services/show.js index afa811ba16..b28d2070a0 100644 --- a/ui-v2/app/controllers/dc/services/show.js +++ b/ui-v2/app/controllers/dc/services/show.js @@ -20,10 +20,16 @@ export default Controller.extend(WithHealthFiltering, { }); }), filter: function(item, { s = '', status = '' }) { + const term = s.toLowerCase(); + return ( get(item, 'Node.Node') .toLowerCase() - .indexOf(s.toLowerCase()) !== -1 && hasStatus(get(item, 'Checks'), status) + .indexOf(term) !== -1 || + (get(item, 'Service.ID') + .toLowerCase() + .indexOf(term) !== -1 && + hasStatus(get(item, 'Checks'), status)) ); }, }); diff --git a/ui-v2/app/styles/components/healthchecked-resource.scss b/ui-v2/app/styles/components/healthchecked-resource.scss index f01342413a..c7b7b7f738 100644 --- a/ui-v2/app/styles/components/healthchecked-resource.scss +++ b/ui-v2/app/styles/components/healthchecked-resource.scss @@ -14,6 +14,7 @@ border-top: 1px solid; } %healthchecked-resource header span, +%healthchecked-resource header em, %healthchecked-resource li:not(:last-child) span { overflow: hidden; display: inline-block; @@ -34,14 +35,11 @@ border-radius: $radius-small; } %healthchecked-resource header { - margin-bottom: 2em; position: relative; } %healthchecked-resource header strong { position: absolute; - bottom: -0.6em; - left: 15px; } %healthchecked-resource a, %healthchecked-resource header a > * { @@ -85,12 +83,25 @@ .healthy .healthchecked-resource li a { padding-left: 0; } +%healthchecked-resource header strong { + top: 2.8em; + left: 15px; +} +%healthchecked-resource header span { + margin-bottom: 1.75em; +} %healthchecked-resource header a { padding: 12px 15px; } +.unhealthy .healthchecked-resource header a { + padding-bottom: 15px; +} +.unhealthy .healthchecked-resource header.with-service a { + padding-bottom: 25px; +} %healthchecked-resource li a { padding: 3px 15px; - padding-top: 5px; + padding-top: 4px; padding-left: 39px; height: 31px; } diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 9527d094f8..5dbadf0a72 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -41,10 +41,13 @@ th, font-weight: $weight-medium; } main label a[rel*='help'], +td:first-child em, %healthchecked-resource strong { font-weight: $weight-normal; } -%form-element > em { +%form-element > em, +td:first-child em, +%healthchecked-resource header em { font-style: normal; } %form-element > span { diff --git a/ui-v2/app/templates/components/healthchecked-resource.hbs b/ui-v2/app/templates/components/healthchecked-resource.hbs index cf9d9dc7a6..4b3f9bcbf9 100644 --- a/ui-v2/app/templates/components/healthchecked-resource.hbs +++ b/ui-v2/app/templates/components/healthchecked-resource.hbs @@ -1,7 +1,8 @@ -
+
{{address}} {{name}} + {{service}}
    diff --git a/ui-v2/app/templates/dc/nodes/-services.hbs b/ui-v2/app/templates/dc/nodes/-services.hbs index 1aeaa01be3..ff618251c3 100644 --- a/ui-v2/app/templates/dc/nodes/-services.hbs +++ b/ui-v2/app/templates/dc/nodes/-services.hbs @@ -15,7 +15,7 @@ {{/block-slot}} {{#block-slot 'row'}} - {{item.Service}} + {{item.Service}}{{#if (not-eq item.ID item.Service) }} ({{item.ID}}){{/if}} {{item.Port}} diff --git a/ui-v2/app/templates/dc/nodes/index.hbs b/ui-v2/app/templates/dc/nodes/index.hbs index 68c3c7b5c2..c74043d96b 100644 --- a/ui-v2/app/templates/dc/nodes/index.hbs +++ b/ui-v2/app/templates/dc/nodes/index.hbs @@ -35,7 +35,7 @@

    Healthy Nodes

    {{#list-collection items=healthy - cell-layout=(percentage-columns-layout healthy.length columns 100) as |item index| + cell-layout=(percentage-columns-layout healthy.length columns 92) as |item index| }} {{healthchecked-resource data-test-node=item.Node diff --git a/ui-v2/app/templates/dc/services/show.hbs b/ui-v2/app/templates/dc/services/show.hbs index d2163548a6..b7e2652a1e 100644 --- a/ui-v2/app/templates/dc/services/show.hbs +++ b/ui-v2/app/templates/dc/services/show.hbs @@ -36,6 +36,7 @@ data-test-node=item.Node.Node href=(href-to 'dc.nodes.show' item.Node.Node) name=item.Node.Node + service=item.Service.ID address=(concat item.Node.Address ':' item.Service.Port) checks=item.Checks }} @@ -49,12 +50,13 @@

    Healthy Nodes

    {{#list-collection items=healthy - cell-layout=(percentage-columns-layout healthy.length columns 100) as |item index| + cell-layout=(percentage-columns-layout healthy.length columns 113) as |item index| }} {{healthchecked-resource href=(href-to 'dc.nodes.show' item.Node.Node) data-test-node=item.Node.Node name=item.Node.Node + service=item.Service.ID address=(concat item.Node.Address ':' item.Service.Port) checks=item.Checks status=item.Checks.[0].Status From ab914001c1449198a7c41d52be0f74a708c1dfe0 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 12 Jul 2018 14:00:31 +0100 Subject: [PATCH 3/3] Bump consul-api-double --- ui-v2/package.json | 2 +- ui-v2/yarn.lock | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/ui-v2/package.json b/ui-v2/package.json index 70be6565be..041a3f5e68 100644 --- a/ui-v2/package.json +++ b/ui-v2/package.json @@ -30,7 +30,7 @@ ] }, "devDependencies": { - "@hashicorp/consul-api-double": "^1.2.0", + "@hashicorp/consul-api-double": "^1.4.0", "@hashicorp/ember-cli-api-double": "^1.3.0", "babel-plugin-transform-object-rest-spread": "^6.26.0", "base64-js": "^1.3.0", diff --git a/ui-v2/yarn.lock b/ui-v2/yarn.lock index 4323326cdd..0c3d57b6df 100644 --- a/ui-v2/yarn.lock +++ b/ui-v2/yarn.lock @@ -81,9 +81,9 @@ faker "^4.1.0" js-yaml "^3.10.0" -"@hashicorp/consul-api-double@^1.2.0": - version "1.3.0" - resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.3.0.tgz#fded48ca4db1e63c66e39b4433b2169b6add69ed" +"@hashicorp/consul-api-double@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@hashicorp/consul-api-double/-/consul-api-double-1.4.0.tgz#6b5222263f2acf1539d0e375c1a935d50217b9ab" "@hashicorp/ember-cli-api-double@^1.3.0": version "1.3.0"