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

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

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;

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,

ui-v2/app/templates/components/catalog-filter.hbs

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

ui-v2/app/templates/dc/acls/index.hbs

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

ui-v2/app/templates/dc/intentions/index.hbs

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

ui-v2/app/templates/dc/nodes/index.hbs

@@ -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'}}

ui-v2/app/templates/dc/services/index.hbs

@@ -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'}}

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