From f093dcdbc4012a64c11a293052afbc74d84c8c5a Mon Sep 17 00:00:00 2001
From: Lvbo163 <lv.bo163@zte.com.cn>
Date: Thu, 11 Jan 2018 19:13:03 +0800
Subject: [PATCH] add backend service

add data access interfaces for template data

Issue-ID: SDC-905

Change-Id: Ie632b00dbc6ede01b0ee8a3c7abdbbc1f476f1e4
Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>
---
 sdc-workflow-designer-ui/src/app/app.component.ts  |   5 +-
 sdc-workflow-designer-ui/src/app/app.module.ts     |  26 ++--
 .../components/container/container.component.css   |  11 +-
 .../components/container/container.component.ts    |   6 +-
 .../src/app/components/menus/menus.component.html  |   2 +-
 .../src/app/components/menus/menus.component.ts    |   8 +-
 .../microservice-detail.component.html             |  49 --------
 .../microservice-detail.component.ts               |  98 ---------------
 .../microservice-list.component.html               |  32 -----
 .../microservice-list.component.ts                 |  80 -------------
 .../menus/microservice/microservice.component.html |  39 ------
 .../menus/microservice/microservice.component.ts   |  46 -------
 .../rest-config-detail.component.html              |  35 ++++++
 .../rest-config-detail.component.ts                |  83 +++++++++++++
 .../rest-config-list.component.css}                |   0
 .../rest-config-list.component.html                |  19 +++
 .../rest-config-list/rest-config-list.component.ts |  57 +++++++++
 .../menus/rest-config/rest-config.component.html   |  26 ++++
 .../menus/rest-config/rest-config.component.ts     |  43 +++++++
 .../menus/workflows/workflows.component.ts         |   4 +-
 .../components/parameter/parameter.component.ts    |   4 +-
 .../error-event.component.html}                    |  12 +-
 .../error-event.component.ts}                      |  22 +---
 .../intermediate-catch-event.component.html        |  14 ++-
 .../node-template/node-template.component.html     |  49 ++++++++
 .../node-template/node-template.component.ts       | 132 +++++++++++++++++++++
 .../components/property/properties.component.css   |   2 +-
 .../components/property/properties.component.html  |   5 +-
 .../components/property/properties.component.ts    |   8 +-
 .../property/rest-task/rest-task.component.html    |   6 +-
 .../property/rest-task/rest-task.component.ts      |   9 +-
 .../script-task/script-task.component.html         |   8 +-
 .../property/script-task/script-task.component.ts  |   2 +
 .../app/components/toolbar/toolbar.component.ts    |  10 +-
 .../src/app/model/rest-config.ts                   |   2 +-
 .../src/app/services/broadcast.service.ts          |  30 +++--
 .../app/services/data-access/catalog.service.ts    |  32 -----
 .../services/data-access/data-access.service.ts    |  27 -----
 .../src/app/services/data-access/sdc.service.ts    |  49 --------
 .../src/app/services/data/backend.service.ts       | 100 ++++++++++++++++
 .../src/app/services/data/data.service.ts          |  79 ++++++++++++
 .../in-memory-data.service.ts                      |  66 +++++++----
 .../app/services/{data-access => data}/mockdata.ts |   0
 .../src/app/services/data/sdc.service.ts           |  86 ++++++++++++++
 .../app/services/{data-access => data}/swagger.ts  |   0
 .../src/app/services/rest.service.ts               |  28 ++---
 .../src/app/services/setting.service.spec.ts       |  15 +++
 .../src/app/services/setting.service.ts            |  21 ++++
 .../src/app/services/workflow.service.ts           |  44 ++++---
 .../src/assets/global-setting.json                 |   3 +
 sdc-workflow-designer-ui/src/ngict-component.css   |  18 +--
 sdc-workflow-designer-ui/src/styles.css            | 104 +++++++++++++---
 52 files changed, 1035 insertions(+), 621 deletions(-)
 delete mode 100644 sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-detail/microservice-detail.component.html
 delete mode 100644 sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-detail/microservice-detail.component.ts
 delete mode 100644 sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-list/microservice-list.component.html
 delete mode 100644 sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-list/microservice-list.component.ts
 delete mode 100644 sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice.component.html
 delete mode 100644 sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice.component.ts
 create mode 100644 sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html
 create mode 100644 sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts
 rename sdc-workflow-designer-ui/src/app/components/menus/{microservice/microservice-list/microservice-list.component.css => rest-config/rest-config-list/rest-config-list.component.css} (100%)
 create mode 100644 sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html
 create mode 100644 sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts
 create mode 100644 sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html
 create mode 100644 sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts
 rename sdc-workflow-designer-ui/src/app/components/property/{start-event-parameters/start-event-parameters.component.html => error-event/error-event.component.html} (59%)
 rename sdc-workflow-designer-ui/src/app/components/property/{start-event-parameters/start-event-parameters.component.ts => error-event/error-event.component.ts} (55%)
 create mode 100644 sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html
 create mode 100644 sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts
 delete mode 100644 sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts
 delete mode 100644 sdc-workflow-designer-ui/src/app/services/data-access/data-access.service.ts
 delete mode 100644 sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts
 create mode 100644 sdc-workflow-designer-ui/src/app/services/data/backend.service.ts
 create mode 100644 sdc-workflow-designer-ui/src/app/services/data/data.service.ts
 rename sdc-workflow-designer-ui/src/app/services/{data-access => data}/in-memory-data.service.ts (95%)
 rename sdc-workflow-designer-ui/src/app/services/{data-access => data}/mockdata.ts (100%)
 create mode 100644 sdc-workflow-designer-ui/src/app/services/data/sdc.service.ts
 rename sdc-workflow-designer-ui/src/app/services/{data-access => data}/swagger.ts (100%)
 create mode 100644 sdc-workflow-designer-ui/src/app/services/setting.service.spec.ts
 create mode 100644 sdc-workflow-designer-ui/src/app/services/setting.service.ts
 create mode 100644 sdc-workflow-designer-ui/src/assets/global-setting.json

diff --git a/sdc-workflow-designer-ui/src/app/app.component.ts b/sdc-workflow-designer-ui/src/app/app.component.ts
index 13035baa..f6573450 100644
--- a/sdc-workflow-designer-ui/src/app/app.component.ts
+++ b/sdc-workflow-designer-ui/src/app/app.component.ts
@@ -23,7 +23,6 @@ import { BroadcastService } from './services/broadcast.service';
     styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-    public isLoading = false;
 
     constructor(translate: TranslateService, private broadcastService: BroadcastService) {
         // Init the I18n function.
@@ -43,8 +42,6 @@ export class AppComponent {
             browserLang = window.navigator.language;
         }
         translate.use(browserLang);
-        this.broadcastService.updateModelRestConfig$.subscribe(model=>{
-            this.isLoading = false;
-        });
+
     }
 }
diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts
index 1864025d..33f98d2b 100644
--- a/sdc-workflow-designer-ui/src/app/app.module.ts
+++ b/sdc-workflow-designer-ui/src/app/app.module.ts
@@ -25,21 +25,17 @@ 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 { DataService } from "./services/data/data.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 { InMemoryDataService } from "./services/data/in-memory-data.service";
 import { HttpModule } from "@angular/http";
 import { RouterModule } from "@angular/router";
 import { BroadcastService } from "./services/broadcast.service";
 import { PropertiesComponent } from "./components/property/properties.component";
-import { StartEventParametersComponent } from "./components/property/start-event-parameters/start-event-parameters.component";
 import { ParameterComponent } from "./components/parameter/parameter.component";
 import { MenusComponent } from "./components/menus/menus.component";
-import { MicroserviceDetailComponent } from "./components/menus/microservice/microservice-detail/microservice-detail.component";
-import { MicroserviceComponent } from "./components/menus/microservice/microservice.component";
-import { MicroserviceListComponent } from "./components/menus/microservice/microservice-list/microservice-list.component";
 import { RestTaskComponent } from "./components/property/rest-task/rest-task.component";
 import { EditablePropertyComponent } from "./components/editable-property/editable-property.component";
 import { SwaggerTreeConverterService } from "./services/swagger-tree-converter.service";
@@ -56,6 +52,12 @@ import { NodeParametersComponent } from './components/node-parameters/node-param
 import { ParameterTreeComponent } from './components/node-parameters/parameter-tree/parameter-tree.component';
 import { NoticeService } from './services/notice.service';
 import { GlobalNoticeComponent } from './components/global-notice/global-notice.component';
+import { SettingService } from './services/setting.service';
+import { ErrorEventComponent } from './components/property/error-event/error-event.component';
+import { NodeTemplateComponent } from './components/property/node-template/node-template.component';
+import { RestConfigComponent } from './components/menus/rest-config/rest-config.component';
+import { RestConfigDetailComponent } from './components/menus/rest-config/rest-config-detail/rest-config-detail.component';
+import { RestConfigListComponent } from './components/menus/rest-config/rest-config-list/rest-config-list.component';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient) {
@@ -66,35 +68,37 @@ export function HttpLoaderFactory(http: HttpClient) {
     declarations: [
         AppComponent,
         ContainerComponent,
+        ErrorEventComponent,
         ResizableDirective,
         EditablePropertyComponent,
         GlobalNoticeComponent,
         IntermediateCatchEventComponent,
         MenusComponent,
-        MicroserviceComponent,
-        MicroserviceDetailComponent,
-        MicroserviceListComponent,
         NodeComponent,
         NodeParametersComponent,
+        NodeTemplateComponent,
         ParameterComponent,
         ParameterTreeComponent,
         PropertiesComponent,
         RestTaskComponent,
+        RestConfigComponent,
+        RestConfigDetailComponent,
+        RestConfigListComponent,
         ScriptTaskComponent,
         StartEventComponent,
         SequenceFlowComponent,
-        StartEventParametersComponent,
         ToolbarComponent,
         WorkflowsComponent,
     ],
     providers: [
         BroadcastService,
-        DataAccessService,
+        DataService,
         HttpService,
         JsPlumbService,
 	ModelService,
         NoticeService,
         RestService,
+        SettingService,
         SwaggerTreeConverterService,
         WorkflowService
     ],
diff --git a/sdc-workflow-designer-ui/src/app/components/container/container.component.css b/sdc-workflow-designer-ui/src/app/components/container/container.component.css
index bc889652..5ba672cc 100644
--- a/sdc-workflow-designer-ui/src/app/components/container/container.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/container/container.component.css
@@ -20,7 +20,16 @@
     user-select: none;
     height: 100%;
     position: relative;
-    overflow: scroll;
+    overflow: auto;
     z-index: 0;
     background-color: white;
 }
+
+#node-selector{
+    /* display: none; */
+    position: absolute;
+    border: 1px dashed black;
+    background-color: #00ABFF;
+    position: absolute;
+    opacity: 0.1;
+}
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/container/container.component.ts b/sdc-workflow-designer-ui/src/app/components/container/container.component.ts
index f35c2482..63ea84d9 100644
--- a/sdc-workflow-designer-ui/src/app/components/container/container.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/container/container.component.ts
@@ -16,6 +16,7 @@ import { SequenceFlow } from '../../model/workflow/sequence-flow';
 import { WorkflowElement } from '../../model/workflow/workflow-element';
 import { WorkflowNode } from '../../model/workflow/workflow-node';
 import { BroadcastService } from '../../services/broadcast.service';
+import { DataService } from '../../services/data/data.service';
 import { JsPlumbService } from '../../services/jsplumb.service';
 import { ModelService } from '../../services/model.service';
 
