Skip to content

Commit adb4864

Browse files
midhunadarvinmidhunadarvin
committed
fix: style regression issues
- add Roboto font face as dependency - fix font size regression issue in select inputs - fix scroll regression issue - fix triggerName not disabled during reschedule
1 parent c6f10e0 commit adb4864

17 files changed

+231
-114
lines changed

‎quartz-manager-frontend/angular.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@
2626
"src/favicon.ico"
2727
],
2828
"styles": [
29-
"src/styles.css"
29+
"src/styles.css",
30+
"node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
3031
],
3132
"scripts": []
3233
},

‎quartz-manager-frontend/package-lock.json

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎quartz-manager-frontend/package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"hammerjs": "2.0.8",
3636
"moment": "^2.29.1",
3737
"net": "^1.0.2",
38+
"roboto-fontface": "^0.10.0",
3839
"rxjs": "6.5.5",
3940
"sockjs-client": "^1.1.1",
4041
"stompjs": "^2.3.3",
@@ -87,4 +88,4 @@
8788
"<rootDir>/jest.setup.ts"
8889
]
8990
}
90-
}
91+
}

‎quartz-manager-frontend/src/app/app.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxFill>
22
<app-header fxFlex="0 0 auto"></app-header>
3-
<div class="content" fxFlex="100" fxFill>
3+
<div class="content flex h-100">
44
<router-outlet></router-outlet>
55
</div>
66
<app-footer fxFlex="0 0 auto"></app-footer>

‎quartz-manager-frontend/src/app/app.component.scss

+1
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,5 @@
77

88
.content {
99
padding: 20px;
10+
max-height: calc(100vh - 169px);
1011
}

‎quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html

+56-30
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,61 @@
1-
<mat-card fxFlex="1 1 auto">
2-
<mat-card-header fxLayout="row" fxLayoutAlign="space-between none" style="padding-right: 1em;">
3-
<mat-card-subtitle><b>JOB LOGS</b></mat-card-subtitle>
4-
</mat-card-header>
5-
<mat-card-content style="position: relative; height: calc(100% - 3em);">
6-
<div *ngIf="!logs || logs.length == 0" fxLayout="row" fxFlexAlign="center stretch" style="text-align: center">
7-
<div fxFill style="height: 100%;">
8-
<img src="assets/image/logs.svg" alt="no logs" width="320" style="margin-top: 6em;" />
9-
</div>
1+
<mat-card class="flex flex-1 max-h-100">
2+
<mat-card-header class="pb-16">
3+
<mat-card-subtitle ><b>JOB LOGS</b></mat-card-subtitle>
4+
</mat-card-header>
5+
<mat-card-content class="flex flex-1 overflow-y-auto">
6+
<div class="flex-1">
7+
<div *ngIf="!logs || logs.length == 0" fxFill class="h-100" style="text-align: center;">
8+
<img
9+
src="assets/image/logs.svg"
10+
alt="no logs"
11+
width="320"
12+
style="margin-top: 6em" />
1013
</div>
11-
<div id="logs" style="overflow-y: auto; overflow: auto;">
14+
15+
<div id="logs" fxFill style="height: 100%">
1216
<div
13-
*ngFor = "let log of logs; let first = first" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start" fxLayoutGap="10px">
14-
<div style="flex:1; max-width: 300px" >
15-
<span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> [{{log.time|date:'medium'}}]</span>
16-
</div>
17-
<div style="flex:1; max-width: 16px">
18-
<span [ngClass]="{'animated zoomIn firstLog': first}">
19-
<i class = "fas" [ngClass]="{'fa-check-circle green': log.type == 'INFO',
20-
'fa-exclamation-triangle yellow': log.type == 'WARN',
21-
'fa-times-circle red': log.type == 'ERROR'}"></i>
22-
</span>
23-
</div>
24-
<div style="flex:1; max-width: 250px">
25-
<span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}">
26-
{{log.threadName}}
27-
</span>
28-
</div>
29-
<div style="flex:1">
30-
<span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> {{log.msg}}</span>
31-
</div>
17+
*ngFor="let log of logs; let first = first"
18+
fxLayout="row"
19+
fxLayout.xs="column"
20+
fxLayoutAlign="start"
21+
fxLayoutGap="10px">
22+
<div style="flex: 1; max-width: 300px">
23+
<span
24+
[ngClass]="{
25+
'animate__animated animate__zoomIn zoomIn firstLog': first
26+
}">
27+
[{{ log.time | date : 'medium' }}]</span
28+
>
29+
</div>
30+
<div style="flex: 1; max-width: 16px">
31+
<span [ngClass]="{ 'animated zoomIn firstLog': first }">
32+
<i
33+
class="fas"
34+
[ngClass]="{
35+
'fa-check-circle green': log.type == 'INFO',
36+
'fa-exclamation-triangle yellow': log.type == 'WARN',
37+
'fa-times-circle red': log.type == 'ERROR'
38+
}"></i>
39+
</span>
40+
</div>
41+
<div style="flex: 1; max-width: 250px">
42+
<span
43+
[ngClass]="{
44+
'animate__animated animate__zoomIn zoomIn firstLog': first
45+
}">
46+
{{ log.threadName }}
47+
</span>
48+
</div>
49+
<div style="flex: 1">
50+
<span
51+
[ngClass]="{
52+
'animate__animated animate__zoomIn zoomIn firstLog': first
53+
}">
54+
{{ log.msg }}</span
55+
>
56+
</div>
3257
</div>
3358
</div>
34-
</mat-card-content>
59+
</div>
60+
</mat-card-content>
3561
</mat-card>

