support exclusive-gateway

add exclusive gateway definition

Issue-ID: SDC-902

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

26 files changed, 477 insertions, 493 deletions

diff --git a/sdc-workflow-designer-ui/src/app/app.component.html b/sdc-workflow-designer-ui/src/app/app.component.html
index 9f0e5cf2..93788ec5 100644
--- a/sdc-workflow-designer-ui/src/app/app.component.html
+++ b/sdc-workflow-designer-ui/src/app/app.component.html
@@ -17,4 +17,9 @@
         <menus class="design-menus"></menus>
         <b4t-container class="design-container"></b4t-container>
     </div>
+    <global-notice></global-notice>
 </div>
+
+<div *ngIf="isLoading" class="loading-div">
+    <div></div>
+</div>
\ No newline at end of file
diff --git a/sdc-workflow-designer-ui/src/app/app.component.ts b/sdc-workflow-designer-ui/src/app/app.component.ts
index 4a58b5ef..13035baa 100644
--- a/sdc-workflow-designer-ui/src/app/app.component.ts
+++ b/sdc-workflow-designer-ui/src/app/app.component.ts
@@ -10,22 +10,20 @@
  *     ZTE - initial API and implementation and/or initial documentation
  */
 
-import { Component, AfterViewInit, OnInit } from '@angular/core';
-import { JsPlumbService } from "./services/jsplumb.service";
-import { WorkflowService } from "./services/workflow.service";
-import { WorkflowNode } from "./model/workflow/workflow-node";
-import { DataAccessService } from "./services/data-access/data-access.service";
-import { ActivatedRoute } from "@angular/router";
+import { Component } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { BroadcastService } from './services/broadcast.service';
 
