From adb4864c85e6e98f5c396fde2f18f2d9f7eb540d Mon Sep 17 00:00:00 2001 From: Midhun A Darvin Date: Fri, 9 Feb 2024 20:23:19 +0530 Subject: [PATCH] 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 --- quartz-manager-frontend/angular.json | 3 +- quartz-manager-frontend/package-lock.json | 6 ++ quartz-manager-frontend/package.json | 3 +- .../src/app/app.component.html | 2 +- .../src/app/app.component.scss | 1 + .../logs-panel/logs-panel.component.html | 86 ++++++++++++------- .../logs-panel/logs-panel.component.scss | 6 ++ .../scheduler-control.component.html | 8 +- .../scheduler-control.component.scss | 3 +- .../simple-trigger-config.component.html | 8 +- .../simple-trigger-config.component.ts | 60 +++++++------ .../trigger-list/trigger-list.component.ts | 14 +-- .../src/app/views/login/login.component.scss | 4 + .../app/views/manager/manager.component.html | 42 ++++----- .../app/views/manager/manager.component.scss | 9 ++ .../app/views/manager/manager.component.ts | 23 ++--- quartz-manager-frontend/src/styles.css | 67 +++++++++++++++ 17 files changed, 231 insertions(+), 114 deletions(-) diff --git a/quartz-manager-frontend/angular.json b/quartz-manager-frontend/angular.json index 86c6522..44a8232 100644 --- a/quartz-manager-frontend/angular.json +++ b/quartz-manager-frontend/angular.json @@ -26,7 +26,8 @@ "src/favicon.ico" ], "styles": [ - "src/styles.css" + "src/styles.css", + "node_modules/roboto-fontface/css/roboto/roboto-fontface.css" ], "scripts": [] }, diff --git a/quartz-manager-frontend/package-lock.json b/quartz-manager-frontend/package-lock.json index 87388ed..17a2d3c 100644 --- a/quartz-manager-frontend/package-lock.json +++ b/quartz-manager-frontend/package-lock.json @@ -32,6 +32,7 @@ "hammerjs": "2.0.8", "moment": "^2.29.1", "net": "^1.0.2", + "roboto-fontface": "^0.10.0", "rxjs": "6.5.5", "sockjs-client": "^1.1.1", "stompjs": "^2.3.3", @@ -18246,6 +18247,11 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/roboto-fontface": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz", + "integrity": "sha512-OlwfYEgA2RdboZohpldlvJ1xngOins5d7ejqnIBWr9KaMxsnBqotpptRXTyfNRLnFpqzX6sTDt+X+a+6udnU8g==" + }, "node_modules/run-async": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", diff --git a/quartz-manager-frontend/package.json b/quartz-manager-frontend/package.json index 5847386..bfe08ab 100644 --- a/quartz-manager-frontend/package.json +++ b/quartz-manager-frontend/package.json @@ -35,6 +35,7 @@ "hammerjs": "2.0.8", "moment": "^2.29.1", "net": "^1.0.2", + "roboto-fontface": "^0.10.0", "rxjs": "6.5.5", "sockjs-client": "^1.1.1", "stompjs": "^2.3.3", @@ -87,4 +88,4 @@ "/jest.setup.ts" ] } -} \ No newline at end of file +} diff --git a/quartz-manager-frontend/src/app/app.component.html b/quartz-manager-frontend/src/app/app.component.html index 91994a2..d263f7e 100644 --- a/quartz-manager-frontend/src/app/app.component.html +++ b/quartz-manager-frontend/src/app/app.component.html @@ -1,6 +1,6 @@
-
+
diff --git a/quartz-manager-frontend/src/app/app.component.scss b/quartz-manager-frontend/src/app/app.component.scss index 6e1eb96..63672be 100644 --- a/quartz-manager-frontend/src/app/app.component.scss +++ b/quartz-manager-frontend/src/app/app.component.scss @@ -7,4 +7,5 @@ .content { padding: 20px; + max-height: calc(100vh - 169px); } diff --git a/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html b/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html index fbe9cde..d8ac771 100644 --- a/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html +++ b/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.html @@ -1,35 +1,61 @@ - - - JOB LOGS - - -
-
- no logs -
+ + + JOB LOGS + + +
+
+ no logs
-
+ +
-
- [{{log.time|date:'medium'}}] -
-
- - - -
-
- - {{log.threadName}} - -
-
- {{log.msg}} -
+ *ngFor="let log of logs; let first = first" + fxLayout="row" + fxLayout.xs="column" + fxLayoutAlign="start" + fxLayoutGap="10px"> +
+ + [{{ log.time | date : 'medium' }}] +
+
+ + + +
+
+ + {{ log.threadName }} + +
+
+ + {{ log.msg }} +
- +
+ diff --git a/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.scss b/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.scss index 9529fd0..b4b99d3 100644 --- a/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.scss +++ b/quartz-manager-frontend/src/app/components/logs-panel/logs-panel.component.scss @@ -1,3 +1,9 @@ +:host { + flex: 1; + display: flex; + flex-direction: column; +} + .red{ color: red; } diff --git a/quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.html b/quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.html index e051b4b..fdc9fe4 100644 --- a/quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.html +++ b/quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.html @@ -13,13 +13,13 @@ SCHEDULER
-
+
-
{{scheduler?.name}}
+
{{scheduler?.name}}
-
+
-
{{scheduler?.instanceId}}
+
{{scheduler?.instanceId}}
diff --git a/quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.scss b/quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.scss index 09a8282..31ef6aa 100644 --- a/quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.scss +++ b/quartz-manager-frontend/src/app/components/scheduler-control/scheduler-control.component.scss @@ -11,7 +11,6 @@ label{ font-size: smaller; } -#scheduler-name{ +#scheduler-name, #scheduler-instance { text-transform: capitalize; - font-size: larger; } diff --git a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html index cdab922..1854041 100644 --- a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html +++ b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.html @@ -35,7 +35,7 @@ > Job Class - + {{job}} @@ -50,8 +50,7 @@ class="full-size-input" > Misfire Instruction - + FIRE NOW RESCHEDULE NOW WITH EXISTING REPEAT COUNT @@ -162,8 +161,7 @@
diff --git a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts index 905684f..65a20a5 100644 --- a/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts +++ b/quartz-manager-frontend/src/app/components/simple-trigger-config/simple-trigger-config.component.ts @@ -57,14 +57,43 @@ export class SimpleTriggerConfigComponent implements OnInit { this.fetchJobs(); } - private fetchJobs() { - this.jobService.fetchJobs().subscribe(jobs => this.jobs = jobs); + onSubmitTriggerConfig = () => { + console.log(this.existsATriggerInProgress()); + const schedulerServiceCall = this.existsATriggerInProgress() ? + this.schedulerService.updateSimpleTriggerConfig : this.schedulerService.saveSimpleTriggerConfig; + + const simpleTriggerCommand = this._fromReactiveFormToCommand(); + schedulerServiceCall(simpleTriggerCommand) + .subscribe((retTrigger: SimpleTrigger) => { + console.log(retTrigger); + this.trigger = retTrigger; + + this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(retTrigger)); + + this.fetchedTriggers = true; + this.triggerInProgress = this.trigger.mayFireAgain; + + if (schedulerServiceCall === this.schedulerService.saveSimpleTriggerConfig) { + this.onNewTrigger.emit(retTrigger); + } + + this.closeTriggerForm(); + }, error => { + console.error(error); + this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(this.trigger)); + }); } openTriggerForm() { this.simpleTriggerReactiveForm.enable(); } + private fetchJobs() { + this.jobService.fetchJobs().subscribe(jobs => this.jobs = jobs); + } + + + private closeTriggerForm() { this.simpleTriggerReactiveForm.disable(); } @@ -97,31 +126,6 @@ export class SimpleTriggerConfigComponent implements OnInit { this.closeTriggerForm(); }; - onSubmitTriggerConfig = () => { - const schedulerServiceCall = this.existsATriggerInProgress() ? - this.schedulerService.updateSimpleTriggerConfig : this.schedulerService.saveSimpleTriggerConfig; - - const simpleTriggerCommand = this._fromReactiveFormToCommand(); - schedulerServiceCall(simpleTriggerCommand) - .subscribe((retTrigger: SimpleTrigger) => { - this.trigger = retTrigger; - - this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(retTrigger)); - - this.fetchedTriggers = true; - this.triggerInProgress = this.trigger.mayFireAgain; - - if (schedulerServiceCall === this.schedulerService.saveSimpleTriggerConfig) { - this.onNewTrigger.emit(retTrigger); - } - - this.closeTriggerForm(); - }, error => { - this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(this.trigger)); - }); - - } - private _triggerPeriodValidator(control: AbstractControl): ValidationErrors | null { const startDate = control.get('startDate'); const endDate = control.get('endDate'); @@ -160,7 +164,7 @@ export class SimpleTriggerConfigComponent implements OnInit { }; private _fromReactiveFormToCommand = (): SimpleTriggerCommand => { - const reactiveFormValue = this.simpleTriggerReactiveForm.value; + const reactiveFormValue = this.simpleTriggerReactiveForm.getRawValue(); const simpleTriggerCommand = new SimpleTriggerCommand(); simpleTriggerCommand.triggerName = reactiveFormValue.triggerName; simpleTriggerCommand.jobClass = reactiveFormValue.jobClass; diff --git a/quartz-manager-frontend/src/app/components/trigger-list/trigger-list.component.ts b/quartz-manager-frontend/src/app/components/trigger-list/trigger-list.component.ts index 9e98f91..64b8285 100644 --- a/quartz-manager-frontend/src/app/components/trigger-list/trigger-list.component.ts +++ b/quartz-manager-frontend/src/app/components/trigger-list/trigger-list.component.ts @@ -6,12 +6,14 @@ import {MatDialog, MatDialogRef} from '@angular/material/dialog'; @Component({ template: ` -

Coming Soon

-
-

This feature is in roadmap and it will come with the next releases

-
-
- +
+

Coming Soon

+
+

This feature is in roadmap and it will come with the next releases

+
+
+ +
`, }) // tslint:disable-next-line:component-class-suffix diff --git a/quartz-manager-frontend/src/app/views/login/login.component.scss b/quartz-manager-frontend/src/app/views/login/login.component.scss index 653c9a1..3e135f8 100644 --- a/quartz-manager-frontend/src/app/views/login/login.component.scss +++ b/quartz-manager-frontend/src/app/views/login/login.component.scss @@ -1,3 +1,7 @@ +:host { + flex: 1; +} + .content { width: 100%; } diff --git a/quartz-manager-frontend/src/app/views/manager/manager.component.html b/quartz-manager-frontend/src/app/views/manager/manager.component.html index 05b11c9..6289cf3 100644 --- a/quartz-manager-frontend/src/app/views/manager/manager.component.html +++ b/quartz-manager-frontend/src/app/views/manager/manager.component.html @@ -1,40 +1,40 @@ -
- -
+
+
-
- -
+
+
+ (onNewTriggerClicked)="onNewTriggerRequested()" + [openedNewTriggerForm]="newTriggerFormOpened" + (onSelectedTrigger)="setSelectedTrigger($event)" + fxFill>
-
-
+
+
-
-
+
-
-
- - +
+
+
+
+
+ +
+
-
- - diff --git a/quartz-manager-frontend/src/app/views/manager/manager.component.scss b/quartz-manager-frontend/src/app/views/manager/manager.component.scss index 8b13789..a273cab 100644 --- a/quartz-manager-frontend/src/app/views/manager/manager.component.scss +++ b/quartz-manager-frontend/src/app/views/manager/manager.component.scss @@ -1 +1,10 @@ +:host { + display: flex; + flex-direction: column; + flex: 1; +} +#manager-content-container { + height: calc(100% - 80px); + max-height: calc(100% - 80px); +} diff --git a/quartz-manager-frontend/src/app/views/manager/manager.component.ts b/quartz-manager-frontend/src/app/views/manager/manager.component.ts index 01ce9f1..582f918 100644 --- a/quartz-manager-frontend/src/app/views/manager/manager.component.ts +++ b/quartz-manager-frontend/src/app/views/manager/manager.component.ts @@ -1,12 +1,9 @@ -import {Component, OnInit, ViewChild} from '@angular/core'; -import { - ConfigService, - UserService -} from '../../services'; -import {SimpleTrigger} from '../../model/simple-trigger.model'; -import {TriggerKey} from '../../model/triggerKey.model'; -import {SimpleTriggerConfigComponent} from '../../components/simple-trigger-config'; -import {TriggerListComponent} from '../../components'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { ConfigService, UserService } from '../../services'; +import { SimpleTrigger } from '../../model/simple-trigger.model'; +import { TriggerKey } from '../../model/triggerKey.model'; +import { SimpleTriggerConfigComponent } from '../../components/simple-trigger-config'; +import { TriggerListComponent } from '../../components'; @Component({ selector: 'manager', @@ -14,7 +11,6 @@ import {TriggerListComponent} from '../../components'; styleUrls: ['./manager.component.scss'] }) export class ManagerComponent implements OnInit { - @ViewChild(SimpleTriggerConfigComponent) private triggerConfigComponent!: SimpleTriggerConfigComponent; @@ -25,11 +21,9 @@ export class ManagerComponent implements OnInit { selectedTriggerKey: TriggerKey; - constructor( - ) { } + constructor() {} - ngOnInit() { - } + ngOnInit() {} onNewTriggerRequested() { this.triggerConfigComponent.openTriggerForm(); @@ -42,5 +36,4 @@ export class ManagerComponent implements OnInit { setSelectedTrigger(triggerKey: TriggerKey) { this.selectedTriggerKey = triggerKey; } - } diff --git a/quartz-manager-frontend/src/styles.css b/quartz-manager-frontend/src/styles.css index ee4c410..7dd48ed 100644 --- a/quartz-manager-frontend/src/styles.css +++ b/quartz-manager-frontend/src/styles.css @@ -12,3 +12,70 @@ body { flex:1; background-color: #f1f1f1; } + +/** + TODO: Remove the below utility classes once tailwind is integrated. +*/ +.font-large { + font-size: large; +} + +.font-larger { + font-size: larger; +} + +.justify-space-between { + justify-content: space-between; +} + +.flex { + display: flex; +} + +.flex-row { + flex-direction: row; +} + +.flex-column { + flex-direction: column; +} + +.flex-1 { + flex: 1; +} + +.h-100 { + height: 100%; +} + +.min-h-100 { + min-height: 100%; +} + +.max-h-100 { + max-height: 100%; +} + +.w-100 { + width: 100%; +} + +.gap-6 { + gap: 6px; +} + +.overflow-hidden { + overflow: hidden; +} + +.overflow-y-auto { + overflow-y: auto; +} + +.pb-16 { + padding-bottom: 16px !important; +} + +.mdc-list-item__primary-text { + font-size: 0.8em !important; +}