Merge pull request #1532 from josehernandezfintecheandomx/enhancement/manage_job_with_cob

Manage scheduler and cob jobs

package.json

@@ -49,8 +49,11 @@
     "@fortawesome/free-solid-svg-icons": "5.8.2",
     "@ngx-translate/core": "13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
+    "@swimlane/ngx-graph": "^8.0.2",
     "chart.js": "3.0.0-alpha",
     "core-js": "2.5.0",
+    "d3": "^7.6.1",
+    "dagre": "^0.8.5",
     "font-awesome": "^4.7.0",
     "install": "^0.13.0",
     "lodash": "4.17.21",
@@ -67,6 +70,10 @@
     "@biesbjerg/ngx-translate-extract": "^7.0.4",
     "@cypress/schematic": "^1.7.0",
     "@ngx-rocket/scripts": "3.0.3",
+    "@types/d3-dispatch": "^3.0.1",
+    "@types/d3-drag": "^3.0.1",
+    "@types/d3-shape": "^3.1.0",
+    "@types/d3-timer": "^3.0.0",
     "@types/jasmine": "3.3.13",
     "@types/jasminewd2": "2.0.6",
     "@types/lodash": "4.14.132",

src/app/core/core.module.ts

@@ -5,7 +5,6 @@ import { RouteReuseStrategy, RouterModule } from '@angular/router';
 
 /** Translation Imports */
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 /** Custom Services */
 import { AuthenticationService } from './authentication/authentication.service';
@@ -38,8 +37,6 @@ import { SidenavComponent } from './shell/sidenav/sidenav.component';
 import { ToolbarComponent } from './shell/toolbar/toolbar.component';
 import { BreadcrumbComponent } from './shell/breadcrumb/breadcrumb.component';
 import { ContentComponent } from './shell/content/content.component';
-import { InjectionToken } from '@angular/core';
-import { APP_BASE_HREF, LocationStrategy } from '@angular/common';
 
 
 /**

src/app/pipes/datetime-format.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { DatetimeFormatPipe } from './datetime-format.pipe';
+
+describe('DatetimeFormatPipe', () => {
+  it('create an instance', () => {
+    const pipe = new DatetimeFormatPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/pipes/datetime-format.pipe.ts

@@ -0,0 +1,29 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { SettingsService } from 'app/settings/settings.service';
+import * as moment from 'moment';
+
+@Pipe({
+  name: 'datetimeFormat'
+})
+export class DatetimeFormatPipe implements PipeTransform {
+
+  constructor(private settingsService: SettingsService) {
+  }
+
+  transform(value: any, datetimeFormat: string): any {
+    const defaultDateFormat = this.settingsService.dateFormat.replace('dd', 'DD');
+    if (typeof value === 'undefined') {
+      return '';
+    }
+    let dateVal;
+    if (value instanceof Array) {
+      dateVal = moment(value.join('-'), 'YYYY-MM-DD HH:mm:ss');
+    } else {
+      dateVal = moment(value);
+    }
+    if (datetimeFormat == null) {
+      return dateVal.format(defaultDateFormat + ' HH:mm:ss');
+    }
+    return dateVal.format(datetimeFormat);
+  }
+}

src/app/pipes/pipes.module.ts

@@ -7,13 +7,14 @@ import { ChargesPenaltyFilterPipe } from './charges-penalty-filter.pipe';
 import { FindPipe } from './find.pipe';
 import { UrlToStringPipe } from './url-to-string.pipe';
 import { DateFormatPipe } from './date-format.pipe';
+import { DatetimeFormatPipe } from './datetime-format.pipe';
 
 @NgModule({
   imports: [
     CommonModule
   ],
-  declarations: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe],
-  providers: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe],
-  exports: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe]
+  declarations: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe],
+  providers: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe],
+  exports: [StatusLookupPipe, AccountsFilterPipe, ChargesFilterPipe, ChargesPenaltyFilterPipe, FindPipe, UrlToStringPipe, DateFormatPipe, DatetimeFormatPipe]
 })
 export class PipesModule { }

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

@@ -0,0 +1,13 @@
+<mat-card class="container-card">
+  <mat-card-content>
+    <mat-tab-group #tabGroup mat-align-tabs="center">
+      <mat-tab label="Scheduler Jobs">
+        <mifosx-manage-scheduler-jobs></mifosx-manage-scheduler-jobs>
+      </mat-tab>
+      <mat-tab label="Workflow Jobs">
+        <mifosx-workflow-jobs></mifosx-workflow-jobs>
+      </mat-tab>
+    </mat-tab-group>
+
+  </mat-card-content>
+</mat-card>

src/app/system/manage-jobs/manage-jobs.component.scss

@@ -0,0 +1,27 @@
+.container-card {
+  margin: 0 auto;
+  max-width: 80rem;
+  width: 90%;
+  padding: 0;
+  padding-bottom: 50px;
+  min-height: 500px;
+  .header {
+    padding: 1%;
+    .header-title-group {
+      .client-card-title {
+        margin-top: 1.4rem;
+        color: white;
+        width: 90%;
+        p {
+          color: white;
+        }
+      }
+    }
+  }
+  .navigation-tabs {
+    overflow: auto;
+  }
+  i:hover {
+    cursor: pointer;
+  }
+}

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

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

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mifosx-manage-jobs',
+  templateUrl: './manage-jobs.component.html',
+  styleUrls: ['./manage-jobs.component.scss']
+})
+export class ManageJobsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/system/manage-jobs/scheduler-jobs/manage-scheduler-job.resolver.ts

@@ -6,7 +6,7 @@ import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable} from 'rxjs';
 
 /** Custom Services */
