diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/app')
12 files changed, 211 insertions, 19 deletions
diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts index b2bcb742..4ce9eedb 100644 --- a/sdc-workflow-designer-ui/src/app/app.module.ts +++ b/sdc-workflow-designer-ui/src/app/app.module.ts @@ -10,6 +10,7 @@ * ZTE - initial API and implementation and/or initial documentation */ +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { NgxTreeSelectModule } from 'ngx-tree-select'; @@ -47,6 +48,7 @@ import { IntermediateCatchEventComponent } from "./components/property/intermedi import { SequenceFlowComponent } from "./components/sequence-flow/sequence-flow.component"; import { ScriptTaskComponent } from "./components/property/script-task/script-task.component"; import { DragSelectDirective } from "./directive/drag-select/drag-select.directive"; +import { WorkflowsComponent } from "./components/menu/workflows/workflows.component"; @NgModule({ declarations: [ @@ -69,8 +71,10 @@ import { DragSelectDirective } from "./directive/drag-select/drag-select.directi SequenceFlowComponent, StartEventParametersComponent, ToolbarComponent, + WorkflowsComponent, ], imports: [ + BrowserAnimationsModule, BrowserModule, HttpModule, InMemoryWebApiModule.forRoot(InMemoryDataService), diff --git a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts index 5016b50a..f5ccbc98 100644 --- a/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/canvas/canvas.component.ts @@ -46,13 +46,13 @@ export class CanvasComponent implements AfterViewInit { } ngOnInit(): void { - this.route.queryParams.subscribe(params => { - if (params.id) { - this.dataAccessService.catalogService.loadWorkflow(params.id).subscribe(workflow => { - this.workflowService.workflow = workflow; - }); - } - }); + // this.route.queryParams.subscribe(params => { + // if (params.id) { + // this.dataAccessService.catalogService.loadWorkflow(params.id).subscribe(workflow => { + // this.workflowService.workflow = workflow; + // }); + // } + // }); } public ngAfterViewInit() { diff --git a/sdc-workflow-designer-ui/src/app/components/menu/menu.component.html b/sdc-workflow-designer-ui/src/app/components/menu/menu.component.html index 16234898..e54dd4e6 100644 --- a/sdc-workflow-designer-ui/src/app/components/menu/menu.component.html +++ b/sdc-workflow-designer-ui/src/app/components/menu/menu.component.html @@ -13,12 +13,17 @@ --> <div class="btn-right"> + <p-splitButton label="Workflows" icon="fa-check" (onClick)="showWorkflows()" [model]="getWorkflows()"></p-splitButton> <button type="button" class="btn white" (click)="save()"> <i class="fa fa-save"></i>Save </button> <button type="button" class="btn white" (click)="showMicroserviceModal()"> <i class="fa fa-cog"></i>Setting </button> + <button type="button" class="btn white" (click)="download()"> + <i class="fa fa-download"></i>Download + </button> <!-- <button type="button" class="btn white" (click)="test()">test</button> --> </div> <b4t-microservice></b4t-microservice> +<b4t-workflows></b4t-workflows> diff --git a/sdc-workflow-designer-ui/src/app/components/menu/menu.component.ts b/sdc-workflow-designer-ui/src/app/components/menu/menu.component.ts index 2c03cbfc..4183391e 100644 --- a/sdc-workflow-designer-ui/src/app/components/menu/menu.component.ts +++ b/sdc-workflow-designer-ui/src/app/components/menu/menu.component.ts @@ -13,6 +13,9 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import { WorkflowService } from '../../services/workflow.service'; import { MicroserviceComponent } from "./microservice/microservice.component"; +import { WorkflowsComponent } from "./workflows/workflows.component"; +import { BroadcastService } from "../../services/broadcast.service"; +import { Workflow } from "../../model/workflow/workflow"; @Component({ selector: 'b4t-menu', @@ -21,8 +24,10 @@ import { MicroserviceComponent } from "./microservice/microservice.component"; }) export class MenuComponent { @ViewChild(MicroserviceComponent) public microserviceComponent: MicroserviceComponent; + @ViewChild(WorkflowsComponent) public workflowsComponent: WorkflowsComponent; - constructor(private workflowService: WorkflowService) { } + constructor(private broadcastService: BroadcastService, private workflowService: WorkflowService) { + } public save(): void { this.workflowService.save(); @@ -34,4 +39,42 @@ export class MenuComponent { public test() { } + + public showWorkflows() { + this.workflowsComponent.show(); + } + + public getWorkflows(workflow: Workflow) { + const workflows = this.workflowService.getWorkflows(); + if(workflows) { + return workflows.map(workflow => { + return {label: workflow.name, command: () => { + this.workflowSelected(workflow); + }}; + }); + } else { + return []; + } + } + + public workflowSelected(workflow: Workflow) { + this.broadcastService.broadcast(this.broadcastService.workflow, workflow); + } + + public download() { + const filename = this.workflowService.workflow.name + '.json'; + const content = JSON.stringify(this.workflowService.workflow); + // 创建隐藏的可下载链接 + var eleLink = document.createElement('a'); + eleLink.download = filename; + eleLink.style.display = 'none'; + // 字符内容转变成blob地址 + var blob = new Blob([content]); + eleLink.href = URL.createObjectURL(blob); + // 触发点击 + document.body.appendChild(eleLink); + eleLink.click(); + // 然后移除 + document.body.removeChild(eleLink); + } } diff --git a/sdc-workflow-designer-ui/src/app/components/menu/workflows/workflows.component.html b/sdc-workflow-designer-ui/src/app/components/menu/workflows/workflows.component.html new file mode 100644 index 00000000..0a3b51bf --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/menu/workflows/workflows.component.html @@ -0,0 +1,41 @@ +<!--
+/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ * ZTE - initial API and implementation and/or initial documentation
+ */
+-->
+<div class="modal fade" bsModal #workflowsModal="bs-modal" [config]="{backdrop: 'static'}"
+tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+ <div class="modal-dialog">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h4 class="modal-title pull-left">Workflows</h4>
+ <button type="button" class="close pull-right" aria-label="Close" (click)="workflowsModal.hide()">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <ul class="list-group">
+ <li class="list-group-item d-flex justify-content-between align-items-center"
+ *ngFor="let workflow of workflows">
+ <div style="width:380px"><input class="form-control" [(ngModel)]="workflow.name"></div>
+ <div class="badge badge-danger badge-pill" (click)="deleteWorkflow(workflow)">
+ <i class="fa fa-minus"></i>
+ </div>
+ </li>
+ </ul>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn over-grey" (click)="addWorkflow()">Add</button>
+ <button type="button" class="btn over-grey" (click)="workflowsModal.hide()">close</button>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/sdc-workflow-designer-ui/src/app/components/menu/workflows/workflows.component.ts b/sdc-workflow-designer-ui/src/app/components/menu/workflows/workflows.component.ts new file mode 100644 index 00000000..dff73008 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/components/menu/workflows/workflows.component.ts @@ -0,0 +1,48 @@ +/**
+ * Copyright (c) 2017 ZTE Corporation.
+ * All rights reserved. This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v1.0
+ * and the Apache License 2.0 which both accompany this distribution,
+ * and are available at http://www.eclipse.org/legal/epl-v10.html
+ * and http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Contributors:
+ * ZTE - initial API and implementation and/or initial documentation
+ */
+
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { ModalDirective } from 'ngx-bootstrap/modal';
+
+import { WorkflowService } from "../../../services/workflow.service";
+import { Workflow } from "../../../model/workflow/workflow";
+
+/**
+ * workflows component
+ * open a model to set workflow info
+ */
+@Component({
+ selector: 'b4t-workflows',
+ templateUrl: 'workflows.component.html',
+})
+export class WorkflowsComponent {
+ @ViewChild('workflowsModal') public workflowsModal: ModalDirective;
+
+ public workflows: Workflow[];
+
+ constructor(private workflowService: WorkflowService) {
+ }
+
+ public show() {
+ this.workflows = this.workflowService.getWorkflows();
+ this.workflowsModal.show();
+ }
+
+ public deleteWorkflow(workflow: Workflow) {
+ this.workflowService.deleteWorkflow(workflow.name);
+ }
+
+ public addWorkflow() {
+ this.workflowService.addWorkflow();
+ }
+
+}
diff --git a/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts b/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts index ec182b36..dbf52f9f 100644 --- a/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts +++ b/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts @@ -14,6 +14,7 @@ import { Subject } from 'rxjs/Subject'; import { WorkflowNode } from '../model/workflow/workflow-node'; import { SequenceFlow } from "../model/workflow/sequence-flow"; +import { Workflow } from "../model/workflow/workflow"; /** * BroadcastService @@ -26,6 +27,12 @@ export class BroadcastService { public jsPlumbInstance = new Subject<any>(); public jsPlumbInstance$ = this.jsPlumbInstance.asObservable(); + public workflows = new Subject<Workflow[]>(); + public workflows$ = this.workflows.asObservable(); + + public workflow = new Subject<Workflow>(); + public workflow$ = this.workflow.asObservable(); + public showProperty = new Subject<boolean>(); public showProperty$ = this.showProperty.asObservable(); diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts index abd73558..d5d998fe 100644 --- a/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts +++ b/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts @@ -26,6 +26,7 @@ export abstract class CatalogService { constructor(protected httpService: HttpService) {}
public abstract loadWorkflow(workflowId: string): Observable<Workflow>;
+ public abstract loadWorkflows(): Observable<Workflow[]>;
public abstract saveWorkflow(workflow: Workflow): Observable<boolean>;
}
diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts index 02ade955..81efbed9 100644 --- a/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts +++ b/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts @@ -28,10 +28,10 @@ export class SdcService extends CatalogService { super(httpService);
}
- public loadWorkflows(): Observable<WorkflowNode[]> {
+ public loadWorkflows(): Observable<Workflow[]> {
// TODO load data from sdc
const url = 'api/workflows';
- return this.httpService.get(url);
+ return this.httpService.get(url).map(response => response.data);
}
public loadWorkflow(workflowId: string): Observable<Workflow> {
diff --git a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts index 6aa5028a..bf7a6901 100644 --- a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts +++ b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts @@ -27,15 +27,21 @@ export class JsPlumbService { public subscriptionMap = new Map<string, Subscription>();
constructor(private processService: WorkflowProcessService, private broadcastService: BroadcastService) {
+ this.jsplumbInstance = jsp.jsPlumb.getInstance({
+ Container: 'canvas'
+ });
this.initJsPlumbInstance();
+ this.broadcastService.workflow.subscribe(Workflow => {
+ this.jsplumbInstance.reset();
+ this.unsubscriptionAll();
+ this.initJsPlumbInstance();
+ this.buttonDraggable();
+ this.buttonDroppable();
+ });
}
public initJsPlumbInstance() {
- this.jsplumbInstance = jsp.jsPlumb.getInstance({
- Container: 'canvas'
- });
-
this.jsplumbInstance.importDefaults({
Anchor: ['Top', 'RightMiddle', 'LeftMiddle', 'Bottom'],
Connector: [
@@ -119,6 +125,10 @@ export class JsPlumbService { });
}
+ private unsubscriptionAll() {
+ this.subscriptionMap.forEach(subscription => subscription.unsubscribe());
+ }
+
public initNode() {
this.processService.getProcess().forEach(node => {
this.jsplumbInstance.draggable(node.id, {
@@ -154,8 +164,8 @@ export class JsPlumbService { source: sequenceFlow.sourceRef,
target: sequenceFlow.targetRef,
});
- if (sequenceFlow.condition) {
- connection.setLabel(sequenceFlow.condition);
+ if (sequenceFlow.name) {
+ connection.setLabel(sequenceFlow.name);
}
});
}
diff --git a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts index c1eed4af..3f42fa26 100644 --- a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts +++ b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts @@ -14,6 +14,8 @@ import { Injectable } from '@angular/core'; import { DataAccessService } from "./data-access/data-access.service";
import { Observable } from "rxjs/Observable";
import { Workflow } from "../model/workflow/workflow";
+import { Configs } from "../model/workflow/configs";
+import { BroadcastService } from "./broadcast.service";
/**
* WorkflowService
@@ -22,10 +24,16 @@ import { Workflow } from "../model/workflow/workflow"; @Injectable()
export class WorkflowService {
+ public workflows: Workflow[];
public workflow: Workflow;
+ public workflowIndex = 0;
- constructor(private dataAccessService: DataAccessService) {
-
+ constructor(private broadcastService: BroadcastService, private dataAccessService: DataAccessService) {
+ this.dataAccessService.catalogService.loadWorkflows().subscribe(workflows => {
+ this.workflows = workflows;
+ this.broadcastWorkflows();
+ });
+ this.broadcastService.workflow.subscribe(workflow => this.workflow = workflow);
}
public save(): Observable<boolean> {
@@ -33,4 +41,28 @@ export class WorkflowService { console.log(JSON.stringify(this.workflow));
return this.dataAccessService.catalogService.saveWorkflow(this.workflow);
}
+
+ public getWorkflows(): Workflow[] {
+ return this.workflows;
+ }
+
+ public addWorkflow() {
+ this.workflows.push(new Workflow('wf' + this.workflowIndex, '', [], new Configs([])));
+ this.workflowIndex++;
+ this.broadcastWorkflows();
+ }
+
+ public deleteWorkflow(workflowName: string): Workflow {
+ const index = this.workflows.findIndex(workflow => (workflow.name === workflowName));
+ if(index !== -1) {
+ return this.workflows.splice(index, 1)[0];
+ }
+ this.broadcastWorkflows();
+
+ return undefined;
+ }
+
+ public broadcastWorkflows() {
+ this.broadcastService.broadcast(this.broadcastService.workflows, this.workflows);
+ }
}
diff --git a/sdc-workflow-designer-ui/src/app/shared/shared.module.ts b/sdc-workflow-designer-ui/src/app/shared/shared.module.ts index faa4d7dd..448edc62 100644 --- a/sdc-workflow-designer-ui/src/app/shared/shared.module.ts +++ b/sdc-workflow-designer-ui/src/app/shared/shared.module.ts @@ -13,7 +13,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; -import { RadioButtonModule, TreeModule } from 'primeng/primeng'; +import { RadioButtonModule, SplitButtonModule, TreeModule } from 'primeng/primeng'; import { RouterModule } from '@angular/router'; const module = [ @@ -21,6 +21,7 @@ const module = [ FormsModule, RadioButtonModule, RouterModule, + SplitButtonModule, TreeModule, ]; |