Use workflow ID instead of workflow name in queries

src/lang/en-GB/App.json

@@ -1,7 +1,7 @@
 {
   "name": "Cylc UI",
   "dashboard": "Dashboard",
-  "graph": "Graph",
+  "graph": "Graph {name}",
   "workflow": "Workflow {name}",
   "workflows": "Workflows",
   "notFound": "Not Found",

src/views/Graph.vue

@@ -6,6 +6,7 @@
 import Graph from '@/components/cylc/graph/Graph'
 import { mixin } from '@/mixins'
 import { WORKFLOW_GRAPH_QUERY } from '@/graphql/queries'
+import { mapState } from 'vuex'
 
 const QUERIES = {
   root: WORKFLOW_GRAPH_QUERY
@@ -37,6 +38,10 @@ export default {
     isLoading: true
   }),
 
+  computed: {
+    ...mapState('user', ['user'])
+  },
+
   created () {
     this.viewID = `Graph(${this.workflowName}): ${Math.random()}`
     this.$workflowService.register(
@@ -54,9 +59,10 @@ export default {
 
   methods: {
     subscribe (queryName) {
+      const workflowId = `${this.user.username}|${this.workflowName}`
       const id = this.$workflowService.subscribe(
         this,
-        QUERIES[queryName].replace('WORKFLOW_ID', this.workflowName)
+        QUERIES[queryName].replace('WORKFLOW_ID', workflowId)
       )
       if (!(queryName in this.subscriptions)) {
         this.subscriptions[queryName] = {

src/views/Tree.vue

@@ -16,7 +16,7 @@
 
 <script>
 import { mixin } from '@/mixins/index'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import Tree from '@/components/cylc/tree/Tree'
 import { WORKFLOW_TREE_QUERY } from '@/graphql/queries'
 
@@ -52,7 +52,8 @@ export default {
   }),
 
   computed: {
-    ...mapGetters('workflows', ['workflowTree'])
+    ...mapGetters('workflows', ['workflowTree']),
+    ...mapState('user', ['user'])
   },
 
   created () {
@@ -71,36 +72,37 @@ export default {
   },
 
   methods: {
+    /**
+     * Subscribe this view to a new GraphQL query.
+     * @param {string} queryName - Must be in QUERIES.
+     */
     subscribe (queryName) {
-      /**
-         * Subscribe this view to a new GraphQL query.
-         * @param {string} queryName - Must be in QUERIES.
-         */
       if (!(queryName in this.subscriptions)) {
+        const workflowId = `${this.user.username}|${this.workflowName}`
         this.subscriptions[queryName] =
           this.$workflowService.subscribe(
             this,
-            QUERIES[queryName].replace('WORKFLOW_ID', this.workflowName)
+            QUERIES[queryName].replace('WORKFLOW_ID', workflowId)
           )
       }
     },
 
+    /**
+     * Unsubscribe this view to a new GraphQL query.
+     * @param {string} queryName - Must be in QUERIES.
+     */
     unsubscribe (queryName) {
-      /**
-         * Unsubscribe this view to a new GraphQL query.
-         * @param {string} queryName - Must be in QUERIES.
-         */
       if (queryName in this.subscriptions) {
         this.$workflowService.unsubscribe(
           this.subscriptions[queryName]
         )
       }
     },
 
+    /** Toggle the isLoading state.
+     * @param {bool} isActive - Are this views subs active.
+     */
     setActive (isActive) {
-      /** Toggle the isLoading state.
-         * @param {bool} isActive - Are this views subs active.
-         */
       this.isLoading = !isActive
     }
   }

src/views/Workflow.vue

@@ -43,6 +43,7 @@ export default {
   }),
   computed: {
     ...mapState('workflows', ['workflows']),
+    ...mapState('user', ['user']),
     ...mapGetters('workflows', ['workflowTree'])
   },
   created () {
@@ -104,9 +105,10 @@ export default {
           activeCallback: this.setActive
         }
       )
+      const workflowId = `${this.user.username}|${this.workflowName}`
       const subscriptionId = this.$workflowService.subscribe(
         view,
-        QUERIES[queryName].replace('WORKFLOW_ID', this.workflowName)
+        QUERIES[queryName].replace('WORKFLOW_ID', workflowId)
       )
       view.subscriptionId = subscriptionId
       if (!(queryName in this.subscriptions)) {