-import { SystemService } from '../system.service';
+import { SystemService } from '../../system.service';
 
 /**
  * Edit Scheduler Job data resolver.

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

@@ -22,21 +22,26 @@
     </mat-form-field>
   </div>
 
-  <div #jobsTable class="mat-elevation-z8">
+  <div class="container space-top" fxLayout="row" fxLayoutGap="20px">
+    <button mat-raised-button color="primary" (click)="runSelectedJobs()">
+      <fa-icon icon="play"></fa-icon>&nbsp;&nbsp;
+      Run Selected Jobs
+    </button>
+  </div>
+
+  <div #jobsTable class="mat-elevation-z8 space-top">
 
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="select">
         <th mat-header-cell *matHeaderCellDef>
-          <mat-checkbox (change)="$event ? masterToggle() : null"
-                        [checked]="selection.hasValue() && isAllSelected()"
-                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+          <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()">
           </mat-checkbox>
         </th>
         <td mat-cell *matCellDef="let row">
-          <mat-checkbox (click)="$event.stopPropagation()"
-                        (change)="$event ? selection.toggle(row) : null"
-                        [checked]="selection.isSelected(row)">
+          <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)">
           </mat-checkbox>
         </td>
       </ng-container>
@@ -53,15 +58,18 @@
 
       <ng-container matColumnDef="previousRunTime">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Previous Run </th>
-        <td mat-cell *matCellDef="let job"><span *ngIf="job.lastRunHistory">{{ job.lastRunHistory.jobRunStartTime }}</span></td>
+        <td mat-cell *matCellDef="let job"><span *ngIf="job.lastRunHistory">{{ job.lastRunHistory.jobRunStartTime
+            }}</span></td>
       </ng-container>
 
       <ng-container matColumnDef="previousRunStatus">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Previous Run Status </th>
         <td mat-cell *matCellDef="let job" class="center">
           <div *ngIf="job.lastRunHistory">
-            <fa-icon *ngIf="job.lastRunHistory.status === 'success'" class="success" matTooltip="Successful" matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
-            <fa-icon *ngIf="!(job.lastRunHistory.status == 'success')" class="fail" matTooltip="Failed" matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
+            <fa-icon *ngIf="job.lastRunHistory.status === 'success'" class="success" matTooltip="Successful"
+              matTooltipPosition="right" icon="check-circle" size="lg"></fa-icon>
+            <fa-icon *ngIf="!(job.lastRunHistory.status == 'success')" class="fail" matTooltip="Failed"
+              matTooltipPosition="right" icon="times-circle" size="lg"></fa-icon>
           </div>
         </td>
       </ng-container>
@@ -70,7 +78,8 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Currently Running </th>
         <td mat-cell *matCellDef="let job" class="center">
           <div [className]="job.currentlyRunning === true ? 'currently-running' : 'not-currently-running'">
-              <fa-icon matTooltip="{{ job.currentlyRunning === true ? 'Yes' : 'No' }}" matTooltipPosition="right" icon="circle" size="lg"></fa-icon>
+            <fa-icon matTooltip="{{ job.currentlyRunning === true ? 'Yes' : 'No' }}" matTooltipPosition="right"
+              icon="circle" size="lg"></fa-icon>
           </div>
         </td>
       </ng-container>
@@ -78,8 +87,10 @@
       <ng-container matColumnDef="errorLog">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Error Log </th>
         <td mat-cell *matCellDef="let job" class="center">
-          <button mat-icon-button class="errorlog" *ngIf="!(job.lastRunHistory && job.lastRunHistory.status == 'success')" matTooltip="Error Log" matTooltipPosition="right" >
-              <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
+          <button mat-icon-button class="errorlog"
+            *ngIf="!(job.lastRunHistory && job.lastRunHistory.status == 'success')" matTooltip="Error Log"
+            matTooltipPosition="right">
+            <fa-icon icon="exclamation-circle" size="lg"></fa-icon>
           </button>
         </td>
       </ng-container>

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

@@ -9,14 +9,14 @@ import { MatDialog } from '@angular/material/dialog';
 
 /** rxjs Imports */
 import { of } from 'rxjs';
-import { SystemService } from '../system.service';
+import { SystemService } from '../../system.service';
 
 /** Custom Services */
-import { PopoverService } from '../../configuration-wizard/popover/popover.service';
-import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
+import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
 
 /** Custom Dialog Component */
-import { NextStepDialogComponent } from '../../configuration-wizard/next-step-dialog/next-step-dialog.component';
+import { NextStepDialogComponent } from '../../../configuration-wizard/next-step-dialog/next-step-dialog.component';
 
 /**
  * Manage scheduler jobs component.

src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.html

@@ -17,6 +17,16 @@
         <td mat-cell *matCellDef="let jobHistoryData"> {{ jobHistoryData.version }} </td>
       </ng-container>
 
+      <ng-container matColumnDef="run_start_time">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Start time </th>
+        <td mat-cell *matCellDef="let jobHistoryData">{{ jobHistoryData.jobRunStartTime | datetimeFormat }}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="run_end_time">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> End time </th>
+        <td mat-cell *matCellDef="let jobHistoryData">{{ jobHistoryData.jobRunEndTime | datetimeFormat }}</td>
+      </ng-container>
+
       <ng-container matColumnDef="status">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
         <td mat-cell *matCellDef="let jobHistoryData">

src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component.ts

@@ -17,7 +17,7 @@ export class ViewHistorySchedulerJobComponent implements OnInit {
   /** Job History data. */
   jobHistoryData: any;
   /** Columns to be displayed in Scheduler Job History. */
-  displayedColumns: string[] = ['version', 'run_start_time', 'status', 'run_type', 'error_log'];
+  displayedColumns: string[] = ['version', 'run_start_time', 'run_end_time', 'status', 'run_type', 'error_log'];
   /** Data source for Scheduler Job History table. */
   dataSource: MatTableDataSource<any>;
 

src/app/system/manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.resolver.ts

@@ -6,7 +6,7 @@ import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable, forkJoin } from 'rxjs';
 
 /** Custom Services */
-import { SystemService } from '../../system.service';
+import { SystemService } from '../../../system.service';
 
 /**
  * View History Scheduler Jobs data resolver.

src/app/system/manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.resolver.ts

@@ -3,10 +3,10 @@ import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 
 /** rxjs Imports */
-import { Observable, forkJoin } from 'rxjs';
+import { Observable } from 'rxjs';
 
 /** Custom Services */
-import { SystemService } from '../../system.service';
+import { SystemService } from '../../../system.service';
 
 /**
  * Selected Scheduler Jobs data resolver.

src/app/system/manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component.html

@@ -0,0 +1,37 @@
+<ngx-graph [view]="diagramSize" [links]="links" [nodes]="nodes" [curve]="curve" [layout]="layout"
+  [nodeHeight]="100" [layoutSettings]="layoutSettings" [enableZoom]="true" [center$]="center$">
+  <ng-template #defsTemplate>
+    <svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
+      <svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
+    </svg:marker>
+  </ng-template>
+
+  <ng-template #nodeTemplate let-node>
+    <svg:g class="node" xmlns="http://www.w3.org/2000/xhtml" width="150" height="100">
+      <svg:foreignObject width="150" height="100">
+        <xhtml:div class="card-container" xmlns="http://www.w3.org/1999/xhtml">
+          <label class="name">{{ node.data.name }}</label>
+          <label>{{ node.data.order }}</label>
+        </xhtml:div>
+      </svg:foreignObject>
+    </svg:g>
+  </ng-template>
+
+  <ng-template #linkTemplate let-link>
+    <svg:g class="edge">
+      <svg:path class="line" stroke-width="2" marker-end="url(#arrow)"></svg:path>
+      <svg:text class="edge-label" text-anchor="middle">
+        <textPath class="text-path" [attr.href]="'#' + link.id" [style.dominant-baseline]="link.dominantBaseline"
+          startOffset="50%">
+          {{ link.label }}
+        </textPath>
+      </svg:text>
+    </svg:g>
+    <svg:g class="link-midpoint" *ngIf="link.midPoint"
+      [attr.transform]="'translate(' + link.midPoint.x + ',' + link.midPoint.y + ')'">
+      <ellipse rx="30" ry="10" />
+      <svg:text alignment-baseline="central">{{ link.data.linkText }}</svg:text>
+    </svg:g>
+  </ng-template>
+
+</ngx-graph>

src/app/system/manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component.scss

@@ -0,0 +1,40 @@
+:host ::ng-deep {
+  display: block;
+  height: inherit;
+  width: inherit;
+
+  .card-container {
+    height: 100;
+    min-width: 150;
+    display: block;
+    fill: #d7dada;
+    border: #000;
+
+    .name {
+      font-size: 12px;
+    }
+
+    label {
+      display: block;
+      text-align: center;
+      font-size: 20px;
+      margin-top: 4px;
+      margin-bottom: 8px;
+    }
+  }
+
+  .link-midpoint {
+    ellipse {
+      fill: white;
+      stroke: black;
+      stroke-width: 1;
+    }
+
+    text {
+      stroke: transparent;
+      fill: black;
+      text-anchor: middle;
+      font-size: 8px;
+    }
+  }
+}

src/app/system/manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component.spec.ts

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

src/app/system/manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component.ts

@@ -0,0 +1,74 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DagreNodesOnlyLayout, Edge, Layout, Node } from '@swimlane/ngx-graph';
+import * as shape from 'd3-shape';
+import { Subject } from 'rxjs';
+
+
+export class JobStep {
+  id: number;
+  stepName: string;
+  order: number;
+}
+
+@Component({
+  selector: 'mifosx-workflow-diagram',
+  templateUrl: './workflow-diagram.component.html',
+  styleUrls: ['./workflow-diagram.component.scss']
+})
+export class WorkflowDiagramComponent implements OnInit {
+  @Input() jobStepsData: JobStep[] = [];
+
+  diagramSize: [number, number] = [1024, 300];
+  public nodes: Node[] = [];
+  public links: Edge[] = [];
+  public layoutSettings = {
+    orientation: 'LR'
+  };
+  public curve: any = shape.curveLinear;
+  public layout: Layout = new DagreNodesOnlyLayout();
+  colorScheme = {
+    domain: ['#5AA454', '#A10A28', '#C7B42C']
+  };
+  center$ = new Subject<any>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+    let nodeCounter = 0;
+    for (const jobStep of this.jobStepsData) {
+      const currentNode = `node_${jobStep.order}`;
+      const node: Node = {
+        id: currentNode,
+        label: jobStep.stepName,
+        data: {
+          name: jobStep.stepName,
+          order: jobStep.order
+        }
+      };
+      this.nodes.push(node);
+
+      if (nodeCounter > 0) {
+        const edge: Edge = {
+          id: `link_${(jobStep.id)}`,
+          source: `node_${(jobStep.order - 1)}`,
+          target: currentNode,
+          label: '',
+          data: {
+            linkText: 'Precedes of'
+          }
+        };
+
+        this.links.push(edge);
+      }
+
+      nodeCounter++;
+    }
+    // trigger center
+    this.center$.next();
+  }
+
+  public getStyles(node: Node): any {
+      return 'node_odd';
+  }
+
+}

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

@@ -0,0 +1,62 @@
+<div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+  <mat-form-field fxFlex="31%">
+    <mat-label>Job Name</mat-label>
+    <mat-select [formControl]="jobName" (selectionChange)="getWorkflowJobSteps($event.value)">
+      <mat-option *ngFor="let job of jobNameOptions" [value]="job">
+        {{ job }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <div class="action-button" fxLayoutGap="25px" *ngIf="jobStepsData.length > 0">
+    <button mat-raised-button color="primary">
+      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Link Job Step
+    </button>
+  </div>
+
+  <div class="mat-elevation-z8 container" *ngIf="jobStepsData.length > 0">
+
+    <table mat-table [dataSource]="jobStepsData" #table cdkDropList [cdkDropListData]="jobStepsData"
+      (cdkDropListDropped)="dropTable($event)">
+
+      <ng-container matColumnDef="stepName">
+        <th mat-header-cell *matHeaderCellDef> Step Name </th>
+        <td mat-cell *matCellDef="let jobStep"> {{ jobStep.stepName }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="stepOrder">
+        <th mat-header-cell *matHeaderCellDef> Order </th>
+        <td mat-cell *matCellDef="let jobStep"> {{ jobStep.order }} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef> Actions </th>
+        <td mat-cell *matCellDef="let row; let rowIndex = index">
+          <button type="button" mat-icon-button color="warn" (click)="removeJobStep(rowIndex)" matTooltip="Delete"
+            matTooltipPosition="left">
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row cdkDrag [cdkDragData]="row" *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+
+  <div *ngIf="stepOrderHasChanged" fxLayout="row" class="container margin-t space-top" fxLayout.xs="column"
+    fxLayoutAlign="center" fxLayoutGap="2%">
+    <button mat-raised-button [routerLink]="['../']">
+      Cancel
+    </button>
+    <button mat-raised-button color="primary" (click)="saveChanges()">
+      Apply Changes
+    </button>
+  </div>
+
+  <div class="container space-top" *ngIf="jobStepsData.length > 0 && !stepOrderHasChanged">
+    <mifosx-workflow-diagram [jobStepsData]="jobStepsData"></mifosx-workflow-diagram>
+  </div>
+
+</div>

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.scss

@@ -0,0 +1,35 @@
+.container {
+  margin: auto !important;
+}
+
+.workflow-graph {
+  min-height: 400px;
+}
+
+.space-top {
+  margin-top: 20px !important;
+}
+
+.space-bottom {
+  margin-bottom: 20px !important;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.component.spec.ts

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

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

@@ -0,0 +1,97 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { MatTable } from '@angular/material/table';
+import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
+import { SystemService } from 'app/system/system.service';
+import { JobStep } from './workflow-diagram/workflow-diagram.component';
+
+@Component({
+  selector: 'mifosx-workflow-jobs',
+  templateUrl: './workflow-jobs.component.html',
+  styleUrls: ['./workflow-jobs.component.scss']
+})
+export class WorkflowJobsComponent implements OnInit {
+  stepOrderHasChanged = false;
+
+  jobNameOptions: any = [];
+  jobStepsData: any = [];
+  jobStepsDataBase: any = [];
+  jobStepName: String = null;
+
+  jobName = new FormControl('', Validators.required);
+
+  @ViewChild('table') table: MatTable<JobStep>;
+
+  /** Columns to be displayed in the table. */
+  displayedColumns: string[] = ['stepName', 'stepOrder', 'actions'];
+
+  constructor(private systemService: SystemService,
+    public dialog: MatDialog) {}
+
+  ngOnInit(): void {
+    this.systemService.getWorkflowJobNames().toPromise()
+    .then(jobNames => {
+      this.jobNameOptions = jobNames;
+    });
+  }
+
+  /**
+   * Get the Workflow Job steps data
+   * @param {string} jobName Value to Workflow Job name.
+   */
+  getWorkflowJobSteps(jobName: string) {
+    this.systemService.getWorkflowJobSteps(jobName).toPromise()
+    .then(data => {
+      this.jobStepName = jobName;
+      this.jobStepsData = data.businessSteps.sort(function (a: JobStep, b: JobStep) {
+        return a.order - b.order;
+      });
+      this.jobStepsDataBase = this.jobStepsData;
+    });
+  }
+
+  dropTable(event: CdkDragDrop<JobStep[]>) {
+    const prevIndex = this.jobStepsData.findIndex((d: JobStep) => d === event.item.data);
+    moveItemInArray(this.jobStepsData, prevIndex, event.currentIndex);
+    this.jobStepsData = [...this.jobStepsData];
+    this.table.renderRows();
+    this.stepOrderHasChanged = true;
+  }
+
+  /**
+   * Delete particular Job Step from Workflow Job
+   */
+  removeJobStep(index: number) {
+    const dialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `this` }
+    });
+    dialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.jobStepsData.splice(index, 1);
+        this.jobStepsData = this.jobStepsData.concat([]);
+        this.jobStepsData = [...this.jobStepsData];
+        this.stepOrderHasChanged = true;
+      }
+    });
+  }
+
+  saveChanges() {
+    // Set the new Order
+    let stepOrder = 1;
+    this.jobStepsData.forEach((jobStep: JobStep) => {
+      jobStep.order = stepOrder++;
+    });
+
+    const payload = {
+      'businessSteps': this.jobStepsData
+    };
+
+    this.systemService.putWorkflowJobSteps(this.jobStepName, payload).toPromise()
+    .then(data => {
+      this.stepOrderHasChanged = false;
+    });
+  }
+
+}

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.resolver.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { WorkflowJobResolver } from './workflow-jobs.resolver';
+
+describe('WorkflowJobResolver', () => {
+  let resolver: WorkflowJobResolver;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    resolver = TestBed.inject(WorkflowJobResolver);
+  });
+
+  it('should be created', () => {
+    expect(resolver).toBeTruthy();
+  });
+});

src/app/system/manage-jobs/workflow-jobs/workflow-jobs.resolver.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+import { SystemService } from 'app/system/system.service';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class WorkflowJobResolver implements Resolve<boolean> {
+
+  /**
+   * @param {SystemService} systemService System service.
+   */
+   constructor(private systemService: SystemService) {}
+
+   /**
+    * Returns the Configuration data.
+    * @returns {Observable<any>}
+    */
+   resolve(route: ActivatedRouteSnapshot): Observable<any> {
+     return this.systemService.getWorkflowJobNames();
+   }
+
+}

src/app/system/system-routing.module.ts

@@ -26,7 +26,6 @@ import { ManageSurveysComponent } from './manage-surveys/manage-surveys.componen
 import { CreateSurveyComponent } from './manage-surveys/create-survey/create-survey.component';
 import { ViewSurveyComponent } from './manage-surveys/view-survey/view-survey.component';
 import { EditSurveyComponent } from './manage-surveys/edit-survey/edit-survey.component';
-import { ManageSchedulerJobsComponent } from './manage-scheduler-jobs/manage-scheduler-jobs.component';
 import { AmazonS3Component } from './external-services/amazon-s3/amazon-s3.component';
 import { EmailComponent } from './external-services/email/email.component';
 import { SMSComponent } from './external-services/sms/sms.component';
