diff --git a/ui/app/components/global-search/control.js b/ui/app/components/global-search/control.js new file mode 100644 index 00000000000..1a061ba8943 --- /dev/null +++ b/ui/app/components/global-search/control.js @@ -0,0 +1,172 @@ +import Component from '@ember/component'; +import { tagName } from '@ember-decorators/component'; +import { task } from 'ember-concurrency'; +import EmberObject, { action, computed, set } from '@ember/object'; +import { alias } from '@ember/object/computed'; +import { inject as service } from '@ember/service'; +import { run } from '@ember/runloop'; +import Searchable from 'nomad-ui/mixins/searchable'; +import classic from 'ember-classic-decorator'; + +const SLASH_KEY = 191; + +@tagName('') +export default class GlobalSearchControl extends Component { + @service dataCaches; + @service router; + @service store; + + searchString = null; + + constructor() { + super(...arguments); + + this.jobSearch = JobSearch.create({ + dataSource: this, + }); + + this.nodeSearch = NodeSearch.create({ + dataSource: this, + }); + } + + keyDownHandler(e) { + const targetElementName = e.target.nodeName.toLowerCase(); + + if (targetElementName != 'input' && targetElementName != 'textarea') { + if (e.keyCode === SLASH_KEY) { + e.preventDefault(); + this.open(); + } + } + } + + didInsertElement() { + this.set('_keyDownHandler', this.keyDownHandler.bind(this)); + document.addEventListener('keydown', this._keyDownHandler); + } + + willDestroyElement() { + document.removeEventListener('keydown', this._keyDownHandler); + } + + @task(function*(string) { + try { + set(this, 'searchString', string); + + const jobs = yield this.dataCaches.fetch('job'); + const nodes = yield this.dataCaches.fetch('node'); + + set(this, 'jobs', jobs.toArray()); + set(this, 'nodes', nodes.toArray()); + + const jobResults = this.jobSearch.listSearched; + const nodeResults = this.nodeSearch.listSearched; + + return [ + { + groupName: `Jobs (${jobResults.length})`, + options: jobResults, + }, + { + groupName: `Clients (${nodeResults.length})`, + options: nodeResults, + }, + ]; + } catch (e) { + // eslint-disable-next-line + console.log('exception searching', e); + } + }) + search; + + @action + open() { + if (this.select) { + this.select.actions.open(); + } + } + + @action + selectOption(model) { + const itemModelName = model.constructor.modelName; + + if (itemModelName === 'job') { + this.router.transitionTo('jobs.job', model.name, { + queryParams: { namespace: model.get('namespace.name') }, + }); + } else if (itemModelName === 'node') { + this.router.transitionTo('clients.client', model.id); + } + } + + @action + storeSelect(select) { + if (select) { + this.select = select; + } + } + + @action + 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(); + }); + } + } + + calculatePosition(trigger) { + const { top, left, width } = trigger.getBoundingClientRect(); + return { + style: { + left, + width, + top, + }, + }; + } +} + +@classic +class JobSearch extends EmberObject.extend(Searchable) { + @computed + get searchProps() { + return ['id', 'name']; + } + + @computed + get fuzzySearchProps() { + return ['name']; + } + + @alias('dataSource.jobs') listToSearch; + @alias('dataSource.searchString') searchTerm; + + fuzzySearchEnabled = true; +} + +@classic +class NodeSearch extends EmberObject.extend(Searchable) { + @computed + get searchProps() { + return ['id', 'name']; + } + + @computed + get fuzzySearchProps() { + return ['name']; + } + + @alias('dataSource.nodes') listToSearch; + @alias('dataSource.searchString') searchTerm; + + fuzzySearchEnabled = true; +} diff --git a/ui/app/services/data-caches.js b/ui/app/services/data-caches.js new file mode 100644 index 00000000000..7617c61c583 --- /dev/null +++ b/ui/app/services/data-caches.js @@ -0,0 +1,33 @@ +import Service, { inject as service } from '@ember/service'; + +export const COLLECTION_CACHE_DURATION = 60000; // one minute + +export default class DataCachesService extends Service { + @service router; + @service store; + @service system; + + collectionLastFetched = {}; + + async fetch(modelName) { + const modelNameToRoute = { + job: 'jobs', + node: 'clients', + }; + + const route = modelNameToRoute[modelName]; + const lastFetched = this.collectionLastFetched[modelName]; + const now = Date.now(); + + if (this.router.isActive(route)) { + // TODO Incorrect because it’s constantly being fetched by watchers, shouldn’t be marked as last fetched only on search + this.collectionLastFetched[modelName] = now; + return this.store.peekAll(modelName); + } else if (lastFetched && now - lastFetched < COLLECTION_CACHE_DURATION) { + return this.store.peekAll(modelName); + } else { + this.collectionLastFetched[modelName] = now; + return this.store.findAll(modelName); + } + } +} diff --git a/ui/app/styles/components.scss b/ui/app/styles/components.scss index 1bfd76d9b42..c0f81710ec7 100644 --- a/ui/app/styles/components.scss +++ b/ui/app/styles/components.scss @@ -11,6 +11,8 @@ @import './components/exec-button'; @import './components/exec-window'; @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'; diff --git a/ui/app/styles/components/global-search-control.scss b/ui/app/styles/components/global-search-control.scss new file mode 100644 index 00000000000..e42243b5021 --- /dev/null +++ b/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%; + } +} diff --git a/ui/app/styles/components/global-search-dropdown.scss b/ui/app/styles/components/global-search-dropdown.scss new file mode 100644 index 00000000000..4e9c2f5ef3e --- /dev/null +++ b/ui/app/styles/components/global-search-dropdown.scss @@ -0,0 +1,45 @@ +.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; + } + } + } + + .ember-power-select-group-name { + text-transform: uppercase; + display: inline; + color: darken($grey-blue, 20%); + font-size: $size-7; + font-weight: $weight-semibold; + } +} diff --git a/ui/app/styles/core/navbar.scss b/ui/app/styles/core/navbar.scss index 48a2a065d76..9018db8afb8 100644 --- a/ui/app/styles/core/navbar.scss +++ b/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); @@ -35,7 +37,6 @@ display: block; position: absolute; left: 0px; - top: 1.25em; } } } @@ -44,7 +45,7 @@ display: flex; align-items: stretch; justify-content: flex-end; - margin-left: auto; + margin-left: inherit; } .navbar-end > a.navbar-item { @@ -100,7 +101,7 @@ display: flex; align-items: center; justify-content: flex-end; - margin-left: auto; + margin-left: inherit; } .navbar-end > a.navbar-item { diff --git a/ui/app/templates/components/global-header.hbs b/ui/app/templates/components/global-header.hbs index 23c5aa05ccf..e129a42c321 100644 --- a/ui/app/templates/components/global-header.hbs +++ b/ui/app/templates/components/global-header.hbs @@ -7,6 +7,9 @@ {{partial "partials/nomad-logo"}} + {{#unless (media "isMobile")}} + + {{/unless}}
Documentation ACL Tokens diff --git a/ui/app/templates/components/global-search/control.hbs b/ui/app/templates/components/global-search/control.hbs new file mode 100644 index 00000000000..d1f2c5c949f --- /dev/null +++ b/ui/app/templates/components/global-search/control.hbs @@ -0,0 +1,16 @@ + + {{option.name}} + diff --git a/ui/app/templates/components/global-search/message.hbs b/ui/app/templates/components/global-search/message.hbs new file mode 100644 index 00000000000..e69de29bb2d diff --git a/ui/app/templates/components/global-search/trigger.hbs b/ui/app/templates/components/global-search/trigger.hbs new file mode 100644 index 00000000000..aa52b18cd3b --- /dev/null +++ b/ui/app/templates/components/global-search/trigger.hbs @@ -0,0 +1,4 @@ +{{x-icon "search" class="is-small"}} +{{#unless select.isOpen}} + Search +{{/unless}} \ No newline at end of file diff --git a/ui/tests/acceptance/jobs-list-test.js b/ui/tests/acceptance/jobs-list-test.js index 1a23555abcb..bf0d7b1a55a 100644 --- a/ui/tests/acceptance/jobs-list-test.js +++ b/ui/tests/acceptance/jobs-list-test.js @@ -155,7 +155,7 @@ module('Acceptance | jobs list', function(hooks) { await JobsList.visit(); - await JobsList.search('dog'); + await JobsList.search.fillIn('dog'); assert.ok(JobsList.isEmpty, 'The empty message is shown'); assert.equal(JobsList.emptyState.headline, 'No Matches', 'The message is appropriate'); }); @@ -168,7 +168,7 @@ module('Acceptance | jobs list', function(hooks) { assert.equal(currentURL(), '/jobs?page=2', 'Page query param captures page=2'); - await JobsList.search('foobar'); + await JobsList.search.fillIn('foobar'); assert.equal(currentURL(), '/jobs?search=foobar', 'No page query param'); }); diff --git a/ui/tests/acceptance/search-test.js b/ui/tests/acceptance/search-test.js new file mode 100644 index 00000000000..3a8240223b7 --- /dev/null +++ b/ui/tests/acceptance/search-test.js @@ -0,0 +1,140 @@ +import { module, test } from 'qunit'; +import { currentURL, triggerEvent, visit } from '@ember/test-helpers'; +import { setupApplicationTest } from 'ember-qunit'; +import { setupMirage } from 'ember-cli-mirage/test-support'; +import PageLayout from 'nomad-ui/tests/pages/layout'; +import JobsList from 'nomad-ui/tests/pages/jobs/list'; +import { selectSearch } from 'ember-power-select/test-support'; +import sinon from 'sinon'; + +import { COLLECTION_CACHE_DURATION } from 'nomad-ui/services/data-caches'; + +function getRequestCount(server, url) { + return server.pretender.handledRequests.filterBy('url', url).length; +} + +module('Acceptance | search', function(hooks) { + setupApplicationTest(hooks); + setupMirage(hooks); + + test('search searches jobs and nodes with route- and time-based caching and navigates to chosen items', async function(assert) { + server.create('node', { name: 'xyz' }); + const otherNode = server.create('node', { name: 'aaa' }); + + server.create('job', { id: 'vwxyz', namespaceId: 'default' }); + server.create('job', { id: 'xyz', namespace: 'default' }); + server.create('job', { id: 'abc', namespace: 'default' }); + + await visit('/'); + + const clock = sinon.useFakeTimers({ + now: new Date(), + shouldAdvanceTime: true, + }); + + let presearchJobsRequestCount = getRequestCount(server, '/v1/jobs'); + let presearchNodesRequestCount = getRequestCount(server, '/v1/nodes'); + + await selectSearch(PageLayout.navbar.search.scope, 'xy'); + + PageLayout.navbar.search.as(search => { + assert.equal(search.groups.length, 2); + + search.groups[0].as(jobs => { + assert.equal(jobs.name, 'Jobs (2)'); + assert.equal(jobs.options.length, 2); + assert.equal(jobs.options[0].text, 'xyz'); + assert.equal(jobs.options[1].text, 'vwxyz'); + }); + + search.groups[1].as(clients => { + assert.equal(clients.name, 'Clients (1)'); + assert.equal(clients.options.length, 1); + assert.equal(clients.options[0].text, 'xyz'); + }); + }); + + assert.equal( + getRequestCount(server, '/v1/jobs'), + presearchJobsRequestCount, + 'no new jobs request should be sent when in the jobs hierarchy' + ); + assert.equal( + getRequestCount(server, '/v1/nodes'), + presearchNodesRequestCount + 1, + 'a nodes request should happen when not in the clients hierarchy' + ); + + await PageLayout.navbar.search.groups[0].options[0].click(); + assert.equal(currentURL(), '/jobs/xyz'); + + await selectSearch(PageLayout.navbar.search.scope, otherNode.id.substr(0, 3)); + + await PageLayout.navbar.search.groups[1].options[0].click(); + assert.equal(currentURL(), `/clients/${otherNode.id}`); + + presearchJobsRequestCount = getRequestCount(server, '/v1/jobs'); + presearchNodesRequestCount = getRequestCount(server, '/v1/nodes'); + + await selectSearch(PageLayout.navbar.search.scope, 'zzzzzzzzzzz'); + + assert.equal( + getRequestCount(server, '/v1/jobs'), + presearchJobsRequestCount, + 'a jobs request should not happen because the cache hasn’t expired' + ); + assert.equal( + presearchNodesRequestCount, + getRequestCount(server, '/v1/nodes'), + 'no new nodes request should happen when in the clients hierarchy' + ); + + clock.tick(COLLECTION_CACHE_DURATION * 2); + + await selectSearch(PageLayout.navbar.search.scope, otherNode.id.substr(0, 3)); + + assert.equal( + getRequestCount(server, '/v1/jobs'), + presearchJobsRequestCount + 1, + 'a jobs request should happen because the cache has expired' + ); + + clock.restore(); + }); + + test('clicking the search field starts search immediately', async function(assert) { + await visit('/'); + + assert.notOk(PageLayout.navbar.search.field.isPresent); + + await PageLayout.navbar.search.click(); + + assert.ok(PageLayout.navbar.search.field.isPresent); + }); + + test('pressing slash starts a search', async function(assert) { + await visit('/'); + + assert.notOk(PageLayout.navbar.search.field.isPresent); + + await triggerEvent('.page-layout', 'keydown', { + keyCode: 191, // slash + }); + + assert.ok(PageLayout.navbar.search.field.isPresent); + }); + + test('pressing slash when an input element is focused does not start a search', async function(assert) { + server.create('node'); + server.create('job'); + + await visit('/'); + + assert.notOk(PageLayout.navbar.search.field.isPresent); + + await JobsList.search.click(); + await JobsList.search.keydown({ keyCode: 191 }); + + assert.notOk(PageLayout.navbar.search.field.isPresent); + }); +}); diff --git a/ui/tests/pages/jobs/list.js b/ui/tests/pages/jobs/list.js index 2cad7087e0f..425ede744b8 100644 --- a/ui/tests/pages/jobs/list.js +++ b/ui/tests/pages/jobs/list.js @@ -3,10 +3,10 @@ import { create, collection, clickable, - fillable, isPresent, property, text, + triggerable, visitable, } from 'ember-cli-page-object'; @@ -18,7 +18,10 @@ export default create({ visit: visitable('/jobs'), - search: fillable('[data-test-jobs-search] input'), + search: { + scope: '[data-test-jobs-search] input', + keydown: triggerable('keydown'), + }, runJobButton: { scope: '[data-test-run-job]', diff --git a/ui/tests/pages/layout.js b/ui/tests/pages/layout.js index 257caf2e804..315646aaecc 100644 --- a/ui/tests/pages/layout.js +++ b/ui/tests/pages/layout.js @@ -12,6 +12,28 @@ export default create({ label: text(), }), }, + + search: { + scope: '[data-test-search]', + + click: clickable('.ember-power-select-trigger'), + + groups: collection('.ember-power-select-group', { + testContainer: '.ember-power-select-options', + resetScope: true, + name: text('.ember-power-select-group-name'), + + options: collection('.ember-power-select-option', { + label: text(), + }), + }), + + field: { + scope: '.ember-power-select-search input', + testContainer: 'html', + resetScope: true, + }, + }, }, gutter: {