workflow events: stream workflow events

* Closes #535
* Stream log events from the scheduler (at warning level or above, this
  level is set in cylc-flow).
* List all warnings on the dashboard page.
* Present a dismissable warning icon in the workflows sidebar and
  workspace toolbar which illuminates when a warning is present.
* Collate events and warning states up the tree in the workflows sidebar
  to enable operators to easily monitor and dismiss warnings for any workflow
  within the group.
* Add a configuration to disable the warning icons in the workflows
  sidebar incase this bothers during workflow development.

Author: oliver-sanders

src/components/cylc/EventChip.vue

@@ -0,0 +1,51 @@
+<!--
+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 size="x-small" v-bind="props">{{ level }}</v-chip>
+</template>
+
+<script>
+export default {
+  name: 'LogLevelChip',
+
+  props: {
+    level: {
+      type: String,
+      required: true,
+    },
+  },
+
+  computed: {
+    props () {
+      if (this.level === 'CRITICAL') {
+        return { color: 'red', variant: 'flat' }
+      }
+      if (this.level === 'ERROR') {
+        return { color: 'red-darken-4', variant: 'flat' }
+      }
+      if (this.level === 'WARNING') {
+        return { color: 'amber-darken-4', variant: 'flat' }
+      }
+      if (this.level === 'INFO') {
+        return { color: 'grey', variant: 'flat' }
+      }
+      return { color: 'grey', variant: 'outlined' }
+    }
+  }
+}
+</script>

src/components/cylc/WarningIcon.vue

@@ -17,39 +17,67 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 <!--
     WarningIcon - A dismiss-able warning icon
+
+    states:
+    * no warnings: grey + translucent
+    * new warnings: yellow
+    * warnings dismissed: grey
 -->
 
 <template>
   <span
     class="c-warn"
-    style="display:inline-block; vertical-align:middle"
+    :class="{'active': workflow.node.warningActive}"
+    style="display: inline-block;"
   >
     <v-tooltip
       :activator="null"
       location="bottom"
-      :disabled="!message"
+      :disabled="!workflow.node.logRecords?.length"
     >
       <template
         v-slot:activator="{ props }"
       >
+        <!-- NOTE: the click.prevent suppresses router navigation -->
         <svg
           viewBox="0 0 100 100"
           v-bind="props"
           @click="deactivate"
+          @click.prevent
+          style="
+            vertical-align: middle;
+            cursor: pointer;
+          "
+          :style="[workflow.node.logRecords?.length ? {opacity: 1} : {opacity: 0.3}]"
         >
           <path
-            :d="path()"
-            :stroke-width="strokeWidth()"
-            v-bind:class="{'active': active}"
+            :d="$options.path"
+            :stroke-width="$options.strokeWidth"
+            v-bind:class="{'active': workflow.node.warningActive}"
           />
         </svg>
       </template>
-      <span>{{ message }}</span>
+      Recent warnings (click to dismiss):
+      <table>
+        <tr
+          v-for="(event, index) in (workflow.node.logRecords || []).slice().reverse()"
+          :key="index"
+        >
+          <td style="padding-right: 0.5em; vertical-align: top;">
+            <EventChip :level="event.level" />
+          </td><td>
+            <span>{{ event.message }}</span>
+          </td>
+        </tr>
+      </table>
     </v-tooltip>
   </span>
 </template>
 
 <script>
+import EventChip from '@/components/cylc/EventChip.vue'
+import { store } from '@/store/index'
+
 /* stuff we want to do once, when the component is loaded, rather than
  * every time it is used. */
 // stroke
