Gantt view: use initialOptions to save & restore view state on navigation

changes.d/1745.feat.md

@@ -0,0 +1 @@
+More view options are now remembered & restored when navigating between workflows.

src/views/Gantt.vue

@@ -32,6 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           class="pr-md-2 mb-2"
         >
           <v-autocomplete
+            id="c-gantt-filter-job-name"
             multiple
             chips
             closable-chips
@@ -96,12 +97,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 +117,7 @@ const jobFields = [
   'finishedTime',
   'platform'
 ]
+
 /** The query which retrieves historical Job timing statistics */
 const QUERY = gql`
 query ganttQuery ($workflows: [ID]) {
@@ -119,6 +126,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 +161,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<number>}
+     */
+    const tasksPerPage = useInitialOptions('tasksPerPage', { props, emit }, 10)
+
+    /**
+     * The task name, timing option and platform filter state.
+     * @type {import('vue').Ref<object>}
+     */
+    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
   ],

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')
+  })
+})