From b1d5409d1cb5d3eae9bfd997fc2f428e0d8fad29 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Thu, 21 Feb 2019 13:57:13 +0000 Subject: [PATCH] UI: Service Numbers (#5348) Add totals to some listing views, remove healthcheck totals 1. Adds markup to render totals for Services, Nodes, Intentions and v1 ACLs 2. Removes counts from healthcheck filters, and therefore simplify text, moving the copy to the templates 3. Alter test to reflect the fact that the text of the buttons are no static in the component template rather than a dynamic attribute --- ui-v2/app/mixins/with-health-filtering.js | 37 ------------------- ui-v2/app/styles/components/app-view.scss | 3 ++ ui-v2/app/styles/core/typography.scss | 9 +++-- .../templates/components/catalog-filter.hbs | 7 +++- ui-v2/app/templates/dc/acls/index.hbs | 2 +- ui-v2/app/templates/dc/intentions/index.hbs | 2 +- ui-v2/app/templates/dc/nodes/index.hbs | 4 +- ui-v2/app/templates/dc/services/index.hbs | 4 +- .../components/catalog-filter-test.js | 14 +------ 9 files changed, 23 insertions(+), 59 deletions(-) diff --git a/ui-v2/app/mixins/with-health-filtering.js b/ui-v2/app/mixins/with-health-filtering.js index 06ad37826..ee2084689 100644 --- a/ui-v2/app/mixins/with-health-filtering.js +++ b/ui-v2/app/mixins/with-health-filtering.js @@ -1,25 +1,6 @@ import Mixin from '@ember/object/mixin'; import WithFiltering from 'consul-ui/mixins/with-filtering'; -import { computed, get } from '@ember/object'; -import ucfirst from 'consul-ui/utils/ucfirst'; -const countStatus = function(items, status) { - if (status === '') { - return get(items, 'length'); - } - const key = `Checks${ucfirst(status)}`; - return items.reduce(function(prev, item, i, arr) { - const num = get(item, key); - return ( - prev + - (typeof num !== 'undefined' - ? num - : get(item, 'Checks').filter(function(item) { - return item.Status === status; - }).length) || 0 - ); - }, 0); -}; export default Mixin.create(WithFiltering, { queryParams: { status: { @@ -29,22 +10,4 @@ export default Mixin.create(WithFiltering, { as: 'filter', }, }, - healthFilters: computed('items.[]', function() { - const items = get(this, 'items'); - const objs = ['', 'passing', 'warning', 'critical'].map(function(item) { - const count = countStatus(items, item); - return { - count: count, - label: `${item === '' ? 'All' : ucfirst(item)} (${count.toLocaleString()})`, - value: item, - }; - }); - objs[0].label = `All (${objs - .slice(1) - .reduce(function(prev, item, i, arr) { - return prev + item.count; - }, 0) - .toLocaleString()})`; - return objs; - }), }); diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss index 8b4c55975..2ddc65d21 100644 --- a/ui-v2/app/styles/components/app-view.scss +++ b/ui-v2/app/styles/components/app-view.scss @@ -18,6 +18,9 @@ main { %app-view h1 span { @extend %with-external-source-icon; } +%app-view h1 em { + color: $gray-600; +} %app-view header .actions a, %app-view header .actions button { @extend %button-compact; diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index bc945842a..5f01d4be8 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -61,12 +61,14 @@ main label a[rel*='help'], td:first-child em, %pill, %form-element > strong, -%healthchecked-resource strong { +%healthchecked-resource strong, +%app-view h1 em { font-weight: $typo-weight-normal; } %form-element > em, td:first-child em, -%healthchecked-resource header em { +%healthchecked-resource header em, +%app-view h1 em { font-style: normal; } %footer > * { @@ -76,7 +78,8 @@ h1 { font-size: $typo-header-100; } h2, -%header-drop-nav .is-active { +%header-drop-nav .is-active, +%app-view h1 em { font-size: $typo-size-500; } body, diff --git a/ui-v2/app/templates/components/catalog-filter.hbs b/ui-v2/app/templates/components/catalog-filter.hbs index 9d95acc25..5185b0921 100644 --- a/ui-v2/app/templates/components/catalog-filter.hbs +++ b/ui-v2/app/templates/components/catalog-filter.hbs @@ -1,4 +1,9 @@ {{!
}} {{freetext-filter searchable=searchable value=search placeholder="Search by name"}} - {{radio-group name="status" value=status items=filters onchange=(action onchange)}} + {{radio-group name="status" value=status items=(array + (hash label='All (Any Status)' value='' ) + (hash label='Critical Checks' value='critical') + (hash label='Warning Checks' value='warning') + (hash label='Passing Checks' value='passing') + ) onchange=(action onchange)}} {{!
}} diff --git a/ui-v2/app/templates/dc/acls/index.hbs b/ui-v2/app/templates/dc/acls/index.hbs index 3617db3c9..497ec5bff 100644 --- a/ui-v2/app/templates/dc/acls/index.hbs +++ b/ui-v2/app/templates/dc/acls/index.hbs @@ -4,7 +4,7 @@ {{/block-slot}} {{#block-slot 'header'}}

- ACL Tokens + ACL Tokens {{format-number items.length}} total

{{/block-slot}} diff --git a/ui-v2/app/templates/dc/intentions/index.hbs b/ui-v2/app/templates/dc/intentions/index.hbs index db4540389..b521d8b6e 100644 --- a/ui-v2/app/templates/dc/intentions/index.hbs +++ b/ui-v2/app/templates/dc/intentions/index.hbs @@ -4,7 +4,7 @@ {{/block-slot}} {{#block-slot 'header'}}

- Intentions + Intentions {{format-number items.length}} total

{{/block-slot}} diff --git a/ui-v2/app/templates/dc/nodes/index.hbs b/ui-v2/app/templates/dc/nodes/index.hbs index 0d9ca57ed..82d93a526 100644 --- a/ui-v2/app/templates/dc/nodes/index.hbs +++ b/ui-v2/app/templates/dc/nodes/index.hbs @@ -1,13 +1,13 @@ {{#app-view class="node list"}} {{#block-slot 'header'}}

- Nodes + Nodes {{format-number items.length}} total

{{/block-slot}} {{#block-slot 'toolbar'}} {{#if (gt items.length 0) }} - {{catalog-filter searchable=(array searchableHealthy searchableUnhealthy) filters=healthFilters search=s status=filters.status onchange=(action 'filter')}} + {{catalog-filter searchable=(array searchableHealthy searchableUnhealthy) search=s status=filters.status onchange=(action 'filter')}} {{/if}} {{/block-slot}} {{#block-slot 'content'}} diff --git a/ui-v2/app/templates/dc/services/index.hbs b/ui-v2/app/templates/dc/services/index.hbs index 7306ea10f..16f287eb4 100644 --- a/ui-v2/app/templates/dc/services/index.hbs +++ b/ui-v2/app/templates/dc/services/index.hbs @@ -5,13 +5,13 @@ {{/block-slot}} {{#block-slot 'header'}}

- Services + Services {{format-number items.length}} total

{{/block-slot}} {{#block-slot 'toolbar'}} {{#if (gt items.length 0) }} - {{catalog-filter searchable=searchable filters=healthFilters search=filters.s status=filters.status onchange=(action 'filter')}} + {{catalog-filter searchable=searchable search=filters.s status=filters.status onchange=(action 'filter')}} {{/if}} {{/block-slot}} {{#block-slot 'content'}} diff --git a/ui-v2/tests/integration/components/catalog-filter-test.js b/ui-v2/tests/integration/components/catalog-filter-test.js index e4ba4793f..df2e4fd75 100644 --- a/ui-v2/tests/integration/components/catalog-filter-test.js +++ b/ui-v2/tests/integration/components/catalog-filter-test.js @@ -11,22 +11,12 @@ test('it renders', function(assert) { this.render(hbs`{{catalog-filter}}`); - assert.equal( - this.$() - .text() - .trim(), - 'Search' - ); + assert.equal(this.$().find('form').length, 1); // Template block usage: this.render(hbs` {{#catalog-filter}}{{/catalog-filter}} `); - assert.equal( - this.$() - .text() - .trim(), - 'Search' - ); + assert.equal(this.$().find('form').length, 1); });