Add Workflow Log View (#1158)

## Add Workflow Log View
* job log search box added to log view
* Adds an interface for opening views via the eventBus.
* Adds an `initialData` prop for views to recieve arguments.
* view: recompute subscription on query change
* If a view's query changes (e.g. if its variables change) whilst it is
  running. The view will now be un-subscribed, then re-subscribed with
  the new query.
Co-authored-by: Oliver Sanders <[email protected]>

Author: datamel

CHANGES.md

@@ -15,6 +15,10 @@ ones in. -->
 
 ### Enhancements
 
+[#1158](https://github.com/cylc/cylc-ui/pull/1158) -
+Log view: A new view which displays workflow and job logs (similar
+to log view available in Cylc 7 cylc review).
+
 [#1144](https://github.com/cylc/cylc-ui/pull/1144) - Add "Edit Runtime"
 command, a more convenient way to perform broadcasts by viewing and editing a
 task/family's runtime configuration.

src/components/cylc/cylcObject/Menu.vue

@@ -80,7 +80,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <v-list-item-action>
               <v-btn
                 icon
-                :disabled="!authorised"
+                :disabled="isEditable(authorised, mutation)"
                 x-large
                 class="float-right"
                 @click.stop="openDialog(mutation)"
@@ -231,7 +231,31 @@ export default {
   },
 
   methods: {
+    isEditable (authorised, mutation) {
+      if (!authorised || mutation.name === 'log') {
+        return true
+      } else {
+        return false
+      }
+    },
     openDialog (mutation) {
+      if (mutation.name === 'log') {
+        this.showMenu = false
+        this.$eventBus.emit(
+          'add-view',
+          {
+
+            viewName: 'Log',
+            initialOptions: {
+              workflow: this.node.tokens.workflow,
+              task: this.node.tokens.relative_id,
+              file: 'job.out'
+            }
+          }
+        )
+        return
+      }
+
       this.dialog = true
       this.dialogMutation = mutation
       // Tell Vue to re-render the dialog component:

src/components/cylc/log/Log.vue

@@ -0,0 +1,50 @@
+<!--
+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>
+  <div>
+    <pre><span v-for="(log, index) in logs" :key="index">{{log}}</span></pre>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'LogComponent',
+  props: {
+    placeholder: {
+      type: String,
+      default: 'Waiting for logs',
+      required: false
+    },
+    logs: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    computedLogs () {
+      if (this.logs.length > 0) {
+        return this.logs
+      } else {
+        return [this.placeholder]
+      }
+    }
+  }
+}
+
+</script>

src/components/cylc/log/index.js

@@ -110,7 +110,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             :id="`toolbar-add-${ view.name }-view`"
             v-for="view in views"
             :key="view.name"
-            @click="$listeners['add'](view.name)"
+            @click="$listeners['add']({ viewName: view.name })"
             class="py-0 px-8 ma-0 c-add-view"
           >
             <v-list-item-icon>

src/components/cylc/workflow/Toolbar.vue

@@ -196,6 +196,19 @@ fragment UpdatedDelta on Updated {
 ${WORKFLOW_DATA_FRAGMENT}
 `
 
+/**
+ * Query used to retrieve data for the Log view.
+ *
+ * @type {DocumentNode}
+*/
+const LOGS_SUBSCRIPTION = gql`
+subscription LogData ($workflowName: ID, $task: String, $file: String) {
+  logs (workflow: $workflowName, task:$task, file: $file) {
+    lines
+  }
+}
+`
+
 /**
  * Query used to retrieve data for the WorkflowsTable view.
  *
@@ -380,6 +393,7 @@ ${JOB_DATA_FRAGMENT}
 export {
   GSCAN_DELTAS_SUBSCRIPTION,
   DASHBOARD_DELTAS_SUBSCRIPTION,
+  LOGS_SUBSCRIPTION,
   WORKFLOWS_TABLE_DELTAS_SUBSCRIPTION,
   WORKFLOW_TREE_DELTAS_SUBSCRIPTION,
   WORKFLOW_TABLE_DELTAS_SUBSCRIPTION

src/graphql/queries.js

@@ -22,8 +22,8 @@ import subscriptionMixin from '@/mixins/subscription'
  * of such component is the GScan component, which declares a query used to
  * list the workflows of the system in the UI sidebar.
  *
- * Uses Vue component lifecycle methods (e.g. created, beforeDestroy) to coordinate
- * when a subscription is created in the WorkflowService service.
+ * Uses Vue component lifecycle methods (e.g. created, beforeDestroy) to
+ * coordinate when a subscription is created in the WorkflowService service.
  *
  * @see Subscription
  * @see SubscriptionQuery
@@ -33,7 +33,7 @@ export default {
   mixins: [
     subscriptionMixin
   ],
-  created () {
+  beforeMount () {
     this.$workflowService.subscribe(this)
   },
   beforeDestroy () {

src/mixins/subscriptionComponent.js

@@ -36,12 +36,16 @@ class SubscriptionQuery {
    * @param {Object.<String, String>} variables
    * @param {String} name
    * @param {Array<DeltasCallback>} callbacks
+   * @param {boolean} isDelta
+   * @param {boolean} isGlobalCallback
    */
-  constructor (query, variables, name, callbacks) {
+  constructor (query, variables, name, callbacks, isDelta, isGlobalCallback) {
     this.query = query
     this.variables = variables
     this.name = name
     this.callbacks = callbacks
+    this.isDelta = isDelta
+    this.isGlobalCallback = isGlobalCallback
   }
 }
 

src/model/SubscriptionQuery.model.js

@@ -219,7 +219,7 @@ class WorkflowService {
       subscription.subscribers[componentOrView._uid] = componentOrView
       // Then we recompute the query, checking if variables match, and action name is set.
       this.recompute(subscription)
-      // regardless of whether this results in a restart, we take this opertunity to preset the componentOrView store if needed
+      // regardless of whether this results in a restart, we take this opportunity to preset the componentOrView store if needed
       const errors = []
       // if the callbacks class has an init method defined, use it
       for (const callback of subscription.callbacks) {
@@ -273,63 +273,92 @@ class WorkflowService {
       }
       this.stopSubscription(subscription, true)
     }
-
-    const globalCallback = this.globalCallback
-
-    try {
-      // Then start subscription.
-      subscription.observable = this.startDeltasSubscription(
-        subscription.query.query,
-        subscription.query.variables,
-        {
-          next: function next (response) {
-            const deltas = response.data.deltas || {}
-            const added = deltas.added || {}
-            const updated = deltas.updated || {}
-            const pruned = deltas.pruned || {}
-            const errors = []
-
-            // run the global callback first
-            globalCallback.onAdded(added, store, errors)
-            globalCallback.onUpdated(updated, store, errors)
-            globalCallback.onPruned(pruned, store, errors)
-
-            // then run the local callbacks if there are any
-            if (subscription.callbacks.length === 0) {
-              return
-            }
-            for (const callback of subscription.callbacks) {
-              callback.before(deltas, store, errors)
-              callback.onAdded(added, store, errors)
-              callback.onUpdated(updated, store, errors)
-              callback.commit(store, errors)
-            }
-            for (const callback of [...subscription.callbacks].reverse()) {
-              callback.onPruned(pruned, store, errors)
-              callback.after(deltas, store, errors)
-              callback.commit(store, errors)
+    if (subscription.query.isDelta === false & subscription.query.isGlobalCallback === false) {
+      try {
+        // Then start subscription.
+        subscription.observable = this.startCylcSubscription(
+          subscription.query.query,
+          subscription.query.variables,
+          {
+            next: function next (response) {
+              if (subscription.callbacks.length === 0) {
+                return
+              }
+              const errors = []
+              for (const callback of subscription.callbacks) {
+                callback.onAdded(response.data.logs, store, errors)
+                callback.commit(store, errors)
+              }
+            },
+            error: function error (err) {
+              subscription.handleViewState(ViewState.ERROR, err)
             }
-            for (const error of errors) {
-              store.commit(
-                'SET_ALERT',
-                new Alert(error[0], null, 'error'),
-                { root: true }
-              )
-              // eslint-disable-next-line no-console
-              console.warn(...error)
+          }
+        )
+        this.subscriptions[subscription.query.name] = subscription
+        // All done!
+        subscription.handleViewState(ViewState.COMPLETE, null)
+        subscription.reload = false
+      } catch (e) {
+        subscription.handleViewState(ViewState.ERROR, e)
+      }
+    } else {
+      const globalCallback = this.globalCallback
+      try {
+        // Then start subscription.
+        subscription.observable = this.startCylcSubscription(
+          subscription.query.query,
+          subscription.query.variables,
+          {
+            next: function next (response) {
+              const deltas = response.data.deltas || {}
+              const added = deltas.added || {}
+              const updated = deltas.updated || {}
+              const pruned = deltas.pruned || {}
+              const errors = []
+
+              // run the global callback first
+              globalCallback.onAdded(added, store, errors)
+              globalCallback.onUpdated(updated, store, errors)
+              globalCallback.onPruned(pruned, store, errors)
+
+              // then run the local callbacks if there are any
+              if (subscription.callbacks.length === 0) {
+                return
+              }
+              for (const callback of subscription.callbacks) {
+                callback.before(deltas, store, errors)
+                callback.onAdded(added, store, errors)
+                callback.onUpdated(updated, store, errors)
+                callback.commit(store, errors)
+              }
+              for (const callback of [...subscription.callbacks].reverse()) {
+                callback.onPruned(pruned, store, errors)
+                callback.after(deltas, store, errors)
+                callback.commit(store, errors)
+              }
+              for (const error of errors) {
+                store.commit(
+                  'SET_ALERT',
+                  new Alert(error[0], null, 'error'),
+                  { root: true }
+                )
+                // eslint-disable-next-line no-console
+                console.warn(...error)
+              }
+            },
+            error: function error (err) {
+              subscription.handleViewState(ViewState.ERROR, err)
             }
-          },
-          error: function error (err) {
-            subscription.handleViewState(ViewState.ERROR, err)
           }
-        }
-      )
-      this.subscriptions[subscription.query.name] = subscription
-      // All done!
-      subscription.handleViewState(ViewState.COMPLETE, null)
-      subscription.reload = false
-    } catch (e) {
-      subscription.handleViewState(ViewState.ERROR, e)
+        )
+        this.subscriptions[subscription.query.name] = subscription
+        // All done!
+        subscription.handleViewState(ViewState.COMPLETE, null)
+        subscription.reload = false
+      } catch (e) {
+        subscription.handleViewState(ViewState.ERROR, e)
+      }
     }
   }
 
@@ -343,7 +372,7 @@ class WorkflowService {
    * @param {SubscriptionOptions} subscriptionOptions - { next(), error() }
    * @returns {Subscription}
    */
-  startDeltasSubscription (query, variables, subscriptionOptions) {
+  startCylcSubscription (query, variables, subscriptionOptions) {
     if (!query) {
       throw new Error('You must provide a query for the subscription')
     }