From 3b9daa6af92637841b8a60a3f4ce0912b3dab240 Mon Sep 17 00:00:00 2001 From: Lvbo163 Date: Sun, 17 Sep 2017 14:54:05 +0800 Subject: Add CRUD operation for workflows Add CRUD and export operation for workflows. Issue-ID: SDC-72 Change-Id: Ie2ef818a6979cc13b9e2dad7cea3b3121727146f Signed-off-by: Lvbo163 --- sdc-workflow-designer-ui/src/app/app.module.ts | 4 ++ .../src/app/components/canvas/canvas.component.ts | 14 +++---- .../src/app/components/menu/menu.component.html | 5 +++ .../src/app/components/menu/menu.component.ts | 45 +++++++++++++++++++- .../menu/workflows/workflows.component.html | 41 ++++++++++++++++++ .../menu/workflows/workflows.component.ts | 48 ++++++++++++++++++++++ .../src/app/services/broadcast.service.ts | 7 ++++ .../app/services/data-access/catalog.service.ts | 1 + .../src/app/services/data-access/sdc.service.ts | 4 +- .../src/app/services/jsplumb.service.ts | 22 +++++++--- .../src/app/services/workflow.service.ts | 36 +++++++++++++++- .../src/app/shared/shared.module.ts | 3 +- sdc-workflow-designer-ui/src/ngict-component.css | 18 ++++---- 13 files changed, 220 insertions(+), 28 deletions(-) create mode 100644 sdc-workflow-designer-ui/src/app/components/menu/workflows/workflows.component.html create mode 100644 sdc-workflow-designer-ui/src/app/components/menu/workflows/workflows.component.ts 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 @@ -->
+ +
+ 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 @@ + + 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(); public jsPlumbInstance$ = this.jsPlumbInstance.asObservable(); + public workflows = new Subject(); + public workflows$ = this.workflows.asObservable(); + + public workflow = new Subject(); + public workflow$ = this.workflow.asObservable(); + public showProperty = new Subject(); 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; + public abstract loadWorkflows(): Observable; public abstract saveWorkflow(workflow: Workflow): Observable; } 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 { + public loadWorkflows(): Observable { // 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 { 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(); 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 { @@ -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, ]; diff --git a/sdc-workflow-designer-ui/src/ngict-component.css b/sdc-workflow-designer-ui/src/ngict-component.css index 32582bbc..f02922fb 100644 --- a/sdc-workflow-designer-ui/src/ngict-component.css +++ b/sdc-workflow-designer-ui/src/ngict-component.css @@ -900,7 +900,7 @@ input::-webkit-input-placeholder { left: 6px; } /*.input-group .form-control { - height: 26px !important; + height: 26px !important; }*/ .input-group { /* width:400px;*/ @@ -1411,29 +1411,29 @@ button { -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); } -/* +/* .alert-success { color: #fff; - background-color: #73cf22; + background-color: #73cf22; border-color:#73cf22; } .alert-info { color: #fff; - background-color: #00abff; - border-color:#00abff; + background-color: #00abff; + border-color:#00abff; } .alert-warning { color: #fff; - background-color: #f7c515; - border-color:#f7c515; + background-color: #f7c515; + border-color:#f7c515; } .alert-danger { color: #fff; background-color: #ff5b55; - border-color:#ff5b55; + border-color:#ff5b55; }*/ .close { color: #f2f2f2; @@ -1514,7 +1514,7 @@ button { z-index: 10000; } .modal .modal-dialog { - max-width: 1000px; + /* max-width: 1000px; */ } .modal .close { color: #bbb; -- cgit 1.2.3-korg