Merge pull request #1275 from oliver-sanders/log-tidy

log: various goodies

Author: wxtim

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules/
+node_modules
 /dist/
 /docs/jsdoc/
 

CHANGES.md

@@ -15,6 +15,11 @@ ones in. -->
 
 ### Enhancements
 
+[#1275](https://github.com/cylc/cylc-ui/pull/1275) -
+Various improvements to the log view including the ability to view prior
+job submissions, workflow log files and the connection status of the
+log file subscription.
+
 [#1187](https://github.com/cylc/cylc-ui/pull/1187) - Improved the workflow
 filtering menu in the sidebar.
 

cypress/component/cylc-graph-node.cy.js

@@ -95,10 +95,10 @@ describe('graph node component', () => {
         propsData: { task, jobs }
       }
     )
-    // there should be 4 jobs
+    // there should be 4 jobs (8 svg nodes)
     cy.get('.c-graph-node:last .jobs')
       .children()
-      .should('have.length', 4)
+      .should('have.length', 8)
     // there shouldn't be a job overflow indicator
     cy.get('.c-graph-node:last .job-overflow').should('not.exist')
 
@@ -120,10 +120,10 @@ describe('graph node component', () => {
         propsData: { task, jobs, maxJobs: 4 }
       }
     )
-    // there should be <maxJobs> jobs
+    // there should be <maxJobs> jobs (<maxJobs * 2 svg nodes)
     cy.get('.c-graph-node:last .jobs')
       .children()
-      .should('have.length', 4)
+      .should('have.length', 8)
     // there should be a job overflow indicator with the number of overflow jobs
     cy.get('.c-graph-node:last .job-overflow')
       .should('exist')

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/GraphNode.vue

@@ -77,9 +77,24 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
           scale(${ (index === 0) ? mostRecentJobScale : '1' })
         `"
       >
-        <job
-          :svg="true"
-          :status="job.node.state"
+        <symbol
+          :id="`${nodeID}-${index}`"
+          viewBox="0 0 100 100"
+          :class="`job_theme--${jobTheme}`"
+        >
+          <!--
+            Use a "symbol" for job nodes in order to make them clickable.
+            The job theme must be set on the "symbol" for styling to work.
+          -->
+          <job
+            :svg="true"
+            :status="job.node.state"
+          />
+        </symbol>
+        <use
+          :href="`#${nodeID}-${index}`"
+          width="100" height="100"
+          v-cylc-object="job"
         />
       </g>
       <!-- overflow indicator if there are surplus jobs -->
@@ -130,6 +145,9 @@ export default {
       // the size of the most recent job icon relative to any previos jobs
       default: 1.2,
       required: false
+    },
+    jobTheme: {
+      required: true
     }
   },
   computed: {

src/components/cylc/cylcObject/Menu.vue

@@ -264,19 +264,16 @@ export default {
     },
     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'
+              tokens: this.node.tokens
             }
           }
         )
+        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><span v-for="(log, index) in computedLogs" :key="index">{{log}}</span></pre>
   </div>
 </template>
 
@@ -28,23 +28,56 @@ export default {
   props: {
     placeholder: {
       type: String,
-      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
-      } else {
+        if (!this.timestamps) {
+          return this.updateLogs()
+        } else return this.logs
+      } else if (this.placeholder) {
         return [this.placeholder]
+      } else {
+        return []
       }
     }
+  },
+  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/mixins/subscriptionComponent.js

@@ -34,18 +34,29 @@ export default {
     subscriptionMixin
   ],
   beforeMount () {
-    this.$workflowService.subscribe(this)
-    this.$workflowService.startSubscriptions()
+    if (this.query) {
+      this.$workflowService.subscribe(this)
+      this.$workflowService.startSubscriptions()
+    }
   },
   beforeDestroy () {
-    this.$workflowService.unsubscribe(this)
+    this._updateQuery(null, this.query)
+  },
+  methods: {
+    _updateQuery (newVal, oldVal) {
+      if (oldVal) {
+        this.$workflowService.unsubscribe(this)
+      }
+      if (newVal) {
+        this.$workflowService.subscribe(this)
+        this.$workflowService.startSubscriptions()
+      }
+    }
   },
   watch: {
-    query () {
+    query (newVal, oldVal) {
       // if the query changes, unsubscribe & re-subscribe
-      this.$workflowService.unsubscribe(this)
-      this.$workflowService.subscribe(this)
-      this.$workflowService.startSubscriptions()
+      this._updateQuery(newVal, oldVal)
     }
   }
 }

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
   }
 ]