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

src/services/treeCallback.js

@@ -25,27 +25,41 @@ 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) {
-    // console.log('ADDED', added)
     store.commit('workflows/UPDATE_DELTAS', added)
   }
 
   onUpdated (updated, store, errors) {
-    // console.log('UPDATED', updated)
     store.commit('workflows/UPDATE_DELTAS', updated)
   }
 
   onPruned (pruned, store, errors) {
     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 (s, e) {}
 }
 
 export default CylcTreeCallback

src/services/workflow.service.js

@@ -329,6 +329,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/Dashboard.vue

@@ -176,6 +176,8 @@ fragment UpdatedDelta on Updated {
 }
 
 fragment WorkflowData on Workflow {
+  # NOTE: do not request the "reloaded" event here
+  # (it would cause a race condition with the workflow subscription)
   id
   status
 }

src/views/Graph.vue

@@ -135,6 +135,11 @@ subscription Workflow ($workflowId: ID) {
   }
 }
 
+fragment WorkflowData on Workflow {
+  id
+  reloaded
+}
+
 fragment EdgeData on Edge {
   id
   source
@@ -162,6 +167,9 @@ fragment JobData on Job {
 }
 
 fragment AddedDelta on Added {
+  workflow {
+    ...WorkflowData
+  }
   edges {
     ...EdgeData
   }
@@ -174,6 +182,9 @@ fragment AddedDelta on Added {
 }
 
 fragment UpdatedDelta on Updated {
+  workflow {
+    ...WorkflowData
+  }
   edges {
     ...EdgeData
   }

src/views/SimpleTree.vue

@@ -131,6 +131,9 @@ subscription SimpleTreeSubscription ($workflowId: ID) {
 }
 
 fragment AddedDelta on Added {
+  workflow {
+    ...WorkflowData
+  }
   taskProxies {
     ...TaskProxyData
   }
@@ -140,6 +143,9 @@ fragment AddedDelta on Added {
 }
 
 fragment UpdatedDelta on Updated {
+  workflow {
+    ...WorkflowData
+  }
   taskProxies {
     ...TaskProxyData
   }
@@ -156,6 +162,14 @@ fragment PrunedDelta on Pruned {
   jobs
 }
 
+# We must always request the reloaded field whenever we are requesting things
+# within the workflow like tasks, cycles, etc as this is used to rebuild the
+# store when a workflow is reloaded or restarted.
+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 {

src/views/Table.vue

@@ -89,6 +89,7 @@ fragment PrunedDelta on Pruned {
 
 fragment WorkflowData on Workflow {
   id
+  reloaded
 }
 
 fragment CyclePointData on FamilyProxy {

src/views/Tree.vue

@@ -103,6 +103,7 @@ fragment PrunedDelta on Pruned {
 
 fragment WorkflowData on Workflow {
   id
+  reloaded
 }
 
 fragment CyclePointData on FamilyProxy {

src/views/Workflows.vue

@@ -56,6 +56,8 @@ fragment UpdatedDelta on Updated {
 }
 
 fragment WorkflowData on Workflow {
+  # NOTE: do not request the "reloaded" event here
+  # (it would cause a race condition with the workflow subscription)
   id
   status
   statusMsg

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 CylcTreeCallback from '@/services/treeCallback'
 import sinon from 'sinon'
 import { print } from 'graphql/language'
 import gql from 'graphql-tag'
@@ -373,3 +376,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',
+    ])
+  })
+})