data store: wipe workflow data on reload.

* When a workflow is reloaded or restarted (node restart infers reload),
  there may be objects left behind in the store which have been wiped
  out in the scheduler by the configuration change.
* To handle this, we must wipe all objects stored on the workflow
  (e.g. TaskProxies, TaskDefs, Jobs, etc), and rebuild from scratch.
* Note, we don't need to wipe the data on the Workflow object itself
  (e.g. port, stateTotals, etc), these things will be refreshed by
  this or subsequent deltas.

Author: oliver-sanders

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.2.0 (<span actions:bind='release-date'>Awaiting Release</span>)__
+
+### Fixes
+
+[#1479](https://github.com/cylc/cylc-ui/pull/1479) -
+Fix an issue which could result in tasks not being removed from the GUI when
+workflows were reloaded or restarted.
+
 -------------------------------------------------------------------------------
 ## __cylc-ui-2.1.0 (<span actions:bind='release-date'>Released 2023-09-07</span>)__
 

src/graphql/queries.js

@@ -27,6 +27,7 @@ import gql from 'graphql-tag'
 const WORKFLOW_DATA_FRAGMENT = `
 fragment WorkflowData on Workflow {
   id
+  reloaded
   status
   statusMsg
   owner

src/services/treeCallback.js

@@ -25,8 +25,24 @@ class CylcTreeCallback extends DeltasCallback {
     }
   }
 
-  tearDown (store, errors) {
-    // never tear down, this callback lives for the live of the UI
+  before (deltas, store, errors) {
+    // Wipe all child nodes from a workflow in the data store if a reloaded
+    // delta is received. Reloaded deltas are sent whenever a workflow is
+    // restarted or reloaded (note, restarting a workflow implicitly reloads
+    // it).
+    //
+    // When a workflow reloads it is hard to generate the relevant pruned
+    // and updated deltas to remove any objects which have been wiped out by
+    // the configuration change, so the easiest solution is to wipe the
+    // entire tree under the workflow and rebuild from scratch. If we don't
+    // do this, we can end up with nodes in the store which aren't meant to be
+    // there and won't get pruned.
+    if (deltas.updated?.workflow?.reloaded) {
+      store.commit('workflows/REMOVE_CHILDREN', (deltas.updated.workflow.id))
+    }
+    if (deltas.added?.workflow?.reloaded) {
+      store.commit('workflows/REMOVE_CHILDREN', (deltas.added.workflow.id))
+    }
   }
 
   onAdded (added, store, errors) {
@@ -43,9 +59,9 @@ class CylcTreeCallback extends DeltasCallback {
     store.commit('workflows/REMOVE_DELTAS', pruned)
   }
 
-  // this callback does not need the before and commit methods
-  before (a, b, c) {}
+  // this callback does not need the tearDown and commit methods
   commit (a, b, c) {}
+  tearDown (store, errors) {}
 }
 
 export default CylcTreeCallback

src/services/workflow.service.js

@@ -321,6 +321,7 @@ class WorkflowService {
               const errors = []
 
               // run the global callback first
+              globalCallback.before(deltas, store, errors)
               globalCallback.onAdded(added, store, errors)
               globalCallback.onUpdated(updated, store, errors)
               globalCallback.onPruned(pruned, store, errors)

src/views/Graph.vue

@@ -127,6 +127,11 @@ subscription Workflow ($workflowId: ID) {
   }
 }
 
+fragment workflowdata on workflow {
+  id
+  reloaded
+}
+
 fragment EdgeData on Edge {
   id
   source
@@ -154,6 +159,9 @@ fragment JobData on Job {
 }
 
 fragment AddedDelta on Added {
+  workflows {
+    ...workflowdata
+  }
   edges {
     ...EdgeData
   }
@@ -166,6 +174,9 @@ fragment AddedDelta on Added {
 }
 
 fragment UpdatedDelta on Updated {
+  workflows {
+    ...workflowdata
+  }
   edges {
     ...EdgeData
   }

src/views/SimpleTree.vue

@@ -135,6 +135,9 @@ fragment Deltas on Deltas {
 }
 
 fragment AddedDelta on Added {
+  workflows {
+    ...WorkflowData
+  }
   taskProxies {
     ...TaskProxyData
   }
@@ -144,6 +147,9 @@ fragment AddedDelta on Added {
 }
 
 fragment UpdatedDelta on Updated {
+  workflows {
+    ...WorkflowData
+  }
   taskProxies {
     ...TaskProxyData
   }
@@ -160,6 +166,13 @@ fragment PrunedDelta on Pruned {
   jobs
 }
 
+# We must always request "id" and "reloaded" for the workflow.
+# These are required by the data store.
+fragment workflowData on Workflow {
+  id
+  reloaded
+}
+
 # We must always request the "id" for ALL types.
 # The only field this view requires beyond that is the status.
 fragment TaskProxyData on TaskProxy {

tests/unit/services/workflow.service.spec.js

@@ -15,6 +15,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { createStore } from 'vuex'
+import storeOptions from '@/store/options'
+
 import sinon from 'sinon'
 import { print } from 'graphql/language'
 import gql from 'graphql-tag'
@@ -26,6 +29,7 @@ import WorkflowService from '@/services/workflow.service'
 import * as graphqlModule from '@/graphql/index'
 import ViewState from '@/model/ViewState.model'
 import { TreeCallback, WorkflowCallback } from './testCallback'
+import CylcTreeCallback from '@/services/treeCallback'
 
 const sandbox = sinon.createSandbox()
 
@@ -373,3 +377,57 @@ describe('WorkflowService', () => {
     })
   })
 })
+
+describe('Global Callback', () => {
+  it('should wipe workflow children on reloaded deltas', () => {
+    // the callback should wipe workflow children when a "reloaded" delta is
+    // received - see https://github.com/cylc/cylc-ui/pull/1479
+
+    // initiate the store
+    const errors = {}
+    const store = createStore(storeOptions)
+    const callback = new CylcTreeCallback(store, errors)
+    const cylcTree = store.state.workflows.cylcTree
+
+    // send an added delta which adds a workflow with one task
+    const delta1 = {
+      id: 123,
+      added: {
+        id: 123,
+        workflow: { id: '~user/foo' },
+        taskProxies: { id: '~user/foo//1/a' }
+      }
+    }
+    callback.before(delta1, store, errors)
+    callback.onAdded(delta1.added, store, errors)
+
+    // the user/workflow//cycle/task should now be in the store
+    expect(Object.keys(cylcTree.$index)).to.deep.equal([
+      '~user',
+      '~user/foo',
+      '~user/foo//1',
+      '~user/foo//1/a',
+    ])
+
+    // send a reloaded delta which adds a new task
+    const delta2 = {
+      id: 234,
+      added: {
+        id: 234,
+        workflow: { id: '~user/foo', reloaded: true },
+        taskProxies: { id: '~user/foo//2/b' }
+      }
+    }
+    callback.before(delta2, store, errors)
+    callback.onUpdated(delta2.added, store, errors)
+
+    // the cycle "1" and task "1/a" should be gone from the store
+    // without the need for an explicit "pruned" delta
+    expect(Object.keys(cylcTree.$index)).to.deep.equal([
+      '~user',
+      '~user/foo',
+      '~user/foo//2',
+      '~user/foo//2/b',
+    ])
+  })
+})