From 3a0673bb9e439f86c650c1c9f5e13505d4ce6489 Mon Sep 17 00:00:00 2001 From: Mark Dawson Date: Tue, 9 Apr 2024 13:19:15 +0100 Subject: [PATCH 1/3] Use initialOptions prop to save view state --- src/views/Gantt.vue | 48 +++++++++++++++++++++++++++++++++++++++------ 1 file changed, 42 insertions(+), 6 deletions(-) diff --git a/src/views/Gantt.vue b/src/views/Gantt.vue index 9ff8e30b6..369eb9766 100644 --- a/src/views/Gantt.vue +++ b/src/views/Gantt.vue @@ -96,12 +96,17 @@ import { import gql from 'graphql-tag' import { getPageTitle } from '@/utils/index' import graphqlMixin from '@/mixins/graphql' +import { + initialOptions, + useInitialOptions +} from '@/utils/initialOptions' import GanttChart from '@/components/cylc/gantt/GanttChart.vue' import DeltasCallback from '@/services/callbacks' import { matchTasks, platformOptions } from '@/components/cylc/gantt/filter' + /** List of fields to request for each job */ const jobFields = [ 'name', @@ -111,6 +116,7 @@ const jobFields = [ 'finishedTime', 'platform' ] + /** The query which retrieves historical Job timing statistics */ const QUERY = gql` query ganttQuery ($workflows: [ID]) { @@ -119,6 +125,7 @@ query ganttQuery ($workflows: [ID]) { } } ` + /** The callback which gets called when data comes in from the query */ export class GanttCallback extends DeltasCallback { constructor () { @@ -153,36 +160,63 @@ export class GanttCallback extends DeltasCallback { } export default { name: 'Gantt', + mixins: [ graphqlMixin ], + components: { GanttChart, }, + head () { return { title: getPageTitle('App.workflow', { name: this.workflowName }) } }, + + props: { + initialOptions, + }, + + setup (props, { emit }) { + /** + * The tasks per page filter state. + * @type {import('vue').Ref} + */ + 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 +234,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 +251,7 @@ export default { 200 // only re-run this once every 0.2 seconds ), }, + taskChoices: [ 10, 25, 50, 100 ], From 9b685aa81484f5f10439bd46da15992c89726c47 Mon Sep 17 00:00:00 2001 From: Mark Dawson Date: Wed, 10 Apr 2024 11:42:47 +0100 Subject: [PATCH 2/3] added e2e tests --- src/views/Gantt.vue | 1 + tests/e2e/specs/gantt.cy.js | 55 +++++++++++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) diff --git a/src/views/Gantt.vue b/src/views/Gantt.vue index 369eb9766..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" > { }) }) }) + +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') + }) +}) From 87dcd51ff5eb9b6dbc623e2238fb3fb9562154e6 Mon Sep 17 00:00:00 2001 From: Mark Dawson Date: Thu, 11 Apr 2024 11:24:02 +0100 Subject: [PATCH 3/3] updated change log --- CHANGES.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index f45fec92c..aacc3a0a9 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -10,6 +10,16 @@ creating a new release entry be sure to copy & paste the span tag with the `actions:bind` attribute, which is used by a regex to find the text to be updated. Only the first match gets replaced, so it's fine to leave the old ones in. --> +------------------------------------------------------------------------------- +## __cylc-ui-2.5.0 (Upcoming)__ + +### Enhancements + +[#1745](https://github.com/cylc/cylc-ui/pull/1745), +[#1744](https://github.com/cylc/cylc-ui/pull/1744), +[#1717](https://github.com/cylc/cylc-ui/pull/1717) - +Certain view options are now remembered & restored when navigating between workflows. + ------------------------------------------------------------------------------- ## __cylc-ui-2.4.0 (Released 2024-04-02)__