Sort tasks alphabetically within each state, and limit the number of …

…tasks displayed to 5

src/components/cylc/Drawer.vue

@@ -63,7 +63,7 @@ import { VList } from 'vuetify/lib/components/VList'
 import Header from '@/components/cylc/Header'
 import i18n from '@/i18n'
 import { mapState } from 'vuex'
-import GScan from '@/components/cylc/GScan'
+import GScan from '@/components/cylc/gscan/GScan'
 
 export default {
   components: {

src/components/cylc/GScan.vue → src/components/cylc/gscan/GScan.vue

@@ -36,9 +36,10 @@
                     <span>
                       <span class="grey--text">Recent {{ state }} tasks:</span>
                       <br/>
-                      <span v-for="(task, index) in tasks" :key="index">
+                      <span v-for="(task, index) in tasks.slice(0, maximumTasksDisplayed)" :key="index">
                         {{ task }}<br v-if="index !== tasks.length -1" />
                       </span>
+                      <span v-if="tasks.length > maximumTasksDisplayed" class="font-italic">And {{ tasks.length - maximumTasksDisplayed }} more</span>
                     </span>
                   </v-tooltip>
                 </span>
@@ -60,6 +61,7 @@
 <script>
 import Job from '@/components/cylc/Job'
 import { workflowService } from 'workflow-service'
+import { getWorkflowSummary } from '@/components/cylc/gscan/index'
 
 const QUERIES = {
   root: `
@@ -116,7 +118,8 @@ export default {
     return {
       viewID: '',
       subscriptions: {},
-      isLoading: true
+      isLoading: true,
+      maximumTasksDisplayed: 5
     }
   },
   computed: {
@@ -127,16 +130,7 @@ export default {
     workflowsSummaries () {
       const workflowSummaries = new Map()
       for (const workflow of this.workflows) {
-        const states = new Map()
-        for (const taskProxy of workflow.taskProxies) {
-          for (const job of taskProxy.jobs) {
-            if (!states.has(job.state)) {
-              states.set(job.state, new Set())
-            }
-            states.get(job.state).add(`${taskProxy.name}.${taskProxy.cyclePoint}`)
-          }
-        }
-        workflowSummaries.set(workflow.name, states)
+        workflowSummaries.set(workflow.name, getWorkflowSummary(workflow))
       }
       return workflowSummaries
     }

src/components/cylc/gscan/index.js

@@ -0,0 +1,27 @@
+/**
+ * Get a state summary for a given workflow. The returned map has a string with the state name as key. These keys
+ * are sorted alphabetically. The values are sets, with the task names (<tt>${name}.${cyclepoint}</tt>). These
+ * names are also sorted alphabetically.
+ * @param {Object} workflow
+ * @returns {Map<string, Array>}
+ * @see https://github.com/cylc/cylc-flow/blob/de7d938496e82dbdfb165938145670dd8e801efd/lib/cylc/state_summary_mgr.py#L204
+ */
+function getWorkflowSummary (workflow) {
+  const states = new Map()
+  for (const taskProxy of workflow.taskProxies) {
+    for (const job of taskProxy.jobs) {
+      if (!states.has(job.state)) {
+        states.set(job.state, new Set())
+      }
+      states.get(job.state).add(`${taskProxy.name}.${taskProxy.cyclePoint}`)
+    }
+  }
+  for (const [stateName, tasksSet] of states.entries()) {
+    states.set(stateName, [...tasksSet].sort())
+  }
+  return new Map([...states.entries()].sort())
+}
+
+export {
+  getWorkflowSummary
+}

tests/unit/components/cylc/gscan.vue.spec.js → tests/unit/components/cylc/gscan/gscan.vue.spec.js

@@ -3,7 +3,7 @@ import { expect } from 'chai'
 // import vuetify here so that we do not have warnings in the console output
 // eslint-disable-next-line no-unused-vars
 import * as vuetify from '@/plugins/vuetify'
-import GScan from '@/components/cylc/GScan'
+import GScan from '@/components/cylc/gscan/GScan'
 import { simpleWorkflowGscanNodes } from './gscan.data'
 
 describe('GScan component', () => {
@@ -28,11 +28,21 @@ describe('GScan component', () => {
     expect(summaries.size).to.equal(1)
     expect(summaries.has('five')).to.equal(true)
     expect(summaries.get('five').has('succeeded')).to.equal(true)
-    expect(summaries.get('five').get('succeeded').has('foo.20130829T0000Z')).to.equal(true)
-    expect(summaries.get('five').get('succeeded').has('bar.20130829T0000Z')).to.equal(true)
-    expect(summaries.get('five').get('succeeded').has('foo.20130829T1200Z')).to.equal(true)
+    expect(summaries.get('five').get('succeeded').includes('foo.20130829T0000Z')).to.equal(true)
+    expect(summaries.get('five').get('succeeded').includes('bar.20130829T0000Z')).to.equal(true)
+    expect(summaries.get('five').get('succeeded').includes('foo.20130829T1200Z')).to.equal(true)
     expect(summaries.get('five').has('running')).to.equal(true)
-    expect(summaries.get('five').get('running').has('bar.20130829T1200Z')).to.equal(true)
-    expect(summaries.get('five').get('running').has('foo.20130830T0000Z')).to.equal(true)
+    expect(summaries.get('five').get('running').includes('bar.20130829T1200Z')).to.equal(true)
+    expect(summaries.get('five').get('running').includes('foo.20130830T0000Z')).to.equal(true)
+  })
+  it('should return elements in alphabetical order', () => {
+    const localThis = {
+      workflows: simpleWorkflowGscanNodes
+    }
+    const summaries = GScan.computed.workflowsSummaries.call(localThis)
+    expect(summaries.get('five').get('succeeded').length).to.equal(3)
+    expect(summaries.get('five').get('succeeded')[0]).to.equal('bar.20130829T0000Z')
+    expect(summaries.get('five').get('succeeded')[1]).to.equal('foo.20130829T0000Z')
+    expect(summaries.get('five').get('succeeded')[2]).to.equal('foo.20130829T1200Z')
   })
 })