‎quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.scss

+6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
:host {
2+
flex: 1;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
17
.red{
28
color: red;
39
}

‎quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@
1313
<mat-card-subtitle style="margin: auto;"><b>SCHEDULER</b></mat-card-subtitle>
1414
</div>
1515
<mat-divider [vertical]="true"></mat-divider>
16-
<div fxLayout="column">
16+
<div fxLayout="column" class="justify-space-between">
1717
<div><label>Name</label></div>
18-
<div><span id="scheduler-name">{{scheduler?.name}}</span></div>
18+
<div><span id="scheduler-name" class="font-larger">{{scheduler?.name}}</span></div>
1919
</div>
20-
<div fxLayout="column">
20+
<div fxLayout="column" class="justify-space-between">
2121
<div><label>Instance ID</label></div>
22-
<div><span id="scheduler-instance">{{scheduler?.instanceId}}</span></div>
22+
<div><span id="scheduler-instance" class="font-large">{{scheduler?.instanceId}}</span></div>
2323
</div>
2424
</div>
2525
</mat-card-content>

‎quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ label{
1111
font-size: smaller;
1212
}
1313

14-
#scheduler-name{
14+
#scheduler-name, #scheduler-instance {
1515
text-transform: capitalize;
16-
font-size: larger;
1716
}

‎quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html

+3-5
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
>
3636
<mat-label>Job Class</mat-label>
3737
<mat-select id="jobClass" name="jobClass" formControlName="jobClass">
38-
<mat-option *ngFor="let job of jobs" [value]="job" style="font-size: 0.8em">
38+
<mat-option *ngFor="let job of jobs" [value]="job">
3939
{{job}}
4040
</mat-option>
4141
</mat-select>
@@ -50,8 +50,7 @@
5050
class="full-size-input"
5151
>
5252
<mat-label>Misfire Instruction</mat-label>
53-
<mat-select id="misfireInstruction" name="misfireInstruction" formControlName="misfireInstruction"
54-
style="font-size: 0.8em">
53+
<mat-select id="misfireInstruction" name="misfireInstruction" formControlName="misfireInstruction">
5554
<mat-option value="MISFIRE_INSTRUCTION_FIRE_NOW">FIRE NOW</mat-option>
5655
<mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT">RESCHEDULE NOW WITH
5756
EXISTING REPEAT COUNT
@@ -162,8 +161,7 @@
162161
</div>
163162
<div fxFlex="1 1 auto" style="text-align: center" *ngIf="!simpleTriggerReactiveForm.enabled">
164163
<button mat-raised-button type="button"
165-
166-
(click)="simpleTriggerReactiveForm.enable()">
164+
(click)="simpleTriggerReactiveForm.enable();simpleTriggerReactiveForm.controls['triggerName'].disable();">
167165
Reschedule
168166
</button>
169167
</div>

