Use initialOptions prop to save view state

This is saved along with the Lumino layout for restoring after navigation.

Implemented for the log view only so far.

src/components/cylc/cylcObject/Menu.vue

@@ -279,7 +279,7 @@ export default {
           {
             name: 'Log',
             initialOptions: {
-              relativeID: this.node.tokens.relativeID
+              relativeID: this.node.tokens.relativeID || null
             }
           }
         )

src/components/cylc/workflow/Lumino.vue

@@ -19,14 +19,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- Lumino box panel gets inserted here -->
   </div>
   <template
-    v-for="[id, { name, initialOptions }] in views"
+    v-for="[id, { name }] in views"
     :key="id"
   >
     <Teleport :to="`#${id}`">
       <component
         :is="props.allViews.get(name).component"
         :workflow-name="workflowName"
-        :initial-options="initialOptions"
+        v-model:initial-options="views.get(id).initialOptions"
         class="h-100"
       />
     </Teleport>
@@ -62,7 +62,7 @@ import { useDefaultView } from '@/views/views'
  * Mitt event for adding a view to the workspace.
  * @typedef {Object} AddViewEvent
  * @property {string} name - the view to add
- * @property {Object=} initialOptions - prop passed to the view component
+ * @property {Record<string,*>} initialOptions - prop passed to the view component
  */
 
 const $eventBus = inject('eventBus')
