From 80cd607d17a96778109dfdb688c4d4f09afd76e4 Mon Sep 17 00:00:00 2001
From: Fabio Formosa <fabio.formosa@gmail.com>
Date: Sat, 22 Oct 2022 18:03:05 +0200
Subject: [PATCH] #66 made the log panel fixed height

---
 .../logs-panel/logs-panel.component.html      | 47 ++++++++++---------
 .../logs-panel/logs-panel.component.scss      | 22 +++++++++
 .../app/views/manager/manager.component.html  | 10 ++--
 3 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html b/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html
index 71e6a56..542589f 100644
--- a/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html
+++ b/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html
@@ -1,29 +1,30 @@
-<mat-card >
-    <mat-card-header>
+<mat-card fxFlex="1 1 auto">
+    <mat-card-header fxLayout="row" fxLayoutAlign="space-between none" style="padding-right: 1em;">
       <mat-card-subtitle><b>JOB LOGS</b></mat-card-subtitle>
     </mat-card-header>
-    <mat-card-content>
-        <div id="logs">
-            <div *ngFor = "let log of logs; let first = first" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start" fxLayoutGap="10px">
-                <div fxFlex="0 1 300px">
-                    <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> [{{log.time|date:'medium'}}]</span>
-                </div>
-                <div fxFlex="1 1 16px">
-                    <span [ngClass]="{'animated zoomIn firstLog': first}">
-                    <i class = "fas" [ngClass]="{'fa-check-circle green': log.type == 'INFO',
-                                                 'fa-exclamation-triangle yellow': log.type == 'WARN',
-                                                 'fa-times-circle red': log.type == 'ERROR'}"></i>
-                    </span>
-                </div>
-                <div fxFlex="0 1 250px">
-                    <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}">
-                    {{log.threadName}}
-                    </span>
-                </div>
-                <div fxFlex="1 1">
-                    <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> {{log.msg}}</span>
-                </div>
+    <mat-card-content style="position: relative; height: calc(100% - 3em);">
+      <div id="logs" style="overflow-y: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto;">
+        <div
+            *ngFor = "let log of logs; let first = first" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start" fxLayoutGap="10px">
+            <div fxFlex="0 1 300px">
+                <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> [{{log.time|date:'medium'}}]</span>
+            </div>
+            <div fxFlex="1 1 16px">
+                <span [ngClass]="{'animated zoomIn firstLog': first}">
+                <i class = "fas" [ngClass]="{'fa-check-circle green': log.type == 'INFO',
+                                             'fa-exclamation-triangle yellow': log.type == 'WARN',
+                                             'fa-times-circle red': log.type == 'ERROR'}"></i>
+                </span>
+            </div>
+            <div fxFlex="0 1 250px">
+                <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}">
+                {{log.threadName}}
+                </span>
+            </div>
+            <div fxFlex="1 1">
+                <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> {{log.msg}}</span>
             </div>
         </div>
+      </div>
     </mat-card-content>
 </mat-card>
diff --git a/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.scss b/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.scss
index 2d77f5c..aa0737a 100644
--- a/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.scss
+++ b/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.scss
@@ -12,3 +12,25 @@
 #logs{
   font-size: 1em;
 }
+
+/* ===== Scrollbar CSS ===== */
+/* Firefox */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: #b8b8b8 #ffffff;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 16px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #ffffff;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #b8b8b8;
+  border-radius: 10px;
+  border: 3px solid #ffffff;
+}
diff --git a/quartz-manager-frontend/src/app/views/manager/manager.component.html b/quartz-manager-frontend/src/app/views/manager/manager.component.html
index ed9164f..f28be07 100644
--- a/quartz-manager-frontend/src/app/views/manager/manager.component.html
+++ b/quartz-manager-frontend/src/app/views/manager/manager.component.html
@@ -25,10 +25,12 @@
       </div>
     </div>
 
-    <div fxFlex="1 1 auto" style="margin-left: 20px">
-      <div fxLayout="column" fxLayoutGap="8px">
-        <div fxFlex="1 1 100%"><progress-panel></progress-panel></div>
-        <div fxFlex="1 1 100%" fxFill><logs-panel></logs-panel></div>
+    <div fxFlex="1 1 auto" style="margin-left: 20px;">
+      <div fxLayout="row" fxLayoutAlign="stretch" fxFill>
+        <div fxFlex="1 1 auto" fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="6px">
+          <progress-panel></progress-panel>
+          <logs-panel fxFlex="1 1 auto" fxFill></logs-panel>
+        </div>
       </div>
     </div>