09067b4eb7
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.
62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
import { inject as service } from '@ember/service';
|
|
import Component from '@ember/component';
|
|
import { lazyClick } from '../helpers/lazy-click';
|
|
import { watchRelationship } from 'nomad-ui/utils/properties/watch';
|
|
import WithVisibilityDetection from 'nomad-ui/mixins/with-component-visibility-detection';
|
|
import { computed } from '@ember/object';
|
|
|
|
export default Component.extend(WithVisibilityDetection, {
|
|
store: service(),
|
|
|
|
tagName: 'tr',
|
|
classNames: ['client-node-row', 'is-interactive'],
|
|
|
|
node: null,
|
|
|
|
onClick() {},
|
|
|
|
click(event) {
|
|
lazyClick([this.onClick, event]);
|
|
},
|
|
|
|
didReceiveAttrs() {
|
|
// Reload the node in order to get detail information
|
|
const node = this.node;
|
|
if (node) {
|
|
node.reload().then(() => {
|
|
this.watch.perform(node, 100);
|
|
});
|
|
}
|
|
},
|
|
|
|
visibilityHandler() {
|
|
if (document.hidden) {
|
|
this.watch.cancelAll();
|
|
} else {
|
|
const node = this.node;
|
|
if (node) {
|
|
this.watch.perform(node, 100);
|
|
}
|
|
}
|
|
},
|
|
|
|
willDestroy() {
|
|
this.watch.cancelAll();
|
|
this._super(...arguments);
|
|
},
|
|
|
|
watch: watchRelationship('allocations'),
|
|
|
|
compositeStatusClass: computed('node.compositeStatus', function() {
|
|
let compositeStatus = this.get('node.compositeStatus');
|
|
|
|
if (compositeStatus === 'draining') {
|
|
return 'status-text is-info';
|
|
} else if (compositeStatus === 'ineligible') {
|
|
return 'status-text is-warning';
|
|
} else {
|
|
return '';
|
|
}
|
|
}),
|
|
});
|