workflows: add is_retry and is_held indicators

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

@@ -21,10 +21,7 @@
     :class="state"
   >
     {{ value }}
-    <v-tooltip
-      location="top"
-      :open-delay="400"
-    >
+    <v-tooltip>
       {{ value }} {{ displayName }} task{{ value > 1 ? 's': '' }}.
       <template v-if="latestTasks?.length">
         Latest:

src/components/cylc/WarningIcon.vue

@@ -33,7 +33,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       :activator="null"
       location="bottom"
       :disabled="!workflow.node.logRecords?.length"
-      :open-delay="400"
     >
       <template
         v-slot:activator="{ props }"

src/components/cylc/gscan/GScan.vue

@@ -95,14 +95,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       v-else
       class="c-gscan-workflows flex-grow-1 pl-2"
     >
-      <Tree
-        :workflows="workflows"
-        :node-filter-func="filterNode"
-        tree-item-component="GScanTreeItem"
-        class="c-gscan-workflow pa-0"
-        ref="tree"
-        v-bind="{ filterState }"
-      />
+      <v-defaults-provider :defaults="{
+        VTooltip: {
+          location: 'top',
+          openDelay: 400,
+          eager: false,
+        }
+      }">
+        <Tree
+          :workflows="workflows"
+          :node-filter-func="filterNode"
+          tree-item-component="GScanTreeItem"
+          class="c-gscan-workflow pa-0"
+          ref="tree"
+          v-bind="{ filterState }"
+        />
+      </v-defaults-provider>
     </div>
     <!-- when no workflows are returned in the GraphQL query -->
     <div v-if="!workflows.length">

src/components/cylc/tree/GScanTreeItem.vue

@@ -40,15 +40,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="c-gscan-workflow-name flex-grow-1">
           <span>
             {{ node.name || node.id }}
-            <v-tooltip
-              location="top"
-              style="overflow-wrap: anywhere;"
-            >
+            <v-tooltip style="overflow-wrap: anywhere;">
               {{ node.id }}
             </v-tooltip>
           </span>
         </div>
-        <div class="d-flex c-gscan-workflow-states flex-grow-0">
+        <div class="d-flex c-gscan-workflow-states flex-grow-0 align-center">
+          <v-icon
+            v-for="modifier in statesInfo.modifiers"
+            :key="modifier"
+            :icon="modifierIcons[modifier]"
+            v-tooltip="`Has ${modifier} tasks.`"
+            size="1em"
+            class="modifier-badge"
+            :class="modifier"
+          />
           <TaskStateBadge
             v-for="(value, state) in statesInfo.stateTotals"
             :key="state"
@@ -86,6 +92,7 @@ import TreeItem from '@/components/cylc/tree/TreeItem.vue'
 import WarningIcon from '@/components/cylc/WarningIcon.vue'
 import TaskState from '@/model/TaskState.model'
 import { WorkflowState } from '@/model/WorkflowState.model'
+import { taskHeld, taskRetry } from '@/utils/icons'
 import { useCompactMode, useWorkflowWarnings } from '@/composables/localStorage'
 
 const nodeTypes = ['workflow-part', 'workflow']
@@ -98,27 +105,40 @@ const taskStatesOrdered = [
   TaskState.RUNNING.name,
 ]
 
+const modifierIcons = {
+  held: taskHeld,
+  retrying: taskRetry,
+}
+
 /**
  * Get aggregated task state totals for all descendents of a node.
  *
  * Also get latest state tasks for workflow nodes.
  *
  * @param {Object} node
  * @param {Record<string, number>} stateTotals - Accumulator for state totals.
+ * @param {Set<string>} modifiers - Accumulator for modifier states.
  */
-function getStatesInfo (node, stateTotals = {}) {
+function getStatesInfo (node, stateTotals = {}, modifiers = new Set()) {
   const latestTasks = {}
   // if we aren't at the end of the node tree, continue recurse until we hit something other then a workflow part
   if (node.type === 'workflow-part' && node.children) {
     // at every branch, recurse all child nodes except stopped workflows
     for (const child of node.children) {
       if (child.node.status !== WorkflowState.STOPPED.name) {
-        getStatesInfo(child, stateTotals, latestTasks)
+        getStatesInfo(child, stateTotals, modifiers)
       }
     }
   } else if (node.type === 'workflow' && node.node.stateTotals) {
     // if we hit a workflow node, stop and merge state
 
+    if (node.node.containsHeld) {
+      modifiers.add('held')
+    }
+    if (node.node.containsRetry) {
+      modifiers.add('retrying')
+    }
+
     // 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]
@@ -138,7 +158,7 @@ function getStatesInfo (node, stateTotals = {}) {
       }
     }
   }
-  return { stateTotals, latestTasks }
+  return { stateTotals, latestTasks, modifiers }
 }
 
 const workflowWarnings = useWorkflowWarnings()

src/components/cylc/workspace/Toolbar.vue

@@ -142,7 +142,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         :icon="$options.icons.info"
         id="info-icon"
       />
-      <v-tooltip v-if="isRunning" activator="#info-icon">
+      <v-tooltip
+        v-if="isRunning"
+        activator="#info-icon"
+        :eager="false"
+      >
         <dl>
           <dt><strong>Owner:</strong> {{ currentWorkflow.node.owner }}</dt>
           <dt><strong>Host:</strong> {{ currentWorkflow.node.host }}</dt>

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

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

src/styles/cylc/_job.scss

@@ -39,8 +39,11 @@ $cjob: ".c-job .job rect";
     min-width: $height;
     border-radius: $height;
     border: 0.2em solid;
-    margin: 0 0.1em;
     line-height: normal;
+    margin: 0 1px;
+}
+.modifier-badge {
+    margin: 0 2px;
 }
 
 $teal: rgb(109,213,194);

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

tests/e2e/specs/gscan.cy.js

@@ -192,6 +192,17 @@ describe('GScan component', () => {
     })
   })
 
+  describe('Task waiting badges', () => {
+    it('displays retry and held icons', () => {
+      cy.get('.c-gscan')
+        .find('[data-node-name="one"]').as('parent')
+        .find('.node:first .modifier-badge.held')
+        .should('be.visible')
+      cy.get('@parent').find('.node:first .modifier-badge.retrying')
+        .should('be.visible')
+    })
+  })
+
   describe('Warnings', () => {
     it('collates warnings up the tree', () => {
       // NOTE: Log events may be duplicated in offline-mode due to the way the