From 2e2e942f3fdf1b8f7b5f54d7e2afc00e5c4966d9 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 12 Jul 2018 13:36:47 +0100 Subject: [PATCH] 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 26710ca62..bd9f597cb 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 0884b5848..cec7398db 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 afa811ba1..b28d2070a 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 f01342413..c7b7b7f73 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 9527d094f..5dbadf0a7 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 cf9d9dc7a..4b3f9bcbf 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}}