Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Log streaming #3564

Merged
merged 25 commits into from
Nov 29, 2017
Merged
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
3115b34
Guard against null values
DingoEatingFuzz Nov 14, 2017
89ef279
Prefer native fetch
DingoEatingFuzz Nov 14, 2017
50d92af
Add link to the task logs page
DingoEatingFuzz Nov 14, 2017
c87bc96
Add ember-concurrency dependency
DingoEatingFuzz Nov 14, 2017
0d299b6
Provides a slim TextDecoder polyfill for Edge
DingoEatingFuzz Nov 14, 2017
5735fca
Log class for interfacing with log APIs
DingoEatingFuzz Nov 14, 2017
72d84f6
First pass at the logs page
DingoEatingFuzz Nov 14, 2017
20ac6c0
Move logging logic from the controller to a component
DingoEatingFuzz Nov 15, 2017
5c8ba29
New icons for pausing and playing
DingoEatingFuzz Nov 15, 2017
efc3b53
Updated styles for the cli-window component
DingoEatingFuzz Nov 15, 2017
b3abd78
Let the log component fill all available height
DingoEatingFuzz Nov 15, 2017
0faacf2
New eslint rule for ember-concurrency infinite loop pattern
DingoEatingFuzz Nov 15, 2017
80e9254
Microscopic refactor for style reasons
DingoEatingFuzz Nov 15, 2017
f283287
Prevent using fetch or ReadableStream in tests
DingoEatingFuzz Nov 16, 2017
37653a9
Crude log mocking
DingoEatingFuzz Nov 16, 2017
249d2a3
Acceptance tests for task logs
DingoEatingFuzz Nov 16, 2017
0193e05
Rename allocation-log to task-log
DingoEatingFuzz Nov 16, 2017
2926920
Add CORS headers to client fs endpoints
DingoEatingFuzz Nov 16, 2017
0dce1ec
Integration tests for the task-log component
DingoEatingFuzz Nov 17, 2017
a822849
Fixes intermittent test failures
DingoEatingFuzz Nov 17, 2017
6447785
Use offset numbers in the polling mechanism
DingoEatingFuzz Nov 18, 2017
bc3f02b
Use the b64 log format to track offsets for pause/play support
DingoEatingFuzz Nov 21, 2017
d930180
Unit tests for the log util
DingoEatingFuzz Nov 21, 2017
cca4bc9
Move the stream support check to the stream logger
DingoEatingFuzz Nov 21, 2017
981c34b
Explain the magical logging constant
DingoEatingFuzz Nov 21, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Move logging logic from the controller to a component
DingoEatingFuzz committed Nov 21, 2017

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 20ac6c07df3e7fe8fb4e0917175de6d7b08dee2b
84 changes: 84 additions & 0 deletions ui/app/components/allocation-log.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import Ember from 'ember';
import { logger } from 'nomad-ui/utils/classes/log';
import { task } from 'ember-concurrency';

const { Component, computed, inject, run } = Ember;

export default Component.extend({
token: inject.service(),

classNames: ['boxed-section'],

allocation: null,
task: null,

didReceiveAttrs() {
if (this.get('allocation') && this.get('task')) {
this.send('toggleStream');
}
},

mode: 'stdout',

logUrl: computed('allocation.id', 'allocation.node.httpAddr', function() {
const address = this.get('allocation.node.httpAddr');
const allocation = this.get('allocation.id');

return `//${address}/v1/client/fs/logs/${allocation}`;
}),

logParams: computed('task', 'mode', function() {
return {
task: this.get('task'),
type: this.get('mode'),
};
}),

logger: logger('logUrl', 'logParams', function() {
const token = this.get('token');
return token.authorizedRequest.bind(token);
}),

head: task(function*() {
yield this.get('logger.gotoHead').perform();
run.scheduleOnce('afterRender', () => {
this.$('.cli-window').scrollTop(0);
});
}),

tail: task(function*() {
yield this.get('logger.gotoTail').perform();
run.scheduleOnce('afterRender', () => {
this.$('.cli-window').scrollTop(this.$('.cli-window')[0].scrollHeight);
});
}),

stream: task(function*() {
this.get('logger').on('tick', () => {
var cliWindow = this.$('.cli-window');
run.scheduleOnce('afterRender', () => {
cliWindow.scrollTop(cliWindow[0].scrollHeight);
});
});

yield this.get('logger').startStreaming();
this.get('logger').off('tick');
}),

actions: {
setMode(mode) {
this.send('stopStreaming');
this.set('mode', mode);
},
stopStreaming() {
this.get('logger').stop();
},
toggleStream() {
if (this.get('logger.isStreaming')) {
this.send('stopStreaming');
} else {
this.get('stream').perform();
}
},
},
});
70 changes: 0 additions & 70 deletions ui/app/controllers/allocations/allocation/task/logs.js

