log: change query interface and change form inputs

* Unify the `workflow` and `task` arguments into `id`.
* Add a workflow/job toggle to switch between workflow and job logs.
* Switch to using watchers and debounce for log file requests.
* Remove the search/update button by subscribing reactively.
* Add a button for refreshing the log file list.
* Use the ViewToolbar for presenting options.
* Use a skeleton component for the loading state.
* Disable the log file input when the file list is loading.

Author: oliver-sanders

.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')

src/components/cylc/cylcObject/Menu.vue

@@ -269,9 +269,7 @@ export default {
           {
             viewName: 'Log',
             initialOptions: {
-              workflow: this.node.tokens.workflow,
-              task: this.node.tokens.relative_id,
-              file: 'job.out'
+              tokens: this.node.tokens
             }
           }
         )

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><code><span v-for="(log, index) in computedLogs" :key="index">{{log}}</span></code></pre>
+    <pre><span v-for="(log, index) in computedLogs" :key="index">{{log}}</span></pre>
   </div>
 </template>
 
@@ -28,7 +28,6 @@ export default {
   props: {
     placeholder: {
       type: String,
-      default: 'Waiting for logs',
       required: false
     },
     timestamps: {
@@ -52,8 +51,10 @@ export default {
         if (!this.timestamps) {
           return this.updateLogs()
         } else return this.logs
-      } else {
+      } else if (this.placeholder) {
         return [this.placeholder]
+      } else {
+        return []
       }
     }
   },

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/services/mock/json/index.js

@@ -20,12 +20,16 @@ const userProfile = require('./userprofile.json')
 const taskProxy = require('./taskProxy.json')
 const familyProxy = require('./familyProxy.json')
 const App = require('./App')
+const LogData = require('./logData.json')
+const LogFiles = require('./logFiles.json')
 
 module.exports = {
   IntrospectionQuery,
   taskProxy,
   familyProxy,
   userProfile,
+  LogData,
+  LogFiles,
   App,
   Workflow: App
 }

src/services/mock/json/logData.json

@@ -0,0 +1,13 @@
+{
+    "logs": {
+        "connected": true,
+        "path": "my-host:/path/to/the/log/file/note/these/paths/get/really/log/NN/job.out",
+        "lines": [
+            "one\n",
+            "two\n",
+            "three\n",
+            "four\n",
+            "five\n"
+        ]
+    }
+}

src/services/mock/json/logFiles.json

@@ -0,0 +1,11 @@
+{
+    "data": {
+        "logFiles": {
+            "files": [
+                "job.out",
+                "job.err",
+                "job"
+            ]
+        }
+    }
+}

src/utils/uid.js

@@ -194,6 +194,10 @@ class Tokens {
     let task
     let job
 
+    if (id === null) {
+      throw new Error(`Invalid ID ${id}`)
+    }
+
     // try to match relative ID (the leading // is implicit)
     if (relative) {
       match = `//${id}`.match(RELATIVE_ID)