github/quartz-manager
1
0
Fork 0
mirror of https://github.com/fabioformosa/quartz-manager.git synced 2026-01-01 07:03:17 +09:00
Code Issues Packages Projects Releases Wiki Activity

#59 fixed animation on logs

Browse Source
This commit is contained in:
Fabio Formosa
2022-09-16 23:39:49 +02:00
parent e0b0378329
commit 5be49a4090
8 changed files with 47 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
quartz-manager-frontend/src/animate.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

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

@@ -1,29 +1,29 @@
<mat-card>
<mat-card >
<mat-card-header>
<mat-card-title><b>JOB LOGS</b></mat-card-title>
<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" fxLayout="row" fxLayout.xs="column">
<div fxFlex="1 1 20%">
<span [ngClass]="{'animated zoomIn firstLog': $first}"> [{{log.time|date:'medium'}}]</span>
</div>
<div fxFlex="1 1 10%">
<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="1 1 20%">
<span [ngClass]="{'animated zoomIn firstLog': $first}">
{{log.threadName}}
</span>
</div>
<div fxFlex="1 1 50%">
<span [ngClass]="{'animated zoomIn firstLog': $first}"> {{log.msg}}</span>
</div>
<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>
</div>
</div>
</mat-card-content>
</mat-card>
</mat-card>

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

@@ -7,4 +7,8 @@
.yellow{
color: gold;
}
}
#logs{
font-size: 0.9em;
}

4
quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.ts
View File

@@ -10,7 +10,7 @@ import { Observable } from 'rxjs';
})
export class LogsPanelComponent implements OnInit {
MAX_LOGS : number = 20;
MAX_LOGS : number = 30;
logs : Array<any> = new Array();
@@ -37,7 +37,7 @@ export class LogsPanelComponent implements OnInit {
_showNewLog = (logRecord) => {
if(this.logs.length > this.MAX_LOGS)
this.logs.pop();
this.logs.unshift({
time : logRecord.date,
type : logRecord.type,

4
quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.html
View File

@@ -16,9 +16,9 @@
{{percentageStr}}
</div>
<div id="counterBox" fxLayout="row" fxLayoutAlign="center" ng-show="progress.timesTriggered">
<div id="counterBox" fxLayout="row" fxLayoutAlign="center" *ngIf="progress.timesTriggered">
<span id="timesTriggeredCounter" class="animated pulse">{{progress.timesTriggered}}</span>
<span id="totCounter" ng-show="progress.repeatCount > 0">&nbsp;/&nbsp;{{progress.repeatCount}} </span>
<span id="totCounter" *ngIf="progress.repeatCount > 0">&nbsp;/&nbsp;{{progress.repeatCount}} </span>
</div>
<mat-divider></mat-divider>

4
quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html
View File

@@ -9,11 +9,11 @@
<div>
<mat-form-field
[appearance]="enabledTriggerForm && !simpleTriggerForm.triggerName ? 'standard': 'none'"
[appearance]="enabledTriggerForm && !trigger ? 'standard': 'none'"
class="full-size-input">
<mat-label>Trigger Name</mat-label>
<input id="triggerName"
[readonly]="!enabledTriggerForm || simpleTriggerForm.triggerName"
[readonly]="!enabledTriggerForm || trigger"
matInput placeholder="name of the trigger (unique)" name="triggerName"
[(ngModel)]="simpleTriggerForm.triggerName">
</mat-form-field>

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

@@ -4,9 +4,9 @@
<qrzmng-scheduler-control></qrzmng-scheduler-control>
</div>
<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center stretch" fxFlex="1 1 auto">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center stretch" fxFlex="1 1 auto">
<div fxFlex="0 0 300px">
<div fxFlex="0 0 250px">
<div fxLayout="row" fxLayoutAlign="stretch" fxFill>
<qrzmng-trigger-list
(onNewTriggerClicked)="onNewTriggerRequested()"
@@ -16,7 +16,7 @@
</div>
</div>
<div fxFlex="1 1 400px" >
<div fxFlex="1 1 350px" >
<div fxLayout="column">
<qrzmng-simple-trigger-config
[triggerKey]="selectedTriggerKey"
@@ -26,10 +26,9 @@
</div>
<div fxFlex="1 1 auto" style="margin-left: 20px">
<div fxLayout="column">
<div fxLayout="column" fxLayoutGap="8px">
<div fxFlex="1 1 100%"><progress-panel></progress-panel></div>
<br/>
<div fxFlex="1 1 100%"><logs-panel></logs-panel></div>
<div fxFlex="1 1 100%" fxFill><logs-panel></logs-panel></div>
</div>
</div>

1
quartz-manager-frontend/src/styles.css
View File

@@ -1,5 +1,6 @@
/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import "animate.css";
html {
display: flex;