added screenshots to be linked to the readme

Releasing v5.0.0

.dockerignore

@@ -0,0 +1,2 @@
+# .dockerignore
+quartz-manager-frontend/node_modules

.github/workflows/maven-release.yml

@@ -12,14 +12,14 @@ jobs:
       packages: write
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - name: Set up Java 11 for publishing to Maven Central Repository
-        uses: actions/setup-java@v3
+      - name: Set up Java 21 for publishing to Maven Central Repository
+        uses: actions/setup-java@v4
         with:
-          java-version: '11'
+          java-version: '21'
           distribution: 'temurin'
-          server-id: ossrh
+          server-id: maven-central-release
           server-username: MAVEN_USERNAME
           server-password: MAVEN_PASSWORD
           gpg-private-key: ${{ secrets.OSSRH_GPG_SECRET_KEY }}
@@ -31,14 +31,14 @@ jobs:
       - name: Publish to maven central
         run: mvn deploy --file quartz-manager-parent/pom.xml --batch-mode -P "release-maven-central,build-webjar"
         env:
-          MAVEN_USERNAME: ${{ secrets.OSSRH_USERNAME }}
-          MAVEN_PASSWORD: ${{ secrets.OSSRH_TOKEN }}
+          MAVEN_USERNAME: ${{ secrets.MAVEN_CENTRAL_TOKEN_USERNAME }}
+          MAVEN_PASSWORD: ${{ secrets.MAVEN_CENTRAL_TOKEN_PASSWORD }}
           MAVEN_GPG_PASSPHRASE: ${{ secrets.OSSRH_GPG_SECRET_KEY_PASSWORD }}
 
-      - name: Set up Java 11 for publishing to GitHub Packages
-        uses: actions/setup-java@v3
+      - name: Set up Java 21 for publishing to GitHub Packages
+        uses: actions/setup-java@v4
         with:
-          java-version: '11'
+          java-version: '21'
           distribution: 'temurin'
       - name: Publish to GitHub Packages Apache Maven
         run: mvn deploy --file quartz-manager-parent/pom.xml -P "deploy-github,build-webjar"

.github/workflows/maven.yml

@@ -25,11 +25,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v3
-      - name: Set up JDK 11
-        uses: actions/setup-java@v3
+      - uses: actions/checkout@v4
+      - name: Set up JDK 21
+        uses: actions/setup-java@v4
         with:
-          java-version: '11'
+          java-version: '21'
           distribution: 'temurin'
           cache: maven
       - name: Build and test with Maven

.github/workflows/npm.yml

@@ -25,13 +25,13 @@ jobs:
 
     strategy:
       matrix:
-        node-version:  [16.x]
+        node-version:  [22.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'

.github/workflows/sonar-java.yml

@@ -7,27 +7,28 @@ on:
 #    paths: [ 'quartz-manager-parent/**' ]
   pull_request:
     types: [opened, synchronize, reopened]
-
+  workflow_dispatch:
 jobs:
   build:
     name: Build and analyze
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
-      - name: Set up JDK 11
-        uses: actions/setup-java@v1
+      - name: Set up JDK 21
+        uses: actions/setup-java@v4
         with:
-          java-version: 11
+          java-version: 21
+          distribution: 'zulu' # Alternative distribution options are available.
       - name: Cache SonarCloud packages
-        uses: actions/cache@v1
+        uses: actions/cache@v3
         with:
           path: ~/.sonar/cache
           key: ${{ runner.os }}-sonar
           restore-keys: ${{ runner.os }}-sonar
       - name: Cache Maven packages
-        uses: actions/cache@v1
+        uses: actions/cache@v3
         with:
           path: ~/.m2
           key: ${{ runner.os }}-m2-${{ hashFiles('**/pom.xml') }}

.gitignore

@@ -1 +1,4 @@
 /.project
+.idea
+*.iml
+.DS_Store

CHANGELOG.md

@@ -1,3 +1,29 @@
+## **v4.1.1**
+**NEW FEATURE** support for multiple triggers
+
+## **v4.0.10**
+Migrated to the new maven central repo
+
+## **v4.0.9**
+Fixed a bug which prevented to run the liquibase migration scripts in case of usage of quartz-manager-starter-persistence 
+
+## **v4.0.8**
+Upgraded the frontend to angular v14
+
+## **v4.0.6**
+Minor bug fixes
+
+## **v4.0.5**
+Fixed potential security issues
+
+## **v4.0.4**
+* Conformed the trigger configuration to the Simple Trigger of Quartz
+* **BREAKING CHANGE** Changed accordingly the API and the UI
+* Made Quartz Manager embeddable in projects with existing quartz instance, security layer, swagger ui.
+
+## **v3.1.0**
+* Added a new persistence module to persist the quartz triggers in a postgresql database
+
 ## **v3.0.1** 
 
 Quartz-Manager is now publicly available into the maven central repo into 3 different packages.

Dockerfile

@@ -0,0 +1,34 @@
+FROM maven:3.9.8-eclipse-temurin-21 AS build
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the pom.xml and download dependencies
+COPY quartz-manager-parent/pom.xml ./quartz-manager-parent/
+COPY quartz-manager-parent/lombok.config ./quartz-manager-parent/
+COPY quartz-manager-parent/quartz-manager-common ./quartz-manager-parent/quartz-manager-common/
+COPY quartz-manager-parent/quartz-manager-starter-api ./quartz-manager-parent/quartz-manager-starter-api/
+COPY quartz-manager-parent/quartz-manager-starter-persistence ./quartz-manager-parent/quartz-manager-starter-persistence/
+COPY quartz-manager-parent/quartz-manager-starter-security ./quartz-manager-parent/quartz-manager-starter-security/
+COPY quartz-manager-parent/quartz-manager-starter-ui ./quartz-manager-parent/quartz-manager-starter-ui/
+COPY quartz-manager-parent/quartz-manager-web-showcase ./quartz-manager-parent/quartz-manager-web-showcase/
+COPY quartz-manager-parent/lombok.config ./quartz-manager-parent/
+COPY quartz-manager-frontend ./quartz-manager-frontend/
+WORKDIR /app/quartz-manager-parent
+RUN mvn clean package -DskipTests -P=build-webjar
+
+
+# Stage 2: Create the final image
+FROM openjdk:11-jre-slim
+
+# Set the working directory
+WORKDIR /app
+
+# Copy the JAR file from the build stage
+COPY --from=build /app/quartz-manager-parent/quartz-manager-web-showcase/target/*-SNAPSHOT.jar app.jar
+
+# Expose the application port
+EXPOSE 8080
+
+# Run the application
+ENTRYPOINT ["java", "-jar", "app.jar"]

README.md

@@ -1,310 +1,340 @@
+<div align="center">
+
+# Quartz Manager
+
+**A Spring Boot library and standalone web app that adds REST API and dashboard management to Quartz Scheduler.**
+
 [![Java CI with Maven](https://github.com/fabioformosa/quartz-manager/actions/workflows/maven.yml/badge.svg)](https://github.com/fabioformosa/quartz-manager/actions/workflows/maven.yml)
 [![npm CI](https://github.com/fabioformosa/quartz-manager/actions/workflows/npm.yml/badge.svg)](https://github.com/fabioformosa/quartz-manager/actions/workflows/npm.yml)
-[![Maven Central](https://maven-badges.herokuapp.com/maven-central/it.fabioformosa.quartz-manager/quartz-manager-starter-api/badge.svg)](https://maven-badges.herokuapp.com/maven-central/it.fabioformosa.quartz-manager/quartz-manager-starter-api)  
-[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=coverage)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager) [![Bugs](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=bugs)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager)
+[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=coverage)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager)
+[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=bugs)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager)
+[![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=security_rating)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager)
+[![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=fabioformosa_quartz-manager&metric=sqale_rating)](https://sonarcloud.io/summary/new_code?id=fabioformosa_quartz-manager)
 
+[Choose Your Path](#choose-your-path) • [Features](#features) • [Quick Start](#quick-start) • [REST API](#rest-api) • [Security](#security) • [Persistence](#persistence) • [Roadmap](#roadmap)
 
-[QUARTZ MANAGER](https://github.com/fabioformosa/quartz-manager#quartz-manager)  
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager UI](https://github.com/fabioformosa/quartz-manager#quartz-manager-ui)  
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager API](https://github.com/fabioformosa/quartz-manager#quartz-manager-api)    
-[HOW IT WORKS](https://github.com/fabioformosa/quartz-managerhttps://github.com/fabioformosa/quartz-manager#get-started)  
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager Starter API Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-api-lib)  
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager Starter UI Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-ui-lib)   
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager Starter Security Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-security-lib)  
-    &nbsp;&nbsp;&nbsp;&nbsp;[Quartz Manager Persistence Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-persistence-lib)  
-[EXAMPLES](https://github.com/fabioformosa/quartz-manager#examples)  
-[LIMITATIONS](https://github.com/fabioformosa/quartz-manager#limitations)  
-[ROADMAP](https://github.com/fabioformosa/quartz-manager#roadmap)  
-[REPOSITORY](https://github.com/fabioformosa/quartz-manager#repository)  
-[HOW TO CONTRIBUTE](https://github.com/fabioformosa/quartz-manager#how-to-contribute)  
-[SUPPORT THE PROJECT](https://github.com/fabioformosa/quartz-manager#%EF%B8%8F-support-the-project-%EF%B8%8F)
+</div>
 
-# QUARTZ MANAGER
-In the last decade, the [Quartz Scheduler](http://www.quartz-scheduler.org/) has become the most adopted opensource job scheduling library for Java applications.  
+[Quartz Scheduler](https://www.quartz-scheduler.org/) is powerful, but it does not ship with a REST API or an operations dashboard. Quartz Manager fills that gap for Spring Boot applications and can also run as a standalone scheduler web app.
 
-**Quartz Manager** enriches it with a **REST API** layer and a handy **UI console** to easily control and monitor a Quartz Scheduler.  
+Use it to start and stop a scheduler, create jobs, schedule triggers, manage calendars, inspect executions, and monitor job progress from HTTP endpoints or from a browser UI.
 
-Quartz Manager is a Java library you can import in your Spring-Based Web Application to run scheduled jobs, start&stop them and get the job outcomes. You can do it through HTTP calls to the the Quartz Manager API or in a visual manner through the Quartz Manager UI dashboard.  
+![Quartz Manager dashboard](https://github.com/fabioformosa/quartz-manager/blob/master/docs/assets/quartz-manager-dashboard.png)
 
+## Choose Your Path
 
-## QUARTZ MANAGER UI
-The **Quartz Manager UI** is a dashboard in the form of a single-page-application provided by the Quartz Manager Java library itself. You can have it embedded in your project, as well as you get embedded the Swagger UI.  
-It leverages the websockets to receive in real-time the trigger updates and the outcomes of the job executions.  
+### 1. Add API And UI To Your Existing App
 
-![](https://github.com/fabioformosa/quartz-manager/blob/master/quartz-manager-parent/quartz-manager-web-showcase/src/main/resources/quartz-manager-4-screenshot.png)
+Use this path when you already have a Spring Boot application and want to add a Quartz management API, an embedded management panel, or both.
 
-## QUARTZ MANAGER API
-Quart-Manager exposes REST endpoints to interact with the Quartz Scheduler. This endpoints are invoked by Quartz Manager UI also.
-The REST API are documented by an OpenAPI Specification interface. 
+Current behavior: Quartz Manager creates and manages its own scheduler bean named `quartzManagerScheduler` by default. It can coexist with other Quartz schedulers in the same application, but it does not automatically take control of an arbitrary existing scheduler instance.
 
-![](https://github.com/fabioformosa/quartz-manager/blob/master/quartz-manager-parent/quartz-manager-web-showcase/src/main/resources/quartz-manager-4-swagger.png)
+If you want Quartz Manager to manage an existing scheduler today, disable the default scheduler configuration with `quartz-manager.quartz.enabled=false` and provide a compatible bean named `quartzManagerScheduler`. First-class existing-scheduler integration is planned on the roadmap.
 
+Your managed jobs must extend `AbstractQuartzManagerJob` so Quartz Manager can expose them as eligible jobs and stream their execution logs/progress to the UI.
 
-# HOW IT WORKS
-Quartz Manager can either coexist with your existing instance of Quartz or it can import itself the Quartz dependency.   
+If you also want the browser dashboard, see [Add The UI](#add-the-ui).
 
-In the first case, Quartz Manager is compatible with Quartz v2.3.x . Quartz Manager creates and configures its own instance of Quartz Scheduler and it manages only the jobs and the triggers created through it. Your other jobs and triggers, running in the existing quartz instance, are out of the scope of Quartz Manager.  
+### 2. Add A New Scheduler To Your App
 
-In the latter case, in which there isn't an existing quartz instance, you can rely on Quartz Manager to speed up the setup of a Quartz instance, with a persistent storage also if you need it. Futhermore, if you start a bare project from scratch, just to run scheduled jobs, Quartz Manager comes with the option to enable a security layer to protect the API and the UI with an authentication model based on [JWT](https://jwt.io).
+Use this path when your Spring Boot application does not have Quartz yet and you want to add a scheduler managed by Quartz Manager.
 
-**FEATURES**
-* You can schedule a [Quartz Simple Trigger](http://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-05.html) which allows you to start a job now or in a specific date-time, to set it as a recurring job with a certain time frequency, unlimited or limited on the number of fires and within a certain end date.
-* You can start, pause and resume the quartz scheduler via API or clicking the start/stop buttons at the UI console.
-* Leveraging on an active web-socket, the `Quartz-Manager-UI` updates in real time the progress bar and it displays the list of the latest logs produced by your quartz job.
-* You can enable a secure layer, if your project doesn't have any, to give access at the API and the UI only to authenticated users.
-* You can enable a persistent layer, to persist the config and the progress of your trigger, in a postgresql database.
+The easiest setup is to let Quartz Manager import, initialize, and manage a Quartz Scheduler for you. Import the API starter, create jobs extending `AbstractQuartzManagerJob`, configure the package that contains your jobs, and use the REST API or UI to create jobs and triggers.
 
-# GET STARTED
+You can later add optional modules for the embedded UI, JWT security, and PostgreSQL persistence.
 
-**Requirements** 
-  Java 9+, Spring Framework 5+ (Spring Boot 2.x)
-  
-Quart Manager is a modular library:
-* quartz-manager-starter-api (mandatory)
-* quartz-manager-starter-ui (optional)
-* quartz-manager-starter-security (optional)
-* quartz-manager-starter-persistence (optional)
+If you also want the browser dashboard, see [Add The UI](#add-the-ui).
 
-In order to decrease the overall configuration time for the project, all modules of the library follow the approach of Spring Starters. Thus, it's enough to import the dependency to get started.
+### 3. Run Quartz Manager As A Standalone App
 
-Below the list of the quartz-manager modules you can import.
+Use this path when you want a standalone scheduler web application instead of embedding Quartz Manager into an existing product.
 
-## Quartz Manager Starter API Lib
-This is the only mandatory module of the library.   
-Add the dependency, make eligible for Quart Manager the job classes and set the props in your `application.properties` file.
+The `quartz-manager-web-showcase` application imports Quartz Manager API, UI, and security modules and runs with an embedded Quartz scheduler. It is useful as a ready-to-run management console, as a demo, and as a reference application.
 
-### Step 1. Dependency
+Even in standalone mode, the jobs managed by Quartz Manager must extend `AbstractQuartzManagerJob`.
 
-#### Maven
-```
+## Features
+
+- REST API for scheduler, job, trigger, and calendar management.
+- Embeddable management UI provided as a webjar: import it as a Maven dependency and open `/quartz-manager-ui` in the browser.
+- Scheduler commands: start, standby, resume, and shutdown.
+- Job management: list eligible job classes, create stored jobs, update jobs, delete jobs, and trigger jobs manually.
+- Trigger management: create, inspect, reschedule, pause, resume, and unschedule triggers.
+- Trigger types: simple, cron, daily time interval, and calendar interval.
+- Calendar management: annual, cron, daily, holiday, monthly, and weekly calendars.
+- Misfire handling for supported trigger types.
+- WebSocket updates for job execution progress and logs.
+- Optional OpenAPI/Swagger UI documentation.
+- Optional JWT-based security with in-memory users.
+- Optional PostgreSQL persistence using Quartz JDBC job store and Liquibase-managed schema creation.
+
+In dependency snippets, replace `VERSION` with the version you want to use.
+
+## Requirements
+
+- Java 21+
+- Spring Boot 4.x
+- Maven 3.9+
+- Node.js and npm only if you build the frontend locally
+
+## Modules
+
+| Module | Required | Purpose |
+| --- | --- | --- |
+| `quartz-manager-starter-api` | Required | REST API, managed scheduler integration, jobs, triggers, calendars, OpenAPI support, and WebSocket updates |
+| `quartz-manager-starter-ui` | Optional | Embeddable management UI provided as a webjar |
+| `quartz-manager-starter-security` | Optional | JWT authentication for Quartz Manager API and UI |
+| `quartz-manager-starter-persistence` | Optional | PostgreSQL-backed Quartz persistence and Liquibase schema setup |
+| `quartz-manager-web-showcase` | Optional | Standalone/demo Spring Boot application using the Quartz Manager modules |
+
+## Quick Start
+
+### Path 1: Existing Spring Boot App
+
+Add the API starter:
+
+```xml
 <dependency>
   <groupId>it.fabioformosa.quartz-manager</groupId>
   <artifactId>quartz-manager-starter-api</artifactId>
-  <version>4.0.5</version>
+  <version>VERSION</version>
 </dependency>
 ```
-#### Gradle
-```
-implementation group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-api', version: '4.0.5'
-```
 
-### Step 2. Quartz Manager Job Classes
-The job classes, which can be eligible for triggers managed by Quartz Manager, must extend the super-class `AbstractLoggingJob`. 
-In this way, Quartz Manager is able to collect and display the outcomes at the UI console.
+Create jobs by extending `AbstractQuartzManagerJob`:
 
- ```
- public class SampleJob extends AbstractLoggingJob {
+```java
+import it.fabioformosa.quartzmanager.api.jobs.AbstractQuartzManagerJob;
+import it.fabioformosa.quartzmanager.api.jobs.entities.LogRecord;
+import org.quartz.JobExecutionContext;
 
-    @Override
-    public LogRecord doIt(JobExecutionContext jobExecutionContext) {
-        ... do stuff ...
-        return new LogRecord(LogType.INFO, "Hello from QuartManagerDemo!");
-    }
+public class SampleJob extends AbstractQuartzManagerJob {
 
+  @Override
+  public LogRecord doIt(JobExecutionContext context) {
+    return new LogRecord(LogRecord.LogType.INFO, "Hello from Quartz Manager");
+  }
 }
 ```
 
-### Step 3. Quartz Manager API - App Props
+Configure job discovery:
 
-| Property                           | Values   |Mandatory | Default | Description                                                               |
-| :---                               |:---      |:---      |:---     |:--                                                                        |
-| quartz-manager.jobClassPackages    | string   | Yes      |         |java base package which contains your job classes                          |
-| quartz-manager.oas.enabled         | boolean  | No       | false   |whether to create an OpenAPI instance to expose the OAS and the Swagger UI |
-
-
-### REST API & OpenAPI Specification
-Set the app prop `quartz-manager.oas.enabled=true` if you want to expose the OpenApi Specification of the Quartz Manager APIs.  
-Reach out the swagger-ui at the URL:
-[http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html)
-
-If your project has already an OpenAPI instance and you've set `quartz-manager.oas.enabled=true`, then make sure to add an OpenApiGroup to group the API of your application. Quart Manager exposes its API in group called "Quartz Manager". If you use OAS Annotations:
-```
-  @Bean
-  public GroupedOpenApi simplySpringDemoGroupedOpenApi() {
-    return GroupedOpenApi.builder().group("myapp").packagesToScan("com.example.myapp").build();
-  }
+```properties
+quartz-manager.jobClassPackages=com.example.jobs
+quartz-manager.oas.enabled=true
 ```
 
-### QUARTZ SETTINGS
-Quartz Manager creates its own instance of a [Quartz Scheduler](http://www.quartz-scheduler.org/). 
+By default, Quartz Manager creates a dedicated scheduler named `quartz-manager-scheduler`. If your app already has another Quartz scheduler, both can coexist.
 
-By default, the managed quartz instance is instantiated with the following props:
+Advanced existing-scheduler setup:
 
+```properties
+quartz-manager.quartz.enabled=false
 ```
+
+Then provide a `Scheduler` bean named `quartzManagerScheduler`. This is the current integration point; a more explicit existing-scheduler mode is planned.
+
+To add the browser dashboard to your application, see [Add The UI](#add-the-ui).
+
+### Path 2: New Scheduler In Your App
+
+Use the same API starter setup as Path 1, then let Quartz Manager create its managed scheduler.
+
+Create one or more jobs extending `AbstractQuartzManagerJob`, configure `quartz-manager.jobClassPackages`, then create stored jobs and triggers through the REST API, Swagger UI, or the dashboard.
+
+Default managed Quartz properties:
+
+```properties
 org.quartz.scheduler.instanceName=quartz-manager-scheduler
 org.quartz.threadPool.threadCount=1
 ```
 
-You can customize the configuration of the Quartz managed by Quartz Manager creating a file `managed-quartz.properties` in the classpath (`src/main/resources`).   
-For further details about the quartz properties, click [here](http://www.quartz-scheduler.org/documentation/quartz-2.3.0/configuration/).
+To customize the managed scheduler, add `managed-quartz.properties` to your classpath.
 
-#### Existing Quartz Instance
-Quarz Manager imports transitively the [Quartz Scheduler library](https://mvnrepository.com/artifact/org.quartz-scheduler/quartz) ver 2.3.2.
-However, Quartz Manager can be imported even thought you've already imported the quartz scheduler lib. Indeed Quartz Manager coexists with the existing Quarz Scheduler Instance you've created in your project. In that case, Quartz Manager will manage the triggers created by it and it won't interfere with the other quartz instances.
-The prerequesite is that you've imported a quartz scheduler ver 2.3.x.
+To add the browser dashboard to your application, see [Add The UI](#add-the-ui).
 
-You can configure the Quartz instance managed by Quartz Manager through the file `managed-quartz.properties` and your own Quartz instance through the file  `quartz.properties`.
+### Path 3: Standalone Quartz Manager App
 
-If you've created a `SchedulerFactoryBean`, tag it as `@Primary` to avoid conflicts in-type, since Quartz Manager creates another bean of the same type.
+Run the standalone showcase application when you want Quartz Manager as a ready-to-use scheduler web app.
 
-```
-    @Primary
-    @Bean
-    public SchedulerFactoryBean schedulerFactoryBean( JobFactory jobFactory, Properties quartzProperties) {
-        SchedulerFactoryBean factory = new SchedulerFactoryBean();
-        ...
-        return factory;
-    }
+```bash
+git clone https://github.com/fabioformosa/quartz-manager.git
+cd quartz-manager/quartz-manager-parent
+mvn install -Pbuild-webjar
+cd quartz-manager-web-showcase
+mvn spring-boot:run
 ```
 
+Open the dashboard:
 
-## Quartz Manager Starter UI Lib
-You can optionally import the following dependency to have the UI Dashboard to interact with the Quartz Manager API.
-
-### Dependency
-
-#### Maven
+```text
+http://localhost:8080/quartz-manager-ui/index.html
 ```
+
+Open Swagger UI when OpenAPI is enabled:
+
+```text
+http://localhost:8080/swagger-ui.html
+```
+
+Default showcase credentials:
+
+```text
+admin / admin
+```
+
+To plug in your own jobs today, add your job classes inside the cloned repository, rebuild the standalone application, and configure `quartz-manager.jobClassPackages` to include their package.
+
+A Docker-based standalone distribution is planned. It will provide a supported mechanism to attach external job classes without modifying the cloned repository.
+
+## Add The UI
+
+Add the UI starter when you want the embedded management panel in your Spring Boot app:
+
+```xml
 <dependency>
   <groupId>it.fabioformosa.quartz-manager</groupId>
   <artifactId>quartz-manager-starter-ui</artifactId>
-  <version>4.0.5</version>
+  <version>VERSION</version>
 </dependency>
 ```
-#### Gradle
+
+The UI is served from:
+
+```text
+http://localhost:8080/quartz-manager-ui/index.html
 ```
-implementation group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-ui', version: '4.0.5'
-``` 
 
-### Reach out the UI Console at URL
-if you run locally [http://localhost:8080/quartz-manager-ui/index.html](http://localhost:8080/quartz-manager-ui/index.html)  
+## REST API
 
+Quartz Manager exposes its API under `/quartz-manager`.
 
+| Area | Endpoints |
+| --- | --- |
+| Scheduler | `GET /quartz-manager/scheduler`, `POST /quartz-manager/scheduler/start`, `POST /quartz-manager/scheduler/standby`, `POST /quartz-manager/scheduler/resume`, `POST /quartz-manager/scheduler/shutdown` |
+| Job classes | `GET /quartz-manager/job-classes` |
+| Jobs | `GET /quartz-manager/jobs`, `POST /quartz-manager/jobs/{group}/{name}`, `PUT /quartz-manager/jobs/{group}/{name}`, `POST /quartz-manager/jobs/{group}/{name}/trigger`, `DELETE /quartz-manager/jobs/{group}/{name}` |
+| Triggers | `GET /quartz-manager/triggers`, `POST /quartz-manager/triggers/{group}/{name}`, `PUT /quartz-manager/triggers/{group}/{name}`, `POST /quartz-manager/triggers/{group}/{name}/pause`, `POST /quartz-manager/triggers/{group}/{name}/resume`, `DELETE /quartz-manager/triggers/{group}/{name}` |
+| Calendars | `GET /quartz-manager/calendars`, `POST /quartz-manager/calendars/{name}`, `PUT /quartz-manager/calendars/{name}`, `DELETE /quartz-manager/calendars/{name}`, `POST /quartz-manager/calendars/{name}/included-time-test` |
 
-## Quartz Manager Starter Security Lib
-
-Import this optional dependency, if you want to enable a security layer and allow the access to the REST API and UI only to authenticated users.  
-The authentication model of Quartz Manager is based on [JWT](https://jwt.io/).
-
-If you're going to import Quartz Manager in a project with an existing configuration of Spring Security, consider the following:
-- Only if your existing security is cookie-based, actually you don't need to import the module `quartz-manager-security-lib`. Simply, Quartz Manager will be under the hat of your security setup. In all other cases (based on HTTP headers, query params, etc) Quartz Manager is not aware about your auth token and it will implement its own authentication model.
-- Quartz Manager Security relies on Spring Security upon a dedicated *HTTP Spring Security Chain* applied to the base path `/quartz-manager`. So it doesn't interfere with your existing security setup.
-- Quartz Manager Security keeps simple the authentication, adopting the InMemory Model. You have to define the users (in terms of username/credentials passed via `application.properties`) can access to Quartz Manager.
-- By default, the UI attaches the JWT Token to each request in the authorization header in the "Bearer" format.
-
-Future development: the Quart Manager Security OAuth2 client.
-
-
-### Dependency
-
-#### Maven
+Enable OpenAPI and Swagger UI with:
 
+```properties
+quartz-manager.oas.enabled=true
 ```
+
+Then open:
+
+```text
+http://localhost:8080/swagger-ui.html
+```
+
+## Security
+
+Add the security starter when you want Quartz Manager API and UI protected by JWT authentication:
+
+```xml
 <dependency>
   <groupId>it.fabioformosa.quartz-manager</groupId>
   <artifactId>quartz-manager-starter-security</artifactId>
-  <version>4.0.5</version>
+  <version>VERSION</version>
 </dependency>
 ```
 
-#### Gradle
+Example configuration:
 
-```
-compile group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-security', version: '4.0.5'
+```yaml
+quartz-manager:
+  security:
+    jwt:
+      secret: "change-me"
+      expiration-in-sec: 28800
+      header-strategy:
+        enabled: true
+        header: Authorization
+      cookie-strategy:
+        enabled: false
+        cookie: AUTH-TOKEN
+    accounts:
+      in-memory:
+        enabled: true
+        users:
+          - username: admin
+            password: admin
+            roles:
+              - ADMIN
 ```
 
+Security is applied to `/quartz-manager/**`. The UI webjar path is ignored by the security filter chain, while API calls require authentication.
 
-### Quartz Manager Security Lib - App Props
+## Persistence
 
-| Property                                                    | Values   |Mandatory         | Default | Description     |
-| :---                                                        |:---      |:---              |:---     |:--              |
-| quartz-manager.security.jwt.secret                          | string   |                  |         | Secret to sign the JWT Token |          
-| quartz-manager.security.jwt.expiration-in-sec               | number   | no               | 28800   |                              |
-| quartz-manager.security.accounts.in-memory.enabled          | boolean  | no               | true    |                              |
-|quartz-manager.security.accounts.in-memory.users[0].username | string   | yes (if enabled) |         |                              | 
-|quartz-manager.security.accounts.in-memory.users[0].password | string   | yes              |         |                              |
-|quartz-manager.security.accounts.in-memory.users[0].roles[0] | string   | yes              |         | set the value ADMIN          |
+By default, Quartz Manager uses Quartz's in-memory job store. Scheduling data is lost when the application stops.
 
+Add the persistence starter when you want Quartz Manager's managed scheduler to use PostgreSQL-backed Quartz persistence:
 
-## Quart Manager Starter Persistence Lib
-
-By default, Quartz Manager runs with a `org.quartz.simpl.RAMJobStore` that stores your managed scheduler in memory. The RAMJobStore is the simplest store and also the most performant. However it comes with the drawback that all scheduling data are lost if your applications ends or crashes. In case of a restarting of your app, you can't resume the scheduler from the point it stopped.  
-Import the Quartz Manager Persistence Module if you want to persist your scheduler data.  
-The pre-requesite is the availability of Postgresql database where Quartz Manager can store its information. You have to provide it a bare database and a postresql user granted for DDL and DML queries. About the DDL, consider that Quartz Manager Persistence will create all tables, it needs to work, at the bootstrap.
-
-### Dependency
-
-#### Maven
-
-```
+```xml
 <dependency>
   <groupId>it.fabioformosa.quartz-manager</groupId>
   <artifactId>quartz-manager-starter-persistence</artifactId>
-  <version>4.0.5</version>
+  <version>VERSION</version>
 </dependency>
 ```
 
-#### Gradle
+Configure the Quartz Manager datasource:
 
-```
-compile group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-persistence', version: '4.0.5'
+```yaml
+quartz-manager:
+  persistence:
+    quartz:
+      datasource:
+        url: jdbc:postgresql://localhost:5432/quartzmanager
+        user: quartzmanager
+        password: quartzmanager
 ```
 
-### Quartz Manager Persistence Lib - App Props
-
-| Property                                                    | Values   |Mandatory         | Default | Description     |
-| :---                                                        |:---      |:---              |:---     |:--              |
-| quartz-manager.persistence.quartz.datasource.url            | string   | yes              |         |eg. jdbc:postgresql://localhost:5432/quartzmanager |          
-| quartz-manager.persistence.quartz.datasource.user           | string   | yes              |         |                              |
-| quartz-manager.persistence.quartz.datasource.password       | string   | yes              |         |                              |
-
-
+The persistence module configures Quartz `JobStoreTX`, uses the PostgreSQL delegate, and creates the required Quartz tables through Liquibase.
 
 ## Examples
 
-You can find some examples of different scenarios of projects which import Quartz Manager at the repository [quartz-manager-use-cases](https://github.com/fabioformosa/quartz-manager-use-cases)
-* *simply-spring* - tipical scenario in which you create a minimal spring project from scratch dedicated to launch your scheduled jobs. Imported libraries: Quartz Manager API, Quartz Manager UI and Quartz Manager Security.
-* *simply-spring-no-security* - as simple-spring, without the security. Imported libraries: Quartz Manager API, Quartz Manager UI.
-* *existing-security-cookie-based* - It demonstrates how Quartz Manager stays under the security of your project, in case of an auth model based on cookies. Imported libraries: Quartz Manager API, Quartz Manager UI. 
-* *existing-security-header-based* - It demonstrates how Quartz Manager Security can coexists with another Spring Security Config present in your project. Imported libraries: Quartz Manager API, Quartz Manager UI and Quartz Manager Security.
-* *existing-quartz* - It demonstrates how to Quartz Manager can coexist with a Quartz instance already present in your project Imported libraries: Quartz Manager API, Quartz Manager UI.
-* *existing-quartz-and-storage* - It demonstrates how to Quartz Manager Persistence can coexist with a Quartz instance already present in your project. Imported libraries: Quartz Manager API, Quartz Manager UI and Quartz Manager Persistence.
+Example integrations are available in [quartz-manager-use-cases](https://github.com/fabioformosa/quartz-manager-use-cases).
 
+The use cases cover simple Spring applications, secured and unsecured setups, existing application security, existing Quartz scenarios, and persistence.
 
-## Limitations
+## Current Limitations
 
-> Step by step, day by day
+- Quartz Manager creates and manages its own scheduler by default. Automatic discovery and first-class management of an arbitrary existing scheduler is not yet supported.
+- Existing applications that want Quartz Manager to manage a pre-existing scheduler must currently provide it as a bean named `quartzManagerScheduler` and disable Quartz Manager's default scheduler creation.
+- Persistence currently targets PostgreSQL.
+- Cluster mode is not currently documented as a supported production mode.
+- Managed jobs must extend `AbstractQuartzManagerJob` to be eligible for job discovery and UI log/progress streaming.
 
-Quartz Manager has a work-in-progress roadmap to be full-fledged library to manage a [Quartz Scheduler](http://www.quartz-scheduler.org/).
+## Roadmap
 
-At this stage of the roadmap, these are the limitations:
-* Currently you cannot start multiple triggers or multiple jobs. At the moment a workaround is to launch multiple projects based on Quartz Manager.
-* Currently you can only start [Quartz Simple Trigger](http://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-05.html). The support to other kind of triggers will come soon: [Calendar Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CalendarIntervalTrigger.html), [Cron Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CronTrigger.html), [Daily Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/DailyTimeIntervalTrigger.html)
-* Currently the cluster mode is not supported
-* Currently the persistence of Quartz Manager supports only the PostgreSQL. The support to other king of triggers will come soon: MySQL, MariaDB, SqlServer, Oracle, H2.  
+The next priorities are tracked in the [project roadmap](https://github.com/users/fabioformosa/projects/1).
 
-## ROADMAP
+Planned improvements include:
 
-Take a look a the [Project Roadmap](https://github.com/users/fabioformosa/projects/1).  
-Don't hesitate to give your feedback, your opinion is important to understand the priority.
+- First-class support for managing an existing Quartz Scheduler instance.
+- Cluster mode support.
+- Additional persistence targets beyond PostgreSQL.
+- OAuth2 client support.
+- Continued UI improvements.
 
-Next steps in the roadmap are:
-* Manage multiple triggers and jobs
-* Cluster mode support
-* Support to other all types of Quartz Triggers:  [Calendar Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CalendarIntervalTrigger.html), [Cron Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CronTrigger.html), [Daily Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/DailyTimeIntervalTrigger.html)
-* UI Re-styling
-* OAuth Client
-* Support to other DBMS than PostreSQL: MySQL, MariaDB, SqlServer, Oracle, H2.
+## Development
 
-## Repository
+This repository contains the backend modules and the frontend application.
 
-Checkout the **master branch** to get the sourcecode of the latest released versions.  
-Checkout the **develop branch** to take a look at the sourcecode of the incoming release.
+For local development, repository structure, build commands, and contribution details, see [quartz-manager-parent/README.md](https://github.com/fabioformosa/quartz-manager/blob/develop/quartz-manager-parent/README.md).
 
-## HOW-TO CONTRIBUTE  
+## Contributing
 
-For tech details, how-to run locally the project and how-to contribute, reach out this other [README.md](https://github.com/fabioformosa/quartz-manager/blob/develop/quartz-manager-parent/README.md)
+Contributions are welcome. Open an issue to discuss bugs, questions, or feature proposals before starting larger changes.
 
-## ❤️ SUPPORT THE PROJECT ❤️
+## License
 
-Sometimes it's a matter of a kind action. You can support Quartz Manager and its continuous improvement turning on a github star on this project ⭐
+Quartz Manager is released under the [Apache License 2.0](LICENSE).
+
+## Support
+
+If Quartz Manager is useful to you, consider starring the repository to support the project.

cloudbuild.yaml

@@ -0,0 +1,45 @@
+substitutions:
+  _REGION: europe-west8
+steps:
+
+  # Step 1: Google Cloud Build - Docker build&push
+  - name: 'gcr.io/k8s-skaffold/skaffold'
+    entrypoint: 'sh'
+    args:
+      - -xe
+      - -c
+      - |
+        # Build and push images
+        sed -i s/_IMAGE_TAG_POLICY/$SHORT_SHA/g skaffold.yaml
+        sed -i s/_HELM_APP_VERSION/$SHORT_SHA/g ./quartz-manager-parent/quartz-manager-web-showcase/helm/Chart.yaml
+        skaffold build --file-output=/workspace/artifacts.json \
+                       --default-repo=${_REGION}-docker.pkg.dev/quartz-manager-test/quartz-manager/quartz-manager-standalone \
+                       --push=true
+
+  # Step 2: Google Cloud Deploy - deploy
+  - name: 'google/cloud-sdk:latest'
+    entrypoint: 'sh'
+    args:
+      - -xe
+      - -c
+      - |
+        sed -i s/_HELM_APP_VERSION/$SHORT_SHA/g ./quartz-manager-parent/quartz-manager-web-showcase/helm/Chart.yaml
+        gcloud config set deploy/region ${_REGION}
+        gcloud deploy apply --file ./quartz-manager-parent/quartz-manager-web-showcase/deploy/pipeline.yaml
+        gcloud deploy apply --file ./quartz-manager-parent/quartz-manager-web-showcase/deploy/dev.yaml
+        gcloud deploy apply --file ./quartz-manager-parent/quartz-manager-web-showcase/deploy/staging.yaml
+        gcloud deploy apply --file ./quartz-manager-parent/quartz-manager-web-showcase/deploy/prod.yaml
+        gcloud deploy releases create rel-${SHORT_SHA} \
+                            --delivery-pipeline quartz-manager-pipeline \
+                            --description "$(git log -1  --pretty='%s')" \
+                            --build-artifacts /workspace/artifacts.json \
+                            --verbosity=debug \
+                            --annotations "commit_ui=https://source.cloud.google.com/$PROJECT_ID/quartz-manager-standalone/+/$COMMIT_SHA"
+artifacts:
+  objects:
+    location: 'gs://$PROJECT_ID-gcdeploy-artifacts/'
+    paths:
+      - '/workspace/artifacts.json'
+
+options:
+  logging: CLOUD_LOGGING_ONLY

quartz-manager-frontend/.browserslistrc

@@ -5,8 +5,8 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+last 2 Chrome versions
+last 2 Firefox versions
+last 2 Edge versions
+last 2 Safari versions
+last 2 iOS versions

quartz-manager-frontend/.eslintrc.json

@@ -0,0 +1,178 @@
+/*
+👋 Hi! This file was autogenerated by tslint-to-eslint-config.
+https://github.com/typescript-eslint/tslint-to-eslint-config
+
+It represents the closest reasonable ESLint configuration to this
+project's original TSLint configuration.
+
+We recommend eventually switching this configuration to extend from
+the recommended rulesets in typescript-eslint.
+https://github.com/typescript-eslint/tslint-to-eslint-config/blob/master/docs/FAQs.md
+
+Happy linting! 💖
+*/
+{
+    "env": {
+        "browser": true,
+        "es6": true,
+        "node": true
+    },
+    "extends": [
+        "prettier"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "project": "tsconfig.json",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "eslint-plugin-import",
+        "@angular-eslint/eslint-plugin",
+        "@typescript-eslint"
+    ],
+    "root": true,
+    "rules": {
+        "@angular-eslint/component-class-suffix": "off",
+        "@angular-eslint/component-selector": "off",
+        "@angular-eslint/directive-class-suffix": "error",
+        "@angular-eslint/directive-selector": [
+            "error",
+            {
+                "type": "attribute",
+                "prefix": "app",
+                "style": "camelCase"
+            }
+        ],
+        "@angular-eslint/no-input-rename": "error",
+        "@angular-eslint/no-inputs-metadata-property": "error",
+        "@angular-eslint/no-output-rename": "error",
+        "@angular-eslint/no-outputs-metadata-property": "error",
+        "@angular-eslint/use-lifecycle-interface": "error",
+        "@angular-eslint/use-pipe-transform-interface": "error",
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+            "off",
+            {
+                "accessibility": "explicit"
+            }
+        ],
+        "@typescript-eslint/indent": "off",
+        "@typescript-eslint/member-delimiter-style": [
+            "off",
+            {
+                "multiline": {
+                    "delimiter": "none",
+                    "requireLast": true
+                },
+                "singleline": {
+                    "delimiter": "semi",
+                    "requireLast": false
+                }
+            }
+        ],
+        "@typescript-eslint/member-ordering": "off",
+        "@typescript-eslint/naming-convention": "off",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-empty-interface": "error",
+        "@typescript-eslint/no-inferrable-types": [
+            "error",
+            {
+                "ignoreParameters": true
+            }
+        ],
+        "@typescript-eslint/no-shadow": [
+            "error",
+            {
+                "hoist": "all"
+            }
+        ],
+        "@typescript-eslint/no-unused-expressions": "error",
+        "@typescript-eslint/prefer-function-type": "error",
+        "@typescript-eslint/semi": [
+            "off",
+            null
+        ],
+        "@typescript-eslint/type-annotation-spacing": "off",
+        "@typescript-eslint/unified-signatures": "error",
+        "brace-style": [
+            "error",
+            "1tbs"
+        ],
+        "curly": "error",
+        "dot-notation": "off",
+        "eol-last": "off",
+        "eqeqeq": [
+            "error",
+            "smart"
+        ],
+        "guard-for-in": "error",
+        "id-denylist": "off",
+        "id-match": "off",
+        "import/no-deprecated": "warn",
+        "indent": "off",
+        "max-len": [
+            "error",
+            {
+                "code": 140
+            }
+        ],
+        "no-bitwise": "error",
+        "no-caller": "error",
+        "no-console": [
+            "error",
+            {
+                "allow": [
+                    "log",
+                    "warn",
+                    "dir",
+                    "timeLog",
+                    "assert",
+                    "clear",
+                    "count",
+                    "countReset",
+                    "group",
+                    "groupEnd",
+                    "table",
+                    "dirxml",
+                    "error",
+                    "groupCollapsed",
+                    "Console",
+                    "profile",
+                    "profileEnd",
+                    "timeStamp",
+                    "context"
+                ]
+            }
+        ],
+        "no-debugger": "error",
+        "no-empty": "off",
+        "no-empty-function": "off",
+        "no-eval": "error",
+        "no-fallthrough": "error",
+        "no-new-wrappers": "error",
+        "no-redeclare": "error",
+        "no-restricted-imports": "error",
+        "no-shadow": "off",
+        "no-throw-literal": "error",
+        "no-trailing-spaces": "off",
+        "no-underscore-dangle": "off",
+        "no-unused-expressions": "off",
+        "no-unused-labels": "error",
+        "no-var": "error",
+        "prefer-const": "error",
+        "quotes": "off",
+        "radix": "error",
+        "semi": "off",
+        "spaced-comment": [
+            "error",
+            "always",
+            {
+                "markers": [
+                    "/"
+                ]
+            }
+        ],
+        "valid-typeof": "error"
+    }
+}

