Update client list to collapse statuses

ui/app/components/client-node-row.js

@@ -1,5 +1,6 @@
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
+import { computed } from '@ember/object';
 import { lazyClick } from '../helpers/lazy-click';
 import { watchRelationship } from 'nomad-ui/utils/properties/watch';
 import WithVisibilityDetection from 'nomad-ui/mixins/with-component-visibility-detection';
@@ -12,6 +13,11 @@ export default Component.extend(WithVisibilityDetection, {
 
   node: null,
 
+  statusTitle: computed('node.status', 'node.isDraining', 'node.isEligible', function() {
+    const node = this.node;
+    return `status: ${node.status}\ndraining: ${node.isDraining}\neligible: ${node.isEligible}`;
+  }),
+
   onClick() {},
 
   click(event) {

ui/app/controllers/clients/index.js

@@ -21,7 +21,6 @@ export default Controller.extend(Sortable, Searchable, {
     qpClass: 'class',
     qpStatus: 'status',
     qpDatacenter: 'dc',
-    qpFlags: 'flags',
   },
 
   currentPage: 1,
@@ -35,12 +34,10 @@ export default Controller.extend(Sortable, Searchable, {
   qpClass: '',
   qpStatus: '',
   qpDatacenter: '',
-  qpFlags: '',
 
   selectionClass: selection('qpClass'),
   selectionStatus: selection('qpStatus'),
   selectionDatacenter: selection('qpDatacenter'),
-  selectionFlags: selection('qpFlags'),
 
   optionsClass: computed('nodes.[]', function() {
     const classes = Array.from(new Set(this.nodes.mapBy('nodeClass'))).compact();
@@ -57,47 +54,42 @@ export default Controller.extend(Sortable, Searchable, {
     { key: 'initializing', label: 'Initializing' },
     { key: 'ready', label: 'Ready' },
     { key: 'down', label: 'Down' },
+    { key: 'ineligible', label: 'Ineligible' },
+    { key: 'draining', label: 'Draining' },
   ]),
 
   optionsDatacenter: computed('nodes.[]', function() {
     const datacenters = Array.from(new Set(this.nodes.mapBy('datacenter'))).compact();
 
     // Remove any invalid datacenters from the query param/selection
     scheduleOnce('actions', () => {
-      this.set(
-        'qpDatacenter',
-        serialize(intersection(datacenters, this.selectionDatacenter))
-      );
+      this.set('qpDatacenter', serialize(intersection(datacenters, this.selectionDatacenter)));
     });
 
     return datacenters.sort().map(dc => ({ key: dc, label: dc }));
   }),
 
-  optionsFlags: computed(() => [
-    { key: 'ineligible', label: 'Ineligible' },
-    { key: 'draining', label: 'Draining' },
-  ]),
-
   filteredNodes: computed(
     'nodes.[]',
     'selectionClass',
     'selectionStatus',
     'selectionDatacenter',
-    'selectionFlags',
     function() {
       const {
         selectionClass: classes,
         selectionStatus: statuses,
         selectionDatacenter: datacenters,
-        selectionFlags: flags,
       } = this;
 
-      const onlyIneligible = flags.includes('ineligible');
-      const onlyDraining = flags.includes('draining');
+      const onlyIneligible = statuses.includes('ineligible');
+      const onlyDraining = statuses.includes('draining');
+
+      // “flags” were formerly a separate filter, now combined with statuses
+      const trueStatuses = statuses.without('ineligible').without('draining');
 
       return this.nodes.filter(node => {
         if (classes.length && !classes.includes(node.get('nodeClass'))) return false;
-        if (statuses.length && !statuses.includes(node.get('status'))) return false;
+        if (trueStatuses.length && !trueStatuses.includes(node.get('status'))) return false;
         if (datacenters.length && !datacenters.includes(node.get('datacenter'))) return false;
 
         if (onlyIneligible && node.get('isEligible')) return false;

ui/app/styles/core/table.scss

@@ -86,6 +86,30 @@
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+
+      &.is-hover-overflowable {
+        position: relative;
+
+        .hover-overflow {
+          display: none;
+          position: absolute;
+          top: 0;
+          left: 0;
+          padding: calc(1.25em - 1px) 1.5em;
+        }
+
+        &:hover {
+          color: transparent;
+          overflow: visible;
+
+          .hover-overflow {
+            color: $text;
+            display: block;
+            background-color: rgba(255, 255, 255, 0.9);
+            border-right: 1px solid $grey-blue;
+          }
+        }
+      }
     }
 
     &.is-narrow {

ui/app/templates/clients/index.hbs

@@ -31,12 +31,6 @@
             options=optionsDatacenter
             selection=selectionDatacenter
             onSelect=(action setFacetQueryParam "qpDatacenter")}}
-          {{multi-select-dropdown
-            data-test-flags-facet
-            label="Flags"
-            options=optionsFlags
-            selection=selectionFlags
-            onSelect=(action setFacetQueryParam "qpFlags")}}
         </div>
       </div>
     </div>
@@ -54,8 +48,6 @@
           {{#t.sort-by prop="id"}}ID{{/t.sort-by}}
           {{#t.sort-by class="is-200px is-truncatable" prop="name"}}Name{{/t.sort-by}}
           {{#t.sort-by prop="status"}}Status{{/t.sort-by}}
-          {{#t.sort-by prop="isDraining"}}Drain{{/t.sort-by}}
-          {{#t.sort-by prop="schedulingEligibility"}}Eligibility{{/t.sort-by}}
           <th>Address</th>
           {{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}}
           <th># Allocs</th>

ui/app/templates/components/client-node-row.hbs

@@ -6,20 +6,17 @@
   {{/if}}
 </td>
 <td data-test-client-id>{{#link-to "clients.client" node.id class="is-primary"}}{{node.shortId}}{{/link-to}}</td>
-<td data-test-client-name class="is-200px is-truncatable" title="{{node.name}}">{{node.name}}</td>
-<td data-test-client-status>{{node.status}}</td>
-<td data-test-client-drain>
-  {{#if node.isDraining}}
-    <span class="status-text is-info">true</span>
-  {{else}}
-    false
-  {{/if}}
+<td class="is-200px is-truncatable is-hover-overflowable" title="{{node.name}}">
+  <span data-test-client-name>{{node.name}}</span>
+  <div class="hover-overflow" aria-hidden>{{node.name}}</div>
 </td>
-<td data-test-client-eligibility>
-  {{#if node.isEligible}}
-    {{node.schedulingEligibility}}
+<td data-test-client-status title={{statusTitle}}>
+  {{#if node.isDraining}}
+    <span class="status-text is-info">draining</span>
+  {{else if (not node.isEligible)}}
+    <span class="status-text is-warning">ineligible</span>
   {{else}}
-    <span class="status-text is-warning">{{node.schedulingEligibility}}</span>
+    {{node.status}}
   {{/if}}
 </td>
 <td data-test-client-address>{{node.httpAddr}}</td>

ui/mirage/scenarios/default.js

@@ -36,7 +36,40 @@ export default function(server) {
 
 function smallCluster(server) {
   server.createList('agent', 3);
-  server.createList('node', 5);
+
+  // server.createList('node', 5);
+  // FIXME data to exercise all permutations; remove before merging PR
+  server.create('node', {
+    modifyIndex: 4,
+    status: 'ready',
+    schedulingEligibility: 'eligible',
+    drain: false,
+  });
+  server.create('node', {
+    modifyIndex: 3,
+    status: 'initializing',
+    schedulingEligibility: 'eligible',
+    drain: false,
+  });
+  server.create('node', {
+    modifyIndex: 2,
+    status: 'down',
+    schedulingEligibility: 'eligible',
+    drain: false,
+  });
+  server.create('node', {
+    modifyIndex: 1,
+    status: 'ready',
+    schedulingEligibility: 'ineligible',
+    drain: false,
+  });
+  server.create('node', {
+    modifyIndex: 0,
+    status: 'ready',
+    schedulingEligibility: 'ineligible',
+    drain: true,
+  });
+
   server.createList('job', 5);
 }
 

ui/tests/acceptance/clients-list-test.js

@@ -4,11 +4,6 @@ import { setupApplicationTest } from 'ember-qunit';
 import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
 import ClientsList from 'nomad-ui/tests/pages/clients/list';
 
-function minimumSetup() {
-  server.createList('node', 1);
-  server.createList('agent', 1);
-}
-
 module('Acceptance | clients list', function(hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
@@ -34,8 +29,8 @@ module('Acceptance | clients list', function(hooks) {
   });
 
   test('each client record should show high-level info of the client', async function(assert) {
-    minimumSetup();
-    const node = server.db.nodes[0];
+    const node = server.create('node', 'draining');
+    server.createList('agent', 1);
 
     await ClientsList.visit();
 
@@ -44,16 +39,68 @@ module('Acceptance | clients list', function(hooks) {
 
     assert.equal(nodeRow.id, node.id.split('-')[0], 'ID');
     assert.equal(nodeRow.name, node.name, 'Name');
-    assert.equal(nodeRow.status, node.status, 'Status');
-    assert.equal(nodeRow.drain, node.drain + '', 'Draining');
-    assert.equal(nodeRow.eligibility, node.schedulingEligibility, 'Eligibility');
+    assert.equal(nodeRow.status.text, 'draining', 'Combined status, draining, and eligbility');
     assert.equal(nodeRow.address, node.httpAddr);
     assert.equal(nodeRow.datacenter, node.datacenter, 'Datacenter');
     assert.equal(nodeRow.allocations, allocations.length, '# Allocations');
   });
 
+  test('client status, draining, and eligibility are collapsed into one column', async function(assert) {
+    server.createList('agent', 1);
+
+    server.create('node', {
+      modifyIndex: 4,
+      status: 'ready',
+      schedulingEligibility: 'eligible',
+      drain: false,
+    });
+    server.create('node', {
+      modifyIndex: 3,
+      status: 'initializing',
+      schedulingEligibility: 'eligible',
+      drain: false,
+    });
+    server.create('node', {
+      modifyIndex: 2,
+      status: 'down',
+      schedulingEligibility: 'eligible',
+      drain: false,
+    });
+    server.create('node', {
+      modifyIndex: 1,
+      status: 'ready',
+      schedulingEligibility: 'ineligible',
+      drain: false,
+    });
+    server.create('node', {
+      modifyIndex: 0,
+      status: 'ready',
+      schedulingEligibility: 'ineligible',
+      drain: true,
+    });
+
+    await ClientsList.visit();
+
+    ClientsList.nodes[0].status.as(readyClient => {
+      assert.equal(readyClient.text, 'ready');
+      assert.ok(readyClient.isUnformatted, 'expected no status class');
+      assert.equal(readyClient.title, 'status: ready\ndraining: false\neligible: true');
+    });
+
+    assert.equal(ClientsList.nodes[1].status.text, 'initializing');
+    assert.equal(ClientsList.nodes[2].status.text, 'down');
+
+    assert.equal(ClientsList.nodes[3].status.text, 'ineligible');
+    assert.ok(ClientsList.nodes[3].status.isWarning, 'expected warning class');
+
+    assert.equal(ClientsList.nodes[4].status.text, 'draining');
+    assert.ok(ClientsList.nodes[4].status.isInfo, 'expected info class');
+  });
+
   test('each client should link to the client detail page', async function(assert) {
-    minimumSetup();
+    server.createList('node', 1);
+    server.createList('agent', 1);
+
     const node = server.db.nodes[0];
 
     await ClientsList.visit();
@@ -115,15 +162,27 @@ module('Acceptance | clients list', function(hooks) {
   testFacet('Status', {
     facet: ClientsList.facets.status,
     paramName: 'status',
-    expectedOptions: ['Initializing', 'Ready', 'Down'],
+    expectedOptions: ['Initializing', 'Ready', 'Down', 'Ineligible', 'Draining'],
     async beforeEach() {
       server.create('agent');
+
       server.createList('node', 2, { status: 'initializing' });
       server.createList('node', 2, { status: 'ready' });
       server.createList('node', 2, { status: 'down' });
+
+      server.createList('node', 2, { schedulingEligibility: 'eligible', drain: false });
+      server.createList('node', 2, { schedulingEligibility: 'ineligible', drain: false });
+      server.createList('node', 2, { schedulingEligibility: 'ineligible', drain: true });
+
       await ClientsList.visit();
     },
-    filter: (node, selection) => selection.includes(node.status),
+    filter: (node, selection) => {
+      if (selection.includes('draining') && !node.drain) return false;
+      if (selection.includes('ineligible') && node.schedulingEligibility === 'eligible')
+        return false;
+
+      return selection.includes(node.status);
+    },
   });
 
   testFacet('Datacenters', {
@@ -142,25 +201,6 @@ module('Acceptance | clients list', function(hooks) {
     filter: (node, selection) => selection.includes(node.datacenter),
   });
 
-  testFacet('Flags', {
-    facet: ClientsList.facets.flags,
-    paramName: 'flags',
-    expectedOptions: ['Ineligible', 'Draining'],
-    async beforeEach() {
-      server.create('agent');
-      server.createList('node', 2, { schedulingEligibility: 'eligible', drain: false });
-      server.createList('node', 2, { schedulingEligibility: 'ineligible', drain: false });
-      server.createList('node', 2, { schedulingEligibility: 'ineligible', drain: true });
-      await ClientsList.visit();
-    },
-    filter: (node, selection) => {
-      if (selection.includes('draining') && !node.drain) return false;
-      if (selection.includes('ineligible') && node.schedulingEligibility === 'eligible')
-        return false;
-      return true;
-    },
-  });
-
   test('when the facet selections result in no matches, the empty state states why', async function(assert) {
     server.create('agent');
     server.createList('node', 2, { status: 'ready' });