feature: Better UI for execution buttons (#195)

webui/index.html

@@ -143,9 +143,6 @@
 			</button>
 
 			<div class = "action-button-footer">
-				<details class = "executions">
-					<summary>Not executed yet.</summary>
-				</details>
 			</div>
 		</template>
 

webui/js/ActionButton.js

@@ -85,9 +85,7 @@ class ActionButton extends window.HTMLElement {
 
     const btnExecution = document.createElement('execution-button')
     btnExecution.constructFromJson(startActionArgs.uuid)
-    this.querySelector('.executions').appendChild(btnExecution)
+    this.querySelector('.action-button-footer').prepend(btnExecution)
-
-    this.querySelector('summary').innerText = (this.querySelector('.executions').children.length - 1) + ' executions.'
 
     window.fetch(this.actionCallUrl, {
       method: 'POST',

webui/js/ExecutionButton.js

@@ -3,6 +3,7 @@ import { ExecutionDialog } from './ExecutionDialog.js'
 class ExecutionButton extends window.HTMLElement {
   constructFromJson (json) {
     this.executionUuid = json
+    this.ellapsed = 0
 
     this.appendChild(document.createElement('button'))
     this.isWaiting = true
@@ -56,30 +57,23 @@ class ExecutionButton extends window.HTMLElement {
     } else if (LogEntry.exitCode !== 0) {
       this.onActionResult('action-nonzero-exit', 'Exit code ' + LogEntry.exitCode)
     } else {
+      console.log(LogEntry)
+      this.ellapsed = Math.ceil(new Date(LogEntry.datetimeFinished) - new Date(LogEntry.datetimeStarted)) / 1000
       this.onActionResult('action-success', 'Success!')
     }
   }
 
   onActionResult (cssClass, temporaryStatusMessage) {
-    this.temporaryStatusMessage = '[ ' + temporaryStatusMessage + ' ]'
+    this.temporaryStatusMessage = '[' + temporaryStatusMessage + ']'
     this.updateDom()
     this.btn.classList.add(cssClass)
-
-    setTimeout(() => {
-      this.btn.classList.remove(cssClass)
-    }, 1000)
   }
 
   onActionError (err) {
     console.error('callback error', err)
-    this.btn.disabled = false
     this.isWaiting = false
     this.updateDom()
     this.btn.classList.add('action-failed')
-
-    setTimeout(() => {
-      this.btn.classList.remove('action-failed')
-    }, 1000)
   }
 
   updateDom () {
@@ -87,7 +81,6 @@ class ExecutionButton extends window.HTMLElement {
       this.btn.innerText = this.temporaryStatusMessage
       this.btn.classList.add('temporary-status-message')
       this.isWaiting = false
-      this.disabled = false
 
       setTimeout(() => {
         this.temporaryStatusMessage = null
@@ -97,7 +90,8 @@ class ExecutionButton extends window.HTMLElement {
     } else if (this.isWaiting) {
       this.btn.innerText = 'Waiting...'
     } else {
-      this.btn.innerText = 'Finished'
+      this.btn.innerText = this.ellapsed + 's'
+      this.btn.title = this.ellapsed + ' seconds'
     }
   }
 }

webui/style.css

@@ -226,15 +226,22 @@ action-button details summary div span:first-child {
 }
 
 .action-button-footer {
-  display: block;
+  display: flex;
   text-align: left;
   font-size: smaller;
-  padding: 0.2em;
   background-color: #efefef;
   border-top: 0;
   border-left: 1px solid #666;
   border-right: 1px solid #666;
   border-bottom: 1px solid #666;
+  overflow: scroll;
+}
+
+execution-button {
+  display: inline-block;
+  margin-right: .2em;
+  margin-left: .2em;
+  margin-top: .2em;
 }
 
 execution-button button {
@@ -266,43 +273,29 @@ input[type="submit"]:disabled {
 /* Button animations */
 
 .action-failed {
-  animation: kf-action-failed 1s;
+  transition: 1s;
-}
+  background-color: red;
-
-@keyframes kf-action-failed {
-  20% { background-color: red; }
 }
 
 .action-success {
-  animation: kf-action-success 1s;
+  transition: 1s;
-}
+  background-color: limegreen;
-
-@keyframes kf-action-success {
-  20% { background-color: limegreen; }
 }
 
 .action-nonzero-exit {
   animation: kf-action-nonzero-exit 1s;
-}
+  transition: 1s;
-
+  background-color: orange;
-@keyframes kf-action-nonzero-exit {
-  20% { background-color: orange; }
 }
 
 .action-timeout {
-  animation: kf-action-timeout 1s;
+  transition: 1s;
-}
+  background-color: cyan;
-
-@keyframes kf-action-timeout {
-  20% { background-color: cyan; }
 }
 
 .action-blocked {
-  animation: kf-action-blocked 1s;
+  transition: 1s;
-}
+  background-color: purple;
-
-@keyframes kf-action-blocked {
-  20% { background-color: purple; }
 }
 
 img.logo {