workflows: add is_retry and is_held indicators

* Closes cylc#2350
* Adds workflow indicator icons which appear if the workflow contains
  any tasks in the retry and held states.

Author: oliver-sanders

changes.d/2378.feat.md

@@ -0,0 +1 @@
+Added held and retry icons to the workflows sidebar, these will indicate if any n=0 tasks are in these states.

src/components/cylc/TaskStateBadge.vue

@@ -17,15 +17,16 @@
 
 <template>
   <div
-    class="task-state-badge d-flex justify-center align-center px-1 font-weight-medium"
+    class="task-state-badge d-flex justify-center align-center font-weight-medium"
     :class="state"
   >
-    {{ value }}
+    <v-icon v-if="isModifier" >{{ icon }}</v-icon>
+    {{ isModifier ? '' : value }}
     <v-tooltip
       location="top"
       :open-delay="400"
     >
-      {{ value }} {{ displayName }} task{{ value > 1 ? 's': '' }}.
+      {{ displayText }}
       <template v-if="latestTasks?.length">
         Latest:
         <span
@@ -42,6 +43,7 @@
 
 <script setup>
 import { computed } from 'vue'
+import { taskHeld, taskRetry } from '@/utils/icons'
 
 const props = defineProps({
   state: {
@@ -58,7 +60,28 @@ const props = defineProps({
   },
 })
 
+const icons = {
+  held: taskHeld,
+  retry: taskRetry,
+}
+
+const isModifier = computed(
+  () => ['held', 'retry'].includes(props.state)
+)
+
 const displayName = computed(
   () => props.state === 'submitted' ? 'preparing/submitted' : props.state
 )
+
+const displayText = computed(
+  () => isModifier.value
+    ? `One or more ${props.state} task(s).`
+    : `${props.value} ${displayName.value} task${props.value > 1 ? 's' : ''}`
+)
+
+const icon = computed(
+  () => isModifier.value
+    ? icons[props.state]
+    : null
+)
 </script>

src/components/cylc/tree/GScanTreeItem.vue

@@ -117,6 +117,13 @@ function getStatesInfo (node, stateTotals = {}) {
   } else if (node.type === 'workflow' && node.node.stateTotals) {
     // if we hit a workflow node, stop and merge state
 
+    if (node.node.containsHeld) {
+      stateTotals.held = true
+    }
+    if (node.node.containsRetry) {
+      stateTotals.retry = true
+    }
+
     // the non-zero state totals from this node with all the others from the tree
     for (const state of taskStatesOrdered) {
       let nodeTotal = node.node.stateTotals[state]

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

@@ -21,6 +21,8 @@
           "failed": 2,
           "succeeded": 2
         },
+        "containsHeld": true,
+        "containsRetry": true,
         "latestStateTasks": {
           "submitted": [],
           "running": [

src/styles/cylc/_job.scss

@@ -102,3 +102,12 @@ $themes: (
         }
     }
 }
+
+.task-state-badge.retry, .task-state-badge.held {
+  font-size: 0.8em;
+  min-width: 0;
+  background: none;
+  border: none;
+  padding: 0 0 0.2em 0;
+  margin: none;
+}

src/utils/icons.js

@@ -30,3 +30,5 @@
 import { siJupyter } from 'simple-icons'
 
 export const jupyterLogo = siJupyter.svg.replace(/.*d="(.*)".*/, '$1')
+export const taskRetry = 'm14.7 2.5c-0.179-0.0044-0.358-0.0037-0.538 0.0021-0.958 0.031-1.92 0.208-2.86 0.539-3.3 1.17-5.65 4.05-6.2 7.44l-5.13-1.23 6.86 9.23 6.86-9.23-5.35 1.19c0.511-2.02 2-3.69 4.02-4.41 2.5-0.886 5.28-0.124 6.98 1.91 1.7 2.04 1.95 4.91 0.625 7.21-1.32 2.3-3.93 3.53-6.54 3.09a1.58 1.58 0 0 0-1.82 1.3 1.58 1.58 0 0 0 1.3 1.82c3.91 0.661 7.84-1.19 9.81-4.63 1.98-3.44 1.6-7.76-0.938-10.8-1.79-2.14-4.39-3.35-7.07-3.41z'
+export const taskHeld = 'm12 0.5c-6.34 0-11.5 5.17-11.5 11.5-1.9e-7 6.33 5.16 11.5 11.5 11.5 6.34 0 11.5-5.17 11.5-11.5 0-6.33-5.16-11.5-11.5-11.5zm0 2.74c4.85 0 8.76 3.9 8.76 8.76 0 4.85-3.9 8.76-8.76 8.76-4.85 0-8.76-3.9-8.76-8.76 0-4.85 3.9-8.76 8.76-8.76zm-3.2 2.36a2.05 2.05 0 0 0-2.05 2.05v8.7a2.05 2.05 0 0 0 2.05 2.05 2.05 2.05 0 0 0 2.05-2.05v-8.7a2.05 2.05 0 0 0-2.05-2.05zm6.4 0a2.05 2.05 0 0 0-2.05 2.05v8.7a2.05 2.05 0 0 0 2.05 2.05 2.05 2.05 0 0 0 2.05-2.05v-8.7a2.05 2.05 0 0 0-2.05-2.05z'

src/views/Workflows.vue

@@ -61,6 +61,8 @@ fragment WorkflowData on Workflow {
   status
   statusMsg
   stateTotals
+  containsHeld
+  containsRetry
   logRecords {
     level
     message