UI: Client and Server Monitor

ui/app/abilities/agent.js

@@ -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 = (this.get('token.selfTokenPolicies') || [])
+      .toArray()
+      .map(policy => get(policy, 'rulesJSON.Agent.Policy'))
+      .compact();
+
+    return policies.some(policy => policy === 'read' || policy === 'write');
+  }
+}

ui/app/components/agent-monitor.js

@@ -0,0 +1,71 @@
+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 Log from 'nomad-ui/utils/classes/log';
+
+const LEVELS = ['error', 'warn', 'info', 'debug', 'trace'];
+
+@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');
+  }
+}

ui/app/components/client-subnav.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class ClientSubnav extends Component {}

ui/app/components/forbidden-message.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class ForbiddenMessage extends Component {}

ui/app/components/server-subnav.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+@tagName('')
+export default class ServerSubnav extends Component {}

ui/app/components/streaming-file.js

@@ -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,42 @@ export default class StreamingFile extends Component.extend(WindowResizable) {
     }
   }
 
+  scrollHandler() {
+    const cli = this.element;
+    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 +112,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');
 

ui/app/controllers/clients/client/monitor.js

@@ -0,0 +1,9 @@
+import Controller from '@ember/controller';
+import classic from 'ember-classic-decorator';
+
+@classic
+export default class ClientMonitorController extends Controller {
+  queryParams = [{ level: 'level' }];
+
+  level = 'info';
+}

ui/app/controllers/servers.js

@@ -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;
 }

ui/app/controllers/servers/index.js

@@ -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;
 }

ui/app/controllers/servers/server/monitor.js

@@ -0,0 +1,9 @@
+import Controller from '@ember/controller';
+import classic from 'ember-classic-decorator';
+
+@classic
+export default class ServerMonitorController extends Controller {
+  queryParams = [{ level: 'level' }];
+
+  level = 'info';
+}

ui/app/router.js

@@ -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() {

ui/app/routes/clients/client.js

@@ -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;
 }