open-nomad/ui/app/components/lifecycle-chart-row.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

44 lines
967 B
JavaScript

import Component from '@ember/component';
import { computed } from '@ember/object';
import { tagName } from '@ember-decorators/component';
import classic from 'ember-classic-decorator';
@classic
@tagName('')
export default class LifecycleChartRow extends Component {
@computed('taskState.state')
get activeClass() {
if (this.taskState && this.taskState.state === 'running') {
return 'is-active';
}
return undefined;
}
@computed('taskState.finishedAt')
get finishedClass() {
if (this.taskState && this.taskState.finishedAt) {
return 'is-finished';
}
return undefined;
}
@computed('task.lifecycleName')
get lifecycleLabel() {
if (!this.task) {
return '';
}
const name = this.task.lifecycleName;
if (name.includes('sidecar')) {
return 'sidecar';
} else if (name.includes('ephemeral')) {
return name.substr(0, name.indexOf('-'));
} else {
return name;
}
}
}