UI: Add global search

ui/app/components/global-search/control.js

@@ -0,0 +1,169 @@
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { task } from 'ember-concurrency';
+import fetch from 'nomad-ui/utils/fetch';
+import { getOwner } from '@ember/application';
+import { bindKeyboardShortcuts, unbindKeyboardShortcuts } from 'ember-keyboard-shortcuts';
+import { run } from '@ember/runloop';
+
+const SEARCH_PROPERTY_TO_LABEL = {
+  allocs: 'Allocations',
+  jobs: 'Jobs',
+  nodes: 'Clients',
+};
+
+export default Component.extend({
+  tagName: '',
+
+  router: service(),
+  store: service(),
+  system: service(),
+
+  opened: false,
+
+  keyboardShortcuts: {
+    '/': {
+      action: 'open',
+      global: false,
+      preventDefault: true,
+    },
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+    bindKeyboardShortcuts(this);
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+    unbindKeyboardShortcuts(this);
+  },
+
+  actions: {
+    open() {
+      if (this.select) {
+        this.select.actions.open();
+      }
+    },
+
+    openOnClickOrTab(select, { target }) {
+      // Bypass having to press enter to access search after clicking/tabbing
+      const targetClassList = target.classList;
+      const targetIsTrigger = targetClassList.contains('ember-power-select-trigger');
+
+      // Allow tabbing out of search
+      const triggerIsNotActive = !targetClassList.contains('ember-power-select-trigger--active');
+
+      if (targetIsTrigger && triggerIsNotActive) {
+        run.next(() => {
+          select.actions.open();
+        });
+      }
+    },
+
+    storeSelect(select) {
+      if (select) {
+        this.select = select;
+      }
+    },
+
+    async select({ model }) {
+      const resolvedModel = await model.then();
+      const itemModelName = resolvedModel.constructor.modelName;
+
+      if (itemModelName === 'job') {
+        this.router.transitionTo('jobs.job', resolvedModel.name);
+      } else if (itemModelName === 'allocation') {
+        this.router.transitionTo('allocations.allocation', resolvedModel.id);
+      } else if (itemModelName === 'node') {
+        this.router.transitionTo('clients.client', resolvedModel.id);
+      }
+    },
+  },
+
+  search: task(function*(prefix) {
+    const applicationAdapter = getOwner(this).lookup('adapter:application');
+    const searchUrl = applicationAdapter.urlForFindAll('job').replace('jobs', 'search');
+    // FIXME hackery!
+    const query = new URLSearchParams();
+
+    if (this.system.get('activeNamespace.id')) {
+      query.append('namespace', this.system.activeNamespace.id);
+    }
+
+    if (this.system.activeRegion) {
+      query.append('region', this.system.activeRegion);
+    }
+
+    const response = yield fetch(`${searchUrl}?${query}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        Prefix: prefix,
+        Context: 'all',
+      }),
+    });
+    const json = yield response.json();
+
+    return ['allocs', 'jobs', 'nodes']
+      .filter(key => json.Matches[key])
+      .map(key => {
+        const matches = json.Matches[key];
+        const label = `${SEARCH_PROPERTY_TO_LABEL[key]} (${matches.length})`;
+
+        return {
+          groupName: label,
+          options: collectModels(
+            this.store,
+            this.system.get('activeNamespace.id') || 'default',
+            key,
+            json.Matches[key]
+          ),
+        };
+      });
+  }),
+
+  calculatePosition(trigger) {
+    const { top, left, width } = trigger.getBoundingClientRect();
+    return {
+      style: {
+        left,
+        width,
+        top,
+      },
+    };
+  },
+});
+
+function collectModels(store, namespace, searchResultsTypeKey, matches) {
+  if (searchResultsTypeKey === 'jobs') {
+    return matches.map(id => {
+      const model = store.findRecord('job', JSON.stringify([id, namespace]));
+      return {
+        model,
+        labelProperty: 'name',
+        statusProperty: 'status',
+      };
+    });
+  } else if (searchResultsTypeKey === 'allocs') {
+    return matches.map(id => {
+      const model = store.findRecord('allocation', id);
+      return {
+        model,
+        labelProperty: 'id',
+        statusProperty: 'clientStatus',
+      };
+    });
+  } else if (searchResultsTypeKey === 'nodes') {
+    return matches.map(id => {
+      const model = store.findRecord('node', id);
+      return {
+        model,
+        labelProperty: 'id',
+        statusProperty: 'status',
+      };
+    });
+  }
+}

ui/app/styles/components.scss

@@ -10,6 +10,8 @@
 @import './components/error-container';
 @import './components/exec';
 @import './components/fs-explorer';
+@import './components/global-search-control';
+@import './components/global-search-dropdown';
 @import './components/gutter';
 @import './components/gutter-toggle';
 @import './components/image-file.scss';

ui/app/styles/components/global-search-control.scss

@@ -0,0 +1,37 @@
+.global-search {
+  width: 30em;
+
+  .ember-power-select-trigger {
+    background: $nomad-green-darker;
+
+    .icon {
+      margin-top: 1px;
+      margin-left: 2px;
+
+      fill: white;
+      opacity: 0.7;
+    }
+
+    .placeholder {
+      opacity: 0.7;
+      display: inline-block;
+      padding-left: 2px;
+      transform: translateY(-1px);
+    }
+
+    &.ember-power-select-trigger--active {
+      background: white;
+
+      .icon {
+        fill: black;
+        opacity: 1;
+      }
+    }
+  }
+
+  .ember-basic-dropdown-content-wormhole-origin {
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}

ui/app/styles/components/global-search-dropdown.scss

@@ -0,0 +1,104 @@
+$queued: $grey-lighter;
+$starting: $grey-lighter;
+$running: $primary;
+$complete: $nomad-green-dark;
+$failed: $danger;
+$lost: $dark;
+
+.global-search-dropdown {
+  background: transparent;
+  border: 0;
+  position: fixed;
+
+  .ember-power-select-search {
+    margin-left: $icon-dimensions;
+    border: 0;
+  }
+
+  input,
+  input:focus {
+    background: transparent;
+    border: 0;
+    outline: 0;
+  }
+
+  .ember-power-select-options {
+    background: white;
+    padding: 0.35rem;
+
+    &[role='listbox'] {
+      border: 1px solid $grey-blue;
+      box-shadow: 0 6px 8px -2px rgba($black, 0.05), 0 8px 4px -4px rgba($black, 0.1);
+    }
+
+    .ember-power-select-option {
+      padding: 0.2rem 0.4rem;
+      border-radius: $radius;
+
+      &[aria-current='true'] {
+        background: transparentize($blue, 0.8);
+        color: $blue;
+      }
+    }
+
+    // FIXME this is uncritically copied from charts/colors.scss
+    .color-swatch {
+      display: inline-block;
+      height: 0.6rem;
+      width: 0.6rem;
+      margin: 0.25rem 0.25rem 0.4rem 0.25rem;
+      vertical-align: middle;
+      border-radius: 1rem;
+
+      &.queued {
+        box-shadow: inset 0 0 0 1px rgba($black, 0.3);
+        background: $queued;
+      }
+
+      &.starting,
+      &.pending {
+        background: repeating-linear-gradient(
+          -45deg,
+          $starting,
+          $starting 3px,
+          darken($starting, 25%) 3px,
+          darken($starting, 25%) 6px
+        );
+      }
+
+      &.running,
+      &.ready {
+        background: $running;
+      }
+
+      &.complete {
+        background: $complete;
+      }
+
+      &.failed {
+        background: $failed;
+      }
+
+      &.lost,
+      &.dead {
+        background: $lost;
+      }
+
+      @each $name, $pair in $colors {
+        $color: nth($pair, 1);
+
+        &.is-#{$name} {
+          background: $color;
+        }
+      }
+    }
+  }
+
+  .ember-power-select-group-name {
+    text-transform: uppercase;
+    display: inline;
+    color: darken($grey-blue, 20%);
+    font-size: $size-7;
+    font-weight: $weight-semibold;
+  }
+}

ui/app/styles/core/navbar.scss

@@ -8,6 +8,8 @@
     padding-left: 20px;
     padding-right: 20px;
     overflow: hidden;
+    align-items: center;
+    justify-content: space-between;
 
     .navbar-item {
       color: rgba($primary-invert, 0.8);
@@ -44,7 +46,7 @@
       display: flex;
       align-items: stretch;
       justify-content: flex-end;
-      margin-left: auto;
+      margin-left: inherit;
     }
 
     .navbar-end > a.navbar-item {
@@ -100,7 +102,7 @@
       display: flex;
       align-items: center;
       justify-content: flex-end;
-      margin-left: auto;
+      margin-left: inherit;
     }
 
     .navbar-end > a.navbar-item {

ui/app/templates/components/global-header.hbs

@@ -7,6 +7,7 @@
       {{partial "partials/nomad-logo"}}
     {{/link-to}}
   </div>
+  {{global-search/control}}
   <div class="navbar-end">
     <a href="https://nomadproject.io/docs" class="navbar-item">Documentation</a>
     {{#link-to "settings.tokens" class="navbar-item"}}ACL Tokens{{/link-to}}

ui/app/templates/components/global-search/control.hbs

@@ -0,0 +1,17 @@
+  <PowerSelect
+    @tagName="div"
+    class="global-search"
+    data-test-search
+    @searchEnabled={{true}}
+    @search={{perform this.search}}
+    @onChange={{action 'select'}}
+    @onFocus={{action 'openOnClickOrTab'}}
+    @dropdownClass="global-search-dropdown"
+    @calculatePosition={{this.calculatePosition}}
+    @searchMessageComponent="global-search/message"
+    @triggerComponent="global-search/trigger"
+    @registerAPI={{action 'storeSelect'}}
+    as |option|>
+    <div class="color-swatch {{get option.model option.statusProperty}}"></div>
+    {{get option.model option.labelProperty}}
+  </PowerSelect>

ui/app/templates/components/global-search/trigger.hbs

@@ -0,0 +1,4 @@
+{{x-icon "search" class="is-small"}}
+{{#unless select.isOpen}}
+  <span class='placeholder'>Search</span>
+{{/unless}}