Add CRUD operation for workflows

Add CRUD and export operation for workflows.

Issue-ID: SDC-72

Change-Id: Ie2ef818a6979cc13b9e2dad7cea3b3121727146f
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>

13 files changed, 220 insertions, 28 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">&times;</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,
 ];
 
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;