@@ -85,34 +113,25 @@ function pathJoin (list) {
 }
 
 export default {
-  name: 'Warning',
-  data: function () {
-    return {
-      active: this.startActive
-    }
+  name: 'WarningIcon',
+
+  components: {
+    EventChip,
   },
+
   props: {
-    message: {
-      type: String,
-      required: false
-    },
-    startActive: {
-      type: Boolean,
-      required: false
+    workflow: {
+      required: true,
     }
   },
-  methods: {
-    path () {
-      return PATH
-    },
 
-    strokeWidth () {
-      return sw
+  methods: {
+    deactivate () {
+      store.commit('workflows/UPDATE', { id: this.workflow.id, warningActive: false })
     },
+  },
 
-    deactivate () {
-      this.active = false
-    }
-  }
+  strokeWidth: sw,
+  path: PATH,
 }
 </script>

src/components/cylc/tree/GScanTreeItem.vue

@@ -49,6 +49,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <div class="d-flex text-right c-gscan-workflow-states flex-grow-0">
           <!-- task summary tooltips -->
           <!-- a v-tooltip does not work directly set on Cylc job component, so we use a div to wrap it -->
+          <div
+            class="ma-0 pa-0"
+            min-width="0"
+            min-height="0"
+            style="font-size: 120%; width: auto;"
+          >
+            <WarningIcon v-if="workflowWarnings" :workflow="node" />
+          </div>
           <div
             v-for="[state, tasks] in Object.entries(descendantTaskInfo.latestTasks)"
             :key="`${node.id}-${state}`"
@@ -90,8 +98,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import Job from '@/components/cylc/Job.vue'
 import WorkflowIcon from '@/components/cylc/gscan/WorkflowIcon.vue'
 import TreeItem from '@/components/cylc/tree/TreeItem.vue'
+import WarningIcon from '@/components/cylc/WarningIcon.vue'
 import { JobStateNames } from '@/model/JobState.model'
 import { WorkflowState } from '@/model/WorkflowState.model'
+import { useWorkflowWarnings } from '@/composables/localStorage'
 
 /**
  * Get aggregated task state totals and latest task states for all descendents of a node.
@@ -108,7 +118,9 @@ function traverseChildren (node, stateTotals = {}, latestTasks = {}) {
       traverseChildren(child, stateTotals, latestTasks)
     }
   } else if (node.type === 'workflow' && node.node.stateTotals) {
-    // if we are at the end of a node (or at least, hit a workflow node), stop and merge the latest state tasks from this node with all the others from the tree
+    // if we are at the end of a node (or at least, hit a workflow node), stop and merge state
+
+    // the latest state tasks from this node with all the others from the tree
     for (const [state, totals] of Object.entries(node.node.stateTotals)) {
       if (JobStateNames.includes(state)) { // filter only valid states
         // (cast as numbers so they dont get concatenated as strings)
@@ -134,9 +146,14 @@ export default {
   components: {
     Job,
     TreeItem,
-    WorkflowIcon
+    WarningIcon,
+    WorkflowIcon,
   },
 
+  data: () => ({
+    workflowWarnings: useWorkflowWarnings()
+  }),
+
   props: {
     node: {
       type: Object,
@@ -190,5 +207,6 @@ export default {
 
   nodeTypes: ['workflow-part', 'workflow'],
   maxTasksDisplayed: 5,
+  WorkflowState,
 }
 </script>

src/components/cylc/workspace/Toolbar.vue

@@ -46,6 +46,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <!-- control bar elements displayed only when there is a current workflow in the store -->
     <template v-if="currentWorkflow">
       <div class="c-workflow-controls flex-shrink-0">
+        <WarningIcon
+          :workflow="currentWorkflow"
+          style="font-size: 120%; padding-right: 0.3em;"
+        />
+
         <v-btn
           id="workflow-mutate-button"
           v-command-menu="currentWorkflow"
@@ -242,6 +247,7 @@ import SubscriptionQuery from '@/model/SubscriptionQuery.model'
 import gql from 'graphql-tag'
 import { eventBus } from '@/services/eventBus'
 import { upperFirst } from 'lodash-es'
+import WarningIcon from '@/components/cylc/WarningIcon.vue'
 
 const QUERY = gql(`
 subscription Workflow ($workflowId: ID) {
@@ -297,6 +303,10 @@ export default {
     }
   },
 
+  components: {
+    WarningIcon,
+  },
+
   mixins: [
     graphql,
     subscriptionComponentMixin

src/composables/localStorage.js

@@ -30,3 +30,5 @@ export const useCyclePointsOrderDesc = () => useLocalStorage('cyclePointsOrderDe
 export const useJobTheme = () => useLocalStorage('jobTheme', 'default')
 
 export const useReducedAnimation = () => useLocalStorage('reducedAnimation', false)
+
+export const useWorkflowWarnings = () => useLocalStorage('useWorkflowWarnings', true)

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

@@ -84,6 +84,20 @@
             "submitted": [],
             "running": []
           },
+          "logRecords": [
+            {
+              "level": "CRITICAL",
+              "message": "Workflow underwent a sudden and gratuitous total existence failure"
+            },
+            {
+              "level": "ERROR",
+              "message": "SOS"
+            },
+            {
+              "level": "WARNING",
+              "message": "Reality may go on the blink at infinite improbability."
+            }
+          ],
           "__typename": "Workflow"
         },
         "cyclePoints": [