2020-06-09 21:03:28 +00:00
|
|
|
/* eslint-disable ember/no-incorrect-calls-with-inline-anonymous-functions */
|
2020-03-31 04:29:30 +00:00
|
|
|
import { alias, readOnly } from '@ember/object/computed';
|
|
|
|
import { inject as service } from '@ember/service';
|
2017-12-15 21:39:18 +00:00
|
|
|
import Controller, { inject as controller } from '@ember/controller';
|
2020-06-10 13:49:16 +00:00
|
|
|
import { action, computed } from '@ember/object';
|
2019-02-12 04:01:46 +00:00
|
|
|
import { scheduleOnce } from '@ember/runloop';
|
|
|
|
import intersection from 'lodash.intersection';
|
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
|
|
|
import SortableFactory from 'nomad-ui/mixins/sortable-factory';
|
2017-09-19 14:47:10 +00:00
|
|
|
import Searchable from 'nomad-ui/mixins/searchable';
|
2019-02-12 04:01:46 +00:00
|
|
|
import { serialize, deserializedQueryParam as selection } from 'nomad-ui/utils/qp-serialize';
|
2020-06-10 13:49:16 +00:00
|
|
|
import classic from 'ember-classic-decorator';
|
|
|
|
|
|
|
|
@classic
|
|
|
|
export default class IndexController extends Controller.extend(
|
2021-10-22 14:33:06 +00:00
|
|
|
SortableFactory(['id', 'name', 'compositeStatus', 'datacenter', 'version']),
|
2020-06-10 13:49:16 +00:00
|
|
|
Searchable
|
|
|
|
) {
|
|
|
|
@service userSettings;
|
|
|
|
@controller('clients') clientsController;
|
|
|
|
|
|
|
|
@alias('model.nodes') nodes;
|
|
|
|
@alias('model.agents') agents;
|
|
|
|
|
2020-06-11 13:38:33 +00:00
|
|
|
queryParams = [
|
|
|
|
{
|
|
|
|
currentPage: 'page',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
searchTerm: 'search',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
sortProperty: 'sort',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
sortDescending: 'desc',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
qpClass: 'class',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
qpState: 'state',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
qpDatacenter: 'dc',
|
|
|
|
},
|
2021-10-22 14:33:06 +00:00
|
|
|
{
|
|
|
|
qpVersion: 'version',
|
|
|
|
},
|
2020-06-11 13:38:33 +00:00
|
|
|
{
|
|
|
|
qpVolume: 'volume',
|
|
|
|
},
|
|
|
|
];
|
2020-06-10 13:49:16 +00:00
|
|
|
|
|
|
|
currentPage = 1;
|
|
|
|
@readOnly('userSettings.pageSize') pageSize;
|
|
|
|
|
|
|
|
sortProperty = 'modifyIndex';
|
|
|
|
sortDescending = true;
|
|
|
|
|
|
|
|
@computed
|
|
|
|
get searchProps() {
|
|
|
|
return ['id', 'name', 'datacenter'];
|
|
|
|
}
|
|
|
|
|
|
|
|
qpClass = '';
|
|
|
|
qpState = '';
|
|
|
|
qpDatacenter = '';
|
2021-10-22 14:33:06 +00:00
|
|
|
qpVersion = '';
|
2020-06-10 13:49:16 +00:00
|
|
|
qpVolume = '';
|
|
|
|
|
|
|
|
@selection('qpClass') selectionClass;
|
|
|
|
@selection('qpState') selectionState;
|
|
|
|
@selection('qpDatacenter') selectionDatacenter;
|
2021-10-22 14:33:06 +00:00
|
|
|
@selection('qpVersion') selectionVersion;
|
2020-06-10 13:49:16 +00:00
|
|
|
@selection('qpVolume') selectionVolume;
|
|
|
|
|
2021-02-17 21:01:44 +00:00
|
|
|
@computed('nodes.[]', 'selectionClass')
|
2020-06-10 13:49:16 +00:00
|
|
|
get optionsClass() {
|
|
|
|
const classes = Array.from(new Set(this.nodes.mapBy('nodeClass')))
|
|
|
|
.compact()
|
|
|
|
.without('');
|
|
|
|
|
|
|
|
// Remove any invalid node classes from the query param/selection
|
|
|
|
scheduleOnce('actions', () => {
|
|
|
|
// eslint-disable-next-line ember/no-side-effects
|
|
|
|
this.set('qpClass', serialize(intersection(classes, this.selectionClass)));
|
|
|
|
});
|
|
|
|
|
|
|
|
return classes.sort().map(dc => ({ key: dc, label: dc }));
|
|
|
|
}
|
|
|
|
|
|
|
|
@computed
|
|
|
|
get optionsState() {
|
|
|
|
return [
|
|
|
|
{ key: 'initializing', label: 'Initializing' },
|
|
|
|
{ key: 'ready', label: 'Ready' },
|
|
|
|
{ key: 'down', label: 'Down' },
|
|
|
|
{ key: 'ineligible', label: 'Ineligible' },
|
|
|
|
{ key: 'draining', label: 'Draining' },
|
|
|
|
];
|
|
|
|
}
|
|
|
|
|
2021-02-17 21:01:44 +00:00
|
|
|
@computed('nodes.[]', 'selectionDatacenter')
|
2020-06-10 13:49:16 +00:00
|
|
|
get optionsDatacenter() {
|
|
|
|
const datacenters = Array.from(new Set(this.nodes.mapBy('datacenter'))).compact();
|
|
|
|
|
|
|
|
// Remove any invalid datacenters from the query param/selection
|
|
|
|
scheduleOnce('actions', () => {
|
|
|
|
// eslint-disable-next-line ember/no-side-effects
|
|
|
|
this.set('qpDatacenter', serialize(intersection(datacenters, this.selectionDatacenter)));
|
|
|
|
});
|
|
|
|
|
|
|
|
return datacenters.sort().map(dc => ({ key: dc, label: dc }));
|
|
|
|
}
|
|
|
|
|
2021-10-22 14:33:06 +00:00
|
|
|
@computed('nodes.[]', 'selectionVersion')
|
|
|
|
get optionsVersion() {
|
|
|
|
const versions = Array.from(new Set(this.nodes.mapBy('version'))).compact();
|
|
|
|
|
|
|
|
// Remove any invalid versions from the query param/selection
|
|
|
|
scheduleOnce('actions', () => {
|
|
|
|
// eslint-disable-next-line ember/no-side-effects
|
|
|
|
this.set('qpVersion', serialize(intersection(versions, this.selectionVersion)));
|
|
|
|
});
|
|
|
|
|
|
|
|
return versions.sort().map(v => ({ key: v, label: v }));
|
|
|
|
}
|
|
|
|
|
2021-02-17 21:01:44 +00:00
|
|
|
@computed('nodes.[]', 'selectionVolume')
|
2020-06-10 13:49:16 +00:00
|
|
|
get optionsVolume() {
|
|
|
|
const flatten = (acc, val) => acc.concat(val.toArray());
|
|
|
|
|
|
|
|
const allVolumes = this.nodes.mapBy('hostVolumes').reduce(flatten, []);
|
|
|
|
const volumes = Array.from(new Set(allVolumes.mapBy('name')));
|
|
|
|
|
|
|
|
scheduleOnce('actions', () => {
|
|
|
|
// eslint-disable-next-line ember/no-side-effects
|
|
|
|
this.set('qpVolume', serialize(intersection(volumes, this.selectionVolume)));
|
|
|
|
});
|
|
|
|
|
|
|
|
return volumes.sort().map(volume => ({ key: volume, label: volume }));
|
|
|
|
}
|
|
|
|
|
|
|
|
@computed(
|
|
|
|
'nodes.[]',
|
|
|
|
'selectionClass',
|
|
|
|
'selectionState',
|
|
|
|
'selectionDatacenter',
|
2021-10-22 14:33:06 +00:00
|
|
|
'selectionVersion',
|
2020-06-10 13:49:16 +00:00
|
|
|
'selectionVolume'
|
|
|
|
)
|
|
|
|
get filteredNodes() {
|
|
|
|
const {
|
|
|
|
selectionClass: classes,
|
|
|
|
selectionState: states,
|
|
|
|
selectionDatacenter: datacenters,
|
2021-10-22 14:33:06 +00:00
|
|
|
selectionVersion: versions,
|
2020-06-10 13:49:16 +00:00
|
|
|
selectionVolume: volumes,
|
|
|
|
} = this;
|
|
|
|
|
|
|
|
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;
|
|
|
|
if (statuses.length && !statuses.includes(node.get('status'))) return false;
|
|
|
|
if (datacenters.length && !datacenters.includes(node.get('datacenter'))) return false;
|
2021-10-22 14:33:06 +00:00
|
|
|
if (versions.length && !versions.includes(node.get('version'))) return false;
|
2020-06-10 13:49:16 +00:00
|
|
|
if (volumes.length && !node.hostVolumes.find(volume => volumes.includes(volume.name)))
|
|
|
|
return false;
|
|
|
|
|
|
|
|
if (onlyIneligible && node.get('isEligible')) return false;
|
|
|
|
if (onlyDraining && !node.get('isDraining')) return false;
|
|
|
|
|
|
|
|
return true;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
@alias('filteredNodes') listToSort;
|
|
|
|
@alias('listSorted') listToSearch;
|
|
|
|
@alias('listSearched') sortedNodes;
|
|
|
|
|
|
|
|
@alias('clientsController.isForbidden') isForbidden;
|
|
|
|
|
|
|
|
setFacetQueryParam(queryParam, selection) {
|
|
|
|
this.set(queryParam, serialize(selection));
|
|
|
|
}
|
2017-09-19 14:47:10 +00:00
|
|
|
|
2020-06-10 13:49:16 +00:00
|
|
|
@action
|
|
|
|
gotoNode(node) {
|
|
|
|
this.transitionToRoute('clients.client', node);
|
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
|
|
|
}
|
2020-06-10 13:49:16 +00:00
|
|
|
}
|