diff --git a/lib/public/Model.js b/lib/public/Model.js index 6818118c81..0d0ae222f3 100644 --- a/lib/public/Model.js +++ b/lib/public/Model.js @@ -95,21 +95,27 @@ export default class Model extends Observable { this._appConfiguration$ = new Observable(); this._inputDebounceTime = INPUT_DEBOUNCE_TIME; + // Setup router + this.router = new QueryRouter(); + this.router.observe(this.handleLocationChange.bind(this)); + this.router.bubbleTo(this); + registerFrontLinkListener((e) => this.router.handleLinkEvent(e)); + // Models this.home = new HomePageModel(this); this.home.bubbleTo(this); - this.lhcPeriods = new LhcPeriodsModel(this); + this.lhcPeriods = new LhcPeriodsModel(this.router); this.lhcPeriods.bubbleTo(this); - this.dataPasses = new DataPassesModel(this); + this.dataPasses = new DataPassesModel(this.router); this.dataPasses.bubbleTo(this); this.qcFlags = new QcFlagsModel(this); this.qcFlags.bubbleTo(this); - this.simulationPasses = new SimulationPassesModel(this); + this.simulationPasses = new SimulationPassesModel(this.router); this.simulationPasses.bubbleTo(this); this.qcFlagTypes = new QcFlagTypesModel(this); @@ -178,12 +184,6 @@ export default class Model extends Observable { this.errorModel = new ErrorModel(); this.errorModel.bubbleTo(this); - // Setup router - this.router = new QueryRouter(); - this.router.observe(this.handleLocationChange.bind(this)); - this.router.bubbleTo(this); - registerFrontLinkListener((e) => this.router.handleLinkEvent(e)); - // Init pages this.handleLocationChange(); this.window.addEventListener('resize', debounce(() => this.notify(), 100)); diff --git a/lib/public/components/Filters/common/FilteringModel.js b/lib/public/components/Filters/common/FilteringModel.js index 828fe55bed..545d848190 100644 --- a/lib/public/components/Filters/common/FilteringModel.js +++ b/lib/public/components/Filters/common/FilteringModel.js @@ -14,7 +14,7 @@ import { expandQueryLikeNestedKey } from '../../../utilities/expandNestedKey.js'; import { SelectionModel } from '../../common/selection/SelectionModel.js'; import { FilterModel } from './FilterModel.js'; -import { Observable } from '/js/src/index.js'; +import { buildUrl, Observable } from '/js/src/index.js'; /** * Model representing a filtering system, including filter inputs visibility, filters values and so on @@ -23,25 +23,39 @@ export class FilteringModel extends Observable { /** * Constructor * + * @param {QueryRouter} router router that controls the application's page navigation * @param {Object} filters the filters with their label and model */ - constructor(filters) { + constructor(router, filters) { super(); - this._visualChange$ = new Observable(); + this._pageIdentifier = null; + this._router = router; this._filters = {}; this._filterModels = []; Object.entries(filters).forEach(([key, model]) => this.put(key, model)); } + /** + * Sets the page identifiers + * + * @param {string} identifier a string identifies a page from the router params. + * Used to prevent unneeded reads/writes from/to the url + * @returns {void} + */ + set pageIdentifier(identifier) { + this._pageIdentifier = identifier; + } + /** * Reset the filters * * @param {boolean} [notify=false] if true the model notifies its observers + * @param {boolean} [clearUrl=false] if true filters will be removed from the url * @return {void} */ - reset(notify = false) { + reset(notify = false, clearUrl = false) { for (const model of this._filterModels) { model.reset(); } @@ -49,6 +63,12 @@ export class FilteringModel extends Observable { if (notify) { this.notify(); } + + if (clearUrl) { + const { params } = this._router; + delete params.filter; + this._router.go(buildUrl('?', params), false, true); + } } /** @@ -104,6 +124,22 @@ export class FilteringModel extends Observable { return this._filters[key]; } + /** + * When the user updates the displayed Objects, the filters should be placed in the URL as well + * @returns {undefined} + */ + setFilterToURL() { + const { params } = this._router; + const newParams = { ...params }; + newParams.filter = this.normalized; + + if (this._pageIdentifier === params.page) { + this._router.go(buildUrl('?', newParams), false, true); + } + + this.notify(); + } + /** * Add new filter * @@ -123,7 +159,7 @@ export class FilteringModel extends Observable { this._filters[key] = filter; this._filterModels.push(filter); - filter.bubbleTo(this); + filter.observe(() => this.setFilterToURL()); filter.visualChange$?.bubbleTo(this._visualChange$); } } diff --git a/lib/public/components/Filters/common/filtersPanelPopover.js b/lib/public/components/Filters/common/filtersPanelPopover.js index e0c0a7490c..1d729eb93e 100644 --- a/lib/public/components/Filters/common/filtersPanelPopover.js +++ b/lib/public/components/Filters/common/filtersPanelPopover.js @@ -48,8 +48,8 @@ const filtersToggleContentHeader = (filteringModel) => h('.flex-row.justify-betw 'button#reset-filters.btn.btn-danger', { onclick: () => filteringModel.resetFiltering - ? filteringModel.resetFiltering() - : filteringModel.reset(true), + ? filteringModel.resetFiltering(true, true) + : filteringModel.reset(true, true), disabled: !filteringModel.isAnyFilterActive(), }, 'Reset all filters', diff --git a/lib/public/views/DataPasses/DataPassesModel.js b/lib/public/views/DataPasses/DataPassesModel.js index 5d987b31d7..78589a56cd 100644 --- a/lib/public/views/DataPasses/DataPassesModel.js +++ b/lib/public/views/DataPasses/DataPassesModel.js @@ -21,14 +21,15 @@ import { DataPassesPerSimulationPassOverviewModel } from './PerSimulationPassOve export class DataPassesModel extends Observable { /** * The constructor of the model + * @param {QueryRouter} router router that controls the application's page navigation */ - constructor() { + constructor(router) { super(); - this._perLhcPeriodOverviewModel = new DataPassesPerLhcPeriodOverviewModel(); + this._perLhcPeriodOverviewModel = new DataPassesPerLhcPeriodOverviewModel(router, 'data-passes-per-lhc-period-overview'); this._perLhcPeriodOverviewModel.bubbleTo(this); - this._perSimulationPassOverviewModel = new DataPassesPerSimulationPassOverviewModel(); + this._perSimulationPassOverviewModel = new DataPassesPerSimulationPassOverviewModel(router, 'data-passes-per-simulation-pass-overview'); this._perSimulationPassOverviewModel.bubbleTo(this); } diff --git a/lib/public/views/DataPasses/DataPassesOverviewModel.js b/lib/public/views/DataPasses/DataPassesOverviewModel.js index b85cc052d7..d30d5435ed 100644 --- a/lib/public/views/DataPasses/DataPassesOverviewModel.js +++ b/lib/public/views/DataPasses/DataPassesOverviewModel.js @@ -22,16 +22,22 @@ import { OverviewPageModel } from '../../models/OverviewModel.js'; export class DataPassesOverviewModel extends OverviewPageModel { /** * Constructor + * @param {QueryRouter} router router that controls the application's page navigation + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor() { + constructor(router, pageIdentifier) { super(); - this._filteringModel = new FilteringModel({ - names: new TextTokensFilterModel(), - 'include[byName]': new SelectionFilterModel({ - availableOptions: NON_PHYSICS_PRODUCTIONS_NAMES_WORDS.map((word) => ({ label: word.toUpperCase(), value: word })), - }), - }); + this._filteringModel = new FilteringModel( + router, + { + names: new TextTokensFilterModel(), + 'include[byName]': new SelectionFilterModel({ + availableOptions: NON_PHYSICS_PRODUCTIONS_NAMES_WORDS.map((word) => ({ label: word.toUpperCase(), value: word })), + }), + }, + ); + this._filteringModel.pageIdentifier = pageIdentifier; this._filteringModel.visualChange$.bubbleTo(this); this._filteringModel.observe(() => { this._pagination.currentPage = 1; @@ -51,10 +57,12 @@ export class DataPassesOverviewModel extends OverviewPageModel { /** * Reset this model to its default * - * @returns {void} + * @param {boolean} _fetch Whether to refetch all data after filters have been reset + * @param {boolean} [clearUrl=false] if true filters will be removed from the url + * @return {void} */ - reset() { - this._filteringModel.reset(); + reset(_fetch = true, clearUrl = false) { + this._filteringModel.reset(false, clearUrl); super.reset(); } diff --git a/lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewModel.js b/lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewModel.js index dc125e1a94..6da2205751 100644 --- a/lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewModel.js +++ b/lib/public/views/DataPasses/PerLhcPeriodOverview/DataPassesPerLhcPeriodOverviewModel.js @@ -19,9 +19,11 @@ import { buildUrl } from '/js/src/index.js'; export class DataPassesPerLhcPeriodOverviewModel extends DataPassesOverviewModel { /** * Constructor + * @param {QueryRouter} router router that controls the application's page navigation + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor() { - super(); + constructor(router, pageIdentifier) { + super(router, pageIdentifier); this._lhcPeriodId = null; } diff --git a/lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewModel.js b/lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewModel.js index 30fd3c616c..d9b1008552 100644 --- a/lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewModel.js +++ b/lib/public/views/DataPasses/PerSimulationPassOverview/DataPassesPerSimulationPassOverviewModel.js @@ -21,9 +21,11 @@ import { DataPassesOverviewModel } from '../DataPassesOverviewModel.js'; export class DataPassesPerSimulationPassOverviewModel extends DataPassesOverviewModel { /** * Constructor + * @param {QueryRouter} router router that controls the application's page navigation + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor() { - super(); + constructor(router, pageIdentifier) { + super(router, pageIdentifier); this._simulationPass = new ObservableData(RemoteData.notAsked()); this._simulationPass.bubbleTo(this); } diff --git a/lib/public/views/Environments/EnvironmentModel.js b/lib/public/views/Environments/EnvironmentModel.js index ba4b1e86bf..53be81b0a0 100644 --- a/lib/public/views/Environments/EnvironmentModel.js +++ b/lib/public/views/Environments/EnvironmentModel.js @@ -29,7 +29,7 @@ export class EnvironmentModel extends Observable { super(); // Sub-models - this._overviewModel = new EnvironmentOverviewModel(model); + this._overviewModel = new EnvironmentOverviewModel(model, 'env-overview'); this._overviewModel.bubbleTo(this); this._detailsModel = new EnvironmentDetailsModel(); diff --git a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js b/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js index 8498a02d79..64893e72af 100644 --- a/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js +++ b/lib/public/views/Environments/Overview/EnvironmentOverviewModel.js @@ -28,24 +28,29 @@ export class EnvironmentOverviewModel extends OverviewPageModel { /** * Constructor * @param {Model} model global model + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor(model) { + constructor(model, pageIdentifier) { super(); - this._filteringModel = new FilteringModel({ - created: new TimeRangeInputModel(), - runNumbers: new RawTextFilterModel(), - statusHistory: new RawTextFilterModel(), - currentStatus: new SelectionFilterModel({ - availableOptions: Object.keys(StatusAcronym).map((status) => ({ - value: status, - label: coloredEnvironmentStatusComponent(status), - rawLabel: status, - })), - }), - ids: new RawTextFilterModel(), - }); + this._filteringModel = new FilteringModel( + model.router, + { + created: new TimeRangeInputModel(), + runNumbers: new RawTextFilterModel(), + statusHistory: new RawTextFilterModel(), + currentStatus: new SelectionFilterModel({ + availableOptions: Object.keys(StatusAcronym).map((status) => ({ + value: status, + label: coloredEnvironmentStatusComponent(status), + rawLabel: status, + })), + }), + ids: new RawTextFilterModel(), + }, + ); + this._filteringModel.pageIdentifier = pageIdentifier; this._filteringModel.observe(() => this._applyFilters(true)); this._filteringModel.visualChange$?.bubbleTo(this); @@ -87,10 +92,11 @@ export class EnvironmentOverviewModel extends OverviewPageModel { /** * Reset all filtering models * @param {boolean} fetch Whether to refetch all data after filters have been reset + * @param {boolean} [clearUrl=false] if true filters will be removed from the url * @return {void} */ - resetFiltering(fetch = true) { - this._filteringModel.reset(); + resetFiltering(fetch = true, clearUrl = false) { + this._filteringModel.reset(false, clearUrl); if (fetch) { this._applyFilters(true); diff --git a/lib/public/views/Home/Overview/HomePageModel.js b/lib/public/views/Home/Overview/HomePageModel.js index 40b6cfac85..d291fc9b47 100644 --- a/lib/public/views/Home/Overview/HomePageModel.js +++ b/lib/public/views/Home/Overview/HomePageModel.js @@ -26,13 +26,13 @@ export class HomePageModel extends Observable { */ constructor(model) { super(); - this._runsOverviewModel = new RunsOverviewModel(model); + this._runsOverviewModel = new RunsOverviewModel(model, 'home'); this._runsOverviewModel.bubbleTo(this); - this._logsOverviewModel = new LogsOverviewModel(model, true); + this._logsOverviewModel = new LogsOverviewModel(model, true, 'home'); this._logsOverviewModel.bubbleTo(this); - this._lhcFillsOverviewModel = new LhcFillsOverviewModel(true); + this._lhcFillsOverviewModel = new LhcFillsOverviewModel(model.router, true, 'home'); this._lhcFillsOverviewModel.bubbleTo(this); } diff --git a/lib/public/views/LhcFills/LhcFills.js b/lib/public/views/LhcFills/LhcFills.js index 70b6c5eb3d..1fda55ab58 100644 --- a/lib/public/views/LhcFills/LhcFills.js +++ b/lib/public/views/LhcFills/LhcFills.js @@ -29,7 +29,7 @@ export default class LhcFills extends Observable { this.model = model; // Sub-models - this._overviewModel = new LhcFillsOverviewModel(true); + this._overviewModel = new LhcFillsOverviewModel(model.router, true, 'lhc-fill-overview'); this._overviewModel.bubbleTo(this); this._detailsModel = new LhcFillDetailsModel(); diff --git a/lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js b/lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js index 8e292f9fbf..1bf04f6878 100644 --- a/lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js +++ b/lib/public/views/LhcFills/Overview/LhcFillsOverviewModel.js @@ -30,22 +30,28 @@ export class LhcFillsOverviewModel extends OverviewPageModel { /** * Constructor * + * @param {QueryRouter} router router that controls the application's page navigation * @param {boolean} [stableBeamsOnly=false] if true, overview will load stable beam only + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor(stableBeamsOnly = false) { + constructor(router, stableBeamsOnly = false, pageIdentifier) { super(); - this._filteringModel = new FilteringModel({ - fillNumbers: new RawTextFilterModel(), - beamDuration: new TextComparisonFilterModel(), - runDuration: new TextComparisonFilterModel(), - hasStableBeams: new ToggleFilterModel(stableBeamsOnly), - stableBeamsStart: new TimeRangeFilterModel(), - stableBeamsEnd: new TimeRangeFilterModel(), - beamTypes: new BeamTypeFilterModel(), - schemeName: new RawTextFilterModel(), - }); + this._filteringModel = new FilteringModel( + router, + { + fillNumbers: new RawTextFilterModel(), + beamDuration: new TextComparisonFilterModel(), + runDuration: new TextComparisonFilterModel(), + hasStableBeams: new ToggleFilterModel(stableBeamsOnly), + stableBeamsStart: new TimeRangeFilterModel(), + stableBeamsEnd: new TimeRangeFilterModel(), + beamTypes: new BeamTypeFilterModel(), + schemeName: new RawTextFilterModel(), + }, + ); + this._filteringModel.pageIdentifier = pageIdentifier; this._filteringModel.observe(() => this._applyFilters()); this._filteringModel.visualChange$.bubbleTo(this); @@ -85,10 +91,11 @@ export class LhcFillsOverviewModel extends OverviewPageModel { /** * Reset all filtering models * @param {boolean} fetch Whether to refetch all data after filters have been reset + * @param {boolean} [clearUrl=false] if true filters will be removed from the url * @return {void} */ - resetFiltering(fetch = true) { - this._filteringModel.reset(); + resetFiltering(fetch = true, clearUrl = false) { + this._filteringModel.reset(false, clearUrl); if (fetch) { this._applyFilters(); diff --git a/lib/public/views/Logs/LogsModel.js b/lib/public/views/Logs/LogsModel.js index b4f9342d42..ec4fcdc15e 100644 --- a/lib/public/views/Logs/LogsModel.js +++ b/lib/public/views/Logs/LogsModel.js @@ -30,7 +30,7 @@ export class LogsModel extends Observable { super(); this.model = model; - this._overviewModel = new LogsOverviewModel(model); + this._overviewModel = new LogsOverviewModel(model, 'log-overview'); this._overviewModel.bubbleTo(this); this._treeViewModel = new LogTreeViewModel(); diff --git a/lib/public/views/Logs/Overview/LogsOverviewModel.js b/lib/public/views/Logs/Overview/LogsOverviewModel.js index 4cb565e9b9..f2d531335b 100644 --- a/lib/public/views/Logs/Overview/LogsOverviewModel.js +++ b/lib/public/views/Logs/Overview/LogsOverviewModel.js @@ -34,21 +34,26 @@ export class LogsOverviewModel extends Observable { * * @param {Model} model global model * @param {boolean} excludeAnonymous Whether to exclude anonymous logs + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor(model, excludeAnonymous = false) { + constructor(model, excludeAnonymous = false, pageIdentifier) { super(); - this._filteringModel = new FilteringModel({ - author: new AuthorFilterModel(), - title: new RawTextFilterModel(), - content: new RawTextFilterModel(), - tags: new TagFilterModel(tagsProvider.items$), - runNumbers: new RawTextFilterModel(), - environmentIds: new RawTextFilterModel(), - fillNumbers: new RawTextFilterModel(), - created: new TimeRangeInputModel(), - }); + this._filteringModel = new FilteringModel( + model.router, + { + author: new AuthorFilterModel(), + title: new RawTextFilterModel(), + content: new RawTextFilterModel(), + tags: new TagFilterModel(tagsProvider.items$), + runNumbers: new RawTextFilterModel(), + environmentIds: new RawTextFilterModel(), + fillNumbers: new RawTextFilterModel(), + created: new TimeRangeInputModel(), + }, + ); + this._filteringModel.pageIdentifier = pageIdentifier; this._filteringModel.observe(() => this._applyFilters()); this._filteringModel.visualChange$.bubbleTo(this); @@ -122,11 +127,12 @@ export class LogsOverviewModel extends Observable { /** * Reset all filtering, sorting and pagination settings to their default values * - * @param {boolean} fetch Whether to refetch all logs after filters have been reset - * @return {undefined} + * @param {boolean} _fetch Whether to refetch all data after filters have been reset + * @param {boolean} [clearUrl=false] if true filters will be removed from the url + * @return {void} */ - reset(fetch = true) { - this._filteringModel.reset(); + reset(_fetch = true, clearUrl = false) { + this._filteringModel.reset(false, clearUrl); this._pagination.reset(); if (fetch) { diff --git a/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js b/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js index 72abce90f5..36c3f33f50 100644 --- a/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js +++ b/lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js @@ -23,16 +23,22 @@ import { RadioButtonFilterModel } from '../../../components/Filters/common/Radio export class QcFlagTypesOverviewModel extends OverviewPageModel { /** * Constructor + * @param {QueryRouter} router router that controls the application's page navigation + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor() { + constructor(router, pageIdentifier) { super(); - this._filteringModel = new FilteringModel({ - names: new TextTokensFilterModel(), - methods: new TextTokensFilterModel(), - bad: new RadioButtonFilterModel([{ label: 'Any' }, { label: 'Bad', value: true }, { label: 'Not Bad', value: false }]), - }); + this._filteringModel = new FilteringModel( + router, + { + names: new TextTokensFilterModel(), + methods: new TextTokensFilterModel(), + bad: new RadioButtonFilterModel([{ label: 'Any' }, { label: 'Bad', value: true }, { label: 'Not Bad', value: false }]), + }, + ); + this._filteringModel.pageIdentifier = pageIdentifier; this._filteringModel.observe(() => { this._pagination.silentlySetCurrentPage(1); this.load(); @@ -69,10 +75,12 @@ export class QcFlagTypesOverviewModel extends OverviewPageModel { /** * Reset this model to its default * - * @returns {void} + * @param {boolean} _fetch Whether to refetch all data after filters have been reset + * @param {boolean} [clearUrl=false] if true filters will be removed from the url + * @return {void} */ - reset() { - this._filteringModel.reset(); + reset(_fetch = true, clearUrl = false) { + this._filteringModel.reset(false, clearUrl); super.reset(); } } diff --git a/lib/public/views/QcFlagTypes/QcFlagTypesModel.js b/lib/public/views/QcFlagTypes/QcFlagTypesModel.js index 43468d3e34..fd5c391ada 100644 --- a/lib/public/views/QcFlagTypes/QcFlagTypesModel.js +++ b/lib/public/views/QcFlagTypes/QcFlagTypesModel.js @@ -29,7 +29,7 @@ export class QcFlagTypesModel extends Observable { this.model = model; // Overview - this._overviewModel = new QcFlagTypesOverviewModel(); + this._overviewModel = new QcFlagTypesOverviewModel(model.router, 'qc-flag-types-overview'); this._overviewModel.bubbleTo(this); } diff --git a/lib/public/views/Runs/Overview/FixedPdpBeamTypeRunsOverviewModel.js b/lib/public/views/Runs/Overview/FixedPdpBeamTypeRunsOverviewModel.js index 82eaf9e819..5edce4c14e 100644 --- a/lib/public/views/Runs/Overview/FixedPdpBeamTypeRunsOverviewModel.js +++ b/lib/public/views/Runs/Overview/FixedPdpBeamTypeRunsOverviewModel.js @@ -23,9 +23,10 @@ export class FixedPdpBeamTypeRunsOverviewModel extends RunsWithQcModel { /** * Constructor * @param {Model} model global model + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor(model) { - super(model); + constructor(model, pageIdentifier) { + super(model, pageIdentifier); this._pdpBeamTypes = []; } diff --git a/lib/public/views/Runs/Overview/RunsOverviewModel.js b/lib/public/views/Runs/Overview/RunsOverviewModel.js index b5c400e5d2..c27dbc5e49 100644 --- a/lib/public/views/Runs/Overview/RunsOverviewModel.js +++ b/lib/public/views/Runs/Overview/RunsOverviewModel.js @@ -49,56 +49,61 @@ export class RunsOverviewModel extends OverviewPageModel { /** * The constructor of the Overview model object * @param {Model} model global model + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor(model) { + constructor(model, pageIdentifier) { super(); - this._filteringModel = new FilteringModel({ - runNumbers: new RawTextFilterModel(), - detectors: new DetectorsFilterModel(detectorsProvider.dataTaking$), - tags: new TagFilterModel( - tagsProvider.items$, - [ - CombinationOperator.AND, - CombinationOperator.OR, - CombinationOperator.NONE_OF, - ], - ), - fillNumbers: new RawTextFilterModel(), - lhcPeriods: new RawTextFilterModel(), - o2start: new TimeRangeFilterModel(), - o2end: new TimeRangeFilterModel(), - definitions: new RunDefinitionFilterModel(), - runDuration: new NumericalComparisonFilterModel({ scale: 60 * 1000 }), - environmentIds: new RawTextFilterModel(), - runTypes: new RunTypesFilterModel(runTypesProvider.items$), - beamModes: new BeamModeFilterModel(beamModesProvider.items$), - runQualities: new SelectionFilterModel({ - availableOptions: RUN_QUALITIES.map((quality) => ({ - label: quality.toUpperCase(), - value: quality, - })), - }), - nDetectors: new NumericalComparisonFilterModel({ integer: true }), - nEpns: new NumericalComparisonFilterModel({ integer: true }), - nFlps: new NumericalComparisonFilterModel({ integer: true }), - ctfFileCount: new NumericalComparisonFilterModel({ integer: true }), - tfFileCount: new NumericalComparisonFilterModel({ integer: true }), - otherFileCount: new NumericalComparisonFilterModel({ integer: true }), - odcTopologyFullName: new RawTextFilterModel(), - eorReason: new EorReasonFilterModel(eorReasonTypeProvider.items$), - magnets: new MagnetsFilteringModel(magnetsCurrentLevelsProvider.items$), - muInelasticInteractionRate: new NumericalComparisonFilterModel(), - inelasticInteractionRateAvg: new NumericalComparisonFilterModel(), - inelasticInteractionRateAtStart: new NumericalComparisonFilterModel(), - inelasticInteractionRateAtMid: new NumericalComparisonFilterModel(), - inelasticInteractionRateAtEnd: new NumericalComparisonFilterModel(), - ddflp: new RadioButtonFilterModel([{ label: 'ANY' }, { label: 'ON', value: true }, { label: 'OFF', value: false }]), - dcs: new RadioButtonFilterModel([{ label: 'ANY' }, { label: 'ON', value: true }, { label: 'OFF', value: false }]), - epn: new RadioButtonFilterModel([{ label: 'ANY' }, { label: 'ON', value: true }, { label: 'OFF', value: false }]), - triggerValues: new SelectionModel({ availableOptions: TRIGGER_VALUES.map((value) => ({ label: value, value })) }), - }); + this._filteringModel = new FilteringModel( + model.router, + { + runNumbers: new RawTextFilterModel(), + detectors: new DetectorsFilterModel(detectorsProvider.dataTaking$), + tags: new TagFilterModel( + tagsProvider.items$, + [ + CombinationOperator.AND, + CombinationOperator.OR, + CombinationOperator.NONE_OF, + ], + ), + fillNumbers: new RawTextFilterModel(), + lhcPeriods: new RawTextFilterModel(), + o2start: new TimeRangeFilterModel(), + o2end: new TimeRangeFilterModel(), + definitions: new RunDefinitionFilterModel(), + runDuration: new NumericalComparisonFilterModel({ scale: 60 * 1000 }), + environmentIds: new RawTextFilterModel(), + runTypes: new RunTypesFilterModel(runTypesProvider.items$), + beamModes: new BeamModeFilterModel(beamModesProvider.items$), + runQualities: new SelectionFilterModel({ + availableOptions: RUN_QUALITIES.map((quality) => ({ + label: quality.toUpperCase(), + value: quality, + })), + }), + nDetectors: new NumericalComparisonFilterModel({ integer: true }), + nEpns: new NumericalComparisonFilterModel({ integer: true }), + nFlps: new NumericalComparisonFilterModel({ integer: true }), + ctfFileCount: new NumericalComparisonFilterModel({ integer: true }), + tfFileCount: new NumericalComparisonFilterModel({ integer: true }), + otherFileCount: new NumericalComparisonFilterModel({ integer: true }), + odcTopologyFullName: new RawTextFilterModel(), + eorReason: new EorReasonFilterModel(eorReasonTypeProvider.items$), + magnets: new MagnetsFilteringModel(magnetsCurrentLevelsProvider.items$), + muInelasticInteractionRate: new NumericalComparisonFilterModel(), + inelasticInteractionRateAvg: new NumericalComparisonFilterModel(), + inelasticInteractionRateAtStart: new NumericalComparisonFilterModel(), + inelasticInteractionRateAtMid: new NumericalComparisonFilterModel(), + inelasticInteractionRateAtEnd: new NumericalComparisonFilterModel(), + ddflp: new RadioButtonFilterModel([{ label: 'ANY' }, { label: 'ON', value: true }, { label: 'OFF', value: false }]), + dcs: new RadioButtonFilterModel([{ label: 'ANY' }, { label: 'ON', value: true }, { label: 'OFF', value: false }]), + epn: new RadioButtonFilterModel([{ label: 'ANY' }, { label: 'ON', value: true }, { label: 'OFF', value: false }]), + triggerValues: new SelectionModel({ availableOptions: TRIGGER_VALUES.map((value) => ({ label: value, value })) }), + }, + ); + this._filteringModel.pageIdentifier = pageIdentifier; this._filteringModel.observe(() => this._applyFilters(true)); this._filteringModel.visualChange$.bubbleTo(this); @@ -147,10 +152,11 @@ export class RunsOverviewModel extends OverviewPageModel { /** * Reset all filtering models * @param {boolean} fetch Whether to refetch all data after filters have been reset + * @param {boolean} [clearUrl=false] if true filters will be removed from the url * @return {void} */ - resetFiltering(fetch = true) { - this._filteringModel.reset(); + resetFiltering(fetch = true, clearUrl = false) { + this._filteringModel.reset(false, clearUrl); if (fetch) { this._applyFilters(true); diff --git a/lib/public/views/Runs/Overview/RunsWithQcModel.js b/lib/public/views/Runs/Overview/RunsWithQcModel.js index f92530b11c..6a3128b98d 100644 --- a/lib/public/views/Runs/Overview/RunsWithQcModel.js +++ b/lib/public/views/Runs/Overview/RunsWithQcModel.js @@ -68,9 +68,10 @@ export class RunsWithQcModel extends RunsOverviewModel { /** * Constructor * @param {Model} model global model + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor(model) { - super(model); + constructor(model, pageIdentifier) { + super(model, pageIdentifier); this._observablesQcFlagsSummaryDependsOn$ = null; // This filter instance will be added as a sub-filter for a MultiCompositionFilter and a GaqFilter later. diff --git a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js index 597a579d6b..28eed6d61b 100644 --- a/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js +++ b/lib/public/views/Runs/RunPerDataPass/RunsPerDataPassOverviewModel.js @@ -35,9 +35,10 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo /** * Constructor * @param {Model} model global model + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor(model) { - super(model); + constructor(model, pageIdentifier) { + super(model, pageIdentifier); this._dataPass$ = new ObservableData(RemoteData.notAsked()); this._dataPass$.bubbleTo(this); @@ -148,8 +149,8 @@ export class RunsPerDataPassOverviewModel extends FixedPdpBeamTypeRunsOverviewMo /** * @inheritdoc */ - resetFiltering(fetch = true) { - super.resetFiltering(fetch); + resetFiltering(fetch = true, clearUrl = false) { + super.resetFiltering(fetch, clearUrl); } /** diff --git a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js index 8c2332fb22..7a63578bef 100644 --- a/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js +++ b/lib/public/views/Runs/RunPerPeriod/RunsPerLhcPeriodOverviewModel.js @@ -31,9 +31,10 @@ export class RunsPerLhcPeriodOverviewModel extends FixedPdpBeamTypeRunsOverviewM * Constructor * * @param {Model} model global model + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor(model) { - super(model); + constructor(model, pageIdentifier) { + super(model, pageIdentifier); this._lhcPeriodId = null; this._lhcPeriodStatistics$ = new ObservableData(RemoteData.notAsked()); diff --git a/lib/public/views/Runs/RunsModel.js b/lib/public/views/Runs/RunsModel.js index 934c278d90..fa2106a2cb 100644 --- a/lib/public/views/Runs/RunsModel.js +++ b/lib/public/views/Runs/RunsModel.js @@ -32,13 +32,13 @@ export class RunsModel extends Observable { super(); this._detailsModel = new RunDetailsModel(); this._detailsModel.bubbleTo(this); - this._overviewModel = new RunsOverviewModel(model); + this._overviewModel = new RunsOverviewModel(model, 'run-overview'); this._overviewModel.bubbleTo(this); - this._perLhcPeriodOverviewModel = new RunsPerLhcPeriodOverviewModel(model); + this._perLhcPeriodOverviewModel = new RunsPerLhcPeriodOverviewModel(model, 'runs-per-lhc-period'); this._perLhcPeriodOverviewModel.bubbleTo(this); - this._perDataPassOverviewModel = new RunsPerDataPassOverviewModel(model); + this._perDataPassOverviewModel = new RunsPerDataPassOverviewModel(model, 'runs-per-data-pass'); this._perDataPassOverviewModel.bubbleTo(this); - this._perSimulationPassOverviewModel = new RunsPerSimulationPassOverviewModel(model); + this._perSimulationPassOverviewModel = new RunsPerSimulationPassOverviewModel(model, 'runs-per-simulation-pass'); this._perSimulationPassOverviewModel.bubbleTo(this); } diff --git a/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js b/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js index d5fbeb400f..5d081c33f5 100644 --- a/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js +++ b/lib/public/views/Runs/RunsPerSimulationPass/RunsPerSimulationPassOverviewModel.js @@ -23,9 +23,10 @@ export class RunsPerSimulationPassOverviewModel extends FixedPdpBeamTypeRunsOver /** * Constructor * @param {Model} model global model + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor(model) { - super(model); + constructor(model, pageIdentifier) { + super(model, pageIdentifier); this._simulationPass$ = new ObservableData(RemoteData.notAsked()); diff --git a/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewModel.js b/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewModel.js index d986ece53b..b74c665344 100644 --- a/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewModel.js +++ b/lib/public/views/SimulationPasses/AnchoredOverview/AnchoredSimulationPassesOverviewModel.js @@ -23,12 +23,15 @@ import { FilteringModel } from '../../../components/Filters/common/FilteringMode export class AnchoredSimulationPassesOverviewModel extends OverviewPageModel { /** * Constructor + * @param {QueryRouter} router router that controls the application's page navigation + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor() { + constructor(router, pageIdentifier) { super(); - this._filteringModel = new FilteringModel({ names: new TextTokensFilterModel() }); + this._filteringModel = new FilteringModel(router, { names: new TextTokensFilterModel() }); + this._filteringModel.pageIdentifier = pageIdentifier; this._filteringModel.observe(() => { this._pagination.silentlySetCurrentPage(1); this.load(); @@ -72,10 +75,12 @@ export class AnchoredSimulationPassesOverviewModel extends OverviewPageModel { /** * Reset this model to its default * - * @returns {void} + * @param {boolean} _fetch Whether to refetch all data after filters have been reset + * @param {boolean} [clearUrl=false] if true filters will be removed from the url + * @return {void} */ - reset() { - this._filteringModel.reset(); + reset(_fetch = true, clearUrl = false) { + this._filteringModel.reset(false, clearUrl); super.reset(); } diff --git a/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewModel.js b/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewModel.js index 0d8af9b309..51556d1f1c 100644 --- a/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewModel.js +++ b/lib/public/views/SimulationPasses/PerLhcPeriodOverview/SimulationPassesPerLhcPeriodOverviewModel.js @@ -23,11 +23,15 @@ import { FilteringModel } from '../../../components/Filters/common/FilteringMode export class SimulationPassesPerLhcPeriodOverviewModel extends OverviewPageModel { /** * Constructor + * @param {QueryRouter} router router that controls the application's page navigation + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor() { + constructor(router, pageIdentifier) { super(); - this._filteringModel = new FilteringModel({ names: new TextTokensFilterModel() }); + this._filteringModel = new FilteringModel(router, { names: new TextTokensFilterModel() }); + + this._filteringModel.pageIdentifier = pageIdentifier; this._filteringModel.visualChange$.bubbleTo(this); this._filteringModel.observe(() => { this._pagination.silentlySetCurrentPage(1); @@ -82,10 +86,12 @@ export class SimulationPassesPerLhcPeriodOverviewModel extends OverviewPageModel /** * Reset this model to its default * - * @returns {void} + * @param {boolean} _fetch Whether to refetch all data after filters have been reset + * @param {boolean} [clearUrl=false] if true filters will be removed from the url + * @return {void} */ - reset() { - this._filteringModel.reset(); + reset(_fetch = true, clearUrl = false) { + this._filteringModel.reset(false, clearUrl); super.reset(); } diff --git a/lib/public/views/SimulationPasses/SimulationPassesModel.js b/lib/public/views/SimulationPasses/SimulationPassesModel.js index 8e8d6e7969..03ec1818fd 100644 --- a/lib/public/views/SimulationPasses/SimulationPassesModel.js +++ b/lib/public/views/SimulationPasses/SimulationPassesModel.js @@ -21,14 +21,15 @@ import { AnchoredSimulationPassesOverviewModel } from './AnchoredOverview/Anchor export class SimulationPassesModel extends Observable { /** * The constructor of the model + * @param {QueryRouter} router router that controls the application's page navigation */ - constructor() { + constructor(router) { super(); - this._perLhcPeriodOverviewModel = new SimulationPassesPerLhcPeriodOverviewModel(); + this._perLhcPeriodOverviewModel = new SimulationPassesPerLhcPeriodOverviewModel(router, 'simulation-passes-per-lhc-period-overview'); this._perLhcPeriodOverviewModel.bubbleTo(this); - this._anchoredOverviewModel = new AnchoredSimulationPassesOverviewModel(); + this._anchoredOverviewModel = new AnchoredSimulationPassesOverviewModel(router, 'anchored-simulation-passes-overview'); this._anchoredOverviewModel.bubbleTo(this); } diff --git a/lib/public/views/lhcPeriods/LhcPeriodsModel.js b/lib/public/views/lhcPeriods/LhcPeriodsModel.js index 4f9d0ed185..7400961fec 100644 --- a/lib/public/views/lhcPeriods/LhcPeriodsModel.js +++ b/lib/public/views/lhcPeriods/LhcPeriodsModel.js @@ -20,11 +20,12 @@ import { LhcPeriodsOverviewModel } from './Overview/LhcPeriodsOverviewModel.js'; export class LhcPeriodsModel extends Observable { /** * The constructor of the model + * @param {QueryRouter} router router that controls the application's page navigation */ - constructor() { + constructor(router) { super(); - this._overviewModel = new LhcPeriodsOverviewModel(); + this._overviewModel = new LhcPeriodsOverviewModel(router, 'lhc-period-overview'); this._overviewModel.bubbleTo(this); } diff --git a/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js b/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js index e6073eb68f..11df6a7ab7 100644 --- a/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js +++ b/lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js @@ -24,16 +24,22 @@ import { buildUrl } from '/js/src/index.js'; export class LhcPeriodsOverviewModel extends OverviewPageModel { /** * The constructor of the Overview model object + * @param {QueryRouter} router router that controls the application's page navigation + * @param {string} pageIdentifier string that indicates what page this model represents */ - constructor() { + constructor(router, pageIdentifier) { super(); - this._filteringModel = new FilteringModel({ - names: new TextTokensFilterModel(), - years: new TextTokensFilterModel(), - pdpBeamTypes: new TextTokensFilterModel(), - }); + this._filteringModel = new FilteringModel( + router, + { + names: new TextTokensFilterModel(), + years: new TextTokensFilterModel(), + pdpBeamTypes: new TextTokensFilterModel(), + }, + ); + this._filteringModel.pageIdentifier = pageIdentifier; this._filteringModel.visualChange$.bubbleTo(this); this._filteringModel.observe(() => { this._pagination.silentlySetCurrentPage(1); @@ -76,11 +82,13 @@ export class LhcPeriodsOverviewModel extends OverviewPageModel { /** * Reset this model to its default * - * @returns {void} + * @param {boolean} _fetch Whether to refetch all data after filters have been reset + * @param {boolean} [clearUrl=false] if true filters will be removed from the url + * @return {void} */ - reset() { + reset(_fetch = true, clearUrl = false) { super.reset(); - this._filteringModel.reset(); + this._filteringModel.reset(false, clearUrl); } /** diff --git a/test/public/Filters/filtersToUrl.test.js b/test/public/Filters/filtersToUrl.test.js new file mode 100644 index 0000000000..dc0dc24356 --- /dev/null +++ b/test/public/Filters/filtersToUrl.test.js @@ -0,0 +1,528 @@ +/** + * @license + * Copyright CERN and copyright holders of ALICE O2. This software is + * distributed under the terms of the GNU General Public License v3 (GPL + * Version 3), copied verbatim in the file "COPYING". + * + * See http://alice-o2.web.cern.ch/license for full licensing information. + * + * In applying this license CERN does not waive the privileges and immunities + * granted to it by virtue of its status as an Intergovernmental Organization + * or submit itself to any jurisdiction. + */ + +const { expect } = require('chai'); +const { + defaultBefore, + defaultAfter, + goToPage, + fillInput, + getPopoverSelector, + getPeriodInputsSelectors, + pressElement, + openFilteringPanel, + waitForTableLength, +} = require('../defaults.js'); + +module.exports = () => { + let page; + let browser; + + before(async () => { + [page, browser] = await defaultBefore(); + }); + + const getQueryParameters = (page) => Object.fromEntries(new URL(page.url()).searchParams.entries()); + + it('should set filters from LogsOverview to the URL', async () => { + await goToPage(page, 'log-overview'); + const firstCheckboxId = 'tag-dropdown-option-DPG'; + const popoverTrigger = '.createdAt-filter .popover-trigger'; + + await page.waitForSelector(popoverTrigger); + await openFilteringPanel(page); + + const popOverSelector = await getPopoverSelector(await page.$(popoverTrigger)); + const { fromDateSelector, toDateSelector, fromTimeSelector, toTimeSelector } = getPeriodInputsSelectors(popOverSelector); + + await fillInput(page, '.title-textFilter', 'bogusbogusbogus', ['change']); + await fillInput(page, '#authorFilterText', 'Jane', ['change']); + await fillInput(page, '.content-textFilter', 'particle', ['change']); + await pressElement(page, '.tags-filter .dropdown-trigger'); + await pressElement(page, `#${firstCheckboxId}`, true); + await fillInput(page, '.environments-filter input', '8E4aZTjY', ['change']); + await fillInput(page, '.runNumbers-textFilter', '1,2', ['change']); + await fillInput(page, '.fillNumbers-textFilter', '1, 6', ['change']); + await fillInput(page, fromDateSelector, '2020-02-02', ['change']); + await fillInput(page, toDateSelector, '2020-02-02', ['change']); + await fillInput(page, fromTimeSelector, '11:00', ['change']); + await fillInput(page, toTimeSelector, '12:00', ['change']); + + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "log-overview", + "filter[author]": "Jane", + "filter[title]": "bogusbogusbogus", + "filter[content]": "particle", + "filter[tags][values]": "DPG", + "filter[tags][operation]": "and", + "filter[runNumbers]": "1,2", + "filter[environmentIds]": "8E4aZTjY", + "filter[fillNumbers]": "1, 6", + "filter[created][from]": "1580641200000", + "filter[created][to]": "1580644800000" + }); + }); + + it('should set filters from EnvironmentsOverview to the URL', async () => { + await goToPage(page, 'env-overview'); + const popoverTrigger = '.createdAt-filter .popover-trigger'; + + await page.waitForSelector(popoverTrigger); + await openFilteringPanel(page); + + const createdAtPopoverSelector = await getPopoverSelector(await page.$(popoverTrigger)); + const periodInputsSelectors = getPeriodInputsSelectors(createdAtPopoverSelector); + + await fillInput(page, '.runs-filter input', '10', ['change']); + await fillInput(page, '.id-filter input', 'Dxi029djX, TDI59So3d', ['change']); + await pressElement(page, '#checkboxes-checkbox-DESTROYED'); + await fillInput(page, '.historyItems-filter input', 'C-R-D-X', ['change']); + await fillInput(page, periodInputsSelectors.fromDateSelector, '2019-08-09', ['change']); + await fillInput(page, periodInputsSelectors.toDateSelector, '2019-08-10', ['change']); + await fillInput(page, periodInputsSelectors.fromTimeSelector, '00:00', ['change']); + await fillInput(page, periodInputsSelectors.toTimeSelector, '23:59', ['change']); + + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "env-overview", + "filter[created][from]": "1565308800000", + "filter[created][to]": "1565481540000", + "filter[runNumbers]": "10", + "filter[statusHistory]": "C-R-D-X", + "filter[currentStatus]": "DESTROYED", + "filter[ids]": "Dxi029djX, TDI59So3d" + }); + }); + + it('should set filters from LhcFillsOverview to the URL', async () => { + await goToPage(page, 'lhc-fill-overview'); + await waitForTableLength(page, 5); + const sbEndPopoverTrigger = '.stableBeamsEnd-filter .popover-trigger'; + const sbStartPopoverTrigger = '.stableBeamsStart-filter .popover-trigger'; + const sbStartPopOverSelector = await getPopoverSelector(await page.$(sbStartPopoverTrigger)); + const sbEndPopOverSelector = await getPopoverSelector(await page.$(sbEndPopoverTrigger)); + const filterSchemeNameInputField= '.fillingSchemeName-filter input'; + const { + fromDateSelector: sbStartFromDateSelector, + toDateSelector: sbStartToDateSelector, + fromTimeSelector: sbStartFromTimeSelector, + toTimeSelector: sbStartToTimeSelector + } = getPeriodInputsSelectors(sbStartPopOverSelector); + + const { + fromDateSelector: sbEndFromDateSelector, + toDateSelector: sbEndToDateSelector, + fromTimeSelector: sbEndFromTimeSelector, + toTimeSelector: sbEndToTimeSelector + } = getPeriodInputsSelectors(sbEndPopOverSelector); + + await openFilteringPanel(page); + await fillInput(page, '#beam-duration-filter-operand', '00:01:40', ['change']); + await fillInput(page, '#run-duration-filter-operand', '00:00:00', ['change']); + await pressElement(page, '#beam-types-checkbox-p-Pb'); + await fillInput(page, sbStartFromDateSelector, '2019-08-08', ['change']); + await fillInput(page, sbStartToDateSelector, '2019-08-08', ['change']); + await fillInput(page, sbStartFromTimeSelector, '10:00', ['change']); + await fillInput(page, sbStartToTimeSelector, '12:00', ['change']); + await fillInput(page, sbEndFromDateSelector, '2022-03-22', ['change']); + await fillInput(page, sbEndToDateSelector, '2022-03-22', ['change']); + await fillInput(page, sbEndFromTimeSelector, '01:00', ['change']); + await fillInput(page, sbEndToTimeSelector, '23:59', ['change']); + await fillInput(page, filterSchemeNameInputField, 'Single_12b_8_1024_8_2018', ['change']); + + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "lhc-fill-overview", + "filter[beamDuration][operator]": "=", + "filter[beamDuration][limit]": "00:01:40", + "filter[runDuration][operator]": "=", + "filter[runDuration][limit]": "00:00:00", + "filter[hasStableBeams]": "true", + "filter[stableBeamsEnd][from]": "1647910800000", + "filter[stableBeamsEnd][to]": "1647993540000", + "filter[stableBeamsStart][from]": "1565258400000", + "filter[stableBeamsStart][to]": "1565265600000", + "filter[beamTypes]": "p-Pb", + "filter[schemeName]": "Single_12b_8_1024_8_2018" + }); + }); + + it('should set filters from runsOverview to the URL', async () => { + await goToPage(page, 'run-overview'); + const dipolePopoverSelector = await getPopoverSelector(await page.$('.aliceL3AndDipoleCurrent-filter .popover-trigger')); + const startPopoverSelector = await getPopoverSelector(await page.$('.timeO2Start-filter .popover-trigger')); + const endPopoverSelector = await getPopoverSelector(await page.$('.timeO2End-filter .popover-trigger')); + + const { + fromDateSelector: startFromDateSelector, + toDateSelector: startToDateSelector, + fromTimeSelector: startFromTimeSelector, + toTimeSelector: startToTimeSelector + } = getPeriodInputsSelectors(startPopoverSelector); + + const { + fromDateSelector: endFromDateSelector, + toDateSelector: endToDateSelector, + fromTimeSelector: endFromTimeSelector, + toTimeSelector: endToTimeSelector + } = getPeriodInputsSelectors(endPopoverSelector); + + await openFilteringPanel(page); + await pressElement(page, '#detector-filter-dropdown-option-ITS', true); + await pressElement(page, '#tag-dropdown-option-FOOD', true); + await pressElement(page, '#run-definition-checkbox-PHYSICS', true); + await pressElement(page, '.timeO2Start-filter .popover-trigger'); + await fillInput(page, startFromTimeSelector, '11:11', ['change']); + await fillInput(page, startToTimeSelector, '14:00', ['change']); + await fillInput(page, startFromDateSelector, '2021-02-03', ['change']); + await fillInput(page, startToDateSelector, '2021-02-03', ['change']); + await fillInput(page, endFromTimeSelector, '11:11', ['change']); + await fillInput(page, endToTimeSelector, '14:00', ['change']); + await fillInput(page, endFromDateSelector, '2021-02-03', ['change']); + await fillInput(page, endToDateSelector, '2021-02-03', ['change']); + await fillInput(page, '#duration-operand', '1500', ['change']); + await pressElement(page, `${dipolePopoverSelector} .dropdown-option:last-child`, true); + await pressElement(page, '#checkboxes-checkbox-bad'); + await pressElement(page, '#triggerValue-checkbox-OFF'); + await fillInput(page, '#runOverviewFilter .runNumbers-textFilter', '101'); + await fillInput(page, '.fillNumbers-textFilter', '1, 3', ['change']); + await fillInput(page, '.environmentIds-textFilter', 'Dxi029djX, TDI59So3d', ['change']); + await pressElement(page, '#run-types-dropdown-option-2', true); + await pressElement(page, '#beam-mode-dropdown-option-NO\\ BEAM', true); + await fillInput(page, '#nDetectors-operand', '1', ['change']); + await fillInput(page, '#nFlps-operand', '10', ['change']); + await fillInput(page, '#nEpns-operand', '10', ['change']); + await fillInput(page, '#ctfFileCount-operand', '1', ['change']); + await fillInput(page, '#tfFileCount-operand', '1', ['change']); + await fillInput(page, '#otherFileCount-operand', '1', ['change']); + await pressElement(page, '#epnFilterRadioOFF', true); + await page.select('#eorCategories', 'DETECTORS'); + await page.select('#eorTitles', 'CPV'); + await fillInput(page, '#eorDescription', 'some', ['change']); + + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "run-overview", + "filter[runNumbers]": "101", + "filter[detectors][operator]": "and", + "filter[detectors][values]": "ITS", + "filter[tags][values]": "FOOD", + "filter[tags][operation]": "and", + "filter[fillNumbers]": "1, 3", + "filter[o2start][from]": "1612350660000", + "filter[o2start][to]": "1612360800000", + "filter[o2end][from]": "1612350660000", + "filter[o2end][to]": "1612360800000", + "filter[definitions]": "PHYSICS", + "filter[runDuration][operator]": "=", + "filter[runDuration][limit]": "90000000", + "filter[environmentIds]": "Dxi029djX, TDI59So3d", + "filter[runTypes][]": "2", + "filter[beamModes][]": "NO BEAM", + "filter[runQualities]": "bad", + "filter[nDetectors][operator]": "=", + "filter[nDetectors][limit]": "1", + "filter[nEpns][operator]": "=", + "filter[nEpns][limit]": "10", + "filter[nFlps][operator]": "=", + "filter[nFlps][limit]": "10", + "filter[ctfFileCount][operator]": "=", + "filter[ctfFileCount][limit]": "1", + "filter[tfFileCount][operator]": "=", + "filter[tfFileCount][limit]": "1", + "filter[otherFileCount][operator]": "=", + "filter[otherFileCount][limit]": "1", + "filter[eorReason][category]": "DETECTORS", + "filter[eorReason][title]": "CPV", + "filter[eorReason][description]": "some", + "filter[magnets][l3]": "30003", + "filter[magnets][dipole]": "0", + "filter[epn]": "false", + "filter[triggerValues]": "OFF" + }); + }); + + it('should set filters from lhcPriodOverview to the URL', async () => { + await goToPage(page, 'lhc-period-overview'); + + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22a'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(2) input[type=text]', '2022'); + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(3) input[type=text]', 'PbPb'); + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "lhc-period-overview", + "filter[names][]": "LHC22a", + "filter[years][]": "2022", + "filter[pdpBeamTypes][]": "PbPb" + }); + }); + + it('should set filters from qcFlagTypesOverview to the URL', async () => { + await goToPage(page, 'qc-flag-types-overview'); + + await fillInput(page, '.name-filter input[type=text]', 'bad'); + await fillInput(page, '.method-filter input[type=text]', 'bad'); + await pressElement(page, '#badFilterRadioBad', true); + + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "qc-flag-types-overview", + "filter[names][]": "bad", + "filter[methods][]": "bad", + "filter[bad]": "true" + }); + }); + + it('should set filters from runsPerLhcPeriodOverview to the URL', async () => { + await goToPage(page, 'runs-per-lhc-period', { queryParameters: { lhcPeriodId: 2 }}); + const startPopoverSelector = await getPopoverSelector(await page.$('.timeO2Start-filter .popover-trigger')); + const endPopoverSelector = await getPopoverSelector(await page.$('.timeO2End-filter .popover-trigger')); + const dipolePopoverSelector = await getPopoverSelector(await page.$('.aliceL3AndDipoleCurrent-filter .popover-trigger')); + + const { + fromDateSelector: startFromDateSelector, + toDateSelector: startToDateSelector, + fromTimeSelector: startFromTimeSelector, + toTimeSelector: startToTimeSelector + } = getPeriodInputsSelectors(startPopoverSelector); + + const { + fromDateSelector: endFromDateSelector, + toDateSelector: endToDateSelector, + fromTimeSelector: endFromTimeSelector, + toTimeSelector: endToTimeSelector + } = getPeriodInputsSelectors(endPopoverSelector); + + await fillInput(page, '#inelasticInteractionRateAvg-operand', '100000', ['change']); + await fillInput(page, '#muInelasticInteractionRate-operand', '100000', ['change']); + await fillInput(page, '#runOverviewFilter .runNumbers-textFilter', '101'); + await fillInput(page, '.fillNumbers-textFilter', '1, 3', ['change']); + + await pressElement(page, `${dipolePopoverSelector} .dropdown-option:last-child`, true); + await fillInput(page, startFromTimeSelector, '11:11', ['change']); + await fillInput(page, startToTimeSelector, '14:00', ['change']); + await fillInput(page, startFromDateSelector, '2021-02-03', ['change']); + await fillInput(page, startToDateSelector, '2021-02-03', ['change']); + await fillInput(page, endFromTimeSelector, '11:11', ['change']); + await fillInput(page, endToTimeSelector, '14:00', ['change']); + await fillInput(page, endFromDateSelector, '2021-02-03', ['change']); + await fillInput(page, endToDateSelector, '2021-02-03', ['change']); + + + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "runs-per-lhc-period", + "lhcPeriodId": "2", + "filter[runNumbers]": "101", + "filter[fillNumbers]": "1, 3", + "filter[o2end][from]": "1612350660000", + "filter[o2end][to]": "1612360800000", + "filter[o2start][from]": "1612350660000", + "filter[o2start][to]": "1612360800000", + "filter[magnets][l3]": "30003", + "filter[magnets][dipole]": "0", + "filter[muInelasticInteractionRate][operator]": "=", + "filter[muInelasticInteractionRate][limit]": "100000", + "filter[inelasticInteractionRateAvg][operator]": "=", + "filter[inelasticInteractionRateAvg][limit]": "100000" + }); + }); + + it('should set filters from DataPassesPerLhcPeriodOverview to the URL', async () => { + await goToPage(page, 'data-passes-per-lhc-period-overview', { queryParameters: { lhcPeriodId: 2 }}); + + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1', ['change']); + await pressElement(page, '#checkboxes-checkbox-test', true); + + + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "data-passes-per-lhc-period-overview", + "lhcPeriodId": "2", + "filter[names][]": "LHC22b_apass1", + "filter[include][byName]": "test" + }); + }); + + it('should set filters from DataPassesPerSimulationPassOverview to the URL', async () => { + await goToPage(page, 'data-passes-per-simulation-pass-overview', { queryParameters: { simulationPassId: 1 }}); + + await fillInput(page, 'div.flex-row.items-baseline:nth-of-type(1) input[type=text]', 'LHC22b_apass1', ['change']); + await pressElement(page, '#checkboxes-checkbox-test', true); + + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "data-passes-per-simulation-pass-overview", + "simulationPassId": "1", + "filter[names][]": "LHC22b_apass1", + "filter[include][byName]": "test" + }); + }); + + it('should set filters from AnchoredSimulationPassesOverview to the URL', async () => { + await goToPage(page, 'anchored-simulation-passes-overview', { queryParameters: { dataPassId: 1 }}); + + await fillInput(page, '.name-filter input', 'LHC23k6c', ['input']); + + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "anchored-simulation-passes-overview", + "dataPassId": "1", + "filter[names][]": "LHC23k6c" + }); + }); + + it('should set filters from RunsPerSimulationPass to the URL', async () => { + await goToPage(page, 'runs-per-simulation-pass', { queryParameters: { simulationPassId: 2 }}); + + const dipolePopoverSelector = await getPopoverSelector(await page.$('.aliceL3AndDipoleCurrent-filter .popover-trigger')); + const startPopoverSelector = await getPopoverSelector(await page.$('.timeO2Start-filter .popover-trigger')); + const endPopoverSelector = await getPopoverSelector(await page.$('.timeO2End-filter .popover-trigger')); + + const { + fromDateSelector: startFromDateSelector, + toDateSelector: startToDateSelector, + fromTimeSelector: startFromTimeSelector, + toTimeSelector: startToTimeSelector + } = getPeriodInputsSelectors(startPopoverSelector); + + const { + fromDateSelector: endFromDateSelector, + toDateSelector: endToDateSelector, + fromTimeSelector: endFromTimeSelector, + toTimeSelector: endToTimeSelector + } = getPeriodInputsSelectors(endPopoverSelector); + + await openFilteringPanel(page); + await pressElement(page, '.timeO2Start-filter .popover-trigger'); + await fillInput(page, startFromTimeSelector, '11:11', ['change']); + await fillInput(page, startToTimeSelector, '14:00', ['change']); + await fillInput(page, startFromDateSelector, '2021-02-03', ['change']); + await fillInput(page, startToDateSelector, '2021-02-03', ['change']); + await fillInput(page, endFromTimeSelector, '11:11', ['change']); + await fillInput(page, endToTimeSelector, '14:00', ['change']); + await fillInput(page, endFromDateSelector, '2021-02-03', ['change']); + await fillInput(page, endToDateSelector, '2021-02-03', ['change']); + await fillInput(page, '.inelasticInteractionRateAtMid-filter input', '1', ['change']); + await fillInput(page, '.inelasticInteractionRateAtEnd-filter input', '1', ['change']); + await fillInput(page, '.inelasticInteractionRateAtStart-filter input', '1', ['change']); + await pressElement(page, `${dipolePopoverSelector} .dropdown-option:last-child`, true); + await pressElement(page, '#mcReproducibleAsNotBadToggle', true); + + // These two are detectorQCNotBadFraction[_id] filters. There are a dozen more, but they are all identical hence why only these were tested + await fillInput(page, '.QC-SPECIFIC-filter input', '1', ['change']); + await fillInput(page, '.ACO-filter input', '1', ['change']); + + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "runs-per-simulation-pass", + "simulationPassId": "2", + "filter[o2end][from]": "1612350660000", + "filter[o2start][from]": "1612350660000", + "filter[o2end][to]": "1612360800000", + "filter[o2start][to]": "1612360800000", + "filter[magnets][l3]": "30003", + "filter[magnets][dipole]": "0", + "filter[inelasticInteractionRateAtStart][operator]": "=", + "filter[inelasticInteractionRateAtStart][limit]": "1", + "filter[inelasticInteractionRateAtMid][operator]": "=", + "filter[inelasticInteractionRateAtMid][limit]": "1", + "filter[inelasticInteractionRateAtEnd][operator]": "=", + "filter[inelasticInteractionRateAtEnd][limit]": "1", + "filter[detectorsQcNotBadFraction][mcReproducibleAsNotBad]": "true", + "filter[detectorsQcNotBadFraction][_20][operator]": "=", + "filter[detectorsQcNotBadFraction][_20][limit]": "0.01", + "filter[detectorsQcNotBadFraction][_17][operator]": "=", + "filter[detectorsQcNotBadFraction][_17][limit]": "0.01" + }); + }); + + it('should set filters from RunsPerSimulationPass to the URL', async () => { + await goToPage(page, 'runs-per-data-pass', { queryParameters: { dataPassId: 1 }}); + + const dipolePopoverSelector = await getPopoverSelector(await page.$('.aliceL3AndDipoleCurrent-filter .popover-trigger')); + const startPopoverSelector = await getPopoverSelector(await page.$('.timeO2Start-filter .popover-trigger')); + const endPopoverSelector = await getPopoverSelector(await page.$('.timeO2End-filter .popover-trigger')); + + const { + fromDateSelector: startFromDateSelector, + toDateSelector: startToDateSelector, + fromTimeSelector: startFromTimeSelector, + toTimeSelector: startToTimeSelector + } = getPeriodInputsSelectors(startPopoverSelector); + + const { + fromDateSelector: endFromDateSelector, + toDateSelector: endToDateSelector, + fromTimeSelector: endFromTimeSelector, + toTimeSelector: endToTimeSelector + } = getPeriodInputsSelectors(endPopoverSelector); + + await openFilteringPanel(page); + await pressElement(page, '#detector-filter-dropdown-option-ITS', true); + await pressElement(page, '#tag-dropdown-option-FOOD', true); + await pressElement(page, '.timeO2Start-filter .popover-trigger'); + await fillInput(page, startFromTimeSelector, '11:11', ['change']); + await fillInput(page, startToTimeSelector, '14:00', ['change']); + await fillInput(page, startFromDateSelector, '2021-02-03', ['change']); + await fillInput(page, startToDateSelector, '2021-02-03', ['change']); + await fillInput(page, endFromTimeSelector, '11:11', ['change']); + await fillInput(page, endToTimeSelector, '14:00', ['change']); + await fillInput(page, endFromDateSelector, '2021-02-03', ['change']); + await fillInput(page, endToDateSelector, '2021-02-03', ['change']); + await fillInput(page, '#duration-operand', '1500', ['change']); + await fillInput(page, '.muInelasticInteractionRate-filter input', '1', ['change']); + await fillInput(page, '.inelasticInteractionRateAvg-filter input', '1', ['change']); + await fillInput(page, '.globalAggregatedQuality-filter input', '1', ['change']); + + await pressElement(page, `${dipolePopoverSelector} .dropdown-option:last-child`, true); + await pressElement(page, '#mcReproducibleAsNotBadToggle', true); + + // These two are detectorQCNotBadFraction[_id] filters. There are a dozen more, but they are all identical hence why only these were tested + await fillInput(page, '.QC-SPECIFIC-filter input', '1', ['change']); + await fillInput(page, '.ACO-filter input', '1', ['change']); + + const queryParameters = getQueryParameters(page); + expect(queryParameters).to.deep.equal({ + "page": "runs-per-data-pass", + "dataPassId": "1", + "filter[detectors][operator]": "and", + "filter[detectors][values]": "ITS", + "filter[tags][values]": "FOOD", + "filter[tags][operation]": "and", + "filter[o2end][from]": "1612350660000", + "filter[o2end][to]": "1612360800000", + "filter[o2start][from]": "1612350660000", + "filter[o2start][to]": "1612360800000", + "filter[runDuration][limit]": "90000000", + "filter[runDuration][operator]": "=", + "filter[magnets][l3]": "30003", + "filter[magnets][dipole]": "0", + "filter[muInelasticInteractionRate][operator]": "=", + "filter[muInelasticInteractionRate][limit]": "1", + "filter[inelasticInteractionRateAvg][operator]": "=", + "filter[inelasticInteractionRateAvg][limit]": "1", + "filter[detectorsQcNotBadFraction][mcReproducibleAsNotBad]": "true", + "filter[detectorsQcNotBadFraction][_20][operator]": "=", + "filter[detectorsQcNotBadFraction][_20][limit]": "0.01", + "filter[detectorsQcNotBadFraction][_17][operator]": "=", + "filter[detectorsQcNotBadFraction][_17][limit]": "0.01", + "filter[gaq][notBadFraction][operator]": "=", + "filter[gaq][notBadFraction][limit]": "0.01", + "filter[gaq][mcReproducibleAsNotBad]": "true" + }); + }); + + after(async () => await defaultAfter(page, browser)); +} diff --git a/test/public/Filters/index.js b/test/public/Filters/index.js new file mode 100644 index 0000000000..e5146bb7fc --- /dev/null +++ b/test/public/Filters/index.js @@ -0,0 +1,18 @@ +/** + * @license + * Copyright CERN and copyright holders of ALICE O2. This software is + * distributed under the terms of the GNU General Public License v3 (GPL + * Version 3), copied verbatim in the file "COPYING". + * + * See http://alice-o2.web.cern.ch/license for full licensing information. + * + * In applying this license CERN does not waive the privileges and immunities + * granted to it by virtue of its status as an Intergovernmental Organization + * or submit itself to any jurisdiction. + */ + +const ToUrlSuite = require('./filtersToUrl.test.js'); + +module.exports = () => { + describe('Filters to URL', ToUrlSuite); +}; diff --git a/test/public/defaults.js b/test/public/defaults.js index 0523d8462b..ed6726bece 100644 --- a/test/public/defaults.js +++ b/test/public/defaults.js @@ -667,14 +667,24 @@ module.exports.checkColumnBalloon = async (page, rowIndex, columnIndex) => { * @return {Promise} resolves once the value has been typed */ module.exports.fillInput = async (page, inputSelector, value, events = ['input']) => { - await page.waitForSelector(inputSelector); - await page.evaluate((inputSelector, value, events) => { + await page.waitForFunction((inputSelector, value, events) => { const element = document.querySelector(inputSelector); + + if (!element) { + return false; + } + element.value = value; + for (const eventKey of events) { element.dispatchEvent(new Event(eventKey, { bubbles: true })); } - }, inputSelector, value, events); + + return true; + }, + {}, + inputSelector, value, events + ); }; /** diff --git a/test/public/index.js b/test/public/index.js index 8ebdc23e68..293d9a9e94 100644 --- a/test/public/index.js +++ b/test/public/index.js @@ -27,9 +27,11 @@ const ComponentsSuite = require('./components'); const SimulationPassesSuite = require('./simulationPasses'); const QcFlagTypesSuite = require('./qcFlagTypes'); const QcFlagsSuite = require('./qcFlags'); +const FilterSuite = require('./Filters'); module.exports = () => { describe('Components', ComponentsSuite); + describe('Filters', FilterSuite); describe('LhcPeriods', LhcPeriodsSuite); describe('LhcFills', LhcFillsSuite); describe('Logs', LogsSuite);