[TEAMMATES#11540] Make maintainer logs interface scrollable (TEAMMATE…

…S#11545) * Allow maintainer logs output to scroll * Enlarge scrollable area * Replace css selectors with nested sass selectors
kaixin-hc · Feb 15, 2022 · 288d0ff · 288d0ff
1 parent f88ba0c
commit 288d0ff
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 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
@@ -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
@@ -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 {