diff --git a/changes.d/1745.feat.md b/changes.d/1745.feat.md new file mode 100644 index 000000000..a537957b4 --- /dev/null +++ b/changes.d/1745.feat.md @@ -0,0 +1 @@ +More view options are now remembered & restored when navigating between workflows. diff --git a/src/views/Gantt.vue b/src/views/Gantt.vue index 9ff8e30b6..e26b0b775 100644 --- a/src/views/Gantt.vue +++ b/src/views/Gantt.vue @@ -32,6 +32,7 @@ along with this program. If not, see . class="pr-md-2 mb-2" > } + */ + const tasksPerPage = useInitialOptions('tasksPerPage', { props, emit }, 10) + + /** + * The task name, timing option and platform filter state. + * @type {import('vue').Ref} + */ + const jobsFilter = useInitialOptions('jobsFilter', { props, emit }, { + name: [], + timingOption: 'totalTimes', + platformOption: -1, + }) + + return { + tasksPerPage, + jobsFilter, + } + }, + beforeMount () { this.jobsQuery() }, + data () { return { - tasksPerPage: 10, callback: new GanttCallback(), timingOptions: [ { value: 'totalTimes', title: 'Total times' }, { value: 'runTimes', title: 'Run times' }, { value: 'queueTimes', title: 'Queue times' }, ], - jobsFilter: { - name: [], - timingOption: 'totalTimes', - platformOption: -1, - }, } }, + computed: { // a list of the workflow IDs this view is "viewing" // NOTE: we plan multi-workflow functionality so we are writing views @@ -200,6 +235,7 @@ export default { return this.jobsFilter.timingOption.replace(/Times/, '') }, }, + methods: { /** * Run the one-off query for historical job data and pass its results @@ -216,6 +252,7 @@ export default { 200 // only re-run this once every 0.2 seconds ), }, + taskChoices: [ 10, 25, 50, 100 ], diff --git a/tests/e2e/specs/gantt.cy.js b/tests/e2e/specs/gantt.cy.js index 8f7aff430..2ae9ad264 100644 --- a/tests/e2e/specs/gantt.cy.js +++ b/tests/e2e/specs/gantt.cy.js @@ -27,3 +27,58 @@ describe('Gantt view', () => { }) }) }) + +describe('Filter save state', () => { + // Its hard to test the gantt chart is displaying what we expect as it is rendered as svg + // Instead we can check the filter values remain the same when navigating away and back again + + function addView (view) { + cy.get('[data-cy=add-view-btn]').click() + cy.get(`#toolbar-add-${view}-view`).click() + // wait for menu to close + .should('not.be.exist') + } + + function checkOption (selector, value) { + cy.get(selector) + .parent() + .contains(value) + .should('be.visible') + } + + function selectOption (selector, value) { + cy.get(selector) + .click({ force: true }) + cy.get('.v-list-item') + .contains(value) + .click({ force: true }) + } + + it('remembers task name, platform and timings when switching between workflows', () => { + cy.visit('/#/workspace/one') + addView('Gantt') + // Set task name filter option to something other than default ('') + selectOption('#c-gantt-filter-job-name', 'c3') + // Set task times filter option to something other than default ('Total times') + selectOption('#c-gantt-filter-job-timings', 'Queue') + // Set platform filter option to something other than default ('All') + selectOption('#c-gantt-filter-job-platforms', 'localhost') + // Set tasks per page filter option to something other than default (10) + selectOption('#c-gantt-tasks-per-page', '25') + + // Navigate away + cy.visit('/#/') + cy.get('.c-dashboard') + // Navigate back + cy.visit('/#/workspace/one') + + // Check name filter + checkOption('#c-gantt-filter-job-name', 'c3') + // Check task times filter + checkOption('#c-gantt-filter-job-timings', 'Queue') + // Check platform filter + checkOption('#c-gantt-filter-job-platforms', 'localhost') + // Check tasks per page + checkOption('#c-gantt-tasks-per-page', '25') + }) +})