Monitor component and query param interaction

ui/app/components/agent-monitor.js

@@ -0,0 +1,35 @@
+import Component from '@ember/component';
+import { tagName } from '@ember-decorators/component';
+
+const LEVELS = ['error', 'warn', 'info', 'debug', 'trace'].map(level => ({
+  value: level,
+  label: level.capitalize(),
+}));
+
+@tagName('')
+export default class AgentMonitor extends Component {
+  levels = LEVELS;
+  client = null;
+  server = null;
+  onLevelChange() {}
+
+  // Public string interface
+  level = null;
+
+  // Private object interface (value, label)
+  _level = null;
+
+  init() {
+    super.init(...arguments);
+    this.set('_level', LEVELS.findBy('value', 'info'));
+  }
+
+  didReceiveAttrs() {
+    this.set('_level', LEVELS.findBy('value', this.level));
+  }
+
+  setLevel(level) {
+    this.set('_level', level);
+    this.onLevelChange(level);
+  }
+}

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/styles/components/dropdown.scss

@@ -32,6 +32,18 @@
       color: rgba($white, 0.75);
     }
   }
+
+  &.is-compact {
+    margin: -0.25em 0;
+
+    &.pull-right {
+      margin-right: -1em;
+    }
+
+    &.pull-left {
+      margin-left: -1em;
+    }
+  }
 }
 
 .button-bar {

ui/app/templates/clients/client/monitor.hbs

@@ -1,4 +1,8 @@
 {{title "Client " (or model.name model.shortId)}}
 <ClientSubnav @client={{model}} />
 <section class="section">
+  <AgentMonitor
+    @level={{level}}
+    @client={{model}}
+    @onLevelChange={{action (mut level) value="value"}} />
 </section>

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

@@ -0,0 +1,20 @@
+<div class="boxed-section">
+  <div class="boxed-section-head">
+    <PowerSelect
+      data-test-level-switcher
+      @tagName="div"
+      @triggerClass="is-compact pull-left"
+      @options={{levels}}
+      @selected={{_level}}
+      @searchEnabled={{false}}
+      @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>
+  </div>
+  <div class="boxed-section-body is-dark is-full-bleed">
+    <pre><code>Monitor goes here</code></pre>
+  </div>
+</div>