open-nomad/ui/app/routes/application.js
Buck Doyle 6d037633da
ui: Change global search to use fuzzy search API (#10412)
This updates the UI to use the new fuzzy search API. It’s a drop-in
replacement so the / shortcut to jump to search is preserved, and
results can be cycled through and chosen via arrow keys and the
enter key.

It doesn’t use everything returned by the API:
* deployments and evaluations: these match by id, doesn’t seem like
  people would know those or benefit from quick navigation to them
* namespaces: doesn’t seem useful as they currently function
* scaling policies
* tasks: the response doesn’t include an allocation id, which means they
  can’t be navigated to in the UI without an additional query
* CSI volumes: aren’t actually returned by the API

Since there’s no API to check the server configuration and know whether
the feature has been disabled, this adds another query in
route:application#beforeModel that acts as feature detection: if the
attempt to query fails (500), the global search field is hidden.

Upon having added another query on load, I realised that beforeModel was
being triggered any time service:router#transitionTo was being called,
which happens upon navigating to a search result, for instance, because
of refreshModel being present on the region query parameter. This PR
adds a check for transition.queryParamsOnly and skips rerunning the
onload queries (token permissions check, license check, fuzzy search
feature detection).

Implementation notes:

* there are changes to unrelated tests to ignore the on-load feature
  detection query
* some lifecycle-related guards against undefined were required to
  address failures when navigating to an allocation
* the minimum search length of 2 characters is hard-coded as there’s
  currently no way to determine min_term_length in the UI
2021-04-28 13:31:05 -05:00

137 lines
3.4 KiB
JavaScript

import { inject as service } from '@ember/service';
import { later, next } from '@ember/runloop';
import Route from '@ember/routing/route';
import { AbortError } from '@ember-data/adapter/error';
import RSVP from 'rsvp';
import { action } from '@ember/object';
import classic from 'ember-classic-decorator';
@classic
export default class ApplicationRoute extends Route {
@service config;
@service system;
@service store;
@service token;
queryParams = {
region: {
refreshModel: true,
},
};
resetController(controller, isExiting) {
if (isExiting) {
controller.set('error', null);
}
}
async beforeModel(transition) {
let promises;
// service:router#transitionTo can cause this to rerun because of refreshModel on
// the region query parameter, this skips rerunning the detection/loading queries.
if (transition.queryParamsOnly) {
promises = Promise.resolve(true);
} else {
let exchangeOneTimeToken;
if (transition.to.queryParams.ott) {
exchangeOneTimeToken = this.get('token').exchangeOneTimeToken(transition.to.queryParams.ott);
} else {
exchangeOneTimeToken = Promise.resolve(true);
}
try {
await exchangeOneTimeToken;
} catch (e) {
this.controllerFor('application').set('error', e);
}
const fetchSelfTokenAndPolicies = this.get('token.fetchSelfTokenAndPolicies')
.perform()
.catch();
const fetchLicense = this.get('system.fetchLicense')
.perform()
.catch();
const checkFuzzySearchPresence = this.get('system.checkFuzzySearchPresence')
.perform()
.catch();
promises = await RSVP.all([
this.get('system.regions'),
this.get('system.defaultRegion'),
fetchLicense,
fetchSelfTokenAndPolicies,
checkFuzzySearchPresence,
]);
}
if (!this.get('system.shouldShowRegions')) return promises;
const queryParam = transition.to.queryParams.region;
const defaultRegion = this.get('system.defaultRegion.region');
const currentRegion = this.get('system.activeRegion') || defaultRegion;
// Only reset the store if the region actually changed
if (
(queryParam && queryParam !== currentRegion) ||
(!queryParam && currentRegion !== defaultRegion)
) {
this.system.reset();
this.store.unloadAll();
}
this.set('system.activeRegion', queryParam || defaultRegion);
return promises;
}
// Model is being used as a way to propagate the region and
// one time token query parameters for use in setupController.
model({ region }, { to: { queryParams: { ott }}}) {
return {
region,
hasOneTimeToken: ott,
};
}
setupController(controller, { region, hasOneTimeToken }) {
if (region === this.get('system.defaultRegion.region')) {
next(() => {
controller.set('region', null);
});
}
super.setupController(...arguments);
if (hasOneTimeToken) {
// Hack to force clear the OTT query parameter
later(() => {
controller.set('oneTimeToken', '');
}, 500);
}
}
@action
didTransition() {
if (!this.get('config.isTest')) {
window.scrollTo(0, 0);
}
}
@action
willTransition() {
this.controllerFor('application').set('error', null);
}
@action
error(error) {
if (!(error instanceof AbortError)) {
this.controllerFor('application').set('error', error);
}
}
}