@@ -135,16 +135,16 @@ onBeforeUnmount(() => {
 /**
  * Create a widget and add it to the dock.
  *
- * @param {AddViewEvent} view
+ * @param {AddViewEvent} event
  * @param {boolean} onTop
  */
-const addWidget = (view, onTop = true) => {
+const addWidget = ({ name, initialOptions = {} }, onTop = true) => {
   const id = uniqueId('widget')
-  const luminoWidget = new LuminoWidget(id, startCase(view.name), /* closable */ true)
+  const luminoWidget = new LuminoWidget(id, startCase(name), /* closable */ true)
   dockPanel.addWidget(luminoWidget, { mode: 'tab-after' })
   // give time for Lumino's widget DOM element to be created
   nextTick(() => {
-    views.value.set(id, view)
+    views.value.set(id, { name, initialOptions })
     addWidgetEventListeners(id)
     if (onTop) {
       dockPanel.selectWidget(luminoWidget)

src/views/Log.vue

@@ -56,7 +56,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           v-if="jobLog"
           data-cy="job-id-input"
           class="flex-grow-1 flex-column"
-          v-model="relativeID"
+          :model-value="relativeID"
+          @update:modelValue="debouncedUpdateRelativeID"
           placeholder="cycle/task/job"
           clearable
         />
@@ -143,6 +144,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
+import { ref } from 'vue'
+import { usePrevious } from '@vueuse/core'
 import {
   mdiClockOutline,
   mdiFileAlertOutline,
@@ -153,6 +156,11 @@ import {
 import { getPageTitle } from '@/utils/index'
 import graphqlMixin from '@/mixins/graphql'
 import subscriptionComponentMixin from '@/mixins/subscriptionComponent'
+import {
+  initialOptions,
+  updateInitialOptionsEvent,
+  useInitialOptions
+} from '@/views/initialOptions'
 import LogComponent from '@/components/cylc/log/Log.vue'
 import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import { Tokens } from '@/utils/uid'
@@ -227,6 +235,8 @@ export const getDefaultFile = (logFiles) => {
   return null // rather than undefined
 }
 
+const getFileLabel = (id) => id ? `No log files for ${id}` : 'Enter a task/job ID'
+
 class Results {
   constructor () {
     /** @type {string[]} */
@@ -287,34 +297,59 @@ export default {
     }
   },
 
+  emits: [
+    updateInitialOptionsEvent,
+  ],
+
   props: {
-    initialOptions: {
-      type: Object,
-      required: false,
-      default: () => ({})
-    }
+    initialOptions,
   },
 
-  data () {
+  setup (props, { emit }) {
+    /**
+     * The task/job ID input.
+     * @type {import('vue').Ref<string>}
+     */
+    const relativeID = useInitialOptions('relativeID', { props, emit })
+
+    const previousRelativeID = usePrevious(relativeID)
+
+    /**
+     * The selected log file name.
+     * @type {import('vue').Ref<string>}
+     */
+    const file = useInitialOptions('file', { props, emit })
+
+    /** Set the value of relativeID at most every 0.5 seconds, used for text input */
+    const debouncedUpdateRelativeID = debounce((value) => {
+      relativeID.value = value
+    }, 500)
+
     return {
       // the log subscription query
-      query: null,
+      query: ref(null),
       // list of log files for the selected workflow/task/job
-      logFiles: [],
+      logFiles: ref([]),
       // the log file as a list of lines
-      results: new Results(),
-      // the task/job ID input
-      relativeID: null,
-      // the selected log file name
-      file: null,
+      results: ref(new Results()),
+      relativeID,
+      previousRelativeID,
+      file,
       // the label for the file input
-      fileLabel: 'Select File',
+      fileLabel: ref('Select File'),
       // turns the file input off (e.g. when the file list is being loaded)
-      fileDisabled: false,
-      // toggle between viewing workflow logs (0) and job logs (1)
-      jobLog: 0, // default to displaying workflow logs
+      fileDisabled: ref(false),
+      // toggle between viewing workflow logs (0) and job logs (1).
+      // default to displaying workflow logs unless initial task/job ID is provided.
+      jobLog: ref(relativeID.value == null ? 0 : 1),
       // toggle timestamps in log files
-      timestamps: true,
+      timestamps: ref(true),
+      debouncedUpdateRelativeID,
+    }
+  },
+
+  data () {
+    return {
       controlGroups: [
         {
           title: 'Log',
@@ -338,19 +373,19 @@ export default {
     }
   },
 
-  created () {
-    // set the ID/file if specified in initialOptions
-    if (this.initialOptions?.tokens?.task) {
-      this.relativeID = this.initialOptions.tokens.relativeID
-    }
-    if (this.initialOptions?.file) {
-      this.file = this.initialOptions.file
-    }
-  },
-
-  async mounted () {
-    // load the log file list and subscribe on startup
-    await this.updateLogFileList()
+  mounted () {
+    this.$watch(
+      () => ({ id: this.id, file: this.file }),
+      async ({ id }, old) => {
+        // update the query when the id or file change
+        this.updateQuery()
+        // refresh the file list when the id changes
+        if ((id ?? null) !== (old?.id ?? null)) { // (treat undefined as null)
+          await this.updateLogFileList()
+        }
+      },
+      { immediate: true }
+    )
   },
 
   computed: {
@@ -423,7 +458,7 @@ export default {
       } catch (err) {
         // the query failed
         console.warn(err)
-        this.fileLabel = this.id ? `No log files for ${this.id}` : 'Enter a task/job ID'
+        this.fileLabel = getFileLabel(this.id)
         this.fileDisabled = true
         return
       }
@@ -446,31 +481,20 @@ export default {
         this.fileDisabled = false
         this.logFiles = logFiles
       } else {
-        this.fileLabel = `No log files for ${this.id}`
+        this.fileLabel = getFileLabel(this.id)
         this.fileDisabled = true
         this.logFiles = []
       }
     }
   },
 
   watch: {
-    id: debounce(
-      // refresh the file list and update the query when the id changes
-      async function () {
-        await this.updateLogFileList()
-        this.updateQuery()
-      },
-      // only re-run this once every 0.5 seconds
-      500
-    ),
-    jobLog () {
+    jobLog (val, old) {
       // reset the filename when the log mode changes
       this.file = null
+      // go back to last chosen job if we are switching back to job logs
+      this.relativeID = val ? this.previousRelativeID : null
     },
-    file () {
-      // update the query when the file changes
-      this.updateQuery()
-    }
   },
 
   // Misc options

src/views/initialOptions.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/* The `initialOptions` prop is used by views to specify any options such as
+filters, inputs, toggles etc. that can be loaded when creating the view.
+This is used for saving the view state along with the tab layout. */
+
+import { ref, watch } from 'vue'
+
+/**
+ * @callback emitter
+ * @param {updateInitialOptionsEvent} event
+ * @param {...any} args
+ */
+
+/** initialOptions prop */
+export const initialOptions = {
+  type: Object,
+  required: false,
+  default: () => ({})
+}
+
+export const updateInitialOptionsEvent = 'update:initialOptions'
+
+/**
+ * Return a ref that is bound to a sub-property of the initialOptions prop for a view.
+ *
+ * When the ref's value changes, the initialOptions prop is updated with the new value.
+ *
+ * @param {string} name
+ * @param {{
+ *   props: { initialOptions: Record<string,T> },
+ *   emit: emitter,
+ * }} param1
+ * @returns {import('vue').Ref<T>}
+ */
+export const useInitialOptions = (name, { props, emit }) => {
+  const _ref = ref(props.initialOptions[name])
+  watch(
+    _ref,
+    (val, old) => emit(
+      updateInitialOptionsEvent,
+      { ...props.initialOptions, [name]: val }
+    ),
+    { immediate: true, deep: true }
+  )
+  return _ref
+}

tests/e2e/specs/log.cy.js

@@ -134,3 +134,52 @@ describe('Log View', () => {
       .should('be.visible')
   })
 })
+
+describe('Log command in menu', () => {
+  it('opens a log view tab', () => {
+    cy.visit('/#/workspace/one')
+      .get('.lm-DockPanel-widget')
+      .should('have.length', 1)
+      .get('.c-tree .c-job:first')
+      .click()
+      .get('.c-mutation').contains('Log')
+      .click()
+      .get('.lm-DockPanel-widget')
+      .should('have.length', 2)
+      .get('[data-cy=log-viewer]')
+      .contains(jobLogLines.join(''))
+  })
+})
+
+describe('Log view in workspace', () => {
+  it('remembers job ID and file when switching between workflows', () => {
+    const jobFile = 'job.out'
+    const jobID = '4/avocet'
+    cy.visit('/#/workspace/one')
+      .get('#workflow-mutate-button')
+      .click()
+      .get('.c-mutation').contains('Log')
+      .click()
+      .get('[data-cy=job-toggle]')
+      .click()
+      .get('.c-log [data-cy=job-id-input] input').as('jobIDInput')
+      .type(jobID)
+      .get('[data-cy=log-viewer]')
+      .should('be.visible')
+      .get('.c-log [data-cy=file-input] input').as('fileInput')
+      .invoke('val')
+      .should('eq', jobFile)
+    // Navigate away
+    cy.visit('/#/workspace/two')
+      .get('.c-log')
+      .should('not.exist')
+    // Navigate back
+    cy.visit('/#/workspace/one')
+      .get('@jobIDInput')
+      .invoke('val')
+      .should('eq', jobID)
+      .get('@fileInput')
+      .invoke('val')
+      .should('eq', jobFile)
+  })
+})