Remove Maven Central badge from README

Removed Maven Central badge from README.

.dockerignore

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

.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@v3
+
+      - name: Set up Java 11 for publishing to Maven Central Repository
+        uses: actions/setup-java@v3
+        with:
+          java-version: '11'
+          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 11 for publishing to GitHub Packages
+        uses: actions/setup-java@v3
+        with:
+          java-version: '11'
+          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@v3
+      - name: Set up JDK 11
+        uses: actions/setup-java@v3
+        with:
+          java-version: '11'
+          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:  [16.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        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@v3
+        with:
+          fetch-depth: 0  # Shallow clones should be disabled for a better relevancy of analysis
+      - name: Set up JDK 17
+        uses: actions/setup-java@v3
+        with:
+          java-version: 17
+          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

@@ -1 +1,3 @@
 /.project
+.idea
+*.iml

.travis.yml

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

CHANGELOG.md

@@ -0,0 +1,34 @@
+## **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"]

README.md

@@ -1,110 +1,312 @@
-[![Gitter](https://badges.gitter.im/quartz-manager/community.svg)](https://gitter.im/quartz-manager/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+[![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)
+
+# Table Of Contents
+
+
+[QUARTZ MANAGER](https://github.com/fabioformosa/quartz-manager#quartz-manager)  
+        [Quartz Manager UI](https://github.com/fabioformosa/quartz-manager#quartz-manager-ui)  
+        [Quartz Manager API](https://github.com/fabioformosa/quartz-manager#quartz-manager-api)    
+[HOW IT WORKS](https://github.com/fabioformosa/quartz-managerhttps://github.com/fabioformosa/quartz-manager#get-started)  
+        [Quartz Manager Starter API Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-api-lib)  
+        [Quartz Manager Starter UI Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-ui-lib)   
+        [Quartz Manager Starter Security Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-security-lib)  
+        [Quartz Manager Persistence Lib](https://github.com/fabioformosa/quartz-manager#quartz-manager-starter-persistence-lib)  
+[EXAMPLES](https://github.com/fabioformosa/quartz-manager#examples)  
+[LIMITATIONS](https://github.com/fabioformosa/quartz-manager#limitations)  
+[ROADMAP](https://github.com/fabioformosa/quartz-manager#roadmap)  
+[REPOSITORY](https://github.com/fabioformosa/quartz-manager#repository)  
+[HOW TO CONTRIBUTE](https://github.com/fabioformosa/quartz-manager#how-to-contribute)  
+[SUPPORT THE PROJECT](https://github.com/fabioformosa/quartz-manager#%EF%B8%8F-support-the-project-%EF%B8%8F)
 
 # QUARTZ MANAGER
-UI Manager for Quartz Scheduler.
+In the last decade, the [Quartz Scheduler](http://www.quartz-scheduler.org/) has become the most adopted opensource job scheduling library for Java applications.  
 
-Through this webapp you can launch and control your scheduled job. The UI Console is composed by a management panel to set trigger, start/stop scheduler and a log panel with a progress bar to display the job output. 
+**Quartz Manager** enriches it with a **REST API** layer and a handy **UI console** to easily control and monitor a Quartz Scheduler.  
 
-![](https://github.com/fabioformosa/quartz-manager/blob/master/quartz-manager-api/src/main/resources/quartz-manager-2-screenshot_800.PNG)
+Quartz Manager is a Java library you can import in your Spring-Based Web Application to run scheduled jobs, start&stop them and get the job outcomes. You can do it through HTTP calls to the the Quartz Manager API or in a visual manner through the Quartz Manager UI dashboard.  
 
-## 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.
+
+## QUARTZ MANAGER UI
+The **Quartz Manager UI** is a dashboard in the form of a single-page-application provided by the Quartz Manager Java library itself. You can have it embedded in your project, as well as you get embedded the Swagger UI.  
+It leverages the websockets to receive in real-time the trigger updates and the outcomes of the job executions.  
+
+![](https://github.com/fabioformosa/quartz-manager/blob/master/quartz-manager-parent/quartz-manager-web-showcase/src/main/resources/quartz-manager-4-screenshot.png)
+
+## QUARTZ MANAGER API
+Quart-Manager exposes REST endpoints to interact with the Quartz Scheduler. This endpoints are invoked by Quartz Manager UI also.
+The REST API are documented by an OpenAPI Specification interface. 
+
+![](https://github.com/fabioformosa/quartz-manager/blob/master/quartz-manager-parent/quartz-manager-web-showcase/src/main/resources/quartz-manager-4-swagger.png)
+
+
+# HOW IT WORKS
+Quartz Manager can either coexist with your existing instance of Quartz or it can import itself the Quartz dependency.   
+
+In the first case, Quartz Manager is compatible with Quartz v2.3.x . Quartz Manager creates and configures its own instance of Quartz Scheduler and it manages only the jobs and the triggers created through it. Your other jobs and triggers, running in the existing quartz instance, are out of the scope of Quartz Manager.  
+
+In the latter case, in which there isn't an existing quartz instance, you can rely on Quartz Manager to speed up the setup of a Quartz instance, with a persistent storage also if you need it. Futhermore, if you start a bare project from scratch, just to run scheduled jobs, Quartz Manager comes with the option to enable a security layer to protect the API and the UI with an authentication model based on [JWT](https://jwt.io).
+
+**FEATURES**
+* You can schedule a [Quartz Simple Trigger](http://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-05.html) which allows you to start a job now or in a specific date-time, to set it as a recurring job with a certain time frequency, unlimited or limited on the number of fires and within a certain end date.
+* You can start, pause and resume the quartz scheduler via API or clicking the start/stop buttons at the UI console.
+* Leveraging on an active web-socket, the `Quartz-Manager-UI` updates in real time the progress bar and it displays the list of the latest logs produced by your quartz job.
+* You can enable a secure layer, if your project doesn't have any, to give access at the API and the UI only to authenticated users.
+* You can enable a persistent layer, to persist the config and the progress of your trigger, in a postgresql database.
+
+# GET STARTED
+
+**Requirements** 
+  Java 9+, Spring Framework 5+ (Spring Boot 2.x)
+  
+Quart Manager is a modular library:
+* quartz-manager-starter-api (mandatory)
+* quartz-manager-starter-ui (optional)
+* quartz-manager-starter-security (optional)
+* quartz-manager-starter-persistence (optional)
+
+In order to decrease the overall configuration time for the project, all modules of the library follow the approach of Spring Starters. Thus, it's enough to import the dependency to get started.
+
+Below the list of the quartz-manager modules you can import.
+
+## Quartz Manager Starter API Lib
+This is the only mandatory module of the library.   
+Add the dependency, make eligible for Quart Manager the job classes and set the props in your `application.properties` file.
+
+### Step 1. Dependency
+
+#### Maven
+```
+<dependency>
+  <groupId>it.fabioformosa.quartz-manager</groupId>
+  <artifactId>quartz-manager-starter-api</artifactId>
+  <version>4.0.9</version>
+</dependency>
+```
+#### Gradle
+```
+implementation group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-api', version: '4.0.9'
+```
+
+### Step 2. Quartz Manager Job Classes
+The job classes, which can be eligible for triggers managed by Quartz Manager, must extend the super-class `AbstractLoggingJob`. 
+In this way, Quartz Manager is able to collect and display the outcomes at the UI console.
+
+ ```
+ public class SampleJob extends AbstractLoggingJob {
+
+    @Override
+    public LogRecord doIt(JobExecutionContext jobExecutionContext) {
+        ... do stuff ...
+        return new LogRecord(LogType.INFO, "Hello from QuartManagerDemo!");
+    }
+
+}
+```
+
+### Step 3. Quartz Manager API - App Props
+
+| Property                           | Values   |Mandatory | Default | Description                                                               |
+| :---                               |:---      |:---      |:---     |:--                                                                        |
+| quartz-manager.jobClassPackages    | string   | Yes      |         |java base package which contains your job classes                          |
+| quartz-manager.oas.enabled         | boolean  | No       | false   |whether to create an OpenAPI instance to expose the OAS and the Swagger UI |
+
+
+### REST API & OpenAPI Specification
+Set the app prop `quartz-manager.oas.enabled=true` if you want to expose the OpenApi Specification of the Quartz Manager APIs.  
+Reach out the swagger-ui at the URL:
+[http://localhost:8080/swagger-ui.html](http://localhost:8080/swagger-ui.html)
+
+If your project has already an OpenAPI instance and you've set `quartz-manager.oas.enabled=true`, then make sure to add an OpenApiGroup to group the API of your application. Quart Manager exposes its API in group called "Quartz Manager". If you use OAS Annotations:
+```
+  @Bean
+  public GroupedOpenApi simplySpringDemoGroupedOpenApi() {
+    return GroupedOpenApi.builder().group("myapp").packagesToScan("com.example.myapp").build();
+  }
+```
+
+### QUARTZ SETTINGS
+Quartz Manager creates its own instance of a [Quartz Scheduler](http://www.quartz-scheduler.org/). 
+
+By default, the managed quartz instance is instantiated with the following props:
+
+```
+org.quartz.scheduler.instanceName=quartz-manager-scheduler
+org.quartz.threadPool.threadCount=1
+```
+
+You can customize the configuration of the Quartz managed by Quartz Manager creating a file `managed-quartz.properties` in the classpath (`src/main/resources`).   
+For further details about the quartz properties, click [here](http://www.quartz-scheduler.org/documentation/quartz-2.3.0/configuration/).
+
+#### Existing Quartz Instance
+Quarz Manager imports transitively the [Quartz Scheduler library](https://mvnrepository.com/artifact/org.quartz-scheduler/quartz) ver 2.3.2.
+However, Quartz Manager can be imported even thought you've already imported the quartz scheduler lib. Indeed Quartz Manager coexists with the existing Quarz Scheduler Instance you've created in your project. In that case, Quartz Manager will manage the triggers created by it and it won't interfere with the other quartz instances.
+The prerequesite is that you've imported a quartz scheduler ver 2.3.x.
+
+You can configure the Quartz instance managed by Quartz Manager through the file `managed-quartz.properties` and your own Quartz instance through the file  `quartz.properties`.
+
+If you've created a `SchedulerFactoryBean`, tag it as `@Primary` to avoid conflicts in-type, since Quartz Manager creates another bean of the same type.
+
+```
+    @Primary
+    @Bean
+    public SchedulerFactoryBean schedulerFactoryBean( JobFactory jobFactory, Properties quartzProperties) {
+        SchedulerFactoryBean factory = new SchedulerFactoryBean();
+        ...
+        return factory;
+    }
+```
+
+
+## Quartz Manager Starter UI Lib
+You can optionally import the following dependency to have the UI Dashboard to interact with the Quartz Manager API.
+
+### Dependency
+
+#### Maven
+```
+<dependency>
+  <groupId>it.fabioformosa.quartz-manager</groupId>
+  <artifactId>quartz-manager-starter-ui</artifactId>
+  <version>4.0.9</version>
+</dependency>
+```
+#### Gradle
+```
+implementation group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-ui', version: '4.0.9'
+``` 
+
+### Reach out the UI Console at URL
+if you run locally [http://localhost:8080/quartz-manager-ui/index.html](http://localhost:8080/quartz-manager-ui/index.html)  
+
+
+
+## Quartz Manager Starter Security Lib
+
+Import this optional dependency, if you want to enable a security layer and allow the access to the REST API and UI only to authenticated users.  
+The authentication model of Quartz Manager is based on [JWT](https://jwt.io/).
+
+If you're going to import Quartz Manager in a project with an existing configuration of Spring Security, consider the following:
+- Only if your existing security is cookie-based, actually you don't need to import the module `quartz-manager-security-lib`. Simply, Quartz Manager will be under the hat of your security setup. In all other cases (based on HTTP headers, query params, etc) Quartz Manager is not aware about your auth token and it will implement its own authentication model.
+- Quartz Manager Security relies on Spring Security upon a dedicated *HTTP Spring Security Chain* applied to the base path `/quartz-manager`. So it doesn't interfere with your existing security setup.
+- Quartz Manager Security keeps simple the authentication, adopting the InMemory Model. You have to define the users (in terms of username/credentials passed via `application.properties`) can access to Quartz Manager.
+- By default, the UI attaches the JWT Token to each request in the authorization header in the "Bearer" format.
+
+Future development: the Quart Manager Security OAuth2 client.
+
+
+### Dependency
+
+#### Maven
+
+```
+<dependency>
+  <groupId>it.fabioformosa.quartz-manager</groupId>
+  <artifactId>quartz-manager-starter-security</artifactId>
+  <version>4.0.9</version>
+</dependency>
+```
+
+#### Gradle
+
+```
+compile group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-security', version: '4.0.9'
+```
+
+
+### Quartz Manager Security Lib - App Props
+
+| Property                                                    | Values   |Mandatory         | Default | Description     |
+| :---                                                        |:---      |:---              |:---     |:--              |
+| quartz-manager.security.jwt.secret                          | string   |                  |         | Secret to sign the JWT Token |          
+| quartz-manager.security.jwt.expiration-in-sec               | number   | no               | 28800   |                              |
+| quartz-manager.security.accounts.in-memory.enabled          | boolean  | no               | true    |                              |
+|quartz-manager.security.accounts.in-memory.users[0].username | string   | yes (if enabled) |         |                              | 
+|quartz-manager.security.accounts.in-memory.users[0].password | string   | yes              |         |                              |
+|quartz-manager.security.accounts.in-memory.users[0].roles[0] | string   | yes              |         | set the value ADMIN          |
+
+
+## Quart Manager Starter Persistence Lib
+
+By default, Quartz Manager runs with a `org.quartz.simpl.RAMJobStore` that stores your managed scheduler in memory. The RAMJobStore is the simplest store and also the most performant. However it comes with the drawback that all scheduling data are lost if your applications ends or crashes. In case of a restarting of your app, you can't resume the scheduler from the point it stopped.  
+Import the Quartz Manager Persistence Module if you want to persist your scheduler data.  
+The pre-requesite is the availability of Postgresql database where Quartz Manager can store its information. You have to provide it a bare database and a postresql user granted for DDL and DML queries. About the DDL, consider that Quartz Manager Persistence will create all tables, it needs to work, at the bootstrap.
+
+### Dependency
+
+#### Maven
+
+```
+<dependency>
+  <groupId>it.fabioformosa.quartz-manager</groupId>
+  <artifactId>quartz-manager-starter-persistence</artifactId>
+  <version>4.0.9</version>
+</dependency>
+```
+
+#### Gradle
+
+```
+compile group: 'it.fabioformosa.quartz-manager', name: 'quartz-manager-starter-persistence', version: '4.0.9'
+```
+
+### Quartz Manager Persistence Lib - App Props
+
+| Property                                                    | Values   |Mandatory         | Default | Description     |
+| :---                                                        |:---      |:---              |:---     |:--              |
+| quartz-manager.persistence.quartz.datasource.url            | string   | yes              |         |eg. jdbc:postgresql://localhost:5432/quartzmanager |          
+| quartz-manager.persistence.quartz.datasource.user           | string   | yes              |         |                              |
+| quartz-manager.persistence.quartz.datasource.password       | string   | yes              |         |                              |
+
+
+
+## Examples
+
+You can find some examples of different scenarios of projects which import Quartz Manager at the repository [quartz-manager-use-cases](https://github.com/fabioformosa/quartz-manager-use-cases)
+* *simply-spring* - tipical scenario in which you create a minimal spring project from scratch dedicated to launch your scheduled jobs. Imported libraries: Quartz Manager API, Quartz Manager UI and Quartz Manager Security.
+* *simply-spring-no-security* - as simple-spring, without the security. Imported libraries: Quartz Manager API, Quartz Manager UI.
+* *existing-security-cookie-based* - It demonstrates how Quartz Manager stays under the security of your project, in case of an auth model based on cookies. Imported libraries: Quartz Manager API, Quartz Manager UI. 
+* *existing-security-header-based* - It demonstrates how Quartz Manager Security can coexists with another Spring Security Config present in your project. Imported libraries: Quartz Manager API, Quartz Manager UI and Quartz Manager Security.
+* *existing-quartz* - It demonstrates how to Quartz Manager can coexist with a Quartz instance already present in your project Imported libraries: Quartz Manager API, Quartz Manager UI.
+* *existing-quartz-and-storage* - It demonstrates how to Quartz Manager Persistence can coexist with a Quartz instance already present in your project. Imported libraries: Quartz Manager API, Quartz Manager UI and Quartz Manager Persistence.
+* *with-persistence* - It demonstrates how to import the Quartz Manager Persistence and get created the quartz tables automatically at the bootstrap
+
+
+## Limitations
+
+> Step by step, day by day
+
+Quartz Manager has a work-in-progress roadmap to be full-fledged library to manage a [Quartz Scheduler](http://www.quartz-scheduler.org/).
+
+At this stage of the roadmap, these are the limitations:
+* Currently you cannot start multiple triggers or multiple jobs. At the moment a workaround is to launch multiple projects based on Quartz Manager.
+* Currently you can only start [Quartz Simple Trigger](http://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/tutorial-lesson-05.html). The support to other kind of triggers will come soon: [Calendar Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CalendarIntervalTrigger.html), [Cron Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CronTrigger.html), [Daily Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/DailyTimeIntervalTrigger.html)
+* Currently the cluster mode is not supported
+* Currently the persistence of Quartz Manager supports only the PostgreSQL. The support to other king of triggers will come soon: MySQL, MariaDB, SqlServer, Oracle, H2.  
 
 ## ROADMAP
-Open the [Project Roadmap](https://github.com/fabioformosa/quartz-manager/projects) to take a look at the plan of Quartz Manager.  
-Currently this project might be useful to look how to import Quartz Library in a spring boot application. For this purpose, browse the folder `quartz-manager-parent/quartz-manager-api`.  
-We're just working to create a library, from project `quartz-manager-parent/quartz-manager-api`, to be imported in your spring boot where you have your job to be scheduled.  
 
-Take a loot to the project [Quartz-Manager Demo](https://github.com/fabioformosa/quartz-manager-demo), it is an example of how-to:
- * import the quartz-manager-api library in your webapp
- * include the quartz-manager frontend (angular based) through a webjar
- * set properties into the application.yml
- * add a secure layer to allow the API only to logged users
- * schedule a custom job (a dummy `hello world`)
- 
- **NB: In few days, we'll release the library jar of quartz-manager into the maven central repo.**
+Take a look a the [Project Roadmap](https://github.com/users/fabioformosa/projects/1).  
+Don't hesitate to give your feedback, your opinion is important to understand the priority.
 
 Next steps in the roadmap are:
-* to add a persistent layer to save all job setup.
-* to add a complete setup UI panel for quartz, in term of cronjobs and multiple jobs.
-* to add CI/CD pipeline to ease the deploy pulling a docker container.
-* Enabling adapters for integrations: kafka, etc.
+* Manage multiple triggers and jobs
+* Cluster mode support
+* Support to other all types of Quartz Triggers:  [Calendar Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CalendarIntervalTrigger.html), [Cron Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/CronTrigger.html), [Daily Interval Trigger](https://www.quartz-scheduler.org/api/2.3.0/org/quartz/DailyTimeIntervalTrigger.html)
+* UI Re-styling
+* OAuth Client
+* Support to other DBMS than PostreSQL: MySQL, MariaDB, SqlServer, Oracle, H2.
 
-## PROJECT STRUCTURE
-* **quartz-parent/quartz-manager-api** is the library that can be imported in webapp to have the quartz-manager API.
-* **quartz-parent/quartz-manager-webjar** is a maven module to build and package the angular frontend in a webjar.
-* **quartz-parent/quartz-manager-security** is ther library that can be imported in a webapp to have a security layer (login) over the quartz-manager API.
-* **quartz-parent/quartz-manager-web-showcase** is an example of webapp that imports quartz-manager-api. Useful to develop the frontend started locally with the webpack dev server.
-* **quartz-frontend** is the angular app that interacts with the Quartz Manager API.
+## Repository
+
+Checkout the **master branch** to get the sourcecode of the latest released versions.  
+Checkout the **develop branch** to take a look at the sourcecode of the incoming release.
 
 ## HOW-TO CONTRIBUTE  
-**[requirements]** Make sure you have installed
-* [Java 8](https://java.com/download/) or greater
-* [Maven](https://maven.apache.org/)
-* [npm](https://www.npmjs.com/get-npm), [node](https://nodejs.org) and [angular-cli](https://cli.angular.io/)
 
-To build&run quartz-manager in your machine:
-
-```
-#CLONE REPOSITORY
-git clone https://github.com/fabioformosa/quartz-manager.git
-
-# START QUARTZ-MANAGER-WEB
-cd quartz-manager/quartz-parent/quartz-manager-web
-mvn spring-boot:run
-
-# START QUARTZ-MANAGER-FRONTEND
-cd quartz-manager/quartz-manager-frontend
-npm install
-npm start
-
-```
-
-1. Open browser at [http://localhost:4200](http://localhost:4200)
-1. Log in with **default credentials**: `admin/admin`
-
-If you are not confident with maven CLI, you can start it by your IDE. For more details [spring boot ref.](http://docs.spring.io/spring-boot/docs/current/reference/html/using-boot-running-your-application.html)
-
-
-## HOW TO RUN YOUR SCHEDULED JOB
-By default, quartz-manager-web executes the dummy job that logs "hello world!".
-Replace the dummy job (class: `it.fabioformosa.quartzmanager.jobs.SampleJob`) with yours. Follow these steps:
-
-1. Extend the super class `it.fabioformosa.quartzmanager.jobs.AbstractLoggingJob`
-1. set property `quartz-manager.jobClass` with qualified name of your custom Job Class (default job is SampleJob.class)
-
-## HOW TO CHANGE SETTINGS
-* Num of Threads: `/quartz-manager-parent/quartz-manager-web/src/main/resources/quartz.properties`
-* Credentials: To change admin's password, set ENV var `quartz-manager.account.pwd`
-* quartz-manager backend context path (default `/quartz-manager`) and port (default `8080`): `/quartz-manager/src/main/resources/application.properties`
-
-## HOW TO BROWSE REST API DOC
-Swagger has been added as library. So, you can get REST API doc opening: [http://localhost:8080/quartz-manager/swagger-ui.html](http://localhost:8080/quartz-manager/swagger-ui.html)
-
-## Tech Overview
-
-**Backend Stack** Java 8, Spring Boot 2.1.4 (Spring MVC 5.1.6, Spring Security 5.1.5, Spring AOP 5.1.6), Quartz Scheduler 2.3.1
-
-**Application Server** Tomcat (embedded)
-
-**Frontend** Angular 9.1.4, Web-Socket (stompjs 2.3.3)
-
-**Style** angular material, FontAwesome 5
-
-From quartz manager ver 2.x.x, the new structure of project is:
- * REST API backend
- * Single Page Application frontend (angular 9)
-
-(The previous version of quartz manager was a monolithic backend that provided also frontend developed with angularjs 1.6.x. You can find it at the branch 1.x.x)
-
-## Contributes
-
-Every contribution is welcome. Open a issue, so we can discuss about new features and implement them. 
-
-## Credits
-
-* this project has been created from [angular-spring-starter](https://github.com/bfwg/angular-spring-starter)
+For tech details, how-to run locally the project and how-to contribute, reach out this other [README.md](https://github.com/fabioformosa/quartz-manager/blob/develop/quartz-manager-parent/README.md)
 
+## ❤️ SUPPORT THE PROJECT ❤️
 
+Sometimes it's a matter of a kind action. You can support Quartz Manager and its continuous improvement turning on a github star on this project ⭐

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/.eslintrc.json

@@ -0,0 +1,214 @@
+/*
+👋 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",
+        "@typescript-eslint/tslint"
+    ],
+    "root": true,
+    "rules": {
+        "@angular-eslint/component-class-suffix": "error",
+        "@angular-eslint/component-selector": [
+            "error",
+            {
+                "type": "element",
+                "prefix": "app",
+                "style": "kebab-case"
+            }
+        ],
+        "@angular-eslint/directive-class-suffix": "error",
+        "@angular-eslint/directive-selector": [
+            "error",
+            {
+                "type": "attribute",
+                "prefix": "app",
+                "style": "camelCase"
+            }
+        ],
+        "@angular-eslint/no-host-metadata-property": "error",
+        "@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": "error",
+        "@typescript-eslint/naming-convention": [
+            "error",
+            {
+                "selector": "variable",
+                "format": [
+                    "camelCase",
+                    "UPPER_CASE"
+                ],
+                "leadingUnderscore": "forbid",
+                "trailingUnderscore": "forbid"
+            }
+        ],
+        "@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/quotes": [
+            "error",
+            "single"
+        ],
+        "@typescript-eslint/semi": [
+            "off",
+            null
+        ],
+        "@typescript-eslint/tslint/config": [
+            "error",
+            {
+                "rules": {
+                    "import-spacing": true,
+                    "invoke-injectable": true,
+                    "no-access-missing-member": true,
+                    "templates-use-public": true,
+                    "whitespace": true
+                }
+            }
+        ],
+        "@typescript-eslint/type-annotation-spacing": "off",
+        "@typescript-eslint/unified-signatures": "error",
+        "brace-style": [
+            "error",
+            "1tbs"
+        ],
+        "curly": "error",
+        "dot-notation": "off",
+        "eol-last": "off",
+        "eqeqeq": [
+            "error",
+            "smart"
+        ],
+        "guard-for-in": "error",
+        "id-denylist": "off",
+        "id-match": "off",
+        "import/no-deprecated": "warn",
+        "indent": "off",
+        "max-len": [
+            "error",
+            {
+                "code": 140
+            }
+        ],
+        "no-bitwise": "error",
+        "no-caller": "error",
+        "no-console": [
+            "error",
+            {
+                "allow": [
+                    "log",
+                    "warn",
+                    "dir",
+                    "timeLog",
+                    "assert",
+                    "clear",
+                    "count",
+                    "countReset",
+                    "group",
+                    "groupEnd",
+                    "table",
+                    "dirxml",
+                    "error",
+                    "groupCollapsed",
+                    "Console",
+                    "profile",
+                    "profileEnd",
+                    "timeStamp",
+                    "context"
+                ]
+            }
+        ],
+        "no-debugger": "error",
+        "no-empty": "off",
+        "no-empty-function": "off",
+        "no-eval": "error",
+        "no-fallthrough": "error",
+        "no-new-wrappers": "error",
+        "no-redeclare": "error",
+        "no-restricted-imports": "error",
+        "no-shadow": "off",
+        "no-throw-literal": "error",
+        "no-trailing-spaces": "off",
+        "no-underscore-dangle": "off",
+        "no-unused-expressions": "off",
+        "no-unused-labels": "error",
+        "no-var": "error",
+        "prefer-const": "error",
+        "quotes": "off",
+        "radix": "error",
+        "semi": "off",
+        "spaced-comment": [
+            "error",
+            "always",
+            {
+                "markers": [
+                    "/"
+                ]
+            }
+        ],
+        "valid-typeof": "error"
+    }
+}

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

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

quartz-manager-frontend/.gitignore

@@ -40,6 +40,4 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
-
-#package-lock.json
-package-lock.json
+/.angular/

quartz-manager-frontend/.prettierignore

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

quartz-manager-frontend/.prettierrc.json

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

quartz-manager-frontend/angular.json

@@ -3,8 +3,9 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "angular-spring-starter": {
+    "quartz-manager-ui": {
       "root": "",
+      "prefix": "qrzmng",
       "sourceRoot": "src",
       "projectType": "application",
       "architect": {
@@ -17,6 +18,9 @@
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
             "polyfills": "src/polyfills.ts",
+            "allowedCommonJsDependencies": [
+              "stompjs", "sockjs-client", "moment", "angular2-uuid"
+            ],
             "assets": [
               "src/assets",
               "src/favicon.ico"
@@ -27,6 +31,14 @@
             "scripts": []
           },
           "configurations": {
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
             "production": {
               "budgets": [
                 {
@@ -37,7 +49,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -55,33 +66,30 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular-spring-starter:build"
+            "browserTarget": "quartz-manager-ui:build:development"
           },
           "configurations": {
             "production": {
-              "browserTarget": "angular-spring-starter:build:production"
+              "browserTarget": "quartz-manager-ui:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-spring-starter:build"
+            "browserTarget": "quartz-manager-ui:build"
           }
         },
         "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@angular-eslint/builder:lint",
           "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": []
+            "eslintConfig": ".eslintrc.json",
+            "lintFilePatterns": ["**/*.spec.ts", "**/*.ts"]
           }
         }
       }
     },
-    "angular-spring-starter-e2e": {
+    "quartz-manager-ui-e2e": {
       "root": "e2e",
       "sourceRoot": "e2e",
       "projectType": "application",
@@ -90,7 +98,7 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "angular-spring-starter:serve"
+            "devServerTarget": "quartz-manager-ui:serve"
           }
         },
         "lint": {
@@ -105,14 +113,16 @@
       }
     }
   },
-  "defaultProject": "angular-spring-starter",
   "schematics": {
     "@schematics/angular:component": {
-      "prefix": "app",
+      "prefix": "qrzmng",
       "style": "css"
     },
     "@schematics/angular:directive": {
-      "prefix": "app"
+      "prefix": "qrzmng"
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

quartz-manager-frontend/jest.setup.ts

@@ -1 +1 @@
-import 'jest-preset-angular';
+import 'jest-preset-angular/setup-jest';

quartz-manager-frontend/package.json

@@ -5,66 +5,89 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json",
-    "build": "ng build --prod",
+    "build": "ng build --configuration production",
     "test": "jest",
     "lint": "ng lint",
+    "lint:sonar": "eslint --no-eslintrc -c .eslintrc.sonar.json \"src/**/*.ts\"",
+    "lint:sonar:fix": "eslint --no-eslintrc -c .eslintrc.sonar.json \"src/**/*.ts\" --fix",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "9.1.4",
-    "@angular/cdk": "9.2.1",
-    "@angular/common": "9.1.4",
-    "@angular/compiler": "9.1.4",
-    "@angular/core": "9.1.4",
-    "@angular/flex-layout": "9.0.0-beta.29",
-    "@angular/forms": "9.1.4",
-    "@angular/material": "9.2.1",
-    "@angular/platform-browser": "9.1.4",
-    "@angular/platform-browser-dynamic": "9.1.4",
-    "@angular/platform-server": "9.1.4",
-    "@angular/router": "9.1.4",
-    "@auth0/angular-jwt": "^4.0.0",
+    "@angular-material-components/datetime-picker": "8.0.0",
+    "@angular-material-components/moment-adapter": "8.0.0",
+    "@angular/animations": "14.2.12",
+    "@angular/cdk": "^14.0.1",
+    "@angular/common": "14.2.12",
+    "@angular/compiler": "14.2.12",
+    "@angular/core": "14.2.12",
+    "@angular/flex-layout": "14.0.0-beta.41",
+    "@angular/forms": "14.2.12",
+    "@angular/material": "^14.0.1",
+    "@angular/platform-browser": "14.2.12",
+    "@angular/platform-browser-dynamic": "14.2.12",
+    "@angular/platform-server": "14.2.12",
+    "@angular/router": "14.2.12",
+    "@auth0/angular-jwt": "5.1.0",
     "@fortawesome/fontawesome": "^1.1.4",
     "@fortawesome/fontawesome-free-regular": "^5.0.8",
     "@fortawesome/fontawesome-free-solid": "^5.0.8",
-    "@stomp/ng2-stompjs": "^0.6.3",
+    "@stomp/rx-stomp": "1.2.0",
     "core-js": "2.5.1",
     "hammerjs": "2.0.8",
+    "moment": "^2.29.1",
     "net": "^1.0.2",
     "rxjs": "6.5.5",
+    "sockjs-client": "^1.1.1",
     "stompjs": "^2.3.3",
-    "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "tslib": "~2.4.1",
+    "zone.js": "~0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.4",
-    "@angular-devkit/core": "^9.1.4",
-    "@angular/cli": "9.1.4",
-    "@angular/compiler-cli": "9.1.4",
-    "@angular/language-service": "9.1.4",
+    "@angular-devkit/build-angular": "14.2.10",
+    "@angular-devkit/core": "^14.2.10",
+    "@angular-eslint/builder": "14.4.0",
+    "@angular-eslint/eslint-plugin": "14.4.0",
+    "@angular-eslint/eslint-plugin-template": "14.4.0",
+    "@angular-eslint/schematics": "14.4.0",
+    "@angular-eslint/template-parser": "14.4.0",
+    "@angular/cli": "14.2.10",
+    "@angular/compiler-cli": "14.2.12",
+    "@angular/language-service": "14.2.12",
     "@types/hammerjs": "2.0.34",
     "@types/jasmine": "2.5.54",
     "@types/jasminewd2": "2.0.3",
+    "@types/jest": "28.1.1",
     "@types/node": "^12.11.1",
-    "codelyzer": "^5.1.2",
-    "jasmine-core": "2.6.4",
-    "jasmine-spec-reporter": "4.1.1",
-    "jest": "^26.0.1",
-    "jest-preset-angular": "^8.2.0",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "2.1.1",
-    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.0",
-    "karma-jasmine": "1.1.0",
-    "karma-jasmine-html-reporter": "0.2.2",
-    "protractor": "5.1.2",
-    "ts-node": "3.0.6",
-    "tslint": "5.7.0",
-    "typescript": "3.8.3"
+    "@typescript-eslint/eslint-plugin": "5.43.0",
+    "@typescript-eslint/eslint-plugin-tslint": "^5.46.0",
+    "@typescript-eslint/parser": "5.43.0",
+    "codelyzer": "~6.0.2",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-sonarjs": "^0.16.0",
+    "jasmine-core": "~4.5.0",
+    "jasmine-spec-reporter": "~7.0.0",
+    "jest": "28.1.3",
+    "jest-preset-angular": "~12.2.3",
+    "karma": "~6.4.1",
+    "karma-chrome-launcher": "~3.1.1",
+    "karma-cli": "2.0.0",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
+    "prettier": "^2.8.1",
+    "prettier-eslint": "^15.0.1",
+    "protractor": "~7.0.0",
+    "ts-node": "10.9.1",
+    "typescript": "4.6.4"
   },
   "jest": {
     "preset": "jest-preset-angular",
-    "setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"]
+    "setupFilesAfterEnv": [
+      "<rootDir>/jest.setup.ts"
+    ]
   }
 }

quartz-manager-frontend/src/_test.ts

@@ -13,8 +13,8 @@ import {
 } from '@angular/platform-browser-dynamic/testing';
 
 // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
-declare var __karma__: any;
-declare var require: any;
+declare let __karma__: any;
+declare let require: any;
 
 // Prevent Karma from running prematurely.
 __karma__.loaded = function () {};

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

@@ -1,14 +1,12 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { AppComponent } from './app.component';
-import { LoginComponent } from './views/login';
-import { LoginGuard } from './guards';
-import { GuestGuard, AdminGuard } from './guards';
-import { NotFoundComponent } from './views/not-found';
-import { ChangePasswordComponent } from './views/change-password';
-import { ForbiddenComponent } from './views/forbidden';
+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 {ManagerComponent} from './views/manager';
+import {GenericErrorComponent} from './views/error/genericError.component';
 
 export const routes: Routes = [
   {
@@ -28,11 +26,6 @@ export const routes: Routes = [
     component: LoginComponent,
     canActivate: [GuestGuard]
   },
-  // {
-  //   path: 'change-password',
-  //   component: ChangePasswordComponent,
-  //   canActivate: [LoginGuard]
-  // },
   {
     path: '404',
     component: NotFoundComponent
@@ -41,6 +34,10 @@ export const routes: Routes = [
     path: '403',
     component: ForbiddenComponent
   },
+  {
+    path: 'error',
+    component: GenericErrorComponent
+  },
   {
     path: '**',
     redirectTo: '/404'
@@ -48,7 +45,9 @@ export const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {
+    initialNavigation: 'disabled'
+  })],
   exports: [RouterModule],
   providers: []
 })

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

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

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

@@ -2,20 +2,9 @@
   display: block;
   color: rgba(0,0,0,.54);
   font-family: Roboto,"Helvetica Neue";
+  height: 100%;
 }
 
 .content {
-  margin: 50px 70px;
-}
-
-@media screen and (min-width: 600px) and (max-width: 1279px) {
-  .content {
-    margin: 20px 30px;
-  }
-}
-
-@media screen and (max-width: 599px) {
-  .content {
-    margin: 8px 12px;
-  }
+  padding: 20px;
 }

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

@@ -1,4 +1,4 @@
-import { TestBed, async } from '@angular/core/testing';
+import {TestBed, async, waitForAsync} from '@angular/core/testing';
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
@@ -18,7 +18,7 @@ import {
 } from './services';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent,

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

@@ -3,7 +3,7 @@ import { NgModule, APP_INITIALIZER} from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
-import {JWT_OPTIONS, JwtModule} from "@auth0/angular-jwt";
+import {JWT_OPTIONS, JwtModule} from '@auth0/angular-jwt';
 
 // material
 import {MatIconRegistry} from '@angular/material/icon';
@@ -17,6 +17,14 @@ import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCardModule} from '@angular/material/card';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatSelectModule} from '@angular/material/select';
+import {MatListModule} from '@angular/material/list';
+import {MatSidenavModule} from '@angular/material/sidenav';
+
+import {MatNativeDateModule} from '@angular/material/core';
+import { NgxMatTimepickerModule, NgxMatDatetimePickerModule} from '@angular-material-components/datetime-picker';
+import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
 
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -32,10 +40,11 @@ import {
   HeaderComponent,
   FooterComponent,
   GithubComponent,
-  SchedulerConfigComponent,
   SchedulerControlComponent,
   LogsPanelComponent,
-  ProgressPanelComponent
+  ProgressPanelComponent,
+  TriggerListComponent,
+  SimpleTriggerConfigComponent
 } from './components';
 
 import {
@@ -44,44 +53,20 @@ import {
   UserService,
   SchedulerService,
   ConfigService,
-  ProgressWebsocketService,
-  LogsWebsocketService,
-  getHtmlBaseUrl
+  getHtmlBaseUrl,
+  LogsRxWebsocketService,
+  ProgressRxWebsocketService,
+  TriggerService
 } from './services';
-import { ChangePasswordComponent } from './views/change-password/change-password.component';
 import { ForbiddenComponent } from './views/forbidden/forbidden.component';
 import { APP_BASE_HREF } from '@angular/common';
-import { environment } from '../environments/environment';
+import JobService from './services/job.service';
+import {GenericErrorComponent} from './views/error/genericError.component';
 
 export function initUserFactory(userService: UserService) {
-    return () => userService.jsessionInitUser();
+    return () => userService.fetchLoggedUser();
 }
 
-
-// const stompConfig: StompConfig = {
-//   // Which server?
-//   url: 'ws://localhost:8080/quartz-manager/progress',
-
-//   // Headers
-//   // Typical keys: login, passcode, host
-//   headers: {
-//     login: 'admin',
-//     passcode: 'admin'
-//   },
-
-//   // How often to heartbeat?
-//   // Interval in milliseconds, set to 0 to disable
-//   heartbeat_in: 0, // Typical value 0 - disabled
-//   heartbeat_out: 20000, // Typical value 20000 - every 20 seconds
-//   // Wait in milliseconds before attempting auto reconnect
-//   // Set to 0 to disable
-//   // Typical value 5000 (5 seconds)
-//   reconnect_delay: 5000,
-
-//   // Will log diagnostics on console
-//   debug: true
-// };
-
 export function jwtOptionsFactory(apiService: ApiService) {
   return {
     tokenGetter: () => {
@@ -101,12 +86,13 @@ export function jwtOptionsFactory(apiService: ApiService) {
     LoginComponent,
     NotFoundComponent,
     AccountMenuComponent,
-    SchedulerConfigComponent,
+    SimpleTriggerConfigComponent,
     SchedulerControlComponent,
     LogsPanelComponent,
     ProgressPanelComponent,
-    ChangePasswordComponent,
-    ForbiddenComponent
+    ForbiddenComponent,
+    GenericErrorComponent,
+    TriggerListComponent
   ],
   imports: [
     BrowserAnimationsModule,
@@ -128,10 +114,16 @@ export function jwtOptionsFactory(apiService: ApiService) {
     MatChipsModule,
     MatIconModule,
     MatInputModule,
+    MatSelectModule,
     MatToolbarModule,
     MatCardModule,
+    MatListModule,
     MatProgressSpinnerModule,
     MatProgressBarModule,
+    MatDatepickerModule, MatNativeDateModule,
+    NgxMatMomentModule,
+    NgxMatDatetimePickerModule,
+    MatSidenavModule,
     FlexLayoutModule
   ],
   providers: [
@@ -149,19 +141,15 @@ export function jwtOptionsFactory(apiService: ApiService) {
     GuestGuard,
     AdminGuard,
     SchedulerService,
-    ProgressWebsocketService,
-    LogsWebsocketService,
+    JobService,
+    TriggerService,
+    ProgressRxWebsocketService,
+    LogsRxWebsocketService,
     AuthService,
     ApiService,
     UserService,
     ConfigService,
     MatIconRegistry
-    // StompService,
-    // ServerSocket
-    // {
-    //   provide: StompConfig,
-    //   useValue: stompConfig
-    // }
   ],
   bootstrap: [AppComponent]
 })

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

@@ -1,7 +1,8 @@
-<p style="margin: 0px auto; padding: 0px; color: rgba(255, 255, 255, 0.541176); max-width: 356px;">
-  Hand crafted with love by 
-  <a href="https://github.com/fabioformosa" style="color: rgba(255, 255, 255, 0.870588);">Fabio Formosa</a>
-</p>
-<a style="margin-top: 22px;" mat-icon-button href="https://github.com/fabioformosa/quartz-manager">
+<mat-toolbar id="footer" style="color: rgba(255, 255, 255, 0.541176);" fxLayout="row" fxLayoutAlign="center center">
+    <a mat-icon-button href="https://github.com/fabioformosa/quartz-manager">
       <img src="assets/image/github.png"/>
-</a>
+      &nbsp; Quartz Manager
+    </a>
+<!--    Hand crafted with love by &nbsp;-->
+<!--    <a href="https://github.com/fabioformosa" style="color: rgba(255, 255, 255, 0.870588);">Fabio Formosa</a>-->
+</mat-toolbar>

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

@@ -1,18 +1,20 @@
-:host {
-  display: block;
-  font-weight: 300;
-  font-size: 15px;
-  display: block;
+:host{
+  //position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 64px;
+}
+
+#footer{
   background-color: rgb(33, 33, 33);
-  height: 236px;
-  padding: 72px 24px;
+  font-size: 15px;
   box-sizing: border-box;
   text-align: center;
   a {
     text-decoration: none;
-    cursor: auto;
+    cursor: pointer;
     color: #FFFFFF;
-    margin-top: 32px;
   }
 
   h3 {
@@ -21,7 +23,5 @@
     font-weight: 300;
     font-size: 22px;
   }
-
 }
 
-

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

@@ -1,2 +1 @@
-<button mat-menu-item [routerLink]="['/change-password']">CHANGE PASSWORD</button>
-<button mat-menu-item (click)="logout()">SIGN OUT</button>
+<button mat-menu-item (click)="logout()">Logout</button>

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

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

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

@@ -1,12 +1,12 @@
 <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">
+<!--    <img alt="Quartz Manager" class="app-angular-logo" src="assets/image/angular-white-transparent.svg">-->
     <span>Quartz Manager</span>
   </button>
 
   <div class="right">
     <div fxFlex="1 1 auto" fxLayout="row" fxLayoutAlign="flex-end center">
-      <button *ngIf="!hasSignedIn()" routerLink="/login" mat-button mat-ripple>
+      <button *ngIf="!hasSignedIn() && !noAuthenticationRequired()" routerLink="/login" mat-button mat-ripple>
         <span>Login</span>
       </button>
       <button

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

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {
   UserService,
   AuthService,
-  NO_AUTH
+  // NO_AUTH
 } from '../../services';
 import { Router } from '@angular/router';
 
@@ -32,7 +32,7 @@ export class HeaderComponent implements OnInit {
     return !!this.userService.currentUser;
   }
 
-  noAuthenticationRequired = () => this.hasSignedIn() && this.userService.currentUser === NO_AUTH; 
+  noAuthenticationRequired = () => !this.hasSignedIn() && this.userService.isAnAnonymousUser === true;
 
 
   userName() {

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

@@ -2,6 +2,7 @@ export * from './header';
 export * from './github';
 export * from './footer';
 export * from './logs-panel';
-export * from './scheduler-config';
 export * from './scheduler-control';
 export * from './progress-panel';
+export * from './trigger-list';
+export * from './simple-trigger-config';

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

@@ -1,27 +1,37 @@
-<mat-card>
-    <mat-card-header>
-        <mat-card-title><b>JOB LOGS</b></mat-card-title>
+<mat-card fxFlex="1 1 auto">
+    <mat-card-header fxLayout="row" fxLayoutAlign="space-between none" style="padding-right: 1em;">
+      <mat-card-subtitle><b>JOB LOGS</b></mat-card-subtitle>
     </mat-card-header>
-    <mat-card-content>
-            <div id="logs">
-                <div *ngFor = "let log of logs" fxLayout="row" fxLayout.xs="column">
-                    <div fxFlex="1 1 20%">
-                        <span [ngClass]="{'animated zoomIn firstLog': $first}"> [{{log.time|date:'medium'}}]</span>
+    <mat-card-content style="position: relative; height: calc(100% - 3em);">
+      <div *ngIf="!selectedTriggerName && (!logs || logs.length == 0)" fxLayout="row" fxFlexAlign="center stretch" style="text-align: center">
+        <div fxFill style="height: 100%;">
+          <img src="assets/image/logs.svg" alt="no logs" width="320" style="margin-top: 6em;" />
         </div>
-                    <div fxFlex="1 1 10%">
-                        <span [ngClass]="{'animated zoomIn firstLog': $first}">
+      </div>
+      <div *ngIf="isWaitingForLogs()" class="waitingLogs" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="12px">
+        <mat-spinner diameter="36"></mat-spinner>
+        <div>Waiting for logs from {{selectedTriggerName}}...</div>
+      </div>
+      <div id="logs" style="overflow-y: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto;">
+        <div
+            *ngFor = "let log of logs; let first = first" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start" fxLayoutGap="10px">
+            <div fxFlex="0 1 300px">
+                <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> [{{log.time|date:'medium'}}]</span>
+            </div>
+            <div fxFlex="1 1 16px">
+                <span [ngClass]="{'animated zoomIn firstLog': first}">
                 <i class = "fas" [ngClass]="{'fa-check-circle green': log.type == 'INFO',
                                              'fa-exclamation-triangle yellow': log.type == 'WARN',
                                              'fa-times-circle red': log.type == 'ERROR'}"></i>
                 </span>
             </div>
-                    <div fxFlex="1 1 20%">
-                        <span [ngClass]="{'animated zoomIn firstLog': $first}">
+            <div fxFlex="0 1 250px">
+                <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}">
                 {{log.threadName}}
                 </span>
             </div>
-                    <div fxFlex="1 1 50%">
-                        <span [ngClass]="{'animated zoomIn firstLog': $first}"> {{log.msg}}</span>
+            <div fxFlex="1 1">
+                <span [ngClass]="{'animate__animated animate__zoomIn zoomIn firstLog': first}"> {{log.msg}}</span>
             </div>
         </div>
       </div>

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

@@ -8,3 +8,36 @@
 .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,113 @@
+import {Subject} from 'rxjs';
+import {LogsPanelComponent} from './logs-panel.component';
+import {TriggerKey} from '../../model/triggerKey.model';
+import {jest} from '@jest/globals';
+
+describe('LogsPanelComponent', () => {
+
+  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);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+
+    expect(logsRxWebsocketService.watch).toHaveBeenCalledWith('/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(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);
+
+    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).toHaveBeenCalledWith('/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);
+
+    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);
+
+    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);
+
+    expect(() => component.ngOnDestroy()).not.toThrow();
+  });
+
+});

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

@@ -1,48 +1,95 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import {Component, Input, 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';
 
-import { LogsWebsocketService, ApiService } from '../../services';
-import { Observable } from 'rxjs';
 
 @Component({
   selector: 'logs-panel',
   templateUrl: './logs-panel.component.html',
   styleUrls: ['./logs-panel.component.scss']
 })
-export class LogsPanelComponent implements OnInit {
+export class LogsPanelComponent implements OnInit, OnDestroy {
 
-  MAX_LOGS : number = 20;
+  MAX_LOGS = 30;
 
-  logs : Array<any> = new Array();
+  logs = new Array();
+
+  selectedTriggerName: string;
+
+  topicSubscription;
+
+  private selectedTriggerKey: TriggerKey;
 
   constructor(
-    private logsWebsocketService: LogsWebsocketService,
-    private apiService : ApiService
-  ) { }
-
-  ngOnInit() {
-    let obs = this.logsWebsocketService.getObservable()
-    obs.subscribe({
-      'next' : this.onNewLogMsg,
-      'error' : (err) => {console.log(err)}
-    });
+    private logsRxWebsocketService: LogsRxWebsocketService,
+    private apiService: ApiService
+  ) {
   }
 
-  onNewLogMsg = (receivedMsg) => {
-    if(receivedMsg.type == 'SUCCESS')
-      this._showNewLog(receivedMsg.message);
-    else if(receivedMsg.type == 'ERROR')
-      this._refreshSession(); //if websocket has been closed for session expiration, try to refresh it
+  @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(this._showNewLog, (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)
+    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
+      time: logRecord.date,
+      type: logRecord.type,
+      msg: logRecord.message,
+      threadName: logRecord.threadName
     });
   }
 

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

@@ -6,31 +6,38 @@
     </div>
 </div> -->
 
-<mat-card>
+<mat-card style="padding-bottom: 0" [ngClass]="{'progress-updated': progressUpdated}">
     <mat-card-header>
-        <mat-card-title><b>JOB PROGRESS</b></mat-card-title>
+        <mat-card-subtitle><b>JOB PROGRESS</b></mat-card-subtitle>
     </mat-card-header>
     <mat-card-content>
-                <div>
+      <div id="progressBarBox" *ngIf="progress.percentage !== -1">
           <mat-progress-bar mode="determinate" value="{{progress.percentage}}"></mat-progress-bar>
           {{percentageStr}}
       </div>
 
-                <br>
+      <div id="counterBox" fxLayout="row" fxLayoutAlign="center" *ngIf="progress.timesTriggered">
+        <span id="timesTriggeredCounter" class="animated pulse">{{progress.timesTriggered}}</span>
+        <span id="totCounter" *ngIf="progress.repeatCount > 0">&nbsp;/&nbsp;{{progress.repeatCount}} </span>
+      </div>
+      <mat-divider *ngIf="progress.timesTriggered"></mat-divider>
 
-                <div>
-                    <mat-chip>counter</mat-chip>&nbsp; 
-                    <span class="animated pulse">{{progress.timesTriggered}}</span> <span ng-show="progress.repeatCount > 0">/ {{progress.repeatCount}} </span>
-                    
-                    <br/><br/>
-                    
-                    <mat-chip>job key</mat-chip> <span class="animated pulse">{{progress.jobKey}}</span><br>
-                    <mat-chip>job class</mat-chip> <span class="animated pulse">{{progress.jobClass}}</span><br/>
-                    
-                    <br/>
-                    <mat-chip>prev fire time</mat-chip> <span class="animated pulse">{{progress.previousFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span><br/>
-                    <mat-chip>next fire time</mat-chip> <span class="animated pulse">{{progress.nextFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span><br/>
-                    <mat-chip>final fire time</mat-chip> <span class="animated pulse">{{progress.finalFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span><br/>
+      <div fxLayout="row" fxLayoutAlign="space-around center">
+          <div class="fireBox">
+            <div class="fireBoxHeader">prev fire time</div>
+            <div class="fireBoxContent"><span class="animated pulse">{{progress.previousFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
+            <div class="fireBoxContent" [hidden]="progress.previousFireTime"><span>-</span></div>
+          </div>
+          <div class="fireBox">
+            <div class="fireBoxHeader">next fire time</div>
+            <div class="fireBoxContent"><span class="animated pulse">{{progress.nextFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
+            <div class="fireBoxContent" [hidden]="progress.nextFireTime"><span>-</span></div>
+          </div>
+          <div class="fireBox">
+            <div class="fireBoxHeader">final fire time</div>
+            <div class="fireBoxContent"><span class="animated pulse">{{progress.finalFireTime|date:'dd-MM-yyyy HH:mm:ss'}}</span></div>
+            <div class="fireBoxContent" [hidden]="progress.finalFireTime"><span>-</span></div>
+          </div>
        </div>
     </mat-card-content>
 </mat-card>

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,102 @@
+import {Subject} from 'rxjs';
+import {ProgressPanelComponent} from './progress-panel.component';
+import {TriggerKey} from '../../model/triggerKey.model';
+import {jest} from '@jest/globals';
+
+describe('ProgressPanelComponent', () => {
+
+  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);
+
+    component.triggerKey = new TriggerKey('trigger-1', null);
+
+    expect(progressRxWebsocketService.watch).toHaveBeenCalledWith('/topic/progress/trigger-1');
+
+    messages.next({body: JSON.stringify({percentage: 75, timesTriggered: 3})});
+    jest.runOnlyPendingTimers();
+
+    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);
+
+    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).toHaveBeenCalledWith('/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);
+
+    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);
+
+    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);
+
+    expect(() => component.ngOnDestroy()).not.toThrow();
+  });
+
+});

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

@@ -1,85 +1,91 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
-import {  ProgressWebsocketService } from '../../services';
-
-import { Observable } from 'rxjs';
-// import {Message} from '@stomp/stompjs';
-
-// import { Subscription } from 'rxjs/Subscription';
-// import {StompService} from '@stomp/ng2-stompjs';
-
-// import { QueueingSubject } from 'queueing-subject'
-// import websocketConnect from 'rxjs-websockets'
-// import 'rxjs/add/operator/share'
-// import {ServerSocket} from '../../services/qz.socket.service'
+import {Component, Input, 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']
 })
-export class ProgressPanelComponent implements OnInit {
+export class ProgressPanelComponent implements OnInit, OnDestroy {
 
-  progress : any = {}
-  percentageStr : string
+  progress: TriggerFiredBundle = ProgressPanelComponent._buildEmptyProgress();
+  percentageStr: string;
+  progressUpdated = false;
 
-  // // Stream of messages
-  // private subscription: Subscription;
-  // public messages: Observable<Message>;
-  // // Subscription status
-  // public subscribed: boolean;
-  // // Array of historic message (bodies)
-  // public mq: Array<string> = [];
-
-
-  // private socketSubscription  
+  topicSubscription;
+  private selectedTriggerKey: TriggerKey;
 
   constructor(
-    private progressWebsocketService: ProgressWebsocketService,
-    // private _stompService: StompService,
-    // private serverSocket : ServerSocket
+    private progressRxWebsocketService: ProgressRxWebsocketService
   ) { }
 
-  onNewProgressMsg = (receivedMsg) => {
-    if (receivedMsg.type == 'SUCCESS') {
-      var newStatus = receivedMsg.message;
-      this.progress = newStatus;
-      this.percentageStr = this.progress.percentage + '%';
+  @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(this.onNewProgressMsg, (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() {
-    let obs = this.progressWebsocketService.getObservable()
-    obs.subscribe({
-      'next' : this.onNewProgressMsg,
-      'error' : (err) => {console.log(err)}
-    });
-
-    // this.subscribed = false;
-    // this.subscribe();
-
-    // this.serverSocket.connect()
-    // this.socketSubscription = this.serverSocket.messages.subscribe((message: string) => {
-    //   console.log('received message from server: ', message)
-    // })
   }
 
-  // public subscribe() {
-  //   if (this.subscribed) {
-  //     return;
-  //   }
+  ngOnDestroy() {
+    this._unsubscribeFromTopic();
+  }
 
-  //   // Stream of messages
-  //   this.messages = this._stompService.subscribe('/topic/progress');
+  private _unsubscribeFromTopic() {
+    if (this.topicSubscription) {
+      this.topicSubscription.unsubscribe();
+      this.topicSubscription = null;
+    }
+  }
 
-  //   // Subscribe a function to be run on_next message
-  //   this.subscription = this.messages.subscribe(this.on_next);
+  private _resetProgress() {
+    this.progress = ProgressPanelComponent._buildEmptyProgress();
+    this.percentageStr = null;
+    this.progressUpdated = false;
+  }
 
-  //   this.subscribed = true;
-  // }
+  private _markProgressUpdated() {
+    this.progressUpdated = false;
+    setTimeout(() => this.progressUpdated = true);
+  }
 
-  // public on_next = (message: Message) => {
-  //   this.mq.push(message.body + '\n');
-  //   console.log(message);
-  // }
+  private static _buildEmptyProgress() {
+    const progress = new TriggerFiredBundle();
+    progress.percentage = -1;
+    return progress;
+  }
 
 }

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

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

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

@@ -1,38 +0,0 @@
-<mat-card>
-	<mat-card-header>
-		<mat-card-title><b>SCHEDULER CONFIG</b></mat-card-title>
-	</mat-card-header>
-	<mat-card-content>
-		<div fxLayout="column">
-			<form name="configForm" fxFlex="1 1 100%" #configForm="ngForm">
-				<mat-form-field>
-					<input matInput placeholder="Freq [Num per day]" [(ngModel)]="config.triggerPerDay" name="triggerPerDay" type="number">
-				</mat-form-field>
-				<mat-form-field>
-					<input matInput placeholder="Max Occurrences" [(ngModel)]="config.maxCount" name="maxCount" type="number">
-				</mat-form-field>
-			
-				<br>
-
-				<div>
-					<h5>Misfire Policy</h5>
-					<div>RESCHEDULE NEXT WITH EXISTING COUNT</div>
-					<div class="small">
-						In case of misfire event, the trigger is re-scheduled to the next scheduled time after 'now' with the repeat count left unchanged (missed events are definitively lost). 
-						<br/>
-						<strong>Warning:</strong> This policy could cause the trigger to go directly to the complete state if the end-time of the trigger has arrived,
-						so this misfire instruction doesn't guarantee that the repeat counter reaches your max value, but it guarantees that the end-time doesn't go over the expected final fire time.	
-					</div>
-				</div>
-				
-				<br>
-
-				<button mat-raised-button
-					 	type="button" 
-						(click)="submitConfig()">
-						Submit
-				</button>
-			</form>
-		</div>
-	</mat-card-content>
-</mat-card>

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

@@ -1,3 +0,0 @@
-.small{
-    font-size: 0.8em;
-}

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

@@ -1,40 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { SchedulerService } from '../../services';
-import { SchedulerConfig } from '../../model/schedulerConfig.model'
-
-@Component({
-  selector: 'scheduler-config',
-  templateUrl: './scheduler-config.component.html',
-  styleUrls: ['./scheduler-config.component.scss']
-})
-export class SchedulerConfigComponent implements OnInit {
-
-  constructor(
-    private schedulerService: SchedulerService
-  ) { }
-
-  config : SchedulerConfig = new SchedulerConfig()
-  configBackup : SchedulerConfig = new SchedulerConfig()
-
-  ngOnInit() {
-    this.retrieveConfig()
-  }
-
-  retrieveConfig = () => {
-    this.schedulerService.getConfig()
-      .subscribe(res => {
-        this.config = new SchedulerConfig(res.triggerPerDay, res.maxCount)
-        this.configBackup = res
-      })
-  }
-
-  submitConfig = () => {
-    this.schedulerService.updateConfig(this.config)
-      .subscribe(res => {
-        this.configBackup = this.config;
-      }, error => {
-        this.config = this.configBackup;
-      });
-  };
-
-}

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

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

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

@@ -4,3 +4,14 @@
 .green{
   color: green;
 }
+
+label{
+  color: grey;
+  font-variant: small-caps;
+  font-size: smaller;
+}
+
+#scheduler-name{
+  text-transform: capitalize;
+  font-size: larger;
+}

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/run');
+    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/pause');
+    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

@@ -1,50 +1,76 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { UserService, SchedulerService } from '../../services';
+import {Component, OnInit} from '@angular/core';
+import {SchedulerService, UserService} from '../../services';
+import {Scheduler} from '../../model/scheduler.model';
 
 @Component({
-  selector: 'scheduler-control',
+  selector: 'qrzmng-scheduler-control',
   templateUrl: './scheduler-control.component.html',
   styleUrls: ['./scheduler-control.component.scss']
 })
 export class SchedulerControlComponent implements OnInit {
 
-  schedulerState;
+  scheduler: Scheduler;
 
   constructor(
     private userService: UserService,
     private schedulerService: SchedulerService
-  ) { }
+  ) {
+  }
 
   ngOnInit() {
-    this.schedulerService.getStatus().subscribe(res => {this.schedulerState = res.data}, err => {console.log(err)});
+    this._getScheduler();
   }
 
-  startScheduler = function(){
-    this.schedulerService.startScheduler().subscribe((res) => {this.schedulerState = 'running'}, (res) => {console.log(JSON.stringify(res))});
+  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.stopScheduler().subscribe((res) => {this.schedulerState = 'stopped'}, (res) => {console.log(JSON.stringify(res))});
+  stopScheduler = function () {
+    this.schedulerService.stopScheduler().subscribe((res) => {
+      this.scheduler.status = 'STOPPED'
+    }, (res) => {
+      console.log(JSON.stringify(res))
+    });
   };
 
-  pauseScheduler = function(){
-    this.schedulerService.pauseScheduler().subscribe((res) => {this.schedulerState = 'paused'}, (res) => {console.log(JSON.stringify(res))});
+  pauseScheduler = function () {
+    this.schedulerService.pauseScheduler().subscribe((res) => {
+      this.scheduler.status = 'PAUSED'
+    }, (res) => {
+      console.log(JSON.stringify(res))
+    });
   };
 
-  resumeScheduler = function(){
-    this.schedulerService.resumeScheduler().subscribe((res) => {this.schedulerState = 'running'}, (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.schedulerState != 'stopped')
+  stop = function () {
+    if (this.scheduler.status !== 'STOPPED') {
       this.stopScheduler();
     }
+  }
 
-  startOrPause = function(){
-    switch (this.schedulerState) {
-    case 'running':	this.pauseScheduler();
+  startOrPause = function () {
+    switch (this.scheduler.status) {
+      case 'RUNNING':
+        this.pauseScheduler();
         break;
-    case 'paused':	this.resumeScheduler();
+      case 'PAUSED':
+        this.resumeScheduler();
         break;
       default:
         this.startScheduler();

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,189 @@
+<mat-card fxFlex="1 1 auto">
+  <mat-card-header>
+    <mat-card-subtitle><b>TRIGGER DETAILS</b></mat-card-subtitle>
+  </mat-card-header>
+  <mat-divider></mat-divider>
+  <mat-card-content *ngIf="shouldShowTheTriggerCardContent()" style="position: relative; height: 100%">
+    <div fxLayout="column" style="overflow-y: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0;
+    overflow: auto;height: calc(100% - 3em); padding-top: 1em;">
+      <mat-card id="noEligibleJobsAlert" *ngIf="jobs?.length === 0" style="background-color: #ff6385">
+        <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" fxFlex="1 1 100%"
+            [formGroup]="simpleTriggerReactiveForm" (ngSubmit)="onSubmitTriggerConfig()">
+        <div>
+          <mat-form-field
+            [appearance]="enabledTriggerForm && !trigger ? 'standard': 'none'"
+            class="full-size-input">
+            <mat-label>Trigger Name</mat-label>
+            <input id="triggerName"
+                   [readonly]="!enabledTriggerForm || trigger"
+                   matInput placeholder="name of the trigger (unique)"
+                   formControlName="triggerName" name="triggerName">
+            <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerName.errors?.required">
+              Name is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+        </div>
+
+        <div>
+          <mat-form-field
+            [appearance]="enabledTriggerForm ? 'standard': 'none'"
+            class="full-size-input"
+          >
+            <mat-label>Job Class</mat-label>
+            <mat-select id="jobClass" name="jobClass" formControlName="jobClass" [disabled]="!enabledTriggerForm">
+              <mat-option *ngFor="let job of jobs" [value]="job" style="font-size: 0.8em">
+                {{job}}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="simpleTriggerReactiveForm.controls.jobClass.errors?.required">
+              Job is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
+        </div>
+
+        <div>
+          <mat-form-field
+            [appearance]="enabledTriggerForm ? 'standard': 'none'"
+            class="full-size-input"
+          >
+            <mat-label>Misfire Instruction</mat-label>
+            <mat-select id="misfireInstruction" name="misfireInstruction" formControlName="misfireInstruction"
+                        [disabled]="!enabledTriggerForm" style="font-size: 0.8em">
+              <mat-option value="MISFIRE_INSTRUCTION_FIRE_NOW">FIRE NOW</mat-option>
+              <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_EXISTING_REPEAT_COUNT">RESCHEDULE NOW WITH
+                EXISTING REPEAT COUNT
+              </mat-option>
+              <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NOW_WITH_REMAINING_REPEAT_COUNT">RESCHEDULE NOW WITH
+                REMAINING REPEAT COUNT
+              </mat-option>
+              <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_REMAINING_COUNT">RESCHEDULE NEXT WITH
+                REMAINING COUNT
+              </mat-option>
+              <mat-option value="MISFIRE_INSTRUCTION_RESCHEDULE_NEXT_WITH_EXISTING_COUNT">RESCHEDULE NEXT WITH EXISTING
+                COUNT
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="simpleTriggerReactiveForm.controls.misfireInstruction.errors?.required">
+              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
+              [appearance]="enabledTriggerForm ? 'standard': 'none'"
+              class="full-size-input"
+            >
+              <mat-label>Start Date (optional)</mat-label>
+              <input id="startDate"
+                     [readonly]="!enabledTriggerForm"
+                     matInput
+                     [ngxMatDatetimePicker]="startDatePicker" placeholder="Choose a start date"
+                     formControlName="startDate" name="startDate">
+              <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
+              <ngx-mat-datetime-picker #startDatePicker showSpinners="true" showSeconds="true">
+              </ngx-mat-datetime-picker>
+            </mat-form-field>
+          </div>
+
+          <div>
+            <mat-form-field
+              [appearance]="enabledTriggerForm ? 'standard': 'none'"
+              class="full-size-input"
+            >
+              <mat-label>End Date (optional)</mat-label>
+              <input id="endDate"
+                     [readonly]="!enabledTriggerForm"
+                     matInput
+                     [ngxMatDatetimePicker]="endDatePicker" placeholder="Choose a end date"
+                     formControlName="endDate" name="endDate"
+              >
+              <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
+              <ngx-mat-datetime-picker #endDatePicker showSpinners="true" showSeconds="true">
+              </ngx-mat-datetime-picker>
+            </mat-form-field>
+            <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerPeriod.errors?.invalidTriggerPeriod" style="font-size: small">
+              the end date cannot be  <strong>before</strong> the start date
+            </mat-error>
+          </div>
+        </div>
+
+        <div formGroupName="triggerRecurrence">
+          <div>
+            <mat-form-field
+              [appearance]="enabledTriggerForm ? 'standard': 'none'"
+              class="full-size-input"
+            >
+              <mat-label>Repeat Interval [in mills]</mat-label>
+              <input id="repeatInterval"
+                     [readonly]="!enabledTriggerForm"
+                     matInput placeholder="Repeat Interval [in mills]" type="number"
+                     formControlName="repeatInterval" name="repeatInterval"
+              >
+              <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerRecurrence.errors?.invalidTriggerRecurrence">
+                repeatCount and repeatInterval must be <strong>both</strong> set or unset
+              </mat-error>
+            </mat-form-field>
+          </div>
+          <div>
+            <mat-form-field
+              [appearance]="enabledTriggerForm ? 'standard': 'none'"
+              class="full-size-input"
+            >
+              <mat-label>Repeat Count</mat-label>
+              <input id="repeatCount"
+                     [readonly]="!enabledTriggerForm"
+                     matInput placeholder="Repeat Count (-1 REPEAT INDEFINITELY)" type="number"
+                     formControlName="repeatCount" name="repeatCount"
+              >
+              <mat-error *ngIf="simpleTriggerReactiveForm.controls.triggerRecurrence.errors?.invalidTriggerRecurrence">
+                repeatCount and repeatInterval must be <strong>both</strong> set or unset
+              </mat-error>
+            </mat-form-field>
+
+          </div>
+        </div>
+
+        <br/>
+
+        <div fxLayout="row" fxFlexAlign="space-evenly center" style="padding-bottom: 1em;">
+          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="enabledTriggerForm">
+            <button mat-raised-button
+                    type="button"
+                    *ngIf="enabledTriggerForm"
+                    (click)="onResetReactiveForm()">
+              Cancel
+            </button>
+          </div>
+          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="enabledTriggerForm">
+            <button mat-raised-button
+                    type="submit" color="primary"
+                    [disabled]="simpleTriggerReactiveForm.invalid"
+                    *ngIf="enabledTriggerForm">
+              Submit
+            </button>
+          </div>
+          <div fxFlex="1 1 auto" style="text-align: center" *ngIf="!enabledTriggerForm">
+            <button mat-raised-button type="button"
+            *ngIf="!enabledTriggerForm"
+            (click)="enabledTriggerForm = true">
+            Reschedule
+            </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,29 @@
+.small{
+    font-size: 0.8em;
+}
+
+.full-size-input{
+  width: 100%;
+}
+/* ===== 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,288 @@
+import {ComponentFixture, 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/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-select-panel')).queryAll(By.css('.mat-option'));
+    matOptionDe[index].nativeElement.click();
+    fixture.detectChanges();
+  }
+
+  function openFormAndFillAllMandatoryFields() {
+    component.openTriggerForm();
+    fixture.detectChanges();
+
+    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/jobs`);
+    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', () => {
+    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);
+
+    submitButton.nativeElement.click();
+
+    const postSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/${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/${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/${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;
+
+    fixture.detectChanges();
+
+    const mockTrigger = new Trigger();
+    mockTrigger.triggerKeyDTO = mockTriggerKey;
+    mockTrigger.jobDetailDTO = <JobDetail>{jobClassName: 'TestJob', description: null};
+    const getSimpleTriggerReq = httpTestingController.expectOne(`${CONTEXT_PATH}/simple-triggers/my-simple-trigger`);
+    getSimpleTriggerReq.flush(mockTrigger);
+
+    const componentDe: DebugElement = fixture.debugElement;
+    const submitButton = componentDe.query(By.css('form button'));
+    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/${testTriggerName}`);
+    getSimpleTriggerReq.flush(mockTrigger);
+
+    expect(component.simpleTriggerReactiveForm.value.triggerName).toEqual(testTriggerName);
+
+    component.triggerKey = null;
+
+    expect(component.simpleTriggerReactiveForm.value.triggerName).toBeNull();
+    expect(component.simpleTriggerReactiveForm.value.jobClass).toBeNull();
+    expect(component.shouldShowTheTriggerCardContent()).toBeTruthy();
+
+  });
+
+  it('should display the warning if there are no eligible jobs', () => {
+    fixture.detectChanges();
+    const getJobsReq = httpTestingController.expectOne(`${CONTEXT_PATH}/jobs`);
+    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}/jobs`);
+    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,225 @@
+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 * as moment from 'moment';
+import {TriggerKey} from '../../model/triggerKey.model';
+import JobService from '../../services/job.service';
+import {MisfireInstruction, MisfireInstructionCaption} from '../../model/misfire-instruction.model';
+import {AbstractControl, 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']
+})
+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 && moment(this.trigger?.startTime)],
+      endDate: [this.trigger?.endTime && moment(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>;
+
+  enabledTriggerForm = false;
+
+  @Output()
+  onNewTrigger = new EventEmitter<SimpleTrigger>();
+
+  @Output()
+  triggerFormOpenChange = new EventEmitter<boolean>();
+
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private schedulerService: SchedulerService,
+    private jobService: JobService
+  ) {
+  }
+
+  ngOnInit() {
+    this.fetchJobs();
+  }
+
+  private fetchJobs() {
+    this.jobService.fetchJobs().subscribe(jobs => this.jobs = jobs);
+  }
+
+  openTriggerForm() {
+    this.enabledTriggerForm = true;
+    this.triggerFormOpenChange.emit(this.enabledTriggerForm);
+  }
+
+  private closeTriggerForm() {
+    this.enabledTriggerForm = false;
+    this.triggerFormOpenChange.emit(this.enabledTriggerForm);
+  }
+
+  @Input()
+  set triggerKey(triggerKey: TriggerKey) {
+    if (!triggerKey) {
+      this.openNewTriggerForm();
+    } else if (!this.selectedTriggerKey || this.selectedTriggerKey.name !== triggerKey.name) {
+      this._resetTheTrigger();
+      this.selectedTriggerKey = {...triggerKey} as TriggerKey;
+      this.fetchSelectedTrigger();
+      this.closeTriggerForm();
+    }
+  }
+
+  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;
+      })
+  }
+
+  shouldShowTheTriggerCardContent = (): boolean => this.trigger !== null || this.enabledTriggerForm;
+
+  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();
+    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.isBefore(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 && moment(simpleTrigger.startTime)) || null;
+    simpleTriggerReactiveForm.triggerPeriod.endDate = (simpleTrigger.endTime && moment(simpleTrigger.endTime)) || null;
+    simpleTriggerReactiveForm.misfireInstruction = (simpleTrigger.misfireInstruction
+      && MisfireInstruction[simpleTrigger.misfireInstruction]) || null;
+    return simpleTriggerReactiveForm;
+  };
+
+  private _fromReactiveFormToCommand = (): SimpleTriggerCommand => {
+    const reactiveFormValue = this.simpleTriggerReactiveForm.value;
+    const simpleTriggerCommand = new SimpleTriggerCommand();
+    simpleTriggerCommand.triggerName = reactiveFormValue.triggerName;
+    simpleTriggerCommand.jobClass = reactiveFormValue.jobClass;
+    simpleTriggerCommand.repeatCount = reactiveFormValue.triggerRecurrence.repeatCount;
+    simpleTriggerCommand.repeatInterval = reactiveFormValue.triggerRecurrence.repeatInterval;
+    simpleTriggerCommand.startDate = reactiveFormValue.triggerPeriod.startDate?.toDate();
+    simpleTriggerCommand.endDate = reactiveFormValue.triggerPeriod.endDate?.toDate();
+    simpleTriggerCommand.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,19 @@
+<mat-card fxFlex="1 1 auto" style="padding-left: 0; padding-right: 0">
+  <mat-card-header fxLayout="row" fxLayoutAlign="space-between none" style="padding-right: 1em;" >
+    <mat-card-subtitle><b>TRIGGERS</b></mat-card-subtitle>
+    <button *ngIf="!triggerFormIsOpen" mat-raised-button style="top: -0.5em" color="primary" (click)="onNewTriggerBtnClicked()">
+      new
+    </button>
+  </mat-card-header>
+  <mat-divider></mat-divider>
+  <mat-card-content style="position: relative; height: 100%">
+    <mat-nav-list  style="overflow-y: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: auto; height: calc(100% - 3em)">
+      <mat-list-item *ngFor="let triggerKey of getTriggerKeyList()" class="triggerItemList"
+                     [ngClass]="{'selectedTrigger': selectedTrigger && selectedTrigger.name==triggerKey.name}"
+                     (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,25 @@
+/* ===== 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,98 @@
+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: `
+    <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>`,
+})
+// 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']
+})
+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.spec.ts

@@ -1,105 +0,0 @@
-import { TestBed, async, inject } from '@angular/core/testing';
-import { Router } from '@angular/router';
-import { NO_AUTH, UserService } from '../services';
-import { AdminGuard } from './admin.guard';
-import {jest} from '@jest/globals'
-
-export class RouterStub {
-  navigate(commands?: any[], extras?: any) {}
-}
-
-const RouterSpy = jest.spyOn(RouterStub.prototype, 'navigate');
-
-const MockUserServiceNoAuth = jest.fn(() => ({currentUser: NO_AUTH}));
-const MockUserService = jest.fn(() => ({
-  currentUser: {
-    authorities: ['ROLE_ADMIN']
-  }
-}));
-const MockUserServiceForbidden = jest.fn(() => ({
-  currentUser: {
-    authorities: ['ROLE_GUEST']
-  }
-}));
-
-describe('AdminGuard NoAuth', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        AdminGuard,
-        {
-          provide: Router,
-          useClass: RouterStub
-        },
-        {
-          provide: UserService,
-          useClass: MockUserServiceNoAuth
-        }
-      ]
-    });
-  });
-
-  it('should run', inject([AdminGuard], (guard: AdminGuard) => {
-    expect(guard).toBeTruthy();
-  }));
-
-  it('returns true if user is NO_AUTH',inject([AdminGuard], (guard: AdminGuard) => {
-    expect(guard.canActivate(null, null)).toBeTruthy();
-  }));
-
-});
-
-describe('AdminGuard activates the route', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        AdminGuard,
-        {
-          provide: Router,
-          useClass: RouterStub
-        },
-        {
-          provide: UserService,
-          useClass: MockUserService
-        }
-      ]
-    });
-  });
-
-  it('should run', inject([AdminGuard], (guard: AdminGuard) => {
-    expect(guard).toBeTruthy();
-  }));
-
-  it('returns true if user has admin role',inject([AdminGuard], (guard: AdminGuard) => {
-    expect(guard.canActivate(null, null)).toBeTruthy();
-  }));
-
-});
-
-describe('AdminGuard redirects to 403', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        AdminGuard,
-        {
-          provide: Router,
-          useClass: RouterStub
-        },
-        {
-          provide: UserService,
-          useClass: MockUserServiceForbidden
-        }
-      ]
-    });
-  });
-
-  it('should run', inject([AdminGuard], (guard: AdminGuard) => {
-    expect(guard).toBeTruthy();
-  }));
-
-  it('returns false if user is not authorized',inject([AdminGuard], (guard: AdminGuard) => {
-    expect(guard.canActivate(null, null)).toBeFalsy();
-    expect(RouterSpy).toHaveBeenCalledTimes(1);
-  }));
-
-});

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

@@ -1,25 +1,29 @@
-import { Injectable } from '@angular/core';
-import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { UserService } from '../services';
-import { Observable } from 'rxjs';
+import {Injectable} from '@angular/core';
+import {Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
+import {UserService} from '../services';
+import {Observable} from 'rxjs';
 
 @Injectable()
 export class AdminGuard implements CanActivate {
-  constructor(private router: Router, private userService: UserService) {}
+  constructor(private router: Router, private userService: UserService) {
+  }
 
   canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
-    if (this.userService.currentUser) {
-      if(this.userService.currentUser === 'NO_AUTH')
+    if (this.userService.isAnAnonymousUser) {
       return true;
-      if (JSON.stringify(this.userService.currentUser.authorities).search('ROLE_ADMIN') !== -1) 
-        return true;
-      else {
-        this.router.navigate(['/403']);
-        return false;
     }
+    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 }});
+      this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
       return false;
     }
   }

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

@@ -1,4 +1,7 @@
-export class SocketEndpoint{
-    client : any
-    stomp : any
+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

@@ -1,17 +1,20 @@
-export class SocketOption{
-    socketUrl  : string;
-    topicName  : string; 
-    brokerName : string;
-    reconnectionTimeout : number = 30000
+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){
+  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/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,56 @@
+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/scheduler.model.ts

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

@@ -1,11 +0,0 @@
-export class SchedulerConfig {
-
-    triggerPerDay : number = 0
-    maxCount : number = 0
-
-    constructor(triggerPerDay = 0, maxCount = 0) {
-      this.triggerPerDay = triggerPerDay
-      this.maxCount = maxCount
-    }
-  
-  }

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

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

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

@@ -0,0 +1,11 @@
+import {Moment} from 'moment/moment';
+
+export class SimpleTriggerForm {
+  triggerName: string;
+  jobClass: string;
+  startDate: Moment;
+  endDate: Moment;
+  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-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;
+}

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

@@ -0,0 +1,17 @@
+import {TriggerKey} from './triggerKey.model';
+import {JobKeyModel} from './jobKey.model';
+import {JobDetail} from './jobDetail.model';
+
+export class Trigger {
+  triggerKeyDTO: TriggerKey = new TriggerKey();
+  priority: number;
+  startTime: Date;
+  description: string;
+  endTime: Date;
+  finalFireTime: Date;
+  misfireInstruction: number;
+  nextFireTime: Date;
+  jobKeyDTO: JobKeyModel;
+  jobDetailDTO: JobDetail = new JobDetail();
+  mayFireAgain: boolean;
+}

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

@@ -0,0 +1,9 @@
+export class TriggerKey {
+  name: string;
+  group: string;
+
+  constructor(name?: string, group?: string) {
+    this.name = name;
+    this.group = group;
+  }
+}

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

@@ -14,7 +14,7 @@
  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
  */
 
-/***************************************************************************************************
+/** *************************************************************************************************
  * BROWSER POLYFILLS
  */
 
@@ -51,14 +51,14 @@ import 'core-js/es7/reflect';
 
 
 
-/***************************************************************************************************
+/** *************************************************************************************************
  * Zone JS is required by Angular itself.
  */
 import 'zone.js/dist/zone';  // Included with Angular CLI.
 
 
 
-/***************************************************************************************************
+/** *************************************************************************************************
  * APPLICATION IMPORTS
  */
 
@@ -68,7 +68,7 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  */
 // import 'intl';  // Run `npm install --save intl`.
 
-/***************************************************************************************************
+/** *************************************************************************************************
  * MATERIAL 2
  */
 import 'hammerjs/hammer';

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

@@ -1,11 +1,11 @@
-import { TestBed } from "@angular/core/testing";
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { ApiService } from './api.service';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Router} from '@angular/router';
+import {TestBed} from '@angular/core/testing';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {ApiService} from './api.service';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Router} from '@angular/router';
 import {jest} from '@jest/globals'
 
-class Data{
+class Data {
   name: string
 }
 
@@ -21,8 +21,9 @@ class HttpResponseMock {
       status?: number;
       statusText?: string;
     }
-    ) {}
+  ) {
   }
+}
 
 const routerSpy = jest.spyOn(Router.prototype, 'navigateByUrl');
 
@@ -68,8 +69,7 @@ describe('ApiServiceTest', () => {
 
     apiService.get(URL_401).subscribe((res: Data) => {
       expect(false);
-        }, (error) => 
-        {
+    }, (error) => {
       expect(error.status).toBe(401);
       expect(routerSpy).toHaveBeenCalledTimes(1);
     });

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

@@ -1,9 +1,9 @@
-import { HttpClient, HttpHeaders, HttpResponse, HttpRequest, HttpEventType, HttpParams } from '@angular/common/http';
-import { Router} from '@angular/router';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { catchError, map, filter, tap } from 'rxjs/operators'
-import { serialize } from '../shared/utilities/serialize';
+import {HttpClient, HttpHeaders, HttpResponse, HttpRequest, HttpEventType, HttpParams} from '@angular/common/http';
+import {Router} from '@angular/router';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {catchError, map, filter, tap} from 'rxjs/operators'
+import {serialize} from '../shared/utilities/serialize';
 
 export enum RequestMethod {
   Get = 'GET',
@@ -18,17 +18,6 @@ export enum RequestMethod {
 @Injectable()
 export class ApiService {
 
-  private static extractTokenFromHttpResponse(res: HttpResponse<any>): string {
-    let authorization: string = null;
-    let headers: HttpHeaders = res.headers;
-    if (headers && headers.has('Authorization')){
-      authorization = headers.get('Authorization');
-      if(authorization.startsWith('Bearer '))
-      authorization = authorization.substring(7);
-    }
-    return authorization;
-  }
-
   headers = new HttpHeaders({
     'Accept': 'application/json',
     'Content-Type': 'application/json'
@@ -36,7 +25,20 @@ export class ApiService {
 
   private jwtToken: string;
 
-  constructor( private http: HttpClient, private router: Router) { }
+  private static extractTokenFromHttpResponse(res: HttpResponse<any>): string {
+    let authorization: string = null;
+    const headers: HttpHeaders = res.headers;
+    if (headers && headers.has('Authorization')) {
+      authorization = headers.get('Authorization');
+      if (authorization.startsWith('Bearer ')) {
+        authorization = authorization.substring(7);
+      }
+    }
+    return authorization;
+  }
+
+  constructor(private http: HttpClient, private router: Router) {
+  }
 
   setToken(token: string) {
     this.jwtToken = token;
@@ -50,8 +52,9 @@ export class ApiService {
       withCredentials: true
     };
 
-    if (args) 
+    if (args) {
       options['params'] = serialize(args);
+    }
 
     return this.http.get(path, options)
       .pipe(catchError(this.checkError.bind(this)));
@@ -81,9 +84,10 @@ export class ApiService {
       .pipe(
         filter(response => response instanceof HttpResponse),
         tap((resp: HttpResponse<any>) => {
-                let jwtToken = ApiService.extractTokenFromHttpResponse(resp);
-                if(jwtToken)
+          const jwtToken = ApiService.extractTokenFromHttpResponse(resp);
+          if (jwtToken) {
             this.setToken(jwtToken);
+          }
         }),
         map((response: HttpResponse<any>) => response.body),
         catchError(error => this.checkError(error))
@@ -101,5 +105,4 @@ export class ApiService {
   }
 
 
-
 }

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

@@ -1,9 +1,9 @@
-import { Injectable } from '@angular/core';
-import { HttpHeaders, HttpResponse } from '@angular/common/http';
-import { ApiService } from './api.service';
-import { UserService } from './user.service';
-import { ConfigService } from './config.service';
-import { map } from 'rxjs/operators';
+import {Injectable} from '@angular/core';
+import {HttpHeaders, HttpResponse} from '@angular/common/http';
+import {ApiService} from './api.service';
+import {UserService} from './user.service';
+import {ConfigService} from './config.service';
+import {map} from 'rxjs/operators';
 
 @Injectable()
 export class AuthService {
@@ -12,7 +12,8 @@ export class AuthService {
     private apiService: ApiService,
     private userService: UserService,
     private config: ConfigService,
-  ) { }
+  ) {
+  }
 
   login(user) {
     const loginHeaders = new HttpHeaders({
@@ -23,22 +24,12 @@ export class AuthService {
     return this.apiService.post(this.config.login_url, body, loginHeaders)
       .pipe(
         map(() => {
-                    console.log("Login success");
-							      this.userService.getMyInfo().subscribe();
+          console.log('Login success');
+          this.userService.getUserInfo().subscribe();
         })
       );
   }
 
-  signup(user){
-    const signupHeaders = new HttpHeaders({
-      'Accept': 'application/json',
-      'Content-Type': 'application/json'
-    });
-    return this.apiService.post(this.config.signup_url, JSON.stringify(user), signupHeaders).pipe(map(() =>{
-      console.log("Sign up success");
-    }));
-  }
-  
   logout() {
     return this.apiService.post(this.config.logout_url, {})
       .pipe(map(() => {
@@ -47,9 +38,4 @@ export class AuthService {
       }));
   }
 
-  changePassword(passwordChanger) {
-    return this.apiService.post(this.config.change_password_url, passwordChanger);
-  }
-
-
 }

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

@@ -1,21 +1,25 @@
-import { Injectable } from '@angular/core';
-import { environment } from '../../environments/environment';
+import {Injectable} from '@angular/core';
+import {environment} from '../../environments/environment';
 
 
 const WEBJAR_PATH = '/quartz-manager-ui/';
 
-export function getHtmlBaseUrl(){
-    const baseUrl = getBaseUrl() || '/';
-    return environment.production ? getBaseUrl() + WEBJAR_PATH: '/';
-  }
+export const CONTEXT_PATH = '/quartz-manager';
 
-export function getBaseUrl(){
-    if(environment.production){
+export function getHtmlBaseUrl() {
+  const baseUrl = getBaseUrl() || '/';
+  return environment.production ? getBaseUrl() + WEBJAR_PATH : '/';
+}
+
+export function getBaseUrl() {
+  if (environment.production) {
     let contextPath: string = window.location.pathname.split('/')[1] || '';
-        if(contextPath && ('/' + contextPath + '/') === WEBJAR_PATH)
+    if (contextPath && ('/' + contextPath + '/') === WEBJAR_PATH) {
       return '';
-        if(contextPath)
+    }
+    if (contextPath) {
       contextPath = '/' + contextPath;
+    }
     return contextPath;
   }
   return '';
@@ -24,29 +28,15 @@ export function getBaseUrl(){
 @Injectable()
 export class ConfigService {
 
-  private _api_url = getBaseUrl() + '/quartz-manager/api'
+  private _auth_url = getBaseUrl() + `${CONTEXT_PATH}/auth`
 
-  private _refresh_token_url = this._api_url + '/refresh';
+  private _refresh_token_url = this._auth_url + '/refresh';
 
-  private _login_url = this._api_url + '/login';
+  private _login_url = this._auth_url + '/login';
 
-  private _logout_url = this._api_url + '/logout';
+  private _logout_url = this._auth_url + '/logout';
 
-  private _change_password_url = this._api_url + '/changePassword';
-
-  private _whoami_url = this._api_url + '/whoami';
-
-  private _user_url = this._api_url + '/user';
-
-  private _users_url = this._user_url + '/all';
-
-  private _reset_credentials_url = this._user_url + '/reset-credentials';
-
-  private _signup_url = this._api_url + '/signup';
-
-  get reset_credentials_url(): string {
-      return this._reset_credentials_url;
-  }
+  private _whoami_url = this._auth_url + '/whoami';
 
   get refresh_token_url(): string {
     return this._refresh_token_url;
@@ -56,10 +46,6 @@ export class ConfigService {
     return this._whoami_url;
   }
 
-  get users_url(): string {
-      return this._users_url;
-  }
-
   get login_url(): string {
     return this._login_url;
   }
@@ -68,12 +54,4 @@ export class ConfigService {
     return this._logout_url;
   }
 
-  get change_password_url(): string {
-      return this._change_password_url;
-  }
-
-  get signup_url():string {
-      return this._signup_url;
-  }
-
 }

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

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

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

@@ -0,0 +1,18 @@
+import {Injectable} from '@angular/core';
+import {ApiService} from './api.service';
+import {CONTEXT_PATH, getBaseUrl} from './config.service';
+import {Observable} from 'rxjs';
+
+@Injectable()
+export default class JobService {
+
+  constructor(
+    private apiService: ApiService
+  ) {
+  }
+
+  fetchJobs = (): Observable<string[]> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/jobs`)
+  }
+
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,11 @@
-import { Injectable } from '@angular/core';
-import { getBaseUrl } from '.';
-import { ApiService } from './api.service';
+import {Injectable} from '@angular/core';
+import {CONTEXT_PATH, getBaseUrl} from '.';
+import {ApiService} from './api.service';
+import {Trigger} from '../model/trigger.model';
+import {Observable} from 'rxjs';
+import {SimpleTriggerCommand} from '../model/simple-trigger.command';
+import {Scheduler} from '../model/scheduler.model';
+
 
 @Injectable()
 export class SchedulerService {
@@ -9,31 +14,41 @@ export class SchedulerService {
     private apiService: ApiService
   ) { }
 
-  startScheduler = () => {
-    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/run')
+  startScheduler = (): Observable<void> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/run`);
   }
 
-  stopScheduler = () => {
-    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/stop')
+  stopScheduler = (): Observable<void> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/stop`);
   }
 
-  pauseScheduler = () => {
-    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/pause')
+  pauseScheduler = (): Observable<void> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/pause`);
   }
 
-  resumeScheduler = () => {
-    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/resume')
+  resumeScheduler = (): Observable<void> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/resume`);
   }
 
   getStatus = () => {
-    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler')
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler/status`);
   }
 
-  getConfig = () => {
-    return this.apiService.get(getBaseUrl() + '/quartz-manager/scheduler/config')
+  getScheduler = (): Observable<Scheduler> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/scheduler`);
   }
 
-  updateConfig = (config: Object) => {
-    return this.apiService.post(getBaseUrl() + '/quartz-manager/scheduler/config', config)
+  getSimpleTriggerConfig = (triggerName: string): Observable<Trigger> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${triggerName}`);
   }
+
+  saveSimpleTriggerConfig = (config: SimpleTriggerCommand) => {
+    return this.apiService.post(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${config.triggerName}`, config)
+  }
+
+  updateSimpleTriggerConfig = (config: SimpleTriggerCommand) => {
+    return this.apiService.put(getBaseUrl() + `${CONTEXT_PATH}/simple-triggers/${config.triggerName}`, config)
+  }
+
+
 }

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

@@ -0,0 +1,20 @@
+import {ApiService} from './api.service';
+import {Injectable} from '@angular/core';
+import {Observable} from 'rxjs';
+import {Trigger} from '../model/trigger.model';
+import {TriggerKey} from '../model/triggerKey.model';
+import {CONTEXT_PATH, getBaseUrl} from './config.service';
+
+@Injectable()
+export class TriggerService {
+
+  constructor(
+    private apiService: ApiService) {
+  }
+
+  fetchTriggers = (): Observable<Array<TriggerKey>> => {
+    return this.apiService.get(getBaseUrl() + `${CONTEXT_PATH}/triggers`);
+  }
+
+
+}

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

@@ -1,55 +1,56 @@
-import { Injectable } from '@angular/core';
-import { ApiService } from './api.service';
-import { ConfigService } from './config.service';
+import {Injectable} from '@angular/core';
+import {ApiService} from './api.service';
+import {ConfigService} from './config.service';
 
-import { map } from 'rxjs/operators'
-
-export const NO_AUTH: string = 'NO_AUTH'
+import {map} from 'rxjs/operators'
+import {HttpErrorResponse} from '@angular/common/http';
+import {Router} from '@angular/router';
 
 @Injectable()
 export class UserService {
 
-  currentUser;
+  isAnAnonymousUser: boolean;
+  currentUser: any;
 
   constructor(
     private apiService: ApiService,
-    private config: ConfigService
-  ) { }
+    private config: ConfigService,
+    private router: Router
+  ) {
+  }
 
-  jwtInitUser() {
-    const promise = this.apiService.get(this.config.refresh_token_url).toPromise()
-    .then(res => {
-      if (res.access_token !== null) {
-        return this.getMyInfo().toPromise()
+  refreshToken() {
+    this.apiService.get(this.config.refresh_token_url).subscribe(res => {
+        if (res.accessToken !== null) {
+          return this.getUserInfo().toPromise()
             .then(user => {
               this.currentUser = user;
             });
         }
       })
-    .catch(() => null);
-    return promise;
   }
 
-  jsessionInitUser() {
-    return this.getMyInfo().toPromise()
-        .then(user => {
+  fetchLoggedUser() {
+    this.getUserInfo().subscribe(user => {
       this.currentUser = user;
+      this.router.initialNavigation();
     }, err => {
-          //not logged
-          console.log(`error retrieving current user due to ` + err);
+      console.log('error retrieving current user due to ' + JSON.stringify(err));
+      const httpErrorResponse = err as HttpErrorResponse;
+      if (httpErrorResponse.status === 404) {
+        this.isAnAnonymousUser = true;
+        this.router.initialNavigation();
+        return;
+      }
+      if (httpErrorResponse.status !== 401 && (httpErrorResponse.status < 200 || httpErrorResponse.status > 399)) {
+        this.router.navigateByUrl('/error');
+      }
     });
   }
 
-  resetCredentials() {
-    return this.apiService.get(this.config.reset_credentials_url);
-  }
-
-  getMyInfo() {
-    return this.apiService.get(this.config.whoami_url).pipe(map(user => this.currentUser = user));
-  }
-
-  getAll() {
-    return this.apiService.get(this.config.users_url);
+  getUserInfo() {
+    return this.apiService.get(this.config.whoami_url)
+      .pipe(map(user => this.currentUser = user));
   }
 
 }

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

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

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

@@ -1,18 +0,0 @@
-<div class="content" fxLayout="row" fxLayoutAlign="center">
-    <mat-card elevation="5" fxFlex>
-      <mat-card-subtitle>Change Your Password</mat-card-subtitle>
-      <p [class]="notification.msgType" *ngIf="notification">{{notification.msgBody}}</p>
-      <mat-card-content>
-        <form *ngIf="!submitted" [formGroup]="form" (ngSubmit)="onSubmit()" #changePasswordForm="ngForm">
-          <mat-form-field>
-            <input matInput formControlName="oldPassword" required type="password" placeholder="old password">
-          </mat-form-field>
-          <mat-form-field>
-            <input matInput formControlName="newPassword" required type="password" placeholder="new password">
-          </mat-form-field>
-          <button type="submit" [disabled]="!changePasswordForm.form.valid" mat-raised-button color="primary">Change Password</button>
-        </form>
-        <mat-spinner *ngIf="submitted" mode="indeterminate"></mat-spinner>
-      </mat-card-content>
-    </mat-card>
-</div>

quartz-manager-frontend/src/app/views/change-password/change-password.component.scss

@@ -1,45 +0,0 @@
-.content {
-  width: 100%;
-}
-
-mat-card {
-  max-width: 350px;
-  text-align: center;
-  animation: fadein 1s;
-  -o-animation: fadein 1s; /* Opera */
-  -moz-animation: fadein 1s; /* Firefox */
-  -webkit-animation: fadein 1s; /* Safari and Chrome */
-}
-
-mat-form-field {
-  width: 100%;
-}
-
-mat-spinner {
-  width: 25px;
-  height: 25px;
-  margin: 20px auto 0 auto;
-}
-
-.error {
-  color: #D50000;
-}
-
-.success {
-  color: #8BC34A;
-}
-
-@media screen and (max-width: 599px) {
-
-  .content {
-    /* https://github.com/angular/flex-layout/issues/295 */
-    display: block !important;
-  }
-
-  mat-card {
-    /* https://github.com/angular/flex-layout/issues/295 */
-    display: block !important;
-    max-width: 999px;
-  }
-
-}

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

@@ -1,52 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { RouterTestingModule } from '@angular/router/testing';
-import {
-  ApiService,
-  AuthService,
-  UserService,
-  ConfigService
-} from '../../services';
-import { MockApiService } from '../../services/mocks';
-
-import { ChangePasswordComponent } from './change-password.component';
-
-describe('ChangePasswordComponent', () => {
-  let component: ChangePasswordComponent;
-  let fixture: ComponentFixture<ChangePasswordComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        RouterTestingModule,
-        FormsModule,
-        ReactiveFormsModule
-      ],
-      declarations: [
-        ChangePasswordComponent
-      ],
-      providers: [
-        {
-          provide: ApiService,
-          useClass: MockApiService
-        },
-        AuthService,
-        UserService,
-        ConfigService
-      ],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ChangePasswordComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

quartz-manager-frontend/src/app/views/change-password/change-password.component.ts

@@ -1,64 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { AuthService } from '../../services';
-import { Router } from '@angular/router';
-import { DisplayMessage } from '../../shared/models/display-message';
-import { delay, mergeMap } from 'rxjs/operators';
- 
-@Component({
-  selector: 'app-change-password',
-  templateUrl: './change-password.component.html',
-  styleUrls: ['./change-password.component.scss']
-})
-export class ChangePasswordComponent implements OnInit {
-
-  form: FormGroup;
-  /**
-   * Boolean used in telling the UI
-   * that the form has been submitted
-   * and is awaiting a response
-   */
-  submitted = false;
-
-  /**
-   * Diagnostic message from received
-   * form request error
-   */
-  notification: DisplayMessage;
-
-  constructor(
-    private authService: AuthService,
-    private router: Router,
-    private formBuilder: FormBuilder
-  ) {
-  }
-
-  ngOnInit() {
-
-    this.form = this.formBuilder.group({
-      oldPassword: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(64)])],
-      newPassword: ['', Validators.compose([Validators.required, Validators.minLength(3), Validators.maxLength(32)])]
-    });
-
-  }
-
-
-  onSubmit() {
-    /**
-     * Innocent until proven guilty
-     */
-    this.notification = undefined;
-    this.submitted = true;
-
-    this.authService.changePassword(this.form.value)
-    .pipe(delay(1000), mergeMap(() => this.authService.logout()))
-    .subscribe(() => {
-      this.router.navigate(['/login', { msgType: 'success', msgBody: 'Success! Please sign in with your new password.'}]);
-    }, error => {
-      this.submitted = false;
-      this.notification = { msgType: 'error', msgBody: 'Invalid old password.'};
-    });
-
-  }
-
-}

quartz-manager-frontend/src/app/views/change-password/index.ts

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