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

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'],

  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();
      }
    },
  },
});