Show flow nums

Show flow nums in tree/table views if not 1 or None.
Dim flow=None in tree/table/graph views.
Show all flow nums in command menu.
Also update mock data.

Author: MetRonnie

src/components/cylc/commandMenu/Menu.vue

@@ -126,6 +126,8 @@ import { mapGetters, mapState } from 'vuex'
 import WorkflowState from '@/model/WorkflowState.model'
 import { eventBus } from '@/services/eventBus'
 import CopyBtn from '@/components/core/CopyBtn.vue'
+import { upperFirst } from 'lodash-es'
+import { formatFlowNums } from '@/utils/tasks'
 
 export default {
   name: 'CommandMenu',
@@ -199,14 +201,14 @@ export default {
         // can happen briefly when switching workflows
         return
       }
-      let ret = this.node.type
+      let ret = upperFirst(this.node.type)
       if (this.node.type !== 'cycle') {
         // NOTE: cycle point nodes don't have associated node data at present
-        ret += ' - '
+        ret += ' • '
         if (this.node.type === 'workflow') {
-          ret += this.node.node.statusMsg || this.node.node.status || 'state unknown'
+          ret += upperFirst(this.node.node.statusMsg || this.node.node.status || 'state unknown')
         } else {
-          ret += this.node.node.state || 'state unknown'
+          ret += upperFirst(this.node.node.state || 'state unknown')
           if (this.node.node.isHeld) {
             ret += ' (held)'
           }
@@ -216,6 +218,9 @@ export default {
           if (this.node.node.isRunahead) {
             ret += ' (runahead)'
           }
+          if (this.node.node.flowNums) {
+            ret += ` • Flows: ${formatFlowNums(this.node.node.flowNums)}`
+          }
         }
       }
       return ret

src/components/cylc/common/FlowNumsChip.vue

@@ -0,0 +1,56 @@
+<!--
+Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <v-chip
+    v-if="showFlowNums"
+    label
+    density="compact"
+    size="small"
+    class="ml-1 cursor-default"
+    :prepend-icon="mdiLabelOutline"
+    data-cy="flow-num-chip"
+  >
+    {{ flowNumsStr }}
+    <v-tooltip location="right">
+      Flows: {{ flowNumsStr }}
+    </v-tooltip>
+  </v-chip>
+</template>
+
+<script setup>
+import { formatFlowNums } from '@/utils/tasks'
+import { mdiLabelOutline } from '@mdi/js'
+import { computed } from 'vue'
+
+const props = defineProps({
+  flowNums: {
+    type: String,
+    required: false,
+  },
+})
+
+const flowNumsStr = computed(
+  () => props.flowNums && formatFlowNums(props.flowNums)
+)
+
+/** Hide flow=1 and flow=None by default */
+const showFlowNums = computed(
+  () => flowNumsStr.value && !['1', 'None'].includes(flowNumsStr.value)
+)
+
+</script>

src/components/cylc/table/Table.vue

@@ -28,7 +28,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     v-model:items-per-page="itemsPerPage"
   >
     <template v-slot:item.task.name="{ item }">
-      <div class="d-flex align-content-center flex-nowrap">
+      <div
+        class="d-flex align-center flex-nowrap"
+        :class="{ 'flow-none': isFlowNone(item.task.node.flowNums) }"
+        :data-cy-task-name="item.task.name"
+      >
         <div style="width: 2em;">
           <Task
             v-command-menu="item.task"
@@ -44,7 +48,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :previous-state="item.previousJob?.node?.state"
           />
         </div>
-        <div>{{ item.task.name }}</div>
+        {{ item.task.name }}
+        <FlowNumsChip
+          :flowNums="item.task.node.flowNums"
+          class="ml-2"
+        />
       </div>
     </template>
     <template v-slot:item.task.node.task.meanElapsedTime="{ item }">
@@ -110,13 +118,17 @@ import {
   datetimeComparator,
   numberComparator,
 } from '@/components/cylc/table/sort'
-import { dtMean } from '@/utils/tasks'
+import {
+  dtMean,
+  isFlowNone,
+} from '@/utils/tasks'
 import { useCyclePointsOrderDesc } from '@/composables/localStorage'
 import {
   initialOptions,
   updateInitialOptionsEvent,
   useInitialOptions
 } from '@/utils/initialOptions'
+import FlowNumsChip from '@/components/cylc/common/FlowNumsChip.vue'
 
 export default {
   name: 'TableComponent',
@@ -132,6 +144,7 @@ export default {
   },
 
   components: {
+    FlowNumsChip,
     Task,
     Job,
   },
@@ -243,6 +256,7 @@ export default {
       icons: {
         mdiChevronDown
       },
+      isFlowNone,
       itemsPerPageOptions: [
         { value: 10, title: '10' },
         { value: 20, title: '20' },

src/components/cylc/tree/TreeItem.vue

@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     v-show="!filteredOutNodesCache.get(node)"
     class="c-treeitem"
     :data-node-type="node.type"
+    :data-node-name="node.name"
   >
     <div
       class="node d-flex align-center"
@@ -64,7 +65,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             />
             <span class="mx-1">{{ node.name }}</span>
           </template>
-          <template v-else-if="node.type === 'task'">
+          <div
+            v-else-if="node.type === 'task'"
+            class="d-flex align-center"
+            :class="{ 'flow-none': isFlowNone(node.node.flowNums) }"
+          >
             <!-- Task summary -->
             <Task
               v-command-menu="node"
@@ -86,7 +91,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               />
             </div>
             <span class="mx-1">{{ node.name }}</span>
-          </template>
+            <FlowNumsChip :flowNums="node.node.flowNums"/>
+          </div>
           <template v-else-if="node.type === 'job'">
             <Job
               v-command-menu="node"
@@ -176,22 +182,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 </template>
 
 <script>
-import { mdiChevronRight } from '@mdi/js'
+import {
+  mdiChevronRight,
+} from '@mdi/js'
 import Task from '@/components/cylc/Task.vue'
 import Job from '@/components/cylc/Job.vue'
 import JobDetails from '@/components/cylc/tree/JobDetails.vue'
 import {
+  jobMessageOutputs,
   latestJob,
-  jobMessageOutputs
+  isFlowNone,
 } from '@/utils/tasks'
 import { getIndent, getNodeChildren } from '@/components/cylc/tree/util'
 import { once } from '@/utils'
 import { useToggle } from '@vueuse/core'
+import FlowNumsChip from '@/components/cylc/common/FlowNumsChip.vue'
 
 export default {
   name: 'TreeItem',
 
   components: {
+    FlowNumsChip,
     Task,
     Job,
     JobDetails,
@@ -252,6 +263,7 @@ export default {
 
     return {
       isExpanded,
+      isFlowNone,
       latestJob,
       renderChildren,
       toggleExpandCollapse,

src/services/mock/checkpoint/get_checkpoint.py

@@ -82,6 +82,7 @@
     meanElapsedTime
     name
   }
+  flowNums
 }
 
 fragment JobData on Job {

src/services/mock/json/workflows/multi.json

@@ -145,6 +145,7 @@
             "isQueued": true,
             "isRunahead": false,
             "name": "foo",
+            "flowNums": "[1]",
             "task": {
               "meanElapsedTime": 0,
               "__typename": "Task"
@@ -162,6 +163,7 @@
             "isQueued": false,
             "isRunahead": false,
             "name": "foo",
+            "flowNums": "[1]",
             "task": {
               "meanElapsedTime": 0,
               "__typename": "Task"

src/services/mock/json/workflows/one.json

@@ -115,6 +115,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
             "name": "root",
@@ -133,6 +134,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/SUCCEEDED",
             "name": "SUCCEEDED",
@@ -152,6 +154,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1,2]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/BAD",
             "name": "BAD",
@@ -170,6 +173,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/BAD",
             "name": "BAD",
@@ -183,11 +187,12 @@
         {
           "id": "~user/one//20000102T0000Z/sleepy",
           "name": "sleepy",
-          "state": "",
+          "state": "submitted",
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
             "name": "root",
@@ -206,6 +211,7 @@
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/SUCCEEDED",
             "name": "SUCCEEDED",
@@ -220,11 +226,12 @@
         {
           "id": "~user/one//20000102T0000Z/waiting",
           "name": "waiting",
-          "state": "",
+          "state": "waiting",
           "isHeld": false,
           "isQueued": false,
           "isRunahead": false,
           "cyclePoint": "20000102T0000Z",
+          "flowNums": "[1]",
           "firstParent": {
             "id": "~user/one//20000102T0000Z/root",
             "name": "root",
@@ -402,6 +409,20 @@
           "finishedTime": "2020-11-08T22:57:19Z",
           "state": "succeeded",
           "submitNum": 1
+        },
+        {
+          "id": "~user/one//20000102T0000Z/sleepy/1",
+          "firstParent": {
+            "id": "~user/one//20000102T0000Z/sleepy"
+          },
+          "jobRunnerName": "background",
+          "jobId": "61983",
+          "platform": "localhost",
+          "startedTime": "",
+          "submittedTime": "2020-11-08T23:02:09Z",
+          "finishedTime": "",
+          "state": "submitted",
+          "submitNum": 1
         }
       ],
       "edges": [

src/styles/cylc/_tree.scss

@@ -97,6 +97,7 @@ $icon-width: 1.5rem;
     .node-data {
       display: flex;
       flex-wrap: nowrap;
+      align-items: center;
       .node-summary {
         display: flex;
         flex-wrap: nowrap;

src/styles/index.scss

@@ -96,3 +96,9 @@ html {
 .apexcharts-text {
   font-size: 0.9rem;
 }
+
+.c-tree, .c-table, .c-graph {
+  .flow-none {
+    opacity: 0.6;
+  }
+}