From cf98ad33188e9072ed78096385b9f66c378e5ad2 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Thu, 6 Jun 2019 13:44:42 -0500 Subject: [PATCH 01/40] Update client list to show combined status This collapses the eligibility and draining attributes into the status. Draining takes precedence, then (in)eligibility; if neither of those is true, the status displays. Still to come: restoring colouring shown for draining and ineligibility, sorting, facets. --- ui/app/models/node.js | 10 ++++ ui/app/templates/clients/index.hbs | 2 - .../templates/components/client-node-row.hbs | 16 +----- ui/tests/acceptance/clients-list-test.js | 51 +++++++++++++++++-- ui/tests/pages/clients/list.js | 2 - 5 files changed, 57 insertions(+), 24 deletions(-) diff --git a/ui/app/models/node.js b/ui/app/models/node.js index 412548d3624..d9e4e583031 100644 --- a/ui/app/models/node.js +++ b/ui/app/models/node.js @@ -64,4 +64,14 @@ export default Model.extend({ compositeStatus: computed('status', 'isEligible', function() { return this.isEligible ? this.status : 'ineligible'; }), + + statusDrainEligibility: computed('status', 'isEligible', 'isDraining', function() { + if (this.isDraining) { + return 'draining'; + } else if (!this.isEligible) { + return 'ineligible'; + } else { + return this.status; + } + }), }); diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs index 22660802809..6f28cdb6eab 100644 --- a/ui/app/templates/clients/index.hbs +++ b/ui/app/templates/clients/index.hbs @@ -54,8 +54,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}} Address {{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}} # Allocs diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs index 21bf6597bef..7553d9053e3 100644 --- a/ui/app/templates/components/client-node-row.hbs +++ b/ui/app/templates/components/client-node-row.hbs @@ -7,21 +7,7 @@ {{#link-to "clients.client" node.id class="is-primary"}}{{node.shortId}}{{/link-to}} {{node.name}} -{{node.status}} - - {{#if node.isDraining}} - true - {{else}} - false - {{/if}} - - - {{#if node.isEligible}} - {{node.schedulingEligibility}} - {{else}} - {{node.schedulingEligibility}} - {{/if}} - +{{node.statusDrainEligibility}} {{node.httpAddr}} {{node.datacenter}} diff --git a/ui/tests/acceptance/clients-list-test.js b/ui/tests/acceptance/clients-list-test.js index 7a4bb50a9b1..a842764dcd0 100644 --- a/ui/tests/acceptance/clients-list-test.js +++ b/ui/tests/acceptance/clients-list-test.js @@ -34,8 +34,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,14 +44,55 @@ 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, '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(); + + assert.equal(ClientsList.nodes[0].status, 'ready'); + assert.equal(ClientsList.nodes[1].status, 'initializing'); + assert.equal(ClientsList.nodes[2].status, 'down'); + assert.equal(ClientsList.nodes[3].status, 'ineligible'); + assert.equal(ClientsList.nodes[4].status, 'draining'); + }); + test('each client should link to the client detail page', async function(assert) { minimumSetup(); const node = server.db.nodes[0]; diff --git a/ui/tests/pages/clients/list.js b/ui/tests/pages/clients/list.js index 2945dd0cff0..5acd46048a9 100644 --- a/ui/tests/pages/clients/list.js +++ b/ui/tests/pages/clients/list.js @@ -19,8 +19,6 @@ export default create({ id: text('[data-test-client-id]'), name: text('[data-test-client-name]'), status: text('[data-test-client-status]'), - drain: text('[data-test-client-drain]'), - eligibility: text('[data-test-client-eligibility]'), address: text('[data-test-client-address]'), datacenter: text('[data-test-client-datacenter]'), allocations: text('[data-test-client-allocations]'), From 04c9745973cd41abe55d2a0b3823c3e49f9efad2 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Thu, 6 Jun 2019 14:19:50 -0500 Subject: [PATCH 02/40] Restore colouring for node status differences Using assert.ok without ember-qunit-nice-errors calls for explanatory strings. --- ui/app/models/node.js | 10 ---------- .../templates/components/client-node-row.hbs | 10 +++++++++- ui/tests/acceptance/clients-list-test.js | 18 ++++++++++++------ ui/tests/pages/clients/list.js | 12 +++++++++++- 4 files changed, 32 insertions(+), 18 deletions(-) diff --git a/ui/app/models/node.js b/ui/app/models/node.js index d9e4e583031..412548d3624 100644 --- a/ui/app/models/node.js +++ b/ui/app/models/node.js @@ -64,14 +64,4 @@ export default Model.extend({ compositeStatus: computed('status', 'isEligible', function() { return this.isEligible ? this.status : 'ineligible'; }), - - statusDrainEligibility: computed('status', 'isEligible', 'isDraining', function() { - if (this.isDraining) { - return 'draining'; - } else if (!this.isEligible) { - return 'ineligible'; - } else { - return this.status; - } - }), }); diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs index 7553d9053e3..9c9edc8e2b4 100644 --- a/ui/app/templates/components/client-node-row.hbs +++ b/ui/app/templates/components/client-node-row.hbs @@ -7,7 +7,15 @@ {{#link-to "clients.client" node.id class="is-primary"}}{{node.shortId}}{{/link-to}} {{node.name}} -{{node.statusDrainEligibility}} + + {{#if node.isDraining}} + draining + {{else if (not node.isEligible)}} + ineligible + {{else}} + {{node.status}} + {{/if}} + {{node.httpAddr}} {{node.datacenter}} diff --git a/ui/tests/acceptance/clients-list-test.js b/ui/tests/acceptance/clients-list-test.js index a842764dcd0..f47b96fdd8b 100644 --- a/ui/tests/acceptance/clients-list-test.js +++ b/ui/tests/acceptance/clients-list-test.js @@ -44,7 +44,7 @@ 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, 'draining', 'Combined status, draining, and eligbility'); + 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'); @@ -86,11 +86,17 @@ module('Acceptance | clients list', function(hooks) { await ClientsList.visit(); - assert.equal(ClientsList.nodes[0].status, 'ready'); - assert.equal(ClientsList.nodes[1].status, 'initializing'); - assert.equal(ClientsList.nodes[2].status, 'down'); - assert.equal(ClientsList.nodes[3].status, 'ineligible'); - assert.equal(ClientsList.nodes[4].status, 'draining'); + assert.equal(ClientsList.nodes[0].status.text, 'ready'); + assert.ok(ClientsList.nodes[0].status.isUnformatted, 'expected no status class'); + + 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) { diff --git a/ui/tests/pages/clients/list.js b/ui/tests/pages/clients/list.js index 5acd46048a9..2e60399b0df 100644 --- a/ui/tests/pages/clients/list.js +++ b/ui/tests/pages/clients/list.js @@ -3,6 +3,8 @@ import { collection, clickable, fillable, + hasClass, + isHidden, isPresent, text, visitable, @@ -18,7 +20,15 @@ export default create({ nodes: collection('[data-test-client-node-row]', { id: text('[data-test-client-id]'), name: text('[data-test-client-name]'), - status: text('[data-test-client-status]'), + + status: { + scope: '[data-test-client-status]', + + isInfo: hasClass('is-info', '.status-text'), + isWarning: hasClass('is-warning', '.status-text'), + isUnformatted: isHidden('.status-text'), + }, + address: text('[data-test-client-address]'), datacenter: text('[data-test-client-datacenter]'), allocations: text('[data-test-client-allocations]'), From 74166157b682c9f789454bb1bf7ad20f4bae2049 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 7 Jun 2019 10:26:33 -0500 Subject: [PATCH 03/40] Add empty commit From 74e9cda92c95f082fe16f90e3122e534cc6a84eb Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 7 Jun 2019 13:24:57 -0500 Subject: [PATCH 04/40] Remove no-longer-shared function --- ui/tests/acceptance/clients-list-test.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/ui/tests/acceptance/clients-list-test.js b/ui/tests/acceptance/clients-list-test.js index f47b96fdd8b..8c9686cfe1c 100644 --- a/ui/tests/acceptance/clients-list-test.js +++ b/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); @@ -100,7 +95,9 @@ module('Acceptance | clients list', function(hooks) { }); 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(); From 1db5d793bdbabd713f3e581bfe78be4d621f1e3c Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 7 Jun 2019 13:35:51 -0500 Subject: [PATCH 05/40] Add title to status field to show its components --- ui/app/components/client-node-row.js | 6 ++++++ ui/app/templates/components/client-node-row.hbs | 2 +- ui/tests/acceptance/clients-list-test.js | 7 +++++-- ui/tests/pages/clients/list.js | 3 +++ 4 files changed, 15 insertions(+), 3 deletions(-) diff --git a/ui/app/components/client-node-row.js b/ui/app/components/client-node-row.js index 947ae6e9a82..6d0eff014a9 100644 --- a/ui/app/components/client-node-row.js +++ b/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) { diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs index 9c9edc8e2b4..6ab15eee90a 100644 --- a/ui/app/templates/components/client-node-row.hbs +++ b/ui/app/templates/components/client-node-row.hbs @@ -7,7 +7,7 @@ {{#link-to "clients.client" node.id class="is-primary"}}{{node.shortId}}{{/link-to}} {{node.name}} - + {{#if node.isDraining}} draining {{else if (not node.isEligible)}} diff --git a/ui/tests/acceptance/clients-list-test.js b/ui/tests/acceptance/clients-list-test.js index 8c9686cfe1c..1edf630715e 100644 --- a/ui/tests/acceptance/clients-list-test.js +++ b/ui/tests/acceptance/clients-list-test.js @@ -81,8 +81,11 @@ module('Acceptance | clients list', function(hooks) { await ClientsList.visit(); - assert.equal(ClientsList.nodes[0].status.text, 'ready'); - assert.ok(ClientsList.nodes[0].status.isUnformatted, 'expected no status class'); + 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'); diff --git a/ui/tests/pages/clients/list.js b/ui/tests/pages/clients/list.js index 2e60399b0df..b411817e5d5 100644 --- a/ui/tests/pages/clients/list.js +++ b/ui/tests/pages/clients/list.js @@ -1,4 +1,5 @@ import { + attribute, create, collection, clickable, @@ -24,6 +25,8 @@ export default create({ status: { scope: '[data-test-client-status]', + title: attribute('title'), + isInfo: hasClass('is-info', '.status-text'), isWarning: hasClass('is-warning', '.status-text'), isUnformatted: isHidden('.status-text'), From fba9fe63f9f0135f4d724734336c7bbfc20b23bb Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 7 Jun 2019 14:51:32 -0500 Subject: [PATCH 06/40] Update name to fully show on hover This is hackish but functional, can be refined or abandoned depending on feedback. --- ui/app/styles/core/table.scss | 25 +++++++++++++++++++ .../templates/components/client-node-row.hbs | 5 +++- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 0cd6a925db0..e03358cb0dd 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -86,6 +86,31 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + + // TODO questionable name? + &.is-hover-overflowable { + position: relative; + + .show-on-hover { + display: none; + position: absolute; + top: 0; + left: 0; + // FIXME this should be the same as the cell but it was coming out to 10.5px šŸ¤” + padding: 17px 1.5em; + } + + &:hover { + color: transparent; + overflow: visible; + + .show-on-hover { + color: black; + display: block; + background-color: rgba(255, 255, 255, 0.9); + } + } + } } &.is-narrow { diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs index 6ab15eee90a..6c050b0284d 100644 --- a/ui/app/templates/components/client-node-row.hbs +++ b/ui/app/templates/components/client-node-row.hbs @@ -6,7 +6,10 @@ {{/if}} {{#link-to "clients.client" node.id class="is-primary"}}{{node.shortId}}{{/link-to}} -{{node.name}} + + {{node.name}} +
{{node.name}}
+ {{#if node.isDraining}} draining From 0da1b4e2a9e2a3e09b69834128d91f717e2d561b Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 10 Jun 2019 11:19:39 -0500 Subject: [PATCH 07/40] Add scenario override for demonstration --- ui/mirage/scenarios/default.js | 35 +++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/ui/mirage/scenarios/default.js b/ui/mirage/scenarios/default.js index d80b5d276ea..5f8c0564d40 100644 --- a/ui/mirage/scenarios/default.js +++ b/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); } From 6e36a6e293a71bb8248859630ca882410144a548 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 10 Jun 2019 11:20:43 -0500 Subject: [PATCH 08/40] Add border at edge of hover-showing element --- ui/app/styles/core/table.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index e03358cb0dd..b6de364f8be 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -108,6 +108,7 @@ color: black; display: block; background-color: rgba(255, 255, 255, 0.9); + border-right: 1px solid $grey-blue; } } } From fcdf55509b494999f42567de7a3b975ae7995660 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 10 Jun 2019 11:22:02 -0500 Subject: [PATCH 09/40] Change overflowed text colour to standard --- ui/app/styles/core/table.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index b6de364f8be..98a3f13ca29 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -105,7 +105,7 @@ overflow: visible; .show-on-hover { - color: black; + color: $text; display: block; background-color: rgba(255, 255, 255, 0.9); border-right: 1px solid $grey-blue; From 6972740fc0bb0d72c37b4fb24c7b3e358eb8a3e3 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 10 Jun 2019 12:48:28 -0500 Subject: [PATCH 10/40] Move flags filters into status list Now that the ineligible and draining columns are collapsed into the status column, it seems a bit confusing to have them in a separate facet. But is it also confusing to have them undifferentiated in the status facet? This is easily removed, if so. --- ui/app/controllers/clients/index.js | 27 +++++------- ui/app/templates/clients/index.hbs | 6 --- ui/tests/acceptance/clients-list-test.js | 52 +++++++++++++++--------- ui/tests/pages/clients/list.js | 1 - 4 files changed, 42 insertions(+), 44 deletions(-) diff --git a/ui/app/controllers/clients/index.js b/ui/app/controllers/clients/index.js index bc27b69a769..50ab1b07644 100644 --- a/ui/app/controllers/clients/index.js +++ b/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,6 +54,8 @@ 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() { @@ -64,40 +63,34 @@ export default Controller.extend(Sortable, Searchable, { // 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 statusesWithoutFlags = 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 (statusesWithoutFlags.length && !statusesWithoutFlags.includes(node.get('status'))) + return false; if (datacenters.length && !datacenters.includes(node.get('datacenter'))) return false; if (onlyIneligible && node.get('isEligible')) return false; diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs index 6f28cdb6eab..b22a4245baa 100644 --- a/ui/app/templates/clients/index.hbs +++ b/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")}} diff --git a/ui/tests/acceptance/clients-list-test.js b/ui/tests/acceptance/clients-list-test.js index 1edf630715e..454b25593db 100644 --- a/ui/tests/acceptance/clients-list-test.js +++ b/ui/tests/acceptance/clients-list-test.js @@ -162,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', { @@ -189,24 +201,24 @@ 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; - }, - }); + // 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'); diff --git a/ui/tests/pages/clients/list.js b/ui/tests/pages/clients/list.js index b411817e5d5..aaed078a419 100644 --- a/ui/tests/pages/clients/list.js +++ b/ui/tests/pages/clients/list.js @@ -58,6 +58,5 @@ export default create({ class: facet('[data-test-class-facet]'), status: facet('[data-test-status-facet]'), datacenter: facet('[data-test-datacenter-facet]'), - flags: facet('[data-test-flags-facet]'), }, }); From 0c23494b27744383d8b924d6584fc4297289f866 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 10 Jun 2019 15:23:27 -0500 Subject: [PATCH 11/40] Restore autofixed line From afd67160302b52acfd0bc5c69834b7610e63be1f Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 10 Jun 2019 15:25:19 -0500 Subject: [PATCH 12/40] Remove commented-out tests --- ui/tests/acceptance/clients-list-test.js | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/ui/tests/acceptance/clients-list-test.js b/ui/tests/acceptance/clients-list-test.js index 454b25593db..4fd5ff45253 100644 --- a/ui/tests/acceptance/clients-list-test.js +++ b/ui/tests/acceptance/clients-list-test.js @@ -201,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' }); From ffac3d79e0cd9dd4ffc7027c7746720ae5e53793 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 10 Jun 2019 15:26:26 -0500 Subject: [PATCH 13/40] Rename statuses-only variable --- ui/app/controllers/clients/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/ui/app/controllers/clients/index.js b/ui/app/controllers/clients/index.js index 50ab1b07644..f76010ce375 100644 --- a/ui/app/controllers/clients/index.js +++ b/ui/app/controllers/clients/index.js @@ -85,12 +85,11 @@ export default Controller.extend(Sortable, Searchable, { const onlyDraining = statuses.includes('draining'); // ā€œflagsā€ were formerly a separate filter, now combined with statuses - const statusesWithoutFlags = statuses.without('ineligible').without('draining'); + const trueStatuses = statuses.without('ineligible').without('draining'); return this.nodes.filter(node => { if (classes.length && !classes.includes(node.get('nodeClass'))) return false; - if (statusesWithoutFlags.length && !statusesWithoutFlags.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; From 778af842d99113a2304da5deda6d07856a61e47b Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 10 Jun 2019 16:02:16 -0500 Subject: [PATCH 14/40] Fix padding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 0.75 wasnā€™t working because it was from td rather than tbody td. Without the unsightly calc, the background overlaps with the border of the next row. šŸ¤Ø --- ui/app/styles/core/table.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 98a3f13ca29..6460cec6382 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -96,8 +96,7 @@ position: absolute; top: 0; left: 0; - // FIXME this should be the same as the cell but it was coming out to 10.5px šŸ¤” - padding: 17px 1.5em; + padding: calc(1.25em - 1px) 1.5em; } &:hover { From c1cd14251a9374ee462f568fa849bb842b8d9088 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 10 Jun 2019 16:03:45 -0500 Subject: [PATCH 15/40] Change name of overflow container --- ui/app/styles/core/table.scss | 4 ++-- ui/app/templates/components/client-node-row.hbs | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 6460cec6382..ea3193b857c 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -91,7 +91,7 @@ &.is-hover-overflowable { position: relative; - .show-on-hover { + .hover-overflow { display: none; position: absolute; top: 0; @@ -103,7 +103,7 @@ color: transparent; overflow: visible; - .show-on-hover { + .hover-overflow { color: $text; display: block; background-color: rgba(255, 255, 255, 0.9); diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs index 6c050b0284d..cef9770af1b 100644 --- a/ui/app/templates/components/client-node-row.hbs +++ b/ui/app/templates/components/client-node-row.hbs @@ -8,7 +8,7 @@ {{#link-to "clients.client" node.id class="is-primary"}}{{node.shortId}}{{/link-to}} {{node.name}} -
{{node.name}}
+
{{node.name}}
{{#if node.isDraining}} From 387de5d368bb528049be74100226996fe1cd4434 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 10 Jun 2019 16:04:04 -0500 Subject: [PATCH 16/40] Remove TODO MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I guess itā€™s okayā€¦??? --- ui/app/styles/core/table.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index ea3193b857c..84c05c2534b 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -87,7 +87,6 @@ text-overflow: ellipsis; white-space: nowrap; - // TODO questionable name? &.is-hover-overflowable { position: relative; From 0693748a831c8c0eced10795ac889831fa1450bc Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Mon, 10 Jun 2019 15:23:27 -0500 Subject: [PATCH 17/40] Remove transparency from background --- ui/app/styles/core/table.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 84c05c2534b..4fadaaa0748 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -105,7 +105,7 @@ .hover-overflow { color: $text; display: block; - background-color: rgba(255, 255, 255, 0.9); + background-color: $white; border-right: 1px solid $grey-blue; } } From 798b0f82ff935ecd00899abb731a7ed12556ab74 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 09:29:23 -0500 Subject: [PATCH 18/40] Rename hover-reveal classes --- ui/app/styles/core/table.scss | 6 +++--- ui/app/templates/components/client-node-row.hbs | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 4fadaaa0748..96af5d79ecb 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -87,10 +87,10 @@ text-overflow: ellipsis; white-space: nowrap; - &.is-hover-overflowable { + &.is-revealable { position: relative; - .hover-overflow { + .revealed { display: none; position: absolute; top: 0; @@ -102,7 +102,7 @@ color: transparent; overflow: visible; - .hover-overflow { + .revealed { color: $text; display: block; background-color: $white; diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs index cef9770af1b..01ea3e3962b 100644 --- a/ui/app/templates/components/client-node-row.hbs +++ b/ui/app/templates/components/client-node-row.hbs @@ -6,9 +6,9 @@ {{/if}} {{#link-to "clients.client" node.id class="is-primary"}}{{node.shortId}}{{/link-to}} - + {{node.name}} -
{{node.name}}
+
{{node.name}}
{{#if node.isDraining}} From c22aa41c07f72d632bbc855fe6f2230ed73a05b1 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 09:49:39 -0500 Subject: [PATCH 19/40] Change revealable border to gradient --- ui/app/styles/core/table.scss | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 96af5d79ecb..af0e0e9ff15 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -106,7 +106,27 @@ color: $text; display: block; background-color: $white; - border-right: 1px solid $grey-blue; + + $shadow-width: 8px; + + &::after { + content: ' '; + + position: absolute; + top: 0; + bottom: 0; + right: -$shadow-width; + + display: inline-block; + + background: linear-gradient( + to right, + $grey-blue 0%, + rgba($grey-blue, 184) 20%, + rgba(0, 0, 0, 0) 100% + ); + width: $shadow-width; + } } } } From 4f32c5e5981a29b3934b9fefcde5342108e7f810 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 09:51:15 -0500 Subject: [PATCH 20/40] Fix height of revealable shadow --- ui/app/styles/core/table.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index af0e0e9ff15..1ed616c3196 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -95,6 +95,7 @@ position: absolute; top: 0; left: 0; + bottom: 0; padding: calc(1.25em - 1px) 1.5em; } From 046f464238cb49f2db9345661c7f30df30731031 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 10:39:15 -0500 Subject: [PATCH 21/40] Change name of composite status to state --- ui/app/components/client-node-row.js | 2 +- ui/app/controllers/clients/index.js | 20 +++++++++---------- ui/app/templates/clients/index.hbs | 10 +++++----- .../templates/components/client-node-row.hbs | 2 +- ui/tests/pages/clients/list.js | 2 +- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/ui/app/components/client-node-row.js b/ui/app/components/client-node-row.js index 6d0eff014a9..5b361290422 100644 --- a/ui/app/components/client-node-row.js +++ b/ui/app/components/client-node-row.js @@ -13,7 +13,7 @@ export default Component.extend(WithVisibilityDetection, { node: null, - statusTitle: computed('node.status', 'node.isDraining', 'node.isEligible', function() { + stateTitle: computed('node.status', 'node.isDraining', 'node.isEligible', function() { const node = this.node; return `status: ${node.status}\ndraining: ${node.isDraining}\neligible: ${node.isEligible}`; }), diff --git a/ui/app/controllers/clients/index.js b/ui/app/controllers/clients/index.js index f76010ce375..ae6cc451e0f 100644 --- a/ui/app/controllers/clients/index.js +++ b/ui/app/controllers/clients/index.js @@ -19,7 +19,7 @@ export default Controller.extend(Sortable, Searchable, { sortProperty: 'sort', sortDescending: 'desc', qpClass: 'class', - qpStatus: 'status', + qpState: 'state', qpDatacenter: 'dc', }, @@ -32,11 +32,11 @@ export default Controller.extend(Sortable, Searchable, { searchProps: computed(() => ['id', 'name', 'datacenter']), qpClass: '', - qpStatus: '', + qpState: '', qpDatacenter: '', selectionClass: selection('qpClass'), - selectionStatus: selection('qpStatus'), + selectionState: selection('qpState'), selectionDatacenter: selection('qpDatacenter'), optionsClass: computed('nodes.[]', function() { @@ -50,7 +50,7 @@ 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' }, @@ -72,24 +72,24 @@ export default Controller.extend(Sortable, Searchable, { filteredNodes: computed( 'nodes.[]', 'selectionClass', - 'selectionStatus', + 'selectionState', 'selectionDatacenter', function() { const { selectionClass: classes, - selectionStatus: statuses, + selectionState: states, selectionDatacenter: datacenters, } = this; - const onlyIneligible = statuses.includes('ineligible'); - const onlyDraining = statuses.includes('draining'); + const onlyIneligible = states.includes('ineligible'); + const onlyDraining = states.includes('draining'); // ā€œflagsā€ were formerly a separate filter, now combined with statuses - const trueStatuses = statuses.without('ineligible').without('draining'); + const statuses = states.without('ineligible').without('draining'); return this.nodes.filter(node => { if (classes.length && !classes.includes(node.get('nodeClass'))) return false; - if (trueStatuses.length && !trueStatuses.includes(node.get('status'))) return false; + if (statuses.length && !statuses.includes(node.get('status'))) return false; if (datacenters.length && !datacenters.includes(node.get('datacenter'))) return false; if (onlyIneligible && node.get('isEligible')) return false; diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs index b22a4245baa..11a86fd4793 100644 --- a/ui/app/templates/clients/index.hbs +++ b/ui/app/templates/clients/index.hbs @@ -20,11 +20,11 @@ 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" diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs index 01ea3e3962b..e762e5f1141 100644 --- a/ui/app/templates/components/client-node-row.hbs +++ b/ui/app/templates/components/client-node-row.hbs @@ -10,7 +10,7 @@ {{node.name}}
{{node.name}}
- + {{#if node.isDraining}} draining {{else if (not node.isEligible)}} diff --git a/ui/tests/pages/clients/list.js b/ui/tests/pages/clients/list.js index aaed078a419..9472ab4aa82 100644 --- a/ui/tests/pages/clients/list.js +++ b/ui/tests/pages/clients/list.js @@ -56,7 +56,7 @@ export default create({ facets: { class: facet('[data-test-class-facet]'), - status: facet('[data-test-status-facet]'), + states: facet('[data-test-state-facet]'), datacenter: facet('[data-test-datacenter-facet]'), }, }); From f6f91974330a04680be0f63c46e0086e574fd30e Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 10:40:59 -0500 Subject: [PATCH 22/40] Update comment to remove historic reference --- ui/app/controllers/clients/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/controllers/clients/index.js b/ui/app/controllers/clients/index.js index ae6cc451e0f..ea4bd6d2cc7 100644 --- a/ui/app/controllers/clients/index.js +++ b/ui/app/controllers/clients/index.js @@ -84,7 +84,7 @@ export default Controller.extend(Sortable, Searchable, { const onlyIneligible = states.includes('ineligible'); const onlyDraining = states.includes('draining'); - // ā€œflagsā€ were formerly a separate filter, now combined with statuses + // states is a composite of node status and other node states const statuses = states.without('ineligible').without('draining'); return this.nodes.filter(node => { From 0d11c06a919c59756ee13a7665c8aa99eae83da9 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 10:42:22 -0500 Subject: [PATCH 23/40] Change name width to 300px --- ui/app/styles/core/table.scss | 6 +++--- ui/app/templates/clients/index.hbs | 2 +- ui/app/templates/components/client-node-row.hbs | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 1ed616c3196..6b815844369 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -144,9 +144,9 @@ // 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; } @for $i from 1 through 11 { diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs index 11a86fd4793..b5cbced9cd5 100644 --- a/ui/app/templates/clients/index.hbs +++ b/ui/app/templates/clients/index.hbs @@ -46,7 +46,7 @@ {{#t.head}} {{#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 class="is-300px is-truncatable" prop="name"}}Name{{/t.sort-by}} {{#t.sort-by prop="status"}}Status{{/t.sort-by}} Address {{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}} diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs index e762e5f1141..b81bea40022 100644 --- a/ui/app/templates/components/client-node-row.hbs +++ b/ui/app/templates/components/client-node-row.hbs @@ -6,7 +6,7 @@ {{/if}} {{#link-to "clients.client" node.id class="is-primary"}}{{node.shortId}}{{/link-to}} - + {{node.name}}
{{node.name}}
From 02c17294a651d17fc112f5a054e7bd1004cf2e2e Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 10:44:09 -0500 Subject: [PATCH 24/40] Change address column to be truncatable --- ui/app/templates/clients/index.hbs | 2 +- ui/app/templates/components/client-node-row.hbs | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs index b5cbced9cd5..2b3ebb5e58d 100644 --- a/ui/app/templates/clients/index.hbs +++ b/ui/app/templates/clients/index.hbs @@ -48,7 +48,7 @@ {{#t.sort-by prop="id"}}ID{{/t.sort-by}} {{#t.sort-by class="is-300px is-truncatable" prop="name"}}Name{{/t.sort-by}} {{#t.sort-by prop="status"}}Status{{/t.sort-by}} - Address + Address {{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}} # Allocs {{/t.head}} diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs index b81bea40022..3293811b657 100644 --- a/ui/app/templates/components/client-node-row.hbs +++ b/ui/app/templates/components/client-node-row.hbs @@ -19,7 +19,10 @@ {{node.status}} {{/if}} -{{node.httpAddr}} + + {{node.httpAddr}} +
{{node.httpAddr}}
+ {{node.datacenter}} {{#if node.allocations.isPending}} From 980af211cde768ba96baa2ef59ead32c5008712e Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 11:07:27 -0500 Subject: [PATCH 25/40] Fix tests for state facet MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The test server apparently wasnā€™t updating anymoreā€¦?? --- ui/tests/acceptance/clients-list-test.js | 26 ++++++++++++------------ ui/tests/pages/clients/list.js | 6 +++--- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/ui/tests/acceptance/clients-list-test.js b/ui/tests/acceptance/clients-list-test.js index 4fd5ff45253..a19e7447b48 100644 --- a/ui/tests/acceptance/clients-list-test.js +++ b/ui/tests/acceptance/clients-list-test.js @@ -39,7 +39,7 @@ 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.text, 'draining', 'Combined status, draining, and eligbility'); + assert.equal(nodeRow.state.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'); @@ -81,20 +81,20 @@ module('Acceptance | clients list', function(hooks) { await ClientsList.visit(); - ClientsList.nodes[0].status.as(readyClient => { + ClientsList.nodes[0].state.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[1].state.text, 'initializing'); + assert.equal(ClientsList.nodes[2].state.text, 'down'); - assert.equal(ClientsList.nodes[3].status.text, 'ineligible'); - assert.ok(ClientsList.nodes[3].status.isWarning, 'expected warning class'); + assert.equal(ClientsList.nodes[3].state.text, 'ineligible'); + assert.ok(ClientsList.nodes[3].state.isWarning, 'expected warning class'); - assert.equal(ClientsList.nodes[4].status.text, 'draining'); - assert.ok(ClientsList.nodes[4].status.isInfo, 'expected info class'); + assert.equal(ClientsList.nodes[4].state.text, 'draining'); + assert.ok(ClientsList.nodes[4].state.isInfo, 'expected info class'); }); test('each client should link to the client detail page', async function(assert) { @@ -159,9 +159,9 @@ module('Acceptance | clients list', function(hooks) { filter: (node, selection) => selection.includes(node.nodeClass), }); - testFacet('Status', { - facet: ClientsList.facets.status, - paramName: 'status', + testFacet('State', { + facet: ClientsList.facets.state, + paramName: 'state', expectedOptions: ['Initializing', 'Ready', 'Down', 'Ineligible', 'Draining'], async beforeEach() { server.create('agent'); @@ -207,8 +207,8 @@ module('Acceptance | clients list', function(hooks) { await ClientsList.visit(); - await ClientsList.facets.status.toggle(); - await ClientsList.facets.status.options.objectAt(0).toggle(); + await ClientsList.facets.state.toggle(); + await ClientsList.facets.state.options.objectAt(0).toggle(); assert.ok(ClientsList.isEmpty, 'There is an empty message'); assert.equal(ClientsList.empty.headline, 'No Matches', 'The message is appropriate'); }); diff --git a/ui/tests/pages/clients/list.js b/ui/tests/pages/clients/list.js index 9472ab4aa82..f7ffb11be04 100644 --- a/ui/tests/pages/clients/list.js +++ b/ui/tests/pages/clients/list.js @@ -22,8 +22,8 @@ export default create({ id: text('[data-test-client-id]'), name: text('[data-test-client-name]'), - status: { - scope: '[data-test-client-status]', + state: { + scope: '[data-test-client-state]', title: attribute('title'), @@ -56,7 +56,7 @@ export default create({ facets: { class: facet('[data-test-class-facet]'), - states: facet('[data-test-state-facet]'), + state: facet('[data-test-state-facet]'), datacenter: facet('[data-test-datacenter-facet]'), }, }); From 80c6f143ec1f2b7196cfbab221989374ad1321a7 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 11:21:20 -0500 Subject: [PATCH 26/40] Change composite state title to tooltip MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Thereā€™s some z-index hideousness to address here, but Iā€™ll do that separately. --- ui/app/components/client-node-row.js | 6 ------ .../templates/components/client-node-row.hbs | 18 ++++++++++-------- ui/tests/acceptance/clients-list-test.js | 2 +- ui/tests/pages/clients/list.js | 2 +- 4 files changed, 12 insertions(+), 16 deletions(-) diff --git a/ui/app/components/client-node-row.js b/ui/app/components/client-node-row.js index 5b361290422..947ae6e9a82 100644 --- a/ui/app/components/client-node-row.js +++ b/ui/app/components/client-node-row.js @@ -1,6 +1,5 @@ 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'; @@ -13,11 +12,6 @@ export default Component.extend(WithVisibilityDetection, { node: null, - stateTitle: 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) { diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs index 3293811b657..3558f56600e 100644 --- a/ui/app/templates/components/client-node-row.hbs +++ b/ui/app/templates/components/client-node-row.hbs @@ -10,14 +10,16 @@ {{node.name}}
{{node.name}}
- - {{#if node.isDraining}} - draining - {{else if (not node.isEligible)}} - ineligible - {{else}} - {{node.status}} - {{/if}} + + + {{#if node.isDraining}} + draining + {{else if (not node.isEligible)}} + ineligible + {{else}} + {{node.status}} + {{/if}} + {{node.httpAddr}} diff --git a/ui/tests/acceptance/clients-list-test.js b/ui/tests/acceptance/clients-list-test.js index a19e7447b48..1a746449cad 100644 --- a/ui/tests/acceptance/clients-list-test.js +++ b/ui/tests/acceptance/clients-list-test.js @@ -84,7 +84,7 @@ module('Acceptance | clients list', function(hooks) { ClientsList.nodes[0].state.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(readyClient.tooltip, 'ready / not draining / eligible'); }); assert.equal(ClientsList.nodes[1].state.text, 'initializing'); diff --git a/ui/tests/pages/clients/list.js b/ui/tests/pages/clients/list.js index f7ffb11be04..7eb3c6c54b8 100644 --- a/ui/tests/pages/clients/list.js +++ b/ui/tests/pages/clients/list.js @@ -25,7 +25,7 @@ export default create({ state: { scope: '[data-test-client-state]', - title: attribute('title'), + tooltip: attribute('aria-label', '.tooltip'), isInfo: hasClass('is-info', '.status-text'), isWarning: hasClass('is-warning', '.status-text'), From da93869adfc29d8b2804ca218197303a6bf144ea Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 11:39:11 -0500 Subject: [PATCH 27/40] Change tooltip to be relative only on hover This ensures the revealable-on-hover content stays atop the content with an attached tooltip. --- ui/app/styles/components/tooltip.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/styles/components/tooltip.scss b/ui/app/styles/components/tooltip.scss index 68842c13333..6aea23780cb 100644 --- a/ui/app/styles/components/tooltip.scss +++ b/ui/app/styles/components/tooltip.scss @@ -1,4 +1,4 @@ -.tooltip { +.tooltip:hover { position: relative; } From 3d2092546182bd889c5eada536adc44d9cf4b447 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 11:41:35 -0500 Subject: [PATCH 28/40] Change is-revealable to be relative only on hover This ensures the revealable-on-hover content stays atop other revealable content. --- ui/app/styles/core/table.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 6b815844369..1f2866770d2 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -88,8 +88,6 @@ white-space: nowrap; &.is-revealable { - position: relative; - .revealed { display: none; position: absolute; @@ -100,6 +98,8 @@ } &:hover { + position: relative; + color: transparent; overflow: visible; From eba33f3efca3cbe5fd5a1e61172d30b32370fa6a Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 12:05:17 -0500 Subject: [PATCH 29/40] Change Netlify site id MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This doesnā€™t belong in this PR, just trying it for now. --- .netlify/state.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.netlify/state.json b/.netlify/state.json index 850a5c4852f..ed0417bf02d 100644 --- a/.netlify/state.json +++ b/.netlify/state.json @@ -1,3 +1,3 @@ { - "siteId": "a3e19a5f-a18e-40b7-b943-bd0f96ba354f" + "siteId": "442034dd-3749-45d9-992e-480ab871ee28" } From 86f257a90c787bd39084c26ecc86d98e6cc25804 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 12:26:08 -0500 Subject: [PATCH 30/40] Change Mirage record to use draining trait --- ui/tests/acceptance/clients-list-test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/ui/tests/acceptance/clients-list-test.js b/ui/tests/acceptance/clients-list-test.js index 1a746449cad..9670bdd9876 100644 --- a/ui/tests/acceptance/clients-list-test.js +++ b/ui/tests/acceptance/clients-list-test.js @@ -72,11 +72,9 @@ module('Acceptance | clients list', function(hooks) { schedulingEligibility: 'ineligible', drain: false, }); - server.create('node', { + server.create('node', 'draining', { modifyIndex: 0, status: 'ready', - schedulingEligibility: 'ineligible', - drain: true, }); await ClientsList.visit(); From c38b15507203d168fc341ff5599bf582809bf866 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 13:20:45 -0500 Subject: [PATCH 31/40] Add pseudoelement to cover shadow when narrow --- ui/app/styles/core/table.scss | 14 ++++++++++++++ ui/app/styles/utils/z-indices.scss | 4 ++++ 2 files changed, 18 insertions(+) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 1f2866770d2..9422acb9304 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -107,9 +107,22 @@ color: $text; display: block; background-color: $white; + z-index: $z-zero; $shadow-width: 8px; + &::before { + content: ' '; + + position: absolute; + top: 0; + bottom: 0; + left: 0; + background: white; + z-index: $z-below; + width: 300px; + } + &::after { content: ' '; @@ -119,6 +132,7 @@ right: -$shadow-width; display: inline-block; + z-index: $z-below-below; background: linear-gradient( to right, diff --git a/ui/app/styles/utils/z-indices.scss b/ui/app/styles/utils/z-indices.scss index c85a6043918..280dc41e330 100644 --- a/ui/app/styles/utils/z-indices.scss +++ b/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; From 768fa840de12be31155170878c35183f1857a8a2 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 13:21:22 -0500 Subject: [PATCH 32/40] Move width to be near size/position properties --- ui/app/styles/core/table.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 9422acb9304..4adb11ba9a3 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -118,9 +118,10 @@ top: 0; bottom: 0; left: 0; + width: 300px; + background: white; z-index: $z-below; - width: 300px; } &::after { @@ -130,6 +131,7 @@ top: 0; bottom: 0; right: -$shadow-width; + width: $shadow-width; display: inline-block; z-index: $z-below-below; @@ -140,7 +142,6 @@ rgba($grey-blue, 184) 20%, rgba(0, 0, 0, 0) 100% ); - width: $shadow-width; } } } From 8cc972a21c9adfa70b5b65f021442fea94213a30 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 13:26:19 -0500 Subject: [PATCH 33/40] Move .is-truncatable within .is-300px MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The width of the shadow-blocker for cells that donā€™t actually overflow is hardcoded to the 300px width, so it doesnā€™t make sense for it to be applied generally. --- ui/app/styles/core/table.scss | 132 +++++++++++++++++----------------- 1 file changed, 66 insertions(+), 66 deletions(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 4adb11ba9a3..47def10082f 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -82,72 +82,6 @@ width: 25%; } - &.is-truncatable { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - &.is-revealable { - .revealed { - display: none; - position: absolute; - top: 0; - left: 0; - bottom: 0; - padding: calc(1.25em - 1px) 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( - to right, - $grey-blue 0%, - rgba($grey-blue, 184) 20%, - rgba(0, 0, 0, 0) 100% - ); - } - } - } - } - } - &.is-narrow { padding: 1.25em 0 1.25em 0.5em; @@ -162,6 +96,72 @@ &.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: calc(1.25em - 1px) 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( + to right, + $grey-blue 0%, + rgba($grey-blue, 184) 20%, + rgba(0, 0, 0, 0) 100% + ); + } + } + } + } + } } @for $i from 1 through 11 { From 0f531ff088554c79649855463a443fa11775d551 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 14:18:04 -0500 Subject: [PATCH 34/40] Remove calc MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Maybe this was only helping in Chrome Canary? šŸ¤Ŗ --- ui/app/styles/core/table.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index 47def10082f..a9356fbebb9 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -109,7 +109,7 @@ top: 0; left: 0; bottom: 0; - padding: calc(1.25em - 1px) 1.5em; + padding: 1.25em 1.5em; } &:hover { From 29aec09e95ec7dba50ea3ef17278ac942ec84c7d Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 14:41:52 -0500 Subject: [PATCH 35/40] Fix gradient MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ā€œto rightā€ isnā€™t supported in Safari, the alpha needs to be a fraction of 1, and it should be fading to white not black! --- ui/app/styles/core/table.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index a9356fbebb9..f4a8e7006f0 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -152,10 +152,10 @@ z-index: $z-below-below; background: linear-gradient( - to right, + 90deg, $grey-blue 0%, - rgba($grey-blue, 184) 20%, - rgba(0, 0, 0, 0) 100% + rgba($grey-blue, 0.72) 10%, + rgba($white, 0) 100% ); } } From 23b0075c4e6de85531b27018d6a07789ddb26d71 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Tue, 11 Jun 2019 15:30:00 -0500 Subject: [PATCH 36/40] Change combined column heading --- ui/app/templates/clients/index.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs index 2b3ebb5e58d..acf5bec259b 100644 --- a/ui/app/templates/clients/index.hbs +++ b/ui/app/templates/clients/index.hbs @@ -47,7 +47,7 @@ {{#t.sort-by prop="id"}}ID{{/t.sort-by}} {{#t.sort-by class="is-300px is-truncatable" prop="name"}}Name{{/t.sort-by}} - {{#t.sort-by prop="status"}}Status{{/t.sort-by}} + {{#t.sort-by prop="status"}}State{{/t.sort-by}} Address {{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}} # Allocs From 7344e71238bd03876d26346cee1a1f52bb9e0550 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 14 Jun 2019 12:09:58 -0700 Subject: [PATCH 37/40] Remove demonstration data --- ui/mirage/scenarios/default.js | 34 +--------------------------------- 1 file changed, 1 insertion(+), 33 deletions(-) diff --git a/ui/mirage/scenarios/default.js b/ui/mirage/scenarios/default.js index 5f8c0564d40..342f929f799 100644 --- a/ui/mirage/scenarios/default.js +++ b/ui/mirage/scenarios/default.js @@ -37,39 +37,7 @@ export default function(server) { function smallCluster(server) { server.createList('agent', 3); - // 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('node', 5); server.createList('job', 5); } From 720ab340d4574d6540bff445a2525222d10c84bc Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 14 Jun 2019 12:16:38 -0700 Subject: [PATCH 38/40] Remove extraneous whitespace --- ui/mirage/scenarios/default.js | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/mirage/scenarios/default.js b/ui/mirage/scenarios/default.js index 342f929f799..d80b5d276ea 100644 --- a/ui/mirage/scenarios/default.js +++ b/ui/mirage/scenarios/default.js @@ -36,7 +36,6 @@ export default function(server) { function smallCluster(server) { server.createList('agent', 3); - server.createList('node', 5); server.createList('job', 5); } From c2c4d5df72eebff12963683214957e15cb42b620 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Fri, 14 Jun 2019 15:09:05 -0700 Subject: [PATCH 39/40] Remove overflow-reveal feature MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It turns out to not work when the window is narrow and the fields donā€™t overflow šŸ˜¤ --- ui/app/styles/components/tooltip.scss | 2 +- ui/app/styles/core/table.scss | 79 +++---------------- ui/app/styles/utils/z-indices.scss | 4 - ui/app/templates/clients/index.hbs | 4 +- .../templates/components/client-node-row.hbs | 10 +-- 5 files changed, 15 insertions(+), 84 deletions(-) diff --git a/ui/app/styles/components/tooltip.scss b/ui/app/styles/components/tooltip.scss index 6aea23780cb..68842c13333 100644 --- a/ui/app/styles/components/tooltip.scss +++ b/ui/app/styles/components/tooltip.scss @@ -1,4 +1,4 @@ -.tooltip:hover { +.tooltip { position: relative; } diff --git a/ui/app/styles/core/table.scss b/ui/app/styles/core/table.scss index f4a8e7006f0..f0355dffa00 100644 --- a/ui/app/styles/core/table.scss +++ b/ui/app/styles/core/table.scss @@ -82,6 +82,12 @@ width: 25%; } + &.is-truncatable { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + &.is-narrow { padding: 1.25em 0 1.25em 0.5em; @@ -93,75 +99,9 @@ // Only use px modifiers when text needs to be truncated. // In this and only this scenario are percentages not effective. - &.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% - ); - } - } - } - } - } + &.is-200px { + width: 200px; + max-width: 200px; } @for $i from 1 through 11 { @@ -227,6 +167,7 @@ bottom: 0.75em; position: absolute; display: block; + pointer-events: none; } &.asc::after { diff --git a/ui/app/styles/utils/z-indices.scss b/ui/app/styles/utils/z-indices.scss index 280dc41e330..c85a6043918 100644 --- a/ui/app/styles/utils/z-indices.scss +++ b/ui/app/styles/utils/z-indices.scss @@ -5,7 +5,3 @@ $z-gutter-backdrop: 219; $z-subnav: 200; $z-base: 100; $z-icon-decorators: 50; - -$z-zero: 0; -$z-below: -1; -$z-below-below: -2; diff --git a/ui/app/templates/clients/index.hbs b/ui/app/templates/clients/index.hbs index acf5bec259b..6326a85e7de 100644 --- a/ui/app/templates/clients/index.hbs +++ b/ui/app/templates/clients/index.hbs @@ -46,9 +46,9 @@ {{#t.head}} {{#t.sort-by prop="id"}}ID{{/t.sort-by}} - {{#t.sort-by class="is-300px is-truncatable" prop="name"}}Name{{/t.sort-by}} + {{#t.sort-by class="is-200px is-truncatable" prop="name"}}Name{{/t.sort-by}} {{#t.sort-by prop="status"}}State{{/t.sort-by}} - Address + Address {{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}} # Allocs {{/t.head}} diff --git a/ui/app/templates/components/client-node-row.hbs b/ui/app/templates/components/client-node-row.hbs index 3558f56600e..35619aa19b7 100644 --- a/ui/app/templates/components/client-node-row.hbs +++ b/ui/app/templates/components/client-node-row.hbs @@ -6,10 +6,7 @@ {{/if}} {{#link-to "clients.client" node.id class="is-primary"}}{{node.shortId}}{{/link-to}} - - {{node.name}} -
{{node.name}}
- +{{node.name}} {{#if node.isDraining}} @@ -21,10 +18,7 @@ {{/if}} - - {{node.httpAddr}} -
{{node.httpAddr}}
- +{{node.httpAddr}} {{node.datacenter}} {{#if node.allocations.isPending}} From f23cf56aa64fce6d6857ba6e217eee7667cde4e3 Mon Sep 17 00:00:00 2001 From: Buck Doyle Date: Wed, 19 Jun 2019 09:21:25 -0700 Subject: [PATCH 40/40] Add changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 446e7c4d365..a4ac8bc10d9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ IMPROVEMENTS: * api: use region from job hcl when not provided as query parameter in job registration and plan endpoints [[GH-5664](https://github.com/hashicorp/nomad/pull/5664)] * metrics: add namespace label as appropriate to metrics [[GH-5847](https://github.com/hashicorp/nomad/issues/5847)] +* ui: Moved client status, draining, and eligibility fields into single state column [[GH-5789](https://github.com/hashicorp/nomad/pull/5789)] BUG FIXES: