Manage scheduler and cob jobs
This commit is contained in:
Jose Alberto Hernandez
+37
@@ -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>
|
||||
+40
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
+25
@@ -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();
|
||||
});
|
||||
});
|
||||
+74
@@ -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';
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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> 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>
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user