From 288d0ffb03796e495cf7f76a6d4695131ea7b7e4 Mon Sep 17 00:00:00 2001
From: Samuel Fang <samuelfangjw@gmail.com>
Date: Tue, 15 Feb 2022 23:58:22 +0800
Subject: [PATCH] [#11540] Make maintainer logs interface scrollable (#11545)

* Allow maintainer logs output to scroll

* Enlarge scrollable area

* Replace css selectors with nested sass selectors
---
 .../logs-table/logs-table.component.html      | 16 +++++++-----
 .../logs-table/logs-table.component.scss      | 26 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/src/web/app/components/logs-table/logs-table.component.html b/src/web/app/components/logs-table/logs-table.component.html
index 92a9aa05655..a130d4055b1 100644
--- a/src/web/app/components/logs-table/logs-table.component.html
+++ b/src/web/app/components/logs-table/logs-table.component.html
@@ -12,17 +12,19 @@
       <tbody>
         <ng-container *ngFor="let log of logs">
           <tr (click)="expandDetails(log)" [ngClass]="getClassForSeverity(log.logEntry.severity)">
-            <td style="font-family: monospace;">{{ log.timestampForDisplay }}</td>
-            <td>{{ log.logEntry.severity }}</td>
-            <td>
+            <td class="width-20" style="font-family: monospace;">{{ log.timestampForDisplay }}</td>
+            <td class="width-10">{{ log.logEntry.severity }}</td>
+            <td class="width-10">
               <span class="clickable" ngbTooltip="Click to add to filter" (click)="addTraceToFilter(log.logEntry.trace)">{{ log.traceIdForDisplay }}</span>
             </td>
-            <td class="ellipsis">
-              <tm-request-log-line *ngIf="log.logEntry.details && log.logEntry.details.event === LogEvent.REQUEST_LOG" [log]="log.logEntry"
+            <td class="width-60">
+              <div class="ellipsis">
+                <tm-request-log-line *ngIf="log.logEntry.details && log.logEntry.details.event === LogEvent.REQUEST_LOG" [log]="log.logEntry"
                   (addActionClassEvent)="addActionClassToFilter($event)"></tm-request-log-line>
-              <tm-exception-log-line *ngIf="log.logEntry.details && log.logEntry.details.event === LogEvent.EXCEPTION_LOG" [log]="log.logEntry"
+                <tm-exception-log-line *ngIf="log.logEntry.details && log.logEntry.details.event === LogEvent.EXCEPTION_LOG" [log]="log.logEntry"
                   (addExceptionClassEvent)="addExceptionClassToFilter($event)"></tm-exception-log-line>
-              <tm-generic-log-line *ngIf="!log.logEntry.details || log.logEntry.details.event !== LogEvent.REQUEST_LOG && log.logEntry.details.event !== LogEvent.EXCEPTION_LOG" [log]="log.logEntry"></tm-generic-log-line>
+                <tm-generic-log-line *ngIf="!log.logEntry.details || log.logEntry.details.event !== LogEvent.REQUEST_LOG && log.logEntry.details.event !== LogEvent.EXCEPTION_LOG" [log]="log.logEntry"></tm-generic-log-line>
+              </div>
             </td>
           </tr>
           <tr *ngIf="log.isDetailsExpanded">
diff --git a/src/web/app/components/logs-table/logs-table.component.scss b/src/web/app/components/logs-table/logs-table.component.scss
index e561afb03cd..4a793676273 100644
--- a/src/web/app/components/logs-table/logs-table.component.scss
+++ b/src/web/app/components/logs-table/logs-table.component.scss
@@ -16,9 +16,33 @@
 }
 
 .logs-table {
-  table-layout: fixed;
+  display: flex;
+  flex-flow: column;
   width: 100%;
   word-break: break-all;
+  max-height: 90vh;
+
+  thead {
+    flex: 0 0 auto;
+    display: table;
+    table-layout: fixed;
+  }
+
+  tbody {
+    flex: 1 1 auto;
+    display: block;
+    overflow-y: scroll;
+
+    tr {
+      width: 100%;
+      display: table;
+      table-layout: fixed;
+
+      &:first-child td {
+        border-top: 0;
+      }
+    }
+  }
 }
 
 .wrap {