Merge pull request #124 from MetRonnie/gscan-modifiers

Gscan modifiers

Author: oliver-sanders

src/components/cylc/TaskStateBadge.vue

@@ -17,16 +17,12 @@
 
 <template>
   <div
-    class="task-state-badge d-flex justify-center align-center font-weight-medium"
+    class="task-state-badge d-flex justify-center align-center px-1 font-weight-medium"
     :class="state"
   >
-    <v-icon v-if="isModifier" >{{ icon }}</v-icon>
-    {{ isModifier ? '' : value }}
-    <v-tooltip
-      location="top"
-      :open-delay="400"
-    >
-      {{ displayText }}
+    {{ value }}
+    <v-tooltip>
+      {{ value }} {{ displayName }} task{{ value > 1 ? 's': '' }}.
       <template v-if="latestTasks?.length">
         Latest:
         <span
@@ -43,7 +39,6 @@
 
 <script setup>
 import { computed } from 'vue'
-import { taskHeld, taskRetry } from '@/utils/icons'
 
 const props = defineProps({
   state: {
@@ -60,28 +55,7 @@ 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/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"
-        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"
+          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

@@ -38,15 +38,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"
@@ -85,6 +91,7 @@ import WarningIcon from '@/components/cylc/WarningIcon.vue'
 import TaskState from '@/model/TaskState.model'
 import { WorkflowState } from '@/model/WorkflowState.model'
 import { useWorkflowWarnings } from '@/composables/localStorage'
+import { taskHeld, taskRetry } from '@/utils/icons'
 
 const nodeTypes = ['workflow-part', 'workflow']
 
@@ -96,32 +103,38 @@ 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) {
-      stateTotals.held = true
+      modifiers.add('held')
     }
     if (node.node.containsRetry) {
-      stateTotals.retry = true
+      modifiers.add('retrying')
     }
 
     // the non-zero state totals from this node with all the others from the tree
@@ -143,7 +156,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/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);
@@ -102,12 +105,3 @@ $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;
-}

tests/e2e/specs/gscan.cy.js

@@ -196,11 +196,11 @@ describe('GScan component', () => {
     it('displays retry and held icons', () => {
       cy.get('.c-gscan')
         .find('[data-node-name="one"]').as('parent')
-        .find('.node:first .task-state-badge:first')
-        .should('have.class', 'held')
+        .find('.node:first .modifier-badge.held')
+        .should('be.visible')
       // child run2 contributes the running tasks
-      cy.get('@parent').find('.node:first .task-state-badge:nth-child(2)')
-        .should('have.class', 'retry')
+      cy.get('@parent').find('.node:first .modifier-badge.retrying')
+        .should('be.visible')
     })
   })