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

@@ -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/Dashboard.vue

@@ -180,6 +180,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

@@ -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 {
+  workflow {
+    ...WorkflowData
+  }
   edges {
     ...EdgeData
   }
@@ -166,6 +174,9 @@ fragment AddedDelta on Added {
 }
 
 fragment UpdatedDelta on Updated {
+  workflow {
+    ...WorkflowData
+  }
   edges {
     ...EdgeData
   }

src/views/README.md

@@ -25,3 +25,61 @@ E.G. the Tree *view* displays Cylc cycles/tasks/jobs in a collapsible hierarchy.
 It uses the Tree *component* which provides the generic tree logic e.g.
 indentation, expand/collapse, etc. This Tree *component* is also used by
 the Workflows *view*.
+
+
+## Subscriptions
+
+Views typically register a subscription with the workflow service.
+
+The workflow service when then issue this subscription and enter the data it
+returns into the global data store. The view can then access this data from the
+store.
+
+The subscription must list all of the types (Workflow, TaskProxies, etc) and
+fields (name, status, etc) that the view requires.
+
+In addition to this there are a number of rules that a subscription must match:
+
+* The `id` field must be requested for every type requested.
+
+  This is used by the data store to process deltas.
+* You must request the corresponding `pruned` delta for each type you request.
+  
+  This is used by the data store to remove objects when they drift out of the
+  window.
+* You must request fields using "fragments" which must follow the standard
+  naming pattern (e.g. `WorkflowData`, `CyclePointData`, etc).
+
+  This allows the subscription merging system to avoid requesting duplicate
+  data.
+
+  When the subscription is updated, it gets printed to the console, you can
+  use this to check merging has worked as intended.
+* If you want to walk the family tree (i.e. the hierarchy of families), then
+  you must request the following fields of `FamilyProxies`:
+
+  * `__typename`
+  * `ancestors { name }`
+  * `childTasks { id }`
+* You must always request `workflow { reloaded }` if you request any of the
+  following types:
+
+  * `Jobs`
+  * `Tasks`
+  * `Families`
+  * `TaskProxies`
+  * `FamilyProxies`
+  * `Nodes`
+  * `Edges`
+
+  The `reloaded` field is a special signal to the data store that tells it to
+  wipe all objects of the above type within the workflow and rebuild from
+  scratch. This happens when a workflow is reloaded or restarted to handle
+  configuration chages (it's easier than trying to get the scheduler to
+  send the appropriate updated and pruned deltas).
+
+
+## Example
+
+For a minimal example view, see the SimpleTree. Note, this is only included
+in development builds.

src/views/SimpleTree.vue

@@ -135,6 +135,9 @@ fragment Deltas on Deltas {
 }
 
 fragment AddedDelta on Added {
+  workflow {
+    ...WorkflowData
+  }
   taskProxies {
     ...TaskProxyData
   }
@@ -144,6 +147,9 @@ fragment AddedDelta on Added {
 }
 
 fragment UpdatedDelta on Updated {
+  workflow {
+    ...WorkflowData
+  }
   taskProxies {
     ...TaskProxyData
   }
@@ -160,6 +166,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

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

src/views/Tree.vue

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

src/views/Workflows.vue

@@ -60,6 +60,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',
+    ])
+  })
+})