quartz-manager-frontend/.eslintrc.sonar.json

@@ -0,0 +1,19 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:sonarjs/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "tsconfig.json",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "sonarjs"
+  ],
+  "root": true
+}

quartz-manager-frontend/.gitignore

@@ -40,3 +40,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+/.angular/

quartz-manager-frontend/.prettierignore

@@ -0,0 +1,47 @@
+src/polyfills.ts
+src/typings.d.ts
+_test.ts
+
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db
+/.angular/

quartz-manager-frontend/.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": true,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "trailingComma": "es5",
+  "bracketSameLine": true,
+  "printWidth": 80
+}

quartz-manager-frontend/angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "angular-spring-starter": {
+    "quartz-manager-ui": {
       "root": "",
       "prefix": "qrzmng",
       "sourceRoot": "src",
@@ -18,16 +18,28 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
+            "allowedCommonJsDependencies": [
+              "@stomp/stompjs", "stompjs", "sockjs-client", "angular2-uuid"
+            ],
             "assets": [
               "src/assets",
               "src/favicon.ico"
             ],
             "styles": [
-              "src/styles.css"
+              "src/styles.css",
+              "node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
             ],
             "scripts": []
           },
           "configurations": {
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
             "production": {
               "budgets": [
                 {
@@ -38,7 +50,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -56,64 +67,60 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular-spring-starter:build"
+            "buildTarget": "quartz-manager-ui:build:development"
           },
           "configurations": {
             "production": {
-              "browserTarget": "angular-spring-starter:build:production"
+              "buildTarget": "quartz-manager-ui:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-spring-starter:build"
+            "buildTarget": "quartz-manager-ui:build"
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": []
-          }
-        }
-      }
-    },
-    "angular-spring-starter-e2e": {
-      "root": "e2e",
-      "sourceRoot": "e2e",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "angular-spring-starter:serve"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": []
+            "eslintConfig": ".eslintrc.json",
+            "lintFilePatterns": ["**/*.spec.ts", "**/*.ts"]
           }
         }
       }
     }
   },
-  "defaultProject": "angular-spring-starter",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "qrzmng",
-      "style": "css"
+      "style": "css",
+      "type": "component"
     },
     "@schematics/angular:directive": {
-      "prefix": "qrzmng"
+      "prefix": "qrzmng",
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

quartz-manager-frontend/eslint.sonar.config.mjs

@@ -0,0 +1,30 @@
+import sonarjs from 'eslint-plugin-sonarjs';
+import tsParser from '@typescript-eslint/parser';
+
+export default [
+  {
+    files: ['src/**/*.ts'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: 'tsconfig.json',
+        sourceType: 'module'
+      }
+    },
+    plugins: {
+      sonarjs
+    },
+    rules: {
+      ...sonarjs.configs.recommended.rules,
+      'sonarjs/deprecation': 'off',
+      'sonarjs/no-commented-code': 'off',
+      'sonarjs/no-dead-store': 'off',
+      'sonarjs/no-incomplete-assertions': 'off',
+      'sonarjs/no-primitive-wrappers': 'off',
+      'sonarjs/no-unused-vars': 'off',
+      'sonarjs/prefer-promise-shorthand': 'off',
+      'sonarjs/todo-tag': 'off',
+      'sonarjs/unused-import': 'off'
+    }
+  }
+];

quartz-manager-frontend/jest.config.js

