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

@@ -26,7 +26,8 @@
               "src/favicon.ico"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
             ],
             "scripts": []
           },

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",

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 @@
       "<rootDir>/jest.setup.ts"
     ]
   }
-}
+}

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

@@ -1,6 +1,6 @@
 <div fxLayout="column" fxLayoutAlign="space-between stretch" fxFill>
   <app-header fxFlex="0 0 auto"></app-header>
-  <div class="content" fxFlex="100" fxFill>
+  <div class="content flex h-100">
     <router-outlet></router-outlet>
   </div>
   <app-footer fxFlex="0 0 auto"></app-footer>

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

@@ -7,4 +7,5 @@
 
 .content {
   padding: 20px;
+  max-height: calc(100vh - 169px);
 }

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

@@ -1,35 +1,61 @@
-<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 style="position: relative; height: calc(100% - 3em);">
-      <div *ngIf="!logs || logs.length == 0" fxLayout="row" fxFlexAlign="center stretch" style="text-align: center">
-        <div fxFill style="height: 100%;">
-          <img src="assets/image/logs.svg" alt="no logs" width="320" style="margin-top: 6em;" />
-        </div>
+<mat-card class="flex flex-1 max-h-100">
+  <mat-card-header class="pb-16">
+    <mat-card-subtitle ><b>JOB LOGS</b></mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content class="flex flex-1 overflow-y-auto">
+    <div class="flex-1">
+      <div *ngIf="!logs || logs.length == 0" fxFill class="h-100" style="text-align: center;">
+        <img
+          src="assets/image/logs.svg"
+          alt="no logs"
+          width="320"
+          style="margin-top: 6em" />
       </div>
-      <div id="logs" style="overflow-y: auto; overflow: auto;">
+
+      <div id="logs" fxFill style="height: 100%">
         <div
-            *ngFor = "let log of logs; let first = first" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start" fxLayoutGap="10px">
-            <div style="flex:1; max-width: 300px" >
-                <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> [{{log.time|date:'medium'}}]</span>
-            </div>
-            <div style="flex:1; max-width: 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 style="flex:1; max-width: 250px">
-                <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}">
-                {{log.threadName}}
-                </span>
-            </div>
-            <div style="flex:1">
-                <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> {{log.msg}}</span>
-            </div>
+          *ngFor="let log of logs; let first = first"
+          fxLayout="row"
+          fxLayout.xs="column"
+          fxLayoutAlign="start"
+          fxLayoutGap="10px">
+          <div style="flex: 1; max-width: 300px">
+            <span
+              [ngClass]="{
+                'animate__animated animate__zoomIn zoomIn firstLog': first
+              }">
+              [{{ log.time | date : 'medium' }}]</span
+            >
+          </div>
+          <div style="flex: 1; max-width: 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 style="flex: 1; max-width: 250px">
+            <span
+              [ngClass]="{
+                'animate__animated animate__zoomIn zoomIn firstLog': first
+              }">
+              {{ log.threadName }}
+            </span>
+          </div>
+          <div style="flex: 1">
+            <span
+              [ngClass]="{
+                'animate__animated animate__zoomIn zoomIn firstLog': first
+              }">
+              {{ log.msg }}</span
+            >
+          </div>
         </div>
       </div>
-    </mat-card-content>
+    </div>
+  </mat-card-content>
 </mat-card>

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

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

@@ -13,13 +13,13 @@
         <mat-card-subtitle style="margin: auto;"><b>SCHEDULER</b></mat-card-subtitle>
       </div>
       <mat-divider [vertical]="true"></mat-divider>
-      <div fxLayout="column">
+      <div fxLayout="column" class="justify-space-between">
         <div><label>Name</label></div>
-        <div><span id="scheduler-name">{{scheduler?.name}}</span></div>
+        <div><span id="scheduler-name" class="font-larger">{{scheduler?.name}}</span></div>
       </div>
-      <div fxLayout="column">
+      <div fxLayout="column" class="justify-space-between">
         <div><label>Instance ID</label></div>
-        <div><span id="scheduler-instance">{{scheduler?.instanceId}}</span></div>
+        <div><span id="scheduler-instance" class="font-large">{{scheduler?.instanceId}}</span></div>
       </div>
     </div>
 	</mat-card-content>

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

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

@@ -35,7 +35,7 @@
           >
             <mat-label>Job Class</mat-label>
             <mat-select id="jobClass" name="jobClass" formControlName="jobClass">
-              <mat-option *ngFor="let job of jobs" [value]="job" style="font-size: 0.8em">
+              <mat-option *ngFor="let job of jobs" [value]="job">
                 {{job}}
               </mat-option>
             </mat-select>
