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
This commit is contained in:
John Cowen 2019-02-21 13:57:13 +00:00 committed by John Cowen
parent e0326c3b0a
commit b1d5409d1c
9 changed files with 23 additions and 59 deletions

View File

@ -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;
}),
});

View File

@ -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;

View File

@ -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,

View File

@ -1,4 +1,9 @@
{{!<form>}}
{{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)}}
{{!</form>}}

View File

@ -4,7 +4,7 @@
{{/block-slot}}
{{#block-slot 'header'}}
<h1>
ACL Tokens
ACL Tokens <em>{{format-number items.length}} total</em>
</h1>
<label for="toolbar-toggle"></label>
{{/block-slot}}

View File

@ -4,7 +4,7 @@
{{/block-slot}}
{{#block-slot 'header'}}
<h1>
Intentions
Intentions <em>{{format-number items.length}} total</em>
</h1>
<label for="toolbar-toggle"></label>
{{/block-slot}}

View File

@ -1,13 +1,13 @@
{{#app-view class="node list"}}
{{#block-slot 'header'}}
<h1>
Nodes
Nodes <em>{{format-number items.length}} total</em>
</h1>
<label for="toolbar-toggle"></label>
{{/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'}}

View File

@ -5,13 +5,13 @@
{{/block-slot}}
{{#block-slot 'header'}}
<h1>
Services
Services <em>{{format-number items.length}} total</em>
</h1>
<label for="toolbar-toggle"></label>
{{/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'}}

View File

@ -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);
});