support edit rest task properties

modify rest taks config info, and enable edit rest task properties.component.css

Issue-ID: SDC-897

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

21 files changed, 549 insertions, 501 deletions

diff --git a/sdc-workflow-designer-ui/src/app/components/menu/menus.component.html b/sdc-workflow-designer-ui/src/app/components/menu/menus.component.html
index 8cf9dc57..7e043829 100644
--- a/sdc-workflow-designer-ui/src/app/components/menu/menus.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/menu/menus.component.html
@@ -13,7 +13,7 @@
 -->
 
 <div class="btn-left">
-    <p-splitButton [label]="currentWorkflow" icon="fa-arrows" (onClick)="showWorkflows()" [model]="getWorkflows()"></p-splitButton>
+    <p-splitButton [label]="getCurrentPlanName()" icon="fa-arrows" (onClick)="showWorkflows()" [model]="workflows"></p-splitButton>
 </div>
 <div class="btn-right">
     <button type="button" class="btn white" (click)="save()">
diff --git a/sdc-workflow-designer-ui/src/app/components/menu/menus.component.ts b/sdc-workflow-designer-ui/src/app/components/menu/menus.component.ts
index 6932e764..e5f68ad1 100644
--- a/sdc-workflow-designer-ui/src/app/components/menu/menus.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/menu/menus.component.ts
@@ -25,7 +25,7 @@ import { PlanModel } from "../../model/workflow/plan-model";
 export class MenusComponent {
     @ViewChild(MicroserviceComponent) public microserviceComponent: MicroserviceComponent;
     @ViewChild(WorkflowsComponent) public workflowsComponent: WorkflowsComponent;
-    public currentWorkflow = 'Workflows';
+    public currentWorkflowId : number;
     public workflows = [];
 
     constructor(private broadcastService: BroadcastService, private workflowService: WorkflowService) {
@@ -34,7 +34,7 @@ export class MenusComponent {
             if(wfs) {
                 wfs.forEach((value, key, map) => {
                     this.workflows.push({label: value.planName, command: () => {
-                        this.workflowSelected(value.planName, value.plan);
+                        this.workflowSelected(key, value.plan);
                     }});
                 });
             }
@@ -56,29 +56,19 @@ export class MenusComponent {
         this.workflowsComponent.show();
     }
 
-    public getWorkflows() {
-        const workflows = this.workflowService.getWorkflows();
-        if(workflows) {
-            const options = [];
-            workflows.forEach((value, key, map) => {
-                options.push({label: value.planName, command: () => {
-                    console.log(`${value.planName} selected`);
-                    this.workflowSelected(value.planName, value.plan);
-                }});
-            });
-            return options;
-        } else {
-            return [];
-        }
+    public workflowSelected(planId: number, planModel: PlanModel) {
+
+        this.broadcastService.broadcast(this.broadcastService.planModel, planModel);
+        this.broadcastService.broadcast(this.broadcastService.planId, planId);
     }
 
-    public workflowSelected(planName: string, workflow: PlanModel) {
-        this.currentWorkflow = planName;
-        this.broadcastService.broadcast(this.broadcastService.planModel, workflow);
+    public getCurrentPlanName() {
+        let planName = this.workflowService.getPlanName(this.currentWorkflowId);
+        return planName ? planName : 'Workflows'
     }
 
     public download() {
-        const filename = this.currentWorkflow + '.json';
+        const filename = this.getCurrentPlanName() + '.json';
         const content = JSON.stringify(this.workflowService.planModel);
         var eleLink = document.createElement('a');
         eleLink.download = filename;
diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.css b/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.css
diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.html
new file mode 100644
index 00000000..1b3e15c9
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.html
@@ -0,0 +1,21 @@
+<!--

+/*******************************************************************************

+ * Copyright (c) 2017 ZTE Corporation.

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

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

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

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

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

+ *

+ * Contributors:

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

+ *******************************************************************************/

+-->

+<b4t-parameter *ngFor="let param of pathParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter>

+<hr *ngIf="pathParams.length > 0">

+<b4t-parameter *ngFor="let param of queryParams" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter>

+

+<b4t-parameter-tree [restConfigId]="restConfigId" [parameters]="inputParams" [valueSource]="inputSources"

+    [planItems]="planItems"></b4t-parameter-tree>

+<b4t-parameter-tree [restConfigId]="restConfigId" [parameters]="outputParams" [valueSource]="outputSources"

+    [planItems]="planItems"></b4t-parameter-tree>

diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.ts
new file mode 100644
index 00000000..79643d36
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/node-parameters/node-parameters.component.ts
@@ -0,0 +1,94 @@
+/**

+ * 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, OnChanges, Output, SimpleChanges } from '@angular/core';

+import { TreeNode } from 'primeng/primeng';

+

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

+import { Swagger, SwaggerResponse } from '../../model/swagger';

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

+import { RestParameter } from '../../model/workflow/rest-parameter';

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

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

+import { RestService } from "../../services/rest.service";

+

+/**

+ * property component presents information of a workflow node.

+ * the presented information can be edit in this component.

+ * it may load information dynamically. the content may be different for different node type.

+ */

+@Component({

+    selector: 'b4t-node-parameters',

+    styleUrls: ['./node-parameters.component.css'],

+    templateUrl: 'node-parameters.component.html',

+})

+export class NodeParametersComponent implements OnChanges {

+    @Input() public swaggerInput: RestParameter[];

+    @Input() public swaggerOutput: SwaggerResponse[];

+    @Input() public restConfigId: string;

+    @Input() public planItems: PlanTreeviewItem[];

+

+    public inputSources: ValueSource[] = [ValueSource.String, ValueSource.Variable, ValueSource.Topology, ValueSource.Plan];

+    public outputSources: ValueSource[] = [ValueSource.Topology, ValueSource.Plan];

+    public valueSource = ValueSource;

+    public pathParams: any[] = [];

+    public queryParams: any[] = [];

+    public inputParams: TreeNode[] = [];

+    public outputParams: TreeNode[] = [];

+

+    private index = 1;

+

+    constructor(private broadcastService: BroadcastService,

+        private restService: RestService,

+        private swaggerTreeConverterService: SwaggerTreeConverterService) {

+    }

+

+    public ngOnChanges(changes: SimpleChanges): void {

+        if (changes.swaggerInput && changes.swaggerInput.currentValue) {

+            this.resetRequestParams(changes.swaggerInput.currentValue);

+        }

+        if (changes.swaggerOutput && changes.swaggerOutput.currentValue) {

+            this.resetResponseParams(changes.swaggerOutput.currentValue);

+        }

+    }

+

+    public resetRequestParams(parameters: RestParameter[]) {

+        this.pathParams = [];

+        this.queryParams = [];

+        this.inputParams = [];

+

+        parameters.forEach(param => {

+            if (param.position === 'path') {

+                this.pathParams.push(param);

+            } else if (param.position === 'query') {

+                this.queryParams.push(param);

+            } else if (param.position === 'body') {

+                const requestTreeNode = this.swaggerTreeConverterService

+                    .schema2TreeNode(this.restService.getSwaggerInfo(this.restConfigId), 'Request Param', param.schema, param.value);

+                param.value = requestTreeNode.value;

+                this.inputParams.push(requestTreeNode);

+            } else {

+                // TODO others param types not supported

+                console.log('Unsupport parameter position(in):' + param.position);

+            }

+        });

+    }

+

+    public resetResponseParams(responses: SwaggerResponse[]) {

+        this.outputParams = [];

+        if (0 < responses.length && responses[0].schema) {

+            const treeNode = this.swaggerTreeConverterService

+                .schema2TreeNode(this.restService.getSwaggerInfo(this.restConfigId), 'Response Params', responses[0].schema, {});

+            this.outputParams.push(treeNode);

+        }

+    }

+}

diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.css b/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.css
diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.html b/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.html
new file mode 100644
index 00000000..cc17916c
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.html
@@ -0,0 +1,23 @@
+<p-tree *ngIf="parameters.length > 0" [value]="parameters">

+    <ng-template let-node pTemplate="default">

+        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="valueSource" [planItems]="planItems"

+            [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)" (delete)="deleteTreeNode(node)"></b4t-parameter>

+    </ng-template>

+

+    <ng-template let-node pTemplate="array">

+        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems"

+            [canInsert]="canInsert(node)" [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)"

+            (insert)="addChildNode4ObjectArray(node)" (delete)="deleteTreeNode(node)"></b4t-parameter>

+    </ng-template>

+

+    <ng-template let-node pTemplate="object">

+        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems"

+            [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)" (delete)="deleteTreeNode(node)"></b4t-parameter>

+    </ng-template>

+

+    <ng-template let-node pTemplate="map">

+        <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="getObjectValueSource()" [planItems]="planItems"

+            [canInsert]="canInsert(node)" [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)"

+            (insert)="addChildNode4DynamicObject(node)" (delete)="deleteTreeNode(node)"></b4t-parameter>

+    </ng-template>

+</p-tree>

diff --git a/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.ts b/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.ts
new file mode 100644
index 00000000..1c74b707
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/node-parameters/parameter-tree/parameter-tree.component.ts
@@ -0,0 +1,168 @@
+/**

+ * 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 { ChangeDetectionStrategy, Component, Input, OnChanges, Output, SimpleChange, SimpleChanges } from '@angular/core';

+import { TreeNode } from 'primeng/primeng';

+

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

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

+import { ValueType } from '../../../model/value-type.enum';

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

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

+import { WorkflowUtil } from '../../../util/workflow-util';

+import { Swagger } from "../../../model/swagger";

+import { RestService } from "../../../services/rest.service";

+

+/**

+ * parameter tree presents parameter of task node's input or output parameters.

+ */

+@Component({

+    selector: 'b4t-parameter-tree',

+    styleUrls: ['./parameter-tree.component.css'],

+    templateUrl: 'parameter-tree.component.html',

+    changeDetection: ChangeDetectionStrategy.OnPush

+})

+export class ParameterTreeComponent implements OnChanges {

+    @Input() public parameters: TreeNode[];

+    @Input() public restConfigId: string;

+    @Input() public valueSource: ValueSource[];

+    @Input() public planItems: PlanTreeviewItem[];

+

+    constructor(private restService: RestService, private swaggerTreeConverterService: SwaggerTreeConverterService) { }

+

+    public ngOnChanges(changes: SimpleChanges) {

+    }

+

+    public getParameter(node: any): Parameter {

+        // console.log('Parameter init:' + node.label +'.'+ node.type+'.'+JSON.stringify(node.value.value)+'.'+node.value.valueSource);

+

+        return new Parameter(node.label, node.value.value, node.value.valueSource, node.definition.type, node.definition.reqquired);

+    }

+

+

+    public paramChange(param: Parameter, node: any) {

+        // console.log('Parameter change:' + param.name + ', Node label is:' + node.label);

+

+        node.value.valueSource = param.valueSource;

+        node.value.value = param.value;

+

+        this.objectParameterChange(node);

+

+        if (node.label !== param.name) {

+            delete node.parent.value.value[node.label];

+            node.label = param.name;

+        }

+        if (node.parent) {

+            node.parent.value.value[node.label] = node.value;

+        }else{

+            // this parameter is 'request param' or 'response param'

+        }

+

+    }

+

+    private objectParameterChange(node: any) {

+        if (node.value.valueSource === ValueSource[ValueSource.Definition]) { // value will be set by node defintion

+            const treeNode = this.swaggerTreeConverterService.schema2TreeNode(this.getSwagger(), node.label, node.definition, node.value);

+            node.value = treeNode.value;

+            node.children = treeNode.children;

+        } else {  // parameter value will be set by param

+            node.children = [];

+        }

+    }

+

+    private getSwagger(): Swagger {

+        return this.restService.getSwaggerInfo(this.restConfigId);

+    }

+

+    public addChildNode4DynamicObject(node: any) {

+        const copyItem = WorkflowUtil.deepClone(node.definition.additionalProperties);

+        const key = Object.keys(node.value.value).length;

+

+        const childrenNode = this.swaggerTreeConverterService

+            .schema2TreeNode(this.getSwagger(), key, copyItem);

+

+        childrenNode.keyEditable = true;

+        node.value.value[key] = childrenNode.value;

+

+        node.children.push(childrenNode);

+    }

+

+    public addChildNode4ObjectArray(node: any) {

+        const copyItem = WorkflowUtil.deepClone(node.definition.items);

+

+        const childrenNode = this.swaggerTreeConverterService

+            .schema2TreeNode(

+            this.getSwagger(),

+            node.children.length,

+            copyItem);

+

+        node.value.value.push(childrenNode.value);

+        node.children.push(childrenNode);

+    }

+

+    public deleteTreeNode(node: any) {

+        if ('array' === node.parent.type) {

+            // delete data

+            node.parent.value.value.splice(node.label, 1);

+            node.parent.children.splice(node.label, 1);

+

+            // update node index

+            node.parent.children.forEach((childNode, index) => childNode.label = index);

+        } else if ('map' === node.parent.type) {

+            delete node.parent.value.value[node.label];

+            for (let index = 0; index < node.parent.children.length; index++) {

+                const element = node.parent.children[index];

+                if (element.label === node.label) {

+                    node.parent.children.splice(index, 1);

+                    break;

+                }

+            }

+        }

+    }

+

+    public canInsert(node: any) {

+        if (node.value.valueSource !== ValueSource[ValueSource.Definition]) {

+            return false;

+        } else {

+            return this.isArrayObject(node) || this.isDynamicObject(node);

+        }

+    }

+

+    public canDelete(node: any) {

+        const parent = node.parent;

+        if (parent &&

+            (this.isArrayObject(parent) || this.isDynamicObject(parent))) {

+            return true;

+        } else {

+            return false;

+        }

+    }

+

+    public getObjectValueSource(): ValueSource[] {

+        const result = [];

+        this.valueSource.forEach(source => {

+            if (ValueSource.String != source) {

+                result.push(source);

+            }

+        });

+        result.push(ValueSource.Definition);

+        return result;

+    }

+

+    private isArrayObject(node: any): boolean {

+        return node.type === 'array';

+    }

+

+    private isDynamicObject(node: any): boolean {

+        return node.type === 'map';

+    }

+}

diff --git a/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.html b/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.html
deleted file mode 100644
index 42715629..00000000
--- a/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.html
+++ /dev/null
@@ -1,52 +0,0 @@
-
-<p-tree *ngIf="parameters.length > 0" [value]="parameters">
-        <ng-template let-node pTemplate="default">
-            <div class="row">
-                <div class="col-md-11">
-
-                    <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]="valueSource" [planItems]="planItems"
-                        [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)" (delete)="deleteTreeNode(node)"></b4t-parameter>
-                </div>
-            </div>
-        </ng-template>
-
-        <ng-template let-node  pTemplate="array">
-            <div class="row">
-                <div class="col-md-11">
-                    <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]= "getObjectValueSource()"
-                    [planItems]="planItems" [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)"
-                    (delete)="deleteTreeNode(node)"></b4t-parameter>
-                </div>
-                <div class="col-md-1">
-                    <i class="fa fa-plus-square-o" (click)="addChildNode4ObjectArray(node)"></i>
-                </div>
-            </div>
-        </ng-template>
-
-        <ng-template let-node pTemplate="object">
-            <div class="row">
-                <div class="col-md-11">
-                    <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]= "getObjectValueSource()"
-                    [planItems]="planItems" [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)"
-                    (delete)="deleteTreeNode(node)"></b4t-parameter>
-                </div>
-                <div *ngIf="canAdd(node)" class="col-md-1">
-                    <i class="fa fa-plus-square-o" (click)="addChildNode4DynamicObject(node)"></i>
-                </div>
-            </div>
-
-        </ng-template>
-
-        <ng-template let-node pTemplate="map">
-            <div class="row">
-                <div class="col-md-11">
-                    <b4t-parameter [param]="getParameter(node)" [canEditName]="node.keyEditable" [valueSource]= "getObjectValueSource()"
-                    [planItems]="planItems" [canDelete]="canDelete(node)" (paramChange)="paramChange($event, node)"
-                    (delete)="deleteTreeNode(node)"></b4t-parameter>
-                </div>
-                <div *ngIf="canAdd(node)" class="col-md-1">
-                    <i *ngIf="canAdd(node)" class="fa fa-plus-square-o" (click)="addChildNode4DynamicObject(node)"></i>
-                </div>
-            </div>
-        </ng-template>
-    </p-tree>
diff --git a/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.ts b/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.ts
deleted file mode 100644
index 77da46b7..00000000
--- a/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.ts
+++ /dev/null
@@ -1,250 +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, Output, SimpleChange, SimpleChanges } from '@angular/core';
-import { TreeNode } from 'primeng/primeng';
-
-import { PlanTreeviewItem } from '../../model/plan-treeview-item';
-import { ValueSource } from '../../model/value-source.enum';
-import { ValueType } from '../../model/value-type.enum';
-import { Parameter } from '../../model/workflow/parameter';
-import { RestTask } from '../../model/workflow/rest-task';
-import { SwaggerTreeConverterService } from '../../services/swagger-tree-converter.service';
-import { WorkflowUtil } from '../../util/workflow-util';
-import { Swagger } from "../../model/swagger";
-import { WorkflowConfigService } from "../../services/workflow-config.service";
-import { RestService } from '../../services/rest.service';
-
-/**
- * parameter tree presents parameter of task node's input and output parameters.
- */
-@Component({
-    selector: 'b4t-parameter-tree',
-    styleUrls: ['./parameter-tree.component.css'],
-    templateUrl: 'parameter-tree.component.html',
-})
-export class ParameterTreeComponent implements OnChanges {
-    @Input() public parameters: TreeNode[];
-    @Input() public task: RestTask;
-    @Input() public defaultValueSource: string;
-    @Input() public valueSource: ValueSource[];
-    @Input() public planItems: PlanTreeviewItem[];
-    @Input() public restConfigId: string;
-
-    constructor(private restService: RestService, private swaggerTreeConverterService: SwaggerTreeConverterService) { }
-
-    public ngOnChanges(changes: SimpleChanges) {
-        // const changeParameters = changes['parameters'];
-        // if (changeParameters && 0 < changeParameters.currentValue.length) {
-        //     this.formatParam(changeParameters.currentValue);
-        // }
-    }
-
-    public getParameter(node: any): Parameter {
-        return new Parameter(node.label,node.value.value, node.value.valueSource, node.definition.type);
-    }
-
-
-    public paramChange(param: Parameter, node: any) {
-        node.value.valueSource = param.valueSource;
-        node.value.value = param.value;
-
-        this.objectParameterChange(node);
-
-        if (node.label !== param.name) {
-            delete node.parent.value.value[node.label];
-            node.label = param.name;
-        }
-        if (node.parent) {
-            node.parent.value.value[node.label] = node.value;
-        } else {
-            console.warn('Node.parent does not exists!' + JSON.stringify(node));
-        }
-
-    }
-
-    private objectParameterChange(node: any) {
-      if(node.value.valueSource === ValueSource[ValueSource.Definition]) { // value will be set by node defintion
-        const treeNode = this.swaggerTreeConverterService.schema2TreeNode(this.getSwagger(), node.label, node.definition, node.value);
-        node.value = treeNode.value;
-        node.children = treeNode.children;
-      } else {  // parameter value will be set by param
-        node.children = [];
-      }
-    }
-
-    private getSwagger(): Swagger {
-        return this.restService.getSwaggerInfo(this.restConfigId);
-    }
-
-    public getKeyParameter(node: any) {
-        return new Parameter('key', node.label, ValueSource[ValueSource.String], ValueType[ValueType.String]);
-    }
-
-    public keyParameterChange(node: any, parameter: Parameter) {
-        node.label = parameter.value;
-        this.propertyKeyChanged(node, parameter.value);
-    }
-
-    public getValueParameter(node: any, key: string) {
-        const nodeValue = node[key] ? node[key] : {
-            value: '',
-            valueSource: ValueSource[ValueSource.String],
-        };
-        node[key] = nodeValue;
-        return nodeValue;
-    }
-
-    public valueParameterChange(node: any, key: string, parameter: Parameter) {
-        node[key].value = parameter.value;
-        node[key].valueSource = parameter.valueSource;
-    }
-
-    public addChildNode4DynamicObject(node: any) {
-        const copyItem = WorkflowUtil.deepClone(node.definition.additionalProperties);
-        const key = Object.keys(node.value.value).length;
-
-        const childrenNode = this.swaggerTreeConverterService
-            .schema2TreeNode(this.getSwagger(), key, copyItem);
-
-        childrenNode.keyEditable = true;
-        node.value.value[key] = childrenNode.value;
-
-        node.children.push(childrenNode);
-    }
-
-    public propertyKeyChanged(node: any, newKey: string) {
-        const value = node.parent.value.value[node.label];
-        node.parent.value.value[newKey] = value;
-        delete node.parent.value.value[node.label];
-
-        node.label = newKey;
-    }
-
-    public addChildNode4ObjectArray(node: any) {
-        const copyItem = WorkflowUtil.deepClone(node.definition.items);
-
-        const childrenNode = this.swaggerTreeConverterService
-            .schema2TreeNode(
-            this.getSwagger(),
-            node.children.length,
-            copyItem);
-
-        node.value.value.push(childrenNode.value);
-        node.children.push(childrenNode);
-    }
-
-    public deleteTreeNode(node: any) {
-        if ('array' === node.parent.type) {
-            // delete data
-            node.parent.value.value.splice(node.label, 1);
-            node.parent.children.splice(node.label, 1);
-
-            // update node index
-            node.parent.children.forEach((childNode, index) => childNode.label = index);
-        } else if ('map' === node.parent.type) {
-            delete node.parent.value.value[node.label];
-            for (let index = 0; index < node.parent.children.length; index++) {
-                const element = node.parent.children[index];
-                if (element.label === node.label) {
-                    node.parent.children.splice(index, 1);
-                    break;
-                }
-            }
-        }
-    }
-
-    public canEditValue(node: any): boolean {
-        return node.children.length === 0;
-    }
-
-    public editNode(node: any) {
-      node.editing = true;
-    }
-
-    public editComplete(node: any) {
-      node.editing = false;
-
-      const newValueObj = JSON.parse(node.tempValue);
-      for (const key in node.value.value) {
-          delete node.value.value[key];
-      }
-
-      for (const key in newValueObj) {
-          node.value.value[key] = newValueObj[key];
-      }
-
-      // delete all children nodes
-
-      // add new nodes by new value
-
-    }
-
-
-
-    public canDelete(node: any) {
-        const parent = node.parent;
-        if (parent &&
-            (this.isArrayObject(parent) || this.isDynamicObject(parent))) {
-            return true;
-        } else {
-            return false;
-        }
-    }
-
-    public updateObjectValue(node: any, value: string) {
-        node.tempValue = value;
-        // const newValueObj = JSON.parse(value);
-        // for (const key in node.parameter.value) {
-        //     delete node.parameter.value[key];
-        // }
-
-        // for (const key in newValueObj) {
-        //     node.parameter.value[key] = newValueObj[key];
-        // }
-    }
-
-    public getObjectValue(node) {
-        return JSON.stringify(node.value.value);
-    }
-
-    public getObjectValueSource(): ValueSource[] {
-      const result = [];
-      result.push(ValueSource.Definition);
-      this.valueSource.forEach(source => result.push(source));
-      return result;
-    }
-
-    public canAdd(node: any) {
-        return this.isArrayObject(node) || this.isDynamicObject(node);
-    }
-
-    private isArrayObject(node: any): boolean {
-        return node.type === 'array';
-    }
-
-    private isDynamicObject(node: any): boolean {
-        return node.type === 'map';
-    }
-
-    public getWidth(node: any) {
-        if(this.canAdd(node)) {
-            return {
-                'col-md-11': true
-            };
-        } else {
-            return {
-                'col-md-12': true
-            };
-        }
-    }
-}
diff --git a/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.css b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css
index cda8b0cc..fdcd38d7 100644
--- a/sdc-workflow-designer-ui/src/app/components/parameter-tree/parameter-tree.component.css
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.css
@@ -9,6 +9,30 @@
  * Contributors:

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

  */

-.ui-treenode-label {

-    width: calc(100% - 32px) !important;

+ .form-control-label{

+    margin-bottom: 0;

+    width: 100px;

+    vertical-align: middle;

+}

+

+.parameter-item{

+    display: inline;

+    margin-left: 5px;

+    vertical-align: middle;

+}

+

+.form-control-required{

+    color: red;

+    height: 30px;

+    line-height: 30px;

+}

+

+.form-control-input{

+    width: 120px;

+    vertical-align: middle;

+}

+

+.form-control-value{

+    width: 160px;

+    display: inline-block;

 }

diff --git a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html
index 3c9f1858..72e77990 100644
--- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.html
@@ -12,29 +12,37 @@
  */

 -->

 

-<div class="form-group row">

-    <div *ngIf="showLabel" class="col-md-3 text-md-right">

-        <input *ngIf="canEditName" class="form-control" type="text" [(ngModel)]="param.name">

+<div class="form-group">

+    <div *ngIf="showLabel" class="parameter-item" style="margin:0;">

+        <label *ngIf="true === param.required" class="form-control-required">*</label>

+        <input *ngIf="canEditName" class="form-control form-control-input" type="text" [ngModel]="param.name" (ngModelChange)="keyChange($event)">

         <label *ngIf="!canEditName" class="form-control-label">{{param.name}}</label>

     </div>

-    <div [ngClass]="valueGroupClass">

-        <div [ngSwitch]="param.valueSource">

-            <input *ngSwitchCase="sourceEnum[sourceEnum.String]" [ngClass]="valueClass" class="form-control"

-                type="text" [ngModel]="param.value" (ngModelChange)="valueChange($event)">

-            <input *ngSwitchCase="sourceEnum[sourceEnum.Variable]" [ngClass]="valueClass" class="form-control"

-                type="text" [ngModel]="param.value" (ngModelChange)="valueChange($event)">

-            <!-- TODO add plan and Top parameters -->

-            <tree-select *ngSwitchCase="sourceEnum[sourceEnum.Plan]" name="simpleSelect" [items]="planOptions"

-                childrenField="children" #simpleSelect="ngModel" [ngClass]="valueClass" class="tree-select-class"

-                [ngModel]="planValue" (ngModelChange)="valueChange($event)"></tree-select>

+    <div class="parameter-item">

+        <div *ngIf="showValue" [ngSwitch]="param.valueSource" class="parameter-item">

+            <input *ngSwitchCase="sourceEnum[sourceEnum.String]" class="form-control form-control-value" type="text" [ngModel]="param.value"

+                (ngModelChange)="valueChange($event)">

+            <input *ngSwitchCase="sourceEnum[sourceEnum.Variable]" class="form-control form-control-value" type="text" [ngModel]="param.value"

+                (ngModelChange)="valueChange($event)">

+            <tree-select *ngSwitchCase="sourceEnum[sourceEnum.Plan]" name="simpleSelect" style="vertical-align:top;" [items]="planOptions" childrenField="children"

+                #simpleSelect="ngModel" class="form-control-value" [ngModel]="planValue" (ngModelChange)="valueChange($event)"></tree-select>

+            <select *ngSwitchCase="sourceEnum[sourceEnum.Topology]" class="form-control form-control-value" type="text" [ngModel]="param.value"

+                (ngModelChange)="valueChange($event)">

+                <option *ngFor="let topology of topologyOptions" value="{{topology.value}}">{{topology.name}}</option>

+            </select>

         </div>

-        <select *ngIf="showValueSource" class="form-control col-md-4" type="text" [ngModel]="param.valueSource"

+        <select *ngIf="showValueSource" class="form-control parameter-item" style="width:auto;" type="text" [ngModel]="param.valueSource"

             (ngModelChange)="valueSourceChange($event)">

             <option *ngFor="let sourceType of valueSource" value="{{sourceEnum[sourceType]}}">{{sourceEnum[sourceType]}}</option>

         </select>

     </div>

-    <div *ngIf="canDelete" class="col-md-2">

-        <button type="button" class="btn oes-red-bg pull-right" (click)="deleteParam()">

+    <div *ngIf="canInsert" class="parameter-item">

+        <button type="button" class="btn blue1" (click)="insertParam()">

+            <i class="fa fa-plus"></i>

+        </button>

+    </div>

+    <div *ngIf="canDelete" class="parameter-item">

+        <button type="button" class="btn oes-red-bg" (click)="deleteParam()">

             <i class="fa fa-minus"></i>

         </button>

     </div>

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 9f4c6d1e..35dfbf1e 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
@@ -10,12 +10,11 @@
  *     ZTE - initial API and implementation and/or initial documentation

  */

 

-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';

 

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

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

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

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

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

 

 /**

  * this component contains in property component if the corresponding node has parameter properties

@@ -23,41 +22,53 @@ import { PlanTreeviewItem } from "../../model/plan-treeview-item";
  */

 @Component({

     selector: 'b4t-parameter',

+    styleUrls: ['./parameter.component.css'],

     templateUrl: 'parameter.component.html',

 })

-export class ParameterComponent implements OnInit {

+export class ParameterComponent implements OnChanges, OnInit {

     @Input() public param: Parameter;

     @Input() public valueSource: ValueSource[];

     @Input() public canEditName: boolean;

     @Input() public showLabel = true;

+    @Input() public canInsert: boolean;

     @Input() public canDelete: boolean;

     @Input() public planItems: PlanTreeviewItem[];

     @Output() public paramChange = new EventEmitter<Parameter>();

+    @Output() insert: EventEmitter<Parameter> = new EventEmitter<Parameter>();

     @Output() delete: EventEmitter<Parameter> = new EventEmitter<Parameter>();

 

     public sourceEnum = ValueSource;

     public valueGroupClass;

     public valueClass;

-    public showValueSource: boolean = true;

-    public planValue: any = {};

+    public valueSourceClass;

     public planOptions = [];

+    public topologyOptions: { name: string, value: string }[] = [];

+    public showValue = true;

+    public showValueSource = true;

+    public planValue: any = {};

 

-    constructor(private dataAccessService: DataAccessService) { }

+    constructor() { }

+

+    public ngOnChanges(changes: SimpleChanges): void {

+        // if (changes.canInsert && !changes.canInsert.isFirstChange()) {

+        //     this.resetValueGroupClass(changes.canInsert.currentValue, this.canDelete);

+        // }

+        // if (changes.canDelete && !changes.canDelete.isFirstChange()) {

+        //     this.resetValueGroupClass(this.canInsert, changes.canDelete.currentValue);

+        // }

+    }

 

     public ngOnInit(): void {

+        // console.warn('Parameter OnInit, parameter name is:' + this.param.name);

         if (1 === this.valueSource.length) {

             this.showValueSource = false;

         }

-        this.valueClass = {

-            'col-md-8': this.showValueSource,

-            'col-md-12': !this.showValueSource

-        };

-

-        this.valueGroupClass = {

-            'col-md-7': this.canDelete,

-            'col-md-9': !this.canDelete

-        };

-

+        // this.valueClass = {

+        //     'col-md-7': this.showValueSource,

+        //     'col-md-12': !this.showValueSource

+        // };

+        // this.resetValueGroupClass(this.canInsert, this.canDelete);

+        this.updateValueSource(this.param.valueSource);

         // trans plan options to tree view items.

         this.initPlanTreeviewItems(this.planItems);

         if (ValueSource[ValueSource.Plan] === this.param.valueSource) {

@@ -65,29 +76,57 @@ export class ParameterComponent implements OnInit {
         }

     }

 

-    public deleteParam(): void {

-        this.delete.emit();

-    }

-

-    public valueSourceChange(valueSource: string) {

-        this.param.valueSource = valueSource;

-        this.valueChange(null);

+    public keyChange(key: string) {

+        this.param.name = key;

+        this.paramChange.emit(this.param);

     }

 

     public valueChange(value: any) {

         if (ValueSource[ValueSource.Plan] === this.param.valueSource) {

-            if (value !== null && 'object' === typeof (value)) {

+            if ('object' === typeof (value)) {

                 this.planValue = value;

+                this.param.value = value.id;

             } else {

-                this.planValue = {};

+                this.planValue = { id: '' };

+                this.param.value = '';

             }

-            this.param.value = this.planValue.id;

         } else {

             this.param.value = value;

         }

         this.paramChange.emit(this.param);

     }

 

+    public valueSourceChange(valueSource: string) {

+        this.updateValueSource(valueSource);

+        this.param.valueSource = valueSource;

+        this.valueChange('');

+    }

+

+    public insertParam(): void {

+        this.insert.emit();

+    }

+

+    public deleteParam(): void {

+        this.delete.emit();

+    }

+

+    private updateValueSource(valueSource: string):void{

+        if(ValueSource[ValueSource.Definition] === valueSource){

+            this.showValue = false;

+        }else{

+            this.showValue = true;

+        }

+        // this.resetValueSourceClass(this.showValue);

+    }

+

+    private resetValueGroupClass(canInsert: boolean, canDelete: boolean): void {

+        // this.valueGroupClass = {

+        //     'col-md-5': canInsert && canDelete,

+        //     'col-md-7': (canInsert && !canDelete) || (!canInsert && canDelete),

+        //     'col-md-9': !canInsert && !canDelete

+        // };

+    }

+

     private initPlanTreeviewItems(planTreeviewItems: PlanTreeviewItem[]): void {

         this.planOptions = this.getTreeviewChild(planTreeviewItems);

     }

@@ -110,5 +149,4 @@ export class ParameterComponent implements OnInit {
         });

         return treeviewItems;

     }

-

 }

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 b5c07531..4487e0b3 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;
@@ -27,7 +27,7 @@
     -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
     box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
     border-radius: 0;
-    overflow-y: scroll;
+    overflow: auto;
 }
 
 .edit {
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 19d0dce1..99f14b56 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">
@@ -21,19 +21,21 @@
             </button>
         </div>
     </div>
-    <hr>
-
+    <!-- <hr>
     <div class="form-group row">
-        <label class="col-md-2 form-control-label text-md-right" for="nodeType">Type</label>
-        <div class="col-md-10">
-            <input class="form-control" name="nodeType" disabled type="text" value="{{node.type}}"/>
+        <label class="col-md-3 form-control-label text-md-right" for="nodeType">{{'WORKFLOW.NODE_TYPE' | translate}}</label>
+        <div class="col-md-9">
+            <select class="form-control" id="nodeType" [(ngModel)]="node.type">
+                <option *ngFor="let t of nodeTypes" value="{{t}}">{{t}}</option>
+            </select>
         </div>
-    </div>
+    </div> -->
 
-    <!-- TODO  add property for different node types -->
-
-    <b4t-start-event-parameters *ngIf="'startEvent' == node.type" [node]="node"></b4t-start-event-parameters>
-    <b4t-rest-task *ngIf="node.type == 'restTask'" [node]="node" [planItems]="planItems"></b4t-rest-task>
-    <b4t-intermediate-catch-event *ngIf="'intermediateCatchEvent' == node.type" [node]="node"></b4t-intermediate-catch-event>
-    <b4t-script-task *ngIf="node.type == 'scriptTask'" [node]="node"></b4t-script-task>
+    <hr>
+    <div [ngSwitch]="node.type">
+        <b4t-start-event *ngSwitchCase="nodeType[nodeType.startEvent]" [node]="node"></b4t-start-event>
+        <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>
+    </div>
 </div>
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 d3a6a416..c49b4661 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
@@ -10,13 +10,17 @@
  *     ZTE - initial API and implementation and/or initial documentation
  */
 
-import { AfterViewInit, Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/primeng';
 
+import { PlanTreeviewItem } from '../../model/plan-treeview-item';
+import { ValueSource } from '../../model/value-source.enum';
+import { NodeType } from '../../model/workflow/node-type.enum';
+import { Parameter } from '../../model/workflow/parameter';
 import { WorkflowNode } from '../../model/workflow/workflow-node';
 import { BroadcastService } from '../../services/broadcast.service';
 import { JsPlumbService } from '../../services/jsplumb.service';
-import { PlanTreeviewItem } from "../../model/plan-treeview-item";
-import { ModelService } from "../../services/model.service";
+import { ModelService } from '../../services/model.service';
 
 /**
  * property component presents information of a workflow node.
@@ -28,23 +32,38 @@ import { ModelService } from "../../services/model.service";
     styleUrls: ['./properties.component.css'],
     templateUrl: 'properties.component.html',
 })
-export class PropertiesComponent implements AfterViewInit {
+export class PropertiesComponent implements OnInit {
     public node: WorkflowNode;
+    public planTreeviewItems: PlanTreeviewItem[];
+    public nodeType = NodeType;
+    // public nodeTypes: string[] = WorkflowNodeType;
     public show = false;
     public titleEditing = false;
-    public planItems: PlanTreeviewItem[];
+    public valueSource = [ValueSource.String];
 
     constructor(private broadcastService: BroadcastService,
-                private jsPlumbService: JsPlumbService,
-                private modelService: ModelService) {
+        private modelService: ModelService,
+        private jsPlumbService: JsPlumbService) {
 
     }
 
-    public ngAfterViewInit() {
-        this.broadcastService.showProperty$.subscribe(show => this.show = show);
-        this.broadcastService.nodeProperty$.subscribe(node => {
-            this.node = node;
-            this.planItems = this.modelService.getPlanParameters(this.node.id);
+    public ngOnInit() {
+        this.broadcastService.showProperty$.subscribe(element => {
+            if (element && this.modelService.isNode(element)) {
+                this.node = element as WorkflowNode;
+                // temporarily, if config info not exists then close the property panel
+                // TODOS: 1) save config info in case config info no exists on a different environment.
+                //        2) display property panel even if config info not exists for it may be adjust.
+                try {
+                  this.planTreeviewItems = this.modelService.getPlanParameters(this.node.id);
+                  this.show = true;
+                } catch (error) {
+                  this.show = false;
+                    console.log(error);
+                }
+            } else {
+                this.show = false;
+            }
         });
     }
 
diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.ts b/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.ts
deleted file mode 100644
index 8e8cc94f..00000000
--- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.ts
+++ /dev/null
@@ -1,79 +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, OnInit, Output } from '@angular/core';
-import { TreeNode } from 'primeng/primeng';
-
-import { Swagger } from '../../../../model/swagger';
-import { RestTask } from '../../../../model/workflow/rest-task';
-import { BroadcastService } from '../../../../services/broadcast.service';
-import { RestParameter } from "../../../../model/workflow/rest-parameter";
-import { ValueSource } from "../../../../model/value-source.enum";
-import { SwaggerTreeConverterService } from "../../../../services/swagger-tree-converter.service";
-import { PlanTreeviewItem } from "../../../../model/plan-treeview-item";
-import { WorkflowConfigService } from "../../../../services/workflow-config.service";
-import { RestService } from '../../../../services/rest.service';
-
-/**
- * property component presents information of a workflow node.
- * the presented information can be edit in this component.
- * it may load information dynamically. the content may be different for different node type.
- */
-@Component({
-    selector: 'b4t-rest-task-parameters',
-    templateUrl: 'rest-task-parameters.component.html',
-})
-export class RestTaskParametersComponent implements OnInit {
-    @Input() public task: RestTask;
-    @Input() public planItems: PlanTreeviewItem[];
-
-    public inputSources: ValueSource[] = [ValueSource.String, ValueSource.Variable, ValueSource.Plan];
-    public requestParameters: RestParameter[] = []; // not include body parameter
-    public bodyParameter: TreeNode[] = [];
-    public responseParameter: TreeNode[] = [];
-    public valueSource = ValueSource;
-
-    private index = 1;
-
-    constructor(private broadcastService: BroadcastService,
-        private restService: RestService,
-        private swaggerTreeConverterService: SwaggerTreeConverterService) {
-    }
-
-    public ngOnInit() {
-        this.broadcastService.nodeTaskChange$.subscribe(() => {
-            this.resetRequestParams();
-            this.resetResponseParams();
-        });
-    }
-
-    public resetRequestParams() {
-        this.requestParameters = [];
-        this.bodyParameter = [];
-
-        this.task.parameters.forEach(param => {
-            if (param.position === 'body') {
-                const requestTreeNode = this.swaggerTreeConverterService
-                    .schema2TreeNode(this.restService.getSwaggerInfo(this.task.restConfigId), 'Request Param', param.schema, param.value);
-                param.value = requestTreeNode.value;
-                param.value = param.schema.value;
-                this.bodyParameter.push(requestTreeNode);
-            } else {
-                this.requestParameters.push(param);
-            }
-        });
-    }
-
-    public resetResponseParams() {
-        // TODO add response body handler
-    }
-}
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 332811b5..99b8a0f4 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
@@ -15,9 +15,8 @@
 <div class="form-group row">
 	<label class="col-md-3 form-control-label text-md-right">Service</label>
 	<div class="col-md-9">
-		<select class="form-control" [ngModel]="selectedMicroservice"
-				(ngModelChange)="serviceChanged($event)">
-			<option *ngFor="let microservice of microservices" [ngValue]=microservice>{{getText4Microservice(microservice)}}</option>
+		<select class="form-control" [ngModel]="node.restConfigId" (ngModelChange)="serviceChanged($event)">
+			<option *ngFor="let restConfig of restService.getRestConfigs()" value="{{restConfig.id}}">{{restConfig.id}}</option>
 		</select>
 	</div>
 </div>
@@ -25,8 +24,7 @@
 <div class="form-group row">
 	<label class="col-md-3 form-control-label text-md-right">Path</label>
 	<div class="col-md-9">
-		<select class="form-control" [ngModel]="node.url"
-				(ngModelChange)="urlChanged($event)">
+		<select class="form-control" [ngModel]="node.path" (ngModelChange)="pathChanged($event)">
 			<option *ngFor="let interface of restInterfaces" value="{{interface}}">{{interface}}</option>
 		</select>
 	</div>
@@ -35,8 +33,7 @@
 <div class="form-group row">
 	<label class="col-md-3 form-control-label text-md-right">Method</label>
 	<div class="col-md-9">
-		<select class="form-control" [ngModel]="node.method"
-				(ngModelChange)="methodChanged($event)">
+		<select class="form-control" [ngModel]="node.method" (ngModelChange)="methodChanged($event)">
 			<option *ngFor="let operation of restOperations" value="{{operation}}">{{operation}}</option>
 		</select>
 	</div>
@@ -44,5 +41,5 @@
 <hr>
 
 <div class="ui-fluid">
-    <b4t-rest-task-parameters [task]="node" [planItems]="planItems"></b4t-rest-task-parameters>
+	<b4t-node-parameters [restConfigId]="this.node.restConfigId" [swaggerInput]="this.node.parameters" [swaggerOutput]="this.node.responses" [planItems]="planItems"></b4t-node-parameters>
 </div>
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 eb1c81bd..dfb2f0f3 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
@@ -71,6 +71,8 @@ export class RestTaskComponent implements OnInit {
                     this.restInterfaces.push(key);
                 }
                 this.loadOperations();
+            } else {
+                console.log('swagger not exist');
             }
         }
     }
diff --git a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.html b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html
index d13a2623..d10128c7 100644
--- a/sdc-workflow-designer-ui/src/app/components/property/rest-task/rest-task-parameters/rest-task-parameters.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.html
@@ -1,18 +1,25 @@
-<!--
-/*******************************************************************************
- * 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
- *******************************************************************************/
--->
-<b4t-parameter *ngFor="let param of requestParameters" [param]="param" [valueSource]= "inputSources" [planItems]="planItems"></b4t-parameter>
-
-<!-- body parameter -->
-<b4t-parameter-tree [task]="task" [parameters]="bodyParameter" [valueSource]="inputSources"
-    [planItems]="planItems" [defaultValueSource]="valueSource[valueSource.String]"></b4t-parameter-tree>
+<!--

+/*******************************************************************************

+ * 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">

+    <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>

diff --git a/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts
new file mode 100644
index 00000000..96701625
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/components/property/start-event/start-event.component.ts
@@ -0,0 +1,36 @@
+/*******************************************************************************

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

+import { Subscription } from 'rxjs/Subscription';

+

+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 { WorkflowUtil } from '../../../util/workflow-util';

+

+@Component({

+    selector: 'b4t-start-event',

+    templateUrl: 'start-event.component.html',

+})

+export class StartEventComponent {

+    @Input() public node: StartEvent;

+    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);

+    }

+}