fix(front): add expand button for job commands that are too big (#321)

Author: forestileao

front/assets/css/app-semaphore-min.css

@@ -1380,7 +1380,26 @@ li.projects-menu-item-special:hover {
     position: sticky;
     top: 0;
     z-index: 1;
+    max-height: 250px;
+    overflow-y: hidden;
 }
+
+.job-log-line-expand {
+  width: 100%;
+  text-align: center;
+  background: white;
+  border-bottom: 1px solid #D3DADE;
+  text-decoration: underline;
+
+  position: sticky;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.job-log-line-expand:hover {
+  background-color: #D3DADE;
+}
+
 .job-log-line:hover {
     background-color: #c7edff;
 }

front/assets/css/app-semaphore.css

@@ -101,21 +101,61 @@ export class JobLogs {
     this.update()
 
     this.on("click", ".job-log-line.command", (e) => {
-      let fold = e.target.closest(".job-log-fold")
+      const fold = e.target.closest(".job-log-fold")
 
       if (FoldToggle.isTogglable(fold)) {
         FoldToggle.toggle(fold)
       }
     })
 
     this.on("click", ".job-log-line-number", (e) => {
-      let line = e.target.closest('.job-log-line');
+      const line = e.target.closest('.job-log-line');
       Highlight.highlightLine(line, event.shiftKey)
 
       e.stopPropagation()
     })
   }
 
+  setupFoldExpandButtons() {
+    document.querySelectorAll('.job-log-line.command').forEach((element) => {
+      const fold = element.closest(".job-log-fold");
+      const expandButton = fold?.querySelector(".job-log-line-expand");
+        
+      if (element.offsetHeight >= 250) {
+        expandButton.style.top = element.offsetHeight.toString() + "px"
+        expandButton?.classList.remove("dn");
+      } else {
+        expandButton?.classList.add("dn");
+      }
+    });
+
+    this.on("click", ".job-log-line-expand", (e) => {
+      const fold = e.target.closest(".job-log-fold");
+      const jobCommand = fold.querySelector('.job-log-line.command')
+      this.toggleExpandCommand(e.target, jobCommand)
+    })
+  }
+
+  toggleExpandCommand(expandButton, jobCommand) {
+    if (jobCommand.style.maxHeight) {
+      this.collapseCommand(expandButton, jobCommand)
+    } else {
+      this.expandCommand(expandButton, jobCommand)
+    }
+  }
+
+  expandCommand(expandButton, jobCommand) {
+    jobCommand.style.maxHeight = "none"
+    expandButton.innerText = "↑ Collapse ↑"
+    expandButton.style.top = jobCommand.offsetHeight.toString() + "px"
+  }
+
+  collapseCommand(expandButton, jobCommand) {
+    jobCommand.style.maxHeight = ""
+    expandButton.innerText = "↓ Expand ↓"
+    expandButton.style.top = jobCommand.offsetHeight.toString() + "px"
+  }
+
   update() {
     _.forIn(this.components, (component) => component.update())
   }
@@ -155,6 +195,7 @@ export class JobLogs {
       if(this.config.isJobFinished === true) {
         this.logRenderDuration(this.startTime, performance.now(), "v2");
         this.scrollToLastOpenFold();
+        this.setupFoldExpandButtons()
       }
     })
   }

front/assets/js/job_logs/logs.js

@@ -22,6 +22,10 @@ export class CommandTemplate {
         <span class="job-log-line-time ${this.statusBackground(command, isJobFinished)}">
           ${this.renderSpinnerIfNotFullyFetched(command)}${this.status(command, isJobFinished)}${this.duration(command, isJobFinished)}
         </span>
+        
+      </div>
+      <div class="job-log-line-expand dn">
+          ↓ Expand ↓
       </div>
 
       <div cmd-lines-container ${this.logLinesVisibility(command, isJobFinished)}>