open-nomad/ui/app/components/task-log.js

104 lines
2.6 KiB
JavaScript

import Ember from 'ember';
import { task } from 'ember-concurrency';
import { logger } from 'nomad-ui/utils/classes/log';
import WindowResizable from 'nomad-ui/mixins/window-resizable';
const { Component, computed, inject, run } = Ember;
export default Component.extend(WindowResizable, {
token: inject.service(),
classNames: ['boxed-section', 'task-log'],
allocation: null,
task: null,
didReceiveAttrs() {
if (this.get('allocation') && this.get('task')) {
this.send('toggleStream');
}
},
didInsertElement() {
this.fillAvailableHeight();
},
windowResizeHandler() {
run.once(this, this.fillAvailableHeight);
},
fillAvailableHeight() {
// This math is arbitrary and far from bulletproof, but the UX
// of having the log window fill available height is worth the hack.
const cliWindow = this.$('.cli-window');
cliWindow.height(window.innerHeight - cliWindow.offset().top - 25);
},
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', () => {
const cliWindow = this.$('.cli-window');
cliWindow.scrollTop(cliWindow[0].scrollHeight);
});
}),
stream: task(function*() {
this.get('logger').on('tick', () => {
run.scheduleOnce('afterRender', () => {
const cliWindow = this.$('.cli-window');
cliWindow.scrollTop(cliWindow[0].scrollHeight);
});
});
yield this.get('logger').startStreaming();
this.get('logger').off('tick');
}),
willDestroy() {
this.get('logger').stop();
},
actions: {
setMode(mode) {
this.get('logger').stop();
this.set('mode', mode);
this.get('stream').perform();
},
toggleStream() {
if (this.get('logger.isStreaming')) {
this.get('logger').stop();
} else {
this.get('stream').perform();
}
},
},
});