released v5.0.1

Releasing v5.0.0

.dockerignore

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

.editorconfig

@@ -0,0 +1,9 @@
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 120
+tab_width = 2
+ij_continuation_indent_size = 2

.github/workflows/maven-release.yml

@@ -0,0 +1,46 @@
+name: Publish package to the Maven Central Repository
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Java 21 for publishing to Maven Central Repository
+        uses: actions/setup-java@v4
+        with:
+          java-version: '21'
+          distribution: 'temurin'
+          server-id: maven-central-release
+          server-username: MAVEN_USERNAME
+          server-password: MAVEN_PASSWORD
+          gpg-private-key: ${{ secrets.OSSRH_GPG_SECRET_KEY }}
+          gpg-passphrase: MAVEN_GPG_PASSPHRASE
+
+      - name: Build with Maven
+        run: mvn -B package --file quartz-manager-parent/pom.xml
+
+      - 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.MAVEN_CENTRAL_TOKEN_USERNAME }}
+          MAVEN_PASSWORD: ${{ secrets.MAVEN_CENTRAL_TOKEN_PASSWORD }}
+          MAVEN_GPG_PASSPHRASE: ${{ secrets.OSSRH_GPG_SECRET_KEY_PASSWORD }}
+
+      - name: Set up Java 21 for publishing to GitHub Packages
+        uses: actions/setup-java@v4
+        with:
+          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"
+        env:
+          GITHUB_TOKEN: ${{ github.token }}

.github/workflows/maven.yml

@@ -0,0 +1,36 @@
+# This workflow will build a Java project with Maven, and cache/restore any dependencies to improve the workflow execution time
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-java-with-maven
+
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+name: Java CI with Maven
+
+on:
+  push:
+    branches: 
+      - develop
+      - master
+    paths: [ 'quartz-manager-parent/**' ]
+  pull_request:
+    branches:
+      - develop
+      - master
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Set up JDK 21
+        uses: actions/setup-java@v4
+        with:
+          java-version: '21'
+          distribution: 'temurin'
+          cache: maven
+      - name: Build and test with Maven
+        run: mvn -B package --file quartz-manager-parent/pom.xml

.github/workflows/npm.yml

@@ -0,0 +1,44 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: npm CI
+
+on:
+  push:
+    branches:
+      - develop
+      - master
+    paths: [ 'quartz-manager-frontend/**' ]
+  pull_request:
+    branches:
+      - develop
+      - master
+
+defaults:
+  run:
+    working-directory: ./quartz-manager-frontend
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version:  [22.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+          cache-dependency-path: ./quartz-manager-frontend/package-lock.json
+      - name: 'install'
+        run: npm ci
+      - name: 'test'
+        run: npm test
+      - name: 'build'
+        run: npm run build --if-present

.github/workflows/sonar-java.yml

@@ -0,0 +1,40 @@
+name: SonarCloud Analysis for Java
+on:
+  push:
+    branches:
+      - master
+      - develop
+#    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@v4
+        with:
+          fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
+      - name: Set up JDK 21
+        uses: actions/setup-java@v4
+        with:
+          java-version: 21
+          distribution: 'zulu' # Alternative distribution options are available.
+      - name: Cache SonarCloud packages
+        uses: actions/cache@v3
+        with:
+          path: ~/.sonar/cache
+          key: ${{ runner.os }}-sonar
+          restore-keys: ${{ runner.os }}-sonar
+      - name: Cache Maven packages
+        uses: actions/cache@v3
+        with:
+          path: ~/.m2
+          key: ${{ runner.os }}-m2-${{ hashFiles('**/pom.xml') }}
+          restore-keys: ${{ runner.os }}-m2
+      - name: Build and analyze
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}  # Needed to get PR information, if any
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+        run: mvn -B verify org.sonarsource.scanner.maven:sonar-maven-plugin:sonar -Dsonar.projectKey=fabioformosa_quartz-manager --file quartz-manager-parent/pom.xml

.gitignore

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

.travis.yml

@@ -0,0 +1,3 @@
+language: java
+jdk: openjdk8
+before_script: cd quartz-manager-parent

CHANGELOG.md

@@ -0,0 +1,58 @@
+## **v5.0.1**
+
+### New Features
+* Added full job management: list eligible job classes, create stored jobs, update jobs, delete jobs, and trigger jobs on demand.
+* Added trigger management APIs and UI flows to inspect, create, reschedule, pause, resume, and unschedule triggers.
+* Added support for Quartz trigger types beyond simple triggers: cron, daily time interval, and calendar interval triggers.
+* Added Quartz calendar management for annual, cron, daily, holiday, monthly, and weekly calendars.
+* Added calendar-aware scheduling support, including calendar assignment to triggers and included-time checks.
+* Redesigned the Quartz Manager dashboard with a broader operations view for scheduler, jobs, triggers, calendars, progress, and logs.
+* Updated the embedded UI to Angular 21.
+* Added support for Spring Boot 4 applications.
+
+### Breaking Changes
+* Quartz Manager now requires Java 21+ and Spring Boot 4.x.
+* Applications using Quartz Manager APIs must migrate from `javax.*` validation/annotation dependencies to `jakarta.*` equivalents through the Spring Boot 4 stack.
+* Scheduler command endpoints now use `POST` operations and clearer action names: `/scheduler/start`, `/scheduler/standby`, `/scheduler/resume`, and `/scheduler/shutdown` replace the previous `GET` command endpoints.
+* Simple trigger endpoints now include the trigger group in the path: `/simple-triggers/{group}/{name}`.
+* New trigger creation should use the generalized `/triggers/{group}/{name}` API when working with cron, daily time interval, or calendar interval triggers.
+
+### Fixes
+* Fixed WebSocket log retrieval for job execution logs.
+* Fixed UI style regressions and improved readability in the dashboard, login page, job class display, and misfire instruction display.
+* Improved API error handling for missing jobs, missing triggers, missing calendars, unsupported trigger types, and scheduling conflicts.
+
+## **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.
+You can import:  
+
+* `quartz-manager-starter-api` to have a REST API layer to control your scheduler
+* `quartz-manager-starter-ui` to import the UI also, in your spring webapp.
+* `quartz-manager-starter-security` if you want to give access to the quartz-manager UI and API only to authenticated users

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

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,41 +1,340 @@
-# quartz-manager
-GUI Manager for Quartz Scheduler.
-Through this webapp you can launch and control your scheduled job.
-GUI Console is composed by a managament panel to set trigger, start/stop scheduler and by a log panel with progress bar to get job output.
+<div align="center">
 
