github/quartz-manager
1
0
Fork 0
mirror of https://github.com/fabioformosa/quartz-manager.git synced 2025-12-27 20:53:17 +09:00
Code Issues Packages Projects Releases Wiki Activity

#66 made the log panel fixed height

Browse Source
This commit is contained in:
Fabio Formosa
2022-10-22 18:03:05 +02:00
parent 488916bcd7
commit 80cd607d17
3 changed files with 52 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html
View File

@@ -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>

22
quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.scss
View File

@@ -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;
}

10
quartz-manager-frontend/src/app/views/manager/manager.component.html
View File

@@ -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>