@@ -39,7 +40,7 @@ export class ContainerComponent implements AfterViewChecked, AfterViewInit, OnIn
     private needInitSequence = false;
 
     constructor(private broadcastService: BroadcastService, private jsPlumbService: JsPlumbService,
-        public modelService: ModelService) {
+        private dataService: DataService, public modelService: ModelService) {
     }
 
     @HostListener('window:keyup.delete', ['$event']) ondelete(event: KeyboardEvent) {
@@ -73,6 +74,9 @@ export class ContainerComponent implements AfterViewChecked, AfterViewInit, OnIn
 
     public ngOnInit() {
         this.jsPlumbService.initJsPlumbInstance(this.modelService.rootNodeId);
+        this.broadcastService.backendServiceReady$.subscribe(() => {
+            this.dataService.initData();
+        });
         this.broadcastService.planModel$.subscribe(() => {
             this.needInitSequence = true;
         });
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html
index 7e043829..ee758fea 100644
--- a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.html
@@ -27,5 +27,5 @@
         </button>
     <!-- <button type="button" class="btn white" (click)="test()">test</button> -->
 </div>
-<b4t-microservice></b4t-microservice>
+<b4t-rest-config></b4t-rest-config>
 <b4t-workflows></b4t-workflows>
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts
index c60e3b25..b58ec089 100644
--- a/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/menus/menus.component.ts
@@ -12,10 +12,10 @@
 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 { PlanModel } from "../../model/plan-model";
+import { RestConfigComponent } from './rest-config/rest-config.component';
 
 @Component({
     selector: 'menus',
@@ -23,9 +23,9 @@ import { PlanModel } from "../../model/plan-model";
     styleUrls: ['./menus.component.css']
 })
 export class MenusComponent {
-    @ViewChild(MicroserviceComponent) public microserviceComponent: MicroserviceComponent;
+    @ViewChild(RestConfigComponent) public microserviceComponent: RestConfigComponent;
     @ViewChild(WorkflowsComponent) public workflowsComponent: WorkflowsComponent;
-    public currentWorkflowId : number;
+    public currentWorkflowId : string;
     public workflows = [];
 
     constructor(private broadcastService: BroadcastService, private workflowService: WorkflowService) {
@@ -56,7 +56,7 @@ export class MenusComponent {
         this.workflowsComponent.show();
     }
 
-    public workflowSelected(planId: number, planModel: PlanModel) {
+    public workflowSelected(planId: string, planModel: PlanModel) {
 
         this.broadcastService.broadcast(this.broadcastService.planModel, planModel);
         this.broadcastService.broadcast(this.broadcastService.planId, planId);
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-detail/microservice-detail.component.html b/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-detail/microservice-detail.component.html
deleted file mode 100644
index d13895dd..00000000
--- a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-detail/microservice-detail.component.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
-/**
- * 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="form-group row">
-    <label class="col-md-2 form-control-label text-md-right">Name</label>
-    <div class="col-md-10">
-        <input class="form-control" [(ngModel)]="microservice.name">
-    </div>
-</div>
-<div class="form-group row">
-    <label class="col-md-2 form-control-label text-md-right">version</label>
-    <div class="col-md-10">
-        <input class="form-control" [(ngModel)]="microservice.version">
-    </div>
-</div>
-<div class="form-group row">
-    <label class="col-md-2 form-control-label text-md-right">Dynamic</label>
-    <div class="col-md-10">
-        <p-radioButton name="dynamic" [value]=true label="true" (ngModelChange)="toggleDynamic($event)" [ngModel]="dynamic"></p-radioButton>
-        <p-radioButton name="dynamic" [value]=false label="false" (ngModelChange)="toggleDynamic($event)" [ngModel]="dynamic"></p-radioButton>
-    </div>
-</div>
-<div *ngIf="dynamic" class="form-group row">
-    <label class="col-md-2 form-control-label text-md-right">Definition</label>
-    <div class="col-md-8" style="padding-right:0px">
-        <input class="form-control" [(ngModel)]="microservice.url">
-    </div>
-    <div class="col-md-2" style="padding-left:0px">
-        <button class="btn" (click)="loadDynamicInfo()">load</button>
-    </div>
-</div>
-
-<div class="form-group row">
-    <label class="col-md-2 form-control-label text-md-right">Detail</label>
-    <div class="col-md-10">
-        <textarea class="form-control" rows="8" [ngModel]="detail" [disabled]="dynamic"
-                  (ngModelChange)="onDetailChanged($event)"></textarea>
-    </div>
-</div>
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-detail/microservice-detail.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-detail/microservice-detail.component.ts
deleted file mode 100644
index c4c9649b..00000000
--- a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-detail/microservice-detail.component.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-/**
- * 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 { Component, Input, OnChanges, ViewChild } from '@angular/core';
-import { ModalDirective } from 'ngx-bootstrap/modal';
-
-import { Swagger } from "../../../../model/swagger";
-import { RestConfig } from '../../../../model/rest-config';
-import { RestService } from '../../../../services/rest.service';
-
-/**
- * toolbar component contains some basic operations(save) and all of the supported workflow nodes.
- * The supported nodes can be dragged to container component. which will add a new node to the workflow.
- */
-@Component({
-    selector: 'b4t-microservice-detail',
-    templateUrl: 'microservice-detail.component.html',
-})
-export class MicroserviceDetailComponent implements OnChanges {
-    @Input() microservice: RestConfig;
-
-    public detail: string;
-    public dynamic = false;
-
-    constructor(private configService: RestService) {
-    }
-
-    public ngOnChanges() {
-        if(this.microservice == null) {
-            this.microservice = new RestConfig('', '', null, '');
-        }
-        this.checkDynamic();
-        this.parseSwagger2String();
-    }
-
-    private checkDynamic() {
-        if(this.microservice.url) {
-            this.dynamic = true;
-        } else {
-            this.dynamic = false;
-        }
-    }
-
-    private parseSwagger2String() {
-        if (this.microservice.swagger) {
-            this.detail = JSON.stringify(this.microservice.swagger);
-        } else {
-            this.detail = '';
-        }
-    }
-
-    public onDetailChanged(detail: string) {
-        try {
-            if(detail) {
-                const swagger = new Swagger(JSON.parse(detail));
-                this.detail = detail;
-                console.log(swagger);
-                this.microservice.swagger = swagger;
-            } else {
-                this.detail = '';
-                this.microservice.swagger = null;
-            }
-        } catch (e) {
-            // if detail is not a json object, then not change the swagger
-        }
-    }
-
-    public toggleDynamic(dynamic: boolean) {
-        this.dynamic = dynamic;
-        this.onDetailChanged(null);
-
-        if(!dynamic) {
-            this.microservice.url = null;
-        }
-    }
-
-    private loadDynamicInfo() {
-        this.configService.getDynamicSwaggerInfo(this.microservice.url)
-        .subscribe(response => {
-            try {
-                this.microservice.swagger = response;
-                this.parseSwagger2String();
-            } catch (e) {
-                console.log('detail transfer error');
-                console.error(e);
-            }
-        });
-    }
-}
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-list/microservice-list.component.html b/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-list/microservice-list.component.html
deleted file mode 100644
index ce4730f7..00000000
--- a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-list/microservice-list.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
-/**
- * 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="scroll" style="overflow:hidden; max-height: 300px; height: 300px;">
-    <div class="card">
-        <div class="card-header d-flex justify-content-between align-items-center">
-            <span>Config List</span>
-            <span class="badge badge-success badge-pill" (click)="addMicroservice()"><i class="fa fa-plus"></i></span>
-        </div>
-
-        <ul class="list-group">
-            <li class="list-group-item d-flex justify-content-between align-items-center"
-                *ngFor="let microservice of microservices; index as i">
-                <div (click)="onMicroserviceSelected(microservice)">{{microservice.name}}</div>
-                <div class="badge badge-danger badge-pill" (click)="deleteMicroservice(i, microservice)">
-                    <i class="fa fa-minus"></i>
-                </div>
-            </li>
-        </ul>
-    </div>
-</div>
-
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-list/microservice-list.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-list/microservice-list.component.ts
deleted file mode 100644
index 6b17f8b7..00000000
--- a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-list/microservice-list.component.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * 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 { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { ModalDirective } from 'ngx-bootstrap/modal';
-
-import { RestConfig } from '../../../../model/rest-config';
-
-/**
- * toolbar component contains some basic operations(save) and all of the supported workflow nodes.
- * The supported nodes can be dragged to container component. which will add a new node to the workflow.
- */
-@Component({
-    selector: 'b4t-microservice-list',
-    templateUrl: 'microservice-list.component.html',
-})
-export class MicroserviceListComponent {
-    @Input() microservices: RestConfig[];
-    @Output() microserviceSelected = new EventEmitter<RestConfig>();
-
-    public onMicroserviceSelected(microservice: RestConfig) {
-        this.microserviceSelected.emit(microservice);
-    }
-
-    public addMicroservice() {
-        const microservice = new RestConfig(this.getConfigId(), 'new microservice', '', null);
-        this.microservices.push(microservice);
-
-        this.onMicroserviceSelected(microservice);
-    }
-
-    public deleteMicroservice(index: number, microservice: RestConfig) {
-        this.deleteMicroService(microservice.name, microservice.version);
-
-        // set the next microservice selected
-        let selectedMicroservice;
-        if (this.microservices.length > 0) {
-            if (this.microservices[index]) {
-                selectedMicroservice = this.microservices[index];
-            } else {
-                selectedMicroservice = this.microservices[index - 1];
-            }
-        }
-        this.onMicroserviceSelected(selectedMicroservice);
-    }
-
-    private deleteMicroService(name: string, version: string) {
-        const index = this.microservices.findIndex(service => (service.name === name && service.version === version));
-        if(index !== -1) {
-            return this.microservices.splice(index, 1)[0];
-        }
-
-        return undefined;
-    }
-
-    private getConfigId(): string {
-        const idSet = new Set<string>();
-        this.microservices.forEach(config => {
-            idSet.add(config.id);
-        });
-
-        for(let index = 0; index < idSet.size; index++) {
-            const id = `config${index}`;
-            if(!idSet.has(id)) {
-                return id;
-            }
-        }
-
-        return `config0`;
-    }
-}
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice.component.html b/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice.component.html
deleted file mode 100644
index e8483c22..00000000
--- a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice.component.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
-/**
- * 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 #microserviceModal="bs-modal" [config]="{backdrop: 'static'}"
-     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h4 class="modal-title pull-left">microservice Setting</h4>
-                <button type="button" class="close pull-right" aria-label="Close" (click)="microserviceModal.hide()">
-                    <span aria-hidden="true">&times;</span>
-                </button>
-            </div>
-            <div class="modal-body">
-                <div class="row">
-                    <div class="col-sm-4">
-                        <b4t-microservice-list [microservices]="microservices" (microserviceSelected)="microserviceSelected($event)"></b4t-microservice-list>
-                    </div>
-                    <div class="col-sm-8">
-                        <b4t-microservice-detail [microservice]="currentMicroservice"></b4t-microservice-detail>
-                    </div>
-                </div>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn over-grey" (click)="microserviceModal.hide()">close</button>
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice.component.ts
deleted file mode 100644
index 5c659313..00000000
--- a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * 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 { MicroserviceListComponent } from './microservice-list/microservice-list.component';
-import { RestService } from '../../../services/rest.service';
-import { RestConfig } from '../../../model/rest-config';
-
-/**
- * microservice component
- * open a model to set microservice info
- */
-@Component({
-    selector: 'b4t-microservice',
-    templateUrl: 'microservice.component.html',
-})
-export class MicroserviceComponent {
-    @ViewChild('microserviceModal') public microserviceModal: ModalDirective;
-
-    public microservices: RestConfig[];
-    public currentMicroservice: RestConfig;
-
-    constructor(private restService: RestService) {
-    }
-
-    public microserviceSelected(microservice: any) {
-        this.currentMicroservice = microservice;
-    }
-
-    public show() {
-        this.microservices = this.restService.getRestConfigs();
-        this.microserviceModal.show();
-    }
-
-}
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html
new file mode 100644
index 00000000..ea0d3c68
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.html
@@ -0,0 +1,35 @@
+<div class="form-group row">
+    <label class="col-md-2 form-control-label text-md-right">Name</label>
+    <div class="col-md-10">
+        <input class="form-control" [(ngModel)]="restConfig.name">
+    </div>
+</div>
+<div class="form-group row">
+    <label class="col-md-2 form-control-label text-md-right">BaseUrl</label>
+    <div class="col-md-10">
+        <input class="form-control" [(ngModel)]="restConfig.url">
+    </div>
+</div>
+<div class="form-group row">
+    <label class="col-md-2 form-control-label text-md-right">Definition</label>
+    <div class="col-md-10">
+        <input class="form-control" [(ngModel)]="restConfig.definition">
+    </div>
+</div>
+<div class="form-group row">
+    <label class="col-md-2 form-control-label text-md-right">Dynamic</label>
+    <div class="col-md-10">
+        <p-radioButton name="dynamic" [value]=true label="true" (ngModelChange)="toggleDynamic($event)"
+                       [ngModel]="restConfig.dynamic"></p-radioButton>
+        <p-radioButton name="dynamic" [value]=false label="false" (ngModelChange)="toggleDynamic($event)"
+                       [ngModel]="restConfig.dynamic"></p-radioButton>
+    </div>
+</div>
+<div class="form-group row">
+    <label class="col-md-2 form-control-label text-md-right">Detail</label>
+    <div class="col-md-10">
+        <textarea class="form-control" [disabled]="restConfig.dynamic" rows="8" [ngModel]="detail"
+                  (ngModelChange)="onDetailChanged($event)"></textarea>
+    </div>
+</div>
+
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts
new file mode 100644
index 00000000..d99a9a10
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-detail/rest-config-detail.component.ts
@@ -0,0 +1,83 @@
+/**
+ * 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 { Component, Input, OnChanges } from '@angular/core';
+import { ModalDirective } from 'ngx-bootstrap/modal';
+
+import { Swagger } from '../../../../model/swagger';
+import { RestConfig } from '../../../../model/rest-config';
+import { RestService } from '../../../../services/rest.service';
+
+/**
+ * toolbar component contains some basic operations(save) and all of the supported workflow nodes.
+ * The supported nodes can be dragged to container component. which will add a new node to the workflow.
+ */
+@Component({
+    selector: 'b4t-rest-config-detail',
+    templateUrl: 'rest-config-detail.component.html',
+})
+export class RestConfigDetailComponent implements OnChanges {
+    @Input() restConfig: RestConfig;
+
+    public detail: string;
+
+    constructor(private restService: RestService) {
+    }
+
+    public ngOnChanges() {
+        if (this.restConfig == null) {
+            this.restConfig = new RestConfig('', '', '', '', '');
+        }
+        this.parseSwagger2String();
+    }
+
+    private parseSwagger2String() {
+        if (this.restConfig.swagger) {
+            this.detail = JSON.stringify(this.restConfig.swagger);
+        } else {
+            this.detail = '';
+        }
+    }
+
+    public onDetailChanged(detail: string) {
+        this.detail = detail;
+
+        let swagger: Swagger = null;
+        try {
+            swagger = new Swagger(JSON.parse(detail));
+            console.log(swagger);
+        } catch (e) {
+            console.log('detail transfer error');
+            console.error(e);
+        }
+        this.restConfig.swagger = swagger;
+    }
+
+    public toggleDynamic(dynamic: boolean) {
+        // this.restConfig.dynamic = dynamic;
+
+        // if (this.restConfig.dynamic && this.restConfig.definition) {
+        //     this.restService.getDynamicSwaggerInfo(this.restConfig.definition)
+        //         .subscribe(response => {
+        //             try {
+        //                 this.restConfig.swagger = new Swagger(response);
+        //                 this.parseSwagger2String();
+        //             } catch (e) {
+        //                 console.log('detail transfer error');
+        //                 console.error(e);
+        //             }
+
+        //         });
+        // }
+    }
+
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-list/microservice-list.component.css b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.css
similarity index 100%
rename from sdc-workflow-designer-ui/src/app/components/menus/microservice/microservice-list/microservice-list.component.css
rename to sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.css
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html
new file mode 100644
index 00000000..aa98bc80
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.html
@@ -0,0 +1,19 @@
+<div class="scroll" style="overflow:hidden; max-height: 300px; height: 300px;">
+    <div class="card">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <span>Config List</span>
+            <span class="badge badge-success badge-pill" (click)="addRestConfig()"><i class="fa fa-plus"></i></span>
+        </div>
+
+        <ul class="list-group">
+            <li class="list-group-item d-flex justify-content-between align-items-center"
+                *ngFor="let restConfig of restService.getRestConfigs(); index as i">
+                <div (click)="onConfigSelected(restConfig)">{{restConfig.name}}</div>
+                <div class="badge badge-danger badge-pill" (click)="deleteRestConfig(i)">
+                    <i class="fa fa-minus"></i>
+                </div>
+            </li>
+        </ul>
+    </div>
+</div>
+
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts
new file mode 100644
index 00000000..59c9c9af
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config-list/rest-config-list.component.ts
@@ -0,0 +1,57 @@
+/**
+ * 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 { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ModalDirective } from 'ngx-bootstrap/modal';
+
+import { Swagger } from '../../../../model/swagger';
+import { RestConfig } from '../../../../model/rest-config';
+import { RestService } from '../../../../services/rest.service';
+
+/**
+ * toolbar component contains some basic operations(save) and all of the supported workflow nodes.
+ * The supported nodes can be dragged to container component. which will add a new node to the workflow.
+ */
+@Component({
+    selector: 'b4t-rest-config-list',
+    templateUrl: 'rest-config-list.component.html',
+})
+export class RestConfigListComponent {
+    @Output() configSelected = new EventEmitter<RestConfig>();
+
+    constructor(public restService: RestService) {
+    }
+
+    public onConfigSelected(restConfig: RestConfig) {
+        this.configSelected.emit(restConfig);
+    }
+
+    public addRestConfig() {
+        const restConfig = this.restService.addRestConfig();
+
+        this.onConfigSelected(restConfig);
+    }
+
+    public deleteRestConfig(index: number) {
+        // this.restService.getRestConfigs().splice(index, 1);
+
+        // let restConfig;
+        // if (this.restService.getRestConfigs().length > 0) {
+        //     if (this.restService.getRestConfigs()[index]) {
+        //         restConfig = this.restService.getRestConfigs()[index];
+        //     } else {
+        //         restConfig = this.restService.getRestConfigs()[index - 1];
+        //     }
+        // }
+        // this.onConfigSelected(restConfig);
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html
new file mode 100644
index 00000000..9bd5bfc0
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.html
@@ -0,0 +1,26 @@
+<div class="modal fade" bsModal #restConfigModal="bs-modal" [config]="{backdrop: 'static'}"
+     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title pull-left">Rest Config Setting</h4>
+                <button type="button" class="close pull-right" aria-label="Close" (click)="restConfigModal.hide()">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="row">
+                    <div class="col-sm-4">
+                        <b4t-rest-config-list (configSelected)="configSelected($event)"></b4t-rest-config-list>
+                    </div>
+                    <div class="col-sm-8">
+                        <b4t-rest-config-detail [restConfig]="currentRestConfig"></b4t-rest-config-detail>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn over-grey" (click)="restConfigModal.hide()">close</button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts
new file mode 100644
index 00000000..6a9c9c22
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/menus/rest-config/rest-config.component.ts
@@ -0,0 +1,43 @@
+/**
+ * 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 { RestService } from '../../../services/rest.service';
+import { RestConfigListComponent } from './rest-config-list/rest-config-list.component';
+
+/**
+ * toolbar component contains some basic operations(save) and all of the supported workflow nodes.
+ * The supported nodes can be dragged to container component. which will add a new node to the workflow.
+ */
+@Component({
+    selector: 'b4t-rest-config',
+    templateUrl: 'rest-config.component.html',
+})
+export class RestConfigComponent {
+    @ViewChild('restConfigModal') public restConfigModal: ModalDirective;
+
+    public currentRestConfig: any = {};
+
+    constructor() {
+    }
+
+    public configSelected(restConfig: any) {
+        this.currentRestConfig = restConfig;
+    }
+
+    public show() {
+        this.restConfigModal.show();
+    }
+
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts b/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts
index c771b535..afacd602 100644
--- a/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/menus/workflows/workflows.component.ts
@@ -27,7 +27,7 @@ import { PlanModel } from "../../../model/plan-model";
 export class WorkflowsComponent {
     @ViewChild('workflowsModal') public workflowsModal: ModalDirective;
 
-    public workflows :Map<number, any>;
+    public workflows :Map<string, any>;
 
     constructor(private workflowService: WorkflowService) {
     }
@@ -44,7 +44,7 @@ export class WorkflowsComponent {
         this.workflowsModal.show();
     }
 
-    public deleteWorkflow(planId: number) {
+    public deleteWorkflow(planId: string) {
         this.workflowService.deleteWorkflow(planId);
     }
 
diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
index 35dfbf1e..31782962 100644
--- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
@@ -15,6 +15,7 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChange
 import { PlanTreeviewItem } from '../../model/plan-treeview-item';
 import { ValueSource } from '../../model/value-source.enum';
 import { Parameter } from '../../model/workflow/parameter';
+import { DataService } from '../../services/data/data.service';
 
 /**
  * this component contains in property component if the corresponding node has parameter properties
@@ -47,7 +48,7 @@ export class ParameterComponent implements OnChanges, OnInit {
     public showValueSource = true;
     public planValue: any = {};
 
-    constructor() { }
+    constructor(private dataService: DataService) { }
 
     public ngOnChanges(changes: SimpleChanges): void {
         // if (changes.canInsert && !changes.canInsert.isFirstChange()) {
@@ -63,6 +64,7 @@ export class ParameterComponent implements OnChanges, OnInit {
         if (1 === this.valueSource.length) {
             this.showValueSource = false;
         }
+        this.topologyOptions = this.dataService.getTopologyProperties();
         // this.valueClass = {
         //     'col-md-7': this.showValueSource,
         //     'col-md-12': !this.showValueSource
diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html
similarity index 59%
rename from sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html
rename to sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html
index d6aaafd8..45abdd0f 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.html
@@ -12,14 +12,4 @@
  *******************************************************************************/
 -->
 
-<div class="form-group row">
-    <div class="col-md-10"></div>
-    <div class="col-md-2">
-        <button (click)="create();" type="button" class="btn blue1 pull-right">
-            <i class="fa fa-plus"></i>
-        </button>
-    </div>
-</div>
-
-<b4t-parameter *ngFor="let param of node.parameters; let i = index;" [param]="param" [canEditName]="true"
-    [valueSource]="sources" [canDelete]="true" (delete)="delete(i)"></b4t-parameter>
\ No newline at end of file
+<b4t-parameter [param]="node.parameter" [valueSource]="sources"></b4t-parameter>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts
similarity index 55%
rename from sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts
rename to sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts
index 65838792..f8a63a15 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/start-event-parameters/start-event-parameters.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/property/error-event/error-event.component.ts
@@ -9,27 +9,17 @@
  * Contributors:
  *     ZTE - initial API and implementation and/or initial documentation
  *******************************************************************************/
-import { Component, Input, ViewChild } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Component, Input } from '@angular/core';
 
 import { ValueSource } from '../../../model/value-source.enum';
 import { Parameter } from '../../../model/workflow/parameter';
-import { StartEvent } from '../../../model/workflow/start-event';
-import { BroadcastService } from '../../../services/broadcast.service';
+import { ErrorEvent } from '../../../model/workflow/error-event';
 
 @Component({
-    selector: 'b4t-start-event-parameters',
-    templateUrl: 'start-event-parameters.component.html',
+    selector: 'b4t-error-event',
+    templateUrl: 'error-event.component.html',
 })
-export class StartEventParametersComponent {
-    @Input() public node: StartEvent;
+export class ErrorEventComponent {
+    @Input() public node: ErrorEvent;
     public sources: ValueSource[] = [ValueSource.String];
-
-    public create(): void {
-        this.node.parameters.push(new Parameter('', '', ValueSource[ValueSource.String]));
-    }
-
-    public delete(index: number): void {
-        this.node.parameters.splice(index, 1);
-    }
 }
diff --git a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html
index f615d9f2..3395a6ee 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/intermediate-catch-event/intermediate-catch-event.component.html
@@ -13,7 +13,7 @@
 -->
 
 <div class="form-group row">
-    <label class="col-md-3 form-control-label text-md-right">Timer Type</label>
+    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_TYPE' | translate}}</label>
     <div class="col-md-9">
         <p-radioButton name="timeType" label="Duration" value="timeDuration" [ngModel]="node.timerEventDefinition.type" (ngModelChange)="timerTypeChange($event)">Duration</p-radioButton>
         <p-radioButton name="timeType" label="Date" value="timeDate" [(ngModel)]="node.timerEventDefinition.type">Date</p-radioButton>
@@ -22,7 +22,7 @@
 </div>
 
 <div *ngIf="node.timerEventDefinition.type === 'timeDuration'" class="form-group row">
-    <label class="col-md-3 form-control-label text-md-right">Duration</label>
+    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DURATION' | translate}}</label>
     <div class="col-md-9">
         <input type="text" class="form-control" [(ngModel)]="node.timerEventDefinition.timeDuration">
         <label>eg: P1Y3M5DT6H7M30S</label>
@@ -30,16 +30,20 @@
 </div>
 
 <div *ngIf="node.timerEventDefinition.type === 'timeDate'" class="form-group row">
-    <label class="col-md-3 form-control-label text-md-right">Date</label>
+    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_DATE' | translate}}</label>
     <div class="col-md-9">
         <input type="text" class="form-control" [(ngModel)]="node.timerEventDefinition.timeDate">
-        <label>eg: 10/10/2099 00:00:03</label>
+        <label>eg: 2007-04-05T12:30-02:00</label>
+        <!--
+        <p-calendar [(ngModel)]="node.timerEventDefinition.timeDate" [showIcon]="true" [showTime]="true" [showSeconds]="true"></p-calendar>
+        -->
     </div>
 </div>
 
 <div *ngIf="node.timerEventDefinition.type === 'timeCycle'" class="form-group row">
-    <label class="col-md-3 form-control-label text-md-right">Cycle</label>
+    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TIMER_CYCLE' | translate}}</label>
     <div class="col-md-9">
         <input type="text"  class="form-control" [(ngModel)]="node.timerEventDefinition.timeCycle">
+        <label>eg: R5/P1Y2M10DT2H30M</label>
     </div>
 </div>
diff --git a/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html
new file mode 100644
index 00000000..5768c0b5
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.html
@@ -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
+ */
+-->
+
+<div class="form-group row">
+    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TOSCA_NODE' | translate}}</label>
+    <div class="col-md-9">
+        <select class="form-control" [ngModel]="node.template.id"
+                (ngModelChange)="node.template.id=$event; nodeTemplateChanged();">
+            <option *ngFor="let template of nodeTemplates" value="{{template.id}}">{{template.name}}</option>
+        </select>
+    </div>
+</div>
+
+<div class="form-group row">
+    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TOSCA_INTERFACE' | translate}}</label>
+    <div class="col-md-9">
+        <select class="form-control" [ngModel]="node.nodeInterface"
+                (ngModelChange)="nodeInterfaceChanged($event);">
+            <option *ngFor="let interface of nodeInterfaces" value="{{interface}}">{{interface}}</option>
+        </select>
+    </div>
+</div>
+
+<div class="form-group row">
+    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.TOSCA_OPERATION' | translate}}</label>
+    <div class="col-md-9">
+        <select class="form-control" [ngModel]="node.operation"
+                (ngModelChange)="nodeOperationChanged($event)">
+            <option *ngFor="let operation of nodeOperations" value="{{operation}}">{{operation}}</option>
+        </select>
+    </div>
+</div>
+<hr>
+
+<b4t-parameter *ngFor="let input of node.input" [param]="input" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter>
+<hr *ngIf="0 < node.input.length">
+<b4t-parameter *ngFor="let output of node.output" [param]="output" [valueSource]= "outputSources" [planItems]="planItems"></b4t-parameter>  
+
diff --git a/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts
new file mode 100644
index 00000000..5d7339d0
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/property/node-template/node-template.component.ts
@@ -0,0 +1,132 @@
+/**
+ * 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, Input } from '@angular/core';
+import { Subscription } from '../../../../../node_modules/rxjs/Subscription.d';
+
+import { PlanTreeviewItem } from '../../../model/plan-treeview-item';
+import { NodeTemplate } from '../../../model/topology/node-template';
+import { ValueSource } from '../../../model/value-source.enum';
+import { Parameter } from '../../../model/workflow/parameter';
+import { ToscaNodeTask } from '../../../model/workflow/tosca-node-task';
+import { BroadcastService } from '../../../services/broadcast.service';
+import { DataService } from '../../../services/data/data.service';
+
+/**
+ * node template component provides operations about tosca modules which saved in winery.
+ * This component will be used in the property component while the corresponding workflow node is calling the node template's operation
+ */
+@Component({
+    selector: 'b4t-node-template',
+    templateUrl: 'node-template.component.html',
+})
+export class NodeTemplateComponent implements AfterViewInit {
+    @Input() public node: ToscaNodeTask;
+    @Input() public planItems: PlanTreeviewItem[];
+
+    public inputSources: ValueSource[] = [ValueSource.String, ValueSource.Variable, ValueSource.Topology, ValueSource.Plan];
+    public outputSources: ValueSource[] = [ValueSource.Topology, ValueSource.Plan];
+    public nodeInterfaces: string[] = [];
+    public nodeOperations: any[] = [];
+    public nodeTemplates: NodeTemplate[] = [];
+
+    constructor(private dataService: DataService) {
+    }
+
+    public ngAfterViewInit() {
+        this.dataService.loadNodeTemplates()
+            .subscribe(nodeTemplates => this.nodeTemplates = nodeTemplates);
+
+        this.loadInterfaces();
+        this.loadOperations();
+    }
+
+    public nodeTemplateChanged() {
+        this.setTemplateNamespace();
+
+        this.nodeInterfaceChanged('');
+
+        this.loadInterfaces();
+    }
+
+    public nodeInterfaceChanged(newInterface: string) {
+        this.node.nodeInterface = newInterface;
+
+        this.nodeOperationChanged('');
+
+        this.loadOperations();
+    }
+
+    public nodeOperationChanged(operation: string) {
+        this.node.operation = operation;
+
+        this.node.input = [];
+        this.node.output = [];
+
+        this.loadParameters();
+    }
+
+    private setTemplateNamespace() {
+        const nodeTemplate = this.nodeTemplates.find(
+            tmpNodeTemplate => tmpNodeTemplate.id === this.node.template.id);
+
+        if (nodeTemplate) {
+            this.node.template.namespace = nodeTemplate.namespace;
+            this.node.template.type = nodeTemplate.type;
+        }
+    }
+
+    private loadInterfaces() {
+        if (this.node.template.id) {
+            this.dataService.loadNodeTemplateInterfaces(this.node.template)
+                .subscribe(interfaces => {
+                    this.nodeInterfaces = interfaces;
+                });
+        } else {
+            this.nodeInterfaces = [];
+        }
+    }
+
+    private loadOperations() {
+        if (this.node.nodeInterface) {
+            this.nodeOperations = [];
+            this.dataService.loadNodeTemplateOperations(
+                this.node.template,
+                this.node.nodeInterface)
+                .subscribe(operations => this.nodeOperations = operations);
+        } else {
+            this.nodeOperations = [];
+        }
+    }
+
+    private loadParameters() {
+        if (this.node.operation) {
+            this.dataService.loadNodeTemplateOperationParameter(
+                this.node.template,
+                this.node.nodeInterface,
+                this.node.operation)
+                .subscribe(params => {
+                    this.node.input = [];
+                    this.node.output = [];
+
+                    params.input.forEach(param => {
+                        const p = new Parameter(param, '', ValueSource[ValueSource.String]);
+                        this.node.input.push(p);
+                    });
+
+                    params.output.forEach(param => {
+                        const p = new Parameter(param, '', ValueSource[ValueSource.Definition]);
+                        this.node.output.push(p);
+                    });
+                });
+        }
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.css b/sdc-workflow-designer-ui/src/app/components/property/properties.component.css
index 4487e0b3..6c8c67d3 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.css
@@ -10,7 +10,7 @@
  *     ZTE - initial API and implementation and/or initial documentation
  */
 
- .wm-properties-wrapper {
+.wm-properties-wrapper {
     background-color: white;
     position: fixed;
     width: 500px;
diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html
index 99f14b56..8aa912d7 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.html
@@ -12,7 +12,7 @@
  */
  -->
 
- <div class="wm-properties-wrapper" *ngIf="show">
+<div class="wm-properties-wrapper" *ngIf="show">
     <div class="form-group row">
         <b4t-editable-property class="col-md-10" [(name)]="node.name"></b4t-editable-property>
         <div class="col-md-2">
@@ -34,6 +34,9 @@
     <hr>
     <div [ngSwitch]="node.type">
         <b4t-start-event *ngSwitchCase="nodeType[nodeType.startEvent]" [node]="node"></b4t-start-event>
+        <b4t-error-event *ngSwitchCase="nodeType[nodeType.errorStartEvent]" [node]="node"></b4t-error-event>
+        <b4t-error-event *ngSwitchCase="nodeType[nodeType.errorEndEvent]" [node]="node"></b4t-error-event>
+        <b4t-node-template *ngSwitchCase="nodeType[nodeType.toscaNodeManagementTask]" [node]="node" [planItems]="planTreeviewItems"></b4t-node-template>
         <b4t-rest-task *ngSwitchCase="nodeType[nodeType.restTask]" [node]="node" [planItems]="planTreeviewItems"></b4t-rest-task>
         <b4t-intermediate-catch-event *ngSwitchCase="nodeType[nodeType.intermediateCatchEvent]" [node]="node"></b4t-intermediate-catch-event>
         <b4t-script-task *ngSwitchCase="nodeType[nodeType.scriptTask]" [node]="node"></b4t-script-task>
diff --git a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts
index c49b4661..56db6583 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/property/properties.component.ts
@@ -12,6 +12,7 @@
 
 import { Component, OnInit } from '@angular/core';
 import { TreeNode } from 'primeng/primeng';
+import { TranslateService } from '@ngx-translate/core';
 
 import { PlanTreeviewItem } from '../../model/plan-treeview-item';
 import { ValueSource } from '../../model/value-source.enum';
@@ -21,6 +22,7 @@ import { WorkflowNode } from '../../model/workflow/workflow-node';
 import { BroadcastService } from '../../services/broadcast.service';
 import { JsPlumbService } from '../../services/jsplumb.service';
 import { ModelService } from '../../services/model.service';
+import { NoticeService } from '../../services/notice.service';
 
 /**
  * property component presents information of a workflow node.
@@ -43,6 +45,8 @@ export class PropertiesComponent implements OnInit {
 
     constructor(private broadcastService: BroadcastService,
         private modelService: ModelService,
+        private translate: TranslateService,
+        private noticeService: NoticeService,
         private jsPlumbService: JsPlumbService) {
 
     }
@@ -59,7 +63,9 @@ export class PropertiesComponent implements OnInit {
                   this.show = true;
                 } catch (error) {
                   this.show = false;
-                    console.log(error);
+                  this.translate.get('WORKFLOW.MSG.SWAGGER_NOT_EXISTS').subscribe((res: string) => {
+                    this.noticeService.error(res);
+                  });
                 }
             } else {
                 this.show = false;
diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html
index 99b8a0f4..089d242d 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.html
@@ -13,7 +13,7 @@
 -->
 
 <div class="form-group row">
-	<label class="col-md-3 form-control-label text-md-right">Service</label>
+	<label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.REST_SERVICE' | translate}}</label>
 	<div class="col-md-9">
 		<select class="form-control" [ngModel]="node.restConfigId" (ngModelChange)="serviceChanged($event)">
 			<option *ngFor="let restConfig of restService.getRestConfigs()" value="{{restConfig.id}}">{{restConfig.id}}</option>
@@ -22,7 +22,7 @@
 </div>
 
 <div class="form-group row">
-	<label class="col-md-3 form-control-label text-md-right">Path</label>
+	<label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.REST_PATH' | translate}}</label>
 	<div class="col-md-9">
 		<select class="form-control" [ngModel]="node.path" (ngModelChange)="pathChanged($event)">
 			<option *ngFor="let interface of restInterfaces" value="{{interface}}">{{interface}}</option>
@@ -31,7 +31,7 @@
 </div>
 
 <div class="form-group row">
-	<label class="col-md-3 form-control-label text-md-right">Method</label>
+	<label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.REST_METHOD' | translate}}</label>
 	<div class="col-md-9">
 		<select class="form-control" [ngModel]="node.method" (ngModelChange)="methodChanged($event)">
 			<option *ngFor="let operation of restOperations" value="{{operation}}">{{operation}}</option>
diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts
index dfb2f0f3..0dccee1e 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task.component.ts
@@ -11,6 +11,7 @@
  *******************************************************************************/
 import { Component, Input, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
+import { TranslateService } from '@ngx-translate/core';
 
 import { PlanTreeviewItem } from '../../../model/plan-treeview-item';
 import { Swagger, SwaggerMethod, SwaggerParameter, SwaggerResponse } from '../../../model/swagger';
@@ -19,6 +20,7 @@ import { ValueType } from '../../../model/value-type.enum';
 import { RestParameter } from '../../../model/workflow/rest-parameter';
 import { RestTask } from '../../../model/workflow/rest-task';
 import { BroadcastService } from '../../../services/broadcast.service';
+import { NoticeService } from '../../../services/notice.service';
 import { RestService } from '../../../services/rest.service';
 import { WorkflowUtil } from '../../../util/workflow-util';
 
@@ -34,7 +36,8 @@ export class RestTaskComponent implements OnInit {
     public restOperations: any = [];
     private swagger: Swagger;
 
-    constructor(private broadcastService: BroadcastService, public restService: RestService) { }
+    constructor(private broadcastService: BroadcastService, public restService: RestService,
+        private noticeService: NoticeService, private translate: TranslateService) { }
 
     public ngOnInit() {
         this.loadInterfaces();
@@ -72,7 +75,9 @@ export class RestTaskComponent implements OnInit {
                 }
                 this.loadOperations();
             } else {
-                console.log('swagger not exist');
+                this.translate.get('WORKFLOW.MSG.SWAGGER_NOT_EXISTS').subscribe((res: string) => {
+                    this.noticeService.error(res);
+                });
             }
         }
     }
diff --git a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html
index 6d2bf1ac..53e253e2 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.html
@@ -13,14 +13,16 @@
 -->
 
 <div class="form-group row">
-    <label class="col-md-3 form-control-label text-md-right">Script Format</label>
+    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.SCRIPT_FORMAT' | translate}}</label>
     <div class="col-md-9">
-        <input class="form-control" type="text" [(ngModel)]="node.scriptFormate">
+        <select class="form-control" [(ngModel)]="node.scriptFormat">
+			<option *ngFor="let script of scriptOperations" value="{{script}}">{{script}}</option>
+		</select>
     </div>
 </div>
 
 <div class="form-group row">
-    <label class="col-md-3 form-control-label text-md-right">Script</label>
+    <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.SCRIPT' | translate}}</label>
     <div class="col-md-9">
         <textarea class="form-control" type="text" rows="20" [(ngModel)]="node.script"></textarea>
     </div>
diff --git a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts
index 9e55ed49..1dd3b7a6 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/property/script-task/script-task.component.ts
@@ -19,4 +19,6 @@ import { ScriptTask } from "../../../model/workflow/script-task";
 })
 export class ScriptTaskComponent {
     @Input() public node: ScriptTask;
+
+    public scriptOperations = ['JavaScript'];
 }
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 c204a19b..dcb93120 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
@@ -12,6 +12,7 @@
 
 import { AfterViewChecked, Component, OnInit } from '@angular/core';
 
+import { DataService } from '../../services/data/data.service';
 import { BroadcastService } from '../../services/broadcast.service';
 import { JsPlumbService } from '../../services/jsplumb.service';
 
@@ -26,11 +27,16 @@ import { JsPlumbService } from '../../services/jsplumb.service';
 })
 export class ToolbarComponent implements AfterViewChecked, OnInit {
     public isCatalog = true;
-    private needInitButton = true;
+    private needInitButton = false;
 
-    constructor(private jsPlumbService: JsPlumbService, private broadcastService: BroadcastService) { }
+    constructor(private jsPlumbService: JsPlumbService, private broadcastService: BroadcastService,
+        private dataService: DataService) { }
 
     public ngOnInit() {
+        this.broadcastService.backendServiceReady$.subscribe(() => {
+            this.isCatalog = 'Catalog' === this.dataService.getBackendType();
+            this.needInitButton = true;
+        });
     }
 
     public ngAfterViewChecked() {
diff --git a/sdc-workflow-designer-ui/src/app/model/rest-config.ts b/sdc-workflow-designer-ui/src/app/model/rest-config.ts
index 42dc46b9..9101bcef 100644
--- a/sdc-workflow-designer-ui/src/app/model/rest-config.ts
+++ b/sdc-workflow-designer-ui/src/app/model/rest-config.ts
@@ -12,6 +12,6 @@
 import { Swagger } from './swagger';
 
 export class RestConfig {
-    constructor(public id: string, public name: string, public version: string, public url: string,
+    constructor(public id: string, public name: string, public version: string, public url: string, public definition: string,
         public swagger?: Swagger) { }
 }
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 4322c32e..af567b9a 100644
--- a/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
@@ -12,11 +12,12 @@
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs/Subject';
 
+import { PlanModel } from '../model/plan-model';
+import { RestConfig } from '../model/rest-config';
+import { Swagger } from '../model/swagger';
+import { SequenceFlow } from '../model/workflow/sequence-flow';
 import { WorkflowNode } from '../model/workflow/workflow-node';
-import { SequenceFlow } from "../model/workflow/sequence-flow";
-import { PlanModel } from "../model/plan-model";
 import { WorkflowElement } from '../model/workflow/workflow-element';
-import { RestConfig } from '../model/rest-config';
 
 /**
  * BroadcastService
@@ -26,30 +27,37 @@ import { RestConfig } from '../model/rest-config';
 @Injectable()
 export class BroadcastService {
 
-    public jsPlumbInstance = new Subject<any>();
-    public jsPlumbInstance$ = this.jsPlumbInstance.asObservable();
+    public showProperty = new Subject<WorkflowElement>();
+    public showProperty$ = this.showProperty.asObservable();
 
-    public workflows = new Subject<Map<number, any>>();
+    public workflows = new Subject<Map<string, any>>();
     public workflows$ = this.workflows.asObservable();
 
-    public planId = new Subject<number>();
+    public planId = new Subject<string>();
     public planId$ = this.planId.asObservable();
 
     public planModel = new Subject<PlanModel>();
     public planModel$ = this.planModel.asObservable();
 
-    public showProperty = new Subject<WorkflowElement>();
-    public showProperty$ = this.showProperty.asObservable();
-
     public updateModelRestConfig = new Subject<RestConfig[]>();
     public updateModelRestConfig$ = this.updateModelRestConfig.asObservable();
 
-    public saveEvent = new Subject<string>();
+    public saveEvent = new Subject<any>();
     public saveEvent$ = this.saveEvent.asObservable();
 
     public selectedElement = new Subject<WorkflowElement[]>();
     public selectedElement$ = this.selectedElement.asObservable();
 
+    // public elementClick = new Subject<WorkflowElement>();
+    // public elementClick$ = this.elementClick.asObservable();
+    /**
+     * this should be used while the source of rest interfaces changed.
+     * @type {Subject<>}
+     */
+    public backendServiceReady = new Subject<any>();
+    public backendServiceReady$ = this.backendServiceReady.asObservable();
+
+
     public nodeProperty = new Subject<WorkflowNode>();
     public nodeProperty$ = this.nodeProperty.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
deleted file mode 100644
index 987f049d..00000000
--- a/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * 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/workflow-node";
-import { Observable } from "rxjs/Observable";
-import { HttpService } from "../../util/http.service";
-import { PlanModel } from "../../model/plan-model";
-
-/**
- * CatalogService
- * provides data access from backend
- */
-@Injectable()
-export abstract class CatalogService {
-
-    constructor(protected httpService: HttpService) {}
-
-    public abstract loadWorkflow(workflowId: string): Observable<PlanModel>;
-    public abstract loadWorkflows(): Observable<Map<string, PlanModel>>;
-
-    public abstract saveWorkflow(name: string, workflow: PlanModel): 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
deleted file mode 100644
index 451d7a2b..00000000
--- a/sdc-workflow-designer-ui/src/app/services/data-access/data-access.service.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 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/sdc.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts
deleted file mode 100644
index 12da953b..00000000
--- a/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * 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/workflow-node";
-import { HttpService } from "../../util/http.service";
-import { PlanModel } from "../../model/plan-model";
-
-/**
- * SdcService
- * provides data access from sdc
- */
-@Injectable()
-export class SdcService extends CatalogService {
-
-    constructor(protected httpService: HttpService) {
-        super(httpService);
-    }
-
-    public loadWorkflows(): Observable<Map<string, PlanModel>> {
-        // TODO load data from sdc
-        const url = 'api/workflows';
-        return this.httpService.get(url).map(response => response.data);
-    }
-
-    public loadWorkflow(workflowId: string): Observable<PlanModel> {
-        // TODO load data from sdc
-        const url = `api/workflows/${workflowId}`;
-        return this.httpService.get(url).map(response => response.data as PlanModel);
-    }
-
-    public saveWorkflow(name: string, workflow: PlanModel): Observable<boolean> {
-        // TODO save workflow design to sdc
-        const url = `api/workflows/${name}`;
-        return this.httpService.put(url, JSON.stringify(workflow)).map(() => true);
-    }
-
-}
diff --git a/sdc-workflow-designer-ui/src/app/services/data/backend.service.ts b/sdc-workflow-designer-ui/src/app/services/data/backend.service.ts
new file mode 100644
index 00000000..41f6fccd
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/services/data/backend.service.ts
@@ -0,0 +1,100 @@
+/**
+ * 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 { Observable } from 'rxjs/Observable';
+import { TranslateService } from '@ngx-translate/core';
+
+import { PlanModel } from '../../model/plan-model';
+import { NodeTemplate } from '../../model/topology/node-template';
+import { HttpService } from '../../util/http.service';
+import { BroadcastService } from '../broadcast.service';
+import { NoticeService } from '../notice.service';
+
+/**
+ * BackendService
+ * provides backend data accessor to load and save data.
+ */
+@Injectable()
+export abstract class BackendService {
+    private topologyProperties: { name: string, value: string }[] = [];
+
+    constructor(protected broadcastService: BroadcastService, protected noticeService: NoticeService,
+        protected httpService: HttpService, private translate: TranslateService) {
+        this.broadcastService.saveEvent$.subscribe(data => {
+            this.save(data).subscribe(response => {
+                this.translate.get('WORKFLOW.MSG.SAVE_SUCCESS').subscribe((res: string) => {
+                    this.noticeService.success(res);
+                });
+            }, error => {
+                this.noticeService.error(error);
+            });
+        });
+    }
+
+    public abstract loadPlans(): Observable<Map<number, any>>;
+
+    public abstract getBackendType(): string;
+
+    public abstract setParameters(params: any);
+
+    public abstract loadNodeTemplates(): Observable<NodeTemplate[]>;
+
+    public abstract loadTopologyProperties(nodeTemplate: NodeTemplate): Observable<string[]>;
+
+    public abstract loadNodeTemplateInterfaces(nodeTemplate: NodeTemplate): Observable<string[]>;
+
+    public abstract loadNodeTemplateOperations(nodeTemplate: NodeTemplate,
+        interfaceName: string): Observable<string[]>;
+
+    public abstract loadNodeTemplateOperationParameter(nodeTemplate: NodeTemplate,
+        interfaceName: string,
+        operation: string): Observable<any>;
+
+    public abstract save(data: any): Observable<any>;
+
+    public abstract loadPlan(): Observable<PlanModel>;
+
+    public getTopologyProperties(): { name: string, value: string }[] {
+        return this.topologyProperties;
+    }
+
+    public canEdit(): boolean {
+        return true;
+    }
+
+    protected refreshTopologyProperties(): void {
+        this.loadNodeTemplates().subscribe(nodes => {
+            if (0 === nodes.length) {
+                return;
+            }
+
+            const subscribes = nodes.map(node => this.loadTopologyProperties(node));
+            Observable.forkJoin(subscribes).map(nodesProperties => {
+                const allProperties: { name: string, value: string }[] = [];
+                nodesProperties.forEach((properties, index) => {
+                    properties.forEach(property => {
+                        // allProperties.push(nodes[index].name + '.' + property);
+                        const propertyOption = {
+                            name: `${nodes[index].name}.${property}`,
+                            value: `[${nodes[index].name}].[${property}]`
+                        };
+                        allProperties.push(propertyOption);
+                    });
+                });
+                return allProperties;
+            }).subscribe(allProperties => {
+                this.topologyProperties = allProperties;
+            });
+        });
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/services/data/data.service.ts b/sdc-workflow-designer-ui/src/app/services/data/data.service.ts
new file mode 100644
index 00000000..73be01b7
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/services/data/data.service.ts
@@ -0,0 +1,79 @@
+/**
+ * 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 { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import { TranslateService } from '@ngx-translate/core';
+
+import { PlanModel } from '../../model/plan-model';
+import { NodeTemplate } from '../../model/topology/node-template';
+import { HttpService } from '../../util/http.service';
+import { BroadcastService } from '../broadcast.service';
+import { SettingService } from "../setting.service";
+import { NoticeService } from '../notice.service';
+import { BackendService } from './backend.service';
+import { SdcService } from './sdc.service';
+
+/**
+ * DataService
+ * BackendService factory, provide backend service by running environment.
+ */
+@Injectable()
+export class DataService {
+    private service: BackendService;
+
+    constructor(private broadcastService: BroadcastService, private noticeService: NoticeService,
+        protected httpService: HttpService, private translate: TranslateService,
+        private settingService: SettingService, private activatedRoute: ActivatedRoute) {
+        this.createBackendService();
+    }
+
+    public initData(): void {
+        this.activatedRoute.queryParams.subscribe(queryParams => {
+            this.service.setParameters(queryParams);
+        });
+    }
+
+    public getTopologyProperties(): { name: string, value: string }[] {
+        return this.service.getTopologyProperties();
+    }
+
+    public loadNodeTemplates(): Observable<NodeTemplate[]> {
+        return this.service.loadNodeTemplates();
+    }
+
+    public loadNodeTemplateInterfaces(nodeTemplate: NodeTemplate): Observable<string[]> {
+        return this.service.loadNodeTemplateInterfaces(nodeTemplate);
+    }
+
+    public loadNodeTemplateOperations(nodeTemplate: NodeTemplate, interfaceName: string): Observable<string[]> {
+        return this.service.loadNodeTemplateOperations(nodeTemplate, interfaceName);
+    }
+
+    public loadNodeTemplateOperationParameter(nodeTemplate: NodeTemplate, interfaceName: string,
+        operation: string): Observable<any> {
+        return this.service.loadNodeTemplateOperationParameter(nodeTemplate, interfaceName, operation);
+    }
+
+    public getBackendType(): string {
+        return this.service.getBackendType();
+    }
+
+    private createBackendService() {
+        this.settingService.getSetting().subscribe(response => {
+            let serviceType = response.BackendType;
+            this.service = new SdcService(this.broadcastService, this.noticeService, this.httpService, this.translate);
+            this.broadcastService.broadcast(this.broadcastService.backendServiceReady, null);
+        })
+    }
+}
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/in-memory-data.service.ts
similarity index 95%
rename from sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts
rename to sdc-workflow-designer-ui/src/app/services/data/in-memory-data.service.ts
index 9055086c..e1ead992 100644
--- a/sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/data/in-memory-data.service.ts
@@ -13,6 +13,7 @@
 import { Injectable } from '@angular/core';
 import { InMemoryDbService } from 'angular-in-memory-web-api';
 import { workflowFJH } from "./mockdata";
+import { PlanModel } from '../../model/plan-model';
 /**
  * InMemeoryDataService
  * Mock backend data
@@ -22,28 +23,47 @@ export class InMemoryDataService implements InMemoryDbService {
 
         const swagger = {"swagger":"2.0","info":{"version":"1.0.0","title":"MicroService Bus rest API"},"basePath":"/api/microservices/v1","tags":[{"name":"metrics"},{"name":"iuiRoute"},{"name":"ServiceAccess"},{"name":"ApiRoute"},{"name":"MSB-Service Resource"},{"name":"CustomRoute"}],"paths":{"/apiRoute":{"get":{"tags":["ApiRoute"],"summary":"get all ApiRoute ","description":"","operationId":"getApiRoutes","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/ApiRouteInfo"}}},"500":{"description":"get ApiRouteInfo List  fail","schema":{"type":"string"}}}},"post":{"tags":["ApiRoute"],"summary":"add one ApiRoute ","description":"","operationId":"addApiRoute","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"ApiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/ApiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"400":{"description":"Unprocessable ApiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add ApiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}}}}},"/apiRoute/apiDocs":{"get":{"tags":["ApiRoute"],"summary":"get all Local apiDoc ","description":"","operationId":"getApiDocs","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"type":"string"}}},"500":{"description":"get apiDoc List  fail","schema":{"type":"string"}}}}},"/apiRoute/apiGatewayPort":{"get":{"tags":["ApiRoute"],"summary":"get apiGateway Port ","description":"","operationId":"getApiGatewayPort","produces":["text/plain"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"string"}},"500":{"description":"get apiGateway Port  fail","schema":{"type":"string"}}}}},"/apiRoute/discoverInfo":{"get":{"tags":["ApiRoute"],"summary":"get discover Info ","description":"","operationId":"getServiceDiscoverInfo","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/DiscoverInfo"}},"500":{"description":"get discover Info fail","schema":{"type":"string"}}}}},"/apiRoute/export":{"get":{"tags":["ApiRoute"],"summary":"export all route service Info by json-file","description":"","operationId":"exportService","produces":["text/plain"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"string"}},"500":{"description":"export fail","schema":{"type":"string"}},"406":{"description":" not Acceptable client-side","schema":{"type":"string"}}}}},"/apiRoute/{serviceName}/version/{version}":{"get":{"tags":["ApiRoute"],"summary":"get one ApiRoute ","description":"","operationId":"getApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"500":{"description":"get ApiRouteInfo fail","schema":{"type":"string"}},"404":{"description":"ApiRouteInfo not found","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["ApiRoute"],"summary":"update one ApiRoute by serviceName and version","description":"","operationId":"updateApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"in":"body","name":"body","description":"ApiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/ApiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"400":{"description":"Unprocessable ApiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update ApiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}}}},"delete":{"tags":["ApiRoute"],"summary":"delete one ApiRoute by serviceName and version","description":"","operationId":"deleteApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"}],"responses":{"500":{"description":"delete ApiRouteInfo fail","schema":{"type":"string"}},"204":{"description":"delete ApiRouteInfo succeed "},"404":{"description":"ApiRouteInfo not found","schema":{"type":"string"}}}}},"/apiRoute/{serviceName}/version/{version}/status/{status}":{"put":{"tags":["ApiRoute"],"summary":"update one ApiRoute  status by serviceName and version","description":"","operationId":"updateApiRouteStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"status","in":"path","description":"ApiRoute status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"500":{"description":"update status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}},"404":{"description":"ApiRouteInfo not found","schema":{"type":"string"}}}}},"/customRoute/all":{"get":{"tags":["CustomRoute"],"summary":"get all CustomRoute ","description":"","operationId":"getCustomRoutes","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/CustomRouteInfo"}}},"500":{"description":"get CustomRouteInfo List  fail","schema":{"type":"string"}}}}},"/customRoute/instance":{"get":{"tags":["CustomRoute"],"summary":"get one CustomRoute ","description":"","operationId":"getCustomRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":false,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"500":{"description":"get CustomRoute fail","schema":{"type":"string"}},"404":{"description":"CustomRoute not found","schema":{"type":"string"}},"415":{"description":"Unprocessable CustomRoute Entity ","schema":{"type":"string"}}}},"post":{"tags":["CustomRoute"],"summary":"add one CustomRoute ","description":"","operationId":"addCustomRoute","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"CustomRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/CustomRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"400":{"description":"Unprocessable CustomRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add CustomRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable CustomRouteInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["CustomRoute"],"summary":"update one CustomRoute by serviceName","description":"","operationId":"updateCustomRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":true,"type":"string"},{"in":"body","name":"body","description":"CustomRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/CustomRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"400":{"description":"Unprocessable CustomRoute JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update CustomRoute fail","schema":{"type":"string"}},"415":{"description":"Unprocessable CustomRoute Entity ","schema":{"type":"string"}}}},"delete":{"tags":["CustomRoute"],"summary":"delete one CustomRoute by serviceName","description":"","operationId":"deleteCustomRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":true,"type":"string"}],"responses":{"500":{"description":"delete customRoute fail","schema":{"type":"string"}},"204":{"description":"delete customRoute succeed "},"404":{"description":"customRoute not found","schema":{"type":"string"}}}}},"/customRoute/status":{"put":{"tags":["CustomRoute"],"summary":"update one CustomRoute  status by serviceName ","description":"","operationId":"updateCustomRouteStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":true,"type":"string"},{"name":"status","in":"query","description":"CustomRoute status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"500":{"description":"update status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable customRoute Entity ","schema":{"type":"string"}},"404":{"description":"customRoute not found","schema":{"type":"string"}}}}},"/iuiRoute":{"get":{"tags":["iuiRoute"],"summary":"get all iuiRoute ","description":"","operationId":"getIuiRoutes","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/IuiRouteInfo"}}},"500":{"description":"get iuiRouteInfo List  fail","schema":{"type":"string"}}}},"post":{"tags":["iuiRoute"],"summary":"add one iuiRoute ","description":"","operationId":"addIuiRoute","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"iuiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/IuiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"400":{"description":"Unprocessable iuiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add iuiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable iuiRouteInfo Entity ","schema":{"type":"string"}}}}},"/iuiRoute/{serviceName}":{"get":{"tags":["iuiRoute"],"summary":"get one iuiRoute ","description":"","operationId":"getIuiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"500":{"description":"get IuiRouteInfo fail","schema":{"type":"string"}},"404":{"description":"IuiRouteInfo not found","schema":{"type":"string"}},"415":{"description":"Unprocessable IuiRouteInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["iuiRoute"],"summary":"update one iuiRoute by serviceName","description":"","operationId":"updateIuiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"},{"in":"body","name":"body","description":"iuiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/IuiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"400":{"description":"Unprocessable IuiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update IuiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable IuiRouteInfo Entity ","schema":{"type":"string"}}}},"delete":{"tags":["iuiRoute"],"summary":"delete one iuiRoute by serviceName","description":"","operationId":"deleteIuiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"}],"responses":{"500":{"description":"delete IuiRouteInfo fail","schema":{"type":"string"}},"204":{"description":"delete IuiRouteInfo succeed "},"404":{"description":"IuiRouteInfo not found","schema":{"type":"string"}}}}},"/iuiRoute/{serviceName}/status/{status}":{"put":{"tags":["iuiRoute"],"summary":"update one iuiRoute  status by serviceName ","description":"","operationId":"updateIuiRouteStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"},{"name":"status","in":"path","description":"iuiRoute status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"500":{"description":"update IuiRouteInfo status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable IuiRouteInfo Entity ","schema":{"type":"string"}},"404":{"description":"IuiRouteInfo not found","schema":{"type":"string"}}}}},"/metrics":{"get":{"tags":["metrics"],"summary":"get Metrics Info ","description":"","operationId":"getMetricsInfo","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/MetricsInfo"}}}}},"/serviceaccess/{serviceName}":{"get":{"tags":["ServiceAccess"],"summary":"get the msb access address of the service ","description":"","operationId":"getApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"serviceName","required":true,"type":"string"},{"name":"type","in":"query","description":"service type","required":false,"type":"string","enum":["api","iui","custom","p2p"]},{"name":"version","in":"query","description":"version","required":false,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/ServiceAccessInfo"}},"500":{"description":"get access address error "}}}},"/services":{"get":{"tags":["MSB-Service Resource"],"summary":"get all microservices ","description":"","operationId":"getMicroService","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/MicroServiceFullInfo"}}},"500":{"description":"get microservice List  fail","schema":{"type":"string"}}}},"post":{"tags":["MSB-Service Resource"],"summary":"add one microservice ","description":"","operationId":"addMicroService","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"MicroServiceInfo Instance Info","required":true,"schema":{"$ref":"#/definitions/MicroServiceInfo"}},{"name":"createOrUpdate","in":"query","description":"createOrUpdate","required":false,"type":"boolean","default":"true"},{"name":"port","in":"query","description":"port","required":false,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"400":{"description":"Unprocessable MicroServiceInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add microservice fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}}},"/services/{serviceName}/version/{version}":{"get":{"tags":["MSB-Service Resource"],"summary":"get one microservice ","description":"","operationId":"getMicroService","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"port","in":"query","description":"port","required":false,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"500":{"description":"get microservice fail","schema":{"type":"string"}},"404":{"description":"microservice not found","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["MSB-Service Resource"],"summary":"update one microservice by serviceName and version","description":"","operationId":"updateMicroService","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"in":"body","name":"body","description":"microservice Instance Info","required":true,"schema":{"$ref":"#/definitions/MicroServiceInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"400":{"description":"Unprocessable MicroServiceInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update microservice fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}},"delete":{"tags":["MSB-Service Resource"],"summary":"delete one full microservice by serviceName and version","description":"","operationId":"deleteMicroService","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"port","in":"query","description":"port","required":false,"type":"string"}],"responses":{"500":{"description":"delete microservice fail","schema":{"type":"string"}},"204":{"description":"delete microservice succeed "},"404":{"description":"microservice not found","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}}},"/services/{serviceName}/version/{version}/nodes/{ip}/{port}":{"put":{"tags":["MSB-Service Resource"],"summary":"update  single node by serviceName and version and node","description":"","operationId":"updateNode","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"ip","in":"path","description":"ip","required":true,"type":"string"},{"name":"port","in":"path","description":"port","required":true,"type":"string"},{"name":"ttl","in":"query","description":"ttl","required":false,"type":"integer","format":"int32"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"500":{"description":"update node fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}},"404":{"description":"microservice not found","schema":{"type":"string"}}}},"delete":{"tags":["MSB-Service Resource"],"summary":"delete single node by serviceName and version and node","description":"","operationId":"deleteNode","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"ip","in":"path","description":"ip","required":true,"type":"string"},{"name":"port","in":"path","description":"port","required":true,"type":"string"}],"responses":{"500":{"description":"delete node fail","schema":{"type":"string"}},"204":{"description":"delete node succeed "},"404":{"description":"node not found","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}}},"/services/{serviceName}/version/{version}/status/{status}":{"put":{"tags":["MSB-Service Resource"],"summary":"update  microservice status by serviceName and version","description":"","operationId":"updateServiceStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"status","in":"path","description":"status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"500":{"description":"update status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}},"404":{"description":"microservice not found","schema":{"type":"string"}}}}}},"definitions":{"JVMMetrics":{"type":"object","properties":{"value":{"type":"number","format":"double"}}},"DiscoverInfo":{"type":"object","properties":{"ip":{"type":"string"},"port":{"type":"integer","format":"int32"},"enabled":{"type":"boolean","default":false}}},"IuiRouteInfo":{"type":"object","required":["servers","serviceName","url"],"properties":{"serviceName":{"type":"string"},"url":{"type":"string","example":"/test","description":"Target Service URL,start with /"},"control":{"type":"string","example":"0","description":"[control Range] 0：default   1：readonly  2：hidden ","enum":["0","1","2"]},"status":{"type":"string","example":"1","description":"[status] 1：abled    0：disabled ","enum":["0","1"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"useOwnUpstream":{"type":"string","example":"0","description":"[LB Policy]non_ip_hash:0,ip_hash:1","enum":["0","1"]},"servers":{"type":"array","items":{"$ref":"#/definitions/RouteServer"}}}},"Node":{"type":"object","required":["ip","port"],"properties":{"ip":{"type":"string"},"port":{"type":"string"},"ttl":{"type":"integer","format":"int32"}}},"RouteServer":{"type":"object","required":["ip","port"],"properties":{"ip":{"type":"string"},"port":{"type":"string"},"weight":{"type":"integer","format":"int32"}}},"MicroServiceInfo":{"type":"object","required":["protocol","serviceName","url"],"properties":{"serviceName":{"type":"string"},"version":{"type":"string","example":"v1"},"url":{"type":"string","example":"/api/serviceName/v1","description":"Target Service URL,start with /"},"protocol":{"type":"string","example":"REST","description":"Service Protocol","enum":["REST","UI","MQ","FTP","SNMP","TCP","UDP"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"lb_policy":{"type":"string","example":"hash","description":"lb policy","enum":["round-robin","hash","least_conn"]},"namespace":{"type":"string"},"nodes":{"type":"array","uniqueItems":true,"items":{"$ref":"#/definitions/Node"}}}},"HttpMetrics":{"type":"object","properties":{"count":{"type":"integer","format":"int32"},"max":{"type":"number","format":"double"},"mean":{"type":"number","format":"double"},"min":{"type":"number","format":"double"},"p50":{"type":"number","format":"double"},"p75":{"type":"number","format":"double"},"p95":{"type":"number","format":"double"},"p98":{"type":"number","format":"double"},"p99":{"type":"number","format":"double"},"p999":{"type":"number","format":"double"},"stddev":{"type":"number","format":"double"},"m15_rate":{"type":"number","format":"double"},"m1_rate":{"type":"number","format":"double"},"m5_rate":{"type":"number","format":"double"},"mean_rate":{"type":"number","format":"double"},"duration_units":{"type":"string"},"rate_units":{"type":"string"}}},"ApiRouteInfo":{"type":"object","required":["servers","serviceName","url","version"],"properties":{"serviceName":{"type":"string"},"version":{"type":"string","example":"v1"},"url":{"type":"string","example":"/test","description":"Target Service URL,start with /"},"apiJson":{"type":"string"},"apiJsonType":{"type":"string","example":"1","description":"[apiJson Type] 0：local file  1： remote file","enum":["0","1"]},"metricsUrl":{"type":"string"},"control":{"type":"string","example":"0","description":"[control Range] 0：default   1：readonly  2：hidden ","enum":["0","1","2"]},"status":{"type":"string","example":"1","description":"[status] 1：abled    0：disabled ","enum":["0","1"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"useOwnUpstream":{"type":"string","example":"0","description":"[LB Policy]non_ip_hash:0,ip_hash:1","enum":["0","1"]},"servers":{"type":"array","items":{"$ref":"#/definitions/RouteServer"}}}},"Gauges":{"type":"object","properties":{"jvm.attribute.uptime":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Eden-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Eden-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Perm-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Perm-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Survivor-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Survivor-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Tenured-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Old-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Code-Cache.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.heap.init":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.non-heap.init":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.heap.used":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.non-heap.used":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.heap.max":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.runnable.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.timed_waiting.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.waiting.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.blocked.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.count":{"$ref":"#/definitions/JVMMetrics"}}},"MetricsInfo":{"type":"object","properties":{"gauges":{"$ref":"#/definitions/Gauges"},"timers":{"$ref":"#/definitions/Timers"}}},"ServiceAccessInfo":{"type":"object","properties":{"serviceType":{"type":"string"},"serviceName":{"type":"string"},"version":{"type":"string"},"accessAddr":{"type":"string"}}},"MicroServiceFullInfo":{"type":"object","required":["protocol","serviceName","url"],"properties":{"serviceName":{"type":"string"},"version":{"type":"string","example":"v1"},"url":{"type":"string","example":"/api/serviceName/v1","description":"Target Service URL,start with /"},"protocol":{"type":"string","example":"REST","description":"Service Protocol","enum":["REST","UI","MQ","FTP","SNMP","TCP","UDP"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"lb_policy":{"type":"string","example":"hash","description":"lb policy","enum":["round-robin","hash","least_conn"]},"namespace":{"type":"string"},"nodes":{"type":"array","uniqueItems":true,"items":{"$ref":"#/definitions/NodeInfo"}},"status":{"type":"string"}}},"NodeInfo":{"type":"object","required":["ip","port"],"properties":{"ip":{"type":"string"},"port":{"type":"string"},"ttl":{"type":"integer","format":"int32"},"nodeId":{"type":"string"},"expiration":{"type":"string","format":"date-time"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}}},"CustomRouteInfo":{"type":"object","required":["servers","serviceName","url"],"properties":{"serviceName":{"type":"string"},"url":{"type":"string","example":"/test","description":"Target Service URL,start with /"},"control":{"type":"string","example":"0","description":"[control Range] 0：default   1：readonly  2：hidden ","enum":["0","1","2"]},"status":{"type":"string","example":"1","description":"[status] 1：abled    0：disabled ","enum":["0","1"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"useOwnUpstream":{"type":"string","example":"0","description":"[LB Policy]non_ip_hash:0,ip_hash:1","enum":["0","1"]},"servers":{"type":"array","items":{"$ref":"#/definitions/RouteServer"}}}},"Timers":{"type":"object","properties":{"org.openo.msb.resources.ApiRouteResource.addApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.deleteApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getApiDocs":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getApiRoutes":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getServerIP":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.updateApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.addIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.deleteIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.getIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.getIuiRoutes":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.updateIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.get-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.post-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.put-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.delete-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.other-requests":{"$ref":"#/definitions/HttpMetrics"}}}}};
 
-        const workflows = {plan1: {
-            id: 'workflow1',
-            name: 'workflow1',
-            nodes: [],
-            configs: {
-                microservices: [{
-                    definition: "/s/swagger",
-                    name: "test",
-                    swaggerJson: JSON.stringify(swagger),
-                    version: "v2"
-                }]
-            }
-        }, plan2: {
-            id: 'workflow2',
-            name: 'workflow2',
-            nodes: [],
-            configs: {
-                microservices: []
-            }
-        },
-        plan3: workflowFJH,
-    };
-        return { workflows, swagger};
+        const workflows = {
+            "1": {
+                planName: "plan1",
+                plan: {
+                    id: 'workflow1',
+                    name: 'workflow1',
+                    nodes: [],
+                    configs: {
+                        microservices: [{
+                            definition: "/s/swagger",
+                            name: "test",
+                            swaggerJson: JSON.stringify(swagger),
+                            version: "v2"
+                        }]
+                    }
+                },
+            },
+            "2": {
+                planName: "plan2",
+                plan: {
+                    id: 'workflow2',
+                    name: 'workflow2',
+                    nodes: [],
+                    configs: {
+                        microservices: []
+                    }
+                },
+            },
+            "3": {
+                planName: "plan3",
+                plan: workflowFJH,
+            } ,
+        };
+
+        const mockarray = [];
+        const mockobject = {};
+
+        const setting = {
+            "BackendType":"Catalog"
+        }
+
+        return { workflows, swagger, mockarray,mockobject, setting};
     }
 }
diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/mockdata.ts b/sdc-workflow-designer-ui/src/app/services/data/mockdata.ts
similarity index 100%
rename from sdc-workflow-designer-ui/src/app/services/data-access/mockdata.ts
rename to sdc-workflow-designer-ui/src/app/services/data/mockdata.ts
diff --git a/sdc-workflow-designer-ui/src/app/services/data/sdc.service.ts b/sdc-workflow-designer-ui/src/app/services/data/sdc.service.ts
new file mode 100644
index 00000000..0e2f1118
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/services/data/sdc.service.ts
@@ -0,0 +1,86 @@
+/**
+ * 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 { Observable } from "rxjs/Observable";
+import { WorkflowNode } from "../../model/workflow/workflow-node";
+import { HttpService } from "../../util/http.service";
+import { PlanModel } from "../../model/plan-model";
+import { BackendService } from './backend.service';
+import { NodeTemplate } from '../../model/topology/node-template';
+
+/**
+ * SdcService
+ * provides data access from sdc
+ */
+@Injectable()
+export class SdcService extends BackendService {
+    private workflowId: string;
+
+    public getBackendType(): string {
+        return "SDC";
+    }
+    public setParameters(params: any) {
+        this.workflowId = params;
+        this.loadPlans().subscribe(plans => {
+            const map = new Map<string, any>();
+            for(let id of Object.keys(plans)) {
+                map.set(id, plans[id]);
+            }
+            this.broadcastService.broadcast(this.broadcastService.workflows, map);
+        });
+    }
+    public loadNodeTemplates(): Observable<NodeTemplate[]> {
+        // TODO load data from sdc
+        const url = 'api/mockarray';
+        return this.httpService.get(url).map(response => response.data);
+    }
+    public loadTopologyProperties(nodeTemplate: NodeTemplate): Observable<string[]> {
+        // TODO load data from sdc
+        const url = 'api/mockarray';
+        return this.httpService.get(url).map(response => response.data);
+    }
+    public loadNodeTemplateInterfaces(nodeTemplate: NodeTemplate): Observable<string[]> {
+        // TODO load data from sdc
+        const url = 'api/mockarray';
+        return this.httpService.get(url).map(response => response.data);
+    }
+    public loadNodeTemplateOperations(nodeTemplate: NodeTemplate, interfaceName: string): Observable<string[]> {
+        // TODO load data from sdc
+        const url = 'api/mockarray';
+        return this.httpService.get(url).map(response => response.data);
+    }
+    public loadNodeTemplateOperationParameter(nodeTemplate: NodeTemplate, interfaceName: string, operation: string): Observable<any> {
+        // TODO load data from sdc
+        const url = 'api/mockobject';
+        return this.httpService.get(url).map(response => response.data);
+    }
+
+    public loadPlans(): Observable<any> {
+        // TODO load data from sdc
+        const url = 'api/workflows';
+        return this.httpService.get(url).map(response => response.data);
+    }
+
+    public loadPlan(): Observable<PlanModel> {
+        // TODO load data from sdc
+        const url = `api/workflows/${this.workflowId}`;
+        return this.httpService.get(url).map(response => response.data as PlanModel);
+    }
+
+    public save(data: any): Observable<boolean> {
+        // TODO save workflow design to sdc
+        const url = `api/workflows/${data.name}`;
+        return this.httpService.put(url, JSON.stringify(data.planModel)).map(() => true);
+    }
+
+}
diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/swagger.ts b/sdc-workflow-designer-ui/src/app/services/data/swagger.ts
similarity index 100%
rename from sdc-workflow-designer-ui/src/app/services/data-access/swagger.ts
rename to sdc-workflow-designer-ui/src/app/services/data/swagger.ts
diff --git a/sdc-workflow-designer-ui/src/app/services/rest.service.ts b/sdc-workflow-designer-ui/src/app/services/rest.service.ts
index a4489180..52bddfe3 100644
--- a/sdc-workflow-designer-ui/src/app/services/rest.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/rest.service.ts
@@ -39,22 +39,22 @@ export class RestService {
         // this.initSwaggerInfoByMSB();
     }
 
-    // public addRestConfig(): RestConfig {
-    //     let index = 0;
-    //     this.restConfigs.forEach(config => {
-    //         const currentId = parseInt(config.id);
-    //         if (currentId > index) {
-    //             index = currentId;
-    //         }
-    //     });
+    public addRestConfig(): RestConfig {
+        let index = 0;
+        this.restConfigs.forEach(config => {
+            const currentId = parseInt(config.id);
+            if (currentId > index) {
+                index = currentId;
+            }
+        });
 
-    //     index += 1;
+        index += 1;
 
-    //     const restConfig = new RestConfig(index.toString(), 'new Config', '', '', false);
-    //     this.restConfigs.push(restConfig);
+        const restConfig = new RestConfig(index.toString(), 'new Config', '', '', '');
+        this.restConfigs.push(restConfig);
 
-    //     return restConfig;
-    // }
+        return restConfig;
+    }
 
     // public initSwaggerInfo(restConfig: RestConfig) {
     //     if (restConfig.dynamic && restConfig.definition) {
@@ -125,7 +125,7 @@ export class RestService {
                         // this service don't have sawgger file.
                         if ('/activiti-rest' !== serviceInfo.publish_url) {
                             const id = serviceInfo.serviceName + '.' + serviceInfo.version;
-                            restConfigs.push(new RestConfig(id, serviceInfo.serviceName, serviceInfo.version, serviceInfo.publish_url));
+                            restConfigs.push(new RestConfig(id, serviceInfo.serviceName, serviceInfo.version, serviceInfo.publish_url, ''));
                             let swaggerUrl = '';
                             if (undefined !== serviceInfo.swagger_url && '' !== serviceInfo.swagger_url) {
                                 swaggerUrl = serviceInfo.publish_url + '/' + serviceInfo.swagger_url;
diff --git a/sdc-workflow-designer-ui/src/app/services/setting.service.spec.ts b/sdc-workflow-designer-ui/src/app/services/setting.service.spec.ts
new file mode 100644
index 00000000..0fe25d0b
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/services/setting.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { SettingService } from './setting.service';
+
+describe('SettingService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [SettingService]
+    });
+  });
+
+  it('should be created', inject([SettingService], (service: SettingService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/sdc-workflow-designer-ui/src/app/services/setting.service.ts b/sdc-workflow-designer-ui/src/app/services/setting.service.ts
new file mode 100644
index 00000000..558620fc
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/services/setting.service.ts
@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { Observable } from "rxjs";
+
+import { HttpService } from '../util/http.service';
+
+@Injectable()
+export class SettingService {
+
+  constructor(private http: HttpService) { }
+
+  public getSetting(): Observable<any> {
+    const options: any = {
+      headers: {
+        Accept: 'application/json',
+      }
+    };
+    // return this.http.get('assets/global-setting.json', options);
+    return this.http.get('/api/setting', options);
+  }
+
+}
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 6b3a18c8..127629c9 100644
--- a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
@@ -11,7 +11,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { DataAccessService } from "./data-access/data-access.service";
+import { DataService } from "./data/data.service";
 import { Observable } from "rxjs/Observable";
 import { PlanModel } from "../model/plan-model";
 import { BroadcastService } from "./broadcast.service";
@@ -23,54 +23,42 @@ import { BroadcastService } from "./broadcast.service";
 @Injectable()
 export class WorkflowService {
 
-    public workflows = new Map<number, any>();
+    public workflows = new Map<string, any>();
     public planModel: PlanModel;
     private planName : string;
-    public workflowIndex = 0;
 
-    constructor(private broadcastService: BroadcastService, private dataAccessService: DataAccessService) {
-        this.dataAccessService.catalogService.loadWorkflows().subscribe(workflows => {
-            this.workflowIndex = 0;
-            for(let key in workflows) {
-                this.workflows.set(this.workflowIndex, {
-                    "planName": key,
-                    "plan": workflows[key]
-                });
-                this.workflowIndex++ ;
-            }
-            this.broadcastWorkflows();
-        });
-        this.broadcastService.planModel.subscribe(workflow => this.planModel = workflow);
+    constructor(private broadcastService: BroadcastService, private dataAccessService: DataService) {
+        this.broadcastService.workflows$.subscribe(workflows => this.workflows = workflows);
+        this.broadcastService.planModel$.subscribe(workflow => this.planModel = workflow);
     }
 
-    public save(): Observable<boolean> {
+    public save() {
         console.log(this.planModel);
         console.log(JSON.stringify(this.planModel));
-        return this.dataAccessService.catalogService.saveWorkflow(this.planName, this.planModel);
+        this.broadcastService.broadcast(this.broadcastService.saveEvent, {"name": this.planName, "planModel": this.planModel});
     }
 
-    public getPlanName(planId: number): string {
+    public getPlanName(planId: string): string {
         const planInfo = this.workflows.get(planId);
         return planInfo ? planInfo.planName: null;
     }
 
-    public getPlanModel(planId: number): PlanModel {
+    public getPlanModel(planId: string): PlanModel {
         const planInfo = this.workflows.get(planId);
         return planInfo ? planInfo.plan: null;
     }
 
-    public getWorkflows(): Map<number, any> {
+    public getWorkflows(): Map<string, any> {
 
         return this.workflows;
     }
 
     public addWorkflow() {
-        this.workflows.set(this.workflowIndex, {"planName": "newPlan", "plan": new PlanModel()});
-        this.workflowIndex++;
+        this.workflows.set(this.getPlanId(), {"planName": "newPlan", "plan": new PlanModel()});
         this.broadcastWorkflows();
     }
 
-    public deleteWorkflow(planId: number): PlanModel {
+    public deleteWorkflow(planId: string): PlanModel {
         this.workflows.delete(planId);
         this.broadcastWorkflows();
 
@@ -80,4 +68,12 @@ export class WorkflowService {
     public broadcastWorkflows() {
         this.broadcastService.broadcast(this.broadcastService.workflows, this.workflows);
     }
+
+    private getPlanId(): string {
+        for(let index=0; index <= this.workflows.size; index++) {
+            if(!this.workflows.has(index + "")) {
+                return index + "";
+            }
+        }
+    }
 }
diff --git a/sdc-workflow-designer-ui/src/assets/global-setting.json b/sdc-workflow-designer-ui/src/assets/global-setting.json
new file mode 100644
index 00000000..85e14cb7
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/assets/global-setting.json
@@ -0,0 +1,3 @@
+{
+    "BackendType":"Catalog"
+}
diff --git a/sdc-workflow-designer-ui/src/ngict-component.css b/sdc-workflow-designer-ui/src/ngict-component.css
index f02922fb..32582bbc 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;
diff --git a/sdc-workflow-designer-ui/src/styles.css b/sdc-workflow-designer-ui/src/styles.css
index c24cd107..174f7b49 100644
--- a/sdc-workflow-designer-ui/src/styles.css
+++ b/sdc-workflow-designer-ui/src/styles.css
@@ -11,11 +11,11 @@
  */
 
  body, html {
-     height: 100%;
-     margin: 0px;
- }
+    height: 100%;
+    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Segoe UI,Helvetica,Arial,san-serif !important;
+}
 
- .form-group .btn{
+.form-group .btn{
     min-width: 20px;
 }
 
@@ -23,12 +23,18 @@
     line-height: 30px;
 }
 
-textarea.form-control {
-    height: auto;
+.card{
+    border: none;
+}
+
+.card-header{
+    background-color: transparent;
+    padding: 10px;
+    border-bottom: none;
 }
 
-.tree-select-class{
-    padding: 0;
+.card-body{
+    padding: 10px 10px 0 10px;
 }
 
 .dropdown-menu{
@@ -37,12 +43,13 @@ textarea.form-control {
 }
 
 .caret {
-  border-top: 6px dashed;
-  border-right: 3px solid transparent;
-  border-left: 3px solid transparent;
+    border-top: 6px dashed;
+    border-right: 3px solid transparent;
+    border-left: 3px solid transparent;
 }
 
 .selected-container-text{
+    background-color: #fff;
     padding-left: 14px !important;
     line-height: 20px;
 }
@@ -54,16 +61,79 @@ textarea.form-control {
 }
 
 .selected-item-text{
+    color: #333;
     margin: 0 !important;
     font-size: 12px !important;
 }
 
-.selecting {
-    border: 1px solid royalblue;
-    background-color: yellowgreen;
-    position: absolute;
+textarea.form-control {
+    height: auto;
+}
+
+body .ui-radiobutton .ui-radiobutton-box .ui-radiobutton-icon{
+    top: 1px;
+}
+
+.ui-fluid .ui-tree{
+    width: fit-content;
+    min-width: 100%;
+}
+
+.ui-tree-toggler{
+    margin-bottom: 1rem;
+}
+
+.ui-tree-container{
+    overflow: auto;
+}
+
+.ui-widget-content{
+    background: none;
+}
+
+.selected-container-text{
+    width: 160px;
+}
+
+/*IE¹ö¶¯ÌõÉèÖÃ*/
+body{
+    /*Èý½Ç¼ýÍ·µÄÑÕÉ«*/
+    scrollbar-arrow-color: #00abff;
+    /*¹ö¶¯Ìõ»¬¿é°´Å¥µÄÑÕÉ«*/
+    scrollbar-face-color: #00abff;
+    /*¹ö¶¯ÌõÕûÌåÑÕÉ«*/
+    scrollbar-highlight-color: transparent;
+    /*¹ö¶¯ÌõÒõÓ°*/
+    scrollbar-shadow-color: #000;
+    /*¹ö¶¯Ìõ¹ìµÀÑÕÉ«*/
+    scrollbar-track-color: transparent;
+}
+
+/*Chrome¹ö¶¯ÌõÉèÖÃ*/
+/*¹ö¶¯ÌõÕûÌ岿·Ö,±ØÐëÒªÉèÖÃ*/
+::-webkit-scrollbar
+{
+	width: 4px;
+    height: 4px;
+	background-color: transparent;
+	margin-right: 2px;
+}
+
+/*¹ö¶¯ÌõµÄ¹ìµÀ*/
+::-webkit-scrollbar-track
+{
+	border-radius: 2px;
+	background-color: transparent;
+}
+
+/*¹ö¶¯ÌõµÄ»¬¿é°´Å¥*/
+::-webkit-scrollbar-thumb{
+    border-radius: 2px;
+    background-color: #00abff;
 }
 
-.ui-treenode-label{
-    width: calc(100% - 32px);
+/*¹ö¶¯ÌõµÄÉÏÏÂÁ½¶ËµÄ°´Å¥*/
+::-webkit-scrollbar-button{
+    width: 0;
+    height: 0;
 }
-- 
2.16.6