@@ -50,8 +50,7 @@
             class="full-size-input"
           >
             <mat-label>Misfire Instruction</mat-label>
-            <mat-select id="misfireInstruction" name="misfireInstruction" formControlName="misfireInstruction"
-                        style="font-size: 0.8em">
+            <mat-select id="misfireInstruction" name="misfireInstruction" formControlName="misfireInstruction">
               <mat-option value="MISFIRE_INSTRUCTION_FIRE_NOW">FIRE NOW</mat-option>
               <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT">RESCHEDULE NOW WITH
                 EXISTING REPEAT COUNT
@@ -162,8 +161,7 @@
           </div>
           <div fxFlex="1 1 auto" style="text-align: center" *ngIf="!simpleTriggerReactiveForm.enabled">
             <button mat-raised-button type="button"
-            
-            (click)="simpleTriggerReactiveForm.enable()">
+            (click)="simpleTriggerReactiveForm.enable();simpleTriggerReactiveForm.controls['triggerName'].disable();">
             Reschedule
             </button>
           </div>

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;

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: `
-    <h3 mat-dialog-title>Coming Soon</h3>
-    <div mat-dialog-content>
-      <p>This feature is in roadmap and it will come with the next releases</p>
-    </div>
-    <div mat-dialog-actions>
-      <button mat-button (click)="closeDialog()" style="padding: 0.5em;width: 5em;">Ok</button>
+    <div style="padding:16px">
+      <h3 mat-dialog-title>Coming Soon</h3>
+      <div mat-dialog-content>
+        <p>This feature is in roadmap and it will come with the next releases</p>
+      </div>
+      <div mat-dialog-actions>
+        <button mat-button (click)="closeDialog()" style="padding: 0.5em;width: 5em;">Ok</button>
+      </div>
     </div>`,
 })
 // tslint:disable-next-line:component-class-suffix

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

@@ -1,3 +1,7 @@
+:host {
+  flex: 1;
+}
+
 .content {
   width: 100%;
 }

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

@@ -1,40 +1,40 @@
-<div id="managerViewContainer" fxLayout="column" fxLayoutAlign="left stretch" fxLayoutGap="10px" fxFill>
-
-  <div id="schedulerBarContainer" fxLayout="column" fxLayoutAlign="left stretch">
+<div id="managerViewContainer" class="flex flex-column flex-1 gap-6 h-100">
+  <div id="schedulerBarContainer">
     <qrzmng-scheduler-control></qrzmng-scheduler-control>
   </div>
 
-  <div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="center stretch" fxFlex="1 1 auto">
-
-    <div fxFlex="0 0 250px">
+  <div id="manager-content-container" class="flex flex-row flex-1 gap-6">
+    <div class="flex-1" style="max-width: 250px">
       <div fxLayout="row" fxLayoutAlign="stretch" fxFill>
         <qrzmng-trigger-list
-            (onNewTriggerClicked)="onNewTriggerRequested()"
-            [openedNewTriggerForm]="newTriggerFormOpened"
-            (onSelectedTrigger)="setSelectedTrigger($event)"
-             fxFill></qrzmng-trigger-list>
+          (onNewTriggerClicked)="onNewTriggerRequested()"
+          [openedNewTriggerForm]="newTriggerFormOpened"
+          (onSelectedTrigger)="setSelectedTrigger($event)"
+          fxFill></qrzmng-trigger-list>
       </div>
     </div>
 
-    <div fxFlex="1 1 350px">
-        <div fxLayout="row" fxFill>
+    <div class="flex-1" style="max-width: 350px">
+      <div fxLayout="row" fxFill>
         <div fxLayout="column" fxFill>
-          <qrzmng-simple-trigger-config fxFill
+          <qrzmng-simple-trigger-config
+            fxFill
             [triggerKey]="selectedTriggerKey"
             (onNewTrigger)="onNewTriggerCreated($event)">
           </qrzmng-simple-trigger-config>
         </div>
-        </div>
+      </div>
     </div>
 
-    <div fxFlex="1 1 auto" style="margin-left: 20px;">
-        <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 class="flex-1">
+      <div class="h-100 min-h-100 flex flex-column gap-6">
+        <div class="flex flex-column" >
+          <progress-panel class="flex-1"></progress-panel>
         </div>
+        <div class="flex flex-column flex-1" style="max-height: calc(100% - 136px); min-height: calc(100% - 210px);">
+          <logs-panel class="flex flex-1 h-100 max-h-100"></logs-panel>
+        </div>
+      </div>
     </div>
-
   </div>
 </div>
-
-

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);
+}

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

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