ccp/js/executionhistorycontroller.js

@@ -26,10 +26,10 @@ class CCPExecutionHistory extends HTMLElement {
     this.#broadcasturl = this.#broadcasturl + "/ws/notification"
     this.#archive = this.getAttribute("archive")
     this.connectNewExecution()
-    this.connectBroadcast()
   }
   
   connectedCallback(){
+    this.connectBroadcastWithSubject()
     this.render()
     this.refreshExecutions()
   }
@@ -114,6 +114,8 @@ class CCPExecutionHistory extends HTMLElement {
                       <span style="text-overflow:ellipsis" class="badge badge-light text-info border border-info" name="infrastructure" alt="Infrastructure" title="Infrastructure"></span>
                       <span class="badge" name="runtime" alt="Runtime" title="Runtime"></span>
                     </div>
+                    <div name="logterminalcontainer" style="margin:5px 0 5px 0">
+                    </div>
                     <ul>
                       <li></li>
                     </ul>
@@ -270,10 +272,26 @@ class CCPExecutionHistory extends HTMLElement {
     })
   }
   
+  connectBroadcastWithSubject(){
+    var interval = window.setInterval( ()=>{
+      if(this.#boot.subject){
+        window.clearInterval(interval)
+        this.connectBroadcast() 
+      }
+    }, 1000) 
+  }
+  
   connectBroadcast(){
-    this.#socket = new WebSocket(this.#broadcasturl + "/executions");
+    this.#socket = new WebSocket(`${this.#broadcasturl}/unified?subject=${this.#boot.subject}`);
     this.#socket.onmessage = event=>{
       const data = JSON.parse(event.data)
+      
+      if(data[0] && data[0].source){
+        //has to be logs
+        this.appendLogs(data)
+        return
+      }
+      
       let exec = this.#data.filter(e=>e.id === data.jobID)[0]
       if(exec){
         this.refreshExecution(exec.id)
@@ -299,6 +317,17 @@ class CCPExecutionHistory extends HTMLElement {
     }, 30000) 
   }
   
+  appendLogs(data){
+    if(!data.length) return;
+    const exid = data[0]["attrs"]["execution"]
+    const lt = this.#rootdoc.querySelector(`d4s-ccp-logterminal[index='${exid}']`)
+    if(!lt){
+      console.error("No terminal found for adding logs of " + exid)
+    }else{
+      lt.addLines(data)
+    }
+  }
+  
   download(url, name) {
     this.#boot.secureFetch(url).then(reply => {
       if (!reply.ok) {
@@ -627,6 +656,12 @@ class CCPExecutionHistory extends HTMLElement {
                   this.generateCode(id, lang, `${id}.${ext}`)
                 }
               },
+              {
+                target : "div[name=logterminalcontainer]",
+                apply : (e,d)=>{
+                  e.innerHTML = `<d4s-ccp-logterminal index="${d.id}" maxstoredlines="100" maxlines="10"></d4s-ccp-logterminal>`
+                }
+              },
               {
                 target : "ul",
                 recurse : [

ccp/js/logterminalcontroller.js

@@ -0,0 +1,120 @@
+class LogTerminal extends HTMLElement {
+  
+  #maxlines = 10;
+  #maxstoredlines = 100;
+  #rootdoc = null;
+  #lines = [];
+  #index = null;
+  
+  static get observedAttributes() { return ['index']; }
+
+  constructor(){
+    super()
+    this.#maxlines = this.getAttribute("maxlines") 
+    this.#rootdoc = this.attachShadow({ "mode" : "open"})  
+    this.render()
+  }
+
+  connectedCallback(){
+      this.reloadLines()
+      this.refresh()
+  }
+ 
+  attributeChangedCallback(name, oldValue, newValue) {
+    if(name === "index"){
+      this.#index = newValue
+      this.reloadLines()
+    }
+  }
+
+  get lines(){
+    return this.#lines
+  }
+  
+  addLines(lines){
+    this.#lines = this.#lines.concat(lines)
+    this.refresh()
+    this.storeLines()
+  }
+  
+  reloadLines(){
+    if(this.#index == null) return;
+    if(sessionStorage.getItem("logs-" + this.#index)){
+      this.#lines = JSON.parse(sessionStorage.getItem("logs-" + this.#index))
+    }else{
+      this.#lines = []
+    }
+  }
+  
+  storeLines(){
+    if(this.#lines.length > this.#maxstoredlines){
+      this.#lines.splice(0, this.#lines.length - this.#maxstoredlines)
+    }
+    sessionStorage.setItem("logs-" + this.#index, JSON.stringify(this.#lines))
+  }
+  
+  render(){
+    this.#rootdoc.innerHTML = `
+      <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
+      <style>
+        .terminal-container{
+          overflow: hidden;
+        }
+        .terminal{
+          background-color: black;
+          max-height: 10rem;
+          height: 10rem;
+          min-height:10rem;
+          padding: 5px;
+          overflow:auto;
+          font-size: x-small;
+          line-height: 0.9rem;
+        }
+        
+        .terminal > .line {
+          font-family: 'VT323', monospace;
+          color: #88ff00;
+        }
+        
+        .terminal > .line.error {
+          color: #ff3300;
+        }
+        
+        .terminal > .line.infrastructure {
+          color: rgba(255,255,255,0.8);
+        }
+      </style>
+      <template id="TERMINAL_TEMPLATE">
+        <div name="terminal" class="container">
+          <div class="terminal" id="t">
+            <div class="line"></div>
+          </div>
+        </div>
+      </template> 
+      <div name="terminal" class="container"></div>
+    `
+  }
+  
+  refresh(){
+    BSS.apply(this.#terminal_bss, this.#rootdoc)
+    const lt = this.#rootdoc.querySelector("div.terminal")
+    lt.scrollTop = lt.scrollHeight;
+  }
+  
+  #terminal_bss = {
+    template : "#TERMINAL_TEMPLATE",
+    target : "div[name=terminal]",
+    in : ()=>this,
+    recurse : {
+      target : "div.line",
+      in: (e,d)=>d.lines,
+      apply: (e,d,i)=>{
+        if(d.source === "stderr") e.classList.add("error");
+        if(d.source === "infrastructure") e.classList.add("infrastructure");
+        e.innerHTML = `<span>${d.line}</span>`
+      }
+    }
+  }
+}
+
+window.customElements.define('d4s-ccp-logterminal', LogTerminal);