Use WorkflowService to fetch Dashboard data

src/views/Dashboard.vue

@@ -7,15 +7,17 @@
     <v-layout row wrap>
       <v-flex xs6 md6 lg3>
         <p class="display-1">Workflows</p>
-        <!-- TODO: link with data from the query -->
         <v-data-table
-            :items="workflows"
+            :items="stats"
             hide-actions
             hide-headers>
           <template v-slot:items="props">
             <td class="headline">{{ props.item.count }}</td>
             <td class="title">{{ props.item.text }}</td>
           </template>
+          <template v-slot:no-data>
+            <td class="title">No data</td>
+          </template>
         </v-data-table>
       </v-flex>
       <v-flex xs6 md6 lg9>
@@ -135,6 +137,18 @@
 
 <script>
 import { mapState } from 'vuex'
+import { workflowService } from 'workflow-service'
+
+// query to retrieve workflows with their statuses
+const QUERIES = {
+  root: `
+      {
+        workflows {
+          status
+        }
+      }
+    `
+}
 
 export default {
   metaInfo () {
@@ -143,15 +157,83 @@ export default {
     }
   },
   data: () => ({
-    workflows: [
+    events: [],
+    subscriptions: {},
+    stats: [
       { text: 'Running', count: 0 },
       { text: 'Held', count: 0 },
       { text: 'Stopped', count: 0 }
-    ],
-    events: []
+    ]
   }),
   computed: {
-    ...mapState('app', ['color'])
+    ...mapState('app', ['color']),
+    ...mapState('workflows', ['workflows'])
+  },
+  watch: {
+    workflows: function (workflows) {
+      let running = 0
+      let held = 0
+      let stopped = 0
+      workflows.forEach(function (workflow) {
+        const workflowStatus = workflow.status.toLowerCase()
+        if (workflowStatus.startsWith('running')) {
+          running++
+        } else if (workflowStatus.startsWith('held')) {
+          held++
+        } else if (workflowStatus.startsWith('stopped')) {
+          stopped++
+        }
+      })
+      // update the reactive data once, instead of doing it within the workflows loop
+      this.stats[0].count = running
+      this.stats[1].count = held
+      this.stats[2].count = stopped
+    }
+  },
+  created () {
+    this.viewID = `Dashboard`
+    workflowService.register(
+      this,
+      {
+        activeCallback: this.setActive
+      }
+    )
+    this.subscribe('root')
+  },
+  beforeDestroy () {
+    workflowService.unregister(this)
+  },
+  methods: {
+    subscribe (queryName) {
+      /**
+       * Subscribe this view to a new GraphQL query.
+       * @param {string} queryName - Must be in QUERIES.
+       */
+      if (!(queryName in this.subscriptions)) {
+        this.subscriptions[queryName] =
+          workflowService.subscribe(
+            this,
+            QUERIES[queryName]
+          )
+      }
+    },
+    unsubscribe (queryName) {
+      /**
+       * Unsubscribe this view to a new GraphQL query.
+       * @param {string} queryName - Must be in QUERIES.
+       */
+      if (queryName in this.subscriptions) {
+        workflowService.unsubscribe(
+          this.subscriptions[queryName]
+        )
+      }
+    },
+    setActive (isActive) {
+      /** Toggle the isLoading state.
+       * @param {bool} isActive - Are this views subs active.
+       */
+      this.isLoading = !isActive
+    }
   }
 }
 </script>