log: support other workflow log files and timestamp redaction

* Support viewing other workflow log files e.g. `config/` and `install/`.
* Support stripping timestamps from logs.

Author: datamel

package.json

@@ -3,7 +3,6 @@
   "version": "1.5.0",
   "private": true,
   "license": "GPL-3.0-only",
-
   "scripts": {
     "build": "vue-cli-service build",
     "build:report": "vue-cli-service build --report",
@@ -21,7 +20,6 @@
     "test:unit": "vue-cli-service test:unit",
     "test": "yarn run test:unit || exit 1; yarn run coverage:e2e --headless"
   },
-
   "dependencies": {
     "@apollo/client": "^3.5.8",
     "@hpcc-js/wasm": "1.13",
@@ -50,7 +48,6 @@
     "vuetify": "^2.6.10",
     "vuex": "^3.6.2"
   },
-
   "devDependencies": {
     "@babel/core": "^7.14.8",
     "@babel/eslint-parser": "^7.16.5",

src/components/cylc/cylcObject/Menu.vue

@@ -264,11 +264,9 @@ export default {
     },
     openDialog (mutation) {
       if (mutation.name === 'log') {
-        this.showMenu = false
         this.$eventBus.emit(
           'add-view',
           {
-
             viewName: 'Log',
             initialOptions: {
               workflow: this.node.tokens.workflow,
@@ -277,6 +275,7 @@ export default {
             }
           }
         )
+        this.showMenu = false
         return
       }
 

src/components/cylc/log/Log.vue

@@ -17,7 +17,7 @@ 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>
+    <pre><code><span v-for="(log, index) in computedLogs" :key="index">{{log}}</span></code></pre>
   </div>
 </template>
 
@@ -31,20 +31,52 @@ export default {
       default: 'Waiting for logs',
       required: false
     },
+    timestamps: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
     logs: {
       type: Array,
       required: true
     }
   },
+  data () {
+    return {
+      match: ''
+    }
+  },
   computed: {
     computedLogs () {
       if (this.logs.length > 0) {
-        return this.logs
+        if (!this.timestamps) {
+          return this.updateLogs()
+        } else return this.logs
       } else {
         return [this.placeholder]
       }
     }
+  },
+  methods: {
+    updateLogs () {
+      return this.logs.map((logLine) => {
+        return this.stripTimestamp(logLine)
+      })
+    },
+    stripTimestamp (logLine) {
+      const regex = /\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:Z|[+-][\d:]+)?\s(.*\s*)/
+      this.match = logLine.match(regex)
+      if (this.match) {
+        return this.match[1]
+      }
+      return logLine
+    }
   }
 }
 
 </script>
+<style>
+  .theme--light.v-application code{
+    background-color: transparent;
+  }
+</style>

src/graphql/queries.js

@@ -202,13 +202,26 @@ ${WORKFLOW_DATA_FRAGMENT}
  * @type {DocumentNode}
 */
 const LOGS_SUBSCRIPTION = gql`
-subscription LogData ($workflowName: ID, $task: String, $file: String) {
+subscription LogData ($workflowName: ID, $task: String!, $file: String!) {
   logs (workflow: $workflowName, task:$task, file: $file) {
     lines
   }
 }
 `
 
+/**
+ * Query used to retrieve available log files for the Log view.
+ *
+ * @type {DocumentNode}
+*/
+const LOG_FILE_QUERY = gql`
+query LogFiles($workflowName: ID, $task: String!) {
+  logFiles(workflow: $workflowName, task: $task) {
+    files
+  }
+}
+`
+
 /**
  * Query used to retrieve data for the WorkflowsTable view.
  *
@@ -391,6 +404,7 @@ ${JOB_DATA_FRAGMENT}
 `
 
 export {
+  LOG_FILE_QUERY,
   GSCAN_DELTAS_SUBSCRIPTION,
   DASHBOARD_DELTAS_SUBSCRIPTION,
   LOGS_SUBSCRIPTION,

src/router/paths.js

@@ -123,5 +123,16 @@ export default [
       showSidebar: false
     },
     props: true
+  },
+  {
+    path: '/log/:workflowName(.*)',
+    view: 'Log',
+    name: 'log',
+    meta: {
+      layout: 'default',
+      toolbar: true,
+      showSidebar: false
+    },
+    props: true
   }
 ]

src/services/workflow.service.js

@@ -127,7 +127,6 @@ class WorkflowService {
    * @param {string} queryName
    * @param {Object} args
    * @param {Field[]} fields
-   * @param {Object} variables
    * @return {Promise<Object>}
    * @memberof WorkflowService
    */

src/utils/aotf.js

@@ -308,6 +308,13 @@ export const dummyMutations = [
     args: [],
     _appliesTo: cylcObjects.Namespace,
     _requiresInfo: true
+  },
+  {
+    name: 'log',
+    description: 'View the logs.',
+    args: [],
+    _appliesTo: cylcObjects.Job,
+    _requiresInfo: true
   }
 ]