Merge pull request #8177 from hashicorp/f-ui/monitor
UI: Client and Server Monitor
This commit is contained in:
Michael Lange
GitHub
commit
34b51860eb
|
|
@ -0,0 +1,18 @@
|
|||
import AbstractAbility from './abstract';
|
||||
import { computed, get } from '@ember/object';
|
||||
import { or } from '@ember/object/computed';
|
||||
|
||||
export default class Client extends AbstractAbility {
|
||||
@or('bypassAuthorization', 'selfTokenIsManagement', 'policiesIncludeAgentReadOrWrite')
|
||||
canRead;
|
||||
|
||||
@computed('token.selfTokenPolicies.[]')
|
||||
get policiesIncludeAgentReadOrWrite() {
|
||||
const policies = (get(this, 'token.selfTokenPolicies') || [])
|
||||
.toArray()
|
||||
.map(policy => get(policy, 'rulesJSON.Agent.Policy'))
|
||||
.compact();
|
||||
|
||||
return policies.some(policy => policy === 'read' || policy === 'write');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
import { inject as service } from '@ember/service';
|
||||
import Component from '@ember/component';
|
||||
import { computed } from '@ember/object';
|
||||
import { assert } from '@ember/debug';
|
||||
import { tagName } from '@ember-decorators/component';
|
||||
import classic from 'ember-classic-decorator';
|
||||
import Log from 'nomad-ui/utils/classes/log';
|
||||
|
||||
const LEVELS = ['error', 'warn', 'info', 'debug', 'trace'];
|
||||
|
||||
@classic
|
||||
@tagName('')
|
||||
export default class AgentMonitor extends Component {
|
||||
@service token;
|
||||
|
||||
client = null;
|
||||
server = null;
|
||||
level = LEVELS[2];
|
||||
onLevelChange() {}
|
||||
|
||||
levels = LEVELS;
|
||||
monitorUrl = '/v1/agent/monitor';
|
||||
isStreaming = true;
|
||||
logger = null;
|
||||
|
||||
@computed('level', 'client.id', 'server.id')
|
||||
get monitorParams() {
|
||||
assert(
|
||||
'Provide a client OR a server to AgentMonitor, not both.',
|
||||
this.server != null || this.client != null
|
||||
);
|
||||
|
||||
const type = this.server ? 'server_id' : 'client_id';
|
||||
const id = this.server ? this.server.id : this.client && this.client.id;
|
||||
|
||||
return {
|
||||
log_level: this.level,
|
||||
[type]: id,
|
||||
};
|
||||
}
|
||||
|
||||
didInsertElement() {
|
||||
this.updateLogger();
|
||||
}
|
||||
|
||||
updateLogger() {
|
||||
let currentTail = this.logger ? this.logger.tail : '';
|
||||
if (currentTail) {
|
||||
currentTail += `\n...changing log level to ${this.level}...\n\n`;
|
||||
}
|
||||
this.set(
|
||||
'logger',
|
||||
Log.create({
|
||||
logFetch: url => this.token.authorizedRequest(url),
|
||||
params: this.monitorParams,
|
||||
url: this.monitorUrl,
|
||||
tail: currentTail,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
setLevel(level) {
|
||||
this.logger.stop();
|
||||
this.set('level', level);
|
||||
this.onLevelChange(level);
|
||||
this.updateLogger();
|
||||
}
|
||||
|
||||
toggleStream() {
|
||||
this.set('streamMode', 'streaming');
|
||||
this.toggleProperty('isStreaming');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import Component from '@ember/component';
|
||||
import { tagName } from '@ember-decorators/component';
|
||||
|
||||
@tagName('')
|
||||
export default class ClientSubnav extends Component {}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import Component from '@ember/component';
|
||||
import { tagName } from '@ember-decorators/component';
|
||||
|
||||
@tagName('')
|
||||
export default class ForbiddenMessage extends Component {}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import Component from '@ember/component';
|
||||
import { tagName } from '@ember-decorators/component';
|
||||
|
||||
@tagName('')
|
||||
export default class ServerSubnav extends Component {}
|
||||
|
|
@ -5,6 +5,8 @@ import WindowResizable from 'nomad-ui/mixins/window-resizable';
|
|||
import { classNames, tagName } from '@ember-decorators/component';
|
||||
import classic from 'ember-classic-decorator';
|
||||
|
||||
const A_KEY = 65;
|
||||
|
||||
@classic
|
||||
@tagName('pre')
|
||||
@classNames('cli-window')
|
||||
|
|
@ -14,6 +16,10 @@ export default class StreamingFile extends Component.extend(WindowResizable) {
|
|||
mode = 'streaming'; // head, tail, streaming
|
||||
isStreaming = true;
|
||||
logger = null;
|
||||
follow = true;
|
||||
|
||||
// Internal bookkeeping to avoid multiple scroll events on one frame
|
||||
requestFrame = true;
|
||||
|
||||
didReceiveAttrs() {
|
||||
if (!this.logger) {
|
||||
|
|
@ -26,12 +32,15 @@ export default class StreamingFile extends Component.extend(WindowResizable) {
|
|||
performTask() {
|
||||
switch (this.mode) {
|
||||
case 'head':
|
||||
this.set('follow', false);
|
||||
this.head.perform();
|
||||
break;
|
||||
case 'tail':
|
||||
this.set('follow', true);
|
||||
this.tail.perform();
|
||||
break;
|
||||
case 'streaming':
|
||||
this.set('follow', true);
|
||||
if (this.isStreaming) {
|
||||
this.stream.perform();
|
||||
} else {
|
||||
|
|
@ -41,8 +50,47 @@ export default class StreamingFile extends Component.extend(WindowResizable) {
|
|||
}
|
||||
}
|
||||
|
||||
scrollHandler() {
|
||||
const cli = this.element;
|
||||
|
||||
// Scroll events can fire multiple times per frame, this eliminates
|
||||
// redundant computation.
|
||||
if (this.requestFrame) {
|
||||
window.requestAnimationFrame(() => {
|
||||
// If the scroll position is close enough to the bottom, autoscroll to the bottom
|
||||
this.set('follow', cli.scrollHeight - cli.scrollTop - cli.clientHeight < 20);
|
||||
this.requestFrame = true;
|
||||
});
|
||||
}
|
||||
this.requestFrame = false;
|
||||
}
|
||||
|
||||
keyDownHandler(e) {
|
||||
// Rebind select-all shortcut to only select the text in the
|
||||
// streaming file output.
|
||||
if ((e.metaKey || e.ctrlKey) && e.keyCode === A_KEY) {
|
||||
e.preventDefault();
|
||||
const selection = window.getSelection();
|
||||
selection.removeAllRanges();
|
||||
const range = document.createRange();
|
||||
range.selectNode(this.element);
|
||||
selection.addRange(range);
|
||||
}
|
||||
}
|
||||
|
||||
didInsertElement() {
|
||||
this.fillAvailableHeight();
|
||||
|
||||
this.set('_scrollHandler', this.scrollHandler.bind(this));
|
||||
this.element.addEventListener('scroll', this._scrollHandler);
|
||||
|
||||
this.set('_keyDownHandler', this.keyDownHandler.bind(this));
|
||||
document.addEventListener('keydown', this._keyDownHandler);
|
||||
}
|
||||
|
||||
willDestroyElement() {
|
||||
this.element.removeEventListener('scroll', this._scrollHandler);
|
||||
document.removeEventListener('keydown', this._keyDownHandler);
|
||||
}
|
||||
|
||||
windowResizeHandler() {
|
||||
|
|
@ -69,24 +117,16 @@ export default class StreamingFile extends Component.extend(WindowResizable) {
|
|||
|
||||
@task(function*() {
|
||||
yield this.get('logger.gotoTail').perform();
|
||||
run.scheduleOnce('afterRender', this, this.synchronizeScrollPosition, [true]);
|
||||
})
|
||||
tail;
|
||||
|
||||
synchronizeScrollPosition(force = false) {
|
||||
const cliWindow = this.element;
|
||||
if (cliWindow.scrollHeight - cliWindow.scrollTop < 10 || force) {
|
||||
// If the window is approximately scrolled to the bottom, follow the log
|
||||
cliWindow.scrollTop = cliWindow.scrollHeight;
|
||||
synchronizeScrollPosition() {
|
||||
if (this.follow) {
|
||||
this.element.scrollTop = this.element.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
@task(function*() {
|
||||
// Force the scroll position to the bottom of the window when starting streaming
|
||||
this.logger.one('tick', () => {
|
||||
run.scheduleOnce('afterRender', this, this.synchronizeScrollPosition, [true]);
|
||||
});
|
||||
|
||||
// Follow the log if the scroll position is near the bottom of the cli window
|
||||
this.logger.on('tick', this, 'scheduleScrollSynchronization');
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import Controller from '@ember/controller';
|
||||
|
||||
export default class ClientMonitorController extends Controller {
|
||||
queryParams = ['level'];
|
||||
level = 'info';
|
||||
}
|
||||
|
|
@ -1,31 +1,5 @@
|
|||
import { alias } from '@ember/object/computed';
|
||||
import Controller from '@ember/controller';
|
||||
import Sortable from 'nomad-ui/mixins/sortable';
|
||||
|
||||
export default class ServersController extends Controller.extend(Sortable) {
|
||||
@alias('model.nodes') nodes;
|
||||
@alias('model.agents') agents;
|
||||
|
||||
queryParams = [
|
||||
{
|
||||
currentPage: 'page',
|
||||
},
|
||||
{
|
||||
sortProperty: 'sort',
|
||||
},
|
||||
{
|
||||
sortDescending: 'desc',
|
||||
},
|
||||
];
|
||||
|
||||
currentPage = 1;
|
||||
pageSize = 8;
|
||||
|
||||
sortProperty = 'isLeader';
|
||||
sortDescending = true;
|
||||
|
||||
export default class ServersController extends Controller {
|
||||
isForbidden = false;
|
||||
|
||||
@alias('agents') listToSort;
|
||||
@alias('listSorted') sortedAgents;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,32 @@
|
|||
import { alias } from '@ember/object/computed';
|
||||
import Controller, { inject as controller } from '@ember/controller';
|
||||
import Sortable from 'nomad-ui/mixins/sortable';
|
||||
|
||||
export default class IndexController extends Controller {
|
||||
export default class IndexController extends Controller.extend(Sortable) {
|
||||
@controller('servers') serversController;
|
||||
@alias('serversController.isForbidden') isForbidden;
|
||||
|
||||
@alias('model.nodes') nodes;
|
||||
@alias('model.agents') agents;
|
||||
|
||||
queryParams = [
|
||||
{
|
||||
currentPage: 'page',
|
||||
},
|
||||
{
|
||||
sortProperty: 'sort',
|
||||
},
|
||||
{
|
||||
sortDescending: 'desc',
|
||||
},
|
||||
];
|
||||
|
||||
currentPage = 1;
|
||||
pageSize = 8;
|
||||
|
||||
sortProperty = 'isLeader';
|
||||
sortDescending = true;
|
||||
|
||||
@alias('agents') listToSort;
|
||||
@alias('listSorted') sortedAgents;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
import Controller from '@ember/controller';
|
||||
|
||||
export default class ServerMonitorController extends Controller {
|
||||
queryParams = ['level'];
|
||||
level = 'info';
|
||||
}
|
||||
|
|
@ -26,11 +26,15 @@ Router.map(function() {
|
|||
});
|
||||
|
||||
this.route('clients', function() {
|
||||
this.route('client', { path: '/:node_id' });
|
||||
this.route('client', { path: '/:node_id' }, function() {
|
||||
this.route('monitor');
|
||||
});
|
||||
});
|
||||
|
||||
this.route('servers', function() {
|
||||
this.route('server', { path: '/:agent_id' });
|
||||
this.route('server', { path: '/:agent_id' }, function() {
|
||||
this.route('monitor');
|
||||
});
|
||||
});
|
||||
|
||||
this.route('csi', function() {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
import { inject as service } from '@ember/service';
|
||||
import Route from '@ember/routing/route';
|
||||
import { collect } from '@ember/object/computed';
|
||||
import notifyError from 'nomad-ui/utils/notify-error';
|
||||
import { watchRecord, watchRelationship } from 'nomad-ui/utils/properties/watch';
|
||||
import WithWatchers from 'nomad-ui/mixins/with-watchers';
|
||||
|
||||
export default class ClientRoute extends Route.extend(WithWatchers) {
|
||||
export default class ClientRoute extends Route {
|
||||
@service store;
|
||||
|
||||
model() {
|
||||
|
|
@ -28,34 +25,4 @@ export default class ClientRoute extends Route.extend(WithWatchers) {
|
|||
}
|
||||
return model && model.get('allocations');
|
||||
}
|
||||
|
||||
setupController(controller, model) {
|
||||
controller.set('flagAsDraining', model && model.isDraining);
|
||||
|
||||
return super.setupController(...arguments);
|
||||
}
|
||||
|
||||
resetController(controller) {
|
||||
controller.setProperties({
|
||||
eligibilityError: null,
|
||||
stopDrainError: null,
|
||||
drainError: null,
|
||||
flagAsDraining: false,
|
||||
showDrainNotification: false,
|
||||
showDrainUpdateNotification: false,
|
||||
showDrainStoppedNotification: false,
|
||||
});
|
||||
}
|
||||
|
||||
startWatchers(controller, model) {
|
||||
if (model) {
|
||||
controller.set('watchModel', this.watch.perform(model));
|
||||
controller.set('watchAllocations', this.watchAllocations.perform(model));
|
||||
}
|
||||
}
|
||||
|
||||
@watchRecord('node') watch;
|
||||
@watchRelationship('allocations') watchAllocations;
|
||||
|
||||
@collect('watch', 'watchAllocations') watchers;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
import { inject as service } from '@ember/service';
|
||||
import Route from '@ember/routing/route';
|
||||
import { collect } from '@ember/object/computed';
|
||||
import { watchRecord, watchRelationship } from 'nomad-ui/utils/properties/watch';
|
||||
import WithWatchers from 'nomad-ui/mixins/with-watchers';
|
||||
|
||||
export default class ClientRoute extends Route.extend(WithWatchers) {
|
||||
@service store;
|
||||
|
||||
setupController(controller, model) {
|
||||
controller.set('flagAsDraining', model && model.isDraining);
|
||||
|
||||
return super.setupController(...arguments);
|
||||
}
|
||||
|
||||
resetController(controller) {
|
||||
controller.setProperties({
|
||||
eligibilityError: null,
|
||||
stopDrainError: null,
|
||||
drainError: null,
|
||||
flagAsDraining: false,
|
||||
showDrainNotification: false,
|
||||
showDrainUpdateNotification: false,
|
||||
showDrainStoppedNotification: false,
|
||||
});
|
||||
}
|
||||
|
||||
startWatchers(controller, model) {
|
||||
if (model) {
|
||||
controller.set('watchModel', this.watch.perform(model));
|
||||
controller.set('watchAllocations', this.watchAllocations.perform(model));
|
||||
}
|
||||
}
|
||||
|
||||
@watchRecord('node') watch;
|
||||
@watchRelationship('allocations') watchAllocations;
|
||||
|
||||
@collect('watch', 'watchAllocations') watchers;
|
||||
}
|
||||
|
|
@ -1,4 +1,14 @@
|
|||
import Route from '@ember/routing/route';
|
||||
import WithModelErrorHandling from 'nomad-ui/mixins/with-model-error-handling';
|
||||
|
||||
export default class ServerRoute extends Route.extend(WithModelErrorHandling) {}
|
||||
export default class ServerRoute extends Route.extend(WithModelErrorHandling) {
|
||||
breadcrumbs(model) {
|
||||
if (!model) return [];
|
||||
return [
|
||||
{
|
||||
label: model.name,
|
||||
args: ['servers.server', model.id],
|
||||
},
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,6 +47,10 @@
|
|||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.boxed-section-body {
|
||||
|
|
|
|||
|
|
@ -32,6 +32,18 @@
|
|||
color: rgba($white, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
&.is-compact {
|
||||
margin: -0.25em 0;
|
||||
|
||||
&.pull-right {
|
||||
margin-right: -1em;
|
||||
}
|
||||
|
||||
&.pull-left {
|
||||
margin-left: -1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{title "Allocation " model.name}}
|
||||
{{allocation-subnav allocation=model}}
|
||||
<AllocationSubnav @allocation={{model}} />
|
||||
<section class="section">
|
||||
{{#if error}}
|
||||
<div data-test-inline-error class="notification is-danger">
|
||||
|
|
|
|||
|
|
@ -1,478 +1 @@
|
|||
{{title "Client " (or model.name model.shortId)}}
|
||||
<section class="section with-headspace">
|
||||
{{#if eligibilityError}}
|
||||
<div data-test-eligibility-error class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-danger">
|
||||
<h3 data-test-title class="title is-4">Eligibility Error</h3>
|
||||
<p data-test-message>{{eligibilityError}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dismiss class="button is-danger" onclick={{action (mut eligibilityError) ""}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if stopDrainError}}
|
||||
<div data-test-stop-drain-error class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-danger">
|
||||
<h3 data-test-title class="title is-4">Stop Drain Error</h3>
|
||||
<p data-test-message>{{stopDrainError}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dismiss class="button is-danger" onclick={{action (mut stopDrainError) ""}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if drainError}}
|
||||
<div data-test-drain-error class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-danger">
|
||||
<h3 data-test-title class="title is-4">Drain Error</h3>
|
||||
<p data-test-message>{{drainError}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dismiss class="button is-danger" onclick={{action (mut drainError) ""}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if showDrainStoppedNotification}}
|
||||
<div class="notification is-info">
|
||||
<div data-test-drain-stopped-notification class="columns">
|
||||
<div class="column">
|
||||
<h3 data-test-title class="title is-4">Drain Stopped</h3>
|
||||
<p data-test-message>The drain has been stopped and the node has been set to ineligible.</p>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dismiss class="button is-info" onclick={{action (mut showDrainStoppedNotification) false}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if showDrainUpdateNotification}}
|
||||
<div class="notification is-info">
|
||||
<div data-test-drain-updated-notification class="columns">
|
||||
<div class="column">
|
||||
<h3 data-test-title class="title is-4">Drain Updated</h3>
|
||||
<p data-test-message>The new drain specification has been applied.</p>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dismiss class="button is-info" onclick={{action (mut showDrainUpdateNotification) false}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if showDrainNotification}}
|
||||
<div class="notification is-info">
|
||||
<div data-test-drain-complete-notification class="columns">
|
||||
<div class="column">
|
||||
<h3 data-test-title class="title is-4">Drain Complete</h3>
|
||||
<p data-test-message>Allocations have been drained and the node has been set to ineligible.</p>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dimiss class="button is-info" onclick={{action (mut showDrainNotification) false}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-item is-top-aligned is-minimum">
|
||||
<span class="title">
|
||||
<span data-test-node-status="{{model.compositeStatus}}" class="node-status-light {{model.compositeStatus}}">
|
||||
{{x-icon model.compositeStatusIcon}}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="toolbar-item">
|
||||
<h1 data-test-title class="title with-subheading">
|
||||
{{or model.name model.shortId}}
|
||||
</h1>
|
||||
<p>
|
||||
<label class="is-interactive">
|
||||
{{#toggle
|
||||
data-test-eligibility-toggle
|
||||
isActive=model.isEligible
|
||||
isDisabled=(or setEligibility.isRunning model.isDraining (cannot "write client"))
|
||||
onToggle=(perform setEligibility (not model.isEligible))}}
|
||||
Eligible
|
||||
{{/toggle}}
|
||||
<span class="tooltip" aria-label="Only eligible clients can receive allocations">
|
||||
{{x-icon "info-circle-outline" class="is-faded"}}
|
||||
</span>
|
||||
</label>
|
||||
<span data-test-node-id class="tag is-hollow is-small no-text-transform">
|
||||
{{model.id}}
|
||||
<CopyButton @clipboardText={{model.id}} />
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="toolbar-item is-right-aligned is-top-aligned">
|
||||
{{#if model.isDraining}}
|
||||
<TwoStepButton
|
||||
data-test-drain-stop
|
||||
@idleText="Stop Drain"
|
||||
@cancelText="Cancel"
|
||||
@confirmText="Yes, Stop"
|
||||
@confirmationMessage="Are you sure you want to stop this drain?"
|
||||
@awaitingConfirmation={{stopDrain.isRunning}}
|
||||
@onConfirm={{perform stopDrain}} />
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="toolbar-item is-right-aligned is-top-aligned">
|
||||
<DrainPopover
|
||||
@client={{model}}
|
||||
@isDisabled={{cannot "write client"}}
|
||||
@onDrain={{action "drainNotify"}}
|
||||
@onError={{action "setDrainError"}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boxed-section is-small">
|
||||
<div class="boxed-section-body inline-definitions">
|
||||
<span class="label">Client Details</span>
|
||||
<span class="pair" data-test-status-definition>
|
||||
<span class="term">Status</span>
|
||||
<span class="status-text node-{{model.status}}">{{model.status}}</span>
|
||||
</span>
|
||||
<span class="pair" data-test-address-definition>
|
||||
<span class="term">Address</span>
|
||||
{{model.httpAddr}}
|
||||
</span>
|
||||
<span class="pair" data-test-datacenter-definition>
|
||||
<span class="term">Datacenter</span>
|
||||
{{model.datacenter}}
|
||||
</span>
|
||||
<span class="pair" data-test-driver-health>
|
||||
<span class="term">Drivers</span>
|
||||
{{#if model.unhealthyDrivers.length}}
|
||||
{{x-icon "warning" class="is-text is-warning"}}
|
||||
{{model.unhealthyDrivers.length}} of {{model.detectedDrivers.length}} {{pluralize "driver" model.detectedDrivers.length}} unhealthy
|
||||
{{else}}
|
||||
All healthy
|
||||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if model.drainStrategy}}
|
||||
<div data-test-drain-details class="boxed-section is-info">
|
||||
<div class="boxed-section-head">
|
||||
<div class="boxed-section-row">Drain Strategy</div>
|
||||
<div class="boxed-section-row">
|
||||
<div class="inline-definitions is-small">
|
||||
{{#if (not model.drainStrategy.hasNoDeadline)}}
|
||||
<span class="pair">
|
||||
<span class="term">Duration</span>
|
||||
{{#if model.drainStrategy.isForced}}
|
||||
<span data-test-duration>--</span>
|
||||
{{else}}
|
||||
<span data-test-duration class="tooltip" aria-label={{format-duration model.drainStrategy.deadline}}>
|
||||
{{format-duration model.drainStrategy.deadline}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
<span class="pair">
|
||||
<span class="term">{{if model.drainStrategy.hasNoDeadline "Deadline" "Remaining"}}</span>
|
||||
{{#if model.drainStrategy.hasNoDeadline}}
|
||||
<span data-test-deadline>No deadline</span>
|
||||
{{else if model.drainStrategy.isForced}}
|
||||
<span data-test-deadline>--</span>
|
||||
{{else}}
|
||||
<span data-test-deadline class="tooltip" aria-label={{format-ts model.drainStrategy.forceDeadline}}>
|
||||
{{moment-from-now model.drainStrategy.forceDeadline interval=1000 hideAffix=true}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
<span data-test-force-drain-text class="pair">
|
||||
<span class="term">Force Drain</span>
|
||||
{{#if model.drainStrategy.isForced}}
|
||||
{{x-icon "warning" class="is-text is-warning"}} Yes
|
||||
{{else}}
|
||||
No
|
||||
{{/if}}
|
||||
</span>
|
||||
<span data-test-drain-system-jobs-text class="pair">
|
||||
<span class="term">Drain System Jobs</span>
|
||||
{{if model.drainStrategy.ignoreSystemJobs "No" "Yes"}}
|
||||
</span>
|
||||
</div>
|
||||
{{#if (not model.drainStrategy.isForced)}}
|
||||
<div class="pull-right">
|
||||
<TwoStepButton
|
||||
data-test-force
|
||||
@alignRight={{true}}
|
||||
@isInfoAction={{true}}
|
||||
@idleText="Force Drain"
|
||||
@cancelText="Cancel"
|
||||
@confirmText="Yes, Force Drain"
|
||||
@confirmationMessage="Are you sure you want to force drain?"
|
||||
@awaitingConfirmation={{forceDrain.isRunning}}
|
||||
@onConfirm={{perform forceDrain}} />
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxed-section-body">
|
||||
<div class="columns">
|
||||
<div class="column nowrap is-minimum">
|
||||
<div class="metric-group">
|
||||
<div class="metric is-primary">
|
||||
<h3 class="label">Complete</h3>
|
||||
<p data-test-complete-count class="value">{{model.completeAllocations.length}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-group">
|
||||
<div class="metric">
|
||||
<h3 class="label">Migrating</h3>
|
||||
<p data-test-migrating-count class="value">{{model.migratingAllocations.length}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-group">
|
||||
<div class="metric">
|
||||
<h3 class="label">Remaining</h3>
|
||||
<p data-test-remaining-count class="value">{{model.runningAllocations.length}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3 class="title is-4">Status</h3>
|
||||
{{#if model.lastMigrateTime}}
|
||||
<p data-test-status>{{moment-to-now model.lastMigrateTime interval=1000 hideAffix=true}} since an allocation was successfully migrated.</p>
|
||||
{{else}}
|
||||
<p data-test-status>No allocations migrated.</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="boxed-section">
|
||||
<div class="boxed-section-head is-hollow">
|
||||
Resource Utilization
|
||||
</div>
|
||||
<div class="boxed-section-body">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<PrimaryMetric @resource={{model}} @metric="cpu" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<PrimaryMetric @resource={{model}} @metric="memory" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
<div>
|
||||
Allocations
|
||||
<button role="button" class="badge is-white" onclick={{action "setPreemptionFilter" false}} data-test-filter-all>
|
||||
{{model.allocations.length}}
|
||||
</button>
|
||||
{{#if preemptions.length}}
|
||||
<button role="button" class="badge is-warning" onclick={{action "setPreemptionFilter" true}} data-test-filter-preemptions>
|
||||
{{preemptions.length}} {{pluralize "preemption" preemptions.length}}
|
||||
</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
<SearchBox
|
||||
@searchTerm={{mut searchTerm}}
|
||||
@onChange={{action resetPagination}}
|
||||
@placeholder="Search allocations..."
|
||||
@class="is-inline pull-right"
|
||||
@inputClass="is-compact" />
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<ListPagination
|
||||
@source={{sortedAllocations}}
|
||||
@size={{pageSize}}
|
||||
@page={{currentPage}} as |p|>
|
||||
<ListTable
|
||||
@source={{p.list}}
|
||||
@sortProperty={{sortProperty}}
|
||||
@sortDescending={{sortDescending}}
|
||||
@class="with-foot" as |t|>
|
||||
<t.head>
|
||||
<th class="is-narrow"></th>
|
||||
<t.sort-by @prop="shortId">ID</t.sort-by>
|
||||
<t.sort-by @prop="modifyIndex" @title="Modify Index">Modified</t.sort-by>
|
||||
<t.sort-by @prop="createIndex" @title="Create Index">Created</t.sort-by>
|
||||
<t.sort-by @prop="statusIndex">Status</t.sort-by>
|
||||
<t.sort-by @prop="job.name">Job</t.sort-by>
|
||||
<t.sort-by @prop="jobVersion">Version</t.sort-by>
|
||||
<th>Volume</th>
|
||||
<th>CPU</th>
|
||||
<th>Memory</th>
|
||||
</t.head>
|
||||
<t.body as |row|>
|
||||
<AllocationRow
|
||||
@allocation={{row.model}}
|
||||
@context="node"
|
||||
@onClick={{action "gotoAllocation" row.model}}
|
||||
@data-test-allocation={{row.model.id}} />
|
||||
</t.body>
|
||||
</ListTable>
|
||||
<div class="table-foot">
|
||||
<nav class="pagination">
|
||||
<div class="pagination-numbers">
|
||||
{{p.startsAt}}–{{p.endsAt}} of {{sortedAllocations.length}}
|
||||
</div>
|
||||
<p.prev @class="pagination-previous"> < </p.prev>
|
||||
<p.next @class="pagination-next"> > </p.next>
|
||||
<ul class="pagination-list"></ul>
|
||||
</nav>
|
||||
</div>
|
||||
</ListPagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-test-client-events class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
Client Events
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<ListTable @source={{sortedEvents}} @class="is-striped" as |t|>
|
||||
<t.head>
|
||||
<th class="is-2">Time</th>
|
||||
<th class="is-2">Subsystem</th>
|
||||
<th>Message</th>
|
||||
</t.head>
|
||||
<t.body as |row|>
|
||||
<tr data-test-client-event>
|
||||
<td data-test-client-event-time>{{format-ts row.model.time}}</td>
|
||||
<td data-test-client-event-subsystem>{{row.model.subsystem}}</td>
|
||||
<td data-test-client-event-message>
|
||||
{{#if row.model.message}}
|
||||
{{#if row.model.driver}}
|
||||
<span class="badge is-secondary is-small">{{row.model.driver}}</span>
|
||||
{{/if}}
|
||||
{{row.model.message}}
|
||||
{{else}}
|
||||
<em>No message</em>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
</t.body>
|
||||
</ListTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if sortedHostVolumes.length}}
|
||||
<div data-test-client-host-volumes class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
Host Volumes
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<ListTable @source={{sortedHostVolumes}} @class="is-striped" as |t|>
|
||||
<t.head>
|
||||
<th>Name</th>
|
||||
<th>Source</th>
|
||||
<th>Permissions</th>
|
||||
</t.head>
|
||||
<t.body as |row|>
|
||||
<tr data-test-client-host-volume>
|
||||
<td data-test-name>{{row.model.name}}</td>
|
||||
<td data-test-path><code>{{row.model.path}}</code></td>
|
||||
<td data-test-permissions>{{if row.model.readOnly "Read" "Read/Write"}}</td>
|
||||
</tr>
|
||||
</t.body>
|
||||
</ListTable>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div data-test-driver-status class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
Driver Status
|
||||
</div>
|
||||
<div class="boxed-section-body">
|
||||
<ListAccordion @source={{sortedDrivers}} @key="name" as |a|>
|
||||
<a.head @buttonLabel="details" @isExpandable={{a.item.detected}}>
|
||||
<div class="columns inline-definitions {{unless a.item.detected "is-faded"}}">
|
||||
<div class="column is-1">
|
||||
<span data-test-name>{{a.item.name}}</span>
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
{{#if a.item.detected}}
|
||||
<span data-test-health>
|
||||
<span class="color-swatch {{a.item.healthClass}}"></span>
|
||||
{{if a.item.healthy "Healthy" "Unhealthy"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="column">
|
||||
<span class="pair">
|
||||
<span class="term">Detected</span>
|
||||
<span data-test-detected>{{if a.item.detected "Yes" "No"}}</span>
|
||||
</span>
|
||||
<span class="is-pulled-right">
|
||||
<span class="pair">
|
||||
<span class="term">Last Updated</span>
|
||||
<span data-test-last-updated class="tooltip" aria-label="{{format-ts a.item.updateTime}}">
|
||||
{{moment-from-now a.item.updateTime interval=1000}}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a.head>
|
||||
<a.body>
|
||||
<p data-test-health-description class="message">{{a.item.healthDescription}}</p>
|
||||
<div data-test-driver-attributes class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
{{capitalize a.item.name}} Attributes
|
||||
</div>
|
||||
{{#if a.item.attributes.attributesStructured}}
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<AttributesTable
|
||||
@attributes={{a.item.attributesShort}}
|
||||
@class="attributes-table" />
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="boxed-section-body">
|
||||
<div class="empty-message">
|
||||
<h3 class="empty-message-headline">No Driver Attributes</h3>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</a.body>
|
||||
</ListAccordion>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
Attributes
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<AttributesTable
|
||||
data-test-attributes
|
||||
@attributes={{model.attributes.attributesStructured}}
|
||||
@class="attributes-table" />
|
||||
</div>
|
||||
<div class="boxed-section-head">
|
||||
Meta
|
||||
</div>
|
||||
{{#if model.meta.attributesStructured}}
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<AttributesTable
|
||||
data-test-meta
|
||||
@attributes={{model.meta.attributesStructured}}
|
||||
@class="attributes-table" />
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="boxed-section-body">
|
||||
<div data-test-empty-meta-message class="empty-message">
|
||||
<h3 class="empty-message-headline">No Meta Attributes</h3>
|
||||
<p class="empty-message-body">This client is configured with no meta attributes.</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
{{outlet}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,479 @@
|
|||
{{title "Client " (or model.name model.shortId)}}
|
||||
<ClientSubnav @client={{model}} />
|
||||
<section class="section">
|
||||
{{#if eligibilityError}}
|
||||
<div data-test-eligibility-error class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-danger">
|
||||
<h3 data-test-title class="title is-4">Eligibility Error</h3>
|
||||
<p data-test-message>{{eligibilityError}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dismiss class="button is-danger" onclick={{action (mut eligibilityError) ""}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if stopDrainError}}
|
||||
<div data-test-stop-drain-error class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-danger">
|
||||
<h3 data-test-title class="title is-4">Stop Drain Error</h3>
|
||||
<p data-test-message>{{stopDrainError}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dismiss class="button is-danger" onclick={{action (mut stopDrainError) ""}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if drainError}}
|
||||
<div data-test-drain-error class="columns">
|
||||
<div class="column">
|
||||
<div class="notification is-danger">
|
||||
<h3 data-test-title class="title is-4">Drain Error</h3>
|
||||
<p data-test-message>{{drainError}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dismiss class="button is-danger" onclick={{action (mut drainError) ""}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if showDrainStoppedNotification}}
|
||||
<div class="notification is-info">
|
||||
<div data-test-drain-stopped-notification class="columns">
|
||||
<div class="column">
|
||||
<h3 data-test-title class="title is-4">Drain Stopped</h3>
|
||||
<p data-test-message>The drain has been stopped and the node has been set to ineligible.</p>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dismiss class="button is-info" onclick={{action (mut showDrainStoppedNotification) false}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if showDrainUpdateNotification}}
|
||||
<div class="notification is-info">
|
||||
<div data-test-drain-updated-notification class="columns">
|
||||
<div class="column">
|
||||
<h3 data-test-title class="title is-4">Drain Updated</h3>
|
||||
<p data-test-message>The new drain specification has been applied.</p>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dismiss class="button is-info" onclick={{action (mut showDrainUpdateNotification) false}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{#if showDrainNotification}}
|
||||
<div class="notification is-info">
|
||||
<div data-test-drain-complete-notification class="columns">
|
||||
<div class="column">
|
||||
<h3 data-test-title class="title is-4">Drain Complete</h3>
|
||||
<p data-test-message>Allocations have been drained and the node has been set to ineligible.</p>
|
||||
</div>
|
||||
<div class="column is-centered is-minimum">
|
||||
<button data-test-dimiss class="button is-info" onclick={{action (mut showDrainNotification) false}}>Okay</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="toolbar">
|
||||
<div class="toolbar-item is-top-aligned is-minimum">
|
||||
<span class="title">
|
||||
<span data-test-node-status="{{model.compositeStatus}}" class="node-status-light {{model.compositeStatus}}">
|
||||
{{x-icon model.compositeStatusIcon}}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="toolbar-item">
|
||||
<h1 data-test-title class="title with-subheading">
|
||||
{{or model.name model.shortId}}
|
||||
</h1>
|
||||
<p>
|
||||
<label class="is-interactive">
|
||||
{{#toggle
|
||||
data-test-eligibility-toggle
|
||||
isActive=model.isEligible
|
||||
isDisabled=(or setEligibility.isRunning model.isDraining (cannot "write client"))
|
||||
onToggle=(perform setEligibility (not model.isEligible))}}
|
||||
Eligible
|
||||
{{/toggle}}
|
||||
<span class="tooltip" aria-label="Only eligible clients can receive allocations">
|
||||
{{x-icon "info-circle-outline" class="is-faded"}}
|
||||
</span>
|
||||
</label>
|
||||
<span data-test-node-id class="tag is-hollow is-small no-text-transform">
|
||||
{{model.id}}
|
||||
<CopyButton @clipboardText={{model.id}} />
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="toolbar-item is-right-aligned is-top-aligned">
|
||||
{{#if model.isDraining}}
|
||||
<TwoStepButton
|
||||
data-test-drain-stop
|
||||
@idleText="Stop Drain"
|
||||
@cancelText="Cancel"
|
||||
@confirmText="Yes, Stop"
|
||||
@confirmationMessage="Are you sure you want to stop this drain?"
|
||||
@awaitingConfirmation={{stopDrain.isRunning}}
|
||||
@onConfirm={{perform stopDrain}} />
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="toolbar-item is-right-aligned is-top-aligned">
|
||||
<DrainPopover
|
||||
@client={{model}}
|
||||
@isDisabled={{cannot "write client"}}
|
||||
@onDrain={{action "drainNotify"}}
|
||||
@onError={{action "setDrainError"}} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boxed-section is-small">
|
||||
<div class="boxed-section-body inline-definitions">
|
||||
<span class="label">Client Details</span>
|
||||
<span class="pair" data-test-status-definition>
|
||||
<span class="term">Status</span>
|
||||
<span class="status-text node-{{model.status}}">{{model.status}}</span>
|
||||
</span>
|
||||
<span class="pair" data-test-address-definition>
|
||||
<span class="term">Address</span>
|
||||
{{model.httpAddr}}
|
||||
</span>
|
||||
<span class="pair" data-test-datacenter-definition>
|
||||
<span class="term">Datacenter</span>
|
||||
{{model.datacenter}}
|
||||
</span>
|
||||
<span class="pair" data-test-driver-health>
|
||||
<span class="term">Drivers</span>
|
||||
{{#if model.unhealthyDrivers.length}}
|
||||
{{x-icon "warning" class="is-text is-warning"}}
|
||||
{{model.unhealthyDrivers.length}} of {{model.detectedDrivers.length}} {{pluralize "driver" model.detectedDrivers.length}} unhealthy
|
||||
{{else}}
|
||||
All healthy
|
||||
{{/if}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if model.drainStrategy}}
|
||||
<div data-test-drain-details class="boxed-section is-info">
|
||||
<div class="boxed-section-head">
|
||||
<div class="boxed-section-row">Drain Strategy</div>
|
||||
<div class="boxed-section-row">
|
||||
<div class="inline-definitions is-small">
|
||||
{{#if (not model.drainStrategy.hasNoDeadline)}}
|
||||
<span class="pair">
|
||||
<span class="term">Duration</span>
|
||||
{{#if model.drainStrategy.isForced}}
|
||||
<span data-test-duration>--</span>
|
||||
{{else}}
|
||||
<span data-test-duration class="tooltip" aria-label={{format-duration model.drainStrategy.deadline}}>
|
||||
{{format-duration model.drainStrategy.deadline}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
{{/if}}
|
||||
<span class="pair">
|
||||
<span class="term">{{if model.drainStrategy.hasNoDeadline "Deadline" "Remaining"}}</span>
|
||||
{{#if model.drainStrategy.hasNoDeadline}}
|
||||
<span data-test-deadline>No deadline</span>
|
||||
{{else if model.drainStrategy.isForced}}
|
||||
<span data-test-deadline>--</span>
|
||||
{{else}}
|
||||
<span data-test-deadline class="tooltip" aria-label={{format-ts model.drainStrategy.forceDeadline}}>
|
||||
{{moment-from-now model.drainStrategy.forceDeadline interval=1000 hideAffix=true}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</span>
|
||||
<span data-test-force-drain-text class="pair">
|
||||
<span class="term">Force Drain</span>
|
||||
{{#if model.drainStrategy.isForced}}
|
||||
{{x-icon "warning" class="is-text is-warning"}} Yes
|
||||
{{else}}
|
||||
No
|
||||
{{/if}}
|
||||
</span>
|
||||
<span data-test-drain-system-jobs-text class="pair">
|
||||
<span class="term">Drain System Jobs</span>
|
||||
{{if model.drainStrategy.ignoreSystemJobs "No" "Yes"}}
|
||||
</span>
|
||||
</div>
|
||||
{{#if (not model.drainStrategy.isForced)}}
|
||||
<div class="pull-right">
|
||||
<TwoStepButton
|
||||
data-test-force
|
||||
@alignRight={{true}}
|
||||
@isInfoAction={{true}}
|
||||
@idleText="Force Drain"
|
||||
@cancelText="Cancel"
|
||||
@confirmText="Yes, Force Drain"
|
||||
@confirmationMessage="Are you sure you want to force drain?"
|
||||
@awaitingConfirmation={{forceDrain.isRunning}}
|
||||
@onConfirm={{perform forceDrain}} />
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxed-section-body">
|
||||
<div class="columns">
|
||||
<div class="column nowrap is-minimum">
|
||||
<div class="metric-group">
|
||||
<div class="metric is-primary">
|
||||
<h3 class="label">Complete</h3>
|
||||
<p data-test-complete-count class="value">{{model.completeAllocations.length}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-group">
|
||||
<div class="metric">
|
||||
<h3 class="label">Migrating</h3>
|
||||
<p data-test-migrating-count class="value">{{model.migratingAllocations.length}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metric-group">
|
||||
<div class="metric">
|
||||
<h3 class="label">Remaining</h3>
|
||||
<p data-test-remaining-count class="value">{{model.runningAllocations.length}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3 class="title is-4">Status</h3>
|
||||
{{#if model.lastMigrateTime}}
|
||||
<p data-test-status>{{moment-to-now model.lastMigrateTime interval=1000 hideAffix=true}} since an allocation was successfully migrated.</p>
|
||||
{{else}}
|
||||
<p data-test-status>No allocations migrated.</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="boxed-section">
|
||||
<div class="boxed-section-head is-hollow">
|
||||
Resource Utilization
|
||||
</div>
|
||||
<div class="boxed-section-body">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<PrimaryMetric @resource={{model}} @metric="cpu" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<PrimaryMetric @resource={{model}} @metric="memory" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
<div>
|
||||
Allocations
|
||||
<button role="button" class="badge is-white" onclick={{action "setPreemptionFilter" false}} data-test-filter-all>
|
||||
{{model.allocations.length}}
|
||||
</button>
|
||||
{{#if preemptions.length}}
|
||||
<button role="button" class="badge is-warning" onclick={{action "setPreemptionFilter" true}} data-test-filter-preemptions>
|
||||
{{preemptions.length}} {{pluralize "preemption" preemptions.length}}
|
||||
</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
<SearchBox
|
||||
@searchTerm={{mut searchTerm}}
|
||||
@onChange={{action resetPagination}}
|
||||
@placeholder="Search allocations..."
|
||||
@class="is-inline pull-right"
|
||||
@inputClass="is-compact" />
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<ListPagination
|
||||
@source={{sortedAllocations}}
|
||||
@size={{pageSize}}
|
||||
@page={{currentPage}} as |p|>
|
||||
<ListTable
|
||||
@source={{p.list}}
|
||||
@sortProperty={{sortProperty}}
|
||||
@sortDescending={{sortDescending}}
|
||||
@class="with-foot" as |t|>
|
||||
<t.head>
|
||||
<th class="is-narrow"></th>
|
||||
<t.sort-by @prop="shortId">ID</t.sort-by>
|
||||
<t.sort-by @prop="modifyIndex" @title="Modify Index">Modified</t.sort-by>
|
||||
<t.sort-by @prop="createIndex" @title="Create Index">Created</t.sort-by>
|
||||
<t.sort-by @prop="statusIndex">Status</t.sort-by>
|
||||
<t.sort-by @prop="job.name">Job</t.sort-by>
|
||||
<t.sort-by @prop="jobVersion">Version</t.sort-by>
|
||||
<th>Volume</th>
|
||||
<th>CPU</th>
|
||||
<th>Memory</th>
|
||||
</t.head>
|
||||
<t.body as |row|>
|
||||
<AllocationRow
|
||||
@allocation={{row.model}}
|
||||
@context="node"
|
||||
@onClick={{action "gotoAllocation" row.model}}
|
||||
@data-test-allocation={{row.model.id}} />
|
||||
</t.body>
|
||||
</ListTable>
|
||||
<div class="table-foot">
|
||||
<nav class="pagination">
|
||||
<div class="pagination-numbers">
|
||||
{{p.startsAt}}–{{p.endsAt}} of {{sortedAllocations.length}}
|
||||
</div>
|
||||
<p.prev @class="pagination-previous"> < </p.prev>
|
||||
<p.next @class="pagination-next"> > </p.next>
|
||||
<ul class="pagination-list"></ul>
|
||||
</nav>
|
||||
</div>
|
||||
</ListPagination>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div data-test-client-events class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
Client Events
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<ListTable @source={{sortedEvents}} @class="is-striped" as |t|>
|
||||
<t.head>
|
||||
<th class="is-2">Time</th>
|
||||
<th class="is-2">Subsystem</th>
|
||||
<th>Message</th>
|
||||
</t.head>
|
||||
<t.body as |row|>
|
||||
<tr data-test-client-event>
|
||||
<td data-test-client-event-time>{{format-ts row.model.time}}</td>
|
||||
<td data-test-client-event-subsystem>{{row.model.subsystem}}</td>
|
||||
<td data-test-client-event-message>
|
||||
{{#if row.model.message}}
|
||||
{{#if row.model.driver}}
|
||||
<span class="badge is-secondary is-small">{{row.model.driver}}</span>
|
||||
{{/if}}
|
||||
{{row.model.message}}
|
||||
{{else}}
|
||||
<em>No message</em>
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
</t.body>
|
||||
</ListTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if sortedHostVolumes.length}}
|
||||
<div data-test-client-host-volumes class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
Host Volumes
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<ListTable @source={{sortedHostVolumes}} @class="is-striped" as |t|>
|
||||
<t.head>
|
||||
<th>Name</th>
|
||||
<th>Source</th>
|
||||
<th>Permissions</th>
|
||||
</t.head>
|
||||
<t.body as |row|>
|
||||
<tr data-test-client-host-volume>
|
||||
<td data-test-name>{{row.model.name}}</td>
|
||||
<td data-test-path><code>{{row.model.path}}</code></td>
|
||||
<td data-test-permissions>{{if row.model.readOnly "Read" "Read/Write"}}</td>
|
||||
</tr>
|
||||
</t.body>
|
||||
</ListTable>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div data-test-driver-status class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
Driver Status
|
||||
</div>
|
||||
<div class="boxed-section-body">
|
||||
<ListAccordion @source={{sortedDrivers}} @key="name" as |a|>
|
||||
<a.head @buttonLabel="details" @isExpandable={{a.item.detected}}>
|
||||
<div class="columns inline-definitions {{unless a.item.detected "is-faded"}}">
|
||||
<div class="column is-1">
|
||||
<span data-test-name>{{a.item.name}}</span>
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
{{#if a.item.detected}}
|
||||
<span data-test-health>
|
||||
<span class="color-swatch {{a.item.healthClass}}"></span>
|
||||
{{if a.item.healthy "Healthy" "Unhealthy"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="column">
|
||||
<span class="pair">
|
||||
<span class="term">Detected</span>
|
||||
<span data-test-detected>{{if a.item.detected "Yes" "No"}}</span>
|
||||
</span>
|
||||
<span class="is-pulled-right">
|
||||
<span class="pair">
|
||||
<span class="term">Last Updated</span>
|
||||
<span data-test-last-updated class="tooltip" aria-label="{{format-ts a.item.updateTime}}">
|
||||
{{moment-from-now a.item.updateTime interval=1000}}
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a.head>
|
||||
<a.body>
|
||||
<p data-test-health-description class="message">{{a.item.healthDescription}}</p>
|
||||
<div data-test-driver-attributes class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
{{capitalize a.item.name}} Attributes
|
||||
</div>
|
||||
{{#if a.item.attributes.attributesStructured}}
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<AttributesTable
|
||||
@attributes={{a.item.attributesShort}}
|
||||
@class="attributes-table" />
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="boxed-section-body">
|
||||
<div class="empty-message">
|
||||
<h3 class="empty-message-headline">No Driver Attributes</h3>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</a.body>
|
||||
</ListAccordion>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
Attributes
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<AttributesTable
|
||||
data-test-attributes
|
||||
@attributes={{model.attributes.attributesStructured}}
|
||||
@class="attributes-table" />
|
||||
</div>
|
||||
<div class="boxed-section-head">
|
||||
Meta
|
||||
</div>
|
||||
{{#if model.meta.attributesStructured}}
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<AttributesTable
|
||||
data-test-meta
|
||||
@attributes={{model.meta.attributesStructured}}
|
||||
@class="attributes-table" />
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="boxed-section-body">
|
||||
<div data-test-empty-meta-message class="empty-message">
|
||||
<h3 class="empty-message-headline">No Meta Attributes</h3>
|
||||
<p class="empty-message-body">This client is configured with no meta attributes.</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{{title "Client " (or model.name model.shortId)}}
|
||||
<ClientSubnav @client={{model}} />
|
||||
<section class="section">
|
||||
{{#if (can "read agent")}}
|
||||
<AgentMonitor
|
||||
@level={{level}}
|
||||
@client={{model}}
|
||||
@onLevelChange={{action (mut level)}} />
|
||||
{{else}}
|
||||
<ForbiddenMessage @permission="agent:read" />
|
||||
{{/if}}
|
||||
</section>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<div class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
<PowerSelect
|
||||
data-test-level-switcher
|
||||
@tagName="div"
|
||||
@triggerClass="is-compact pull-left"
|
||||
@options={{levels}}
|
||||
@selected={{level}}
|
||||
@searchEnabled={{false}}
|
||||
@onChange={{action setLevel}} as |level|>
|
||||
<span class="ember-power-select-prefix">Level: </span>{{capitalize level}}
|
||||
</PowerSelect>
|
||||
<button data-test-toggle class="button is-white is-compact pull-right" {{action toggleStream}}>
|
||||
{{x-icon (if logger.isStreaming "media-pause" "media-play") class="is-text"}}
|
||||
</button>
|
||||
</div>
|
||||
<div data-test-log-box class="boxed-section-body is-dark is-full-bleed">
|
||||
<StreamingFile @logger={{logger}} @isStreaming={{isStreaming}} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<div class="tabs is-subnav">
|
||||
<ul>
|
||||
<li>{{#link-to "clients.client.index" client activeClass="is-active"}}Overview{{/link-to}}</li>
|
||||
<li>{{#link-to "clients.client.monitor" client activeClass="is-active"}}Monitor{{/link-to}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div data-test-error class="empty-message">
|
||||
<h3 data-test-error-title class="empty-message-headline">Not Authorized</h3>
|
||||
<p data-test-error-message class="empty-message-body">
|
||||
{{#if token.secret}}
|
||||
Your <LinkTo @route="settings.tokens">ACL token</LinkTo> does not provide the
|
||||
{{#if permission}}
|
||||
<code>{{permission}}</code>
|
||||
{{else}}
|
||||
required
|
||||
{{/if}}
|
||||
permission. Contact your administrator if this is an error.
|
||||
{{else}}
|
||||
Provide an <LinkTo @route="settings.tokens">ACL token</LinkTo> with the
|
||||
{{#if permission}}
|
||||
<code>{{permission}}</code>
|
||||
{{else}}
|
||||
requisite
|
||||
{{/if}}
|
||||
permission to view this.
|
||||
{{/if}}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<div class="tabs is-subnav">
|
||||
<ul>
|
||||
<li>{{#link-to "servers.server.index" server activeClass="is-active"}}Overview{{/link-to}}</li>
|
||||
<li>{{#link-to "servers.server.monitor" server activeClass="is-active"}}Monitor{{/link-to}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,41 +1,3 @@
|
|||
<PageLayout>
|
||||
<section class="section">
|
||||
{{#if isForbidden}}
|
||||
{{partial "partials/forbidden-message"}}
|
||||
{{else}}
|
||||
<ListPagination
|
||||
@source={{sortedAgents}}
|
||||
@size={{pageSize}}
|
||||
@page={{currentPage}} as |p|>
|
||||
<ListTable
|
||||
@source={{p.list}}
|
||||
@sortProperty={{sortProperty}}
|
||||
@sortDescending={{sortDescending}}
|
||||
@class="with-foot" as |t|>
|
||||
<t.head>
|
||||
<t.sort-by @prop="name">Name</t.sort-by>
|
||||
<t.sort-by @prop="status">Status</t.sort-by>
|
||||
<t.sort-by @prop="isLeader">Leader</t.sort-by>
|
||||
<t.sort-by @prop="address">Address</t.sort-by>
|
||||
<t.sort-by @prop="serfPort">port</t.sort-by>
|
||||
<t.sort-by @prop="datacenter">Datacenter</t.sort-by>
|
||||
</t.head>
|
||||
<t.body as |row|>
|
||||
<ServerAgentRow data-test-server-agent-row @agent={{row.model}} />
|
||||
</t.body>
|
||||
</ListTable>
|
||||
<div class="table-foot">
|
||||
<nav class="pagination">
|
||||
<div class="pagination-numbers">
|
||||
{{p.startsAt}}–{{p.endsAt}} of {{sortedAgents.length}}
|
||||
</div>
|
||||
<p.prev @class="pagination-previous"> < </p.prev>
|
||||
<p.next @class="pagination-next"> > </p.next>
|
||||
<ul class="pagination-list"></ul>
|
||||
</nav>
|
||||
</div>
|
||||
</ListPagination>
|
||||
{{outlet}}
|
||||
{{/if}}
|
||||
</section>
|
||||
{{outlet}}
|
||||
</PageLayout>
|
||||
|
|
|
|||
|
|
@ -1 +1,39 @@
|
|||
{{title "Servers"}}
|
||||
{{title "Servers"}}
|
||||
<section class="section">
|
||||
{{#if isForbidden}}
|
||||
{{partial "partials/forbidden-message"}}
|
||||
{{else}}
|
||||
<ListPagination
|
||||
@source={{sortedAgents}}
|
||||
@size={{pageSize}}
|
||||
@page={{currentPage}} as |p|>
|
||||
<ListTable
|
||||
@source={{p.list}}
|
||||
@sortProperty={{sortProperty}}
|
||||
@sortDescending={{sortDescending}}
|
||||
@class="with-foot" as |t|>
|
||||
<t.head>
|
||||
<t.sort-by @prop="name">Name</t.sort-by>
|
||||
<t.sort-by @prop="status">Status</t.sort-by>
|
||||
<t.sort-by @prop="isLeader">Leader</t.sort-by>
|
||||
<t.sort-by @prop="address">Address</t.sort-by>
|
||||
<t.sort-by @prop="serfPort">port</t.sort-by>
|
||||
<t.sort-by @prop="datacenter">Datacenter</t.sort-by>
|
||||
</t.head>
|
||||
<t.body as |row|>
|
||||
<ServerAgentRow data-test-server-agent-row @agent={{row.model}} />
|
||||
</t.body>
|
||||
</ListTable>
|
||||
<div class="table-foot">
|
||||
<nav class="pagination">
|
||||
<div class="pagination-numbers">
|
||||
{{p.startsAt}}–{{p.endsAt}} of {{sortedAgents.length}}
|
||||
</div>
|
||||
<p.prev @class="pagination-previous"> < </p.prev>
|
||||
<p.next @class="pagination-next"> > </p.next>
|
||||
<ul class="pagination-list"></ul>
|
||||
</nav>
|
||||
</div>
|
||||
</ListPagination>
|
||||
{{/if}}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,26 +1 @@
|
|||
{{title "Server " model.name}}
|
||||
<div class="columns">
|
||||
<div class="column is-half">
|
||||
<div class="message">
|
||||
<div class="message-header">
|
||||
Tags
|
||||
</div>
|
||||
<table class="table server-tags">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Name</td>
|
||||
<td>Value</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each sortedTags as |tag|}}
|
||||
<tr data-test-server-tag>
|
||||
<td>{{tag.name}}</td>
|
||||
<td>{{tag.value}}</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{outlet}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
{{title "Server " model.name}}
|
||||
<ServerSubnav @server={{model}} />
|
||||
<section class="section">
|
||||
<h1 data-test-title class="title">
|
||||
Server {{model.name}}
|
||||
{{#if model.isLeader}}
|
||||
<span data-test-leader-badge class="bumper-left tag is-primary">Leader</span>
|
||||
{{/if}}
|
||||
</h1>
|
||||
<div class="boxed-section is-small">
|
||||
<div data-test-server-details class="boxed-section-body inline-definitions">
|
||||
<span class="label">Server Details</span>
|
||||
<span data-test-status class="pair"><span class="term">Status</span>
|
||||
{{model.status}}
|
||||
</span>
|
||||
<span data-test-address class="pair"><span class="term">Address</span>
|
||||
{{model.rpcAddr}}
|
||||
</span>
|
||||
<span data-test-datacenter class="pair"><span class="term">Datacenter</span>
|
||||
{{model.datacenter}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="boxed-section">
|
||||
<div class="boxed-section-head">
|
||||
Server Tags
|
||||
</div>
|
||||
<div class="boxed-section-body is-full-bleed">
|
||||
<ListTable @source={{sortedTags}} @class="is-striped" as |t|>
|
||||
<t.head>
|
||||
<td class="is-one-quarter">Name</td>
|
||||
<td>Value</td>
|
||||
</t.head>
|
||||
<t.body as |row|>
|
||||
<tr data-test-server-tag>
|
||||
<td>{{row.model.name}}</td>
|
||||
<td>{{row.model.value}}</td>
|
||||
</tr>
|
||||
</t.body>
|
||||
</ListTable>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
{{title "Server " model.name}}
|
||||
<ServerSubnav @server={{model}} />
|
||||
<section class="section">
|
||||
{{#if (can "read agent")}}
|
||||
<AgentMonitor
|
||||
@level={{level}}
|
||||
@server={{model}}
|
||||
@onLevelChange={{action (mut level)}} />
|
||||
{{else}}
|
||||
<ForbiddenMessage @permission="agent:read" />
|
||||
{{/if}}
|
||||
</section>
|
||||
|
|
@ -311,6 +311,24 @@ export default function() {
|
|||
};
|
||||
});
|
||||
|
||||
this.get('/agent/monitor', function({ agents, nodes }, { queryParams }) {
|
||||
const serverId = queryParams.server_id;
|
||||
const clientId = queryParams.client_id;
|
||||
|
||||
if (serverId && clientId)
|
||||
return new Response(400, {}, 'specify a client or a server, not both');
|
||||
if (serverId && !agents.findBy({ name: serverId }))
|
||||
return new Response(400, {}, 'specified server does not exist');
|
||||
if (clientId && !nodes.find(clientId))
|
||||
return new Response(400, {}, 'specified client does not exist');
|
||||
|
||||
if (queryParams.plain) {
|
||||
return logFrames.join('');
|
||||
}
|
||||
|
||||
return logEncode(logFrames, logFrames.length - 1);
|
||||
});
|
||||
|
||||
this.get('/status/leader', function(schema) {
|
||||
return JSON.stringify(findLeader(schema));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
import { currentURL } from '@ember/test-helpers';
|
||||
import { run } from '@ember/runloop';
|
||||
import { module, test } from 'qunit';
|
||||
import { setupApplicationTest } from 'ember-qunit';
|
||||
import { setupMirage } from 'ember-cli-mirage/test-support';
|
||||
import ClientMonitor from 'nomad-ui/tests/pages/clients/monitor';
|
||||
|
||||
let node;
|
||||
let managementToken;
|
||||
let clientToken;
|
||||
|
||||
module('Acceptance | client monitor', function(hooks) {
|
||||
setupApplicationTest(hooks);
|
||||
setupMirage(hooks);
|
||||
|
||||
hooks.beforeEach(function() {
|
||||
node = server.create('node');
|
||||
|
||||
managementToken = server.create('token');
|
||||
clientToken = server.create('token');
|
||||
|
||||
window.localStorage.nomadTokenSecret = managementToken.secretId;
|
||||
|
||||
server.create('agent');
|
||||
run.later(run, run.cancelTimers, 500);
|
||||
});
|
||||
|
||||
test('/clients/:id/monitor should have a breadcrumb trail linking back to clients', async function(assert) {
|
||||
await ClientMonitor.visit({ id: node.id });
|
||||
|
||||
assert.equal(ClientMonitor.breadcrumbFor('clients.index').text, 'Clients');
|
||||
assert.equal(ClientMonitor.breadcrumbFor('clients.client').text, node.id.split('-')[0]);
|
||||
|
||||
await ClientMonitor.breadcrumbFor('clients.index').visit();
|
||||
assert.equal(currentURL(), '/clients');
|
||||
});
|
||||
|
||||
test('the monitor page immediately streams agent monitor output at the info level', async function(assert) {
|
||||
await ClientMonitor.visit({ id: node.id });
|
||||
|
||||
const logRequest = server.pretender.handledRequests.find(req =>
|
||||
req.url.startsWith('/v1/agent/monitor')
|
||||
);
|
||||
assert.ok(ClientMonitor.logsArePresent);
|
||||
assert.ok(logRequest);
|
||||
assert.ok(logRequest.url.includes('log_level=info'));
|
||||
});
|
||||
|
||||
test('switching the log level persists the new log level as a query param', async function(assert) {
|
||||
await ClientMonitor.visit({ id: node.id });
|
||||
await ClientMonitor.selectLogLevel('Debug');
|
||||
assert.equal(currentURL(), `/clients/${node.id}/monitor?level=debug`);
|
||||
});
|
||||
|
||||
test('when the current access token does not include the agent:read rule, a descriptive error message is shown', async function(assert) {
|
||||
window.localStorage.nomadTokenSecret = clientToken.secretId;
|
||||
|
||||
await ClientMonitor.visit({ id: node.id });
|
||||
assert.notOk(ClientMonitor.logsArePresent);
|
||||
assert.ok(ClientMonitor.error.isShown);
|
||||
assert.equal(ClientMonitor.error.title, 'Not Authorized');
|
||||
assert.ok(ClientMonitor.error.message.includes('agent:read'));
|
||||
|
||||
await ClientMonitor.error.seekHelp();
|
||||
assert.equal(currentURL(), '/settings/tokens');
|
||||
});
|
||||
});
|
||||
|
|
@ -21,6 +21,17 @@ module('Acceptance | server detail', function(hooks) {
|
|||
assert.equal(document.title, `Server ${agent.name} - Nomad`);
|
||||
});
|
||||
|
||||
test('when the server is the leader, the title shows a leader badge', async function(assert) {
|
||||
assert.ok(ServerDetail.title.includes(agent.name));
|
||||
assert.ok(ServerDetail.hasLeaderBadge);
|
||||
});
|
||||
|
||||
test('the details ribbon displays basic information about the server', async function(assert) {
|
||||
assert.ok(ServerDetail.serverStatus.includes(agent.status));
|
||||
assert.ok(ServerDetail.address.includes(`${agent.address}:${agent.tags.port}`));
|
||||
assert.ok(ServerDetail.datacenter.includes(agent.tags.dc));
|
||||
});
|
||||
|
||||
test('the server detail page should list all tags for the server', async function(assert) {
|
||||
const tags = Object.keys(agent.tags)
|
||||
.map(name => ({ name, value: agent.tags[name] }))
|
||||
|
|
@ -34,15 +45,9 @@ module('Acceptance | server detail', function(hooks) {
|
|||
});
|
||||
});
|
||||
|
||||
test('the list of servers from /servers should still be present', async function(assert) {
|
||||
assert.equal(ServerDetail.servers.length, server.db.agents.length, '# of servers');
|
||||
});
|
||||
|
||||
test('the active server should be denoted in the table', async function(assert) {
|
||||
const activeServers = ServerDetail.servers.filter(server => server.isActive);
|
||||
|
||||
assert.equal(activeServers.length, 1, 'Only one active server');
|
||||
assert.equal(ServerDetail.activeServer.name, agent.name, 'Active server matches current route');
|
||||
test('when the server is not the leader, there is no leader badge', async function(assert) {
|
||||
await ServerDetail.visit({ name: server.db.agents[1].name });
|
||||
assert.notOk(ServerDetail.hasLeaderBadge);
|
||||
});
|
||||
|
||||
test('when the server is not found, an error message is shown, but the URL persists', async function(assert) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
import { currentURL } from '@ember/test-helpers';
|
||||
import { run } from '@ember/runloop';
|
||||
import { module, test } from 'qunit';
|
||||
import { setupApplicationTest } from 'ember-qunit';
|
||||
import { setupMirage } from 'ember-cli-mirage/test-support';
|
||||
import ServerMonitor from 'nomad-ui/tests/pages/servers/monitor';
|
||||
|
||||
let agent;
|
||||
let managementToken;
|
||||
let clientToken;
|
||||
|
||||
module('Acceptance | server monitor', function(hooks) {
|
||||
setupApplicationTest(hooks);
|
||||
setupMirage(hooks);
|
||||
|
||||
hooks.beforeEach(function() {
|
||||
agent = server.create('agent');
|
||||
|
||||
managementToken = server.create('token');
|
||||
clientToken = server.create('token');
|
||||
|
||||
window.localStorage.nomadTokenSecret = managementToken.secretId;
|
||||
|
||||
run.later(run, run.cancelTimers, 500);
|
||||
});
|
||||
|
||||
test('/servers/:id/monitor should have a breadcrumb trail linking back to servers', async function(assert) {
|
||||
await ServerMonitor.visit({ name: agent.name });
|
||||
|
||||
assert.equal(ServerMonitor.breadcrumbFor('servers.index').text, 'Servers');
|
||||
assert.equal(ServerMonitor.breadcrumbFor('servers.server').text, agent.name);
|
||||
|
||||
await ServerMonitor.breadcrumbFor('servers.index').visit();
|
||||
assert.equal(currentURL(), '/servers');
|
||||
});
|
||||
|
||||
test('the monitor page immediately streams agent monitor output at the info level', async function(assert) {
|
||||
await ServerMonitor.visit({ name: agent.name });
|
||||
|
||||
const logRequest = server.pretender.handledRequests.find(req =>
|
||||
req.url.startsWith('/v1/agent/monitor')
|
||||
);
|
||||
assert.ok(ServerMonitor.logsArePresent);
|
||||
assert.ok(logRequest);
|
||||
assert.ok(logRequest.url.includes('log_level=info'));
|
||||
});
|
||||
|
||||
test('switching the log level persists the new log level as a query param', async function(assert) {
|
||||
await ServerMonitor.visit({ name: agent.name });
|
||||
await ServerMonitor.selectLogLevel('Debug');
|
||||
assert.equal(currentURL(), `/servers/${agent.name}/monitor?level=debug`);
|
||||
});
|
||||
|
||||
test('when the current access token does not include the agent:read rule, a descriptive error message is shown', async function(assert) {
|
||||
window.localStorage.nomadTokenSecret = clientToken.secretId;
|
||||
|
||||
await ServerMonitor.visit({ name: agent.name });
|
||||
assert.notOk(ServerMonitor.logsArePresent);
|
||||
assert.ok(ServerMonitor.error.isShown);
|
||||
assert.equal(ServerMonitor.error.title, 'Not Authorized');
|
||||
assert.ok(ServerMonitor.error.message.includes('agent:read'));
|
||||
|
||||
await ServerMonitor.error.seekHelp();
|
||||
assert.equal(currentURL(), '/settings/tokens');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,178 @@
|
|||
import { run } from '@ember/runloop';
|
||||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import { find, render, settled } from '@ember/test-helpers';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
import Pretender from 'pretender';
|
||||
import sinon from 'sinon';
|
||||
import { logEncode } from '../../mirage/data/logs';
|
||||
import { selectOpen, selectOpenChoose } from '../utils/ember-power-select-extensions';
|
||||
|
||||
module('Integration | Component | agent-monitor', function(hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
const LOG_MESSAGE = 'log message goes here';
|
||||
|
||||
hooks.beforeEach(function() {
|
||||
// Normally this would be called server, but server is a prop of this component.
|
||||
this.pretender = new Pretender(function() {
|
||||
this.get('/v1/regions', () => [200, {}, '[]']);
|
||||
this.get('/v1/agent/monitor', ({ queryParams }) => [
|
||||
200,
|
||||
{},
|
||||
logEncode([`[${(queryParams.log_level || 'info').toUpperCase()}] ${LOG_MESSAGE}\n`], 0),
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
hooks.afterEach(function() {
|
||||
this.pretender.shutdown();
|
||||
});
|
||||
|
||||
const INTERVAL = 200;
|
||||
|
||||
const commonTemplate = hbs`
|
||||
<AgentMonitor
|
||||
@level={{level}}
|
||||
@client={{client}}
|
||||
@server={{server}}
|
||||
@onLevelChange={{onLevelChange}} />
|
||||
`;
|
||||
|
||||
test('basic appearance', async function(assert) {
|
||||
this.setProperties({
|
||||
level: 'info',
|
||||
client: { id: 'client1' },
|
||||
});
|
||||
|
||||
run.later(run, run.cancelTimers, INTERVAL);
|
||||
|
||||
await render(commonTemplate);
|
||||
|
||||
assert.ok(find('[data-test-level-switcher]'));
|
||||
assert.ok(find('[data-test-toggle]'));
|
||||
assert.ok(find('[data-test-log-box]'));
|
||||
assert.ok(find('[data-test-log-box].is-full-bleed.is-dark'));
|
||||
});
|
||||
|
||||
test('when provided with a client, AgentMonitor streams logs for the client', async function(assert) {
|
||||
this.setProperties({
|
||||
level: 'info',
|
||||
client: { id: 'client1' },
|
||||
});
|
||||
|
||||
run.later(run, run.cancelTimers, INTERVAL);
|
||||
|
||||
await render(commonTemplate);
|
||||
|
||||
const logRequest = this.pretender.handledRequests[1];
|
||||
assert.ok(logRequest.url.startsWith('/v1/agent/monitor'));
|
||||
assert.ok(logRequest.url.includes('client_id=client1'));
|
||||
assert.ok(logRequest.url.includes('log_level=info'));
|
||||
assert.notOk(logRequest.url.includes('server_id'));
|
||||
});
|
||||
|
||||
test('when provided with a server, AgentMonitor streams logs for the server', async function(assert) {
|
||||
this.setProperties({
|
||||
level: 'warn',
|
||||
server: { id: 'server1' },
|
||||
});
|
||||
|
||||
run.later(run, run.cancelTimers, INTERVAL);
|
||||
|
||||
await render(commonTemplate);
|
||||
|
||||
const logRequest = this.pretender.handledRequests[1];
|
||||
assert.ok(logRequest.url.startsWith('/v1/agent/monitor'));
|
||||
assert.ok(logRequest.url.includes('server_id=server1'));
|
||||
assert.ok(logRequest.url.includes('log_level=warn'));
|
||||
assert.notOk(logRequest.url.includes('client_id'));
|
||||
});
|
||||
|
||||
test('switching levels calls onLevelChange and restarts the logger', async function(assert) {
|
||||
const onLevelChange = sinon.spy();
|
||||
const newLevel = 'trace';
|
||||
|
||||
this.setProperties({
|
||||
level: 'info',
|
||||
client: { id: 'client1' },
|
||||
onLevelChange,
|
||||
});
|
||||
|
||||
run.later(run, run.cancelTimers, INTERVAL);
|
||||
|
||||
await render(commonTemplate);
|
||||
await settled();
|
||||
|
||||
const contentId = await selectOpen('[data-test-level-switcher]');
|
||||
run.later(run, run.cancelTimers, INTERVAL);
|
||||
await selectOpenChoose(contentId, newLevel.capitalize());
|
||||
await settled();
|
||||
|
||||
assert.ok(onLevelChange.calledOnce);
|
||||
assert.ok(onLevelChange.calledWith(newLevel));
|
||||
|
||||
const secondLogRequest = this.pretender.handledRequests[2];
|
||||
assert.ok(secondLogRequest.url.includes(`log_level=${newLevel}`));
|
||||
});
|
||||
|
||||
test('when switching levels, the scrollback is preserved and annotated with a switch message', async function(assert) {
|
||||
const newLevel = 'trace';
|
||||
const onLevelChange = sinon.spy();
|
||||
|
||||
this.setProperties({
|
||||
level: 'info',
|
||||
client: { id: 'client1' },
|
||||
onLevelChange,
|
||||
});
|
||||
|
||||
run.later(run, run.cancelTimers, INTERVAL);
|
||||
|
||||
await render(commonTemplate);
|
||||
await settled();
|
||||
assert.equal(find('[data-test-log-cli]').textContent, `[INFO] ${LOG_MESSAGE}\n`);
|
||||
|
||||
const contentId = await selectOpen('[data-test-level-switcher]');
|
||||
run.later(run, run.cancelTimers, INTERVAL);
|
||||
await selectOpenChoose(contentId, newLevel.capitalize());
|
||||
await settled();
|
||||
|
||||
assert.equal(
|
||||
find('[data-test-log-cli]').textContent,
|
||||
`[INFO] ${LOG_MESSAGE}\n\n...changing log level to ${newLevel}...\n\n[TRACE] ${LOG_MESSAGE}\n`
|
||||
);
|
||||
});
|
||||
|
||||
test('when switching levels and there is no scrollback, there is no appended switch message', async function(assert) {
|
||||
const newLevel = 'trace';
|
||||
const onLevelChange = sinon.spy();
|
||||
|
||||
// Emit nothing for the first request
|
||||
this.pretender.get('/v1/agent/monitor', ({ queryParams }) => [
|
||||
200,
|
||||
{},
|
||||
queryParams.log_level === 'info'
|
||||
? logEncode([''], 0)
|
||||
: logEncode([`[${(queryParams.log_level || 'info').toUpperCase()}] ${LOG_MESSAGE}\n`], 0),
|
||||
]);
|
||||
|
||||
this.setProperties({
|
||||
level: 'info',
|
||||
client: { id: 'client1' },
|
||||
onLevelChange,
|
||||
});
|
||||
|
||||
run.later(run, run.cancelTimers, INTERVAL);
|
||||
|
||||
await render(commonTemplate);
|
||||
await settled();
|
||||
assert.equal(find('[data-test-log-cli]').textContent, '');
|
||||
|
||||
const contentId = await selectOpen('[data-test-level-switcher]');
|
||||
run.later(run, run.cancelTimers, INTERVAL);
|
||||
await selectOpenChoose(contentId, newLevel.capitalize());
|
||||
await settled();
|
||||
|
||||
assert.equal(find('[data-test-log-cli]').textContent, `[TRACE] ${LOG_MESSAGE}\n`);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { run } from '@ember/runloop';
|
||||
import { find, settled } from '@ember/test-helpers';
|
||||
import { find, settled, triggerKeyEvent } from '@ember/test-helpers';
|
||||
import { module, test } from 'qunit';
|
||||
import { setupRenderingTest } from 'ember-qunit';
|
||||
import hbs from 'htmlbars-inline-precompile';
|
||||
|
|
@ -9,6 +9,7 @@ import fetch from 'nomad-ui/utils/fetch';
|
|||
import Log from 'nomad-ui/utils/classes/log';
|
||||
|
||||
const { assign } = Object;
|
||||
const A_KEY = 65;
|
||||
|
||||
const stringifyValues = obj =>
|
||||
Object.keys(obj).reduce((newObj, key) => {
|
||||
|
|
@ -108,4 +109,43 @@ module('Integration | Component | streaming file', function(hooks) {
|
|||
assert.equal(request.url.split('?')[0], url, `URL is ${url}`);
|
||||
assert.equal(find('[data-test-output]').textContent, 'Hello World');
|
||||
});
|
||||
|
||||
test('the ctrl+a/cmd+a shortcut selects only the text in the output window', async function(assert) {
|
||||
const url = '/file/endpoint';
|
||||
const params = { path: 'hello/world.txt', offset: 0, limit: 50000 };
|
||||
this.setProperties({
|
||||
logger: makeLogger(url, params),
|
||||
mode: 'head',
|
||||
isStreaming: false,
|
||||
});
|
||||
|
||||
await this.render(hbs`
|
||||
Extra text
|
||||
<StreamingFile @logger={{logger}} @mode={{mode}} @isStreaming={{isStreaming}} />
|
||||
On either side
|
||||
`);
|
||||
await settled();
|
||||
|
||||
// Windows and Linux shortcut
|
||||
await triggerKeyEvent('[data-test-output]', 'keydown', A_KEY, { ctrlKey: true });
|
||||
assert.equal(
|
||||
window
|
||||
.getSelection()
|
||||
.toString()
|
||||
.trim(),
|
||||
find('[data-test-output]').textContent.trim()
|
||||
);
|
||||
|
||||
window.getSelection().removeAllRanges();
|
||||
|
||||
// MacOS shortcut
|
||||
await triggerKeyEvent('[data-test-output]', 'keydown', A_KEY, { metaKey: true });
|
||||
assert.equal(
|
||||
window
|
||||
.getSelection()
|
||||
.toString()
|
||||
.trim(),
|
||||
find('[data-test-output]').textContent.trim()
|
||||
);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import {
|
||||
create,
|
||||
attribute,
|
||||
clickable,
|
||||
collection,
|
||||
isPresent,
|
||||
text,
|
||||
visitable,
|
||||
} from 'ember-cli-page-object';
|
||||
import { run } from '@ember/runloop';
|
||||
import { selectOpen, selectOpenChoose } from '../../utils/ember-power-select-extensions';
|
||||
|
||||
export default create({
|
||||
visit: visitable('/clients/:id/monitor'),
|
||||
|
||||
breadcrumbs: collection('[data-test-breadcrumb]', {
|
||||
id: attribute('data-test-breadcrumb'),
|
||||
text: text(),
|
||||
visit: clickable(),
|
||||
}),
|
||||
|
||||
breadcrumbFor(id) {
|
||||
return this.breadcrumbs.toArray().find(crumb => crumb.id === id);
|
||||
},
|
||||
|
||||
logsArePresent: isPresent('[data-test-log-box]'),
|
||||
|
||||
error: {
|
||||
isShown: isPresent('[data-test-error]'),
|
||||
title: text('[data-test-error-title]'),
|
||||
message: text('[data-test-error-message]'),
|
||||
seekHelp: clickable('[data-test-error-message] a'),
|
||||
},
|
||||
|
||||
async selectLogLevel(level) {
|
||||
const contentId = await selectOpen('[data-test-level-switcher]');
|
||||
run.later(run, run.cancelTimers, 500);
|
||||
await selectOpenChoose(contentId, level);
|
||||
},
|
||||
});
|
||||
|
|
@ -1,23 +1,19 @@
|
|||
import { create, collection, clickable, hasClass, text, visitable } from 'ember-cli-page-object';
|
||||
import { getter } from 'ember-cli-page-object/macros';
|
||||
import { create, collection, clickable, isPresent, text, visitable } from 'ember-cli-page-object';
|
||||
|
||||
export default create({
|
||||
visit: visitable('/servers/:name'),
|
||||
|
||||
servers: collection('[data-test-server-agent-row]', {
|
||||
name: text('[data-test-server-name]'),
|
||||
isActive: hasClass('is-active'),
|
||||
}),
|
||||
title: text('[data-test-title]'),
|
||||
serverStatus: text('[data-test-status]'),
|
||||
address: text('[data-test-address]'),
|
||||
datacenter: text('[data-test-datacenter]'),
|
||||
hasLeaderBadge: isPresent('[data-test-leader-badge]'),
|
||||
|
||||
tags: collection('[data-test-server-tag]', {
|
||||
name: text('td', { at: 0 }),
|
||||
value: text('td', { at: 1 }),
|
||||
}),
|
||||
|
||||
activeServer: getter(function() {
|
||||
return this.servers.toArray().find(server => server.isActive);
|
||||
}),
|
||||
|
||||
error: {
|
||||
title: text('[data-test-error-title]'),
|
||||
message: text('[data-test-error-message]'),
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import {
|
||||
create,
|
||||
attribute,
|
||||
clickable,
|
||||
collection,
|
||||
isPresent,
|
||||
text,
|
||||
visitable,
|
||||
} from 'ember-cli-page-object';
|
||||
import { run } from '@ember/runloop';
|
||||
import { selectOpen, selectOpenChoose } from '../../utils/ember-power-select-extensions';
|
||||
|
||||
export default create({
|
||||
visit: visitable('/servers/:name/monitor'),
|
||||
|
||||
breadcrumbs: collection('[data-test-breadcrumb]', {
|
||||
id: attribute('data-test-breadcrumb'),
|
||||
text: text(),
|
||||
visit: clickable(),
|
||||
}),
|
||||
|
||||
breadcrumbFor(id) {
|
||||
return this.breadcrumbs.toArray().find(crumb => crumb.id === id);
|
||||
},
|
||||
|
||||
logsArePresent: isPresent('[data-test-log-box]'),
|
||||
|
||||
error: {
|
||||
isShown: isPresent('[data-test-error]'),
|
||||
title: text('[data-test-error-title]'),
|
||||
message: text('[data-test-error-message]'),
|
||||
seekHelp: clickable('[data-test-error-message] a'),
|
||||
},
|
||||
|
||||
async selectLogLevel(level) {
|
||||
const contentId = await selectOpen('[data-test-level-switcher]');
|
||||
run.later(run, run.cancelTimers, 500);
|
||||
await selectOpenChoose(contentId, level);
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import { click, settled } from '@ember/test-helpers';
|
||||
// TODO: Contribute these helpers back upstream once we are on the latest version of
|
||||
// ember-power-select (4.x)
|
||||
//
|
||||
// selectOpen and selectOpenChoose splits the existing selectChoose helper into two pieces
|
||||
// - selectOpen: open the select (await settled)
|
||||
// - selectOpenChoose: choose an option (await settled)
|
||||
// Since the composite helper has two `await setted`s in it, the log changing tests can't use
|
||||
// them. These tests require a run.later(run, run.cancelTimers, ms) to be inserted between
|
||||
// these two moments. Doing it before opening means hanging on open not on select. Doing it
|
||||
// after means hanging after the select has occurred (too late).
|
||||
async function openIfClosedAndGetContentId(trigger) {
|
||||
let contentId = trigger.attributes['aria-owns'] && `${trigger.attributes['aria-owns'].value}`;
|
||||
let content = contentId ? document.querySelector(`#${contentId}`) : undefined;
|
||||
// If the dropdown is closed, open it
|
||||
if (!content || content.classList.contains('ember-basic-dropdown-content-placeholder')) {
|
||||
await click(trigger);
|
||||
await settled();
|
||||
contentId = `${trigger.attributes['aria-owns'].value}`;
|
||||
}
|
||||
return contentId;
|
||||
}
|
||||
|
||||
export async function selectOpen(cssPathOrTrigger) {
|
||||
let trigger;
|
||||
if (cssPathOrTrigger instanceof HTMLElement) {
|
||||
if (cssPathOrTrigger.classList.contains('ember-power-select-trigger')) {
|
||||
trigger = cssPathOrTrigger;
|
||||
} else {
|
||||
trigger = cssPathOrTrigger.querySelector('.ember-power-select-trigger');
|
||||
}
|
||||
} else {
|
||||
trigger = document.querySelector(`${cssPathOrTrigger} .ember-power-select-trigger`);
|
||||
|
||||
if (!trigger) {
|
||||
trigger = document.querySelector(cssPathOrTrigger);
|
||||
}
|
||||
|
||||
if (!trigger) {
|
||||
throw new Error(
|
||||
`You called "selectOpen('${cssPathOrTrigger}')" but no select was found using selector "${cssPathOrTrigger}"`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (trigger.scrollIntoView) {
|
||||
trigger.scrollIntoView();
|
||||
}
|
||||
|
||||
return await openIfClosedAndGetContentId(trigger);
|
||||
}
|
||||
|
||||
export async function selectOpenChoose(contentId, valueOrSelector, optionIndex) {
|
||||
let target;
|
||||
// Select the option with the given text
|
||||
let options = document.querySelectorAll(`#${contentId} .ember-power-select-option`);
|
||||
let potentialTargets = [].slice
|
||||
.apply(options)
|
||||
.filter(opt => opt.textContent.indexOf(valueOrSelector) > -1);
|
||||
if (potentialTargets.length === 0) {
|
||||
potentialTargets = document.querySelectorAll(`#${contentId} ${valueOrSelector}`);
|
||||
}
|
||||
if (potentialTargets.length > 1) {
|
||||
let filteredTargets = [].slice
|
||||
.apply(potentialTargets)
|
||||
.filter(t => t.textContent.trim() === valueOrSelector);
|
||||
if (optionIndex === undefined) {
|
||||
target = filteredTargets[0] || potentialTargets[0];
|
||||
} else {
|
||||
target = filteredTargets[optionIndex] || potentialTargets[optionIndex];
|
||||
}
|
||||
} else {
|
||||
target = potentialTargets[0];
|
||||
}
|
||||
if (!target) {
|
||||
throw new Error(
|
||||
`You called "selectOpenChoose('${valueOrSelector}')" but "${valueOrSelector}" didn't match any option`
|
||||
);
|
||||
}
|
||||
await click(target);
|
||||
return settled();
|
||||
}
|
||||
Loading…
Reference in New Issue