Replace simple dropdown namespace switcher with ember-power-select

ui/app/adapters/job.js

@@ -22,11 +22,9 @@ export default ApplicationAdapter.extend({
 
   findAll() {
     const namespace = this.get('system.activeNamespace');
-    console.log('setting ns to', namespace.get('id'));
     return this._super(...arguments).then(data => {
       data.forEach(job => {
-        job.NamespaceID = namespace.get('id');
-        console.log(job);
+        job.NamespaceID = namespace && namespace.get('id');
       });
       return data;
     });

ui/app/services/system.js

@@ -36,10 +36,12 @@ export default Service.extend({
     set(key, value) {
       if (value == null) {
         window.localStorage.removeItem('nomadActiveNamespace');
-      } else {
+      } else if (typeof value === 'string') {
         window.localStorage.nomadActiveNamespace = value;
+        return this.get('namespaces').findBy('id', value);
       }
-      return this.get('namespaces').findBy('id', value);
+      window.localStorage.nomadActiveNamespace = value.get('name');
+      return value;
     },
   }),
 });

ui/app/styles/app.scss

@@ -1,3 +1,5 @@
 @import "./core";
 @import "./components";
 @import "./charts";
+
+@import "ember-power-select";

ui/app/styles/components.scss

@@ -1,6 +1,7 @@
 @import "./components/badge";
 @import "./components/boxed-section";
 @import "./components/breadcrumbs";
+@import "./components/ember-power-select";
 @import "./components/empty-message";
 @import "./components/error-container";
 @import "./components/gutter";

ui/app/styles/components/ember-power-select.scss

@@ -0,0 +1,3 @@
+.ember-power-select-trigger {
+  cursor: pointer;
+}

ui/app/styles/core/typography.scss

@@ -19,3 +19,7 @@ code {
 .nowrap {
   white-space: nowrap;
 }
+
+.is-interactive {
+  cursor: pointer;
+}

ui/app/styles/utils/z-indices.scss

@@ -1,5 +1,5 @@
-$z-tooltip: 2500;
-$z-header: 2000;
-$z-gutter: 2000;
-$z-subnav: 2000;
+$z-tooltip: 250;
+$z-header: 200;
+$z-gutter: 200;
+$z-subnav: 200;
 $z-base: 100;

ui/app/templates/components/gutter-menu.hbs

@@ -5,20 +5,28 @@
         Workload
       </p>
       <ul class="menu-list">
-        <li>
-          <select
-            class="menu-item"
-            onchange={{action (queue
-              (action (mut system.activeNamespace))
-              (action onNamespaceChange)
-            ) value="target.value"}}>
-            {{#each system.namespaces as |namespace|}}
-              <option value="{{namespace.name}}" selected={{eq namespace system.activeNamespace}}>
-                {{namespace.name}}
-              </option>
-            {{/each}}
-          </select>
-        </li>
+        {{#if system.namespaces.length}}
+          <li>
+            <div class="menu-item">
+              {{#power-select
+                options=system.namespaces
+                selected=system.activeNamespace
+                searchField="name"
+                searchEnabled=(gt system.namespaces.length 10)
+                onchange=(action (queue
+                  (action (mut system.activeNamespace))
+                  (action onNamespaceChange)
+                ))
+                as |namespace|}}
+                {{#if (eq namespace.name "default")}}
+                  Default Namespace
+                {{else}}
+                  {{namespace.name}}
+                {{/if}}
+              {{/power-select}}
+            </div>
+          </li>
+        {{/if}}
         <li>{{#link-to "jobs" activeClass="is-active"}}Jobs{{/link-to}}</li>
       </ul>
       <p class="menu-label">

ui/mirage/config.js

@@ -13,9 +13,11 @@ export default function() {
 
   this.namespace = 'v1';
 
-  this.get('/jobs', function({ jobs }) {
+  this.get('/jobs', function({ jobs }, { queryParams }) {
     const json = this.serialize(jobs.all());
-    return json.map(job => filterKeys(job, 'TaskGroups', 'NamespaceID'));
+    return json
+      .filter(job => (queryParams.namespace ? job.NamespaceID === queryParams.namespace : true))
+      .map(job => filterKeys(job, 'TaskGroups', 'NamespaceID'));
   });
 
   this.get('/job/:id');