-## SCREENSHOT
-![Alt text](http://www.fabioformosa.it/quartz-manager/quartz-manager-screenshot_800.png "Quartz Manager Screenshot")
+# Quartz Manager
 
-## HOW IT WORKS
-* Set up the trigger into the left sidebar in terms of: daily frequency and and max occurrences.
-* Press the start button
-* The GUI manager updates the progress bar and reports all logs of your quartz job.
+**A Spring Boot library and standalone web app that adds REST API and dashboard management to Quartz Scheduler.**
 
-## HOW IT RUNS
-1. Quartz-Manager is a Spring Boot Application. To run by CLI  `mvn spring-boot:run` or through your IDE. For more details [spring boot ref.](http://docs.spring.io/spring-boot/docs/current/reference/html/using-boot-running-your-application.html)
-1. Open quartz-manager at the link: [http://localhost:9000/quartz-manager/manager](http://localhost:9000/quartz-manager/manager)
-1. Log in with default credentials: `admin/admin`
+[![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)
+[![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)
 
-## HOW TO RUN YOUR JOB
-By default, quartz-manager executes the dummy job that logs "hello world!".
-Replace the dummy job (class: `it.fabioformosa.quartzmanager.jobs.SampleJob`) with yours. Follow these steps:
+[Choose Your Path](#choose-your-path) • [Features](#features) • [Quick Start](#quick-start) • [REST API](#rest-api) • [Security](#security) • [Persistence](#persistence) • [Roadmap](#roadmap)
 
-1. Let extend the super class `it.fabioformosa.quartzmanager.jobs.AbstractLoggingJob`
-1. Change the scheduler settings, providing the class name of your job. Open class `it.fabioformosa.quartzmanager.configuration.SchedulerConfig` and for the method `jobDetail` replace SampleJob.class with YourJob.class
+</div>
 
-## HOW TO CHANGE SETTINGS
-* Num of Threads: `/quartz-manager/src/main/resources/quartz.properties`
-* Credentials: `it.fabioformosa.quartzmanager.configuration.WebSecurityConfig`
-* Server context path (default `/quartz-manager`) and port (default `9000`): `/quartz-manager/src/main/resources/application.properties`
+[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.
 
-## Tech Overview
+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.
 
-**Backend Stack** Java 8, Spring Boot 1.5.9 (Spring MVC 4.3.13, Spring Security 4.2.3, Spring AOP 4.3.13), Quartz Scheduler 2.2.2
+![Quartz Manager dashboard](https://github.com/fabioformosa/quartz-manager/blob/master/docs/assets/quartz-manager-dashboard.png)
 
-**Application Server** Tomcat (embedded)
+## Choose Your Path
 
-**Frontend** Angularjs 1.6.7, Thymeleaf 2.1.4, Web-Socket (sockjs 0.3.4, stompjs)
+### 1. Add API And UI To Your Existing App
 
-**Style** Bootstrap 3.3.4, animated.css, FontAwesome
+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.
 
+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.
 
+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.
+
+If you also want the browser dashboard, see [Add The UI](#add-the-ui).
+
+### 2. Add A New Scheduler To Your App
+
+Use this path when your Spring Boot application does not have Quartz yet and you want to add a scheduler managed by Quartz Manager.
+
+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.
+
+You can later add optional modules for the embedded UI, JWT security, and PostgreSQL persistence.
+
+If you also want the browser dashboard, see [Add The UI](#add-the-ui).
+
+### 3. Run Quartz Manager As A Standalone App
+
+Use this path when you want a standalone scheduler web application instead of embedding Quartz Manager into an existing product.
+
+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.
+
+Even in standalone mode, the jobs managed by Quartz Manager must extend `AbstractQuartzManagerJob`.
+
+## 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>VERSION</version>
+</dependency>
+```
+
+Create jobs by extending `AbstractQuartzManagerJob`:
+
+```java
+import it.fabioformosa.quartzmanager.api.jobs.AbstractQuartzManagerJob;
+import it.fabioformosa.quartzmanager.api.jobs.entities.LogRecord;
+import org.quartz.JobExecutionContext;
+
+public class SampleJob extends AbstractQuartzManagerJob {
+
+  @Override
+  public LogRecord doIt(JobExecutionContext context) {
+    return new LogRecord(LogRecord.LogType.INFO, "Hello from Quartz Manager");
+  }
+}
+```
+
+Configure job discovery:
+
+```properties
+quartz-manager.jobClassPackages=com.example.jobs
+quartz-manager.oas.enabled=true
+```
+
+By default, Quartz Manager creates a dedicated scheduler named `quartz-manager-scheduler`. If your app already has another Quartz scheduler, both can coexist.
+
+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
+```
+
+To customize the managed scheduler, add `managed-quartz.properties` to your classpath.
+
+To add the browser dashboard to your application, see [Add The UI](#add-the-ui).
+
+### Path 3: Standalone Quartz Manager App
+
+Run the standalone showcase application when you want Quartz Manager as a ready-to-use scheduler web app.
+
+```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:
+
+```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>VERSION</version>
+</dependency>
+```
+
+The UI is served from:
+
+```text
+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` |
+
+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>VERSION</version>
+</dependency>
+```
+
+Example configuration:
+
+```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.
+
+## Persistence
+
+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:
+
+```xml
+<dependency>
+  <groupId>it.fabioformosa.quartz-manager</groupId>
+  <artifactId>quartz-manager-starter-persistence</artifactId>
+  <version>VERSION</version>
+</dependency>
+```
+
+Configure the Quartz Manager datasource:
+
+```yaml
+quartz-manager:
+  persistence:
+    quartz:
+      datasource:
+        url: jdbc:postgresql://localhost:5432/quartzmanager
+        user: quartzmanager
+        password: quartzmanager
+```
+
+The persistence module configures Quartz `JobStoreTX`, uses the PostgreSQL delegate, and creates the required Quartz tables through Liquibase.
+
+## Examples
+
+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.
+
+## Current Limitations
+
+- 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.
+
+## Roadmap
+
+The next priorities are tracked in the [project roadmap](https://github.com/users/fabioformosa/projects/1).
+
+Planned improvements include:
+
+- First-class support for managing an existing Quartz Scheduler instance.
+- Cluster mode support.
+- Additional persistence targets beyond PostgreSQL.
+- OAuth2 client support.
+- Continued UI improvements.
+
+## Development
+
+This repository contains the backend modules and the frontend application.
+
+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).
+
+## Contributing
+
+Contributions are welcome. Open an issue to discuss bugs, questions, or feature proposals before starting larger changes.
+
+## License
+
+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

@@ -0,0 +1,12 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 2 Chrome versions
+last 2 Firefox versions
+last 2 Edge versions
+last 2 Safari versions
+last 2 iOS versions

quartz-manager-frontend/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

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

@@ -0,0 +1,43 @@
+# 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/.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

@@ -0,0 +1,126 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "quartz-manager-ui": {
+      "root": "",
+      "prefix": "qrzmng",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "aot": true,
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "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",
+              "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": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "buildTarget": "quartz-manager-ui:build:development"
+          },
+          "configurations": {
+            "production": {
+              "buildTarget": "quartz-manager-ui:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "buildTarget": "quartz-manager-ui:build"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "eslintConfig": ".eslintrc.json",
+            "lintFilePatterns": ["**/*.spec.ts", "**/*.ts"]
+          }
+        }
+      }
+    }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "qrzmng",
+      "style": "css",
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "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/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { WebUiPage } from './app.po';
+
+describe('web-ui App', () => {
+  let page: WebUiPage;
+
+  beforeEach(() => {
+    page = new WebUiPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toContain('ANGULAR-SPRING-JWT-STARTER');
+  });
+});

quartz-manager-frontend/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class WebUiPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root app-header span')).getText();
+  }
+}

quartz-manager-frontend/e2e/tsconfig.e2e.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}

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

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

quartz-manager-frontend/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "quartz-manager-ui",
+  "version": "0.1.1",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --proxy-config proxy.conf.json",
+    "build": "ng build --configuration production",
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
+    "lint": "ng lint",
+    "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/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/rx-stomp": "2.4.0",
+    "@stomp/stompjs": "^7.2.0",
+    "hammerjs": "2.0.8",
+    "roboto-fontface": "^0.10.0",
+    "rxjs": "^7.8.2",
+    "sockjs-client": "^1.1.1",
+    "stompjs": "^2.3.3",
+    "tslib": "^2.8.1",
+    "uuid": "^13.0.0",
+    "zone.js": "~0.16.0"
+  },
+  "devDependencies": {
+    "@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": "^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/protractor.conf.js

@@ -0,0 +1,30 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

quartz-manager-frontend/proxy.conf.json

@@ -0,0 +1,8 @@
+{
+  "/quartz-manager": {
+    "target": "http://localhost:8080",
+    "secure": false,
+    "cookiePathRewrite": "/",
+    "ws":true
+  }
+}

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

@@ -0,0 +1,54 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {LoginComponent} from './views/login';
+import {AdminGuard, GuestGuard} from './guards';
+import {NotFoundComponent} from './views/not-found';
+import {ForbiddenComponent} from './views/forbidden';
+
+import {ManagerComponent} from './views/manager';
+import {GenericErrorComponent} from './views/error/genericError.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: ManagerComponent,
+    canActivate: [AdminGuard],
+    pathMatch: 'full'
+  },
+  {
+    path: 'manager',
+    component: ManagerComponent,
+    canActivate: [AdminGuard],
+    pathMatch: 'full'
+  },
+  {
+    path: 'login',
+    component: LoginComponent,
+    canActivate: [GuestGuard]
+  },
+  {
+    path: '404',
+    component: NotFoundComponent
+  },
+  {
+    path: '403',
+    component: ForbiddenComponent
+  },
+  {
+    path: 'error',
+    component: GenericErrorComponent
+  },
+  {
+    path: '**',
+    redirectTo: '/404'
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes, {
+    initialNavigation: 'disabled'
+  })],
+  exports: [RouterModule],
+  providers: []
+})
+export class AppRoutingModule { }

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

@@ -0,0 +1,11 @@
+@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>
+}

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

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

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

@@ -0,0 +1,51 @@
+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';
+import { MockApiService } from './services/mocks/api.service.mock';
+
+import { FooterComponent} from './components';
+
+import {MatIconRegistry} from '@angular/material/icon';
+import {MatToolbarModule} from '@angular/material/toolbar';
+
+
+import {
+  ApiService,
+  AuthService,
+  UserService,
+  ConfigService
+} from './services';
+
+describe('AppComponent', () => {
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent,
+        FooterComponent,
+      ],
+      imports: [
+        RouterTestingModule,
+        MatToolbarModule
+      ],
+      providers: [
+        MatIconRegistry,
+        {
+          provide: ApiService,
+          useClass: MockApiService
+        },
+        AuthService,
+        UserService,
+        ConfigService
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  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

@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {Router} from '@angular/router';
+
+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'],
+    standalone: false
+})
+
+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

@@ -0,0 +1,149 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, APP_INITIALIZER} from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
+import {JWT_OPTIONS, JwtModule} from '@auth0/angular-jwt';
+
+// material
+import {MatIconRegistry} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatMenuModule} from '@angular/material/menu';
+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 {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';
+import { LoginComponent } from './views/login';
+import { LoginGuard, GuestGuard, AdminGuard } from './guards';
+import { NotFoundComponent } from './views/not-found';
+import { AccountMenuComponent } from './components/header/account-menu/account-menu.component';
+
+import {
+  HeaderComponent,
+  FooterComponent,
+  GithubComponent,
+  SchedulerControlComponent,
+  LogsPanelComponent,
+  ProgressPanelComponent,
+  TriggerListComponent,
+  SimpleTriggerConfigComponent
+} from './components';
+
+import {
+  ApiService,
+  AuthService,
+  UserService,
+  SchedulerService,
+  ConfigService,
+  getHtmlBaseUrl,
+  LogsRxWebsocketService,
+  ProgressRxWebsocketService,
+  TriggerService,
+  CalendarService
+} from './services';
+import { ForbiddenComponent } from './views/forbidden/forbidden.component';
+import { APP_BASE_HREF } from '@angular/common';
+import JobService from './services/job.service';
+import {GenericErrorComponent} from './views/error/genericError.component';
+
+export function initUserFactory(userService: UserService) {
+    return () => userService.fetchLoggedUser();
+}
+
+export function jwtOptionsFactory(apiService: ApiService) {
+  return {
+    tokenGetter: () => {
+      return apiService.getToken();
+    },
+    allowedDomains: ['localhost:8080', 'localhost:4200']
+  }
+}
+
+@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

@@ -0,0 +1,8 @@
+<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.scss

@@ -0,0 +1,27 @@
+:host{
+  //position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+}
+
+#footer{
+  background-color: rgb(33, 33, 33);
+  font-size: 15px;
+  box-sizing: border-box;
+  text-align: center;
+  a {
+    text-decoration: none;
+    cursor: pointer;
+    color: #FFFFFF;
+  }
+
+  h3 {
+    margin: 0px;
+    padding: 0px;
+    font-weight: 300;
+    font-size: 22px;
+  }
+}
+

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

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

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

@@ -0,0 +1 @@
+export * from './footer.component';

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

@@ -0,0 +1,4 @@
+<h3>Want to help make this project? Check out repo.</h3>
+<a href="https://github.com/fabioformosa/quartz-manager" color="accent" mat-raised-button mat-ripple>
+  <span>GITHUB</span>
+</a>

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

@@ -0,0 +1,20 @@
+:host {
+  display: block;
+  height: 236px;
+  padding: 72px 24px;
+  box-sizing: border-box;
+  background-color: rgb(238, 238, 238);
+  text-align: center
+}
+
+:host h3 {
+  margin: 0px;
+  padding: 0px;
+  font-weight: 300;
+  font-size: 22px;
+}
+
+:host a {
+  color: #000;
+  margin-top: 32px;
+}

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

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

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

@@ -0,0 +1 @@
+export * from './github.component';

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

@@ -0,0 +1 @@
+<button mat-menu-item (click)="logout()">Logout</button>

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

@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed, inject, waitForAsync} from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import {
+  AuthService,
+  ConfigService,
+  ApiService,
+  UserService
+} from '../../../services';
+import {
+  MockUserService,
+  MockApiService
+} from '../../../services/mocks';
+import { AccountMenuComponent } from './account-menu.component';
+
+describe('AccountMenuComponent', () => {
+  let component: AccountMenuComponent;
+  let fixture: ComponentFixture<AccountMenuComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      providers: [
+        {
+          provide: UserService,
+          useClass: MockUserService
+        },
+        {
+          provide: ApiService,
+          useClass: MockApiService
+        },
+        AuthService,
+        ConfigService
+      ],
+      declarations: [AccountMenuComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,36 @@
+import { Component, OnInit, Input } from '@angular/core';
+import {
+  ConfigService,
+  AuthService,
+  UserService
+} from '../../../services';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-account-menu',
+    templateUrl: './account-menu.component.html',
+    styleUrls: ['./account-menu.component.scss'],
+    standalone: false
+})
+export class AccountMenuComponent implements OnInit {
+
+  // TODO define user interface
+  user: any;
+
+  constructor(
+    private config: ConfigService,
+    private authService: AuthService,
+    private router: Router,
+    private userService: UserService
+  ) {}
+
+  ngOnInit() {
+    this.user = this.userService.currentUser;
+  }
+
+  logout() {
+    this.authService.logout().subscribe(res => {
+      this.router.navigate(['/login']);
+    });
+  }
+}

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

@@ -0,0 +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 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.scss

@@ -0,0 +1,59 @@
+:host {
+  position: relative;
+  z-index: 10;
+  color: #fff;
+}
+
+// The menu popup is rendered outside the header component
+// so we will restyle a couple things inside a global /deep/ selector
+
+.app-navbar {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+
+  .right {
+    margin-left: auto;
+    float: right;
+  }
+}
+
+.app-navbar span {
+  text-transform: uppercase !important;
+}
+
+.app-angular-logo {
+  margin: 0 4px 3px 0;
+  height: 26px;
+}
+
+.greeting-hamburger {
+  display: none;
+}
+
+
+::ng-deep {
+  .app-header-accountMenu.mat-menu-panel {
+    border-radius: 3px;
+    max-width: initial;
+    overflow: visible;
+
+    .mat-menu-content {
+      max-width: initial;
+      padding: 0;
+      overflow: hidden;
+      display: inline-block;
+      margin-bottom: -6px;
+    }
+  }
+}
+@media screen and (max-width: 600px) {
+  .greeting-hamburger {
+    display: block;
+  }
+  .greeting-button {
+    display: none;
+  }
+}
+
+

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

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  UserService,
+  AuthService,
+  // NO_AUTH
+} from '../../services';
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    standalone: false
+})
+export class HeaderComponent implements OnInit {
+
+  constructor(
+    private userService: UserService,
+    private authService: AuthService,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+  }
+
+  logout() {
+    this.authService.logout().subscribe(res => {
+      this.router.navigate(['/login']);
+    });
+  }
+
+  hasSignedIn() {
+    return !!this.userService.currentUser;
+  }
+
+  noAuthenticationRequired = () => !this.hasSignedIn() && this.userService.isAnAnonymousUser === true;
+
+
+  userName() {
+    const user = this.userService.currentUser;
+    return user.username;
+  }
+
+}

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

@@ -0,0 +1 @@
+export * from './header.component';

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

@@ -0,0 +1,8 @@
+export * from './header';
+export * from './github';
+export * from './footer';
+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/index.ts

@@ -0,0 +1 @@
+export * from './logs-panel.component';

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

@@ -0,0 +1,67 @@
+<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

@@ -0,0 +1,49 @@
+:host {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.red{
+  color: red;
+}
+.green{
+  color: green;
+}
+
+.yellow{
+  color: gold;
+}
+
+#logs{
+  font-size: 1em;
+}
+
+.waitingLogs {
+  color: #6b7280;
+  height: 100%;
+  min-height: 180px;
+  text-align: center;
+}
+
+/* ===== Scrollbar CSS ===== */
+/* Firefox */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: #b8b8b8 #ffffff;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #ffffff;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #b8b8b8;
+  border-radius: 10px;
+  border: 3px solid #ffffff;
+}

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

@@ -0,0 +1,102 @@
+import {Component, Input, NgZone, OnDestroy, OnInit} from '@angular/core';
+
+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'],
+    standalone: false
+})
+export class LogsPanelComponent implements OnInit, OnDestroy {
+
+  MAX_LOGS = 30;
+
+  logs = new Array();
+
+  selectedTriggerName: string;
+
+  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() {
+  }
+
+  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) {
+      this.logs.pop();
+    }
+
+    this.logs.unshift({
+      time: logRecord.date,
+      type: logRecord.type,
+      msg: logRecord.message,
+      threadName: logRecord.threadName
+    });
+  }
+
+  _refreshSession = () => {
+    this.apiService.get('/quartz-manager/session/refresh')
+  }
+
+}

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

@@ -0,0 +1 @@
+export * from './progress-panel.component';

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

@@ -0,0 +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"
+  [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

@@ -0,0 +1,51 @@
+#timesTriggeredCounter{
+  font-size: 2em;
+}
+#totCounter{
+  margin-top: auto;
+  text-align: center;
+  margin-bottom: 5px;
+  font-size: 0.8em;
+}
+#counterBox{
+  margin-bottom: 1em;
+}
+
+.fireBox{
+  width: 100%;
+  border-right: 1px solid rgba(0,0,0,.12);
+  margin: 8px;
+}
+
+.fireBox:last-child {
+  border-right: 0;
+}
+
+.fireBoxHeader{
+  font-size: 0.8em;
+  text-align: center;
+  color: grey;
+  margin-bottom: 0.5em;
+}
+
+.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

@@ -0,0 +1,93 @@
+import {Component, Input, NgZone, OnDestroy, OnInit} from '@angular/core'
+import TriggerFiredBundle from '../../model/trigger-fired-bundle.model';
+import {TriggerKey} from '../../model/triggerKey.model';
+import {ProgressRxWebsocketService} from '../../services/progress.rx-websocket.service';
+import {map} from 'rxjs/operators';
+
+@Component({
+    selector: 'progress-panel',
+    templateUrl: './progress-panel.component.html',
+    styleUrls: ['./progress-panel.component.scss'],
+    standalone: false
+})
+export class ProgressPanelComponent implements OnInit, OnDestroy {
+
+  progress: TriggerFiredBundle = ProgressPanelComponent._buildEmptyProgress();
+  percentageStr: string;
+  progressUpdated = false;
+
+  topicSubscription;
+  private selectedTriggerKey: TriggerKey;
+
+  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');
+      });
+  };
+
+  onNewProgressMsg = (receivedMsg) => {
+      this.progress = receivedMsg;
+      this.percentageStr = this.progress.percentage + '%';
+      this._markProgressUpdated();
+  }
+
+  ngOnInit() {
+  }
+
+  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/index.ts

@@ -0,0 +1 @@
+export * from './scheduler-control.component';

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

@@ -0,0 +1,40 @@
+<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

@@ -0,0 +1,22 @@
+.red{
+  color: red;
+}
+.green{
+  color: green;
+}
+
+label{
+  color: grey;
+  font-variant: small-caps;
+  font-size: smaller;
+}
+
+#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

@@ -0,0 +1,111 @@
+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';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {RouterTestingModule} from '@angular/router/testing';
+import {DebugElement} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {Scheduler} from '../../model/scheduler.model';
+import {MatCardModule} from '@angular/material/card';
+import {MatIconModule} from '@angular/material/icon';
+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(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [MatCardModule, MatDividerModule, MatIconModule, HttpClientTestingModule, RouterTestingModule],
+      declarations: [SchedulerControlComponent],
+      providers: [UserService, SchedulerService, ApiService, ConfigService]
+    }).compileComponents();
+
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SchedulerControlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should display the play button at the beginning since the scheduler is stopped', () => {
+    expect(component).toBeDefined();
+    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(stoppedStatus);
+    fixture.detectChanges();
+
+    const schedulerControlComponentDe: DebugElement = fixture.debugElement;
+    const schedulerBtnDe = schedulerControlComponentDe.query(By.css(schedulerButtonSelector));
+    expect(schedulerBtnDe).toBeTruthy();
+
+    const playIconDe = schedulerBtnDe.query(By.css('.fa-play'));
+    expect(playIconDe).toBeTruthy();
+  });
+
+  it('should switch the button to pause when the scheduler is started', () => {
+    expect(component).toBeDefined();
+    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(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/start');
+    startSchedulerReq.flush(null);
+    fixture.detectChanges();
+
+    schedulerBtnDe = schedulerControlComponentDe.query(By.css(schedulerButtonSelector));
+    const pauseIconDe = schedulerBtnDe.query(By.css('.fa-pause'));
+    expect(pauseIconDe).toBeTruthy();
+
+  })
+
+  it('should switch the button to play when the scheduler is stopped', () => {
+    expect(component).toBeDefined();
+    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(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/standby');
+    startSchedulerReq.flush(null);
+    fixture.detectChanges();
+
+    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

@@ -0,0 +1,82 @@
+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'],
+    standalone: false
+})
+export class SchedulerControlComponent implements OnInit {
+
+  scheduler: Scheduler;
+
+  constructor(
+    private userService: UserService,
+    private schedulerService: SchedulerService
+  ) {
+  }
+
+  ngOnInit() {
+    this._getScheduler();
+  }
+
+  private _getScheduler() {
+    this.schedulerService.getScheduler()
+      .subscribe(resp => this.scheduler = resp);
+  }
+
+  startScheduler = function () {
+    this.schedulerService.startScheduler().subscribe((res) => {
+      this.scheduler.status = 'RUNNING'
+    }, (res) => {
+      console.log(JSON.stringify(res))
+    });
+  };
+
+  stopScheduler = function () {
+    this.schedulerService.shutdownScheduler().subscribe((res) => {
+      this.scheduler.status = 'STOPPED'
+    }, (res) => {
+      console.log(JSON.stringify(res))
+    });
+  };
+
+  pauseScheduler = function () {
+    this.schedulerService.standbyScheduler().subscribe((res) => {
+      this.scheduler.status = 'PAUSED'
+    }, (res) => {
+      console.log(JSON.stringify(res))
+    });
+  };
+
+  resumeScheduler = function () {
+    this.schedulerService.resumeScheduler().subscribe((res) => {
+      this.scheduler.status = 'RUNNING'
+    }, (res) => {
+      console.log(JSON.stringify(res))
+    });
+  };
+
+  stop = function () {
+    if (this.scheduler.status !== 'STOPPED') {
+      this.stopScheduler();
+    }
+  }
+
+  startOrPause = function () {
+    switch (this.scheduler.status) {
+      case 'RUNNING':
+        this.pauseScheduler();
+        break;
+      case 'PAUSED':
+        this.resumeScheduler();
+        break;
+      default:
+        this.startScheduler();
+        break;
+    }
+  };
+
+}

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

@@ -0,0 +1,2 @@
+export * from './simple-trigger-config.component';
+export {SimpleTriggerCommand} from '../../model/simple-trigger.command';

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

@@ -0,0 +1,257 @@
+<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>
+  @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>
+        </mat-card-content>
+      </mat-card>
+      }
+      <form
+        name="triggerConfigForm"
+        class="trigger-config-form"
+        class="flex-1"
+        [formGroup]="simpleTriggerReactiveForm"
+        (ngSubmit)="onSubmitTriggerConfig()">
+        <div>
+          <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 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>
+            @if (simpleTriggerReactiveForm.controls.jobClass.errors?.required) {
+            <mat-error> Job is <strong>required</strong> </mat-error>
+            }
+          </mat-form-field>
+        </div>
+        <div>
+          <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
+                class="font-13"
+                value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT"
+                >RESCHEDULE NOW WITH REMAINING REPEAT COUNT
+              </mat-option>
+              <mat-option
+                class="font-13"
+                value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_REMAINING_COUNT"
+                >RESCHEDULE NEXT WITH REMAINING COUNT
+              </mat-option>
+              <mat-option
+                class="font-13"
+                value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_EXISTING_COUNT"
+                >RESCHEDULE NEXT WITH EXISTING COUNT
+              </mat-option>
+            </mat-select>
+            @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 />
+        <div formGroupName="triggerPeriod">
+          <div>
+            <mat-form-field class="full-size-input">
+              <mat-label>Start Date (optional)</mat-label>
+              <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 class="full-size-input">
+              <mat-label>End Date (optional)</mat-label>
+              <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>
+            @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 class="full-size-input">
+              <mat-label>Repeat Interval [in mills]</mat-label>
+              <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>
+          </div>
+          <div>
+            <mat-form-field class="full-size-input">
+              <mat-label>Repeat Count</mat-label>
+              <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
+          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>
+          } @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>
+          } @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

@@ -0,0 +1,65 @@
+: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;
+}
+
+.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 */
+* {
+  scrollbar-width: auto;
+  scroll-margin-right: 0;
+  scrollbar-color: #b8b8b8 #ffffff;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #ffffff;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #b8b8b8;
+  border-radius: 10px;
+  border: 3px solid #ffffff;
+}

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

@@ -0,0 +1,302 @@
+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';
+import {HttpClient} from '@angular/common/http';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {DebugElement, NO_ERRORS_SCHEMA} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {RouterTestingModule} from '@angular/router/testing';
+import {MatIconModule} from '@angular/material/icon';
+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 {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {TriggerKey} from '../../model/triggerKey.model';
+import {Trigger} from '../../model/trigger.model';
+import {JobDetail} from '../../model/jobDetail.model';
+import {SimpleTrigger} from '../../model/simple-trigger.model';
+import JobService from '../../services/job.service';
+import {MatSelectModule} from '@angular/material/select';
+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(waitForAsync( () => {
+    TestBed.configureTestingModule({
+      imports: [FormsModule,  MatFormFieldModule, MatFormFieldModule, MatSelectModule, MatInputModule, NoopAnimationsModule,
+        MatNativeDateModule, ReactiveFormsModule,
+        MatCardModule, MatIconModule, HttpClientTestingModule, RouterTestingModule],
+      declarations: [SimpleTriggerConfigComponent],
+      providers: [SchedulerService, ApiService, ConfigService, JobService, FormBuilder],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SimpleTriggerConfigComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should fetch no triggers at the init', () => {
+    expect(component).toBeTruthy();
+    httpTestingController.expectNone(`${CONTEXT_PATH}/simple-triggers/DEFAULT/my-simple-trigger`);
+  });
+
+  function setInputValue(componentDe: DebugElement, inputSelector: string, value: string) {
+    const inputDe = componentDe.query(By.css(inputSelector));
+    const inputEl = inputDe.nativeElement;
+    inputEl.value = value;
+    inputEl.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+  }
+
+  function setDropdownValue(componentDe: DebugElement, dropdownSelector: string, value: string) {
+    const dropdownDe = componentDe.query(By.css(dropdownSelector));
+    const dropdownEl = dropdownDe.nativeElement;
+    dropdownEl.value = value;
+    dropdownEl.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+  }
+  function setDropdownValueByIndex(componentDe: DebugElement, dropdownSelector: string, index: number) {
+    const dropdownDe = componentDe.query(By.css(dropdownSelector));
+    const dropdownEl = dropdownDe.nativeElement;
+    dropdownEl.value = dropdownEl.options[index].value;
+    dropdownEl.dispatchEvent(new Event('change'));
+    fixture.detectChanges();
+  }
+
+  async function setMatSelectValueByIndex(componentDe: DebugElement, dropdownSelector: string, index: number) {
+    const dropdownDe = componentDe.query(By.css(dropdownSelector));
+    dropdownDe.nativeElement.click();
+    fixture.detectChanges();
+    const matOptionDe = componentDe.query(By.css('.mat-mdc-select-panel')).queryAll(By.css('.mat-mdc-option'));
+    matOptionDe[index].nativeElement.click();
+    fixture.detectChanges();
+  }
+
+  function openFormAndFillAllMandatoryFields() {
+    component.openTriggerForm();
+    fixture.detectChanges();
+
+    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/job-classes`);
+    getJobsReq.flush([testJobName]);
+
+    const componentDe: DebugElement = fixture.debugElement;
+
+    const submitButton = componentDe.query(By.css(submitButtonSelector));
+    expect(submitButton.nativeElement.textContent.trim()).toEqual('Submit');
+    expect(submitButton.nativeElement.getAttribute('disabled')).toEqual('');
+
+    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');
+    expect(submitButton.nativeElement.getAttribute('disabled')).toEqual('');
+    setMatSelectValueByIndex(componentDe, '#jobClass', 0);
+    expect(submitButton.nativeElement.getAttribute('disabled')).toEqual(null);
+
+    setInputValue(componentDe, '#repeatCount', '1000');
+    expect(submitButton.nativeElement.getAttribute('disabled')).toEqual('');
+
+    setInputValue(componentDe, repeatIntervalSelector, '2000');
+    expect(submitButton.nativeElement.getAttribute('disabled')).toEqual(null);
+  }
+
+  it('should enabled the submit only when the form is valid', () => {
+    openFormAndFillAllMandatoryFields();
+  });
+
+  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(testTriggerName, null);
+    mockTrigger.jobDetailDTO = <JobDetail>{jobClassName: testJobName, description: null};
+    mockTrigger.misfireInstruction = MisfireInstruction.MISFIRE_INSTRUCTION_FIRE_NOW;
+
+    openFormAndFillAllMandatoryFields();
+
+    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(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/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(testTriggerName, null);
+    component.triggerKey = mockTriggerKey;
+    fixture.detectChanges();
+
+    const mockTrigger = new SimpleTrigger();
+    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/DEFAULT/${testTriggerName}`);
+    getSimpleTriggerReq.flush(mockTrigger);
+
+    component.simpleTriggerReactiveForm.setValue({
+      triggerName: testTriggerName,
+      jobClass: testJobName,
+      triggerRecurrence: {
+        repeatInterval: 2000,
+        repeatCount: 100,
+      },
+      triggerPeriod: {
+        startDate: null,
+        endDate: null
+      },
+      misfireInstruction: MisfireInstruction.MISFIRE_INSTRUCTION_FIRE_NOW.toString()
+      });
+
+    component.openTriggerForm();
+    fixture.detectChanges();
+
+    const componentDe: DebugElement = fixture.debugElement;
+    setInputValue(componentDe, repeatIntervalSelector, '4000');
+    expect(component.simpleTriggerReactiveForm.controls.triggerRecurrence.value.repeatInterval).toEqual(4000);
+
+    const submitButton = componentDe.query(By.css(submitButtonSelector));
+    expect(submitButton.nativeElement.textContent.trim()).toEqual('Submit');
+
+    let actualNewTrigger;
+    component.onNewTrigger.subscribe(simpleTrigger => actualNewTrigger = simpleTrigger);
+
+    submitButton.nativeElement.click();
+
+    const putSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/DEFAULT/${testTriggerName}`);
+    putSimpleTriggerReq.flush(mockTrigger);
+
+    expect(actualNewTrigger).toBeUndefined();
+  });
+
+  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;
+
+    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/DEFAULT/my-simple-trigger`);
+    getSimpleTriggerReq.flush(mockTrigger);
+
+    fixture.detectChanges();
+
+    const componentDe: DebugElement = fixture.debugElement;
+    const submitButton = componentDe.query(By.css('form button:not(.datetime-picker-trigger)'));
+    expect(submitButton.nativeElement.textContent.trim()).toEqual('Reschedule');
+  });
+
+  it('should display the form if the openTriggerForm method is called', () => {
+    component.openTriggerForm();
+    fixture.detectChanges();
+
+    const componentDe: DebugElement = fixture.debugElement;
+    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}/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();
+  });
+
+  it('should not display the warning if there are eligible jobs', () => {
+    fixture.detectChanges();
+    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

@@ -0,0 +1,239 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+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 {TriggerKey} from '../../model/triggerKey.model';
+import JobService from '../../services/job.service';
+import {MisfireInstruction, MisfireInstructionCaption} from '../../model/misfire-instruction.model';
+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'],
+    standalone: false
+})
+export class SimpleTriggerConfigComponent implements OnInit {
+
+  trigger: SimpleTrigger = null;
+
+  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 && 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],
+      repeatInterval: [this.trigger?.repeatInterval]
+    }, {validators: this._triggerRepetitionValidator}),
+    misfireInstruction: [MisfireInstruction[this.trigger?.misfireInstruction], Validators.required]
+  });
+
+  scheduler: Scheduler;
+
+  triggerLoading = false;
+
+  private triggerInProgress = false;
+
+  private selectedTriggerKey: TriggerKey;
+
+  private jobs: Array<String>;
+
+  @Output()
+  onNewTrigger = new EventEmitter<SimpleTrigger>();
+
+  @Output()
+  triggerFormOpenChange = new EventEmitter<boolean>();
+
+  @Output()
+  onTriggerSubmitting = new EventEmitter<TriggerKey>();
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private schedulerService: SchedulerService,
+    private jobService: JobService
+  ) {
+  }
+
+  ngOnInit() {
+    this.simpleTriggerReactiveForm.disable();
+    this.fetchJobs();
+  }
+
+  private fetchJobs() {
+    this.jobService.fetchJobs().subscribe(jobs => this.jobs = jobs);
+  }
+
+  openTriggerForm() {
+    this.simpleTriggerReactiveForm.enable();
+    this.triggerFormOpenChange.emit(true);
+  }
+
+  private closeTriggerForm() {
+    this.simpleTriggerReactiveForm.disable();
+    this.triggerFormOpenChange.emit(false);
+  }
+
+  @Input()
+  set triggerKey(triggerKey: TriggerKey) {
+    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;
+    this.schedulerService.getSimpleTriggerConfig(this.selectedTriggerKey.name)
+      .subscribe((retTrigger: SimpleTrigger) => {
+        this.trigger = retTrigger;
+        this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(retTrigger))
+        this.triggerLoading = false;
+        this.triggerInProgress = this.trigger.mayFireAgain;
+        this.simpleTriggerReactiveForm.disable();
+      })
+  }
+
+  shouldShowTheTriggerCardContent = (): boolean => this.trigger !== null || this.simpleTriggerReactiveForm.enabled;
+
+  existsATriggerInProgress = (): boolean => this.trigger && this.triggerInProgress;
+
+  onResetReactiveForm = () => {
+    if (this.trigger) {
+      this.simpleTriggerReactiveForm.setValue(this._fromTriggerToReactiveForm(this.trigger));
+    } else {
+      this.simpleTriggerReactiveForm.reset(new SimpleTriggerReactiveForm());
+    }
+    this.closeTriggerForm();
+  };
+
+  onSubmitTriggerConfig = () => {
+    const schedulerServiceCall = this.existsATriggerInProgress() ?
+      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.triggerInProgress = this.trigger.mayFireAgain;
+
+        if (schedulerServiceCall === this.schedulerService.saveSimpleTriggerConfig) {
+          this.onNewTrigger.emit(retTrigger);
+        }
+
+        this.closeTriggerForm();
+      }, error => {
+        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 < startDate.value ?
+        <ValidationErrors>{invalidTriggerPeriod: true} : null;
+    }
+    return null;
+  }
+
+  private _triggerRepetitionValidator(control: AbstractControl): ValidationErrors | null {
+    const repeatInterval = control.get('repeatInterval');
+    const repeatCount = control.get('repeatCount');
+    if ((repeatCount.value && repeatInterval.value) || (!repeatCount.value && !repeatInterval.value)) {
+      repeatInterval.setErrors(null);
+      repeatCount.setErrors(null);
+      return null;
+    }
+    const errors = <ValidationErrors>{invalidTriggerRecurrence: true};
+    repeatInterval.setErrors(errors);
+    repeatCount.setErrors(errors);
+    return errors;
+  }
+
+  private _fromTriggerToReactiveForm = (simpleTrigger: SimpleTrigger): SimpleTriggerReactiveForm => {
+    const simpleTriggerReactiveForm = new SimpleTriggerReactiveForm();
+    simpleTriggerReactiveForm.triggerName = simpleTrigger.triggerKeyDTO.name;
+    simpleTriggerReactiveForm.jobClass = simpleTrigger.jobDetailDTO.jobClassName;
+    simpleTriggerReactiveForm.triggerRecurrence.repeatCount = simpleTrigger.repeatCount || null;
+    simpleTriggerReactiveForm.triggerRecurrence.repeatInterval = simpleTrigger.repeatInterval || 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.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;
+    simpleTriggerCommand.endDate = reactiveFormValue.triggerPeriod.endDate;
+    simpleTriggerCommand.misfireInstruction = reactiveFormValue.misfireInstruction;
+    return simpleTriggerCommand;
+  }
+
+  getMisfireInstructionCaption(): string {
+    const misfireInstructionKey = this.simpleTriggerReactiveForm.controls
+      .misfireInstruction.value as unknown as keyof typeof MisfireInstruction;
+    return MisfireInstructionCaption.get(MisfireInstruction[misfireInstructionKey]);
+  }
+}
+
+class SimpleTriggerReactiveForm {
+  triggerName: string;
+  jobClass: string;
+  triggerPeriod: {
+    startDate?;
+    endDate?;
+  } = {};
+  triggerRecurrence: {
+    repeatCount?: number;
+    repeatInterval?: number;
+  } = {};
+  misfireInstruction: string;
+}

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

@@ -0,0 +1 @@
+export * from './trigger-list.component'

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

@@ -0,0 +1,42 @@
+<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>
+    @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 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

@@ -0,0 +1,45 @@
+: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 */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: #b8b8b8 #ffffff;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 16px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #ffffff;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #b8b8b8;
+  border-radius: 10px;
+  border: 3px solid #ffffff;
+}
+
+.selectedTrigger{
+  background-color: #dddddd;
+}

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

@@ -0,0 +1,86 @@
+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';
+import {RouterTestingModule} from '@angular/router/testing';
+import {DebugElement} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {MatCardModule} from '@angular/material/card';
+import {MatIconModule} from '@angular/material/icon';
+import {MatDividerModule} from '@angular/material/divider';
+import {TriggerListComponent} from './trigger-list.component';
+import {MatListModule} from '@angular/material/list';
+import {TriggerKey} from '../../model/triggerKey.model';
+import {MatDialogModule} from '@angular/material/dialog';
+
+describe('TriggerListComponent', () => {
+
+  let component: TriggerListComponent;
+  let fixture: ComponentFixture<TriggerListComponent>;
+
+  let httpClient: HttpClient;
+  let httpTestingController: HttpTestingController;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [MatCardModule, MatDialogModule, MatDividerModule,
+        MatIconModule, MatListModule, HttpClientTestingModule, RouterTestingModule],
+      declarations: [TriggerListComponent],
+      providers: [TriggerService, ApiService, ConfigService]
+    }).compileComponents();
+
+    httpClient = TestBed.inject(HttpClient);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TriggerListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should select the first trigger of the list', () => {
+    expect(component).toBeDefined();
+
+    let actualSelectedTrigger: TriggerKey;
+    component.onSelectedTrigger.subscribe(selectedTrigger => actualSelectedTrigger = selectedTrigger);
+
+    const getTriggerListReq = httpTestingController.expectOne(`${CONTEXT_PATH}/triggers`);
+    const mockExistingTriggers = new Array<TriggerKey>();
+    const firstTriggerKey = new TriggerKey('trigger1', 'group1');
+    mockExistingTriggers.push(firstTriggerKey);
+    const secondTriggerKey = new TriggerKey('trigger2', 'group2');
+    mockExistingTriggers.push(secondTriggerKey);
+    getTriggerListReq.flush(mockExistingTriggers);
+    fixture.detectChanges();
+
+    const triggerListComponentDe: DebugElement = fixture.debugElement;
+    const triggerItemList = triggerListComponentDe.queryAll(By.css('.triggerItemList'));
+    expect(triggerItemList.length).toEqual(2);
+
+    expect(actualSelectedTrigger).toEqual(firstTriggerKey);
+
+  });
+
+  it('should open the trigger form if the trigger list is empty', () => {
+    expect(component).toBeDefined();
+
+    let actualSelectedTrigger: TriggerKey;
+    component.onSelectedTrigger.subscribe(selectedTrigger => actualSelectedTrigger = selectedTrigger);
+
+    let expectedOpenedNewTriggerFormEvent: boolean;
+    component.onNewTriggerClicked.subscribe(() => expectedOpenedNewTriggerFormEvent = true);
+
+    const getTriggerListReq = httpTestingController.expectOne(`${CONTEXT_PATH}/triggers`);
+    getTriggerListReq.flush(new Array<TriggerKey>());
+    fixture.detectChanges();
+
+    const triggerListComponentDe: DebugElement = fixture.debugElement;
+    const triggerItemList = triggerListComponentDe.queryAll(By.css('.triggerItemList'));
+    expect(triggerItemList.length).toEqual(0);
+
+    expect(expectedOpenedNewTriggerFormEvent).toBeTruthy();
+    expect(actualSelectedTrigger).toBeUndefined();
+  });
+
+});

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

@@ -0,0 +1,102 @@
+import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {TriggerService} from '../../services/trigger.service';
+import {TriggerKey} from '../../model/triggerKey.model';
+import {SimpleTrigger} from '../../model/simple-trigger.model';
+import {MatDialog, MatDialogRef} from '@angular/material/dialog';
+
+@Component({
+    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 {
+  constructor(public dialogRef: MatDialogRef<UnsupportedMultipleJobsDialog>) {
+  }
+  closeDialog(): void {
+    this.dialogRef.close();
+  }
+}
+
+@Component({
+    selector: 'qrzmng-trigger-list',
+    templateUrl: './trigger-list.component.html',
+    styleUrls: ['./trigger-list.component.scss'],
+    standalone: false
+})
+export class TriggerListComponent implements OnInit {
+
+  newTriggers: Array<SimpleTrigger> = new Array<SimpleTrigger>();
+
+  loading = true;
+
+  triggerKeys: Array<TriggerKey> = new Array<TriggerKey>();
+
+  @Output() onNewTriggerClicked = new EventEmitter<void>();
+  triggerFormIsOpen = false;
+
+  selectedTrigger: TriggerKey;
+  @Output() onSelectedTrigger = new EventEmitter<TriggerKey>();
+
+  constructor(
+    private triggerService: TriggerService,
+    public dialog: MatDialog
+  ) {
+  }
+
+  ngOnInit() {
+    this.loading = true;
+    this.fetchTriggers();
+  }
+
+  @Input()
+  set openedNewTriggerForm(triggerFormIsOpen: boolean) {
+    this.triggerFormIsOpen = triggerFormIsOpen;
+  }
+
+  getTriggerKeyList = () => {
+    const newTriggerKeys = this.newTriggers.map(simpleTrigger => simpleTrigger.triggerKeyDTO);
+    return newTriggerKeys.concat(this.triggerKeys);
+  }
+
+  private fetchTriggers() {
+    this.triggerService.fetchTriggers()
+      .subscribe((triggerKeys: Array<TriggerKey>) => {
+        this.triggerKeys = triggerKeys;
+        if (!triggerKeys || triggerKeys.length === 0) {
+          this.onNewTriggerBtnClicked();
+        } else {
+          this.selectTrigger(this.triggerKeys[0]);
+        }
+      })
+  }
+
+  selectTrigger(triggerKey: TriggerKey) {
+    this.selectedTrigger = triggerKey;
+    this.onSelectedTrigger.emit(triggerKey);
+  }
+
+  onNewTriggerBtnClicked() {
+    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.selectTrigger(newTrigger.triggerKeyDTO);
+  }
+}
+
+

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

@@ -0,0 +1,31 @@
+import {Injectable} from '@angular/core';
+import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import {UserService} from '../services';
+import {Observable} from 'rxjs';
+
+@Injectable()
+export class AdminGuard  {
+  constructor(private router: Router, private userService: UserService) {
+  }
+
+  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
+    if (this.userService.isAnAnonymousUser) {
+      return true;
+    }
+    if (this.userService.currentUser) {
+      return true;
+      // to be enable again in the scope of the card #65
+      // if (JSON.stringify(this.userService.currentUser.authorities).search('ROLE_ADMIN') !== -1) {
+      //   return true;
+      // } else {
+      //   this.router.navigate(['/403']);
+      //   return false;
+      // }
+    } else {
+      console.log('NOT AN ADMIN ROLE');
+      this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
+      return false;
+    }
+  }
+}
+

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

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { UserService } from '../services';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class GuestGuard  {
+
+  constructor(private router: Router, private userService: UserService) {}
+
+  canActivate(): boolean {
+    if (this.userService.currentUser) {
+      this.router.navigate(['/']);
+      return false;
+    } else {
+      return true;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+export * from './login.guard';
+export * from './guest.guard';
+export * from './admin.guard';
+

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

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { UserService } from '../services';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export class LoginGuard  {
+
+  constructor(private router: Router, private userService: UserService) {}
+
+  canActivate(): boolean {
+    if (this.userService.currentUser) {
+      return true;
+    } else {
+      this.router.navigate(['/']);
+      return false;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+import SockJS from 'sockjs-client';
+import Stomp from 'stompjs';
+
+export class SocketEndpoint {
+  client: SockJS;
+  stomp: Stomp;
+}

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

@@ -0,0 +1,20 @@
+export class SocketOption {
+  socketUrl: string;
+  topicName: string;
+  brokerName: string;
+  reconnectionTimeout = 30000
+
+  getAccessToken: Function = () => null;
+
+  constructor(socketUrl: string,
+              topicName: string,
+              getAccessToken?: Function,
+              brokerName: string = null,
+              reconnectionTimeout: number = 30000) {
+    this.socketUrl = socketUrl;
+    this.topicName = topicName;
+    this.brokerName = brokerName;
+    this.reconnectionTimeout = reconnectionTimeout;
+    this.getAccessToken = getAccessToken || (() => null);
+  }
+}

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/jobDetail.model.ts

@@ -0,0 +1,4 @@
+export class JobDetail {
+  jobClassName: string;
+  description: string;
+}

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

@@ -0,0 +1,4 @@
+export class JobKeyModel {
+    name: string;
+    group: string;
+}

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

@@ -0,0 +1,57 @@
+export enum MisfireInstruction {
+  MISFIRE_INSTRUCTION_FIRE_NOW = 1,
+  MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT = 2,
+  MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT = 3 ,
+  MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_REMAINING_COUNT = 4,
+  MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_EXISTING_COUNT = 5
+}
+
+export function getMisfireInstructionByIndex(index: number) {
+  return Object.keys(MisfireInstruction)[index];
+}
+
+// function enumFromStringValue<T> (enm: { [s: string]: T}, value: string): T | undefined {
+//   return (Object.values(enm) as unknown as string[]).includes(value)
+//     ? value as unknown as T
+//     : undefined;
+// }
+//
+// export function parseMisfireInstruction(str: string): MisfireInstruction {
+//   return enumFromStringValue<MisfireInstruction>(MisfireInstruction, str);
+//   // return  (<any>MisfireInstruction)[str]
+//   // const indexOfStr = Object.values(MisfireInstruction).indexOf(str as unknown as MisfireInstruction);
+//   // const key = Object.keys(Sizes)[indexOfStr];
+//   // return MisfireInstruction[k]
+//   // return Object.values(MisfireInstruction).find(val => val === str);
+// }
+
+export const MisfireInstructionCaption = new Map<number, string>([
+  [MisfireInstruction.MISFIRE_INSTRUCTION_FIRE_NOW,
+    `The job is executed immediately after the scheduler discovers misfire situation.<br/>
+     In case of the trigger has been set with a repeat count, this policy is equals to RESCHEDULE NOW WITH REMAINING REPEAT COUNT`
+  ],
+  [MisfireInstruction.MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT,
+    `First misfired trigger is executed immediately. Then the scheduler waits desired interval and executes all remaining triggers.<br/>
+     Effectively the first fire time of the misfired trigger is moved to current time with no other changes.`
+  ],
+  [MisfireInstruction.MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT,
+    `First misfired execution runs immediately. Remaining misfired executions are discarded. Remaining not-yet-fired triggers are executed
+     with desired interval, starting from the recovered misfired execution.<br/>
+     Use this policy if your constraint is to honor the end date time.<br/>
+     <strong>Warning</strong> The actual number of job executions could be less than initially set,
+     because some of the misfired triggers are ignored. The end date time you set is always `
+  ],
+  [MisfireInstruction.MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_REMAINING_COUNT,
+    `In case of misfire event, the scheduler won't do anything immediately. Instead it will wait for next scheduled time the trigger and
+    run all triggers with scheduled interval. Misfired trigger are simply post-poned but not ignored.<br/>
+    Use this policy if your constraint is to execute the job for the all times equals to the repeation counter.<br/>' +
+    '<strong>Warning</strong> The scheduler can completed over the end date time you set `],
+  [MisfireInstruction.MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_EXISTING_COUNT,
+    `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/>
+    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

@@ -0,0 +1,23 @@
+import {TriggerKey} from './triggerKey.model';
+
+export class Scheduler {
+  name: string;
+  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;
+    this.status = status;
+    this.instanceId = instanceId;
+    this.triggerKeys = triggerKeys;
+  }
+}

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

@@ -0,0 +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

@@ -0,0 +1,9 @@
+export class SimpleTriggerForm {
+  triggerName: string;
+  jobClass: string;
+  startDate: Date;
+  endDate: Date;
+  repeatCount: number;
+  repeatInterval: number;
+  misfireInstruction: string;
+}

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

@@ -0,0 +1,7 @@
+import {Trigger} from './trigger.model';
+
+export class SimpleTrigger extends Trigger {
+  repeatCount: number;
+  repeatInterval: number;
+  timesTriggered: number;
+}

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-fired-bundle.model.ts

@@ -0,0 +1,10 @@
+export default class TriggerFiredBundle {
+  timesTriggered: number;
+  repeatCount: number;
+  finalFireTime: string;
+  nextFireTime: string;
+  previousFireTime: string;
+  jobKey: string;
+  jobClass: string;
+  percentage: number;
+}