@@ -60,7 +59,6 @@ import { HookResolver } from './manage-hooks/view-hook/hook.resolver';
 import { HooksTemplateResolver } from './manage-hooks/hooks-template.resolver';
 import { RolesAndPermissionsResolver } from './roles-and-permissions/roles-and-permissions.resolver';
 import { ManageSurveysResolver } from './manage-surveys/manage-surveys.resolver';
-import { ManageSchedulerJobsResolver } from './manage-scheduler-jobs/manage-scheduler-jobs.resolver';
 import { GlobalConfigurationsResolver } from './configurations/global-configurations-tab/global-configurations.resolver';
 import { AmazonS3ConfigurationResolver } from './external-services/amazon-s3/amazon-s3.resolver';
 import { EmailConfigurationResolver } from './external-services/email/email.resolver';
@@ -75,19 +73,20 @@ import { ReportsResolver } from './manage-reports/reports.resolver';
 import { ReportResolver } from './manage-reports/report.resolver';
 import { SurveyResolver } from './manage-surveys/survey.resolver';
 import { ReportTemplateResolver } from './manage-reports/report-template.resolver';
-import { ViewSchedulerJobComponent } from './manage-scheduler-jobs/view-scheduler-job/view-scheduler-job.component';
-import { ViewSchedulerJobResolver } from './manage-scheduler-jobs/view-scheduler-job/view-scheduler-job.resolver';
-import { EditSchedulerJobComponent } from './manage-scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component';
-import { ManageSchedulerJobResolver } from './manage-scheduler-jobs/manage-scheduler-job.resolver';
+import { ViewSchedulerJobComponent } from './manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component';
+import { ViewSchedulerJobResolver } from './manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.resolver';
+import { EditSchedulerJobComponent } from './manage-jobs/scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component';
+import { ManageSchedulerJobResolver } from './manage-jobs/scheduler-jobs/manage-scheduler-job.resolver';
 import { ViewRoleResolver } from './roles-and-permissions/view-role/view-role.resolver';
 import { EntityToEntityMappingResolver } from './entity-to-entity-mapping/entity-to-entity-mapping.resolver';
 import { ConfigureMakerCheckerTasksComponent } from './configure-maker-checker-tasks/configure-maker-checker-tasks.component';
 import { MakerCheckerTasksResolver } from './configure-maker-checker-tasks/configure-maker-checker-tasks.resolver';
