bugfix: Execution dialog would only show first result (#222)

* bugfix: execution-dialog

* bugfix: execution-dialog

webui/index.html

@@ -80,34 +80,34 @@
 
 		<dialog title = "Execution Results" id = "execution-results-popup">
 			<div class = "action-header">
-				<span role = "img" class = "icon"></span>
+				<span id = "execution-dialog-icon" class = "icon" role = "img"></span>
 
 				<h2>Log:
-					<span class = "title">?</span>
+					<span id = "execution-dialog-title">?</span>
 				</h2>
 			</div>
 			<p>
-				<strong>Started: </strong><span class = "datetimeStarted">unknown</span>.
+				<strong>Started: </strong><span id = "execution-dialog-datetime-started">unknown</span>.
-				<strong>Finished: </strong><span class = "datetimeFinished">unknown</span>
+				<strong>Finished: </strong><span id = "execution-dialog-datetime-finished">unknown</span>
 			</p>
 			<p>
-				<strong>Exit Code: </strong><span class = "exitCode">unknown</span>
+				<strong>Exit Code: </strong><span id = "execution-dialog-exit-code">unknown</span>
 			</p>
 			<p>
-				<strong>Status: </strong><span class = "status">unknown</span>
+				<strong>Status: </strong><span id = "execution-dialog-status">unknown</span>
 			</p>
 
 
 			<details>
-				<summary>stdout</summary>
+				<summary>Output</summary>
-				<pre class = "stdout">
+				<pre id = "execution-dialog-stdout">
 					?
 				</pre>
 			</details>
 
 			<details>
-				<summary>stderr</summary>
+				<summary>Errors</summary>
-				<pre class = "stderr">
+				<pre id = "execution-dialog-stderr">
 					?
 				</pre>
 			</details>

webui/js/ExecutionButton.js

@@ -18,35 +18,11 @@ class ExecutionButton extends window.HTMLElement {
   }
 
   show () {
-    if (window.executionDialog === undefined) {
+    if (typeof (window.executionDialog) === 'undefined') {
       window.executionDialog = new ExecutionDialog()
     }
 
-    const executionStatusArgs = {
+    window.executionDialog.show(this.executionUuid)
-      executionUuid: this.executionUuid
-    }
-
-    window.executionDialog.constructFromJson(this.executionUuid)
-    window.executionDialog.show()
-
-    window.fetch(window.restBaseUrl + 'ExecutionStatus', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(executionStatusArgs)
-    }).then((res) => {
-      if (res.ok) {
-        return res.json()
-      } else {
-        throw new Error(res.statusText)
-      }
-    }
-    ).then((json) => {
-      window.executionDialog.renderResult(json)
-    }).catch(err => {
-      window.executionDialog.renderError(err)
-    })
   }
 
   onFinished (LogEntry) {

webui/js/ExecutionDialog.js

@@ -2,23 +2,56 @@
 // the <dialog /> element out of index.html and just re-uses that - as only
 // one dialog can be shown at a time.
 export class ExecutionDialog {
-  constructFromJson (json) {
+  show (json) {
     this.executionUuid = json
 
     this.dlg = document.querySelector('dialog#execution-results-popup')
 
-    this.domIcon = this.dlg.querySelector('.icon')
+    this.domIcon = document.getElementById('execution-dialog-icon')
-    this.domTitle = this.dlg.querySelector('.title')
+    this.domTitle = document.getElementById('execution-dialog-title')
-    this.domStdout = this.dlg.querySelector('.stdout')
+    this.domStdout = document.getElementById('execution-dialog-stdout')
-    this.domStderr = this.dlg.querySelector('.stderr')
+    this.domStderr = document.getElementById('execution-dialog-stderr')
-    this.domDatetimeStarted = this.dlg.querySelector('.datetimeStarted')
+    this.domDatetimeStarted = document.getElementById('execution-dialog-datetime-started')
-    this.domDatetimeFinished = this.dlg.querySelector('.datetimeFinished')
+    this.domDatetimeFinished = document.getElementById('execution-dialog-datetime-finished')
-    this.domExitCode = this.dlg.querySelector('.exitCode')
+    this.domExitCode = document.getElementById('execution-dialog-exit-code')
-    this.domStatus = this.dlg.querySelector('.status')
+    this.domStatus = document.getElementById('execution-dialog-status')
+
+    this.domTitle.innerText = 'Loading...'
+    this.domExitCode.innerText = '?'
+    this.domStatus.className = ''
+    this.domDatetimeStarted.innerText = ''
+    this.domDatetimeFinished.innerText = ''
+    this.domStdout.innerText = ''
+    this.domStderr.innerText = ''
+
+    this.dlg.showModal()
+
+    this.fetchExecutionResult()
   }
 
-  show () {
+  fetchExecutionResult () {
-    this.dlg.showModal()
+    const executionStatusArgs = {
+      executionUuid: this.executionUuid
+    }
+
+    window.fetch(window.restBaseUrl + 'ExecutionStatus', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(executionStatusArgs)
+    }).then((res) => {
+      if (res.ok) {
+        return res.json()
+      } else {
+        throw new Error(res.statusText)
+      }
+    }
+    ).then((json) => {
+      this.renderResult(json)
+    }).catch(err => {
+      this.renderError(err)
+    })
   }
 
   renderResult (res) {
@@ -26,15 +59,18 @@ export class ExecutionDialog {
 
     if (res.logEntry.executionFinished) {
       this.domStatus.innerText = 'Completed'
+      this.domStatus.classList.add('action-success')
       this.domDatetimeFinished.innerText = res.logEntry.datetimeFinished
 
-      if (res.logEntry.blocked) {
-        this.domStatus.innerText = 'Blocked'
-      }
-
       if (res.logEntry.timedOut) {
         this.domExitCode.innerText = 'Timed out'
-        this.domStatus.innerText = 'Timed out'
+        this.domStatus.classList.add('action-timeout')
+      } else if (res.logEntry.blocked) {
+        this.domStatus.innerText = 'Blocked'
+        this.domStatus.classList.add('action-blocked')
+      } else if (res.logEntry.exitCode !== 0) {
+        this.domStatus.innerText = 'Non-Zero Exit'
+        this.domStatus.classList.add('action-nonzero-exit')
       } else {
         this.domExitCode.innerText = res.logEntry.exitCode
       }
@@ -47,13 +83,14 @@ export class ExecutionDialog {
     this.domIcon.innerHTML = res.logEntry.actionIcon
     this.domTitle.innerText = res.logEntry.actionTitle
 
+    this.domStdout.innerText = res.logEntry.stdout
     this.domStdout.innerText = res.logEntry.stdout
 
     if (res.logEntry.stderr === '') {
-      this.domStderr.parentElement.hidden = true
+      this.domStderr.parentElement.style.display = 'none'
       this.domStderr.innerText = res.logEntry.stderr
     } else {
-      this.domStderr.parentElement.hidden = false
+      this.domStderr.parentElement.style.display = 'block'
       this.domStderr.innerText = res.logEntry.stderr
     }
 

webui/style.css

@@ -296,6 +296,7 @@ input[type="submit"]:disabled {
 .action-blocked {
   transition: 1s;
   background-color: purple;
+  color: white;
 }
 
 img.logo {