Files
nomad/ui/app/routes/application.js
Phil Renaud 1976202cd6 Feature: Dynamic Host Volumes in the UI (#25224)
* DHV UI init

* /csi routes to /storage routes and a routeRedirector util (#25163)

* /csi routes to /storage routes and a routeRedirector util

* Tests and routes move csi/ to storage/

* Changelog added

* [ui] Storage UI overhaul + Dynamic Host Volumes UI (#25226)

* Storage index page and DHV model properties

* Naive version of a storage overview page

* Experimental fetch of alloc data dirs

* Fetch ephemeral disks and static host volumes as an ember concurrency task and nice table stylings

* Playing nice with section header labels to make eslint happy even though wcag was already cool with it

* inlined the storage type explainers and reordered things, plus tooltips and keynav

* Bones of a dynamic host volume individual page

* Woooo dynamic host volume model, adapter, and serializer with embedded alloc relationships

* Couple test fixes

* async:false relationship for dhv.hasMany('alloc') to prevent a ton of xhr requests

* DHV request type at index routemodel and better serialization

* Pagination and searching and query params oh my

* Test retrofits for csi volumes

* Really fantastic flake gets fixed

* DHV detail page acceptance test and a bunch of mirage hooks

* Seed so that the actions test has a guaranteed task

* removed ephemeral disk and static host volume manual scanning

* CapacityBytes and capabilities table added to DHV detail page

* Debugging actions flyout test

* was becoming clear that faker.seed editing was causing havoc elsewhere so might as well not boil the ocean and just tell this test to do what I want it to

* Post-create job gets taskCount instead of count

* CSI volumes now get /csi route prefix at detail level

* lazyclick method for unused keynav removed

* keyboard nav and table-watcher for DHV added

* Addressed PR comments, changed up capabilities table and id references, etc.

* Capabilities table for DHV and ID in details header

* Testfixes for pluginID and capabilities table on DHV page
2025-03-10 14:46:02 -04:00

171 lines
4.1 KiB
JavaScript

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
// @ts-check
/* eslint-disable ember/no-controller-access-in-routes */
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';
import { handleRouteRedirects } from '../utils/route-redirector';
@classic
export default class ApplicationRoute extends Route {
@service config;
@service system;
@service store;
@service token;
@service router;
queryParams = {
region: {
refreshModel: true,
},
};
resetController(controller, isExiting) {
if (isExiting) {
controller.set('error', null);
}
}
async beforeModel(transition) {
if (handleRouteRedirects(transition, this.router)) {
return;
}
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 = await 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.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)) {
if (
error.errors?.any(
(e) =>
e.detail === 'ACL token expired' ||
e.detail === 'ACL token not found'
)
) {
this.token.postExpiryPath = this.router.currentURL;
this.router.transitionTo('settings.tokens');
} else {
this.controllerFor('application').set('error', error);
}
}
}
}