-import { ViewHistorySchedulerJobComponent } from './manage-scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component';
-import { ViewHistorySchedulerJobsResolver } from './manage-scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.resolver';
+import { ViewHistorySchedulerJobComponent } from './manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component';
+import { ViewHistorySchedulerJobsResolver } from './manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.resolver';
 import { ConfigurationsComponent } from './configurations/configurations.component';
 import { GlobalConfigurationResolver } from './configurations/global-configurations-tab/global-configuration.resolver';
 import { EditConfigurationComponent } from './configurations/global-configurations-tab/edit-configuration/edit-configuration.component';
+import { ManageJobsComponent } from './manage-jobs/manage-jobs.component';
 
 const routes: Routes = [
   Route.withShell([
@@ -416,12 +415,12 @@ const routes: Routes = [
           ]
         },
         {
-          path: 'scheduler-jobs',
-          data: { title: extract('Manage Scheduler Jobs'), breadcrumb: 'Manage Scheduler Jobs' },
+          path: 'manage-jobs',
+          data: { title: extract('Manage Scheduler and COB Jobs'), breadcrumb: 'Manage Scheduler and COB Jobs' },
           children: [
             {
               path: '',
-              component: ManageSchedulerJobsComponent,
+              component: ManageJobsComponent,
               resolve: {},
             },
             {
@@ -601,7 +600,6 @@ const routes: Routes = [
     RolesAndPermissionsResolver,
     ManageSurveysResolver,
     SurveyResolver,
-    ManageSchedulerJobsResolver,
     GlobalConfigurationsResolver,
     GlobalConfigurationResolver,
     AmazonS3ConfigurationResolver,

src/app/system/system.component.html

@@ -88,27 +88,22 @@
             <p matLine>Audit logs of all the activities, such as create client, disburse loans etc</p>
           </mat-list-item>
 
-          <div #manageReports>
-            <mat-list-item [routerLink]="['reports']">
-              <mat-icon matListIcon>
-                <fa-icon icon="file-word" size="sm"></fa-icon>
-              </mat-icon>
-              <h4 matLine>Manage Reports</h4>
-              <p matLine>Add new report and classify reports</p>
-            </mat-list-item>
-          </div>
+          <mat-list-item [routerLink]="['reports']">
+            <mat-icon matListIcon>
+              <fa-icon icon="file-word" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Manage Reports</h4>
+            <p matLine>Add new report and classify reports</p>
+          </mat-list-item>
 
-          <div #schedulerJobs>
-            <mat-list-item [routerLink]="['scheduler-jobs']">
-              <mat-icon matListIcon>
-                <fa-icon icon="clock" size="sm"></fa-icon>
-              </mat-icon>
-              <h4 matLine>Scheduler Jobs</h4>
-              <p matLine>Schedule a job, modify or delete jobs</p>
-            </mat-list-item>
-          </div>
+          <mat-list-item [routerLink]="['manage-jobs']">
+            <mat-icon matListIcon>
+              <fa-icon icon="clock" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Manage Jobs</h4>
+            <p matLine>Manage Schedule and Workflow jobs, modify jobs or view history and logs</p>
+          </mat-list-item>
 
-        <div #configurations>
           <mat-list-item [routerLink]="['configurations']">
             <mat-icon matListIcon>
               <fa-icon icon="cogs" size="sm"></fa-icon>
@@ -116,8 +111,6 @@
             <h4 matLine>Configurations</h4>
             <p matLine>Global configurations, Cache and Business Date settings</p>
           </mat-list-item>
-        </div>
-
 
           <mat-list-item [routerLink]="['account-number-preferences']">
             <mat-icon matListIcon>

src/app/system/system.module.ts

@@ -22,7 +22,6 @@ import { AddRoleComponent } from './roles-and-permissions/add-role/add-role.comp
 import { ManageSurveysComponent } from './manage-surveys/manage-surveys.component';
 import { ViewSurveyComponent } from './manage-surveys/view-survey/view-survey.component';
 import { CreateSurveyComponent } from './manage-surveys/create-survey/create-survey.component';
-import { ManageSchedulerJobsComponent } from './manage-scheduler-jobs/manage-scheduler-jobs.component';
 import { EditConfigurationComponent } from './configurations/global-configurations-tab/edit-configuration/edit-configuration.component';
 import { AmazonS3Component } from './external-services/amazon-s3/amazon-s3.component';
 import { EmailComponent } from './external-services/email/email.component';
@@ -45,7 +44,7 @@ import { EditReportComponent } from './manage-reports/edit-report/edit-report.co
 import { AuditTrailsComponent } from './audit-trails/audit-trails.component';
 import { ViewAuditComponent } from './audit-trails/view-audit/view-audit.component';
 import { ColumnDialogComponent } from './manage-data-tables/column-dialog/column-dialog.component';
-import { ViewHistorySchedulerJobComponent } from './manage-scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component';
+import { ViewHistorySchedulerJobComponent } from './manage-jobs/scheduler-jobs/view-history-scheduler-job/view-history-scheduler-job.component';
 import { EditHookComponent } from './manage-hooks/edit-hook/edit-hook.component';
 import { ViewHookComponent } from './manage-hooks/view-hook/view-hook.component';
 import { CreateHookComponent } from './manage-hooks/create-hook/create-hook.component';
@@ -56,19 +55,29 @@ import { EntityToEntityMappingComponent } from './entity-to-entity-mapping/entit
 /** Dialog Component Imports */
 import { ReportParameterDialogComponent } from './manage-reports/report-parameter-dialog/report-parameter-dialog.component';
 import { AddEventDialogComponent } from './manage-hooks/add-event-dialog/add-event-dialog.component';
-import { ViewSchedulerJobComponent } from './manage-scheduler-jobs/view-scheduler-job/view-scheduler-job.component';
-import { EditSchedulerJobComponent } from './manage-scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component';
+import { ViewSchedulerJobComponent } from './manage-jobs/scheduler-jobs/view-scheduler-job/view-scheduler-job.component';
+import { EditSchedulerJobComponent } from './manage-jobs/scheduler-jobs/edit-scheduler-job/edit-scheduler-job.component';
 import { ConfigureMakerCheckerTasksComponent } from './configure-maker-checker-tasks/configure-maker-checker-tasks.component';
 import { EditSurveyComponent } from './manage-surveys/edit-survey/edit-survey.component';
 import { BusinessDateTabComponent } from './configurations/business-date-tab/business-date-tab.component';
 import { ConfigurationsComponent } from './configurations/configurations.component';
 import { GlobalConfigurationsTabComponent } from './configurations/global-configurations-tab/global-configurations-tab.component';
+import { ManageJobsComponent } from './manage-jobs/manage-jobs.component';
+import { ManageSchedulerJobsComponent } from './manage-jobs/scheduler-jobs/manage-scheduler-jobs.component';
+import { WorkflowDiagramComponent } from './manage-jobs/workflow-jobs/workflow-diagram/workflow-diagram.component';
+import { NgxGraphModule } from '@swimlane/ngx-graph';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { WorkflowJobsComponent } from './manage-jobs/workflow-jobs/workflow-jobs.component';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 @NgModule({
   imports: [
     SystemRoutingModule,
     SharedModule,
     PipesModule,
+    NgxGraphModule,
+    BrowserAnimationsModule,
+    DragDropModule,
     DirectivesModule
   ],
   declarations: [
@@ -85,7 +94,6 @@ import { GlobalConfigurationsTabComponent } from './configurations/global-config
     ManageHooksComponent,
     RolesAndPermissionsComponent,
     ManageSurveysComponent,
-    ManageSchedulerJobsComponent,
     EditConfigurationComponent,
     AmazonS3Component,
     EmailComponent,
@@ -125,7 +133,11 @@ import { GlobalConfigurationsTabComponent } from './configurations/global-config
     EditSurveyComponent,
     BusinessDateTabComponent,
     ConfigurationsComponent,
-    GlobalConfigurationsTabComponent
+    GlobalConfigurationsTabComponent,
+    ManageJobsComponent,
+    ManageSchedulerJobsComponent,
+    WorkflowJobsComponent,
+    WorkflowDiagramComponent
   ],
 })
 export class SystemModule { }

src/app/system/system.service.ts

@@ -247,6 +247,27 @@ export class SystemService {
     return this.http.get('/jobs');
   }
 
+  /**
+   * @returns {Observable<any>} Fetches Jobs.
+   */
+  getWorkflowJobNames(): Observable<any> {
+    return this.http.get('/jobs/names');
+  }
+
+  /**
+   * @returns {Observable<any>} Fetches Jobs.
+   */
+  getWorkflowJobSteps(jobName: String): Observable<any> {
+    return this.http.get(`/jobs/${jobName}/steps`);
+  }
+
+  /**
+   * @returns {Observable<any>} Fetches Jobs.
+   */
+  putWorkflowJobSteps(jobName: String, payload: any): Observable<any> {
+    return this.http.put(`/jobs/${jobName}/steps`, payload);
+  }
+
   /**
    * @returns {Observable<any>} Fetches Scheduler.
    */