diff --git a/webui/index.html b/webui/index.html index db38881..825da7a 100644 --- a/webui/index.html +++ b/webui/index.html @@ -80,34 +80,34 @@
- +

Log: - ? + ?

- Started: unknown. - Finished: unknown + Started: unknown. + Finished: unknown

- Exit Code: unknown + Exit Code: unknown

- Status: unknown + Status: unknown

- stdout -
+				Output
+				
 					?
 				
- stderr -
+				Errors
+				
 					?
 				
diff --git a/webui/js/ExecutionButton.js b/webui/js/ExecutionButton.js index 6f7b33d..0a5f27f 100644 --- a/webui/js/ExecutionButton.js +++ b/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 = { - 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) - }) + window.executionDialog.show(this.executionUuid) } onFinished (LogEntry) { diff --git a/webui/js/ExecutionDialog.js b/webui/js/ExecutionDialog.js index 0fe4250..028069e 100644 --- a/webui/js/ExecutionDialog.js +++ b/webui/js/ExecutionDialog.js @@ -2,23 +2,56 @@ // the 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.domTitle = this.dlg.querySelector('.title') - this.domStdout = this.dlg.querySelector('.stdout') - this.domStderr = this.dlg.querySelector('.stderr') - this.domDatetimeStarted = this.dlg.querySelector('.datetimeStarted') - this.domDatetimeFinished = this.dlg.querySelector('.datetimeFinished') - this.domExitCode = this.dlg.querySelector('.exitCode') - this.domStatus = this.dlg.querySelector('.status') + this.domIcon = document.getElementById('execution-dialog-icon') + this.domTitle = document.getElementById('execution-dialog-title') + this.domStdout = document.getElementById('execution-dialog-stdout') + this.domStderr = document.getElementById('execution-dialog-stderr') + this.domDatetimeStarted = document.getElementById('execution-dialog-datetime-started') + this.domDatetimeFinished = document.getElementById('execution-dialog-datetime-finished') + this.domExitCode = document.getElementById('execution-dialog-exit-code') + 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 () { - this.dlg.showModal() + fetchExecutionResult () { + 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 } diff --git a/webui/style.css b/webui/style.css index 5330495..1e4501d 100644 --- a/webui/style.css +++ b/webui/style.css @@ -296,6 +296,7 @@ input[type="submit"]:disabled { .action-blocked { transition: 1s; background-color: purple; + color: white; } img.logo {