‎quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts

+32-28
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,43 @@ export class SimpleTriggerConfigComponent implements OnInit {
5757
this.fetchJobs();
5858
}
5959

60-
private fetchJobs() {
61-
this.jobService.fetchJobs().subscribe(jobs => this.jobs = jobs);
60+
onSubmitTriggerConfig = () => {
61+
console.log(this.existsATriggerInProgress());
62+
const schedulerServiceCall = this.existsATriggerInProgress() ?
63+
this.schedulerService.updateSimpleTriggerConfig : this.schedulerService.saveSimpleTriggerConfig;
64+
65+
const simpleTriggerCommand = this._fromReactiveFormToCommand();
66+
schedulerServiceCall(simpleTriggerCommand)
67+
.subscribe((retTrigger: SimpleTrigger) => {
68+
console.log(retTrigger);
69+
this.trigger = retTrigger;
70+
71+
this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(retTrigger));
72+
73+
this.fetchedTriggers = true;
74+
this.triggerInProgress = this.trigger.mayFireAgain;
75+
76+
if (schedulerServiceCall === this.schedulerService.saveSimpleTriggerConfig) {
77+
this.onNewTrigger.emit(retTrigger);
78+
}
79+
80+
this.closeTriggerForm();
81+
}, error => {
82+
console.error(error);
83+
this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(this.trigger));
84+
});
6285
}
6386

6487
openTriggerForm() {
6588
this.simpleTriggerReactiveForm.enable();
6689
}
6790

91+
private fetchJobs() {
92+
this.jobService.fetchJobs().subscribe(jobs => this.jobs = jobs);
93+
}
94+
95+
96+
6897
private closeTriggerForm() {
6998
this.simpleTriggerReactiveForm.disable();
7099
}
@@ -97,31 +126,6 @@ export class SimpleTriggerConfigComponent implements OnInit {
97126
this.closeTriggerForm();
98127
};
99128

