Create new monitor route for clients
This commit is contained in:
Michael Lange
parent
8471d7b278
commit
10e1371d34
5
ui/app/components/client-subnav.js
Normal file
5
ui/app/components/client-subnav.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
import Component from '@ember/component';
|
||||
import { tagName } from '@ember-decorators/component';
|
||||
|
||||
@tagName('')
|
||||
export default class ClientSubnav extends Component {}
|
||||
|
|
@ -26,7 +26,9 @@ 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() {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
39
ui/app/routes/clients/client/index.js
Normal file
39
ui/app/routes/clients/client/index.js
Normal file
|
|
@ -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,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}}
|
||||
|
|
|
|||
479
ui/app/templates/clients/client/index.hbs
Normal file
479
ui/app/templates/clients/client/index.hbs
Normal file
|
|
@ -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>
|
||||
4
ui/app/templates/clients/client/monitor.hbs
Normal file
4
ui/app/templates/clients/client/monitor.hbs
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{{title "Client " (or model.name model.shortId)}}
|
||||
<ClientSubnav @client={{model}} />
|
||||
<section class="section">
|
||||
</section>
|
||||
6
ui/app/templates/components/client-subnav.hbs
Normal file
6
ui/app/templates/components/client-subnav.hbs
Normal file
|
|
@ -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>
|
||||
Loading…
Reference in a new issue