2018-07-10 08:11:27 +00:00
|
|
|
import {
|
2019-06-19 17:11:17 +00:00
|
|
|
attribute,
|
2018-07-10 08:11:27 +00:00
|
|
|
create,
|
|
|
|
collection,
|
|
|
|
clickable,
|
|
|
|
fillable,
|
2019-06-19 17:11:17 +00:00
|
|
|
hasClass,
|
|
|
|
isHidden,
|
2018-07-11 18:41:34 +00:00
|
|
|
isPresent,
|
2018-07-10 08:11:27 +00:00
|
|
|
text,
|
|
|
|
visitable,
|
|
|
|
} from 'ember-cli-page-object';
|
|
|
|
|
2021-04-29 20:00:59 +00:00
|
|
|
import { multiFacet } from 'nomad-ui/tests/pages/components/facet';
|
2020-04-02 22:52:44 +00:00
|
|
|
import pageSizeSelect from 'nomad-ui/tests/pages/components/page-size-select';
|
2019-02-12 19:26:36 +00:00
|
|
|
|
2018-07-10 08:11:27 +00:00
|
|
|
export default create({
|
2020-04-01 00:13:44 +00:00
|
|
|
pageSize: 25,
|
|
|
|
|
2018-07-10 08:11:27 +00:00
|
|
|
visit: visitable('/clients'),
|
|
|
|
|
|
|
|
search: fillable('.search-box input'),
|
|
|
|
|
UI: Fix client sorting (#6817)
There are two changes here, and some caveats/commentary:
1. The “State“ table column was actually sorting only by status. The state was not an actual property, just something calculated in each client row, as a product of status, isEligible, and isDraining. This PR adds isDraining as a component of compositeState so it can be used for sorting.
2. The Sortable mixin declares dependent keys that cause the sort to be live-updating, but only if the members of the array change, such as if a new client is added, but not if any of the sortable properties change. This PR adds a SortableFactory function that generates a mixin whose listSorted computed property includes dependent keys for the sortable properties, so the table will live-update if any of the sortable properties change, not just the array members. There’s a warning if you use SortableFactory without dependent keys and via the original Sortable interface, so we can eventually migrate away from it.
2019-12-12 19:06:54 +00:00
|
|
|
sortOptions: collection('[data-test-sort-by]', {
|
|
|
|
id: attribute('data-test-sort-by'),
|
|
|
|
sort: clickable(),
|
|
|
|
}),
|
|
|
|
|
|
|
|
sortBy(id) {
|
|
|
|
return this.sortOptions
|
|
|
|
.toArray()
|
|
|
|
.findBy('id', id)
|
|
|
|
.sort();
|
|
|
|
},
|
|
|
|
|
2018-07-10 08:11:27 +00:00
|
|
|
nodes: collection('[data-test-client-node-row]', {
|
|
|
|
id: text('[data-test-client-id]'),
|
|
|
|
name: text('[data-test-client-name]'),
|
2019-06-19 17:11:17 +00:00
|
|
|
|
UI: Fix client sorting (#6817)
There are two changes here, and some caveats/commentary:
1. The “State“ table column was actually sorting only by status. The state was not an actual property, just something calculated in each client row, as a product of status, isEligible, and isDraining. This PR adds isDraining as a component of compositeState so it can be used for sorting.
2. The Sortable mixin declares dependent keys that cause the sort to be live-updating, but only if the members of the array change, such as if a new client is added, but not if any of the sortable properties change. This PR adds a SortableFactory function that generates a mixin whose listSorted computed property includes dependent keys for the sortable properties, so the table will live-update if any of the sortable properties change, not just the array members. There’s a warning if you use SortableFactory without dependent keys and via the original Sortable interface, so we can eventually migrate away from it.
2019-12-12 19:06:54 +00:00
|
|
|
compositeStatus: {
|
|
|
|
scope: '[data-test-client-composite-status]',
|
2019-06-19 17:11:17 +00:00
|
|
|
|
|
|
|
tooltip: attribute('aria-label', '.tooltip'),
|
|
|
|
|
|
|
|
isInfo: hasClass('is-info', '.status-text'),
|
|
|
|
isWarning: hasClass('is-warning', '.status-text'),
|
|
|
|
isUnformatted: isHidden('.status-text'),
|
|
|
|
},
|
|
|
|
|
2018-07-10 08:11:27 +00:00
|
|
|
address: text('[data-test-client-address]'),
|
|
|
|
datacenter: text('[data-test-client-datacenter]'),
|
|
|
|
allocations: text('[data-test-client-allocations]'),
|
|
|
|
|
|
|
|
clickRow: clickable(),
|
|
|
|
clickName: clickable('[data-test-client-name] a'),
|
|
|
|
}),
|
|
|
|
|
2018-07-11 18:41:34 +00:00
|
|
|
hasPagination: isPresent('[data-test-pagination]'),
|
2018-07-10 08:11:27 +00:00
|
|
|
|
2018-07-11 18:41:34 +00:00
|
|
|
isEmpty: isPresent('[data-test-empty-clients-list]'),
|
2018-07-10 08:11:27 +00:00
|
|
|
empty: {
|
|
|
|
headline: text('[data-test-empty-clients-list-headline]'),
|
|
|
|
},
|
|
|
|
|
2020-04-02 22:52:44 +00:00
|
|
|
pageSizeSelect: pageSizeSelect(),
|
2020-04-01 00:13:44 +00:00
|
|
|
|
2018-07-10 08:11:27 +00:00
|
|
|
error: {
|
2018-07-11 18:41:34 +00:00
|
|
|
isPresent: isPresent('[data-test-error]'),
|
2018-07-10 08:11:27 +00:00
|
|
|
title: text('[data-test-error-title]'),
|
|
|
|
message: text('[data-test-error-message]'),
|
|
|
|
seekHelp: clickable('[data-test-error-message] a'),
|
|
|
|
},
|
2019-02-12 19:26:36 +00:00
|
|
|
|
|
|
|
facets: {
|
2021-04-29 20:00:59 +00:00
|
|
|
class: multiFacet('[data-test-class-facet]'),
|
|
|
|
state: multiFacet('[data-test-state-facet]'),
|
|
|
|
datacenter: multiFacet('[data-test-datacenter-facet]'),
|
|
|
|
volume: multiFacet('[data-test-volume-facet]'),
|
2019-02-12 19:26:36 +00:00
|
|
|
},
|
2018-07-10 08:11:27 +00:00
|
|
|
});
|