100-
onSubmitTriggerConfig = () => {
101-
const schedulerServiceCall = this.existsATriggerInProgress() ?
102-
this.schedulerService.updateSimpleTriggerConfig : this.schedulerService.saveSimpleTriggerConfig;
103-
104-
const simpleTriggerCommand = this._fromReactiveFormToCommand();
105-
schedulerServiceCall(simpleTriggerCommand)
106-
.subscribe((retTrigger: SimpleTrigger) => {
107-
this.trigger = retTrigger;
108-
109-
this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(retTrigger));
110-
111-
this.fetchedTriggers = true;
112-
this.triggerInProgress = this.trigger.mayFireAgain;
113-
114-
if (schedulerServiceCall === this.schedulerService.saveSimpleTriggerConfig) {
115-
this.onNewTrigger.emit(retTrigger);
116-
}
117-
118-
this.closeTriggerForm();
119-
}, error => {
120-
this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(this.trigger));
121-
});
122-
123-
}
124-
125129
private _triggerPeriodValidator(control: AbstractControl): ValidationErrors | null {
126130
const startDate = control.get('startDate');
127131
const endDate = control.get('endDate');
@@ -160,7 +164,7 @@ export class SimpleTriggerConfigComponent implements OnInit {
160164
};
161165

162166
private _fromReactiveFormToCommand = (): SimpleTriggerCommand => {
163-
const reactiveFormValue = this.simpleTriggerReactiveForm.value;
167+
const reactiveFormValue = this.simpleTriggerReactiveForm.getRawValue();
164168
const simpleTriggerCommand = new SimpleTriggerCommand();
165169
simpleTriggerCommand.triggerName = reactiveFormValue.triggerName;
166170
simpleTriggerCommand.jobClass = reactiveFormValue.jobClass;

‎quartz-manager-frontend/src/app/components/trigger-list/trigger-list.component.ts

+8-6
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@ import {MatDialog, MatDialogRef} from '@angular/material/dialog';
66

77
@Component({
88
template: `
9-
<h3 mat-dialog-title>Coming Soon</h3>
10-
<div mat-dialog-content>
11-
<p>This feature is in roadmap and it will come with the next releases</p>
12-
</div>
13-
<div mat-dialog-actions>
14-
<button mat-button (click)="closeDialog()" style="padding: 0.5em;width: 5em;">Ok</button>
9+
<div style="padding:16px">
10+
<h3 mat-dialog-title>Coming Soon</h3>
11+
<div mat-dialog-content>
12+
<p>This feature is in roadmap and it will come with the next releases</p>
13+
</div>
14+
<div mat-dialog-actions>
15+
<button mat-button (click)="closeDialog()" style="padding: 0.5em;width: 5em;">Ok</button>
16+
</div>
1517
</div>`,
1618
})
1719
// tslint:disable-next-line:component-class-suffix

‎quartz-manager-frontend/src/app/views/login/login.component.scss

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
:host {
2+
flex: 1;
3+
}
4+
15
.content {
26
width: 100%;
37
}

‎quartz-manager-frontend/src/app/views/manager/manager.component.html

+21-21
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
1-
<div id="managerViewContainer" fxLayout="column" fxLayoutAlign="left stretch" fxLayoutGap="10px" fxFill>
2-
3-
<div id="schedulerBarContainer" fxLayout="column" fxLayoutAlign="left stretch">
1+
<div id="managerViewContainer" class="flex flex-column flex-1 gap-6 h-100">
2+
<div id="schedulerBarContainer">
43
<qrzmng-scheduler-control></qrzmng-scheduler-control>
54
</div>
65

7-
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center stretch" fxFlex="1 1 auto">
8-
9-
<div fxFlex="0 0 250px">
6+
<div id="manager-content-container" class="flex flex-row flex-1 gap-6">
7+
<div class="flex-1" style="max-width: 250px">
108
<div fxLayout="row" fxLayoutAlign="stretch" fxFill>
119
<qrzmng-trigger-list
12-
(onNewTriggerClicked)="onNewTriggerRequested()"
13-
[openedNewTriggerForm]="newTriggerFormOpened"
14-
(onSelectedTrigger)="setSelectedTrigger($event)"
15-
fxFill></qrzmng-trigger-list>
10+
(onNewTriggerClicked)="onNewTriggerRequested()"
11+
[openedNewTriggerForm]="newTriggerFormOpened"
12+
(onSelectedTrigger)="setSelectedTrigger($event)"
13+
fxFill></qrzmng-trigger-list>
1614
</div>
1715
</div>
1816

19-
<div fxFlex="1 1 350px">
20-
<div fxLayout="row" fxFill>
17+
<div class="flex-1" style="max-width: 350px">
18+
<div fxLayout="row" fxFill>
2119
<div fxLayout="column" fxFill>
22-
<qrzmng-simple-trigger-config fxFill
20+
<qrzmng-simple-trigger-config
21+
fxFill
2322
[triggerKey]="selectedTriggerKey"
2423
(onNewTrigger)="onNewTriggerCreated($event)">
2524
</qrzmng-simple-trigger-config>
2625
</div>
27-
</div>
26+
</div>
2827
</div>
2928

30-
<div fxFlex="1 1 auto" style="margin-left: 20px;">
31-
<div fxFlex="1 1 auto" fxLayout="column" fxLayoutAlign="start stretch" fxLayoutGap="6px">
32-
<progress-panel></progress-panel>
33-
<logs-panel fxFlex="1 1 auto" fxFill></logs-panel>
29+
<div class="flex-1">
30+
<div class="h-100 min-h-100 flex flex-column gap-6">
31+
<div class="flex flex-column" >
32+
<progress-panel class="flex-1"></progress-panel>
33+
</div>
34+
<div class="flex flex-column flex-1" style="max-height: calc(100% - 136px); min-height: calc(100% - 210px);">
35+
<logs-panel class="flex flex-1 h-100 max-h-100"></logs-panel>
3436
</div>
37+
</div>
3538
</div>
36-
3739
</div>
3840
</div>
39-
40-

0 commit comments

Comments
 (0)