Implement the log streaming portion of the AgentMonitor component

ui/app/components/agent-monitor.js

@@ -1,5 +1,9 @@
+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 { logger } from 'nomad-ui/utils/classes/log';
 
 const LEVELS = ['error', 'warn', 'info', 'debug', 'trace'].map(level => ({
   value: level,
@@ -8,6 +12,8 @@ const LEVELS = ['error', 'warn', 'info', 'debug', 'trace'].map(level => ({
 
 @tagName('')
 export default class AgentMonitor extends Component {
+  @service token;
+
   levels = LEVELS;
   client = null;
   server = null;
@@ -19,6 +25,9 @@ export default class AgentMonitor extends Component {
   // Private object interface (value, label)
   _level = null;
 
+  monitorUrl = '/v1/agent/monitor';
+  isStreaming = true;
+
   init() {
     super.init(...arguments);
     this.set('_level', LEVELS.findBy('value', 'info'));
@@ -28,8 +37,38 @@ export default class AgentMonitor extends Component {
     this.set('_level', LEVELS.findBy('value', this.level));
   }
 
+  @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,
+    };
+  }
+
+  @logger('monitorUrl', 'monitorParams', function logFetch() {
+    return url =>
+      this.token.authorizedRequest(url).then(response => {
+        return response;
+      });
+  })
+  logger;
+
   setLevel(level) {
+    this.logger.stop();
     this.set('_level', level);
     this.onLevelChange(level);
   }
+
+  toggleStream() {
+    this.set('streamMode', 'streaming');
+    this.toggleProperty('isStreaming');
+  }
 }

ui/app/templates/components/agent-monitor.hbs

@@ -10,11 +10,11 @@
       @onChange={{action setLevel}} as |level|>
       <span class="ember-power-select-prefix">Level: </span>{{level.label}}
     </PowerSelect>
-    <button data-test-toggle class="button is-white is-compact pull-right">
-      {{x-icon (if true "media-pause" "media-play") class="is-text"}}
+    <button data-test-toggle class="button is-white is-compact pull-right" {{action toggleStream}}>
+      {{x-icon (if logger.isStreaming "media-pause" "media-play") class="is-text"}}
     </button>
   </div>
   <div class="boxed-section-body is-dark is-full-bleed">
-    <pre><code>Monitor goes here</code></pre>
+    <StreamingFile @logger={{logger}} @isStreaming={{isStreaming}} />
   </div>
 </div>