This file was deleted.

1 change: 1 addition & 0 deletions ui/app/styles/components.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import "./components/badge";
@import "./components/boxed-section";
@import "./components/breadcrumbs";
@import "./components/cli-window";
@import "./components/ember-power-select";
@import "./components/empty-message";
@import "./components/error-container";
12 changes: 12 additions & 0 deletions ui/app/styles/components/cli-window.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.cli-window {
background: transparent;
color: $white;

height: 500px;
max-height: 500px;
overflow: auto;

.is-light {
color: $text;
}
}
1 change: 1 addition & 0 deletions ui/app/styles/core/buttons.scss
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2);
font-weight: $weight-bold;
box-shadow: $button-box-shadow-standard;
border: 1px solid transparent;
text-decoration: none;

&:active,
&.is-active,
12 changes: 1 addition & 11 deletions ui/app/templates/allocations/allocation/task/logs.hbs
Original file line number Diff line number Diff line change
@@ -10,16 +10,6 @@
{{#gutter-menu class="page-body"}}
{{partial "allocations/allocation/task/subnav"}}
<section class="section">
<button class="button is-primary" {{action "setMode" "stdout"}}>stdout</button>
<button class="button is-danger" {{action "setMode" "stderr"}}>stderr</button>
<button class="button is-outlined is-primary" onclick={{perform stream}}>Stream</button>
<button class="button is-outlined is-primary" onclick={{action "stopStreaming"}}>Stop</button>
<button class="button is-outlined is-primary" onclick={{perform head}}>Head</button>
<button class="button is-outlined is-primary" onclick={{perform tail}}>Tail</button>
<p class="content">Start: {{startOffset}}</p>
<p class="content">End: {{endOffset}}</p>
<div id="logs" style="max-height:300px; overflow:auto">
<pre><code>{{stdout.output}}</code></pre>
</div>
{{allocation-log allocation=model.allocation task=model.name}}
</section>
{{/gutter-menu}}
14 changes: 14 additions & 0 deletions ui/app/templates/components/allocation-log.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<div class="boxed-section-head">
<button class="button is-info is-outlined" {{action "setMode" "stdout"}}>stdout</button>
<button class="button is-danger is-outlined" {{action "setMode" "stderr"}}>stderr</button>
<span class="pull-right">
<button class="button is-outlined" onclick={{perform head}}>Head</button>
<button class="button is-outlined" onclick={{perform tail}}>Tail</button>
<button class="button is-outlined" onclick={{action "toggleStream"}}>
{{if logger.isStreaming "Pause" "Play"}}
</button>
</span>
</div>
<div class="boxed-section-body is-dark is-full-bleed">
<pre class="cli-window"><code>{{logger.output}}</code></pre>
</div>
2 changes: 1 addition & 1 deletion ui/app/utils/classes/log.js
Original file line number Diff line number Diff line change
@@ -45,7 +45,7 @@ const Log = EmberObject.extend(Evented, {
newTail = newTail.substr(newTail.length - 50000);
}
this.set('tail', newTail);
this.trigger('tick');
this.trigger('tick', chunk);
};

if (window.ReadableStream) {