From 5f23b8411afff27dc1efa10d841f57643e340d59 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Tue, 10 Oct 2017 10:54:23 -0700
Subject: [PATCH] Replace simple dropdown namespace switcher with
 ember-power-select

---
 ui/app/adapters/job.js                        |  4 +--
 ui/app/services/system.js                     |  6 ++--
 ui/app/styles/app.scss                        |  2 ++
 ui/app/styles/components.scss                 |  1 +
 .../styles/components/ember-power-select.scss |  3 ++
 ui/app/styles/core/typography.scss            |  4 +++
 ui/app/styles/utils/z-indices.scss            |  8 ++---
 ui/app/templates/components/gutter-menu.hbs   | 36 +++++++++++--------
 ui/mirage/config.js                           |  6 ++--
 9 files changed, 45 insertions(+), 25 deletions(-)
 create mode 100644 ui/app/styles/components/ember-power-select.scss

diff --git a/ui/app/adapters/job.js b/ui/app/adapters/job.js
index 6b32c1827..0543ee53d 100644
--- a/ui/app/adapters/job.js
+++ b/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;
     });
diff --git a/ui/app/services/system.js b/ui/app/services/system.js
index aa1913cf0..e9edb89c4 100644
--- a/ui/app/services/system.js
+++ b/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;
     },
   }),
 });
diff --git a/ui/app/styles/app.scss b/ui/app/styles/app.scss
index 3c94df8b0..444a30182 100644
--- a/ui/app/styles/app.scss
+++ b/ui/app/styles/app.scss
@@ -1,3 +1,5 @@
 @import "./core";
 @import "./components";
 @import "./charts";
+
+@import "ember-power-select";
diff --git a/ui/app/styles/components.scss b/ui/app/styles/components.scss
index 5a9b452fc..f6e19590b 100644
--- a/ui/app/styles/components.scss
+++ b/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";
diff --git a/ui/app/styles/components/ember-power-select.scss b/ui/app/styles/components/ember-power-select.scss
new file mode 100644
index 000000000..94cfbb154
--- /dev/null
+++ b/ui/app/styles/components/ember-power-select.scss
@@ -0,0 +1,3 @@
+.ember-power-select-trigger {
+  cursor: pointer;
+}
diff --git a/ui/app/styles/core/typography.scss b/ui/app/styles/core/typography.scss
index 9e0730cf9..546320e67 100644
--- a/ui/app/styles/core/typography.scss
+++ b/ui/app/styles/core/typography.scss
@@ -19,3 +19,7 @@ code {
 .nowrap {
   white-space: nowrap;
 }
+
+.is-interactive {
+  cursor: pointer;
+}
diff --git a/ui/app/styles/utils/z-indices.scss b/ui/app/styles/utils/z-indices.scss
index bc6a2860c..12c13b4ad 100644
--- a/ui/app/styles/utils/z-indices.scss
+++ b/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;
diff --git a/ui/app/templates/components/gutter-menu.hbs b/ui/app/templates/components/gutter-menu.hbs
index f14f0d5de..31f068742 100644
--- a/ui/app/templates/components/gutter-menu.hbs
+++ b/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">
diff --git a/ui/mirage/config.js b/ui/mirage/config.js
index 6e0fce395..15a7be4db 100644
--- a/ui/mirage/config.js
+++ b/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');