@@ -0,0 +1,20 @@
+const {createEsmPreset} = require('jest-preset-angular/presets');
+
+module.exports = {
+  ...createEsmPreset({
+    tsconfig: '<rootDir>/tsconfig.spec.json',
+    stringifyContentPathRegex: '\\.(html|svg)$'
+  }),
+  moduleNameMapper: {
+    '^tslib$': '<rootDir>/node_modules/tslib/tslib.es6.mjs',
+    '^rxjs$': '<rootDir>/node_modules/rxjs/dist/cjs/index.js',
+    '^rxjs/operators$': '<rootDir>/node_modules/rxjs/dist/cjs/operators/index.js',
+    '^rxjs/(.*)$': '<rootDir>/node_modules/rxjs/dist/cjs/$1',
+    '^@fortawesome/fontawesome$': '<rootDir>/node_modules/@fortawesome/fontawesome/index.js',
+    '^@fortawesome/fontawesome-free-solid$': '<rootDir>/node_modules/@fortawesome/fontawesome-free-solid/index.js'
+  },
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(@angular|@fortawesome|@stomp/rx-stomp|@stomp/stompjs|.*\\.mjs$)/)'
+  ]
+};

quartz-manager-frontend/jest.setup.ts

@@ -1 +1,3 @@
-import 'jest-preset-angular';
+import {setupZoneTestEnv} from 'jest-preset-angular/setup-env/zone/index.mjs';
+
+setupZoneTestEnv();

quartz-manager-frontend/karma.conf.js

@@ -1,42 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
-
-module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    files: [
-      
-    ],
-    preprocessors: {
-      
-    },
-    mime: {
-      'text/x-typescript': ['ts','tsx']
-    },
-    coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
-    },
-    
-    reporters: config.angularCli && config.angularCli.codeCoverage
-              ? ['progress', 'coverage-istanbul']
-              : ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
-};

quartz-manager-frontend/package.json

@@ -5,72 +5,69 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json",
-    "build": "ng build --prod",
-    "test": "jest",
+    "build": "ng build --configuration production",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "lint:sonar": "eslint -c eslint.sonar.config.mjs \"src/**/*.ts\"",
+    "lint:sonar:fix": "eslint -c eslint.sonar.config.mjs \"src/**/*.ts\" --fix"
   },
   "private": true,
   "dependencies": {
-    "@angular-material-components/datetime-picker": "2.0.4",
-    "@angular-material-components/moment-adapter": "2.0.2",
-    "@angular/animations": "9.1.4",
-    "@angular/cdk": "9.2.1",
-    "@angular/common": "9.1.4",
-    "@angular/compiler": "9.1.4",
-    "@angular/core": "9.1.4",
-    "@angular/flex-layout": "9.0.0-beta.29",
-    "@angular/forms": "9.1.4",
-    "@angular/material": "9.2.1",
-    "@angular/platform-browser": "9.1.4",
-    "@angular/platform-browser-dynamic": "9.1.4",
-    "@angular/platform-server": "9.1.4",
-    "@angular/router": "9.1.4",
-    "@auth0/angular-jwt": "^4.0.0",
+    "@angular/animations": "21.2.12",
+    "@angular/cdk": "21.2.10",
+    "@angular/common": "21.2.12",
+    "@angular/compiler": "21.2.12",
+    "@angular/core": "21.2.12",
+    "@angular/forms": "21.2.12",
+    "@angular/material": "21.2.10",
+    "@angular/platform-browser": "21.2.12",
+    "@angular/platform-browser-dynamic": "21.2.12",
+    "@angular/platform-server": "21.2.12",
+    "@angular/router": "21.2.12",
+    "@auth0/angular-jwt": "5.2.0",
+    "@danielmoncada/angular-datetime-picker": "21.0.0",
     "@fortawesome/fontawesome": "^1.1.4",
     "@fortawesome/fontawesome-free-regular": "^5.0.8",
     "@fortawesome/fontawesome-free-solid": "^5.0.8",
-    "@stomp/ng2-stompjs": "^0.6.3",
-    "@types/jest": "^27.0.2",
-    "core-js": "2.5.1",
+    "@stomp/rx-stomp": "2.4.0",
+    "@stomp/stompjs": "^7.2.0",
     "hammerjs": "2.0.8",
-    "moment": "^2.29.1",
-    "net": "^1.0.2",
-    "rxjs": "6.5.5",
+    "roboto-fontface": "^0.10.0",
+    "rxjs": "^7.8.2",
+    "sockjs-client": "^1.1.1",
     "stompjs": "^2.3.3",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "tslib": "^2.8.1",
+    "uuid": "^13.0.0",
+    "zone.js": "~0.16.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.4",
-    "@angular-devkit/core": "^9.1.4",
-    "@angular/cli": "9.1.4",
-    "@angular/compiler-cli": "9.1.4",
-    "@angular/language-service": "9.1.4",
+    "@angular-devkit/build-angular": "^21.2.10",
+    "@angular-devkit/core": "^21.2.10",
+    "@angular-eslint/builder": "21.3.1",
+    "@angular-eslint/eslint-plugin": "21.3.1",
+    "@angular-eslint/eslint-plugin-template": "21.3.1",
+    "@angular-eslint/schematics": "21.3.1",
+    "@angular-eslint/template-parser": "21.3.1",
+    "@angular/cli": "^21.2.10",
+    "@angular/compiler-cli": "21.2.12",
+    "@angular/language-service": "21.2.12",
     "@types/hammerjs": "2.0.34",
-    "@types/jasmine": "2.5.54",
-    "@types/jasminewd2": "2.0.3",
-    "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "2.6.4",
-    "jasmine-spec-reporter": "4.1.1",
-    "jest": "^26.0.1",
-    "jest-preset-angular": "^8.2.0",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "2.1.1",
-    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.0",
-    "karma-jasmine": "1.1.0",
-    "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.1.2",
-    "ts-node": "3.0.6",
-    "tslint": "5.7.0",
-    "typescript": "3.8.3"
-  },
-  "jest": {
-    "preset": "jest-preset-angular",
-    "setupFilesAfterEnv": [
-      "<rootDir>/jest.setup.ts"
-    ]
+    "@types/jasmine": "^5.1.13",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^22.13.14",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "@typescript-eslint/parser": "^8.48.1",
+    "eslint": "^9.39.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-sonarjs": "^4.0.3",
+    "jest": "30.4.1",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-preset-angular": "^16.1.5",
+    "jsdom": "^27.3.0",
+    "prettier": "^2.8.1",
+    "prettier-eslint": "^15.0.1",
+    "typescript": "5.9.3"
   }
 }

quartz-manager-frontend/src/_test.ts

@@ -1,32 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/long-stack-trace-zone';
-import 'zone.js/dist/proxy.js';
-import 'zone.js/dist/sync-test';
-import 'zone.js/dist/jasmine-patch';
-import 'zone.js/dist/async-test';
-import 'zone.js/dist/fake-async-test';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
-declare var __karma__: any;
-declare var require: any;
-
-// Prevent Karma from running prematurely.
-__karma__.loaded = function () {};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
-// Finally, start Karma to run the tests.
-__karma__.start();

quartz-manager-frontend/src/app/app-routing.module.ts

@@ -46,7 +46,7 @@ export const routes: Routes = [
 
 @NgModule({
   imports: [RouterModule.forRoot(routes, {
-    initialNavigation: false
+    initialNavigation: 'disabled'
   })],
   exports: [RouterModule],
   providers: []

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

@@ -1,8 +1,11 @@
-<div fxLayout="column" fxLayoutAlign="space-between stretch" fxFill>
-  <app-header fxFlex="0 0 auto"></app-header>
-  <div class="content" fxFlex="100" fxFill>
-    <router-outlet></router-outlet>
+@if (isOperationsConsoleRoute()) {
+  <router-outlet></router-outlet>
+} @else {
+  <div class="app-shell flex flex-column justify-space-between h-100">
+    <app-header class="flex-none"></app-header>
+    <div class="content flex h-100">
+      <router-outlet></router-outlet>
+    </div>
+    <app-footer class="flex-none"></app-footer>
   </div>
-  <app-footer fxFlex="0 0 auto"></app-footer>
-</div>
-
+}

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

@@ -2,9 +2,10 @@
   display: block;
   color: rgba(0,0,0,.54);
   font-family: Roboto,"Helvetica Neue";
-  height: 100%;
+  min-height: 100%;
 }
 
 .content {
   padding: 20px;
+  max-height: calc(100vh - 169px);
 }

quartz-manager-frontend/src/app/app.component.spec.ts

@@ -1,4 +1,4 @@
-import { TestBed, async } from '@angular/core/testing';
+import {TestBed, waitForAsync} from '@angular/core/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
@@ -18,7 +18,7 @@ import {
 } from './services';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent,
@@ -42,7 +42,7 @@ describe('AppComponent', () => {
     }).compileComponents();
   }));
 
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();

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

@@ -1,15 +1,31 @@
-import {Component} from '@angular/core';
+import {Component} from '@angular/core';
+import {Router} from '@angular/router';
 
-// I remove temporary fontawesome5 and downgrade to fontawesome4
-import fontawesome from '@fortawesome/fontawesome';
-import solid from '@fortawesome/fontawesome-free-solid/';
-fontawesome.library.add(solid);
+import fontawesome from '@fortawesome/fontawesome';
+import {
+  faCheckCircle,
+  faExclamationCircle,
+  faExclamationTriangle,
+  faPause,
+  faPlay,
+  faTimesCircle
+} from '@fortawesome/fontawesome-free-solid';
+
+fontawesome.library.add(faCheckCircle, faExclamationCircle, faExclamationTriangle, faPause, faPlay, faTimesCircle);
 
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss'],
+    standalone: false
 })
 
-export class AppComponent {
-}
+export class AppComponent {
+  constructor(private router: Router) {
+  }
+
+  isOperationsConsoleRoute(): boolean {
+    const url = this.router.url || '/';
+    return url === '/' || url.startsWith('/manager');
+  }
+}

quartz-manager-frontend/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule, APP_INITIALIZER} from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 import {JWT_OPTIONS, JwtModule} from '@auth0/angular-jwt';
 
@@ -17,17 +17,14 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatSelectModule} from '@angular/material/select';
-import {MatListModule} from '@angular/material/list';
-import {MatSidenavModule} from '@angular/material/sidenav';
-
-import {MatNativeDateModule} from '@angular/material/core';
-import { NgxMatTimepickerModule, NgxMatDatetimePickerModule} from '@angular-material-components/datetime-picker';
-import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
-
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { FlexLayoutModule } from '@angular/flex-layout';
+import {MatSelectModule} from '@angular/material/select';
+import {MatListModule} from '@angular/material/list';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatDialogModule} from '@angular/material/dialog';
+
+import {OwlDateTimeModule, OwlNativeDateTimeModule} from '@danielmoncada/angular-datetime-picker';
+
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { ManagerComponent } from './views/manager';
@@ -43,7 +40,8 @@ import {
   SchedulerControlComponent,
   LogsPanelComponent,
   ProgressPanelComponent,
-  TriggerListComponent
+  TriggerListComponent,
+  SimpleTriggerConfigComponent
 } from './components';
 
 import {
@@ -52,14 +50,14 @@ import {
   UserService,
   SchedulerService,
   ConfigService,
-  ProgressWebsocketService,
-  LogsWebsocketService,
   getHtmlBaseUrl,
-  TriggerService
-} from './services';
+  LogsRxWebsocketService,
+  ProgressRxWebsocketService,
+  TriggerService,
+  CalendarService
+} from './services';
 import { ForbiddenComponent } from './views/forbidden/forbidden.component';
 import { APP_BASE_HREF } from '@angular/common';
-import {SimpleTriggerConfigComponent} from './components/simple-trigger-config';
 import JobService from './services/job.service';
 import {GenericErrorComponent} from './views/error/genericError.component';
 
@@ -67,121 +65,85 @@ export function initUserFactory(userService: UserService) {
     return () => userService.fetchLoggedUser();
 }
 
-
-// const stompConfig: StompConfig = {
-//   // Which server?
-//   url: 'ws://localhost:8080/quartz-manager/progress',
-
-//   // Headers
-//   // Typical keys: login, passcode, host
-//   headers: {
-//     login: 'admin',
-//     passcode: 'admin'
-//   },
-
-//   // How often to heartbeat?
-//   // Interval in milliseconds, set to 0 to disable
-//   heartbeat_in: 0, // Typical value 0 - disabled
-//   heartbeat_out: 20000, // Typical value 20000 - every 20 seconds
-//   // Wait in milliseconds before attempting auto reconnect
-//   // Set to 0 to disable
-//   // Typical value 5000 (5 seconds)
-//   reconnect_delay: 5000,
-
-//   // Will log diagnostics on console
-//   debug: true
-// };
-
 export function jwtOptionsFactory(apiService: ApiService) {
   return {
     tokenGetter: () => {
       return apiService.getToken();
     },
-    whitelistedDomains: ['localhost:8080', 'localhost:4200']
+    allowedDomains: ['localhost:8080', 'localhost:4200']
   }
 }
 
-@NgModule({
-  declarations: [
-    AppComponent,
-    HeaderComponent,
-    FooterComponent,
-    ManagerComponent,
-    GithubComponent,
-    LoginComponent,
-    NotFoundComponent,
-    AccountMenuComponent,
-    SimpleTriggerConfigComponent,
-    SchedulerControlComponent,
-    LogsPanelComponent,
-    ProgressPanelComponent,
-    ForbiddenComponent,
-    GenericErrorComponent,
-    TriggerListComponent
-  ],
-  imports: [
-    BrowserAnimationsModule,
-    BrowserModule,
-    FormsModule,
-    ReactiveFormsModule,
-    HttpClientModule,
-    AppRoutingModule,
-    JwtModule.forRoot({
-      jwtOptionsProvider: {
-        provide: JWT_OPTIONS,
-        useFactory: jwtOptionsFactory,
-        deps: [ApiService]
-      }
-    }),
-    MatMenuModule,
-    MatTooltipModule,
-    MatButtonModule,
-    MatChipsModule,
-    MatIconModule,
-    MatInputModule,
-    MatSelectModule,
-    MatToolbarModule,
-    MatCardModule,
-    MatListModule,
-    MatProgressSpinnerModule,
-    MatProgressBarModule,
-    MatDatepickerModule, MatNativeDateModule,
-    NgxMatMomentModule,
-    NgxMatDatetimePickerModule,
-    MatSidenavModule,
-    FlexLayoutModule
-  ],
-  providers: [
-    {
-      provide: APP_BASE_HREF,
-      useValue: getHtmlBaseUrl()
-    },
-    {
-      'provide': APP_INITIALIZER,
-      'useFactory': initUserFactory,
-      'deps': [UserService],
-      'multi': true
-    },
-    LoginGuard,
-    GuestGuard,
-    AdminGuard,
-    SchedulerService,
-    JobService,
-    TriggerService,
-    ProgressWebsocketService,
-    LogsWebsocketService,
-    AuthService,
-    ApiService,
-    UserService,
-    ConfigService,
-    MatIconRegistry
-    // StompService,
-    // ServerSocket
-    // {
-    //   provide: StompConfig,
-    //   useValue: stompConfig
-    // }
-  ],
-  bootstrap: [AppComponent]
-})
+@NgModule({ declarations: [
+        AppComponent,
+        HeaderComponent,
+        FooterComponent,
+        ManagerComponent,
+        GithubComponent,
+        LoginComponent,
+        NotFoundComponent,
+        AccountMenuComponent,
+        SimpleTriggerConfigComponent,
+        SchedulerControlComponent,
+        LogsPanelComponent,
+        ProgressPanelComponent,
+        ForbiddenComponent,
+        GenericErrorComponent,
+        TriggerListComponent
+    ],
+    bootstrap: [AppComponent], imports: [BrowserAnimationsModule,
+        BrowserModule,
+        FormsModule,
+        ReactiveFormsModule,
+        AppRoutingModule,
+        JwtModule.forRoot({
+            jwtOptionsProvider: {
+                provide: JWT_OPTIONS,
+                useFactory: jwtOptionsFactory,
+                deps: [ApiService]
+            }
+        }),
+        MatDialogModule,
+        MatMenuModule,
+        MatTooltipModule,
+        MatButtonModule,
+        MatChipsModule,
+        MatIconModule,
+        MatInputModule,
+        MatSelectModule,
+        MatToolbarModule,
+        MatCardModule,
+        MatListModule,
+        MatProgressSpinnerModule,
+        MatProgressBarModule,
+        OwlDateTimeModule,
+        OwlNativeDateTimeModule,
+        MatSidenavModule,
+    ], providers: [
+        {
+            provide: APP_BASE_HREF,
+            useValue: getHtmlBaseUrl()
+        },
+        {
+            'provide': APP_INITIALIZER,
+            'useFactory': initUserFactory,
+            'deps': [UserService],
+            'multi': true
+        },
+        LoginGuard,
+        GuestGuard,
+        AdminGuard,
+        SchedulerService,
+        JobService,
+        TriggerService,
+        CalendarService,
+        ProgressRxWebsocketService,
+        LogsRxWebsocketService,
+        AuthService,
+        ApiService,
+        UserService,
+        ConfigService,
+        MatIconRegistry,
+        provideHttpClient(withInterceptorsFromDi())
+    ] })
 export class AppModule { }

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

@@ -1,8 +1,8 @@
-<mat-toolbar id="footer" style="color: rgba(255, 255, 255, 0.541176);" fxLayout="row" fxLayoutAlign="center center">
-    <a mat-icon-button href="https://github.com/fabioformosa/quartz-manager">
-      <img src="assets/image/github.png"/>
-      &nbsp; Quartz Manager
-    </a>
-<!--    Hand crafted with love by &nbsp;-->
-<!--    <a href="https://github.com/fabioformosa" style="color: rgba(255, 255, 255, 0.870588);">Fabio Formosa</a>-->
+<mat-toolbar id="footer" class="flex flex-row justify-center align-items-center" style="color: rgba(255, 255, 255, 0.541176);">
+  <a href="https://github.com/fabioformosa/quartz-manager" class="flex flex-row align-items-center" style="gap: 6px">
+    <div class="flex"><img src="assets/image/github.png"/></div>
+    <div class="font-size-14 font-weight-500 display-block line-height-100">Quartz Manager</div>
+  </a>
+  <!--    Hand crafted with love by &nbsp;-->
+  <!--    <a href="https://github.com/fabioformosa" style="color: rgba(255, 255, 255, 0.870588);">Fabio Formosa</a>-->
 </mat-toolbar>

