Input to run Jobs with Parameters (#1850)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component.html

@@ -0,0 +1,31 @@
+<h1 mat-dialog-title>Edit Job Custom Parameters</h1>
+
+<mat-dialog-content>
+  <div class="jobs-container">
+    <div *ngFor="let job of selectedJobs">
+      <mifosx-custom-parameters-table
+      [displayName]="job.displayName"
+      [jobId]="job.id"
+      [jobParameters]="job.jobParameters"
+      (retrieveData)="runSelectedJobs($event)"
+      >
+      </mifosx-custom-parameters-table>
+    </div>
+  </div>
+</mat-dialog-content>
+
+<mat-list>
+  <mat-list-item *ngFor="let message of messages" class="message" [ngClass]="{'green' : message.status}">
+    {{message.message}}
+  </mat-list-item>
+</mat-list>
+
+<mat-dialog-actions>
+  <button mat-raised-button color="primary" (click)="runSelectedJobs()">
+    <fa-icon icon="play" class="m-r-10"></fa-icon>
+    Run Selected Jobs
+  </button>
+  <button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">
+    Close Custom Parameters
+  </button>
+</mat-dialog-actions>

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component.scss

@@ -0,0 +1,9 @@
+.message {
+    height: auto;
+    font-weight: 500;
+    color: #f44366;
+}
+
+.message.green {
+    color: #32cd32;
+}

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomParametersPopoverComponent } from './custom-parameters-popover.component';
+
+describe('CustomParametersPopoverComponent', () => {
+  let component: CustomParametersPopoverComponent;
+  let fixture: ComponentFixture<CustomParametersPopoverComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CustomParametersPopoverComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomParametersPopoverComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component.ts

@@ -0,0 +1,93 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, Inject, OnInit, QueryList, ViewChildren } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { CustomParametersTableComponent } from './custom-parameters-table/custom-parameters-table.component';
+import { SystemService } from 'app/system/system.service';
+
+interface SelectedJobsDataType {
+  selectedJobs: SelectionModel<JobDataType>;
+  parameterValue: string;
+}
+
+export interface JobIdAndParameterType {
+  jobId: string;
+  displayName: string;
+  jobParameters: JobParameterType[];
+}
+
+export interface RunJobWithParamPayloadType {
+  jobParameters: JobParameterType[];
+}
+
+export interface JobParameterType {
+  jobParameterName: string;
+  jobParameterValue: string;
+}
+
+interface JobDataType {
+  active: boolean;
+  cronExpression: string;
+  currentlyRunning: boolean;
+  displayName: string;
+  jobId: number;
+  lastRunHistory: {
+    jobRunEndTime: string;
+    jobRunStartTime: string;
+    status: string;
+    triggerType: string;
+    version: number;
+  };
+  nextRunTime: string;
+  jobParameters: JobParameterType[];
+}
+
+@Component({
+  selector: 'mifosx-custom-parameters-popover',
+  templateUrl: './custom-parameters-popover.component.html',
+  styleUrls: ['./custom-parameters-popover.component.scss']
+})
+export class CustomParametersPopoverComponent implements OnInit {
+
+  /* Job table childer */
+  @ViewChildren(CustomParametersTableComponent) tableComponents: QueryList<CustomParametersTableComponent>;
+
+  /* Initialize Selected Jobs */
+  selectedJobs: JobDataType[] = [];
+  /* Show modal or not */
+  show: number;
+  /* API call response message */
+  messages: { message: string; status: number }[] = [];
+
+  constructor(private systemService: SystemService, @Inject(MAT_DIALOG_DATA) public data: SelectedJobsDataType) { }
+
+  ngOnInit(): void {
+    this.selectedJobs = this.data.selectedJobs.selected.map((jobJSON) => ({
+      ...jobJSON,
+      jobParameters: []
+    }));
+  }
+
+  /**
+   * Run all selected jobs with job parameters from table
+   */
+  runSelectedJobs(): void {
+    this.messages = [];
+    const tableData: JobIdAndParameterType[] = [];
+    this.tableComponents.forEach((tableComponent) => {
+      tableData.push(tableComponent.getTableData());
+    });
+
+    tableData.forEach((job) => {
+      this.systemService.runSelectedJobWithParameters(job.jobId,
+        { jobParameters: job.jobParameters }
+      )
+      .then((response) => {
+        this.messages.push({
+          message: `${job.displayName}: ${response.statusText} (${response.status})`,
+          status: response.ok
+        });
+      });
+    });
+  }
+
+}

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-table/custom-parameters-table.component.html

@@ -0,0 +1,41 @@
+<div>
+  <h2>Job: {{ displayName }}</h2>
+  <table mat-table [dataSource]="updatedJobParameters">
+    <ng-container matColumnDef="parameterName">
+      <th mat-header-cell *matHeaderCellDef>Parameter Name</th>
+      <td mat-cell *matCellDef="let element; index as i">
+        <mat-form-field>
+          <input matInput type="text" placeholder="Parameter Name" [(ngModel)]="element.parameterName" />
+        </mat-form-field>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="parameterValue">
+      <th mat-header-cell *matHeaderCellDef>Parameter Value</th>
+      <td mat-cell *matCellDef="let element; index as i">
+        <mat-form-field>
+          <input matInput type="text" placeholder="Parameter Value" [(ngModel)]="element.parameterValue" />
+        </mat-form-field>
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef></th>
+      <td mat-cell *matCellDef="let row; let rowIndex = index">
+        <button type="button" mat-icon-button color="warn"
+          (click)="deleteParameter(rowIndex)" matTooltip="Delete"
+          matTooltipPosition="left">
+          <fa-icon icon="trash"></fa-icon>
+        </button>
+      </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay" class="first-row"></tr>
+    <tr mat-row *matRowDef="let updatedJobParameters; columns: columnsToDisplay"></tr>
+  </table>
+
+  <button mat-button (click)="addParameter()">
+    <fa-icon icon="plus" class="m-r-10"></fa-icon>
+    Add Parameter
+  </button>
+</div>

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-table/custom-parameters-table.component.scss

@@ -0,0 +1,13 @@
+table td {
+  padding-right: 50px;
+}
+
+.jobs-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.jobs-container table td {
+  padding-right: 50px;
+}

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-table/custom-parameters-table.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomParametersTableComponent } from './custom-parameters-table.component';
+
+describe('CustomParametersTableComponent', () => {
+  let component: CustomParametersTableComponent;
+  let fixture: ComponentFixture<CustomParametersTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CustomParametersTableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomParametersTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/system/manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-table/custom-parameters-table.component.ts

@@ -0,0 +1,68 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { JobIdAndParameterType, JobParameterType } from '../custom-parameters-popover.component';
+
+@Component({
+  selector: 'mifosx-custom-parameters-table',
+  templateUrl: './custom-parameters-table.component.html',
+  styleUrls: ['./custom-parameters-table.component.scss']
+})
+export class CustomParametersTableComponent implements OnInit {
+
+  /* Job name for table title */
+  @Input() displayName: string;
+  /* Job id for table */
+  @Input() jobId: string;
+  /* Array of custom job parameters */
+  @Input() jobParameters: JobParameterType[];
+  /* Listener to return jobs */
+  @Output() retrieveJob: EventEmitter<JobParameterType[]> = new EventEmitter<JobParameterType[]>();
+
+  /* Job parameters copy updated by user input */
+  updatedJobParameters: JobParameterType[];
+  /* Columns for the table */
+  columnsToDisplay: string[] = ['parameterName', 'parameterValue', 'actions'];
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.updatedJobParameters = this.jobParameters;
+    this.updatedJobParameters.push({
+      jobParameterName: '',
+      jobParameterValue: ''
+    });
+  }
+
+  addParameter(): void {
+    this.updatedJobParameters = [
+      ...this.updatedJobParameters,
+      {
+        jobParameterName: '',
+        jobParameterValue: ''
+      }
+    ];
+  }
+
+  deleteParameter(index: number): void {
+    let idx = 0;
+    const jobParameters: JobParameterType[] = [];
+    for ( ; idx < this.updatedJobParameters.length; idx++ ) {
+      if (idx !== index) {
+        jobParameters.push(this.updatedJobParameters[idx]);
+      }
+    }
+    this.updatedJobParameters = jobParameters;
+  }
+
+  /**
+   * Gets the jobId and jobParameters array
+   * @returns jobId and jobParameters array
+   */
+  getTableData(): JobIdAndParameterType {
+    return {
+      jobId: this.jobId,
+      displayName: this.displayName,
+      jobParameters: this.updatedJobParameters
+    };
+  }
+
+}

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.html

@@ -28,6 +28,10 @@
       <fa-icon icon="play" class="m-r-10"></fa-icon>
       Run Selected Jobs
     </button>
+    <button mat-raised-button color="primary" (click)="openCustomParametersDialog()" [disabled]="!isAnyJobSelected()">
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>
+      Add Custom Parameters
+    </button>
   </div>
 
   <div #jobsTable class="mat-elevation-z8 space-top">

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-jobs.component.ts

@@ -16,6 +16,7 @@ import { ConfigurationWizardService } from '../../../configuration-wizard/config
 
 /** Custom Dialog Component */
 import { NextStepDialogComponent } from '../../../configuration-wizard/next-step-dialog/next-step-dialog.component';
+import { CustomParametersPopoverComponent } from './custom-parameters-popover/custom-parameters-popover.component';
 
 /**
  * Manage scheduler jobs component.
@@ -239,4 +240,16 @@ export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit {
       }
     });
   }
+
+  /**
+   * Open Custom Parameters Dialog
+   */
+  openCustomParametersDialog() {
+    this.dialog.open(CustomParametersPopoverComponent, {
+      data: {
+        selectedJobs: this.selection
+      }
+    });
+  }
+
 }

