save and query workflow definition

add in memory web api to mock backend rest api to save and load workflow definition.

Issue-ID: SDC-257

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

14 files changed, 333 insertions, 19 deletions

diff --git a/sdc-workflow-designer-ui/src/app/app.component.html b/sdc-workflow-designer-ui/src/app/app.component.html
index f09e0a73..f666c1b7 100644
--- a/sdc-workflow-designer-ui/src/app/app.component.html
+++ b/sdc-workflow-designer-ui/src/app/app.component.html
@@ -17,6 +17,6 @@
 <b4t-toolbar></b4t-toolbar>
 
 <div id="container" class="container">
-    <b4t-node *ngFor="let node of getNodes(); let last = last;" [node]="node" [last]="last"></b4t-node>
+    <b4t-node *ngFor="let node of getWorkflow()?.nodes; let last = last;" [node]="node" [last]="last"></b4t-node>
 </div>
 
diff --git a/sdc-workflow-designer-ui/src/app/app.component.ts b/sdc-workflow-designer-ui/src/app/app.component.ts
index b02ce675..59b457f9 100644
--- a/sdc-workflow-designer-ui/src/app/app.component.ts
+++ b/sdc-workflow-designer-ui/src/app/app.component.ts
@@ -10,21 +10,31 @@
  *     ZTE - initial API and implementation and/or initial documentation
  */
 
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, OnInit } from '@angular/core';
 import { JsPlumbService } from "./services/jsplumb.service";
 import { WorkflowService } from "./services/workflow.service";
 import { WorkflowNode } from "./model/workflow-node";
