Files
nomad/ui/app/adapters/watchable.js
Phil Renaud 16479af38d Jobs Index Page: Live Updates + Pagination (#20452)
* Hook and latch on the initial index

* Serialization and restart of controller and table

* de-log

* allocBlocks reimplemented at job model level

* totalAllocs doesnt mean on jobmodel what it did in steady.js

* Hamburgers to sausages

* Hacky way to bring new jobs back around and parent job handling in list view

* Getting closer to hook/latch

* Latch from update on hook from initialize, but fickle

* Note on multiple-watch problem

* Sensible monday morning comment removal

* use of abortController to handle transition and reset events

* Next token will now update when there's an on-page shift

* Very rough anti-jostle technique

* Demoable, now to move things out of route and into controller

* Into the controller, generally

* Smarter cancellations

* Reset abortController on index models run, and system/sysbatch jobs now have an improved groupCountSum computed property

* Prev Page reverse querying

* n+1th jobs existing will trigger nextToken/pagination display

* Start of a GET/POST statuses return

* Namespace fix

* Unblock tests

* Realizing to my small horror that this skipURLModification flag may be too heavy handed

* Lintfix

* Default liveupdates localStorage setting to true

* Pagination and index rethink

* Big uncoupling of watchable and url-append stuff

* Testfixes for region, search, and keyboard

* Job row class for test purposes

* Allocations in test now contain events

* Starting on the jobs list tests in earnest

* Forbidden state de-bubbling cleanup

* Job list page size fixes

* Facet/Search/Filter jobs list tests skipped

* Maybe it's the automatic mirage logging

* Unbreak task unit test

* Pre-sort sort

* styling for jobs list pagination and general PR cleanup

* moving from Job.ActiveDeploymentID to Job.LatestDeployment.ID

* modifyIndex-based pagination (#20350)

* modifyIndex-based pagination

* modifyIndex gets its own column and pagination compacted with icons

* A generic withPagination handler for mirage

* Some live-PR changes

* Pagination and button disabled tests

* Job update handling tests for jobs index

* assertion timeout in case of long setTimeouts

* assert.timeouts down to 500ms

* de-to-do

* Clarifying comment and test descriptions

* Bugfix: resizing your browser on the new jobs index page would make the viz grow forever (#20458)

* [ui] Searching and filtering options (#20459)

* Beginnings of a search box for filter expressions

* jobSearchBox integration test

* jobs list updateFilter initial test

* Basic jobs list filtering tests

* First attempt at side-by-side facets and search with a computed filter

* Weirdly close to an iterative approach but checked isnt tracked properly

* Big rework to make filter composition and decomposition work nicely with the url

* Namespace facet dropdown added

* NodePool facet dropdown added

* hdsFacet for future testing and basic namespace filtering test

* Namespace filter existence test

* Status filtering

* Node pool/dynamic facet test

* Test patchups

* Attempt at optimize test fix

* Allocation re-load on optimize page explainer

* The Big Un-Skip

* Post-PR-review cleanup

* todo-squashing

* [ui] Handle parent/child jobs with the paginated Jobs Index route (#20493)

* First pass at a non-watchQuery version

* Parameterized jobs get child fetching and jobs index status style for parent jobs

* Completed allocs vs Running allocs in a child-job context, and fix an issue where moving from parent to parent would not reset index

* Testfix and better handling empty-child-statuses-list

* Parent/child test case

* Dont show empty allocation-status bars for parent jobs with no children

* Splits Settings into 2 sections, sign-in/profile and user settings (#20535)

* Changelog
2024-05-06 17:09:37 -04:00

226 lines
6.9 KiB
JavaScript

/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import { get } from '@ember/object';
import { assign } from '@ember/polyfills';
import { inject as service } from '@ember/service';
import { AbortError } from '@ember-data/adapter/error';
import queryString from 'query-string';
import ApplicationAdapter from './application';
import removeRecord from '../utils/remove-record';
import classic from 'ember-classic-decorator';
@classic
export default class Watchable extends ApplicationAdapter {
@service watchList;
@service store;
// Overriding ajax is not advised, but this is a minimal modification
// that sets off a series of events that results in query params being
// available in handleResponse below. Unfortunately, this is the only
// place where what becomes requestData can be modified.
//
// It's either this weird side-effecting thing that also requires a change
// to ajaxOptions or overriding ajax completely.
ajax(url, type, options = {}) {
const hasParams = hasNonBlockingQueryParams(options);
if (!hasParams || type !== 'GET') return super.ajax(url, type, options);
let params = { ...options?.data };
delete params.index;
// Options data gets appended as query params as part of ajaxOptions.
// In order to prevent doubling params, data should only include index
// at this point since everything else is added to the URL in advance.
options.data = options.data.index ? { index: options.data.index } : {};
return super.ajax(`${url}?${queryString.stringify(params)}`, type, options);
}
findAll(store, type, sinceToken, snapshotRecordArray, additionalParams = {}) {
const params = assign(this.buildQuery(), additionalParams);
const url = this.urlForFindAll(type.modelName);
if (get(snapshotRecordArray || {}, 'adapterOptions.watch')) {
params.index = this.watchList.getIndexFor(url);
}
const signal = get(
snapshotRecordArray || {},
'adapterOptions.abortController.signal'
);
return this.ajax(url, 'GET', {
signal,
data: params,
});
}
findRecord(store, type, id, snapshot, additionalParams = {}) {
const originalUrl = this.buildURL(
type.modelName,
id,
snapshot,
'findRecord'
);
let [url, params] = originalUrl.split('?');
params = assign(
queryString.parse(params) || {},
this.buildQuery(),
additionalParams
);
if (get(snapshot || {}, 'adapterOptions.watch')) {
params.index = this.watchList.getIndexFor(originalUrl);
}
const signal = get(snapshot || {}, 'adapterOptions.abortController.signal');
return this.ajax(url, 'GET', {
signal,
data: params,
}).catch((error) => {
if (error instanceof AbortError || error.name == 'AbortError') {
return;
}
throw error;
});
}
query(
store,
type,
query,
snapshotRecordArray,
options,
additionalParams = {}
) {
const url = this.buildURL(type.modelName, null, null, 'query', query);
const method = get(options, 'adapterOptions.method') || 'GET';
let [urlPath, params] = url.split('?');
params = assign(
queryString.parse(params) || {},
this.buildQuery(),
additionalParams,
query
);
if (get(options, 'adapterOptions.watch')) {
params.index = this.watchList.getIndexFor(
`${urlPath}?${queryString.stringify(query)}`
);
}
const signal = get(options, 'adapterOptions.abortController.signal');
return this.ajax(urlPath, method, {
signal,
data: params,
}).then((payload) => {
const adapter = store.adapterFor(type.modelName);
// Query params may not necessarily map one-to-one to attribute names.
// Adapters are responsible for declaring param mappings.
const queryParamsToAttrs = Object.keys(
adapter.queryParamsToAttrs || {}
).map((key) => ({
queryParam: key,
attr: adapter.queryParamsToAttrs[key],
}));
// Remove existing records that match this query. This way if server-side
// deletes have occurred, the store won't have stale records.
store
.peekAll(type.modelName)
.filter((record) =>
queryParamsToAttrs.some(
(mapping) => get(record, mapping.attr) === query[mapping.queryParam]
)
)
.forEach((record) => {
removeRecord(store, record);
});
return payload;
});
}
reloadRelationship(
model,
relationshipName,
options = { watch: false, abortController: null, replace: false }
) {
const { watch, abortController, replace } = options;
const relationship = model.relationshipFor(relationshipName);
if (relationship.kind !== 'belongsTo' && relationship.kind !== 'hasMany') {
throw new Error(
`${relationship.key} must be a belongsTo or hasMany, instead it was ${relationship.kind}`
);
} else {
const url = model[relationship.kind](relationship.key).link();
let params = {};
if (watch) {
params.index = this.watchList.getIndexFor(url);
}
// Avoid duplicating existing query params by passing them to ajax
// in the URL and in options.data
if (url.includes('?')) {
const paramsInUrl = queryString.parse(url.split('?')[1]);
Object.keys(paramsInUrl).forEach((key) => {
delete params[key];
});
}
return this.ajax(url, 'GET', {
signal: abortController && abortController.signal,
data: params,
}).then(
(json) => {
const store = this.store;
const normalizeMethod =
relationship.kind === 'belongsTo'
? 'normalizeFindBelongsToResponse'
: 'normalizeFindHasManyResponse';
const serializer = store.serializerFor(relationship.type);
const modelClass = store.modelFor(relationship.type);
const normalizedData = serializer[normalizeMethod](
store,
modelClass,
json
);
if (replace) {
store.unloadAll(relationship.type);
}
store.push(normalizedData);
},
(error) => {
if (error instanceof AbortError || error.name === 'AbortError') {
return relationship.kind === 'belongsTo' ? {} : [];
}
throw error;
}
);
}
}
handleResponse(status, headers, payload, requestData) {
// Some browsers lowercase all headers. Others keep them
// case sensitive.
const newIndex = headers['x-nomad-index'] || headers['X-Nomad-Index'];
if (newIndex) {
this.watchList.setIndexFor(requestData.url, newIndex);
}
return super.handleResponse(...arguments);
}
}
function hasNonBlockingQueryParams(options) {
if (!options || !options.data) return false;
const keys = Object.keys(options.data);
if (!keys.length) return false;
if (keys.length === 1 && keys[0] === 'index') return false;
return true;
}