src/app/system/system.module.ts

@@ -72,6 +72,8 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ManageExternalEventsComponent } from './manage-external-events/manage-external-events.component';
 import { CobWorkflowComponent } from './manage-jobs/cob-workflow/cob-workflow.component';
 import { LoanLockedComponent } from './manage-jobs/cob-workflow/loan-locked/loan-locked.component';
+import { CustomParametersPopoverComponent } from './manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component';
+import { CustomParametersTableComponent } from './manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-table/custom-parameters-table.component';
 
 @NgModule({
   imports: [
@@ -143,7 +145,9 @@ import { LoanLockedComponent } from './manage-jobs/cob-workflow/loan-locked/loan
     WorkflowDiagramComponent,
     ManageExternalEventsComponent,
     CobWorkflowComponent,
-    LoanLockedComponent
+    LoanLockedComponent,
+    CustomParametersPopoverComponent,
+    CustomParametersTableComponent
   ],
 })
 export class SystemModule { }

src/app/system/system.service.ts

@@ -4,6 +4,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 
 /** rxjs Imports */
 import { Observable } from 'rxjs';
+import { RunJobWithParamPayloadType } from './manage-jobs/scheduler-jobs/custom-parameters-popover/custom-parameters-popover.component';
 
 /**
  * System service.
@@ -323,6 +324,14 @@ export class SystemService {
     return this.http.post(`/jobs/${jobId}?command=executeJob`, this.emptyPayload).toPromise();
   }
 
+  /**
+   * @param {string} jobId Job Id on which jobs to run
+   * @returns {Observable<any>}
+   */
+  runSelectedJobWithParameters(jobId: string, jobParameters: RunJobWithParamPayloadType): Promise<any> {
+    return this.http.post(`/jobs/${jobId}?command=executeJob`, jobParameters, { observe: 'response' }).toPromise();
+  }
+
   /*
    * @param jobId Job Id to view the history.
    * @returns {Observable<any>} Fetches History of the Job.