quartz-manager-frontend/src/app/components/footer/footer.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-footer',
-  templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.scss']
+    selector: 'app-footer',
+    templateUrl: './footer.component.html',
+    styleUrls: ['./footer.component.scss'],
+    standalone: false
 })
 export class FooterComponent implements OnInit {
 

quartz-manager-frontend/src/app/components/github/github.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-github',
-  templateUrl: './github.component.html',
-  styleUrls: ['./github.component.scss']
+    selector: 'app-github',
+    templateUrl: './github.component.html',
+    styleUrls: ['./github.component.scss'],
+    standalone: false
 })
 export class GithubComponent implements OnInit {
 

quartz-manager-frontend/src/app/components/header/account-menu/account-menu.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
+import { ComponentFixture, TestBed, inject, waitForAsync} from '@angular/core/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 
@@ -18,7 +18,7 @@ describe('AccountMenuComponent', () => {
   let component: AccountMenuComponent;
   let fixture: ComponentFixture<AccountMenuComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule

quartz-manager-frontend/src/app/components/header/account-menu/account-menu.component.ts

@@ -7,9 +7,10 @@ import {
 import { Router } from '@angular/router';
 
 @Component({
-  selector: 'app-account-menu',
-  templateUrl: './account-menu.component.html',
-  styleUrls: ['./account-menu.component.scss']
+    selector: 'app-account-menu',
+    templateUrl: './account-menu.component.html',
+    styleUrls: ['./account-menu.component.scss'],
+    standalone: false
 })
 export class AccountMenuComponent implements OnInit {
 

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

@@ -1,35 +1,39 @@
-<mat-toolbar color="primary" class="app-navbar">
-  <button mat-button mat-ripple routerLink="/">
-<!--    <img alt="Quartz Manager" class="app-angular-logo" src="assets/image/angular-white-transparent.svg">-->
-    <span>Quartz Manager</span>
-  </button>
-
-  <div class="right">
-    <div fxFlex="1 1 auto" fxLayout="row" fxLayoutAlign="flex-end center">
-      <button *ngIf="!hasSignedIn() && !noAuthenticationRequired()" routerLink="/login" mat-button mat-ripple>
-        <span>Login</span>
-      </button>
-      <button
-        class="greeting-button"
-        *ngIf="hasSignedIn() && !noAuthenticationRequired()"
-        mat-button mat-ripple
-        [matMenuTriggerFor]="accountMenu">
-        <span>Hi, {{userName()}}</span>
-      </button>
-      <button
-        class="greeting-hamburger"
-        *ngIf="hasSignedIn()"
-        mat-icon-button mat-ripple
-        [matMenuTriggerFor]="accountMenu">
-        <mat-icon>menu</mat-icon>
-      </button>
-      <mat-menu #accountMenu
-        class="app-header-accountMenu"
-        yposition="below"
-        [overlapTrigger]="false">
-        <app-account-menu ></app-account-menu>
-      </mat-menu>
-    </div>
-  </div>
-</mat-toolbar>
-
+<mat-toolbar color="primary" class="app-navbar">
+  <button mat-button mat-ripple routerLink="/">
+    <!--    <img alt="Quartz Manager" class="app-angular-logo" src="assets/image/angular-white-transparent.svg">-->
+    <span>Quartz Manager</span>
+  </button>
+
+  <div class="right">
+    <div class="flex flex-row flex-1 justify-flex-end align-items-center">
+      @if (!hasSignedIn() && !noAuthenticationRequired()) {
+      <button routerLink="/login" mat-button mat-ripple>
+        <span>Login</span>
+      </button>
+      } @if (hasSignedIn() && !noAuthenticationRequired()) {
+      <button
+        class="greeting-button"
+        mat-button
+        mat-ripple
+        [matMenuTriggerFor]="accountMenu">
+        <span>Hi, {{ userName() }}</span>
+      </button>
+      } @if (hasSignedIn()) {
+      <button
+        class="greeting-hamburger"
+        mat-icon-button
+        mat-ripple
+        [matMenuTriggerFor]="accountMenu">
+        <mat-icon>menu</mat-icon>
+      </button>
+      }
+      <mat-menu
+        #accountMenu
+        class="app-header-accountMenu"
+        yposition="below"
+        [overlapTrigger]="false">
+        <app-account-menu></app-account-menu>
+      </mat-menu>
+    </div>
+  </div>
+</mat-toolbar>

quartz-manager-frontend/src/app/components/header/header.component.ts

@@ -6,10 +6,11 @@ import {
 } from '../../services';
 import { Router } from '@angular/router';
 
-@Component({
-  selector: 'app-header',
-  templateUrl: './header.component.html',
-  styleUrls: ['./header.component.scss']
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    standalone: false
 })
 export class HeaderComponent implements OnInit {
 

quartz-manager-frontend/src/app/components/index.ts

@@ -5,3 +5,4 @@ export * from './logs-panel';
 export * from './scheduler-control';
 export * from './progress-panel';
 export * from './trigger-list';
+export * from './simple-trigger-config';

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

@@ -1,35 +1,67 @@
-<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>
-      </div>
-      <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>
+<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">
+      @if (!selectedTriggerName && (!logs || logs.length == 0)) {
+      <div class="h-100 w-100" style="text-align: center">
+        <img
+          src="assets/image/logs.svg"
+          alt="no logs"
+          width="320"
+          style="margin-top: 6em" />
+      </div>
+      } @if (isWaitingForLogs()) {
+      <div
+        class="waitingLogs flex flex-column align-items-center justify-center gap-12">
+        <mat-spinner diameter="36"></mat-spinner>
+        <div>Waiting for logs from {{ selectedTriggerName }}...</div>
+      </div>
+      }
+
+      <div id="logs" class="w-100" style="height: 100%">
+        @for (log of logs; track log; let first = $first) {
+        <div
+          class="log-row flex flex-row gap-10">
+          <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>
+    </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;
 }
@@ -9,11 +15,18 @@
   color: gold;
 }
 
-#logs{
-  font-size: 1em;
-}
-
-/* ===== Scrollbar CSS ===== */
+#logs{
+  font-size: 1em;
+}
+
+.waitingLogs {
+  color: #6b7280;
+  height: 100%;
+  min-height: 180px;
+  text-align: center;
+}
+
+/* ===== Scrollbar CSS ===== */
 /* Firefox */
 * {
   scrollbar-width: auto;

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

@@ -0,0 +1,118 @@
+import {Subject} from 'rxjs';
+import {LogsPanelComponent} from './logs-panel.component';
+import {TriggerKey} from '../../model/triggerKey.model';
+import {jest} from '@jest/globals';
+
+describe('LogsPanelComponent', () => {
+
+  const ngZone = {run: jest.fn((fn: () => void) => fn())};
+
+  beforeEach(() => ngZone.run.mockClear());
+
+  it('should subscribe to the selected trigger logs topic', () => {
+    const messages = new Subject<any>();
+    const logsRxWebsocketService = {
+      watch: jest.fn(() => messages.asObservable())
+    };
+    const component = new LogsPanelComponent(logsRxWebsocketService as any, null, ngZone as any);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+
+    expect(logsRxWebsocketService.watch.mock.calls[0]).toEqual(['/topic/logs/trigger-1']);
+    expect(component.selectedTriggerName).toEqual('trigger-1');
+    expect(component.isWaitingForLogs()).toBeTruthy();
+
+    const logRecord = {
+      date: new Date(),
+      type: 'INFO',
+      message: 'job completed',
+      threadName: 'worker-1'
+    };
+    messages.next({body: JSON.stringify(logRecord)});
+
+    expect(ngZone.run).toHaveBeenCalled();
+    expect(component.logs[0]).toEqual({
+      time: logRecord.date.toISOString(),
+      type: 'INFO',
+      msg: 'job completed',
+      threadName: 'worker-1'
+    });
+    expect(component.isWaitingForLogs()).toBeFalsy();
+  });
+
+  it('should unsubscribe from the previous topic when the trigger changes', () => {
+    const firstMessages = new Subject<any>();
+    const secondMessages = new Subject<any>();
+    const logsRxWebsocketService = {
+      watch: jest.fn()
+        .mockReturnValueOnce(firstMessages.asObservable())
+        .mockReturnValueOnce(secondMessages.asObservable())
+    };
+    const component = new LogsPanelComponent(logsRxWebsocketService as any, null, ngZone as any);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+    const firstSubscription = component.topicSubscription;
+    jest.spyOn(firstSubscription, 'unsubscribe');
+
+    component.triggerKey = new TriggerKey('trigger-2', null);
+
+    expect(firstSubscription.unsubscribe).toHaveBeenCalled();
+    expect(logsRxWebsocketService.watch.mock.calls[1]).toEqual(['/topic/logs/trigger-2']);
+  });
+
+  it('should clear logs when the trigger changes', () => {
+    const firstMessages = new Subject<any>();
+    const secondMessages = new Subject<any>();
+    const logsRxWebsocketService = {
+      watch: jest.fn()
+        .mockReturnValueOnce(firstMessages.asObservable())
+        .mockReturnValueOnce(secondMessages.asObservable())
+        .mockReturnValueOnce(firstMessages.asObservable())
+    };
+    const component = new LogsPanelComponent(logsRxWebsocketService as any, null, ngZone as any);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+    firstMessages.next({body: JSON.stringify({date: new Date(), type: 'INFO', message: 'first log', threadName: 'worker-1'})});
+    expect(component.logs.length).toEqual(1);
+
+    component.triggerKey = new TriggerKey('trigger-2', null);
+    expect(component.logs).toEqual([]);
+    expect(component.selectedTriggerName).toEqual('trigger-2');
+    expect(component.isWaitingForLogs()).toBeTruthy();
+
+    secondMessages.next({body: JSON.stringify({date: new Date(), type: 'INFO', message: 'second log', threadName: 'worker-2'})});
+    expect(component.logs.length).toEqual(1);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+    expect(component.logs).toEqual([]);
+    expect(component.selectedTriggerName).toEqual('trigger-1');
+    expect(component.isWaitingForLogs()).toBeTruthy();
+  });
+
+  it('should clear logs when no trigger is selected', () => {
+    const messages = new Subject<any>();
+    const logsRxWebsocketService = {
+      watch: jest.fn(() => messages.asObservable())
+    };
+    const component = new LogsPanelComponent(logsRxWebsocketService as any, null, ngZone as any);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+    messages.next({body: JSON.stringify({date: new Date(), type: 'INFO', message: 'first log', threadName: 'worker-1'})});
+
+    component.triggerKey = null;
+
+    expect(component.logs).toEqual([]);
+    expect(component.selectedTriggerName).toBeNull();
+    expect(component.isWaitingForLogs()).toBeFalsy();
+  });
+
+  it('should ignore destroy when no topic was selected', () => {
+    const logsRxWebsocketService = {
+      watch: jest.fn()
+    };
+    const component = new LogsPanelComponent(logsRxWebsocketService as any, null, ngZone as any);
+
+    expect(() => component.ngOnDestroy()).not.toThrow();
+  });
+
+});

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

@@ -1,42 +1,86 @@
-import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+import {Component, Input, NgZone, OnDestroy, OnInit} from '@angular/core';
 
-import {LogsWebsocketService, ApiService} from '../../services';
-import {Observable} from 'rxjs';
+import {ApiService} from '../../services';
+import {LogsRxWebsocketService} from '../../services/logs.rx-websocket.service';
+import {map} from 'rxjs/operators';
+import {TriggerKey} from '../../model/triggerKey.model';
 
-@Component({
-  selector: 'logs-panel',
-  templateUrl: './logs-panel.component.html',
-  styleUrls: ['./logs-panel.component.scss']
+
+@Component({
+    selector: 'logs-panel',
+    templateUrl: './logs-panel.component.html',
+    styleUrls: ['./logs-panel.component.scss'],
+    standalone: false
 })
-export class LogsPanelComponent implements OnInit {
+export class LogsPanelComponent implements OnInit, OnDestroy {
 
   MAX_LOGS = 30;
 
-  logs = new Array();
+  logs = new Array();
+
+  selectedTriggerName: string;
 
-  constructor(
-    private logsWebsocketService: LogsWebsocketService,
-    private apiService: ApiService
-  ) {
-  }
+  topicSubscription;
+
+  private selectedTriggerKey: TriggerKey;
+
+  constructor(
+    private logsRxWebsocketService: LogsRxWebsocketService,
+    private apiService: ApiService,
+    private ngZone: NgZone
+  ) {
+  }
+
+  @Input()
+  set triggerKey(triggerKey: TriggerKey) {
+    if (!triggerKey || !triggerKey.name) {
+      this._unsubscribeFromTopic();
+      this.selectedTriggerKey = null;
+      this.selectedTriggerName = null;
+      this._resetLogs();
+      return;
+    }
+
+    if (this.selectedTriggerKey?.name === triggerKey.name) {
+      return;
+    }
+
+    this._resetLogs();
+    this.selectedTriggerKey = {...triggerKey} as TriggerKey;
+    this.selectedTriggerName = triggerKey.name;
+    this._subscribeToTheTopic(this.selectedTriggerKey);
+  }
+
+  isWaitingForLogs = (): boolean => !!this.selectedTriggerName && (!this.logs || this.logs.length === 0);
 
   ngOnInit() {
-    const obs = this.logsWebsocketService.getObservable()
-    obs.subscribe({
-      'next': this.onNewLogMsg,
-      'error': (err) => {
-        console.log(err)
-      }
-    });
   }
 
-  onNewLogMsg = (receivedMsg) => {
-    if (receivedMsg.type === 'SUCCESS') {
-      this._showNewLog(receivedMsg.message);
-    } else if (receivedMsg.type === 'ERROR') {
-      this._refreshSession();
-    } // if websocket has been closed for session expiration, try to refresh it
-  };
+  private _subscribeToTheTopic = (triggerKey: TriggerKey) => {
+    this._unsubscribeFromTopic();
+    this.topicSubscription = this.logsRxWebsocketService.watch(`/topic/logs/${triggerKey.name}`)
+      .pipe(map((msg: any) => JSON.parse(msg.body)))
+      .subscribe(logRecord => this.ngZone.run(() => this._showNewLog(logRecord)), (err) => {
+        console.log(err);
+        // TODO in case of 401
+        // this.apiService.get('/quartz-manager/session/refresh');
+      });
+  };
+
+  ngOnDestroy() {
+    this._unsubscribeFromTopic();
+  }
+
+  private _unsubscribeFromTopic() {
+    if (this.topicSubscription) {
+      this.topicSubscription.unsubscribe();
+      this.topicSubscription = null;
+    }
+  }
+
+  private _resetLogs() {
+    this.logs = [];
+  }
 
   _showNewLog = (logRecord) => {
     if (this.logs.length > this.MAX_LOGS) {

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

@@ -1,43 +1,72 @@
-<!-- <div class="progress" [hidden]="progress.percentage < 0">
-    <div class="progress-bar"
-            role="progressbar"
-            [ngStyle]="{width: percentageStr}">
-        {{percentageStr}}
-    </div>
-</div> -->
-
-<mat-card style="padding-bottom: 0">
-    <mat-card-header>
-        <mat-card-subtitle><b>JOB PROGRESS</b></mat-card-subtitle>
-    </mat-card-header>
-    <mat-card-content>
-      <div id="progressBarBox" *ngIf="progress.percentage !== -1">
-          <mat-progress-bar mode="determinate" value="{{progress.percentage}}"></mat-progress-bar>
-          {{percentageStr}}
-      </div>
-
-      <div id="counterBox" fxLayout="row" fxLayoutAlign="center" *ngIf="progress.timesTriggered">
-        <span id="timesTriggeredCounter" class="animated pulse">{{progress.timesTriggered}}</span>
-        <span id="totCounter" *ngIf="progress.repeatCount > 0">&nbsp;/&nbsp;{{progress.repeatCount}} </span>
-      </div>
-      <mat-divider *ngIf="progress.timesTriggered"></mat-divider>
-
-      <div fxLayout="row" fxLayoutAlign="space-around center">
-          <div class="fireBox">
-            <div class="fireBoxHeader">prev fire time</div>
-            <div class="fireBoxContent"><span class="animated pulse">{{progress.previousFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
-            <div class="fireBoxContent" [hidden]="progress.previousFireTime"><span>-</span></div>
-          </div>
-          <div class="fireBox">
-            <div class="fireBoxHeader">next fire time</div>
-            <div class="fireBoxContent"><span class="animated pulse">{{progress.nextFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
-            <div class="fireBoxContent" [hidden]="progress.nextFireTime"><span>-</span></div>
-          </div>
-          <div class="fireBox">
-            <div class="fireBoxHeader">final fire time</div>
-            <div class="fireBoxContent"><span class="animated pulse">{{progress.finalFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
-            <div class="fireBoxContent" [hidden]="progress.finalFireTime"><span>-</span></div>
-          </div>
-       </div>
-    </mat-card-content>
-</mat-card>
+<!-- <div class="progress" [hidden]="progress.percentage < 0">
+<div class="progress-bar"
+  role="progressbar"
+  [ngStyle]="{width: percentageStr}">
+  {{percentageStr}}
+</div>
+</div> -->
+
+<mat-card
+  style="padding-bottom: 0"
+  [ngClass]="{ 'progress-updated': progressUpdated }">
+  <mat-card-header style="padding-bottom: 16px">
+    <mat-card-subtitle><b>JOB PROGRESS</b></mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
+    @if (progress.percentage !== -1) {
+    <div id="progressBarBox">
+      <mat-progress-bar
+        mode="determinate"
+        value="{{ progress.percentage }}"></mat-progress-bar>
+      {{ percentageStr }}
+    </div>
+    } @if (progress.timesTriggered) {
+    <div id="counterBox" class="flex flex-row justify-center">
+      <span id="timesTriggeredCounter" class="animated pulse">{{
+        progress.timesTriggered
+      }}</span>
+      @if (progress.repeatCount > 0) {
+      <span id="totCounter">&nbsp;/&nbsp;{{ progress.repeatCount }} </span>
+      }
+    </div>
+    } @if (progress.timesTriggered) {
+    <mat-divider></mat-divider>
+    }
+
+    <div class="flex flex-row align-items-center justify-space-around">
+      <div class="fireBox">
+        <div class="fireBoxHeader">prev fire time</div>
+        <div class="fireBoxContent">
+          <span class="animated pulse">{{
+            progress.previousFireTime | date : 'dd-MM-yyyy HH:mm:ss'
+          }}</span>
+        </div>
+        <div class="fireBoxContent" [hidden]="progress.previousFireTime">
+          <span>-</span>
+        </div>
+      </div>
+      <div class="fireBox">
+        <div class="fireBoxHeader">next fire time</div>
+        <div class="fireBoxContent">
+          <span class="animated pulse">{{
+            progress.nextFireTime | date : 'dd-MM-yyyy HH:mm:ss'
+          }}</span>
+        </div>
+        <div class="fireBoxContent" [hidden]="progress.nextFireTime">
+          <span>-</span>
+        </div>
+      </div>
+      <div class="fireBox">
+        <div class="fireBoxHeader">final fire time</div>
+        <div class="fireBoxContent">
+          <span class="animated pulse">{{
+            progress.finalFireTime | date : 'dd-MM-yyyy HH:mm:ss'
+          }}</span>
+        </div>
+        <div class="fireBoxContent" [hidden]="progress.finalFireTime">
+          <span>-</span>
+        </div>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

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

@@ -31,3 +31,21 @@
 .fireBoxContent{
   text-align: center;
 }
+
+.progress-updated {
+  animation: progressUpdatePulse 700ms ease-out;
+}
+
+@keyframes progressUpdatePulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(63, 81, 181, 0.35);
+  }
+
+  45% {
+    box-shadow: 0 0 0 6px rgba(63, 81, 181, 0.16);
+  }
+
+  100% {
+    box-shadow: 0 0 0 0 rgba(63, 81, 181, 0);
+  }
+}

quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.spec.ts

@@ -0,0 +1,107 @@
+import {Subject} from 'rxjs';
+import {ProgressPanelComponent} from './progress-panel.component';
+import {TriggerKey} from '../../model/triggerKey.model';
+import {jest} from '@jest/globals';
+
+describe('ProgressPanelComponent', () => {
+
+  const ngZone = {run: jest.fn((fn: () => void) => fn())};
+
+  beforeEach(() => ngZone.run.mockClear());
+
+  it('should subscribe to the selected trigger progress topic', () => {
+    jest.useFakeTimers();
+    const messages = new Subject<any>();
+    const progressRxWebsocketService = {
+      watch: jest.fn(() => messages.asObservable())
+    };
+    const component = new ProgressPanelComponent(progressRxWebsocketService as any, ngZone as any);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+
+    expect(progressRxWebsocketService.watch.mock.calls[0]).toEqual(['/topic/progress/trigger-1']);
+
+    messages.next({body: JSON.stringify({percentage: 75, timesTriggered: 3})});
+    jest.runOnlyPendingTimers();
+
+    expect(ngZone.run).toHaveBeenCalled();
+    expect(component.progress.percentage).toEqual(75);
+    expect(component.percentageStr).toEqual('75%');
+    expect(component.progressUpdated).toBeTruthy();
+    jest.useRealTimers();
+  });
+
+  it('should unsubscribe from the previous topic when the trigger changes', () => {
+    const firstMessages = new Subject<any>();
+    const secondMessages = new Subject<any>();
+    const progressRxWebsocketService = {
+      watch: jest.fn()
+        .mockReturnValueOnce(firstMessages.asObservable())
+        .mockReturnValueOnce(secondMessages.asObservable())
+    };
+    const component = new ProgressPanelComponent(progressRxWebsocketService as any, ngZone as any);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+    const firstSubscription = component.topicSubscription;
+    jest.spyOn(firstSubscription, 'unsubscribe');
+
+    component.triggerKey = new TriggerKey('trigger-2', null);
+
+    expect(firstSubscription.unsubscribe).toHaveBeenCalled();
+    expect(progressRxWebsocketService.watch.mock.calls[1]).toEqual(['/topic/progress/trigger-2']);
+  });
+
+  it('should reset progress when the trigger changes', () => {
+    const firstMessages = new Subject<any>();
+    const secondMessages = new Subject<any>();
+    const progressRxWebsocketService = {
+      watch: jest.fn()
+        .mockReturnValueOnce(firstMessages.asObservable())
+        .mockReturnValueOnce(secondMessages.asObservable())
+        .mockReturnValueOnce(firstMessages.asObservable())
+    };
+    const component = new ProgressPanelComponent(progressRxWebsocketService as any, ngZone as any);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+    firstMessages.next({body: JSON.stringify({percentage: 75, timesTriggered: 3})});
+    expect(component.progress.percentage).toEqual(75);
+
+    component.triggerKey = new TriggerKey('trigger-2', null);
+    expect(component.progress.percentage).toEqual(-1);
+    expect(component.percentageStr).toBeNull();
+    expect(component.progressUpdated).toBeFalsy();
+
+    secondMessages.next({body: JSON.stringify({percentage: 20, timesTriggered: 1})});
+    expect(component.progress.percentage).toEqual(20);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+    expect(component.progress.percentage).toEqual(-1);
+  });
+
+  it('should reset progress when no trigger is selected', () => {
+    const messages = new Subject<any>();
+    const progressRxWebsocketService = {
+      watch: jest.fn(() => messages.asObservable())
+    };
+    const component = new ProgressPanelComponent(progressRxWebsocketService as any, ngZone as any);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+    messages.next({body: JSON.stringify({percentage: 75, timesTriggered: 3})});
+
+    component.triggerKey = null;
+
+    expect(component.progress.percentage).toEqual(-1);
+    expect(component.percentageStr).toBeNull();
+    expect(component.progressUpdated).toBeFalsy();
+  });
+
+  it('should ignore destroy when no topic was selected', () => {
+    const progressRxWebsocketService = {
+      watch: jest.fn()
+    };
+    const component = new ProgressPanelComponent(progressRxWebsocketService as any, ngZone as any);
+
+    expect(() => component.ngOnDestroy()).not.toThrow();
+  });
+
+});

quartz-manager-frontend/src/app/components/progress-panel/progress-panel.component.ts

@@ -1,84 +1,93 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
-import {ProgressWebsocketService, QuartzManagerWebsocketMessage} from '../../services';
-
-import { Observable } from 'rxjs';
+import {Component, Input, NgZone, OnDestroy, OnInit} from '@angular/core'
 import TriggerFiredBundle from '../../model/trigger-fired-bundle.model';
-// import {Message} from '@stomp/stompjs';
+import {TriggerKey} from '../../model/triggerKey.model';
+import {ProgressRxWebsocketService} from '../../services/progress.rx-websocket.service';
+import {map} from 'rxjs/operators';
 
-// import { Subscription } from 'rxjs/Subscription';
-// import {StompService} from '@stomp/ng2-stompjs';
-
-// import { QueueingSubject } from 'queueing-subject'
-// import websocketConnect from 'rxjs-websockets'
-// import 'rxjs/add/operator/share'
-// import {ServerSocket} from '../../services/qz.socket.service'
-
-@Component({
-  selector: 'progress-panel',
-  templateUrl: './progress-panel.component.html',
-  styleUrls: ['./progress-panel.component.scss']
+@Component({
+    selector: 'progress-panel',
+    templateUrl: './progress-panel.component.html',
+    styleUrls: ['./progress-panel.component.scss'],
+    standalone: false
 })
-export class ProgressPanelComponent implements OnInit {
+export class ProgressPanelComponent implements OnInit, OnDestroy {
+
+  progress: TriggerFiredBundle = ProgressPanelComponent._buildEmptyProgress();
+  percentageStr: string;
+  progressUpdated = false;
 
-  progress: TriggerFiredBundle = new TriggerFiredBundle();
-  percentageStr: string;
+  topicSubscription;
+  private selectedTriggerKey: TriggerKey;
 
-  // // Stream of messages
-  // private subscription: Subscription;
-  // public messages: Observable<Message>;
-  // // Subscription status
-  // public subscribed: boolean;
-  // // Array of historic message (bodies)
-  // public mq: Array<string> = [];
+  constructor(
+    private progressRxWebsocketService: ProgressRxWebsocketService,
+    private ngZone: NgZone
+  ) { }
 
+  @Input()
+  set triggerKey(triggerKey: TriggerKey) {
+    if (!triggerKey || !triggerKey.name) {
+      this._unsubscribeFromTopic();
+      this.selectedTriggerKey = null;
+      this._resetProgress();
+      return;
+    }
+
+    if (this.selectedTriggerKey?.name === triggerKey.name) {
+      return;
+    }
+
+    this._resetProgress();
+    this.selectedTriggerKey = {...triggerKey} as TriggerKey;
+    this._subscribeToTheTopic(this.selectedTriggerKey);
+  }
+
+  private _subscribeToTheTopic = (triggerKey: TriggerKey) => {
+    this._unsubscribeFromTopic();
+    this.topicSubscription = this.progressRxWebsocketService.watch(`/topic/progress/${triggerKey.name}`)
+      .pipe(map((msg: any) => JSON.parse(msg.body)))
+      .subscribe(progress => this.ngZone.run(() => this.onNewProgressMsg(progress)), (err) => {
+        console.log(err);
+        // TODO in case of 401
+        // this.apiService.get('/quartz-manager/session/refresh');
+      });
+  };
 
-  constructor(
-    private progressWebsocketService: ProgressWebsocketService,
-    // private _stompService: StompService,
-    // private serverSocket : ServerSocket
-  ) { }
-
-  onNewProgressMsg = (receivedMsg: QuartzManagerWebsocketMessage) => {
-    if (receivedMsg.type === 'SUCCESS') {
-      const newStatus = receivedMsg.message;
-      this.progress = newStatus;
-      this.percentageStr = this.progress.percentage + '%';
-    }
-  }
+  onNewProgressMsg = (receivedMsg) => {
+      this.progress = receivedMsg;
+      this.percentageStr = this.progress.percentage + '%';
+      this._markProgressUpdated();
+  }
 
   ngOnInit() {
-    const obs = this.progressWebsocketService.getObservable()
-    obs.subscribe({
-      'next' : this.onNewProgressMsg,
-      'error' : (err) => {console.log(err)}
-    });
-
-    // this.subscribed = false;
-    // this.subscribe();
-
-    // this.serverSocket.connect()
-    // this.socketSubscription = this.serverSocket.messages.subscribe((message: string) => {
-    //   console.log('received message from server: ', message)
-    // })
-  }
-
-  // public subscribe() {
-  //   if (this.subscribed) {
-  //     return;
-  //   }
-
-  //   // Stream of messages
-  //   this.messages = this._stompService.subscribe('/topic/progress');
-
-  //   // Subscribe a function to be run on_next message
-  //   this.subscription = this.messages.subscribe(this.on_next);
-
-  //   this.subscribed = true;
-  // }
-
-  // public on_next = (message: Message) => {
-  //   this.mq.push(message.body + '\n');
-  //   console.log(message);
-  // }
-
-}
+  }
+
+  ngOnDestroy() {
+    this._unsubscribeFromTopic();
+  }
+
+  private _unsubscribeFromTopic() {
+    if (this.topicSubscription) {
+      this.topicSubscription.unsubscribe();
+      this.topicSubscription = null;
+    }
+  }
+
+  private _resetProgress() {
+    this.progress = ProgressPanelComponent._buildEmptyProgress();
+    this.percentageStr = null;
+    this.progressUpdated = false;
+  }
+
+  private _markProgressUpdated() {
+    this.progressUpdated = false;
+    setTimeout(() => this.progressUpdated = true);
+  }
+
+  private static _buildEmptyProgress() {
+    const progress = new TriggerFiredBundle();
+    progress.percentage = -1;
+    return progress;
+  }
+
+}

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

@@ -1,26 +1,40 @@
-<mat-card>
-	<mat-card-content>
-    <div fxLayout="row" fxLayoutAlign="left stretch" fxLayoutGap="30px">
-      <button id="schedulerControllerBtn" mat-raised-button class="btn btn-default large-btn" (click)="startOrPause()">
-        <span *ngIf = "scheduler?.status === 'RUNNING'">
-          <i class="fas fa-pause red"></i>
-        </span>
-        <span *ngIf = "scheduler?.status === 'STOPPED' || scheduler?.status === 'PAUSED'">
-          <i class="fas fa-play green"></i>
-        </span>
-      </button>
-      <div fxLayout="column center">
-        <mat-card-subtitle style="margin: auto;"><b>SCHEDULER</b></mat-card-subtitle>
-      </div>
-      <mat-divider [vertical]="true"></mat-divider>
-      <div fxLayout="column">
-        <div><label>Name</label></div>
-        <div><span id="scheduler-name">{{scheduler?.name}}</span></div>
-      </div>
-      <div fxLayout="column">
-        <div><label>Instance ID</label></div>
-        <div><span id="scheduler-instance">{{scheduler?.instanceId}}</span></div>
-      </div>
-    </div>
-	</mat-card-content>
-</mat-card>
+<mat-card>
+  <mat-card-content>
+    <div class="flex flex-row align-items-stretch gap-30">
+      <button
+        id="schedulerControllerBtn"
+        mat-raised-button
+        class="btn btn-default large-btn"
+        (click)="startOrPause()">
+        @if (scheduler?.status === 'RUNNING') {
+        <span>
+          <i class="fas fa-pause red"></i>
+        </span>
+        } @if (scheduler?.status === 'STOPPED' || scheduler?.status ===
+        'PAUSED') {
+        <span>
+          <i class="fas fa-play green"></i>
+        </span>
+        }
+      </button>
+      <div class="flex flex-column align-items-center">
+        <mat-card-subtitle style="margin: auto"
+          ><b>SCHEDULER</b></mat-card-subtitle
+        >
+      </div>
+      <mat-divider [vertical]="true"></mat-divider>
+      <div class="flex flex-column justify-space-between">
+        <div><label>Name</label></div>
+        <div>
+          <span id="scheduler-name">{{ scheduler?.name }}</span>
+        </div>
+      </div>
+      <div class="flex flex-column justify-space-between">
+        <div><label>Instance ID</label></div>
+        <div>
+          <span id="scheduler-instance">{{ scheduler?.instanceId }}</span>
+        </div>
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

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

@@ -11,7 +11,12 @@ label{
   font-size: smaller;
 }
 
-#scheduler-name{
-  text-transform: capitalize;
-  font-size: larger;
-}
+#scheduler-name{
+  text-transform: capitalize;
+  font-size: 14px;
+}
+
+#scheduler-instance {
+  text-transform: capitalize;
+  font-size: 14px;
+}

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

@@ -1,4 +1,4 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {SchedulerControlComponent} from './scheduler-control.component';
 import {ApiService, ConfigService, SchedulerService, UserService} from '../../services';
 import {HttpClient} from '@angular/common/http';
@@ -13,13 +13,19 @@ import {MatDividerModule} from '@angular/material/divider';
 
 describe('SchedulerControlComponent', () => {
 
+  const schedulerUrl = '/quartz-manager/scheduler';
+  const schedulerButtonSelector = '#schedulerControllerBtn';
+  const schedulerName = 'test-scheduler';
+  const schedulerId = 'test-id';
+  const stoppedStatus = 'STOPPED';
+
   let component: SchedulerControlComponent;
   let fixture: ComponentFixture<SchedulerControlComponent>;
 
   let httpClient: HttpClient;
   let httpTestingController: HttpTestingController;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [MatCardModule, MatDividerModule, MatIconModule, HttpClientTestingModule, RouterTestingModule],
       declarations: [SchedulerControlComponent],
@@ -38,16 +44,16 @@ describe('SchedulerControlComponent', () => {
 
   it('should display the play button at the beginning since the scheduler is stopped', () => {
     expect(component).toBeDefined();
-    const getSchedulerReq = httpTestingController.expectOne('/quartz-manager/scheduler');
-    const mockScheduler = new Scheduler('test-scheduler', 'test-id', 'STOPPED', []);
+    const getSchedulerReq = httpTestingController.expectOne(schedulerUrl);
+    const mockScheduler = new Scheduler(schedulerName, schedulerId, stoppedStatus, []);
     getSchedulerReq.flush(mockScheduler);
 
     expect(component.scheduler).toEqual(mockScheduler);
-    expect(component.scheduler.status).toEqual('STOPPED');
+    expect(component.scheduler.status).toEqual(stoppedStatus);
     fixture.detectChanges();
 
     const schedulerControlComponentDe: DebugElement = fixture.debugElement;
-    const schedulerBtnDe = schedulerControlComponentDe.query(By.css('#schedulerControllerBtn'));
+    const schedulerBtnDe = schedulerControlComponentDe.query(By.css(schedulerButtonSelector));
     expect(schedulerBtnDe).toBeTruthy();
 
     const playIconDe = schedulerBtnDe.query(By.css('.fa-play'));
@@ -56,23 +62,23 @@ describe('SchedulerControlComponent', () => {
 
   it('should switch the button to pause when the scheduler is started', () => {
     expect(component).toBeDefined();
-    const getSchedulerReq = httpTestingController.expectOne('/quartz-manager/scheduler');
-    const mockScheduler = new Scheduler('test-scheduler', 'test-id', 'STOPPED', []);
+    const getSchedulerReq = httpTestingController.expectOne(schedulerUrl);
+    const mockScheduler = new Scheduler(schedulerName, schedulerId, stoppedStatus, []);
     getSchedulerReq.flush(mockScheduler);
     fixture.detectChanges();
 
     const schedulerControlComponentDe: DebugElement = fixture.debugElement;
-    let schedulerBtnDe = schedulerControlComponentDe.query(By.css('#schedulerControllerBtn'));
+    let schedulerBtnDe = schedulerControlComponentDe.query(By.css(schedulerButtonSelector));
     expect(schedulerBtnDe).toBeTruthy();
     const playIconDe = schedulerBtnDe.query(By.css('.fa-play'));
     expect(playIconDe).toBeTruthy();
 
     schedulerBtnDe.nativeElement.click();
-    const startSchedulerReq = httpTestingController.expectOne('/quartz-manager/scheduler/run');
+    const startSchedulerReq = httpTestingController.expectOne('/quartz-manager/scheduler/start');
     startSchedulerReq.flush(null);
     fixture.detectChanges();
 
-    schedulerBtnDe = schedulerControlComponentDe.query(By.css('#schedulerControllerBtn'));
+    schedulerBtnDe = schedulerControlComponentDe.query(By.css(schedulerButtonSelector));
     const pauseIconDe = schedulerBtnDe.query(By.css('.fa-pause'));
     expect(pauseIconDe).toBeTruthy();
 
@@ -80,23 +86,23 @@ describe('SchedulerControlComponent', () => {
 
   it('should switch the button to play when the scheduler is stopped', () => {
     expect(component).toBeDefined();
-    const getSchedulerReq = httpTestingController.expectOne('/quartz-manager/scheduler');
-    const mockScheduler = new Scheduler('test-scheduler', 'test-id', 'RUNNING', []);
+    const getSchedulerReq = httpTestingController.expectOne(schedulerUrl);
+    const mockScheduler = new Scheduler(schedulerName, schedulerId, 'RUNNING', []);
     getSchedulerReq.flush(mockScheduler);
     fixture.detectChanges();
 
     const schedulerControlComponentDe: DebugElement = fixture.debugElement;
-    let schedulerBtnDe = schedulerControlComponentDe.query(By.css('#schedulerControllerBtn'));
+    let schedulerBtnDe = schedulerControlComponentDe.query(By.css(schedulerButtonSelector));
     expect(schedulerBtnDe).toBeTruthy();
     const pauseIconDe = schedulerBtnDe.query(By.css('.fa-pause'));
     expect(pauseIconDe).toBeTruthy();
 
     schedulerBtnDe.nativeElement.click();
-    const startSchedulerReq = httpTestingController.expectOne('/quartz-manager/scheduler/pause');
+    const startSchedulerReq = httpTestingController.expectOne('/quartz-manager/scheduler/standby');
     startSchedulerReq.flush(null);
     fixture.detectChanges();
 
-    schedulerBtnDe = schedulerControlComponentDe.query(By.css('#schedulerControllerBtn'));
+    schedulerBtnDe = schedulerControlComponentDe.query(By.css(schedulerButtonSelector));
     const playIconDe = schedulerBtnDe.query(By.css('.fa-play'));
     expect(playIconDe).toBeTruthy();
 

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

@@ -2,10 +2,11 @@ import {Component, OnInit} from '@angular/core';
 import {SchedulerService, UserService} from '../../services';
 import {Scheduler} from '../../model/scheduler.model';
 
-@Component({
-  selector: 'qrzmng-scheduler-control',
-  templateUrl: './scheduler-control.component.html',
-  styleUrls: ['./scheduler-control.component.scss']
+@Component({
+    selector: 'qrzmng-scheduler-control',
+    templateUrl: './scheduler-control.component.html',
+    styleUrls: ['./scheduler-control.component.scss'],
+    standalone: false
 })
 export class SchedulerControlComponent implements OnInit {
 
@@ -34,16 +35,16 @@ export class SchedulerControlComponent implements OnInit {
     });
   };
 
-  stopScheduler = function () {
-    this.schedulerService.stopScheduler().subscribe((res) => {
-      this.scheduler.status = 'STOPPED'
+  stopScheduler = function () {
+    this.schedulerService.shutdownScheduler().subscribe((res) => {
+      this.scheduler.status = 'STOPPED'
     }, (res) => {
       console.log(JSON.stringify(res))
     });
   };
 
-  pauseScheduler = function () {
-    this.schedulerService.pauseScheduler().subscribe((res) => {
+  pauseScheduler = function () {
+    this.schedulerService.standbyScheduler().subscribe((res) => {
       this.scheduler.status = 'PAUSED'
     }, (res) => {
       console.log(JSON.stringify(res))

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

@@ -1,198 +1,257 @@
-<mat-card fxFlex="1 1 auto">
-  <mat-card-header>
+<mat-card class="trigger-config-card">
+  <mat-card-header style="padding-bottom: 16px">
     <mat-card-subtitle><b>TRIGGER DETAILS</b></mat-card-subtitle>
   </mat-card-header>
   <mat-divider></mat-divider>
-  <mat-card-content *ngIf="shouldShowTheTriggerCardContent()" style="position: relative; height: 100%">
-    <div fxLayout="column" style="overflow-y: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
-    overflow: auto;height: calc(100% - 3em); padding-top: 1em;">
-      <mat-card id="noEligibleJobsAlert" *ngIf="jobs?.length === 0" style="background-color: #ff6385">
+  @if (shouldShowTheTriggerCardContent()) {
+  <mat-card-content class="trigger-config-content">
+    <div
+      class="flex flex-column"
+      style="
+        overflow-y: auto;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        overflow: auto;
+        padding: 1em;
+      ">
+      @if (jobs?.length === 0) {
+      <mat-card id="noEligibleJobsAlert" style="background-color: #ff6385">
         <mat-card-content>
-          <i class="fas fa-exclamation-circle" style="color: #fff"></i>&nbsp;<strong>WARNING</strong>
-          Not found any eligible job classes for quartz-manager! <br/>
-          <p style="font-size: 0.8em">Please, make sure you have extended <i>AbstractQuartzManagerJob</i> and set the
-          app prop <i>quartz-manager.jobClassPackages</i> with the correct java package </p>
+          <i class="fas fa-exclamation-circle" style="color: #fff"></i
+          >&nbsp;<strong>WARNING</strong> Not found any eligible job classes for
+          quartz-manager! <br />
+          <p style="font-size: 0.8em">
+            Please, make sure you have extended
+            <i>AbstractQuartzManagerJob</i> and set the app prop
+            <i>quartz-manager.jobClassPackages</i> with the correct java package
+          </p>
         </mat-card-content>
       </mat-card>
-      <form name="triggerConfigForm" fxFlex="1 1 100%"
-            [formGroup]="simpleTriggerReactiveForm" (ngSubmit)="onSubmitTriggerConfig()">
+      }
+      <form
+        name="triggerConfigForm"
+        class="trigger-config-form"
+        class="flex-1"
+        [formGroup]="simpleTriggerReactiveForm"
+        (ngSubmit)="onSubmitTriggerConfig()">
         <div>
-          <mat-form-field
-            [appearance]="enabledTriggerForm && !trigger ? 'standard': 'none'"
-            class="full-size-input">
-            <mat-label>Trigger Name *</mat-label>
-            <input id="triggerName"
-                   [readonly]="!enabledTriggerForm || trigger"
-                   matInput placeholder="name of the trigger (unique)"
-                   formControlName="triggerName" name="triggerName">
-            <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerName.errors?.required">
-              Name is <strong>required</strong>
-            </mat-error>
+          <mat-form-field class="full-size-input">
+            <mat-label>Trigger Name</mat-label>
+            <input
+              id="triggerName"
+              matInput
+              placeholder="name of the trigger (unique)"
+              formControlName="triggerName"
+              name="triggerName" />
+            @if
+            (simpleTriggerReactiveForm.controls.triggerName.errors?.required) {
+            <mat-error> Name is <strong>required</strong> </mat-error>
+            }
           </mat-form-field>
         </div>
-
         <div>
-          <mat-form-field
-            [appearance]="enabledTriggerForm ? 'standard': 'none'"
-            class="full-size-input"
-          >
-            <mat-label>Job Class *</mat-label>
-            <mat-select id="jobClass" name="jobClass" formControlName="jobClass" [disabled]="!enabledTriggerForm">
-              <mat-option *ngFor="let job of jobs" [value]="job" style="font-size: 0.8em">
-                {{job}}
+          <mat-form-field class="full-size-input">
+            <mat-label>Job Class</mat-label>
+            <mat-select
+              id="jobClass"
+              name="jobClass"
+              formControlName="jobClass">
+              @for (job of jobs; track job) {
+              <mat-option [value]="job" class="font-13">
+                {{ job }}
               </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="simpleTriggerReactiveForm.controls.jobClass.errors?.required">
-              Job is <strong>required</strong>
-            </mat-error>
+            @if (simpleTriggerReactiveForm.controls.jobClass.errors?.required) {
+            <mat-error> Job is <strong>required</strong> </mat-error>
+            }
           </mat-form-field>
         </div>
-
         <div>
-          <mat-form-field
-            [appearance]="enabledTriggerForm ? 'standard': 'none'"
-            class="full-size-input"
-          >
-            <mat-label>Misfire Instruction *</mat-label>
-            <mat-select id="misfireInstruction" name="misfireInstruction" formControlName="misfireInstruction"
-                        [disabled]="!enabledTriggerForm" style="font-size: 0.8em">
-              <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
+          <mat-form-field class="full-size-input">
+            <mat-label>Misfire Instruction</mat-label>
+            <mat-select
+              id="misfireInstruction"
+              name="misfireInstruction"
+              formControlName="misfireInstruction">
+              <mat-option class="font-13" value="MISFIRE_INSTRUCTION_FIRE_NOW"
+                >FIRE NOW</mat-option
+              >
+              <mat-option
+                class="font-13"
+                value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT"
+                >RESCHEDULE NOW WITH EXISTING REPEAT COUNT
               </mat-option>
-              <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT">RESCHEDULE NOW WITH
-                REMAINING REPEAT COUNT
+              <mat-option
+                class="font-13"
+                value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT"
+                >RESCHEDULE NOW WITH REMAINING REPEAT COUNT
               </mat-option>
-              <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_REMAINING_COUNT">RESCHEDULE NEXT WITH
-                REMAINING COUNT
+              <mat-option
+                class="font-13"
+                value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_REMAINING_COUNT"
+                >RESCHEDULE NEXT WITH REMAINING COUNT
               </mat-option>
-              <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_EXISTING_COUNT">RESCHEDULE NEXT WITH EXISTING
-                COUNT
+              <mat-option
+                class="font-13"
+                value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_EXISTING_COUNT"
+                >RESCHEDULE NEXT WITH EXISTING COUNT
               </mat-option>
             </mat-select>
-            <mat-error *ngIf="simpleTriggerReactiveForm.controls.misfireInstruction.errors?.required">
+            @if
+            (simpleTriggerReactiveForm.controls.misfireInstruction.errors?.required)
+            {
+            <mat-error>
               The misfire instruction is <strong>required</strong>
             </mat-error>
+            }
           </mat-form-field>
           <div class="small" [innerHTML]="getMisfireInstructionCaption()"></div>
         </div>
-
-        <br/>
-
+        <br />
         <div formGroupName="triggerPeriod">
           <div>
-            <mat-form-field
-              [appearance]="enabledTriggerForm ? 'standard': 'none'"
-              class="full-size-input"
-            >
+            <mat-form-field class="full-size-input">
               <mat-label>Start Date (optional)</mat-label>
-              <input id="startDate"
-                     [readonly]="!enabledTriggerForm"
-                     matInput
-                     [ngxMatDatetimePicker]="startDatePicker" placeholder="Choose a start date"
-                     formControlName="startDate" name="startDate">
-              <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
-              <ngx-mat-datetime-picker #startDatePicker showSpinners="true" showSeconds="true">
-                <!--                                       [stepHour]="stepHour"-->
-                <!--                                       [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi" [color]="color"-->
-                <!--                                       [enableMeridian]="enableMeridian" [disableMinute]="disableMinute" [hideTime]="hideTime">-->
-              </ngx-mat-datetime-picker>
+              <input
+                id="startDate"
+                matInput
+                [owlDateTime]="startDatePicker"
+                [owlDateTimeTrigger]="startDatePicker"
+                placeholder="Choose a start date"
+                formControlName="startDate"
+                name="startDate" />
+              <button
+                type="button"
+                class="datetime-picker-trigger"
+                mat-icon-button
+                matSuffix
+                [owlDateTimeTrigger]="startDatePicker">
+                <mat-icon>event</mat-icon>
+              </button>
+              <owl-date-time
+                #startDatePicker
+                [showSecondsTimer]="true">
+              </owl-date-time>
             </mat-form-field>
           </div>
-
           <div>
-            <mat-form-field
-              [appearance]="enabledTriggerForm ? 'standard': 'none'"
-              class="full-size-input"
-            >
+            <mat-form-field class="full-size-input">
               <mat-label>End Date (optional)</mat-label>
-              <input id="endDate"
-                     [readonly]="!enabledTriggerForm"
-                     matInput
-                     [ngxMatDatetimePicker]="endDatePicker" placeholder="Choose a end date"
-                     formControlName="endDate" name="endDate"
-              >
-              <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
-              <ngx-mat-datetime-picker #endDatePicker showSpinners="true" showSeconds="true">
-                <!--                                       [stepHour]="stepHour"-->
-                <!--                                       [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi" [color]="color"-->
-                <!--                                       [enableMeridian]="enableMeridian" [disableMinute]="disableMinute" [hideTime]="hideTime">-->
-              </ngx-mat-datetime-picker>
+              <input
+                id="endDate"
+                matInput
+                [owlDateTime]="endDatePicker"
+                [owlDateTimeTrigger]="endDatePicker"
+                placeholder="Choose a end date"
+                formControlName="endDate"
+                name="endDate" />
+              <button
+                type="button"
+                class="datetime-picker-trigger"
+                mat-icon-button
+                matSuffix
+                [owlDateTimeTrigger]="endDatePicker">
+                <mat-icon>event</mat-icon>
+              </button>
+              <owl-date-time
+                #endDatePicker
+                [showSecondsTimer]="true">
+              </owl-date-time>
             </mat-form-field>
-            <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerPeriod.errors?.invalidTriggerPeriod" style="font-size: small">
-              the end date cannot be  <strong>before</strong> the start date
+            @if
+            (simpleTriggerReactiveForm.controls.triggerPeriod.errors?.invalidTriggerPeriod)
+            {
+            <mat-error style="font-size: small">
+              the end date cannot be <strong>before</strong> the start date
             </mat-error>
+            }
           </div>
         </div>
-
         <div formGroupName="triggerRecurrence">
           <div>
-            <mat-form-field
-              [appearance]="enabledTriggerForm ? 'standard': 'none'"
-              class="full-size-input"
-            >
+            <mat-form-field class="full-size-input">
               <mat-label>Repeat Interval [in mills]</mat-label>
-              <input id="repeatInterval"
-                     [readonly]="!enabledTriggerForm"
-                     matInput placeholder="Repeat Interval [in mills]" type="number"
-                     formControlName="repeatInterval" name="repeatInterval"
-              >
-              <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerRecurrence.errors?.invalidTriggerRecurrence">
-                repeatCount and repeatInterval must be <strong>both</strong> set or unset
+              <input
+                id="repeatInterval"
+                matInput
+                placeholder="Repeat Interval [in mills]"
+                type="number"
+                formControlName="repeatInterval"
+                name="repeatInterval" />
+              @if
+              (simpleTriggerReactiveForm.controls.triggerRecurrence.errors?.invalidTriggerRecurrence)
+              {
+              <mat-error>
+                repeatCount and repeatInterval must be <strong>both</strong> set
+                or unset
               </mat-error>
+              }
             </mat-form-field>
-            <!--            <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerRecurrence.errors?.invalidTriggerRecurrence" style="font-size: small">-->
-            <!--              repeatCount and repeatInterval must be <strong>both</strong> set or unset-->
-            <!--            </mat-error>-->
           </div>
           <div>
-            <mat-form-field
-              [appearance]="enabledTriggerForm ? 'standard': 'none'"
-              class="full-size-input"
-            >
+            <mat-form-field class="full-size-input">
               <mat-label>Repeat Count</mat-label>
-              <input id="repeatCount"
-                     [readonly]="!enabledTriggerForm"
-                     matInput placeholder="Repeat Count (-1 REPEAT INDEFINITELY)" type="number"
-                     formControlName="repeatCount" name="repeatCount"
-              >
-              <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerRecurrence.errors?.invalidTriggerRecurrence">
-                repeatCount and repeatInterval must be <strong>both</strong> set or unset
+              <input
+                id="repeatCount"
+                matInput
+                placeholder="Repeat Count (-1 REPEAT INDEFINITELY)"
+                type="number"
+                formControlName="repeatCount"
+                name="repeatCount" />
+              @if
+              (simpleTriggerReactiveForm.controls.triggerRecurrence.errors?.invalidTriggerRecurrence)
+              {
+              <mat-error>
+                repeatCount and repeatInterval must be <strong>both</strong> set
+                or unset
               </mat-error>
+              }
             </mat-form-field>
-
           </div>
         </div>
-
-        <br/>
-
-        <div fxLayout="row" fxFlexAlign="space-evenly center" style="padding-bottom: 1em;">
-          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="enabledTriggerForm">
-            <button mat-raised-button
-                    type="button"
-                    *ngIf="enabledTriggerForm"
-                    (click)="onResetReactiveForm()">
+        <br />
+        <div
+          class="flex flex-row align-items-center justify-space-evenly"
+          style="padding-bottom: 1em">
+          @if (simpleTriggerReactiveForm.enabled) {
+          <div class="flex-1" style="text-align: center">
+            <button
+              mat-raised-button
+              type="button"
+              (click)="onResetReactiveForm()">
               Cancel
             </button>
           </div>
-          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="enabledTriggerForm">
-            <button mat-raised-button
-                    type="submit" color="primary"
-                    [disabled]="simpleTriggerReactiveForm.invalid"
-                    *ngIf="enabledTriggerForm">
+          } @if (simpleTriggerReactiveForm.enabled) {
+          <div class="flex-1" style="text-align: center">
+            <button
+              mat-raised-button
+              type="submit"
+              color="primary"
+              [disabled]="simpleTriggerReactiveForm.invalid">
               Submit
             </button>
           </div>
-          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="!enabledTriggerForm">
-            <button mat-raised-button type="button"
-            *ngIf="!enabledTriggerForm"
-            (click)="enabledTriggerForm = true">
-            Reschedule
+          } @if (!simpleTriggerReactiveForm.enabled) {
+          <div class="flex-1" style="text-align: center">
+            <button
+              mat-raised-button
+              type="button"
+              (click)="
+                openTriggerForm();
+                simpleTriggerReactiveForm.controls['triggerName'].disable()
+              ">
+              Reschedule
             </button>
           </div>
+          }
         </div>
-
       </form>
     </div>
   </mat-card-content>
+  }
 </mat-card>

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

@@ -1,3 +1,23 @@
+:host {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+}
+
+.trigger-config-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.trigger-config-content {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
 .small{
     font-size: 0.8em;
 }
@@ -5,6 +25,22 @@
 .full-size-input{
   width: 100%;
 }
+
+:host ::ng-deep .trigger-config-form .mat-mdc-form-field {
+  font-size: 13px;
+}
+
+:host ::ng-deep .trigger-config-form .mat-mdc-select-value,
+:host ::ng-deep .trigger-config-form .mat-mdc-select-value-text,
+:host ::ng-deep .trigger-config-form .mat-mdc-input-element,
+:host ::ng-deep .trigger-config-form .mdc-floating-label {
+  font-size: 13px;
+}
+
+:host ::ng-deep .trigger-config-form .mat-mdc-select-trigger {
+  min-height: 20px;
+}
+
 /* ===== Scrollbar CSS ===== */
 /* Firefox */
 * {

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

@@ -1,4 +1,4 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, fakeAsync, flush, TestBed, waitForAsync} from '@angular/core/testing';
 import {MatCardModule} from '@angular/material/card';
 import {SimpleTriggerConfigComponent} from './simple-trigger-config.component';
 import {ApiService, ConfigService, CONTEXT_PATH, SchedulerService} from '../../services';
@@ -12,7 +12,7 @@ import {FormBuilder, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatNativeDateModule} from '@angular/material/core';
 import {MatInputModule} from '@angular/material/input';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {TriggerKey} from '../../model/triggerKey.model';
 import {Trigger} from '../../model/trigger.model';
 import {JobDetail} from '../../model/jobDetail.model';
@@ -23,15 +23,20 @@ import {MisfireInstruction} from '../../model/misfire-instruction.model';
 
 describe('SimpleTriggerConfig', () => {
 
+  const submitButtonSelector = 'form button[color="primary"]';
+  const repeatIntervalSelector = '#repeatInterval';
+  const testTriggerName = 'test-trigger';
+  const testJobName = 'TestJob';
+
   let component: SimpleTriggerConfigComponent;
   let fixture: ComponentFixture<SimpleTriggerConfigComponent>;
 
   let httpClient: HttpClient;
   let httpTestingController: HttpTestingController;
 
-  beforeEach(async( () => {
+  beforeEach(waitForAsync( () => {
     TestBed.configureTestingModule({
-      imports: [FormsModule,  MatFormFieldModule, MatFormFieldModule, MatSelectModule, MatInputModule, BrowserAnimationsModule,
+      imports: [FormsModule,  MatFormFieldModule, MatFormFieldModule, MatSelectModule, MatInputModule, NoopAnimationsModule,
         MatNativeDateModule, ReactiveFormsModule,
         MatCardModule, MatIconModule, HttpClientTestingModule, RouterTestingModule],
       declarations: [SimpleTriggerConfigComponent],
@@ -51,7 +56,7 @@ describe('SimpleTriggerConfig', () => {
 
   it('should fetch no triggers at the init', () => {
     expect(component).toBeTruthy();
-    httpTestingController.expectNone(`${CONTEXT_PATH}/simple-triggers/my-simple-trigger`);
+    httpTestingController.expectNone(`${CONTEXT_PATH}/simple-triggers/DEFAULT/my-simple-trigger`);
   });
 
   function setInputValue(componentDe: DebugElement, inputSelector: string, value: string) {
@@ -81,7 +86,7 @@ describe('SimpleTriggerConfig', () => {
     const dropdownDe = componentDe.query(By.css(dropdownSelector));
     dropdownDe.nativeElement.click();
     fixture.detectChanges();
-    const matOptionDe = componentDe.query(By.css('.mat-select-panel')).queryAll(By.css('.mat-option'));
+    const matOptionDe = componentDe.query(By.css('.mat-mdc-select-panel')).queryAll(By.css('.mat-mdc-option'));
     matOptionDe[index].nativeElement.click();
     fixture.detectChanges();
   }
@@ -90,17 +95,17 @@ describe('SimpleTriggerConfig', () => {
     component.openTriggerForm();
     fixture.detectChanges();
 
-    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/jobs`);
-    getJobsReq.flush(['TestJob']);
+    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/job-classes`);
+    getJobsReq.flush([testJobName]);
 
     const componentDe: DebugElement = fixture.debugElement;
 
-    const submitButton = componentDe.query(By.css('form button[color="primary"]'));
+    const submitButton = componentDe.query(By.css(submitButtonSelector));
     expect(submitButton.nativeElement.textContent.trim()).toEqual('Submit');
     expect(submitButton.nativeElement.getAttribute('disabled')).toEqual('');
 
-    setInputValue(componentDe, '#triggerName', 'test-trigger');
-    expect(component.simpleTriggerReactiveForm.controls.triggerName.value).toEqual('test-trigger');
+    setInputValue(componentDe, '#triggerName', testTriggerName);
+    expect(component.simpleTriggerReactiveForm.controls.triggerName.value).toEqual(testTriggerName);
     expect(submitButton.nativeElement.getAttribute('disabled')).toEqual('');
     setMatSelectValueByIndex(componentDe, '#misfireInstruction', 0);
     expect(component.simpleTriggerReactiveForm.controls.misfireInstruction.value).toEqual('MISFIRE_INSTRUCTION_FIRE_NOW');
@@ -111,7 +116,7 @@ describe('SimpleTriggerConfig', () => {
     setInputValue(componentDe, '#repeatCount', '1000');
     expect(submitButton.nativeElement.getAttribute('disabled')).toEqual('');
 
-    setInputValue(componentDe, '#repeatInterval', '2000');
+    setInputValue(componentDe, repeatIntervalSelector, '2000');
     expect(submitButton.nativeElement.getAttribute('disabled')).toEqual(null);
   }
 
@@ -119,50 +124,54 @@ describe('SimpleTriggerConfig', () => {
     openFormAndFillAllMandatoryFields();
   });
 
-  it('should emit an event when a new trigger is submitted', () => {
+  it('should emit an event when a new trigger is submitted', fakeAsync(() => {
     const componentDe: DebugElement = fixture.debugElement;
     const mockTrigger = new Trigger();
-    mockTrigger.triggerKeyDTO = new TriggerKey('test-trigger', null);
-    mockTrigger.jobDetailDTO = <JobDetail>{jobClassName: 'TestJob', description: null};
+    mockTrigger.triggerKeyDTO = new TriggerKey(testTriggerName, null);
+    mockTrigger.jobDetailDTO = <JobDetail>{jobClassName: testJobName, description: null};
     mockTrigger.misfireInstruction = MisfireInstruction.MISFIRE_INSTRUCTION_FIRE_NOW;
 
     openFormAndFillAllMandatoryFields();
 
-    setInputValue(componentDe, '#repeatInterval', '2000');
+    setInputValue(componentDe, repeatIntervalSelector, '2000');
     expect(component.simpleTriggerReactiveForm.controls.triggerRecurrence.value.repeatInterval).toEqual(2000);
     setInputValue(componentDe, '#repeatCount', '100');
     expect(component.simpleTriggerReactiveForm.controls.triggerRecurrence.value.repeatCount).toEqual(100);
 
-    const submitButton = componentDe.query(By.css('form button[color="primary"]'));
+    const submitButton = componentDe.query(By.css(submitButtonSelector));
     expect(submitButton.nativeElement.textContent.trim()).toEqual('Submit');
 
     let actualNewTrigger;
     component.onNewTrigger.subscribe(simpleTrigger => actualNewTrigger = simpleTrigger);
+    let submittedTriggerKey: TriggerKey;
+    component.onTriggerSubmitting.subscribe(triggerKey => submittedTriggerKey = triggerKey);
 
     submitButton.nativeElement.click();
+    expect(submittedTriggerKey).toEqual(new TriggerKey(testTriggerName, null));
+    flush();
 
-    const postSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/test-trigger`);
+    const postSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/DEFAULT/${testTriggerName}`);
     postSimpleTriggerReq.flush(mockTrigger);
 
     expect(actualNewTrigger).toEqual(mockTrigger);
-  });
+  }));
 
   it('should not emit an event when an existing trigger is edited', () => {
-    const mockTriggerKey = new TriggerKey('test-trigger', null);
+    const mockTriggerKey = new TriggerKey(testTriggerName, null);
     component.triggerKey = mockTriggerKey;
     fixture.detectChanges();
 
     const mockTrigger = new SimpleTrigger();
-    mockTrigger.triggerKeyDTO = new TriggerKey('test-trigger', null);
-    mockTrigger.jobDetailDTO = <JobDetail>{jobClassName: 'TestJob', description: null};
+    mockTrigger.triggerKeyDTO = new TriggerKey(testTriggerName, null);
+    mockTrigger.jobDetailDTO = <JobDetail>{jobClassName: testJobName, description: null};
     mockTrigger.mayFireAgain = true;
     mockTrigger.misfireInstruction = MisfireInstruction.MISFIRE_INSTRUCTION_FIRE_NOW;
-    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/test-trigger`);
+    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/DEFAULT/${testTriggerName}`);
     getSimpleTriggerReq.flush(mockTrigger);
 
     component.simpleTriggerReactiveForm.setValue({
-      triggerName: 'test-trigger',
-      jobClass: 'TestJob',
+      triggerName: testTriggerName,
+      jobClass: testJobName,
       triggerRecurrence: {
         repeatInterval: 2000,
         repeatCount: 100,
@@ -178,10 +187,10 @@ describe('SimpleTriggerConfig', () => {
     fixture.detectChanges();
 
     const componentDe: DebugElement = fixture.debugElement;
-    setInputValue(componentDe, '#repeatInterval', '4000');
+    setInputValue(componentDe, repeatIntervalSelector, '4000');
     expect(component.simpleTriggerReactiveForm.controls.triggerRecurrence.value.repeatInterval).toEqual(4000);
 
-    const submitButton = componentDe.query(By.css('form button[color="primary"]'));
+    const submitButton = componentDe.query(By.css(submitButtonSelector));
     expect(submitButton.nativeElement.textContent.trim()).toEqual('Submit');
 
     let actualNewTrigger;
@@ -189,7 +198,7 @@ describe('SimpleTriggerConfig', () => {
 
     submitButton.nativeElement.click();
 
-    const putSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/test-trigger`);
+    const putSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/DEFAULT/${testTriggerName}`);
     putSimpleTriggerReq.flush(mockTrigger);
 
     expect(actualNewTrigger).toBeUndefined();
@@ -198,16 +207,20 @@ describe('SimpleTriggerConfig', () => {
   it('should fetch and display the trigger when the triggerKey is passed as input', () => {
     const mockTriggerKey = new TriggerKey('my-simple-trigger', null);
     component.triggerKey = mockTriggerKey;
-    fixture.detectChanges();
+
+    component.trigger = new SimpleTrigger();
+    component.trigger.triggerKeyDTO = mockTriggerKey;
 
     const mockTrigger = new Trigger();
     mockTrigger.triggerKeyDTO = mockTriggerKey;
     mockTrigger.jobDetailDTO = <JobDetail>{jobClassName: 'TestJob', description: null};
-    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/my-simple-trigger`);
+    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/DEFAULT/my-simple-trigger`);
     getSimpleTriggerReq.flush(mockTrigger);
 
+    fixture.detectChanges();
+
     const componentDe: DebugElement = fixture.debugElement;
-    const submitButton = componentDe.query(By.css('form button'));
+    const submitButton = componentDe.query(By.css('form button:not(.datetime-picker-trigger)'));
     expect(submitButton.nativeElement.textContent.trim()).toEqual('Reschedule');
   });
 
@@ -216,16 +229,55 @@ describe('SimpleTriggerConfig', () => {
     fixture.detectChanges();
 
     const componentDe: DebugElement = fixture.debugElement;
-    const submitButton = componentDe.query(By.css('form button[color="primary"]'));
+    const submitButton = componentDe.query(By.css(submitButtonSelector));
     expect(submitButton.nativeElement.textContent.trim()).toEqual('Submit');
+
+    expect(component.simpleTriggerReactiveForm.value.triggerName).toBeNull();
+
+  });
+
+  it('should reset the form when a new trigger is selected', () => {
+    const mockTriggerKey = new TriggerKey(testTriggerName, null);
+    component.triggerKey = mockTriggerKey;
+
+    const mockTrigger = new SimpleTrigger();
+    mockTrigger.triggerKeyDTO = mockTriggerKey;
+    mockTrigger.jobDetailDTO = <JobDetail>{jobClassName: testJobName, description: null};
+    mockTrigger.mayFireAgain = true;
+    mockTrigger.misfireInstruction = MisfireInstruction.MISFIRE_INSTRUCTION_FIRE_NOW;
+
+    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/DEFAULT/${testTriggerName}`);
+    getSimpleTriggerReq.flush(mockTrigger);
+
+    expect(component.simpleTriggerReactiveForm.value.triggerName).toEqual(testTriggerName);
+
+    component.openNewTriggerForm();
+
+    expect(component.simpleTriggerReactiveForm.value.triggerName).toBeNull();
+    expect(component.simpleTriggerReactiveForm.value.jobClass).toBeNull();
+    expect(component.shouldShowTheTriggerCardContent()).toBeTruthy();
+
+  });
+
+  it('should not emit form open changes while applying a null trigger input', () => {
+    let formOpenChangeEmitted = false;
+    component.triggerFormOpenChange.subscribe(() => formOpenChangeEmitted = true);
+
+    component.triggerKey = null;
+
+    expect(formOpenChangeEmitted).toBeFalsy();
+    expect(component.shouldShowTheTriggerCardContent()).toBeFalsy();
   });
 
   it('should display the warning if there are no eligible jobs', () => {
     fixture.detectChanges();
-    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/jobs`);
+    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/job-classes`);
     getJobsReq.flush([]);
     fixture.detectChanges();
 
+    component.openTriggerForm();
+    fixture.detectChanges();
+
     const componentDe: DebugElement = fixture.debugElement;
     const warningCard = componentDe.query(By.css('#noEligibleJobsAlert'));
     expect(warningCard).toBeTruthy();
@@ -233,10 +285,13 @@ describe('SimpleTriggerConfig', () => {
 
   it('should not display the warning if there are eligible jobs', () => {
     fixture.detectChanges();
-    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/jobs`);
+    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/job-classes`);
     getJobsReq.flush(['sampleJob']);
     fixture.detectChanges();
 
+    component.openTriggerForm();
+    fixture.detectChanges();
+
     const componentDe: DebugElement = fixture.debugElement;
     const warningCard = componentDe.query(By.css('#noEligibleJobsAlert'));
     expect(warningCard).toBeFalsy();

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

@@ -3,28 +3,27 @@ import {SchedulerService} from '../../services';
 import {Scheduler} from '../../model/scheduler.model';
 import {SimpleTriggerCommand} from '../../model/simple-trigger.command';
 import {SimpleTrigger} from '../../model/simple-trigger.model';
-import {SimpleTriggerForm} from '../../model/simple-trigger.form';
-import * as moment from 'moment';
 import {TriggerKey} from '../../model/triggerKey.model';
 import JobService from '../../services/job.service';
 import {MisfireInstruction, MisfireInstructionCaption} from '../../model/misfire-instruction.model';
-import {AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators} from '@angular/forms';
+import {AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidationErrors, Validators} from '@angular/forms';
 
 @Component({
-  selector: 'qrzmng-simple-trigger-config',
-  templateUrl: './simple-trigger-config.component.html',
-  styleUrls: ['./simple-trigger-config.component.scss']
+    selector: 'qrzmng-simple-trigger-config',
+    templateUrl: './simple-trigger-config.component.html',
+    styleUrls: ['./simple-trigger-config.component.scss'],
+    standalone: false
 })
 export class SimpleTriggerConfigComponent implements OnInit {
 
-  trigger: SimpleTrigger;
+  trigger: SimpleTrigger = null;
 
-  simpleTriggerReactiveForm: FormGroup = this.formBuilder.group({
+  simpleTriggerReactiveForm: UntypedFormGroup = this.formBuilder.group({
     triggerName: [this.trigger?.triggerKeyDTO.name, Validators.required],
     jobClass: [this.trigger?.jobDetailDTO.jobClassName, Validators.required],
     triggerPeriod: this.formBuilder.group({
-      startDate: [this.trigger?.startTime && moment(this.trigger?.startTime)],
-      endDate: [this.trigger?.endTime && moment(this.trigger?.endTime)]
+      startDate: [this.trigger?.startTime && new Date(this.trigger.startTime)],
+      endDate: [this.trigger?.endTime && new Date(this.trigger.endTime)]
     }, {validators: this._triggerPeriodValidator}),
     triggerRecurrence: this.formBuilder.group({
       repeatCount: [this.trigger?.repeatCount],
@@ -35,28 +34,32 @@ export class SimpleTriggerConfigComponent implements OnInit {
 
   scheduler: Scheduler;
 
-  triggerLoading = true;
+  triggerLoading = false;
 
-  private fetchedTriggers = false;
   private triggerInProgress = false;
 
   private selectedTriggerKey: TriggerKey;
 
   private jobs: Array<String>;
 
-  enabledTriggerForm = false;
-
   @Output()
   onNewTrigger = new EventEmitter<SimpleTrigger>();
 
+  @Output()
+  triggerFormOpenChange = new EventEmitter<boolean>();
+
+  @Output()
+  onTriggerSubmitting = new EventEmitter<TriggerKey>();
+
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private schedulerService: SchedulerService,
     private jobService: JobService
   ) {
   }
 
   ngOnInit() {
+    this.simpleTriggerReactiveForm.disable();
     this.fetchJobs();
   }
 
@@ -65,19 +68,38 @@ export class SimpleTriggerConfigComponent implements OnInit {
   }
 
   openTriggerForm() {
-    this.enabledTriggerForm = true;
+    this.simpleTriggerReactiveForm.enable();
+    this.triggerFormOpenChange.emit(true);
   }
 
   private closeTriggerForm() {
-    this.enabledTriggerForm = false;
+    this.simpleTriggerReactiveForm.disable();
+    this.triggerFormOpenChange.emit(false);
   }
 
   @Input()
   set triggerKey(triggerKey: TriggerKey) {
-    this.selectedTriggerKey = {...triggerKey} as TriggerKey;
-    this.fetchSelectedTrigger();
+    if (!triggerKey) {
+      return;
+    } else if (!this.selectedTriggerKey || this.selectedTriggerKey.name !== triggerKey.name) {
+      this._resetTheTrigger();
+      this.selectedTriggerKey = {...triggerKey} as TriggerKey;
+      this.fetchSelectedTrigger();
+      this.simpleTriggerReactiveForm.disable();
+    }
   }
 
+  openNewTriggerForm() {
+    this._resetTheTrigger();
+    this.openTriggerForm();
+  }
+
+  private _resetTheTrigger() {
+    this.trigger = null;
+    this.triggerInProgress = false;
+    this.selectedTriggerKey = null;
+    this.simpleTriggerReactiveForm.reset(new SimpleTriggerReactiveForm());
+  }
 
   fetchSelectedTrigger = () => {
     this.triggerLoading = true;
@@ -87,15 +109,20 @@ export class SimpleTriggerConfigComponent implements OnInit {
         this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(retTrigger))
         this.triggerLoading = false;
         this.triggerInProgress = this.trigger.mayFireAgain;
+        this.simpleTriggerReactiveForm.disable();
       })
   }
 
-  shouldShowTheTriggerCardContent = (): boolean => this.trigger !== null || this.enabledTriggerForm;
+  shouldShowTheTriggerCardContent = (): boolean => this.trigger !== null || this.simpleTriggerReactiveForm.enabled;
 
   existsATriggerInProgress = (): boolean => this.trigger && this.triggerInProgress;
 
   onResetReactiveForm = () => {
-    this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(this.trigger));
+    if (this.trigger) {
+      this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(this.trigger));
+    } else {
+      this.simpleTriggerReactiveForm.reset(new SimpleTriggerReactiveForm());
+    }
     this.closeTriggerForm();
   };
 
@@ -104,13 +131,24 @@ export class SimpleTriggerConfigComponent implements OnInit {
       this.schedulerService.updateSimpleTriggerConfig : this.schedulerService.saveSimpleTriggerConfig;
 
     const simpleTriggerCommand = this._fromReactiveFormToCommand();
+    if (!this.trigger) {
+      this.onTriggerSubmitting.emit(new TriggerKey(simpleTriggerCommand.triggerName, null));
+      setTimeout(() => this.submitTriggerConfig(schedulerServiceCall, simpleTriggerCommand));
+      return;
+    }
+
+    this.submitTriggerConfig(schedulerServiceCall, simpleTriggerCommand);
+
+  }
+
+  private submitTriggerConfig(schedulerServiceCall, simpleTriggerCommand: SimpleTriggerCommand) {
+    this.triggerLoading = true;
     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) {
@@ -119,16 +157,20 @@ export class SimpleTriggerConfigComponent implements OnInit {
 
         this.closeTriggerForm();
       }, error => {
-        this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(this.trigger));
+        if (this.trigger) {
+          this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(this.trigger));
+        }
+        this.triggerLoading = false;
+      }, () => {
+        this.triggerLoading = false;
       });
-
   }
 
   private _triggerPeriodValidator(control: AbstractControl): ValidationErrors | null {
     const startDate = control.get('startDate');
     const endDate = control.get('endDate');
     if (startDate.value && endDate.value) {
-      return endDate.value.isBefore(startDate.value) ?
+      return endDate.value < startDate.value ?
         <ValidationErrors>{invalidTriggerPeriod: true} : null;
     }
     return null;
@@ -154,22 +196,23 @@ export class SimpleTriggerConfigComponent implements OnInit {
     simpleTriggerReactiveForm.jobClass = simpleTrigger.jobDetailDTO.jobClassName;
     simpleTriggerReactiveForm.triggerRecurrence.repeatCount = simpleTrigger.repeatCount || null;
     simpleTriggerReactiveForm.triggerRecurrence.repeatInterval = simpleTrigger.repeatInterval || null;
-    simpleTriggerReactiveForm.triggerPeriod.startDate = (simpleTrigger.startTime && moment(simpleTrigger.startTime)) || null;
-    simpleTriggerReactiveForm.triggerPeriod.endDate = (simpleTrigger.endTime && moment(simpleTrigger.endTime)) || null;
+    simpleTriggerReactiveForm.triggerPeriod.startDate = (simpleTrigger.startTime && new Date(simpleTrigger.startTime)) || null;
+    simpleTriggerReactiveForm.triggerPeriod.endDate = (simpleTrigger.endTime && new Date(simpleTrigger.endTime)) || null;
     simpleTriggerReactiveForm.misfireInstruction = (simpleTrigger.misfireInstruction
       && MisfireInstruction[simpleTrigger.misfireInstruction]) || null;
     return simpleTriggerReactiveForm;
   };
 
   private _fromReactiveFormToCommand = (): SimpleTriggerCommand => {
-    const reactiveFormValue = this.simpleTriggerReactiveForm.value;
+    const reactiveFormValue = this.simpleTriggerReactiveForm.getRawValue();
     const simpleTriggerCommand = new SimpleTriggerCommand();
     simpleTriggerCommand.triggerName = reactiveFormValue.triggerName;
+    simpleTriggerCommand.triggerGroup = this.selectedTriggerKey?.group || 'DEFAULT';
     simpleTriggerCommand.jobClass = reactiveFormValue.jobClass;
     simpleTriggerCommand.repeatCount = reactiveFormValue.triggerRecurrence.repeatCount;
     simpleTriggerCommand.repeatInterval = reactiveFormValue.triggerRecurrence.repeatInterval;
-    simpleTriggerCommand.startDate = reactiveFormValue.triggerPeriod.startDate?.toDate();
-    simpleTriggerCommand.endDate = reactiveFormValue.triggerPeriod.endDate?.toDate();
+    simpleTriggerCommand.startDate = reactiveFormValue.triggerPeriod.startDate;
+    simpleTriggerCommand.endDate = reactiveFormValue.triggerPeriod.endDate;
     simpleTriggerCommand.misfireInstruction = reactiveFormValue.misfireInstruction;
     return simpleTriggerCommand;
   }

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

@@ -1,17 +1,42 @@
-<mat-card fxFlex="1 1 auto" style="padding-left: 0; padding-right: 0">
-  <mat-card-header fxLayout="row" fxLayoutAlign="space-between none" style="padding-right: 1em;" >
+<mat-card class="trigger-list-card" style="padding-left: 0; padding-right: 0">
+  <mat-card-header
+    class="flex flex-row justify-space-between"
+    style="padding-right: 1em">
     <mat-card-subtitle><b>TRIGGERS</b></mat-card-subtitle>
-    <button *ngIf="!triggerFormIsOpen" mat-raised-button style="top: -0.5em" color="primary" (click)="onNewTriggerBtnClicked()">
+    @if (!triggerFormIsOpen) {
+    <button
+      mat-raised-button
+      style="top: -0.5em"
+      color="primary"
+      (click)="onNewTriggerBtnClicked()">
       new
     </button>
+    }
   </mat-card-header>
   <mat-divider></mat-divider>
-  <mat-card-content style="position: relative; height: 100%">
-    <mat-nav-list  style="overflow-y: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; height: calc(100% - 3em)">
-      <mat-list-item *ngFor="let triggerKey of getTriggerKeyList()" class="triggerItemList"
-                     [ngClass]="{'selectedTrigger': selectedTrigger && selectedTrigger.name==triggerKey.name}">
+  <mat-card-content class="trigger-list-content">
+    <mat-nav-list
+      style="
+        overflow-y: auto;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        overflow: auto;
+        height: calc(100% - 3em);
+      ">
+      @for (triggerKey of getTriggerKeyList(); track triggerKey) {
+      <mat-list-item
+        class="triggerItemList"
+        [ngClass]="{
+          selectedTrigger:
+            selectedTrigger && selectedTrigger.name == triggerKey.name
+        }"
+        (click)="selectTrigger(triggerKey)">
         <a matLine>{{ triggerKey.name }}</a>
       </mat-list-item>
+      }
     </mat-nav-list>
   </mat-card-content>
 </mat-card>

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

@@ -1,3 +1,23 @@
+:host {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+}
+
+.trigger-list-card {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.trigger-list-content {
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
 /* ===== Scrollbar CSS ===== */
 /* Firefox */
 * {

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

@@ -1,4 +1,4 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {ApiService, ConfigService, CONTEXT_PATH, TriggerService} from '../../services';
 import {HttpClient} from '@angular/common/http';
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
@@ -21,7 +21,7 @@ describe('TriggerListComponent', () => {
   let httpClient: HttpClient;
   let httpTestingController: HttpTestingController;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [MatCardModule, MatDialogModule, MatDividerModule,
         MatIconModule, MatListModule, HttpClientTestingModule, RouterTestingModule],

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

@@ -5,14 +5,17 @@ import {SimpleTrigger} from '../../model/simple-trigger.model';
 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>
+    template: `
+    <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>`,
+    standalone: false
 })
 // tslint:disable-next-line:component-class-suffix
 export class UnsupportedMultipleJobsDialog {
@@ -24,9 +27,10 @@ export class UnsupportedMultipleJobsDialog {
 }
 
 @Component({
-  selector: 'qrzmng-trigger-list',
-  templateUrl: './trigger-list.component.html',
-  styleUrls: ['./trigger-list.component.scss']
+    selector: 'qrzmng-trigger-list',
+    templateUrl: './trigger-list.component.html',
+    styleUrls: ['./trigger-list.component.scss'],
+    standalone: false
 })
 export class TriggerListComponent implements OnInit {
 
@@ -81,16 +85,17 @@ export class TriggerListComponent implements OnInit {
   }
 
   onNewTriggerBtnClicked() {
-    if (this.getTriggerKeyList() && this.getTriggerKeyList().length > 0) {
-      this.dialog.open(UnsupportedMultipleJobsDialog)
-    } else {
-      this.onNewTriggerClicked.emit();
-    }
+    this.onNewTriggerClicked.emit();
+    // if (this.getTriggerKeyList() && this.getTriggerKeyList().length > 0) {
+    //   this.dialog.open(UnsupportedMultipleJobsDialog)
+    // } else {
+    //   this.onNewTriggerClicked.emit();
+    // }
   }
 
   onNewTrigger(newTrigger: SimpleTrigger) {
     this.newTriggers = [newTrigger, ...this.newTriggers];
-    this.selectedTrigger = newTrigger.triggerKeyDTO;
+    this.selectTrigger(newTrigger.triggerKeyDTO);
   }
 }
 

quartz-manager-frontend/src/app/guards/admin.guard.ts

@@ -1,10 +1,10 @@
 import {Injectable} from '@angular/core';
-import {Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
+import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import {UserService} from '../services';
 import {Observable} from 'rxjs';
 
 @Injectable()
-export class AdminGuard implements CanActivate {
+export class AdminGuard  {
   constructor(private router: Router, private userService: UserService) {
   }
 

quartz-manager-frontend/src/app/guards/guest.guard.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { Router, CanActivate } from '@angular/router';
+import { Router } from '@angular/router';
 import { UserService } from '../services';
 import { Observable } from 'rxjs';
 
 @Injectable()
-export class GuestGuard implements CanActivate {
+export class GuestGuard  {
 
   constructor(private router: Router, private userService: UserService) {}
 

quartz-manager-frontend/src/app/guards/login.guard.ts

@@ -1,10 +1,10 @@
 import { Injectable } from '@angular/core';
-import { Router, CanActivate } from '@angular/router';
+import { Router } from '@angular/router';
 import { UserService } from '../services';
 import { Observable } from 'rxjs';
 
 @Injectable()
-export class LoginGuard implements CanActivate {
+export class LoginGuard  {
 
   constructor(private router: Router, private userService: UserService) {}
 

quartz-manager-frontend/src/app/model/calendar.model.ts

@@ -0,0 +1,24 @@
+import {TriggerKey} from './triggerKey.model';
+
+export type CalendarType = 'ANNUAL' | 'CRON' | 'DAILY' | 'HOLIDAY' | 'MONTHLY' | 'WEEKLY';
+
+export class QuartzCalendar {
+  name: string;
+  type: CalendarType = 'WEEKLY';
+  description: string;
+  cronExpression: string;
+  timeZone: string;
+  rangeStartingTime: string;
+  rangeEndingTime: string;
+  invertTimeRange: boolean;
+  excludedDaysOfWeek: number[];
+  excludedDaysOfMonth: number[];
+  excludedDates: Date[];
+  triggerKeys: TriggerKey[];
+}
+
+export class CalendarIncludedTimeTest {
+  time: Date;
+  included: boolean;
+  nextIncludedTime: Date;
+}

quartz-manager-frontend/src/app/model/misfire-instruction.model.ts

@@ -50,7 +50,8 @@ export const MisfireInstructionCaption = new Map<number, string>([
     `In case of misfire event, the trigger is re-scheduled to the next scheduled time after 'now'
     with the repeat count set to what it would be if it had not missed any firings.<br/>
     Use this policy if no jobs must run after the end date time.<br/>
-    <strong>Warning</strong> The actual number of job executions could be less than initially set, because the misfired trigger are ignored.<br/>
+    <strong>Warning</strong> The actual number of job executions could be less than initially set,
+    because the misfired trigger are ignored.<br/>
     This policy could cause the Trigger to go directly to the 'COMPLETE' state if all fire-times where missed.`
   ]
 ]);

quartz-manager-frontend/src/app/model/scheduled-job.command.ts

@@ -0,0 +1,7 @@
+export class ScheduledJobCommand {
+  jobClass: string;
+  description: string;
+  durable: boolean;
+  requestsRecovery: boolean;
+  jobDataMap: {[key: string]: unknown};
+}

quartz-manager-frontend/src/app/model/scheduled-job.model.ts

@@ -0,0 +1,12 @@
+import {JobKeyModel} from './jobKey.model';
+import {TriggerKey} from './triggerKey.model';
+
+export class ScheduledJob {
+  jobKeyDTO: JobKeyModel;
+  jobClassName: string;
+  description: string;
+  durable: boolean;
+  requestsRecovery: boolean;
+  jobDataMap: {[key: string]: unknown};
+  triggerKeys: TriggerKey[];
+}

quartz-manager-frontend/src/app/model/scheduler.model.ts

@@ -5,6 +5,14 @@ export class Scheduler {
   instanceId: string;
   status: string;
   triggerKeys: TriggerKey[];
+  quartzVersion: string;
+  jobStoreClass: string;
+  jobStoreSupportsPersistence: boolean;
+  clustered: boolean;
+  threadPoolClass: string;
+  threadPoolSize: number;
+  runningSince: string;
+  numberOfJobsExecuted: number;
 
   constructor(name: string, instanceId: string, status: string, triggerKeys: TriggerKey[]) {
     this.name = name;

quartz-manager-frontend/src/app/model/simple-trigger.command.ts

@@ -1,9 +1,12 @@
 export class SimpleTriggerCommand {
   triggerName: string;
+  triggerGroup: string;
   jobClass: string;
+  jobKey: {group: string; name: string};
   startDate: Date;
   endDate: Date;
   repeatCount: number;
   repeatInterval: number;
   misfireInstruction: string;
+  jobDataMap: {[key: string]: unknown};
 }

quartz-manager-frontend/src/app/model/simple-trigger.form.ts

@@ -1,10 +1,8 @@
-import {Moment} from 'moment/moment';
-
 export class SimpleTriggerForm {
   triggerName: string;
   jobClass: string;
-  startDate: Moment;
-  endDate: Moment;
+  startDate: Date;
+  endDate: Date;
   repeatCount: number;
   repeatInterval: number;
   misfireInstruction: string;

quartz-manager-frontend/src/app/model/trigger-command.model.ts

@@ -0,0 +1,26 @@
+import {JobKeyModel} from './jobKey.model';
+
+export type TriggerType = 'SIMPLE' | 'CRON' | 'DAILY_TIME_INTERVAL' | 'CALENDAR_INTERVAL';
+
+export class TriggerCommand {
+  triggerType: TriggerType = 'SIMPLE';
+  jobClass: string;
+  jobKey: JobKeyModel;
+  startDate: Date;
+  endDate: Date;
+  description: string;
+  priority: number;
+  calendarName: string;
+  misfireInstruction: string;
+  jobDataMap: {[key: string]: unknown};
+  repeatCount: number;
+  repeatInterval: number;
+  repeatIntervalUnit: string;
+  cronExpression: string;
+  timeZone: string;
+  startTimeOfDay: string;
+  endTimeOfDay: string;
+  daysOfWeek: number[];
+  preserveHourOfDayAcrossDaylightSavings: boolean;
+  skipDayIfHourDoesNotExist: boolean;
+}

quartz-manager-frontend/src/app/model/trigger.model.ts

@@ -11,7 +11,22 @@ export class Trigger {
   finalFireTime: Date;
   misfireInstruction: number;
   nextFireTime: Date;
+  previousFireTime: Date;
+  type: string;
+  state: string;
+  calendarName: string;
   jobKeyDTO: JobKeyModel;
   jobDetailDTO: JobDetail = new JobDetail();
   mayFireAgain: boolean;
+  jobDataMap: {[key: string]: unknown};
+  cronExpression: string;
+  timeZone: string;
+  repeatInterval: number;
+  repeatCount: number;
+  repeatIntervalUnit: string;
+  startTimeOfDay: string;
+  endTimeOfDay: string;
+  daysOfWeek: number[];
+  preserveHourOfDayAcrossDaylightSavings: boolean;
+  skipDayIfHourDoesNotExist: boolean;
 }

quartz-manager-frontend/src/app/polyfills.ts

@@ -1,74 +0,0 @@
-/**
- * This file includes polyfills needed by Angular and is loaded before the app.
- * You can add your own extra polyfills to this file.
- *
- * This file is divided into 2 sections:
- *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
- *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
- *      file.
- *
- * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
- * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
- * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
- *
- * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
- */
-
-/***************************************************************************************************
- * BROWSER POLYFILLS
- */
-
-/** IE9, IE10 and IE11 requires all of the following polyfills. **/
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/** IE10 and IE11 requires the following to support `@angular/animation`. */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
-/** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
-import 'core-js/es7/reflect';
-
-
-
-/** ALL Firefox browsers require the following to support `@angular/animation`. **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
-
-/***************************************************************************************************
- * Zone JS is required by Angular itself.
- */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
-
-
-/***************************************************************************************************
- * APPLICATION IMPORTS
- */
-
-/**
- * Date, currency, decimal and percent pipes.
- * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
- */
-// import 'intl';  // Run `npm install --save intl`.
-
-/***************************************************************************************************
- * MATERIAL 2
- */
-import 'hammerjs/hammer';

quartz-manager-frontend/src/app/services/api.service.ts

@@ -1,4 +1,4 @@
-import {HttpClient, HttpHeaders, HttpResponse, HttpRequest, HttpEventType, HttpParams} from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpResponse, HttpRequest, HttpEventType, HttpParams } from '@angular/common/http';
 import {Router} from '@angular/router';
 import {Injectable} from '@angular/core';
 import {Observable} from 'rxjs';

quartz-manager-frontend/src/app/services/auth.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {HttpHeaders, HttpResponse} from '@angular/common/http';
+import { HttpHeaders, HttpResponse } from '@angular/common/http';
 import {ApiService} from './api.service';
 import {UserService} from './user.service';
 import {ConfigService} from './config.service';

quartz-manager-frontend/src/app/services/calendar.service.spec.ts

@@ -0,0 +1,36 @@
+import {jest} from '@jest/globals';
+import {CalendarService} from './calendar.service';
+
+describe('CalendarService', () => {
+  let apiService: any;
+  let calendarService: CalendarService;
+
+  beforeEach(() => {
+    apiService = {
+      get: jest.fn(),
+      post: jest.fn(),
+      put: jest.fn(),
+      delete: jest.fn()
+    };
+    calendarService = new CalendarService(apiService);
+  });
+
+  it('uses calendar registry endpoints', () => {
+    const calendar: any = {name: 'weekends', type: 'WEEKLY'};
+    const time = new Date('2026-05-12T12:00:00.000Z');
+
+    calendarService.fetchCalendars();
+    calendarService.getCalendar('weekends');
+    calendarService.createCalendar('weekends', calendar);
+    calendarService.updateCalendar('weekends', calendar);
+    calendarService.deleteCalendar('weekends');
+    calendarService.testIncludedTime('weekends', time);
+
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/calendars');
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/calendars/weekends');
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/calendars/weekends', calendar);
+    expect(apiService.put).toHaveBeenCalledWith('/quartz-manager/calendars/weekends', calendar);
+    expect(apiService.delete).toHaveBeenCalledWith('/quartz-manager/calendars/weekends');
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/calendars/weekends/included-time-test', {time});
+  });
+});

quartz-manager-frontend/src/app/services/calendar.service.ts

@@ -0,0 +1,34 @@
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {ApiService} from './api.service';
+import {CONTEXT_PATH, getBaseUrl} from './config.service';
+import {CalendarIncludedTimeTest, QuartzCalendar} from '../model/calendar.model';
+
+@Injectable()
+export class CalendarService {
+  constructor(private apiService: ApiService) {}
+
+  fetchCalendars = (): Observable<QuartzCalendar[]> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/calendars`);
+  }
+
+  getCalendar = (name: string): Observable<QuartzCalendar> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/calendars/${name}`);
+  }
+
+  createCalendar = (name: string, calendar: QuartzCalendar): Observable<QuartzCalendar> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/calendars/${name}`, calendar);
+  }
+
+  updateCalendar = (name: string, calendar: QuartzCalendar): Observable<QuartzCalendar> => {
+    return this.apiService.put(getBaseUrl() + `${CONTEXT_PATH}/calendars/${name}`, calendar);
+  }
+
+  deleteCalendar = (name: string): Observable<void> => {
+    return this.apiService.delete(getBaseUrl() + `${CONTEXT_PATH}/calendars/${name}`);
+  }
+
+  testIncludedTime = (name: string, time: Date): Observable<CalendarIncludedTimeTest> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/calendars/${name}/included-time-test`, {time});
+  }
+}

quartz-manager-frontend/src/app/services/index.ts

@@ -3,10 +3,10 @@ export * from './user.service';
 export * from './config.service';
 export * from './auth.service';
 export * from './scheduler.service';
-export * from './websocket.service';
-export * from './progress.websocket.service';
-export * from './logs.websocket.service';
-export * from './trigger.service'
-export * from './job.service'
+export * from './progress.rx-websocket.service';
+export * from './logs.rx-websocket.service';
+export * from './trigger.service'
+export * from './calendar.service'
+export * from './job.service'
 
 

quartz-manager-frontend/src/app/services/job.service.spec.ts

@@ -0,0 +1,46 @@
+import JobService from './job.service';
+import {ScheduledJob} from '../model/scheduled-job.model';
+import {jest} from '@jest/globals';
+
+describe('JobService', () => {
+  let apiService: any;
+  let jobService: JobService;
+
+  beforeEach(() => {
+    apiService = {
+      get: jest.fn(),
+      post: jest.fn(),
+      put: jest.fn(),
+      delete: jest.fn()
+    };
+    jobService = new JobService(apiService);
+  });
+
+  it('uses job class and scheduled job endpoints', () => {
+    const job = new ScheduledJob();
+    const command = {
+      jobClass: 'SampleJob',
+      description: '',
+      durable: true,
+      requestsRecovery: false,
+      jobDataMap: {}
+    };
+    job.jobKeyDTO = {group: 'DEFAULT', name: 'sampleJob'};
+
+    jobService.fetchJobs();
+    jobService.fetchScheduledJobs();
+    jobService.getScheduledJob('DEFAULT', 'sampleJob');
+    jobService.createJob('DEFAULT', 'sampleJob', command);
+    jobService.updateJob('DEFAULT', 'sampleJob', command);
+    jobService.triggerJob(job);
+    jobService.deleteJob(job);
+
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/job-classes');
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/jobs');
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/jobs/DEFAULT/sampleJob');
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/jobs/DEFAULT/sampleJob', command);
+    expect(apiService.put).toHaveBeenCalledWith('/quartz-manager/jobs/DEFAULT/sampleJob', command);
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/jobs/DEFAULT/sampleJob/trigger', {});
+    expect(apiService.delete).toHaveBeenCalledWith('/quartz-manager/jobs/DEFAULT/sampleJob');
+  });
+});

quartz-manager-frontend/src/app/services/job.service.ts

@@ -2,6 +2,8 @@ import {Injectable} from '@angular/core';
 import {ApiService} from './api.service';
 import {CONTEXT_PATH, getBaseUrl} from './config.service';
 import {Observable} from 'rxjs';
+import {ScheduledJob} from '../model/scheduled-job.model';
+import {ScheduledJobCommand} from '../model/scheduled-job.command';
 
 @Injectable()
 export default class JobService {
@@ -12,7 +14,31 @@ export default class JobService {
   }
 
   fetchJobs = (): Observable<string[]> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/job-classes`)
+  }
+
+  fetchScheduledJobs = (): Observable<ScheduledJob[]> => {
     return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/jobs`)
   }
 
+  getScheduledJob = (group: string, name: string): Observable<ScheduledJob> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/jobs/${group || 'DEFAULT'}/${name}`)
+  }
+
+  createJob = (group: string, name: string, command: ScheduledJobCommand): Observable<ScheduledJob> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/jobs/${group || 'DEFAULT'}/${name}`, command)
+  }
+
+  updateJob = (group: string, name: string, command: ScheduledJobCommand): Observable<ScheduledJob> => {
+    return this.apiService.put(getBaseUrl() + `${CONTEXT_PATH}/jobs/${group || 'DEFAULT'}/${name}`, command)
+  }
+
+  triggerJob = (job: ScheduledJob): Observable<void> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/jobs/${job.jobKeyDTO.group}/${job.jobKeyDTO.name}/trigger`, {})
+  }
+
+  deleteJob = (job: ScheduledJob): Observable<void> => {
+    return this.apiService.delete(getBaseUrl() + `${CONTEXT_PATH}/jobs/${job.jobKeyDTO.group}/${job.jobKeyDTO.name}`)
+  }
+
 }

quartz-manager-frontend/src/app/services/logs.rx-websocket.service.spec.ts

@@ -0,0 +1,39 @@
+import { TestBed } from '@angular/core/testing';
+
+import { LogsRxWebsocketService } from './logs.rx-websocket.service';
+import {ApiService} from './api.service';
+import {RxStomp} from '@stomp/rx-stomp';
+import {jest} from '@jest/globals';
+
+describe('LogsRxWebsocketService', () => {
+  let service: LogsRxWebsocketService;
+  let configureSpy;
+  let activateSpy;
+
+  beforeEach(() => {
+    configureSpy = jest.spyOn(RxStomp.prototype, 'configure');
+    activateSpy = jest.spyOn(RxStomp.prototype, 'activate').mockImplementation(() => undefined);
+
+    TestBed.configureTestingModule({
+      providers: [
+        {provide: ApiService, useValue: {getToken: () => 'test-token'}}
+      ]
+    });
+    service = TestBed.inject(LogsRxWebsocketService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should configure rx-stomp with the logs websocket endpoint', () => {
+    expect(configureSpy).toHaveBeenCalled();
+    expect(activateSpy).toHaveBeenCalled();
+
+    const config = configureSpy.mock.calls[configureSpy.mock.calls.length - 1][0];
+    expect(config.heartbeatIncoming).toEqual(0);
+    expect(config.heartbeatOutgoing).toEqual(20000);
+    expect(config.reconnectDelay).toEqual(200);
+    expect(config.webSocketFactory.toString()).toContain('/logs?access_token=');
+  });
+});

quartz-manager-frontend/src/app/services/logs.rx-websocket.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import {RxStompService} from './rx-stomp.service';
+import {ApiService} from './api.service';
+import SockJS from 'sockjs-client';
+import {CONTEXT_PATH, getBaseUrl} from './config.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LogsRxWebsocketService extends RxStompService {
+
+  constructor(private apiService: ApiService) {
+    super({
+      webSocketFactory: () => new SockJS(`${getBaseUrl()}${CONTEXT_PATH}/logs?access_token=${this.apiService.getToken()}`),
+      heartbeatIncoming: 0,
+      heartbeatOutgoing: 20000,
+      reconnectDelay: 200,
+      debug: (msg: string): void => {
+        console.log(new Date(), msg);
+      }
+    });
+  }
+}

quartz-manager-frontend/src/app/services/logs.websocket.service.ts

@@ -1,12 +0,0 @@
-import {Injectable} from '@angular/core';
-import {WebsocketService, ApiService, getBaseUrl, CONTEXT_PATH} from '.';
-import {SocketOption} from '../model/SocketOption.model';
-
-@Injectable()
-export class LogsWebsocketService extends WebsocketService {
-
-  constructor(private apiService: ApiService) {
-    super(new SocketOption(getBaseUrl() + `${CONTEXT_PATH}/logs`, '/topic/logs', apiService.getToken))
-  }
-
-}

quartz-manager-frontend/src/app/services/progress.rx-websocket.service.spec.ts

@@ -0,0 +1,39 @@
+import { TestBed } from '@angular/core/testing';
+import {RxStomp} from '@stomp/rx-stomp';
+import {jest} from '@jest/globals';
+
+import { ProgressRxWebsocketService } from './progress.rx-websocket.service';
+import {ApiService} from './api.service';
+
+describe('ProgressRxWebsocketService', () => {
+  let service: ProgressRxWebsocketService;
+  let configureSpy;
+  let activateSpy;
+
+  beforeEach(() => {
+    configureSpy = jest.spyOn(RxStomp.prototype, 'configure');
+    activateSpy = jest.spyOn(RxStomp.prototype, 'activate').mockImplementation(() => undefined);
+
+    TestBed.configureTestingModule({
+      providers: [
+        {provide: ApiService, useValue: {getToken: () => 'test-token'}}
+      ]
+    });
+    service = TestBed.inject(ProgressRxWebsocketService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should configure rx-stomp with the progress websocket endpoint', () => {
+    expect(configureSpy).toHaveBeenCalled();
+    expect(activateSpy).toHaveBeenCalled();
+
+    const config = configureSpy.mock.calls[configureSpy.mock.calls.length - 1][0];
+    expect(config.heartbeatIncoming).toEqual(0);
+    expect(config.heartbeatOutgoing).toEqual(20000);
+    expect(config.reconnectDelay).toEqual(200);
+    expect(config.webSocketFactory.toString()).toContain('/progress?access_token=');
+  });
+});

quartz-manager-frontend/src/app/services/progress.rx-websocket.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import {RxStompService} from './rx-stomp.service';
+import {ApiService} from './api.service';
+import SockJS from 'sockjs-client';
+import {CONTEXT_PATH, getBaseUrl} from './config.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ProgressRxWebsocketService extends RxStompService {
+
+  constructor(private apiService: ApiService) {
+    super({
+      webSocketFactory: () => new SockJS(`${getBaseUrl()}${CONTEXT_PATH}/progress?access_token=${this.apiService.getToken()}`),
+      heartbeatIncoming: 0,
+      heartbeatOutgoing: 20000,
+      reconnectDelay: 200,
+      debug: (msg: string): void => {
+        console.log(new Date(), msg);
+      }
+    });
+  }
+}

quartz-manager-frontend/src/app/services/progress.websocket.service.ts

@@ -1,12 +0,0 @@
-import {Injectable} from '@angular/core';
-import {WebsocketService, ApiService, getBaseUrl, CONTEXT_PATH} from '.';
-import {SocketOption} from '../model/SocketOption.model';
-
-@Injectable()
-export class ProgressWebsocketService extends WebsocketService {
-
-  constructor(private apiService: ApiService) {
-    super(new SocketOption(getBaseUrl() + `${CONTEXT_PATH}/progress`, '/topic/progress', apiService.getToken))
-  }
-
-}

quartz-manager-frontend/src/app/services/rx-stomp.service.ts

@@ -0,0 +1,11 @@
+import {RxStomp, RxStompConfig} from '@stomp/rx-stomp';
+
+export class RxStompService extends RxStomp {
+
+  constructor(rxStompConfig: RxStompConfig) {
+    super();
+    super.configure(rxStompConfig);
+    super.activate();
+  }
+
+}

quartz-manager-frontend/src/app/services/scheduler.service.spec.ts

@@ -0,0 +1,43 @@
+import {SchedulerService} from './scheduler.service';
+import {SimpleTriggerCommand} from '../model/simple-trigger.command';
+import {jest} from '@jest/globals';
+
+describe('SchedulerService', () => {
+  let apiService: any;
+  let schedulerService: SchedulerService;
+
+  beforeEach(() => {
+    apiService = {
+      get: jest.fn(),
+      post: jest.fn(),
+      put: jest.fn()
+    };
+    schedulerService = new SchedulerService(apiService);
+  });
+
+  it('uses POST scheduler lifecycle endpoints', () => {
+    schedulerService.startScheduler();
+    schedulerService.standbyScheduler();
+    schedulerService.resumeScheduler();
+    schedulerService.shutdownScheduler();
+
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/scheduler/start', {});
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/scheduler/standby', {});
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/scheduler/resume', {});
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/scheduler/shutdown', {});
+  });
+
+  it('uses grouped simple trigger endpoints', () => {
+    const command = new SimpleTriggerCommand();
+    command.triggerGroup = 'DEFAULT';
+    command.triggerName = 'sampleTrigger';
+
+    schedulerService.getSimpleTriggerConfig(command.triggerName, command.triggerGroup);
+    schedulerService.saveSimpleTriggerConfig(command);
+    schedulerService.updateSimpleTriggerConfig(command);
+
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/simple-triggers/DEFAULT/sampleTrigger');
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/simple-triggers/DEFAULT/sampleTrigger', command);
+    expect(apiService.put).toHaveBeenCalledWith('/quartz-manager/simple-triggers/DEFAULT/sampleTrigger', command);
+  });
+});

quartz-manager-frontend/src/app/services/scheduler.service.ts

@@ -14,20 +14,20 @@ export class SchedulerService {
     private apiService: ApiService
   ) { }
 
-  startScheduler = (): Observable<void> => {
-    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/run`);
-  }
-
-  stopScheduler = (): Observable<void> => {
-    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/stop`);
-  }
-
-  pauseScheduler = (): Observable<void> => {
-    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/pause`);
-  }
-
-  resumeScheduler = (): Observable<void> => {
-    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/resume`);
+  startScheduler = (): Observable<void> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/scheduler/start`, {});
+  }
+
+  shutdownScheduler = (): Observable<void> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/scheduler/shutdown`, {});
+  }
+
+  standbyScheduler = (): Observable<void> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/scheduler/standby`, {});
+  }
+
+  resumeScheduler = (): Observable<void> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/scheduler/resume`, {});
   }
 
   getStatus = () => {
@@ -38,17 +38,17 @@ export class SchedulerService {
     return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler`);
   }
 
-  getSimpleTriggerConfig = (triggerName: string): Observable<Trigger> => {
-    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${triggerName}`);
-  }
-
-  saveSimpleTriggerConfig = (config: SimpleTriggerCommand) => {
-    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${config.triggerName}`, config)
-  }
-
-  updateSimpleTriggerConfig = (config: SimpleTriggerCommand) => {
-    return this.apiService.put(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${config.triggerName}`, config)
-  }
+  getSimpleTriggerConfig = (triggerName: string, triggerGroup = 'DEFAULT'): Observable<Trigger> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${triggerGroup}/${triggerName}`);
+  }
+
+  saveSimpleTriggerConfig = (config: SimpleTriggerCommand) => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${config.triggerGroup}/${config.triggerName}`, config)
+  }
+
+  updateSimpleTriggerConfig = (config: SimpleTriggerCommand) => {
+    return this.apiService.put(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${config.triggerGroup}/${config.triggerName}`, config)
+  }
 
 
 }

quartz-manager-frontend/src/app/services/trigger.service.spec.ts

@@ -0,0 +1,42 @@
+import {TriggerService} from './trigger.service';
+import {TriggerKey} from '../model/triggerKey.model';
+import {jest} from '@jest/globals';
+
+describe('TriggerService', () => {
+  let apiService: any;
+  let triggerService: TriggerService;
+
+  beforeEach(() => {
+    apiService = {
+      get: jest.fn(),
+      post: jest.fn(),
+      put: jest.fn(),
+      delete: jest.fn()
+    };
+    triggerService = new TriggerService(apiService);
+  });
+
+  it('uses grouped trigger lifecycle endpoints', () => {
+    const triggerKey = new TriggerKey('sampleTrigger', 'DEFAULT');
+
+    triggerService.getTrigger(triggerKey);
+    triggerService.pauseTrigger(triggerKey);
+    triggerService.resumeTrigger(triggerKey);
+    triggerService.unscheduleTrigger(triggerKey);
+
+    expect(apiService.get).toHaveBeenCalledWith('/quartz-manager/triggers/DEFAULT/sampleTrigger');
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/triggers/DEFAULT/sampleTrigger/pause', {});
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/triggers/DEFAULT/sampleTrigger/resume', {});
+    expect(apiService.delete).toHaveBeenCalledWith('/quartz-manager/triggers/DEFAULT/sampleTrigger');
+  });
+
+  it('uses generic trigger create and update endpoints', () => {
+    const command: any = {triggerType: 'CRON', cronExpression: '0 0/5 * * * ?'};
+
+    triggerService.saveTrigger('OPS', 'cronTrigger', command);
+    triggerService.updateTrigger('OPS', 'cronTrigger', command);
+
+    expect(apiService.post).toHaveBeenCalledWith('/quartz-manager/triggers/OPS/cronTrigger', command);
+    expect(apiService.put).toHaveBeenCalledWith('/quartz-manager/triggers/OPS/cronTrigger', command);
+  });
+});

quartz-manager-frontend/src/app/services/trigger.service.ts

@@ -4,6 +4,7 @@ import {Observable} from 'rxjs';
 import {Trigger} from '../model/trigger.model';
 import {TriggerKey} from '../model/triggerKey.model';
 import {CONTEXT_PATH, getBaseUrl} from './config.service';
+import {TriggerCommand} from '../model/trigger-command.model';
 
 @Injectable()
 export class TriggerService {
@@ -16,5 +17,28 @@ export class TriggerService {
     return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/triggers`);
   }
 
+  getTrigger = (triggerKey: TriggerKey): Observable<Trigger> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/triggers/${triggerKey.group || 'DEFAULT'}/${triggerKey.name}`);
+  }
+
+  saveTrigger = (group: string, name: string, config: TriggerCommand): Observable<Trigger> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/triggers/${group || 'DEFAULT'}/${name}`, config);
+  }
+
+  updateTrigger = (group: string, name: string, config: TriggerCommand): Observable<Trigger> => {
+    return this.apiService.put(getBaseUrl() + `${CONTEXT_PATH}/triggers/${group || 'DEFAULT'}/${name}`, config);
+  }
+
+  pauseTrigger = (triggerKey: TriggerKey): Observable<void> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/triggers/${triggerKey.group || 'DEFAULT'}/${triggerKey.name}/pause`, {});
+  }
+
+  resumeTrigger = (triggerKey: TriggerKey): Observable<void> => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/triggers/${triggerKey.group || 'DEFAULT'}/${triggerKey.name}/resume`, {});
+  }
+
+  unscheduleTrigger = (triggerKey: TriggerKey): Observable<void> => {
+    return this.apiService.delete(getBaseUrl() + `${CONTEXT_PATH}/triggers/${triggerKey.group || 'DEFAULT'}/${triggerKey.name}`);
+  }
 
 }

quartz-manager-frontend/src/app/services/user.service.ts

@@ -2,9 +2,10 @@ import {Injectable} from '@angular/core';
 import {ApiService} from './api.service';
 import {ConfigService} from './config.service';
 
-import {map} from 'rxjs/operators'
-import {HttpErrorResponse} from '@angular/common/http';
-import {Router} from '@angular/router';
+import {map} from 'rxjs/operators'
+import { HttpErrorResponse } from '@angular/common/http';
+import {Router} from '@angular/router';
+import {firstValueFrom} from 'rxjs';
 
 @Injectable()
 export class UserService {
@@ -22,7 +23,7 @@ export class UserService {
   refreshToken() {
     this.apiService.get(this.config.refresh_token_url).subscribe(res => {
         if (res.accessToken !== null) {
-          return this.getUserInfo().toPromise()
+          return firstValueFrom(this.getUserInfo())
             .then(user => {
               this.currentUser = user;
             });
@@ -35,7 +36,7 @@ export class UserService {
       this.currentUser = user;
       this.router.initialNavigation();
     }, err => {
-      console.log(`error retrieving current user due to ` + JSON.stringify(err));
+      console.log('error retrieving current user due to ' + JSON.stringify(err));
       const httpErrorResponse = err as HttpErrorResponse;
       if (httpErrorResponse.status === 404) {
         this.isAnAnonymousUser = true;

quartz-manager-frontend/src/app/services/websocket.service.ts

@@ -1,136 +0,0 @@
-import {Observable, Subscriber} from 'rxjs';
-import {SocketEndpoint} from '../model/SocketEndpoint.model'
-
-
-import Stomp from 'stompjs';
-import SockJS from 'sockjs-client';
-import {SocketOption} from '../model/SocketOption.model';
-
-interface WebsocketSubscriber {
-  index: number,
-  observer: Subscriber<any>
-}
-
-export interface QuartzManagerWebsocketMessage {
-  type: string;
-  message: any;
-  headers: any;
-  self: boolean;
-}
-
-export class WebsocketService {
-
-  _options: SocketOption;
-
-  _socket: SocketEndpoint = new SocketEndpoint();
-
-  observableStompConnection: Observable<any>;
-  subscribers: Array<WebsocketSubscriber> = [];
-  subscriberIndex = 0;
-
-  _messageIds: Array<any> = [];
-
-  reconnectionPromise: any;
-
-  constructor(options: SocketOption) {
-    this._options = options
-    this.createObservableSocket();
-    this.connect();
-  }
-
-  getOptions = () => {
-  }
-
-  private createObservableSocket = () => {
-    this.observableStompConnection = new Observable((observer) => {
-      const subscriberIndex = this.subscriberIndex++;
-      this.addToSubscribers({index: subscriberIndex, observer});
-      return () => this.removeFromSubscribers(subscriberIndex);
-    });
-  }
-
-  private addToSubscribers = (subscriber) => {
-    this.subscribers.push(subscriber);
-  }
-
-  private removeFromSubscribers = (index) => {
-    this.subscribers = this.subscribers.filter(subscriber => subscriber.index !== index);
-  }
-
-  getObservable = () => {
-    return this.observableStompConnection;
-  };
-
-  getMessage = function (data): QuartzManagerWebsocketMessage  {
-    const out: QuartzManagerWebsocketMessage = <QuartzManagerWebsocketMessage>{};
-    out.type = 'SUCCESS';
-    out.message = JSON.parse(data.body);
-    out.headers = {};
-    out.headers.messageId = data.headers['message-id'];
-
-    const messageIdIndex = this._messageIds.indexOf(out.headers.messageId);
-    if (messageIdIndex > -1) {
-      out.self = true;
-      this._messageIds = this._messageIds.splice(messageIdIndex, 1);
-    }
-    return out;
-  };
-
-  _socketListener = (frame) => {
-    console.log('Connected: ' + frame);
-    this._socket.stomp.subscribe(
-      this._options.topicName,
-      data => this.subscribers.forEach(subscriber => subscriber.observer.next(this.getMessage(data)))
-    );
-  }
-
-  _onSocketError = (errorMsg) => {
-    const out: any = {};
-    out.type = 'ERROR';
-    out.message = errorMsg;
-    this.subscribers.forEach(subscriber => subscriber.observer.error(out));
-    this.scheduleReconnection();
-  }
-
-  scheduleReconnection = () => {
-    this.reconnectionPromise = setTimeout(() => {
-      console.log('Socket reconnecting... (if it fails, next attempt in ' + this._options.reconnectionTimeout + ' msec)');
-      this.connect();
-    }, this._options.reconnectionTimeout);
-  }
-
-  reconnectNow = function () {
-    this._socket.stomp.disconnect();
-    if (this.reconnectionPromise && this.reconnectionPromise.cancel) {
-      this.reconnectionPromise.cancel();
-    }
-    this.connect();
-  };
-
-  send = (message) => {
-    const id = Math.floor(Math.random() * 1000000);
-    this._socket.stomp.send(this._options.brokerName, {
-      priority: 9
-    }, JSON.stringify({
-      message: message,
-      id: id
-    }));
-    this._messageIds.push(id);
-  };
-
-  connect = () => {
-    const headers = {};
-
-    let socketUrl = this._options.socketUrl;
-    if (this._options.getAccessToken()) {
-      socketUrl += `?access_token=${this._options.getAccessToken()}`;
-    }
-
-    this._socket.client = new SockJS(socketUrl);
-    this._socket.stomp = Stomp.over(this._socket.client);
-    this._socket.stomp.connect(headers, this._socketListener, this._onSocketError);
-    this._socket.stomp.onclose = this.scheduleReconnection;
-  }
-
-
-}

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

@@ -1,4 +1,4 @@
-<div fxLayout="column" fxLayoutAlign="center" style="text-align: center">
+<div class="flex flex-column justify-center" style="text-align: center">
   <div>
     <div>
       <p style="font-size: 4em; margin-bottom: 0">Unexpected Error</p>

quartz-manager-frontend/src/app/views/error/genericError.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 
 import {GenericErrorComponent} from './genericError.component';
 
@@ -6,7 +6,7 @@ describe('GenericComponent', () => {
   let component: GenericErrorComponent;
   let fixture: ComponentFixture<GenericErrorComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ GenericErrorComponent ]
     })

quartz-manager-frontend/src/app/views/error/genericError.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'qrzmng-generic-error',
-  templateUrl: './genericError.component.html',
-  styleUrls: ['./genericError.component.css']
+    selector: 'qrzmng-generic-error',
+    templateUrl: './genericError.component.html',
+    styleUrls: ['./genericError.component.css'],
+    standalone: false
 })
 export class GenericErrorComponent implements OnInit {
 

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

@@ -1,4 +1,4 @@
-<div fxLayout="column" fxLayoutAlign="center" style="text-align: center">
+<div class="flex flex-column justify-center" style="text-align: center">
   <div>
     <div>
       <p style="font-size: 4em; margin-bottom: 0">Forbidden - Access Senied</p>

quartz-manager-frontend/src/app/views/forbidden/forbidden.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 
 import { ForbiddenComponent } from './forbidden.component';
 
@@ -6,7 +6,7 @@ describe('ForbiddenComponent', () => {
   let component: ForbiddenComponent;
   let fixture: ComponentFixture<ForbiddenComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ ForbiddenComponent ]
     })

quartz-manager-frontend/src/app/views/forbidden/forbidden.component.ts

@@ -1,9 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-forbidden',
-  templateUrl: './forbidden.component.html',
-  styleUrls: ['./forbidden.component.css']
+    selector: 'app-forbidden',
+    templateUrl: './forbidden.component.html',
+    styleUrls: ['./forbidden.component.css'],
+    standalone: false
 })
 export class ForbiddenComponent implements OnInit {
 

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

@@ -1,32 +1,76 @@
-<div class="content" fxLayout="row" fxLayoutAlign="center" style="padding-bottom:160px;">
-
-    <mat-card elevation="5" fxFlex>
-
-      <mat-card-subtitle>
-        <h2>Quartz Manager</h2>
-      </mat-card-subtitle>
-
-      <mat-card-title>
-        <h2>{{title}}</h2>
-      </mat-card-title>
-
-      <mat-card-content>
-
-        <p [class]="notification.msgType" *ngIf="notification">{{notification.msgBody}}</p>
-
-        <form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()" #loginForm="ngForm">
-          <mat-form-field>
-            <input matInput formControlName="username" required placeholder="user">
-          </mat-form-field>
-          <mat-form-field>
-            <input matInput formControlName="password" required type="password" placeholder="password">
-          </mat-form-field>
-          <button type="submit" [disabled]="!loginForm.form.valid" mat-raised-button color="primary">Login</button>
-        </form>
-
-        <mat-spinner *ngIf="submitted" mode="indeterminate"></mat-spinner>
-      </mat-card-content>
-
-    </mat-card>
-
-</div>
+<section class="login-shell">
+  <div class="login-hero" aria-hidden="true">
+    <div class="brand">
+      <span class="brand-mark">QM</span>
+      <div>
+        <h1>Quartz Manager</h1>
+        <p>Scheduler operations console</p>
+      </div>
+    </div>
+
+    <div class="hero-card">
+      <span class="card-title">Operational View</span>
+      <div class="status-row">
+        <span class="pulse"></span>
+        <span>Jobs, triggers, logs and live execution state</span>
+      </div>
+      <div class="metric-grid">
+        <div>
+          <strong>01</strong>
+          <span>Secure entry</span>
+        </div>
+        <div>
+          <strong>24/7</strong>
+          <span>Runtime visibility</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <mat-card class="login-card">
+    <mat-card-content>
+      <div class="form-header">
+        <span class="eyebrow">Welcome back</span>
+        <h2>{{ title }}</h2>
+        <p>Sign in to manage scheduler activity and inspect runtime signals.</p>
+      </div>
+
+      @if (notification) {
+      <p class="notification {{ notification.msgType }}">{{ notification.msgBody }}</p>
+      } @if (!submitted) {
+      <form [formGroup]="form" (ngSubmit)="onSubmit()" #loginForm="ngForm">
+        <mat-form-field appearance="outline">
+          <mat-label>Username</mat-label>
+          <input
+            matInput
+            formControlName="username"
+            required
+            autocomplete="username" />
+        </mat-form-field>
+        <mat-form-field appearance="outline">
+          <mat-label>Password</mat-label>
+          <input
+            matInput
+            formControlName="password"
+            required
+            type="password"
+            autocomplete="current-password" />
+        </mat-form-field>
+        <button
+          class="login-button"
+          type="submit"
+          [disabled]="!loginForm.form.valid"
+          mat-raised-button
+          color="primary">
+          Login
+        </button>
+      </form>
+      } @if (submitted) {
+      <div class="loading-state">
+        <mat-spinner mode="indeterminate"></mat-spinner>
+        <span>Checking credentials...</span>
+      </div>
+      }
+    </mat-card-content>
+  </mat-card>
+</section>