+/**
+ * main component
+ */
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+    selector: 'workflow',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-    public isLoading = true;
+    public isLoading = false;
 
     constructor(translate: TranslateService, private broadcastService: BroadcastService) {
         // Init the I18n function.
diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts
index a23b79f7..1864025d 100644
--- a/sdc-workflow-designer-ui/src/app/app.module.ts
+++ b/sdc-workflow-designer-ui/src/app/app.module.ts
@@ -17,7 +17,7 @@ import { NgxTreeSelectModule } from 'ngx-tree-select';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-
+import { AlertModule, ModalModule } from 'ngx-bootstrap/index';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 
 import { AppComponent } from './app.component';
@@ -40,8 +40,6 @@ 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 { ModalModule } from "ngx-bootstrap/modal";
-import { WorkflowConfigService } from "./services/workflow-config.service";
 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";
@@ -57,6 +55,7 @@ import { StartEventComponent } from './components/property/start-event/start-eve
 import { NodeParametersComponent } from './components/node-parameters/node-parameters.component';
 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';
 
 // AoT requires an exported function for factories
 export function HttpLoaderFactory(http: HttpClient) {
@@ -69,6 +68,7 @@ export function HttpLoaderFactory(http: HttpClient) {
         ContainerComponent,
         ResizableDirective,
         EditablePropertyComponent,
+        GlobalNoticeComponent,
         IntermediateCatchEventComponent,
         MenusComponent,
         MicroserviceComponent,
@@ -96,12 +96,11 @@ export function HttpLoaderFactory(http: HttpClient) {
         NoticeService,
         RestService,
         SwaggerTreeConverterService,
-        WorkflowConfigService,
-
         WorkflowService
     ],
     imports: [
         AccordionModule.forRoot(),
+        AlertModule.forRoot(),
         BrowserAnimationsModule,
         BrowserModule,
         HttpModule,
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 e5f68ad1..c60e3b25 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
@@ -15,7 +15,7 @@ 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/workflow/plan-model";
+import { PlanModel } from "../../model/plan-model";
 
 @Component({
     selector: 'menus',
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
index bffaef42..c4c9649b 100644
--- 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
@@ -13,10 +13,9 @@
 import { Component, Input, OnChanges, ViewChild } from '@angular/core';
 import { ModalDirective } from 'ngx-bootstrap/modal';
 
-import { Microservice } from '../../../../model/workflow/microservice';
-import { WorkflowConfigService } from '../../../../services/workflow-config.service';
 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.
@@ -32,7 +31,7 @@ export class MicroserviceDetailComponent implements OnChanges {
     public detail: string;
     public dynamic = false;
 
-    constructor(private configService: WorkflowConfigService) {
+    constructor(private configService: RestService) {
     }
 
     public ngOnChanges() {
@@ -85,10 +84,9 @@ export class MicroserviceDetailComponent implements OnChanges {
     }
 
     private loadDynamicInfo() {
-        this.configService.loadDynamicInfo(this.microservice.url)
+        this.configService.getDynamicSwaggerInfo(this.microservice.url)
         .subscribe(response => {
             try {
-
                 this.microservice.swagger = response;
                 this.parseSwagger2String();
             } catch (e) {
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
index b44d423f..6b17f8b7 100644
--- 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
@@ -13,7 +13,6 @@
 import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { ModalDirective } from 'ngx-bootstrap/modal';
 
-import { Microservice } from '../../../../model/workflow/microservice';
 import { RestConfig } from '../../../../model/rest-config';
 
 /**
@@ -39,7 +38,7 @@ export class MicroserviceListComponent {
         this.onMicroserviceSelected(microservice);
     }
 
-    public deleteMicroservice(index: number, microservice: Microservice) {
+    public deleteMicroservice(index: number, microservice: RestConfig) {
         this.deleteMicroService(microservice.name, microservice.version);
 
         // set the next microservice selected
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
index eeedac47..5c659313 100644
--- 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
@@ -14,8 +14,6 @@ import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { ModalDirective } from 'ngx-bootstrap/modal';
 
 import { MicroserviceListComponent } from './microservice-list/microservice-list.component';
-import { Microservice } from "../../../model/workflow/microservice";
-import { WorkflowConfigService } from "../../../services/workflow-config.service";
 import { RestService } from '../../../services/rest.service';
 import { RestConfig } from '../../../model/rest-config';
 
@@ -31,7 +29,7 @@ export class MicroserviceComponent {
     @ViewChild('microserviceModal') public microserviceModal: ModalDirective;
 
     public microservices: RestConfig[];
-    public currentMicroservice: Microservice;
+    public currentMicroservice: RestConfig;
 
     constructor(private restService: RestService) {
     }
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 bf884983..c771b535 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
@@ -14,7 +14,7 @@ import { AfterViewInit, Component, ViewChild } from '@angular/core';
 import { ModalDirective } from 'ngx-bootstrap/modal';

 

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

-import { PlanModel } from "../../../model/workflow/plan-model";

+import { PlanModel } from "../../../model/plan-model";

 

 /**

  * workflows component

diff --git a/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html b/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html
index 3a4c6635..64feb605 100644
--- a/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.html
@@ -23,31 +23,30 @@
     </div>
 
     <div class="form-group row">
-        <label class="col-md-3 form-control-label text-md-right">Name</label>
+        <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.CONNECTION_NAME' | translate}}</label>
         <div class="col-md-9">
-            <input class="form-control" type="text" [(ngModel)]="sequenceFlow.name">
+            <input class="form-control" type="text" [(ngModel)]="sequenceFlow.name" (ngModelChange)="nameChanged($event)">
         </div>
     </div>
 
     <div class="form-group row">
-        <label class="col-md-3 form-control-label text-md-right">Source</label>
+        <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.CONNECTION_SOURCE' | translate}}</label>
         <div class="col-md-9">
             <input class="form-control" disabled type="text" [(ngModel)]="sequenceFlow.sourceRef">
         </div>
     </div>
 
     <div class="form-group row">
-        <label class="col-md-3 form-control-label text-md-right">Target</label>
+        <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.CONNECTION_TARGET' | translate}}</label>
         <div class="col-md-9">
             <input class="form-control" disabled type="text" [(ngModel)]="sequenceFlow.targetRef">
         </div>
     </div>
 
     <div class="form-group row">
-        <label class="col-md-3 form-control-label text-md-right">Condition</label>
+        <label class="col-md-3 form-control-label text-md-right">{{'WORKFLOW.CONNECTION_CONDITION' | translate}}</label>
         <div class="col-md-9">
-            <input class="form-control" type="text" [ngModel]="sequenceFlow.condition"
-                   (ngModelChange)="conditionChanged($event)">
+            <input class="form-control" type="text" [(ngModel)]="sequenceFlow.condition">
         </div>
     </div>
 </div>
diff --git a/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.ts b/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.ts
index b114d0ae..f132a07f 100644
--- a/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/sequence-flow/sequence-flow.component.ts
@@ -33,25 +33,30 @@ export class SequenceFlowComponent implements AfterViewInit {
     public show = false;
 
     constructor(private broadcastService: BroadcastService,
-                private processService: ModelService,
+                private modelService: ModelService,
                 private jsPlumbService: JsPlumbService) {
 
     }
 
     public ngAfterViewInit() {
-        this.broadcastService.showSequenceFlow$.subscribe(show => this.show = show);
-        this.broadcastService.sequenceFlow$.subscribe(tmp => this.sequenceFlow = tmp);
+        this.broadcastService.showProperty$.subscribe(element => {
+            if (element && !this.modelService.isNode(element)) {
+                this.sequenceFlow = element as SequenceFlow;
+                this.show = true;
+            } else {
+                this.show = false;
+            }
+        });
     }
 
-    public conditionChanged(condition: string) {
-        this.sequenceFlow.condition = condition;
-        this.jsPlumbService.setLabel(this.sequenceFlow.sourceRef, this.sequenceFlow.targetRef, condition);
+    public nameChanged(name: string) {
+        this.sequenceFlow.name = name;
+        this.jsPlumbService.setLabel(this.sequenceFlow.sourceRef, this.sequenceFlow.targetRef, name);
     }
 
     public delete() {
         this.show = false;
-
-        this.processService.deleteConnection(this.sequenceFlow.sourceRef, this.sequenceFlow.targetRef);
+        this.modelService.deleteConnection(this.sequenceFlow.sourceRef, this.sequenceFlow.targetRef);
         this.jsPlumbService.deleteConnect(this.sequenceFlow.sourceRef, this.sequenceFlow.targetRef);
     }
 }
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/plan-model.ts b/sdc-workflow-designer-ui/src/app/model/plan-model.ts
index 764bae71..055bc924 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/plan-model.ts
+++ b/sdc-workflow-designer-ui/src/app/model/plan-model.ts
@@ -9,14 +9,8 @@
  * Contributors:

  *     ZTE - initial API and implementation and/or initial documentation

  */

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

 

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

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

-import { Configs } from "./configs";

-

-/**

- * PlanModel

- */

 export class PlanModel {

     public nodes: WorkflowNode[] = [];

     public configs: any = {};

diff --git a/sdc-workflow-designer-ui/src/app/model/plan-treeview-item.ts b/sdc-workflow-designer-ui/src/app/model/plan-treeview-item.ts
index a1d98500..aa3f81b5 100644
--- a/sdc-workflow-designer-ui/src/app/model/plan-treeview-item.ts
+++ b/sdc-workflow-designer-ui/src/app/model/plan-treeview-item.ts
@@ -14,6 +14,6 @@ export class PlanTreeviewItem {
     constructor(public name: string,
                 public value: string,
                 public children: PlanTreeviewItem[],
-                public canSelect?: boolean) {
+                public canSelect = true) {
     }
 }
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/microservice.ts b/sdc-workflow-designer-ui/src/app/model/swagger-setting.ts
index c0cb2586..41e30fd1 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/microservice.ts
+++ b/sdc-workflow-designer-ui/src/app/model/swagger-setting.ts
@@ -1,21 +1,18 @@
-/**

- * Copyright (c) 2017 ZTE Corporation.

- * All rights reserved. This program and the accompanying materials

- * are made available under the terms of the Eclipse Public License v1.0

- * and the Apache License 2.0 which both accompany this distribution,

- * and are available at http://www.eclipse.org/legal/epl-v10.html

- * and http://www.apache.org/licenses/LICENSE-2.0

- *

- * Contributors:

- *     ZTE - initial API and implementation and/or initial documentation

- */

-

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

-import { Swagger } from "../swagger";

-

-/**

- * Microservice

- */

-export class Microservice {

-    constructor(public name: string, public version: string, public swaggerJson: string, public definition: string) {}

-}

+/**
+ * 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 { Swagger } from './swagger';
+
+export class SwaggerSetting {
+    constructor(public name: string, public version: string, public url: string, public path: string,
+        public swagger?: Swagger) {
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/configs.ts b/sdc-workflow-designer-ui/src/app/model/workflow/exclusive-gateway.ts
index 9a5a08f2..6db7bcfd 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/configs.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/exclusive-gateway.ts
@@ -1,21 +1,15 @@
-/**

- * 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 { Microservice } from "./microservice";

-

-/**

- * Configs

- */

-export class Configs {

-    constructor(public microservices:Microservice[]) {}

-}

+/**
+ * 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 {WorkflowNode} from './workflow-node';
+
+export interface ExclusiveGateway extends WorkflowNode {
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/position.ts b/sdc-workflow-designer-ui/src/app/model/workflow/position.ts
index 7f3fe6fb..7593b70d 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/position.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/position.ts
@@ -10,12 +10,6 @@
  *     ZTE - initial API and implementation and/or initial documentation

  */

 

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

-

-/**

- * Position

- * Workflow node position

- */

 export class Position {

-    constructor(public top: number, public left: number, public width: number = 200, public height: number = 100) { }

+    constructor(public left: number, public top: number, public width = 56, public height = 56) { }

 }

diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/sequence-flow.ts b/sdc-workflow-designer-ui/src/app/model/workflow/sequence-flow.ts
index 492cc84d..53c09a31 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/sequence-flow.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/sequence-flow.ts
@@ -9,8 +9,14 @@
  * Contributors:
  *     ZTE - initial API and implementation and/or initial documentation
  */
+import { WorkflowElement } from './workflow-element';
+import { Position } from './position';
 
-export class SequenceFlow {
-
-    constructor(public sourceRef: string, public targetRef: string, public name?: string, public condition?:string) { }
+export interface SequenceFlow extends WorkflowElement {
+    sourceRef: string;
+    // sourcePosition: Position;
+    targetRef: string;
+    // targetPosition: Position;
+    name?: string;
+    condition?: string;
 }
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 99a9b162..4322c32e 100644
--- a/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/broadcast.service.ts
@@ -14,7 +14,7 @@ import { Subject } from 'rxjs/Subject';
 
 import { WorkflowNode } from '../model/workflow/workflow-node';
 import { SequenceFlow } from "../model/workflow/sequence-flow";
-import { PlanModel } from "../model/workflow/plan-model";
+import { PlanModel } from "../model/plan-model";
 import { WorkflowElement } from '../model/workflow/workflow-element';
 import { RestConfig } from '../model/rest-config';
 
diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts
index bce3d359..987f049d 100644
--- a/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/data-access/catalog.service.ts
@@ -14,7 +14,7 @@ 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/workflow/plan-model";

+import { PlanModel } from "../../model/plan-model";

 

 /**

  * CatalogService

diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts
index da711990..12da953b 100644
--- a/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/data-access/sdc.service.ts
@@ -15,7 +15,7 @@ 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/workflow/plan-model";

+import { PlanModel } from "../../model/plan-model";

 

 /**

  * SdcService

diff --git a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
index 0f042fd2..c6cf60a8 100644
--- a/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/jsplumb.service.ts
@@ -34,7 +34,6 @@ export class JsPlumbService {
     private selectNodes: WorkflowNode[] = [];

 

     constructor(private modelService: ModelService, private broadcastService: BroadcastService) {

-

         this.broadcastService.selectedElement$.subscribe(elements => {

             this.selectNodes = [];

             if (elements && 0 < elements.length) {

diff --git a/sdc-workflow-designer-ui/src/app/services/model.service.ts b/sdc-workflow-designer-ui/src/app/services/model.service.ts
index 65d3e490..81cad031 100644
--- a/sdc-workflow-designer-ui/src/app/services/model.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/model.service.ts
@@ -9,35 +9,35 @@
  * Contributors:

  *     ZTE - initial API and implementation and/or initial documentation

  */

-

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

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

-import { PlanModel } from "../model/workflow/plan-model";

-import { Position } from "../model/workflow/position";

-import { NodeType } from "../model/workflow/node-type.enum";

-import { StartEvent } from "../model/workflow/start-event";

-import { SequenceFlow } from "../model/workflow/sequence-flow";

-import { RestTask } from "../model/workflow/rest-task";

-import { ErrorEvent } from "../model/workflow/error-event";

-import { PlanTreeviewItem } from "../model/plan-treeview-item";

-import { WorkflowConfigService } from "./workflow-config.service";

-import { Swagger, SwaggerModelSimple, SwaggerReferenceObject } from "../model/swagger";

-import { WorkflowService } from "./workflow.service";

-import { IntermediateCatchEvent } from "../model/workflow/intermediate-catch-event";

-import { ScriptTask } from "../model/workflow/script-task";

+import { isNullOrUndefined } from 'util';

+

+import { PlanModel } from '../model/plan-model';

+import { PlanTreeviewItem } from '../model/plan-treeview-item';

+import { RestConfig } from '../model/rest-config';

+import { Swagger, SwaggerModel, SwaggerModelSimple, SwaggerPrimitiveObject, SwaggerReferenceObject } from '../model/swagger';

+import { ErrorEvent } from '../model/workflow/error-event';

+import { IntermediateCatchEvent } from '../model/workflow/intermediate-catch-event';

+import { NodeType } from '../model/workflow/node-type.enum';

+import { Parameter } from '../model/workflow/parameter';

+import { Position } from '../model/workflow/position';

+import { RestTask } from '../model/workflow/rest-task';

+import { SequenceFlow } from '../model/workflow/sequence-flow';

+import { StartEvent } from '../model/workflow/start-event';

+import { SubProcess } from '../model/workflow/sub-process';

 import { ToscaNodeTask } from '../model/workflow/tosca-node-task';

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

 import { NodeTemplate } from '../model/topology/node-template';

-import { SubProcess } from '../model/workflow/sub-process';

-import { TimerEventDefinition, TimerEventDefinitionType } from '../model/workflow/timer-event-definition';

-import { Parameter } from '../model/workflow/parameter';

 import { ValueSource } from '../model/value-source.enum';

-import { RestService } from './rest.service';

 import { BroadcastService } from './broadcast.service';

-import { RestConfig } from '../model/rest-config';

+import { RestService } from './rest.service';

+import { SwaggerTreeConverterService } from './swagger-tree-converter.service';

+import { ScriptTask } from "../model/workflow/script-task";

+import { TimerEventDefinition, TimerEventDefinitionType } from "../model/workflow/timer-event-definition";

 

 /**

- * WorkflowService

- * provides all of the operations about workflow operations.

+ * ModelService

+ * provides all operations about plan model.

  */

 @Injectable()

 export class ModelService {

@@ -45,7 +45,7 @@ export class ModelService {
 

     private planModel: PlanModel = new PlanModel();

 

-    constructor(private broadcastService: BroadcastService, private restService: RestService, private workflowService: WorkflowService, private configService: WorkflowConfigService) {

+    constructor(private broadcastService: BroadcastService, private restService: RestService) {

         this.broadcastService.planModel$.subscribe(plan => {

             plan.nodes.forEach(node => {

                 switch (node.type) {

@@ -100,86 +100,31 @@ export class ModelService {
         });

     }

 

-    public getProcess(): WorkflowNode[] {

-        return this.workflowService.planModel.nodes;

+    public getChildrenNodes(parentId: string): WorkflowNode[] {

+        if (!parentId || parentId === this.rootNodeId) {

+            return this.planModel.nodes;

+        } else {

+            const node = this.getNodeMap().get(parentId);

+            if (node.type === 'subProcess') {

+                return (<SubProcess>node).children;

+            } else {

+                return [];

+            }

+        }

     }

 

     public getNodes(): WorkflowNode[] {

         return this.planModel.nodes;

     }

 

-    public addConnection(sourceId: string, targetId: string) {

-        const node = this.getNodeMap().get(sourceId);

-        if (node) {

-            const index = node.connection.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);

-            if (index === -1) {

-                const sequenceFlow: SequenceFlow = { sourceRef: sourceId, targetRef: targetId };

-                node.connection.push(sequenceFlow);

-            }

-        }

-    }

-

-    public deleteConnection(sourceId: string, targetId: string) {

-        const node = this.getNodeMap().get(sourceId);

+    public getSequenceFlow(sourceRef: string, targetRef: string): SequenceFlow {

+        const node = this.getNodeMap().get(sourceRef);

         if (node) {

-            const index = node.connection.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);

-            if (index !== -1) {

-                node.connection.splice(index, 1);

-            }

-        }

-    }

-

-    public deleteNode(parentId: string, nodeId: string): WorkflowNode {

-        const nodeMap = this.getNodeMap();

-

-        const nodes = this.getChildrenNodes(parentId);

-

-        // delete related connections

-        nodes.forEach(node => this.deleteConnection(node.id, nodeId));

-

-        // delete current node

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

-        if (index !== -1) {

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

-            node.connection = [];

-            return node;

-        }

-

-        return null;

-    }

-

-    public addChild(parentId: string, child: WorkflowNode) {

-        this.getChildrenNodes(parentId).push(child);

-    }

-

-    public deleteChild(node: SubProcess, id: string): WorkflowNode {

-        const index = node.children.findIndex(child => child.id === id);

-        if (index !== -1) {

-            const deletedNode = node.children.splice(index, 1);

-            return deletedNode[0];

+            const sequenceFlow = node.connection.find(tmp => tmp.targetRef === targetRef);

+            return sequenceFlow;

+        } else {

+            return null;

         }

-

-        return null;

-    }

-

-    public updateRestConfig(restConfigs: RestConfig[]): void {

-        this.planModel.configs = { restConfigs: restConfigs };

-        // console.log(this.planModel.configs);

-    }

-

-    public getNodeMap(): Map<string, WorkflowNode> {

-        const map = new Map<string, WorkflowNode>();

-        this.toNodeMap(this.planModel.nodes, map);

-        return map;

-    }

-

-    private toNodeMap(nodes: WorkflowNode[], map: Map<string, WorkflowNode>) {

-        nodes.forEach(node => {

-            if (node.type === 'subProcess') {

-                this.toNodeMap((<SubProcess>node).children, map);

-            }

-            map.set(node.id, node);

-        });

     }

 

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

@@ -262,19 +207,175 @@ export class ModelService {
         return undefined !== object.type;

     }

 

-    public getSequenceFlow(sourceRef: string, targetRef: string): SequenceFlow {

-        const node = this.getNodeById(sourceRef);

-        if (node) {

-            const sequenceFlow = node.connection.find(tmp => tmp.targetRef === targetRef);

-            return sequenceFlow;

+    // public createNodeByJson(obj: any): WorkflowNode {

+    // let node;

+    // switch (obj.type) {

+    //     case NodeType[NodeType.startEvent]:

+    //         node = new StartEvent(obj.name, obj.id, obj.type, this.rootNodeId, obj.position);

+    //         node.parameters = obj.parameters;

+    //         return node;

+    //     case NodeType[NodeType.restTask]:

+    //         node = new RestTask(obj.name, obj.id, obj.type, this.rootNodeId, obj.position);

+    //         node.

+    //     case NodeType[NodeType.errorStartEvent]:

+    //         return new ErrorEvent(type, id, type, this.rootNodeId, position);

+    //     case NodeType[NodeType.errorEndEvent]:

+    //         return new ErrorEvent(type, id, type, this.rootNodeId, position);

+    //     case NodeType[NodeType.toscaNodeManagementTask]:

+    //         return new ToscaNodeTask(type, id, type, this.rootNodeId, position);

+    //     case NodeType[NodeType.subProcess]:

+    //         return new SubProcess(type, id, type, this.rootNodeId, position);

+    //     case NodeType[NodeType.intermediateCatchEvent]:

+    //         return new IntermediateCatchEvent(type, id, type, this.rootNodeId, position);

+    //     case NodeType[NodeType.scriptTask]:

+    //         return new ScriptTask(type, id, type, this.rootNodeId, position);

+    //     default:

+    //         return new WorkflowNode(type, id, type, this.rootNodeId, position);

+    // }

+    // return node;

+    // }

+

+    public changeParent(id: string, originalParentId: string, targetParentId: string) {

+        if (originalParentId === targetParentId) {

+            return;

+        }

+

+        const node: WorkflowNode = this.deleteNode(originalParentId, id);

+        node.parentId = targetParentId;

+

+        if (targetParentId) {

+            this.addChild(targetParentId, node);

         } else {

-            return undefined;

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

         }

     }

 

+    public updatePosition(id: string, left: number, top: number, width: number, height: number) {

+        const node = this.getNodeMap().get(id);

+        node.position.left = left;

+        node.position.top = top;

+        node.position.width = width;

+        node.position.height = height;

+    }

+

+    public updateRestConfig(restConfigs: RestConfig[]): void {

+        this.planModel.configs = { restConfigs: restConfigs };

+        // console.log(this.planModel.configs);

+    }

+

+    public getNodeMap(): Map<string, WorkflowNode> {

+        const map = new Map<string, WorkflowNode>();

+        this.toNodeMap(this.planModel.nodes, map);

+        return map;

+    }

+

+    public getAncestors(id: string): WorkflowNode[] {

+        const nodeMap = this.getNodeMap();

+        const ancestors = [];

+

+        let ancestor = nodeMap.get(id);

+        do {

+            ancestor = this.getParentNode(ancestor.id, nodeMap);

+            if (ancestor && ancestor.id !== id) {

+                ancestors.push(ancestor);

+            }

+        } while (ancestor);

+

+        return ancestors;

+    }

+

+    private getParentNode(id: string, nodeMap: Map<string, WorkflowNode>): WorkflowNode {

+        let parentNode;

+        nodeMap.forEach((node, key) => {

+            if (NodeType[NodeType.subProcess] === node.type) {

+                const childNode = (<SubProcess>node).children.find(child => child.id === id);

+                if (childNode) {

+                    parentNode = node;

+                }

+            }

+

+        });

+

+        return parentNode;

+    }

+

+    public isDescendantNode(node: WorkflowNode, descendantId: string): boolean {

+        if (NodeType[NodeType.subProcess] !== node.type) {

+            return false;

+        }

+        const tmp = (<SubProcess>node).children.find(child => {

+            return child.id === descendantId || (NodeType[NodeType.subProcess] === child.type && this.isDescendantNode(<SubProcess>child, descendantId));

+        });

+

+        return tmp !== undefined;

+    }

+

+    private toNodeMap(nodes: WorkflowNode[], map: Map<string, WorkflowNode>) {

+        nodes.forEach(node => {

+            if (node.type === 'subProcess') {

+                this.toNodeMap((<SubProcess>node).children, map);

+            }

+            map.set(node.id, node);

+        });

+    }

+

+    public addConnection(sourceId: string, targetId: string) {

+        const node = this.getNodeMap().get(sourceId);

+        if (node) {

+            const index = node.connection.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);

+            if (index === -1) {

+                const sequenceFlow: SequenceFlow = { sourceRef: sourceId, targetRef: targetId };

+                node.connection.push(sequenceFlow);

+            }

+        }

+    }

+

+    public deleteConnection(sourceId: string, targetId: string) {

+        const node = this.getNodeMap().get(sourceId);

+        if (node) {

+            const index = node.connection.findIndex(sequenceFlow => sequenceFlow.targetRef === targetId);

+            if (index !== -1) {

+                node.connection.splice(index, 1);

+            }

+        }

+    }

+

+    public deleteNode(parentId: string, nodeId: string): WorkflowNode {

+        const nodeMap = this.getNodeMap();

+

+        const nodes = this.getChildrenNodes(parentId);

+

+        // delete related connections

+        nodes.forEach(node => this.deleteConnection(node.id, nodeId));

+

+        // delete current node

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

+        if (index !== -1) {

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

+            node.connection = [];

+            return node;

+        }

+

+        return null;

+    }

+

+    public addChild(parentId: string, child: WorkflowNode) {

+        this.getChildrenNodes(parentId).push(child);

+    }

+

+    public deleteChild(node: SubProcess, id: string): WorkflowNode {

+        const index = node.children.findIndex(child => child.id === id);

+        if (index !== -1) {

+            const deletedNode = node.children.splice(index, 1);

+            return deletedNode[0];

+        }

+

+        return null;

+    }

+

     public getPlanParameters(nodeId: string): PlanTreeviewItem[] {

         const preNodeList = new Array<WorkflowNode>();

-        this.getPreNodes(nodeId, preNodeList);

+        this.getPreNodes(nodeId, this.getNodeMap(), preNodeList);

 

         return this.loadNodeOutputs(preNodeList);

     }

@@ -368,13 +469,13 @@ export class ModelService {
         return new PlanTreeviewItem('response', `[${nodeId}].[responseBody]`, []);

     }

 

-    public getPreNodes(nodeId: string, preNodes: WorkflowNode[]) {

+    public getPreNodes(nodeId: string, nodeMap: Map<string, WorkflowNode>, preNodes: WorkflowNode[]) {

         const preNode4CurrentNode = [];

-        this.getProcess().forEach(node => {

+        nodeMap.forEach(node => {

             if (this.isPreNode(node, nodeId)) {

                 const existNode = preNodes.find(tmpNode => tmpNode.id === node.id);

                 if (existNode) {

-                    // current node already exists in preNodes. this could avoid loop circle.

+                    // current node already exists. this could avoid loop circle.

                 } else {

                     preNode4CurrentNode.push(node);

                     preNodes.push(node);

@@ -382,7 +483,7 @@ export class ModelService {
             }

         });

 

-        preNode4CurrentNode.forEach(node => this.getPreNodes(node.id, preNodes));

+        preNode4CurrentNode.forEach(node => this.getPreNodes(node.id, nodeMap, preNodes));

     }

 

     public isPreNode(preNode: WorkflowNode, id: string): boolean {

@@ -390,8 +491,11 @@ export class ModelService {
         return targetNode !== undefined;

     }

 

-    public getNodeById(sourceId: string): WorkflowNode {

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

+    public save() {

+        console.log('****************** save data *********************');

+        console.log(this.planModel);

+

+        this.broadcastService.broadcast(this.broadcastService.saveEvent, this.planModel);

     }

 

     private createId() {

@@ -406,51 +510,4 @@ export class ModelService {
 

         return 'node' + nodeMap.size;

     }

-

-    public getChildrenNodes(parentId: string): WorkflowNode[] {

-        if (!parentId || parentId === this.rootNodeId) {

-            return this.planModel.nodes;

-        } else {

-            const node = this.getNodeMap().get(parentId);

-            if (node.type === 'subProcess') {

-                return (<SubProcess>node).children;

-            } else {

-                return [];

-            }

-        }

-    }

-

-    public changeParent(id: string, originalParentId: string, targetParentId: string) {

-        if (originalParentId === targetParentId) {

-            return;

-        }

-

-        const node: WorkflowNode = this.deleteNode(originalParentId, id);

-        node.parentId = targetParentId;

-

-        if (targetParentId) {

-            this.addChild(targetParentId, node);

-        } else {

-            this.planModel.nodes.push(node);

-        }

-    }

-

-    public updatePosition(id: string, left: number, top: number, width: number, height: number) {

-        const node = this.getNodeMap().get(id);

-        node.position.left = left;

-        node.position.top = top;

-        node.position.width = width;

-        node.position.height = height;

-    }

-

-    public isDescendantNode(node: WorkflowNode, descendantId: string): boolean {

-        if (NodeType[NodeType.subProcess] !== node.type) {

-            return false;

-        }

-        const tmp = (<SubProcess>node).children.find(child => {

-            return child.id === descendantId || (NodeType[NodeType.subProcess] === child.type && this.isDescendantNode(<SubProcess>child, descendantId));

-        });

-

-        return tmp !== undefined;

-    }

 }

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 6b6fd79e..a4489180 100644
--- a/sdc-workflow-designer-ui/src/app/services/rest.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/rest.service.ts
@@ -21,6 +21,7 @@ import { Swagger, SwaggerSchemaObject } from '../model/swagger';
 import { RestConfig } from '../model/rest-config';

 import { HttpService } from '../util/http.service';

 import { BroadcastService } from './broadcast.service';

+import { NoticeService } from './notice.service';

 

 @Injectable()

 export class RestService {

@@ -29,7 +30,7 @@ export class RestService {
     private runtimeURL = '/openoapi/catalog/v1/sys/config';

     private msbPublishServiceURL = '/api/msdiscover/v1/publishservicelist';

 

-    constructor(private broadcastService: BroadcastService, private http: Http) {

+    constructor(private broadcastService: BroadcastService, private http: Http, private noticeService: NoticeService) {

         this.broadcastService.planModel$.subscribe(planModel => {

             planModel.configs.restConfigs.forEach(element => {

                 this.restConfigs.push(element);

@@ -67,14 +68,14 @@ export class RestService {
         return this.restConfigs;

     }

 

-    // public getDynamicSwaggerInfo(url: string): Observable<any> {

-    //     const options: any = {

-    //         headers: {

-    //             Accept: 'application/json',

-    //         },

-    //     };

-    //     return this.httpService.get(url, options);

-    // }

+    public getDynamicSwaggerInfo(url: string): Observable<any> {

+        const options: any = {

+            headers: {

+                Accept: 'application/json',

+            },

+        };

+        return this.http.get(url, options);

+    }

 

     public getSwaggerInfo(id: string): Swagger {

         const restConfig = this.restConfigs.find(tmp => tmp.id === id);

diff --git a/sdc-workflow-designer-ui/src/app/services/swagger-tree-converter.service.ts b/sdc-workflow-designer-ui/src/app/services/swagger-tree-converter.service.ts
index cda06fdb..24fad5ce 100644
--- a/sdc-workflow-designer-ui/src/app/services/swagger-tree-converter.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/swagger-tree-converter.service.ts
@@ -15,205 +15,205 @@ import { TreeNode } from 'primeng/primeng';
 
 import { ValueSource } from '../model/value-source.enum';
 import { WorkflowUtil } from '../util/workflow-util';
+import { RestService } from './rest.service';
 import { Swagger } from "../model/swagger";
-import { WorkflowConfigService } from "./workflow-config.service";
 
 @Injectable()
 export class SwaggerTreeConverterService {
 
-    private swagger: Swagger;
+  private swagger: Swagger;
 
-    constructor(private workflowConfigService: WorkflowConfigService) {
+  constructor(private restService: RestService) {
 
-    }
+  }
 
-    public schema2TreeNode(swagger: Swagger, key: string | number, schema: any, value?: any): any {
-      this.swagger = swagger;
-        if (schema.$ref) {
-            const treeNode = this.getTreeNodeBySwaggerDefinition(key, schema, value);
-            return treeNode;
-        } else {
-            value = this.getInitValue4Param(schema, value);
-            return this.parameter2TreeNode(key, schema, value);
-        }
+  public schema2TreeNode(swagger: Swagger, key: string | number, schema: any, value?: any): any {
+    this.swagger = swagger;
+    if (schema.$ref) {
+      const treeNode = this.getTreeNodeBySwaggerDefinition(key, schema, value);
+      return treeNode;
+    } else {
+      value = this.getInitValue4Param(schema, value);
+      return this.parameter2TreeNode(key, schema, value);
     }
+  }
 
-    private getTreeNodeBySwaggerDefinition(key: string | number, schema: any, value: any): TreeNode {
-        const swaggerDefinition = this.workflowConfigService.getDefinition(this.swagger, schema.$ref);
+  private getTreeNodeBySwaggerDefinition(key: string | number, schema: any, value: any): TreeNode {
+    const swaggerDefinition = this.restService.getDefinition(this.swagger, schema.$ref);
 
-        const definitionCopy = WorkflowUtil.deepClone(swaggerDefinition);
+    const definitionCopy = WorkflowUtil.deepClone(swaggerDefinition);
 
-        value = this.getInitValue4Param(definitionCopy, value);
+    value = this.getInitValue4Param(definitionCopy, value);
 
-        return this.schema2TreeNode(this.swagger, key, definitionCopy, value);
-    }
+    return this.schema2TreeNode(this.swagger, key, definitionCopy, value);
+  }
 
-    private getInitValue4Param(definition: any, value: any) {
-      if (definition.$ref) {
-        definition = this.workflowConfigService.getDefinition(this.swagger, definition.$ref);
-      }
-      if (definition.type === 'object') {
-        return this.getInitValue4Object(value);
-      } else if (definition.type === 'array') {
-        return this.getInitValue4Array(value);
-      } else { // primary type
-        return this.getInitValue4Primate(value);
-      }
+  private getInitValue4Param(definition: any, value: any) {
+    if (definition.$ref) {
+      definition = this.restService.getDefinition(this.swagger, definition.$ref);
     }
-
-    private getInitValue4Object(value: any) {
-      const newValue = {
-        value: {},
-        valueSource: ValueSource[ValueSource.Definition]
-      };
-
-      if(!value) {
-        return newValue;
-      } else {
-        if(value.valueSource !== ValueSource[ValueSource.Definition]) {
-          return value;
-        } else {
-          if(!value.value || typeof value.value !== 'object') {
-            value.value = {};
-          }
-          return value;
-        }
-      }
+    if (definition.type === 'object') {
+      return this.getInitValue4Object(value);
+    } else if (definition.type === 'array') {
+      return this.getInitValue4Array(value);
+    } else { // primary type
+      return this.getInitValue4Primary(value);
     }
-
-    private getInitValue4Array(value: any) {
-      const newValue = {
-        value: [],
-        valueSource: ValueSource[ValueSource.Definition]
-      };
-
-      if(!value) {
-        return newValue;
+  }
+
+  private getInitValue4Object(value: any) {
+    const newValue = {
+      value: {},
+      valueSource: ValueSource[ValueSource.Definition]
+    };
+
+    if (!value || '' === value) {
+      return newValue;
+    } else {
+      if (value.valueSource !== ValueSource[ValueSource.Definition]) {
+        return value;
       } else {
-        if(value.valueSource !== ValueSource[ValueSource.Definition]) {
-          return value;
-        } else {
-          if(!(value.value instanceof Array)) {
-            value.value = [];
-          }
-          return value;
+        if (typeof value.value !== 'object') {
+          value.value = {};
         }
+        return value;
       }
     }
-
-    private getInitValue4Primate(value: any) {
-      const newValue = {
-        value: '',
-        valueSource: ValueSource[ValueSource.String]
-      };
-
-      if(!value) {
-        return newValue;
+  }
+
+  private getInitValue4Array(value: any) {
+    const newValue = {
+      value: [],
+      valueSource: ValueSource[ValueSource.Definition]
+    };
+
+    if (!value || '' === value) {
+      return newValue;
+    } else {
+      if (value.valueSource !== ValueSource[ValueSource.Definition]) {
+        return value;
       } else {
-        if(typeof value.value === 'object') {
-          value.value = '';
+        if (!(value.value instanceof Array)) {
+          value.value = [];
         }
         return value;
       }
     }
+  }
+
+  private getInitValue4Primary(value: any) {
+    const newValue = {
+      value: '',
+      valueSource: ValueSource[ValueSource.String]
+    };
+
+    if (!value) {
+      return newValue;
+    } else {
+      if (typeof value.value === 'object') {
+        value.value = '';
+      }
+      return value;
+    }
+  }
 
-    private parameter2TreeNode(name: string | number, definition: any, value: any): any {
-        const nodeType = this.getTreeNodeType(definition);
-
-        const node = {
-            label: name,
-            type: nodeType,
-            required: definition.required,
-            children: [],
-            definition: definition,
-            value: value,
-        };
-
-        if(value.valueSource === ValueSource[ValueSource.Definition]) {
-          if (definition.type === 'object') {
-              node.children = this.getPropertyFromObject(definition, value.value);
-          } else if (definition.type === 'array') {
-              this.setChildrenForArray(definition, value.value);
-          }
-        }
+  private parameter2TreeNode(name: string | number, definition: any, value: any): any {
+    const nodeType = this.getTreeNodeType(definition);
 
-        return node;
-    }
+    const node = {
+      label: name,
+      type: nodeType,
+      required: definition.required,
+      children: [],
+      definition: definition,
+      value: value,
+    };
 
-    private getTreeNodeType(param: any): string {
-        const type = param.type;
-        if (type === 'array') {
-            return 'array';
-        } else if (type === 'object') {
-            if (param.additionalProperties) {
-                return 'map';
-            } else {
-                return 'object';
-            }
-        } else {
-            return 'default';
-        }
+    if (value.valueSource === ValueSource[ValueSource.Definition]) {
+      if (definition.type === 'object') {
+        node.children = this.getPropertyFromObject(definition, value.value);
+      } else if (definition.type === 'array') {
+        node.children = this.setChildrenForArray(definition, value.value);
+      }
     }
 
-    private setChildrenForArray(definition: any, value: any[]): any[] {
-      const children = [];
-      value.forEach((itemValue, index) => {
-            const itemCopy = WorkflowUtil.deepClone(definition.items);
-            children.push(this.schema2TreeNode(this.swagger, index, itemCopy, itemValue));
-        });
+    return node;
+  }
 
-        return children;
+  private getTreeNodeType(param: any): string {
+    const type = param.type;
+    if (type === 'array') {
+      return 'array';
+    } else if (type === 'object') {
+      if (param.additionalProperties) {
+        return 'map';
+      } else {
+        return 'object';
+      }
+    } else {
+      return 'default';
+    }
+  }
+
+  private setChildrenForArray(definition: any, value: any[]): any[] {
+    const children = [];
+    value.forEach((itemValue, index) => {
+      const itemCopy = WorkflowUtil.deepClone(definition.items);
+      children.push(this.schema2TreeNode(this.swagger, index, itemCopy, itemValue));
+    });
+
+    return children;
+  }
+
+  private getPropertyFromObject(definition: any, value: any): TreeNode[] {
+    if (definition.properties) {
+      return this.getPropertyFromSimpleObject(definition.properties, value, definition.required);
+    } else if (definition.additionalProperties) {
+      return this.getPropertyFromMapOrDictionary(definition.additionalProperties, value);
+    } else {
+      console.log('getPropertyFromObject() return [], param is:' + JSON.stringify(definition));
+      return [];
     }
 
-    private getPropertyFromObject(definition: any, value: any): TreeNode[] {
-        if (definition.properties) {
-            return this.getPropertyFromSimpleObject(definition.properties, value, definition.required);
-        } else if (definition.additionalProperties) {
-            return this.getPropertyFromMapOrDictionary(definition.additionalProperties, value);
-        } else {
-            console.log('getPropertyFromObject() return [], param is:' + JSON.stringify(definition));
-            return [];
+  }
+
+  private getPropertyFromSimpleObject(properties: any, objectValue: any, required: string[]): TreeNode[] {
+    const treeNodes: TreeNode[] = [];
+    for (const key in properties) {
+      let property = properties[key];
+      // init required property
+      property.required = false;
+      if (Array.isArray(required)) {
+        for (let index = 0; index < required.length; index++) {
+          if (required[index] === key) {
+            property.required = true;
+            break;
+          }
         }
+      }
 
-    }
+      objectValue[key] = this.getInitValue4Param(property, objectValue[key]);
 
-    private getPropertyFromSimpleObject(properties: any, objectValue: any, required: string[]): TreeNode[] {
-        const treeNodes: TreeNode[] = [];
-        for (const key in properties) {
-          let property = properties[key];
-            // init required property
-            property.required = false;
-            if (Array.isArray(required)) {
-                for (let index = 0; index < required.length; index++) {
-                    if (required[index] === key) {
-                        property.required = true;
-                        break;
-                    }
-                }
-            }
-
-            objectValue[key] = this.getInitValue4Param(property, objectValue[key]);
-
-            const treeNode = this.schema2TreeNode(this.swagger, key, property, objectValue[key]);
-            treeNodes.push(treeNode);
-        }
-        return treeNodes;
+      const treeNode = this.schema2TreeNode(this.swagger, key, property, objectValue[key]);
+      treeNodes.push(treeNode);
     }
+    return treeNodes;
+  }
 
-    private getPropertyFromMapOrDictionary(additionalProperties: any, mapOrDictionary: any): TreeNode[] {
-        const treeNodes: TreeNode[] = [];
-        for (const key in mapOrDictionary) {
-            const propertyCopy = WorkflowUtil.deepClone(additionalProperties);
-            propertyCopy.value = mapOrDictionary[key];
+  private getPropertyFromMapOrDictionary(additionalProperties: any, mapOrDictionary: any): TreeNode[] {
+    const treeNodes: TreeNode[] = [];
+    for (const key in mapOrDictionary) {
+      const propertyCopy = WorkflowUtil.deepClone(additionalProperties);
+      propertyCopy.value = mapOrDictionary[key];
 
-            const treeNode = this.schema2TreeNode(this.swagger, key, propertyCopy, propertyCopy.value);
-            treeNode.keyEditable = true;
-            treeNodes.push(treeNode);
+      const treeNode = this.schema2TreeNode(this.swagger, key, propertyCopy, propertyCopy.value);
+      treeNode.keyEditable = true;
+      treeNodes.push(treeNode);
 
-            if (mapOrDictionary[key] !== propertyCopy.value) {
-                mapOrDictionary[key] = propertyCopy.value;
-            }
-        }
-        return treeNodes;
+      if (mapOrDictionary[key] !== propertyCopy.value) {
+        mapOrDictionary[key] = propertyCopy.value;
+      }
     }
+    return treeNodes;
+  }
 }
diff --git a/sdc-workflow-designer-ui/src/app/services/workflow-config.service.ts b/sdc-workflow-designer-ui/src/app/services/workflow-config.service.ts
deleted file mode 100644
index 52d951dd..00000000
--- a/sdc-workflow-designer-ui/src/app/services/workflow-config.service.ts
+++ /dev/null
@@ -1,56 +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 { WorkflowService } from "./workflow.service";

-import { Microservice } from "../model/workflow/microservice";

-import { Observable } from "rxjs/Rx";

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

-import { Swagger, SwaggerSchemaObject } from "../model/swagger";

-

-/**

- * WorkflowConfigService

- * provides all of the operations about workflow configs.

- */

-@Injectable()

-export class WorkflowConfigService {

-    constructor(private httpService: HttpService, private workflowService: WorkflowService) {}

-

-    public getMicroservices(): Microservice[] {

-        return this.workflowService.planModel.configs.microservices;

-    }

-

-    public loadDynamicInfo(url: string): Observable<any> {

-        const options: any = {

-            headers: {

-                Accept: 'application/json',

-            },

-        };

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

-    }

-

-    public getSwaggerInfo(serviceName: string, version: string): Swagger {

-        const microservice = this.getMicroservices().find(service => (service.name === serviceName && service.version === version));

-        if(microservice) {

-            return new Swagger(JSON.parse(microservice.swaggerJson));

-        } else {

-            return undefined;

-        }

-    }

-

-    public getDefinition(swagger: Swagger, position: string): SwaggerSchemaObject {

-        const definitionName = position.substring('#/definitions/'.length);

-

-        return swagger.definitions[definitionName];

-    }

-

-}

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 6aedd97a..6b3a18c8 100644
--- a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
@@ -13,8 +13,7 @@
 import { Injectable } from '@angular/core';

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

 import { Observable } from "rxjs/Observable";

-import { PlanModel } from "../model/workflow/plan-model";

-import { Configs } from "../model/workflow/configs";

+import { PlanModel } from "../model/plan-model";

 import { BroadcastService } from "./broadcast.service";

 

 /**

diff --git a/sdc-workflow-designer-ui/src/index.html b/sdc-workflow-designer-ui/src/index.html
index 2c5ee42b..f27ba5b5 100644
--- a/sdc-workflow-designer-ui/src/index.html
+++ b/sdc-workflow-designer-ui/src/index.html
@@ -23,10 +23,8 @@
 </head>
 
 <body>
-    <script>
-        window.__theme = 'bs4';
-    </script>
-    <app-root></app-root>
+  <!-- Enable bootstrap 4 theme -->
+  <script>window.__theme = 'bs4';</script>
+  <workflow></workflow>
 </body>
-
 </html>