+import { Workflow } from "./model/workflow";
+import { DataAccessService } from "./services/data-access/data-access.service";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements AfterViewInit {
-    constructor(private jsplumbService: JsPlumbService, private workflowService: WorkflowService) {}
+export class AppComponent implements AfterViewInit, OnInit {
+    constructor(private jsplumbService: JsPlumbService,
+        private dataAccessService: DataAccessService,
+        private workflowService: WorkflowService) {}
 
-    public getNodes(): WorkflowNode[] {
-        return this.workflowService.getNodes();
+    ngOnInit(): void {
+        this.dataAccessService.catalogService.loadWorkflow('workflow1').subscribe(workflow => {
+            this.workflowService.workflow = workflow;
+        });
+    }
+
+    public getWorkflow(): Workflow {
+        return this.workflowService.workflow;
     }
 
     ngAfterViewInit(): void {
diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts
index 3d57ce19..616db2dd 100644
--- a/sdc-workflow-designer-ui/src/app/app.module.ts
+++ b/sdc-workflow-designer-ui/src/app/app.module.ts
@@ -18,6 +18,12 @@ import { JsPlumbService } from "./services/jsplumb.service";
 import { NodeComponent } from "./components/node/node.component";
 import { ToolbarComponent } from "./components/toolbar/toolbar.component";
 import { WorkflowService } from "./services/workflow.service";
+import { DataAccessService } from "./services/data-access/data-access.service";
+import { HttpService } from "./util/http.service";
+import { SharedModule } from "./shared/shared.module";
+import { InMemoryWebApiModule } from "angular-in-memory-web-api";
+import { InMemoryDataService } from "./services/data-access/in-memory-data.service";
+import { HttpModule } from "@angular/http";
 
 @NgModule({
     declarations: [
@@ -26,9 +32,17 @@ import { WorkflowService } from "./services/workflow.service";
         ToolbarComponent,
     ],
     imports: [
-        BrowserModule
+        BrowserModule,
+        HttpModule,
+        InMemoryWebApiModule.forRoot(InMemoryDataService),
+        SharedModule,
+    ],
+    providers: [
+        DataAccessService,
+        HttpService,
+        JsPlumbService,
+        WorkflowService
     ],
-    providers: [JsPlumbService, WorkflowService],
     bootstrap: [AppComponent]
 })
 export class AppModule { }
diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
index 5d028b90..91b935e9 100644
--- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.html
@@ -19,5 +19,7 @@
         <button type="button" class="btn btn-secondary item ui-draggable" [attr.nodeType]="'endEvent'">

             <span>endEvent</span>

         </button>

+

+        <button type="button" class="btn btn-success" (click)="save()">Save</button>

     </div>

 </div>

diff --git a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
index 5fdb6ce5..1e1de191 100644
--- a/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/toolbar/toolbar.component.ts
@@ -13,6 +13,7 @@
 import { AfterViewInit, Component } from '@angular/core';

 

 import { JsPlumbService } from '../../services/jsplumb.service';

+import { WorkflowService } from "../../services/workflow.service";

 

 /**

  * toolbar component contains some basic operations(save) and all of the supported workflow nodes.

@@ -25,11 +26,21 @@ import { JsPlumbService } from '../../services/jsplumb.service';
 })

 export class ToolbarComponent implements AfterViewInit {

 

-    constructor(private jsPlumbService: JsPlumbService) {

+    constructor(private jsPlumbService: JsPlumbService, private workflowService: WorkflowService) {

     }

 

     public ngAfterViewInit() {

         this.jsPlumbService.buttonDraggable();

     }

 

+    public save() {

+        this.workflowService.save().subscribe(success => {

+            if(success) {

+                console.log(`save workflow success`);

+            } else {

+                console.log(`save workflow failed`);

+            }

+        });

+    }

+

 }

diff --git a/sdc-workflow-designer-ui/src/app/model/workflow.ts b/sdc-workflow-designer-ui/src/app/model/workflow.ts
new file mode 100644
index 00000000..672396cf
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/workflow.ts
@@ -0,0 +1,21 @@
+/**

+ * 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 { Injectable } from '@angular/core';

+import { WorkflowNode } from "./workflow-node";

+

+/**

+ * Workflow

+ */

+export class Workflow {

+    constructor(public id: string, public name: string, public nodes: WorkflowNode[]) {}

+}

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
new file mode 100644
index 00000000..5eaf6351
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts
@@ -0,0 +1,31 @@
+/**

+ * 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 { Injectable } from '@angular/core';

+import { WorkflowNode } from "../../model/workflow-node";

+import { Observable } from "rxjs/Observable";

+import { HttpService } from "../../util/http.service";

+import { Workflow } from "../../model/workflow";

+

+/**

+ * CatalogService

+ * provides data access from backend

+ */

+@Injectable()

+export abstract class CatalogService {

+

+    constructor(protected httpService: HttpService) {}

+

+    public abstract loadWorkflow(workflowId: string): Observable<Workflow>;

+

+    public abstract saveWorkflow(workflow: Workflow): Observable<boolean>;

+}

diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/data-access.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/data-access.service.ts
new file mode 100644
index 00000000..451d7a2b
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/services/data-access/data-access.service.ts
@@ -0,0 +1,27 @@
+/**

+ * 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 { Injectable } from '@angular/core';

+import { CatalogService } from "./catalog.service";

+import { SdcService } from "./sdc.service";

+import { HttpService } from "../../util/http.service";

+

+/**

+ * DataAccessService

+ * provides data access from backend

+ */

+@Injectable()

+export class DataAccessService {

+    constructor(private httpService: HttpService) {}

+

+    public catalogService: CatalogService = new SdcService(this.httpService);

+}

diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts
new file mode 100644
index 00000000..1609c948
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts
@@ -0,0 +1,33 @@
+/**

+ * 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 { Injectable } from '@angular/core';

+import { InMemoryDbService } from 'angular-in-memory-web-api';

+/**

+ * InMemeoryDataService

+ * Mock backend data

+ */

+export class InMemoryDataService implements InMemoryDbService {

+    createDb() {

+        const workflows = [{

+            id: 'workflow1',

+            name:'workflow1',

+            nodes: []

+        },{

+            id:'workflow2',

+            name: 'workflow2',

+            nodes: []

+        }

+    ];

+        return {workflows};

+    }

+}

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
new file mode 100644
index 00000000..cec6ae25
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts
@@ -0,0 +1,49 @@
+/**

+ * 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 { Injectable } from '@angular/core';

+import { CatalogService } from "./catalog.service";

+import { Observable } from "rxjs/Observable";

+import { WorkflowNode } from "../../model/workflow-node";

+import { HttpService } from "../../util/http.service";

+import { Workflow } from "../../model/workflow";

+

+/**

+ * SdcService

+ * provides data access from sdc

+ */

+@Injectable()

+export class SdcService extends CatalogService {

+

+    constructor(protected httpService: HttpService) {

+        super(httpService);

+    }

+

+    public loadWorkflows(): Observable<WorkflowNode[]> {

+        // TODO load data from sdc

+        const url = 'api/workflows';

+        return this.httpService.get(url);

+    }

+

+    public loadWorkflow(workflowId: string): Observable<Workflow> {

+        // TODO load data from sdc

+        const url = `api/workflows/${workflowId}`;

+        return this.httpService.get(url).map(response => response.data);

+    }

+

+    public saveWorkflow(workflow: Workflow): Observable<boolean> {

+        // TODO save workflow design to sdc

+        const url = `api/workflows/${workflow.id}`;

+        return this.httpService.put(url, JSON.stringify(workflow)).map(() => true);

+    }

+

+}

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 59e1fd54..d9a949ea 100644
--- a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
@@ -12,6 +12,9 @@
 

 import { Injectable } from '@angular/core';

 import { WorkflowNode } from "../model/workflow-node";

+import { DataAccessService } from "./data-access/data-access.service";

+import { Observable } from "rxjs/Observable";

+import { Workflow } from "../model/workflow";

 

 /**

  * WorkflowService

@@ -19,34 +22,41 @@ import { WorkflowNode } from "../model/workflow-node";
  */

 @Injectable()

 export class WorkflowService {

-    public nodes: WorkflowNode[] = [];

 

-    public getNodes(): WorkflowNode[] {

-        return this.nodes;

+    public workflow: Workflow;

+

+    constructor(private dataAccessService: DataAccessService) {

+

+    }

+

+    public save(): Observable<boolean> {

+        return this.dataAccessService.catalogService.saveWorkflow(this.workflow);

     }

 

-    public addNode(name: string, type: string,  top: number, left: number) {

-        this.nodes.push(new WorkflowNode(this.createId(), name, type, top, left));

+    public addNode(name: string, type: string, top: number, left: number): WorkflowNode {

+        const node = new WorkflowNode(this.createId(), name, type, top, left);

+        this.workflow.nodes.push(node);

+        return node;

     }

 

     public deleteNode(nodeId: string): WorkflowNode {

         // delete current node

-        const index = this.nodes.findIndex(node => node.id === nodeId);

+        const index = this.workflow.nodes.findIndex(node => node.id === nodeId);

         if (index !== -1) {

-            const node = this.nodes.splice(index, 1)[0];

+            const node = this.workflow.nodes.splice(index, 1)[0];

             return node;

         }

 

         return undefined;

     }

 

-    public getNode(sourceId: string): WorkflowNode {

-        return this.nodes.find(node => node.id === sourceId);

+    public getNodeById(sourceId: string): WorkflowNode {

+        return this.workflow.nodes.find(node => node.id === sourceId);

     }

 

     private createId() {

         const idSet = new Set();

-        this.nodes.forEach(node => idSet.add(node.id));

+        this.workflow.nodes.forEach(node => idSet.add(node.id));

 

         for (let i = 0; i < idSet.size; i++) {

             if (!idSet.has('node' + i)) {

diff --git a/sdc-workflow-designer-ui/src/app/shared/shared.module.ts b/sdc-workflow-designer-ui/src/app/shared/shared.module.ts
new file mode 100644
index 00000000..baf1dba1
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/shared/shared.module.ts
@@ -0,0 +1,30 @@
+/**
+ * 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 { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { RouterModule } from '@angular/router';
+
+const module = [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+];
+
+@NgModule({
+    imports: module,
+    exports: module,
+})
+
+export class SharedModule {
+}
diff --git a/sdc-workflow-designer-ui/src/app/util/http.service.ts b/sdc-workflow-designer-ui/src/app/util/http.service.ts
new file mode 100644
index 00000000..32669555
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/util/http.service.ts
@@ -0,0 +1,58 @@
+/**
+ * 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 { Injectable } from '@angular/core';
+import { Http, RequestOptionsArgs } from '@angular/http';
+import { Observable } from 'rxjs/Rx';
+import './rxjs-operators';
+
+@Injectable()
+export class HttpService {
+    constructor(private http: Http) {}
+
+    public get(uri: string): Observable<any> {
+        return this.getHttp('get', uri);
+    }
+
+    public post(uri: string, data: any): Observable<any> {
+        return this.getHttp('post', uri, data);
+    }
+
+    public put(uri: string, data: any, options?: RequestOptionsArgs): Observable<any> {
+        return this.getHttp('put', uri, data, options);
+    }
+
+    public delete(uri: string): Observable<any> {
+        return this.getHttp('delete', uri);
+    }
+
+    public getHttp(type: string, uri: string, data?: any, options?: RequestOptionsArgs): Observable<any> {
+        if (data) {
+            return this.http[type](uri, data, options)
+                .map(response =>
+                    response.json()
+                )
+                .catch(this.handleError);
+        } else {
+            return this.http[type](uri, options)
+                .map(response =>
+                    response.json()
+                )
+                .catch(this.handleError);
+        }
+    }
+
+    private handleError(error: any) {
+        const errMsg = (error.message) ? error.message :
+            error.status ? `${error.status}-${error.statusText}` : 'Server error';
+        return Observable.throw(errMsg);
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/util/rxjs-operators.ts b/sdc-workflow-designer-ui/src/app/util/rxjs-operators.ts
new file mode 100644
index 00000000..00fa50b8
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/util/rxjs-operators.ts
@@ -0,0 +1,18 @@
+/**
+ * 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 'rxjs/add/observable/throw';
+import 'rxjs/add/operator/catch';
+import 'rxjs/add/operator/debounceTime';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/switchMap';
+import 'rxjs/add/operator/toPromise';