Update client list to collapse statuses

ui/app/controllers/clients/index.js

@@ -19,9 +19,8 @@ export default Controller.extend(Sortable, Searchable, {
     sortProperty: 'sort',
     sortDescending: 'desc',
     qpClass: 'class',
-    qpStatus: 'status',
+    qpState: 'state',
     qpDatacenter: 'dc',
-    qpFlags: 'flags',
   },
 
   currentPage: 1,
@@ -33,14 +32,12 @@ export default Controller.extend(Sortable, Searchable, {
   searchProps: computed(() => ['id', 'name', 'datacenter']),
 
   qpClass: '',
-  qpStatus: '',
+  qpState: '',
   qpDatacenter: '',
-  qpFlags: '',
 
   selectionClass: selection('qpClass'),
-  selectionStatus: selection('qpStatus'),
+  selectionState: selection('qpState'),
   selectionDatacenter: selection('qpDatacenter'),
-  selectionFlags: selection('qpFlags'),
 
   optionsClass: computed('nodes.[]', function() {
     const classes = Array.from(new Set(this.nodes.mapBy('nodeClass'))).compact();
@@ -53,47 +50,42 @@ export default Controller.extend(Sortable, Searchable, {
     return classes.sort().map(dc => ({ key: dc, label: dc }));
   }),
 
-  optionsStatus: computed(() => [
+  optionsState: computed(() => [
     { 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',
+    'selectionState',
     'selectionDatacenter',
-    'selectionFlags',
     function() {
       const {
         selectionClass: classes,
-        selectionStatus: statuses,
+        selectionState: states,
         selectionDatacenter: datacenters,
-        selectionFlags: flags,
       } = this;
 
-      const onlyIneligible = flags.includes('ineligible');
-      const onlyDraining = flags.includes('draining');
+      const onlyIneligible = states.includes('ineligible');
+      const onlyDraining = states.includes('draining');
+
+      // states is a composite of node status and other node states
+      const statuses = states.without('ineligible').without('draining');
 
       return this.nodes.filter(node => {
         if (classes.length && !classes.includes(node.get('nodeClass'))) return false;

ui/app/styles/components/tooltip.scss

@@ -1,4 +1,4 @@
-.tooltip {
+.tooltip:hover {
   position: relative;
 }
 

ui/app/styles/core/table.scss

@@ -82,12 +82,6 @@
       width: 25%;
     }
 
-    &.is-truncatable {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
     &.is-narrow {
       padding: 1.25em 0 1.25em 0.5em;
 
@@ -99,9 +93,75 @@
 
     // Only use px modifiers when text needs to be truncated.
     // In this and only this scenario are percentages not effective.
-    &.is-200px {
-      width: 200px;
-      max-width: 200px;
+    &.is-300px {
+      width: 300px;
+      max-width: 300px;
+
+      &.is-truncatable {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &.is-revealable {
+          .revealed {
+            display: none;
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            padding: 1.25em 1.5em;
+          }
+
+          &:hover {
+            position: relative;
+
+            color: transparent;
+            overflow: visible;
+
+            .revealed {
+              color: $text;
+              display: block;
+              background-color: $white;
+              z-index: $z-zero;
+
+              $shadow-width: 8px;
+
+              &::before {
+                content: ' ';
+
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                width: 300px;
+
+                background: white;
+                z-index: $z-below;
+              }
+
+              &::after {
+                content: ' ';
+
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                right: -$shadow-width;
+                width: $shadow-width;
+
+                display: inline-block;
+                z-index: $z-below-below;
+
+                background: linear-gradient(
+                  90deg,
+                  $grey-blue 0%,
+                  rgba($grey-blue, 0.72) 10%,
+                  rgba($white, 0) 100%
+                );
+              }
+            }
+          }
+        }
+      }
     }
 
     @for $i from 1 through 11 {

ui/app/styles/utils/z-indices.scss

@@ -5,3 +5,7 @@ $z-gutter-backdrop: 219;
 $z-subnav: 200;
 $z-base: 100;
 $z-icon-decorators: 50;
+
+$z-zero: 0;
+$z-below: -1;
+$z-below-below: -2;

ui/app/templates/clients/index.hbs

@@ -20,23 +20,17 @@
             selection=selectionClass
             onSelect=(action setFacetQueryParam "qpClass")}}
           {{multi-select-dropdown
-            data-test-status-facet
-            label="Status"
-            options=optionsStatus
-            selection=selectionStatus
-            onSelect=(action setFacetQueryParam "qpStatus")}}
+            data-test-state-facet
+            label="State"
+            options=optionsState
+            selection=selectionState
+            onSelect=(action setFacetQueryParam "qpState")}}
           {{multi-select-dropdown
             data-test-datacenter-facet
             label="Datacenter"
             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>
@@ -52,11 +46,9 @@
         {{#t.head}}
           <th class="is-narrow"></th>
           {{#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 class="is-300px is-truncatable" prop="name"}}Name{{/t.sort-by}}
+          {{#t.sort-by prop="status"}}State{{/t.sort-by}}
+          <th class="is-300-px is-truncatable">Address</th>
           {{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}}
           <th># Allocs</th>
         {{/t.head}}

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

@@ -6,23 +6,25 @@
   {{/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-300px is-truncatable is-revealable" title="{{node.name}}">
+  <span data-test-client-name>{{node.name}}</span>
+  <div class="revealed" aria-hidden>{{node.name}}</div>
 </td>
-<td data-test-client-eligibility>
-  {{#if node.isEligible}}
-    {{node.schedulingEligibility}}
-  {{else}}
-    <span class="status-text is-warning">{{node.schedulingEligibility}}</span>
-  {{/if}}
+<td data-test-client-state>
+  <span class="tooltip" aria-label="{{node.status}} / {{if node.isDraining "draining" "not draining"}} / {{if node.isEligible "eligible" "not eligible"}}">
+    {{#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}}
+      {{node.status}}
+    {{/if}}
+  </span>
+</td>
+<td class="is-300px is-truncatable is-revealable">
+  <span data-test-client-address>{{node.httpAddr}}</span>
+  <div class="revealed" aria-hidden>{{node.httpAddr}}</div>
 </td>
-<td data-test-client-address>{{node.httpAddr}}</td>
 <td data-test-client-datacenter>{{node.datacenter}}</td>
 <td data-test-client-allocations>
   {{#if node.allocations.isPending}}

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