paramters can quote input parameter of start event

rest task input parameters can quote input parameters of start event Issue-ID: SDC-122 Change-Id: I0cda0f1967514ac90e377b2f054ddf2cef011694 Signed-off-by: Lvbo163 <lv.bo163@zte.com.cn>
author: Lvbo163 <lv.bo163@zte.com.cn> 2017-09-06 17:31:15 +0800
committer: Lvbo163 <lv.bo163@zte.com.cn> 2017-09-06 17:31:15 +0800
commit: b8932e8304ed077912949890c3ec47a087be7ddd (patch)
tree: 7ac38d7bed907a3ca60e26c307bda953051a114a
parent: 15f0e4fa63bb1fd533091d9ab85d3612752c2d27 (diff)
24 files changed, 2139 insertions, 25 deletions
diff --git a/sdc-workflow-designer-ui/.angular-cli.json b/sdc-workflow-designer-ui/.angular-cli.json
index fb634b70..453d3612 100644
--- a/sdc-workflow-designer-ui/.angular-cli.json
+++ b/sdc-workflow-designer-ui/.angular-cli.json
@@ -23,6 +23,7 @@
                 "../node_modules/font-awesome/css/font-awesome.min.css",
                 "../node_modules/primeng/resources/primeng.min.css",
                 "../node_modules/primeng/resources/themes/bootstrap/theme.css",
+                "ngict-component.css",
                 "styles.css"
             ],
             "scripts": [],
diff --git a/sdc-workflow-designer-ui/package-lock.json b/sdc-workflow-designer-ui/package-lock.json
index 56922e31..bd501c05 100644
--- a/sdc-workflow-designer-ui/package-lock.json
+++ b/sdc-workflow-designer-ui/package-lock.json
@@ -4940,6 +4940,11 @@
       "resolved": "http://10.75.8.148/repository/npm-pub/ngx-bootstrap/-/ngx-bootstrap-1.9.1.tgz",
       "integrity": "sha1-Ce0G2Qj187sj+CGg+0UumhfXZls="
     },
+    "ngx-tree-select": {
+      "version": "0.11.1",
+      "resolved": "http://10.75.8.148/repository/npm-pub/ngx-tree-select/-/ngx-tree-select-0.11.1.tgz",
+      "integrity": "sha1-r2hQgxyUPZDznDotDvIpYh7DH5M="
+    },
     "no-case": {
       "version": "2.3.1",
       "resolved": "http://registry.npm.taobao.org/no-case/download/no-case-2.3.1.tgz",
diff --git a/sdc-workflow-designer-ui/package.json b/sdc-workflow-designer-ui/package.json
index 2b8cf2bd..4ee3d5ee 100644
--- a/sdc-workflow-designer-ui/package.json
+++ b/sdc-workflow-designer-ui/package.json
@@ -27,6 +27,7 @@
     "font-awesome": "^4.7.0",
     "jsplumb": "2.5.0",
     "ngx-bootstrap": "^1.9.1",
+    "ngx-tree-select": "^0.11.1",
     "primeng": "^4.2.0-rc.1",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.14"
diff --git a/sdc-workflow-designer-ui/src/app/app.module.ts b/sdc-workflow-designer-ui/src/app/app.module.ts
index 32af5d0e..0bf4b14c 100644
--- a/sdc-workflow-designer-ui/src/app/app.module.ts
+++ b/sdc-workflow-designer-ui/src/app/app.module.ts
@@ -12,6 +12,7 @@
 
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { NgxTreeSelectModule } from 'ngx-tree-select';
 
 import { AppComponent } from './app.component';
 import { JsPlumbService } from "./services/jsplumb.service";
@@ -67,6 +68,15 @@ import { SwaggerTreeConverterService } from "./services/swagger-tree-converter.s
         ModalModule.forRoot(),
         RouterModule.forRoot([]),
         SharedModule,
+        NgxTreeSelectModule.forRoot({
+            allowFilter: true,
+            filterPlaceholder: 'Type your filter here...',
+            maxVisibleItemCount: 5,
+            idField: 'id',
+            textField: 'name',
+            childrenField: 'children',
+            allowParentSelection: false
+        })
     ],
     providers: [
         BroadcastService,
diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
index 080a4350..a2d9fd51 100644
--- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
+++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.html
@@ -17,7 +17,7 @@
 </span>
 <span class="row" *ngIf="isEditing()">
     <span class="col-sm-10">
-        <b4t-parameter [param]="parameter" [showLabel]="showLabel" [valueSource]= "valueSource"></b4t-parameter>
+        <b4t-parameter [param]="parameter" [showLabel]="showLabel" [valueSource]= "valueSource" [planItems]="planItems"></b4t-parameter>
     </span>
     <span class="col-sm-2">
         <i class="fa fa-check" (click)="completeEdit()"></i>
diff --git a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts
index 577a8f18..719d2a60 100644
--- a/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/editable-property/editable-property.component.ts
@@ -15,6 +15,7 @@ import { AfterViewInit, Component, EventEmitter, Input, Output } from '@angular/
 import { ValueSource } from '../../model/value-source.enum';
 import { ValueType } from '../../model/value-type.enum';
 import { Parameter} from '../../model/workflow/parameter';
+import { PlanTreeviewItem } from "../../model/plan-treeview-item";
 
 /**
  * property component presents information of a workflow node.
@@ -27,6 +28,7 @@ import { Parameter} from '../../model/workflow/parameter';
 })
 export class EditablePropertyComponent {
     @Input() public parameter: Parameter;
+    @Input() public planItems: PlanTreeviewItem[];
     @Input() public showLabel: boolean;
     @Input() public valueSource: ValueSource[];
     @Output() public parameterChange = new EventEmitter<Parameter>();
diff --git a/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-detail/microservice-detail.component.ts b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-detail/microservice-detail.component.ts
index 3e472175..ec727293 100644
--- a/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-detail/microservice-detail.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/menu/microservice/microservice-detail/microservice-detail.component.ts
@@ -43,8 +43,8 @@ export class MicroserviceDetailComponent implements OnChanges {
     }
 
     private parseSwagger2String() {
-        if (this.microservice.swagger) {
-            this.detail = JSON.stringify(this.microservice.swagger);
+        if (this.microservice.swaggerJson) {
+            this.detail = JSON.stringify(this.microservice.swaggerJson);
         } else {
             this.detail = '';
         }
@@ -56,10 +56,10 @@ export class MicroserviceDetailComponent implements OnChanges {
                 const swagger = new Swagger(JSON.parse(detail));
                 this.detail = detail;
                 console.log(swagger);
-                this.microservice.swagger = swagger;
+                this.microservice.swaggerJson = detail;
             } else {
                 this.detail = '';
-                this.microservice.swagger = null;
+                this.microservice.swaggerJson = null;
             }
         } catch (e) {
             // if detail is not a json object, then not change the swagger
@@ -79,7 +79,8 @@ export class MicroserviceDetailComponent implements OnChanges {
         this.configService.loadDynamicInfo(this.microservice.definition)
         .subscribe(response => {
             try {
-                this.microservice.swagger = new Swagger(response);
+
+                this.microservice.swaggerJson = response;
                 this.parseSwagger2String();
             } catch (e) {
                 console.log('detail transfer error');
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
index e97968df..0a12a600 100644
--- 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
@@ -15,14 +15,14 @@
 <p-tree *ngIf="parameters.length > 0" [value]="parameters">
     <ng-template let-node  pTemplate="default">
         <b4t-parameter [param]="node.parameter" [canEditName]="node.keyEditable" [valueSource]= "valueSource"
-            (paramChange)="paramChange($event, node)"></b4t-parameter>
+            [planItems]="planItems" (paramChange)="paramChange($event, node)"></b4t-parameter>
     </ng-template>
 
     <ng-template let-node  pTemplate="array">
         <span *ngIf="!node.keyEditable">[Array]({{node.children.length}}) {{node.label}}:</span>
         <span *ngIf="node.keyEditable">[Array]({{node.children.length}})
             <b4t-editable-property [parameter]="getKeyParameter(node)"  [showLabel]="false"
-                (parameterChange)="keyParameterChange(node, $event)"></b4t-editable-property>
+                [planItems]="planItems" (parameterChange)="keyParameterChange(node, $event)"></b4t-editable-property>
         </span>
         <i class="fa fa-plus-square-o" (click)="addChildNode4ObjectArray(node)"></i>
     </ng-template>
@@ -30,7 +30,7 @@
         <span *ngIf="!node.keyEditable">[Object] {{node.label}}:</span>
         <span *ngIf="node.keyEditable">[Object]
             <b4t-editable-property [parameter]="getKeyParameter(node)"  [showLabel]="false"
-                (parameterChange)="keyParameterChange(node, $event)"></b4t-editable-property>:
+                [planItems]="planItems" (parameterChange)="keyParameterChange(node, $event)"></b4t-editable-property>:
         </span>
 
         <span *ngIf="canEditValue(node)" class="dynamic-object-value">
@@ -45,7 +45,7 @@
         <span *ngIf="!node.keyEditable">[Map] {{node.label}}:</span>
         <span *ngIf="node.keyEditable">[Map]
             <b4t-editable-property [parameter]="getKeyParameter(node)" [showLabel]="false"
-                (parameterChange)="keyParameterChange(node, $event)"></b4t-editable-property>:
+                [planItems]="planItems" (parameterChange)="keyParameterChange(node, $event)"></b4t-editable-property>:
         </span>
 
         <i *ngIf="canDelete(node)" class="fa fa-minus-square-o" (click)="deleteTreeNode(node)"></i>
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
index f5f098b7..d0e04e39 100644
--- 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
@@ -20,6 +20,7 @@ import { RestParameter } from '../../model/workflow/rest-parameter';
 import { RestTask } from '../../model/workflow/rest-task';
 import { SwaggerTreeConverterService } from '../../services/swagger-tree-converter.service';
 import { WorkflowUtil } from '../../util/workflow-util';
+import { PlanTreeviewItem } from "../../model/plan-treeview-item";
 
 /**
  * parameter tree presents parameter of task node's input and output parameters.
@@ -35,6 +36,7 @@ export class ParameterTreeComponent implements OnChanges {
     @Input() public task: RestTask;
     @Input() public defaultValueSource: string;
     @Input() public valueSource: ValueSource[];
+    @Input() public planItems: PlanTreeviewItem[];
 
     constructor(private swaggerTreeConverterService: SwaggerTreeConverterService) { }
 
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 da7dfb1d..229c5afb 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
@@ -20,9 +20,16 @@
     <div [ngClass]="valueGroupClass">
         <div [ngSwitch]="param.valueSource">
             <input *ngSwitchCase="sourceEnum[sourceEnum.String]" [ngClass]="valueClass" class="form-control"
-                type="text" [ngModel]="param.value" (ngModelChange)="modelChange($event)">
+                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>
+        <select *ngIf="showValueSource" class="form-control col-md-3" 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()">
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 f42caf66..2cd5a0fd 100644
--- a/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
+++ b/sdc-workflow-designer-ui/src/app/components/parameter/parameter.component.ts
@@ -15,6 +15,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 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
@@ -30,6 +31,7 @@ export class ParameterComponent implements OnInit {
     @Input() public canEditName: boolean;
     @Input() public showLabel = true;
     @Input() public canDelete: boolean;
+    @Input() public planItems: PlanTreeviewItem[];
     @Output() public paramChange = new EventEmitter<Parameter>();
     @Output() delete: EventEmitter<Parameter> = new EventEmitter<Parameter>();
 
@@ -37,10 +39,13 @@ export class ParameterComponent implements OnInit {
     public valueGroupClass;
     public valueClass;
     public showValueSource: boolean = true;
+    public planValue: any = {};
+    public planOptions = [];
 
     constructor(private dataAccessService: DataAccessService) { }
 
     public ngOnInit(): void {
+        console.log(this.planItems);
         if (1 === this.valueSource.length) {
             this.showValueSource = false;
         }
@@ -53,15 +58,58 @@ export class ParameterComponent implements OnInit {
             'col-md-7': this.canDelete,
             'col-md-9': !this.canDelete
         };
+
+        // trans plan options to tree view items.
+        this.initPlanTreeviewItems(this.planItems);
+        if (ValueSource[ValueSource.Plan] === this.param.valueSource) {
+            this.planValue = { id: this.param.value };
+        }
     }
 
     public deleteParam(): void {
         this.delete.emit();
     }
 
-    public modelChange(value: any) {
-        this.param.value = value;
-        this.paramChange.emit(this.param)
+    public valueSourceChange(valueSource: string) {
+        this.param.valueSource = valueSource;
+        this.valueChange(null);
+    }
+
+    public valueChange(value: any) {
+        if (ValueSource[ValueSource.Plan] === this.param.valueSource) {
+            if (value !== null && 'object' === typeof (value)) {
+                this.planValue = value;
+            } else {
+                this.planValue = {};
+            }
+            this.param.value = this.planValue.id;
+        } else {
+            this.param.value = value;
+        }
+        this.paramChange.emit(this.param);
+    }
+
+    private initPlanTreeviewItems(planTreeviewItems: PlanTreeviewItem[]): void {
+        this.planOptions = this.getTreeviewChild(planTreeviewItems);
+    }
+
+    private getTreeviewChild(planTreeviewItems: PlanTreeviewItem[]): any[] {
+        let treeviewItems = [];
+        if (undefined == planTreeviewItems || 0 === planTreeviewItems.length) {
+            // todo: debug check if it need [] or undefined.
+            return treeviewItems;
+        }
+        planTreeviewItems.forEach(item => {
+            const treeviewItem = {
+                id: item.value,
+                name: item.name,
+                disabled: false,
+                // !item.canSelect,
+                children: this.getTreeviewChild(item.children)
+            };
+            treeviewItems.push(treeviewItem);
+        });
+        return treeviewItems;
     }
 
 }
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 2ca5c690..bcc63dd0 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
@@ -40,5 +40,5 @@
     <!-- 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"></b4t-rest-task>
+    <b4t-rest-task *ngIf="node.type == 'restTask'" [node]="node" [planItems]="planItems"></b4t-rest-task>
 </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 0630f94b..f3f784a1 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
@@ -16,6 +16,7 @@ import { WorkflowNode } from '../../model/workflow/workflow-node';
 import { BroadcastService } from '../../services/broadcast.service';
 import { JsPlumbService } from '../../services/jsplumb.service';
 import { WorkflowService } from '../../services/workflow.service';
+import { PlanTreeviewItem } from "../../model/plan-treeview-item";
 
 /**
  * property component presents information of a workflow node.
@@ -31,6 +32,7 @@ export class PropertiesComponent implements AfterViewInit {
     public node: WorkflowNode;
     public show = false;
     public titleEditing = false;
+    public planItems: PlanTreeviewItem[];
 
     constructor(private broadcastService: BroadcastService,
                 private jsPlumnService: JsPlumbService,
@@ -40,7 +42,10 @@ export class PropertiesComponent implements AfterViewInit {
 
     public ngAfterViewInit() {
         this.broadcastService.showProperty$.subscribe(show => this.show = show);
-        this.broadcastService.nodeProperty$.subscribe(node => this.node = node);
+        this.broadcastService.nodeProperty$.subscribe(node => {
+            this.node = node;
+            this.planItems = this.workflowService.getPlanParameters(this.node.id);
+        });
     }
 
     public nodeNameChanged() {
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/rest-task/rest-task-parameters/rest-task-parameters.component.html
index 53f02f17..d13a2623 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/rest-task/rest-task-parameters/rest-task-parameters.component.html
@@ -11,8 +11,8 @@
  *     ZTE - initial API and implementation and/or initial documentation
  *******************************************************************************/
 -->
-<b4t-parameter *ngFor="let param of requestParameters" [param]="param" [valueSource]= "inputSources"></b4t-parameter>
+<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"
-    [defaultValueSource]="valueSource[valueSource.String]"></b4t-parameter-tree>
+    [planItems]="planItems" [defaultValueSource]="valueSource[valueSource.String]"></b4t-parameter-tree>
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
index a50cc1be..31b2fd82 100644
--- 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
@@ -19,6 +19,7 @@ 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";
 
 /**
  * property component presents information of a workflow node.
@@ -31,8 +32,9 @@ import { SwaggerTreeConverterService } from "../../../../services/swagger-tree-c
 })
 export class RestTaskParametersComponent implements OnInit {
     @Input() public task: RestTask;
+    @Input() public planItems: PlanTreeviewItem[];
 
-    public inputSources: ValueSource[] = [ValueSource.String];
+    public inputSources: ValueSource[] = [ValueSource.String, ValueSource.Plan];
     public requestParameters: RestParameter[] = []; // not include body parameter
     public bodyParameter: TreeNode[] = [];
     public responseParameter: TreeNode[] = [];
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 af428840..332811b5 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
@@ -44,5 +44,5 @@
 <hr>
 
 <div class="ui-fluid">
-    <b4t-rest-task-parameters [task]="node"></b4t-rest-task-parameters>
+    <b4t-rest-task-parameters [task]="node" [planItems]="planItems"></b4t-rest-task-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 6c264646..d0c92dfd 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
@@ -21,6 +21,7 @@ import { WorkflowConfigService } from '../../../services/workflow-config.service
 import { Microservice } from "../../../model/workflow/microservice";
 import { WorkflowUtil } from "../../../util/workflow-util";
 import { RestParameter } from "../../../model/workflow/rest-parameter";
+import { PlanTreeviewItem } from "../../../model/plan-treeview-item";
 
 @Component({
     selector: 'b4t-rest-task',
@@ -28,6 +29,8 @@ import { RestParameter } from "../../../model/workflow/rest-parameter";
 })
 export class RestTaskComponent implements AfterViewInit, OnInit {
     @Input() public node: RestTask;
+    @Input() public planItems: PlanTreeviewItem[];
+
     public swaggerJson: any = {};
     public restInterfaces: any[];
     public restOperations: 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
new file mode 100644
index 00000000..a1d98500
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/app/model/plan-treeview-item.ts
@@ -0,0 +1,19 @@
+/**
+ * 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
+ */
+
+export class PlanTreeviewItem {
+    constructor(public name: string,
+                public value: string,
+                public children: PlanTreeviewItem[],
+                public canSelect?: boolean) {
+    }
+}
diff --git a/sdc-workflow-designer-ui/src/app/model/workflow/microservice.ts b/sdc-workflow-designer-ui/src/app/model/workflow/microservice.ts
index b4fc1c10..c0cb2586 100644
--- a/sdc-workflow-designer-ui/src/app/model/workflow/microservice.ts
+++ b/sdc-workflow-designer-ui/src/app/model/workflow/microservice.ts
@@ -17,5 +17,5 @@ import { Swagger } from "../swagger";
  * Microservice
  */
 export class Microservice {
-    constructor(public name: string, public version: string, public swagger: Swagger, public definition: string) {}
+    constructor(public name: string, public version: string, public swaggerJson: string, public definition: string) {}
 }
diff --git a/sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts b/sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts
index d2001181..0ad5face 100644
--- a/sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/data-access/in-memory-data.service.ts
@@ -18,12 +18,20 @@ import { InMemoryDbService } from 'angular-in-memory-web-api';
  */
 export class InMemoryDataService implements InMemoryDbService {
     createDb() {
+
+        const swagger = {"swagger":"2.0","info":{"version":"1.0.0","title":"MicroService Bus rest API"},"basePath":"/api/microservices/v1","tags":[{"name":"metrics"},{"name":"iuiRoute"},{"name":"ServiceAccess"},{"name":"ApiRoute"},{"name":"MSB-Service Resource"},{"name":"CustomRoute"}],"paths":{"/apiRoute":{"get":{"tags":["ApiRoute"],"summary":"get all ApiRoute ","description":"","operationId":"getApiRoutes","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/ApiRouteInfo"}}},"500":{"description":"get ApiRouteInfo List  fail","schema":{"type":"string"}}}},"post":{"tags":["ApiRoute"],"summary":"add one ApiRoute ","description":"","operationId":"addApiRoute","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"ApiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/ApiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"400":{"description":"Unprocessable ApiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add ApiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}}}}},"/apiRoute/apiDocs":{"get":{"tags":["ApiRoute"],"summary":"get all Local apiDoc ","description":"","operationId":"getApiDocs","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"type":"string"}}},"500":{"description":"get apiDoc List  fail","schema":{"type":"string"}}}}},"/apiRoute/apiGatewayPort":{"get":{"tags":["ApiRoute"],"summary":"get apiGateway Port ","description":"","operationId":"getApiGatewayPort","produces":["text/plain"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"string"}},"500":{"description":"get apiGateway Port  fail","schema":{"type":"string"}}}}},"/apiRoute/discoverInfo":{"get":{"tags":["ApiRoute"],"summary":"get discover Info ","description":"","operationId":"getServiceDiscoverInfo","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/DiscoverInfo"}},"500":{"description":"get discover Info fail","schema":{"type":"string"}}}}},"/apiRoute/export":{"get":{"tags":["ApiRoute"],"summary":"export all route service Info by json-file","description":"","operationId":"exportService","produces":["text/plain"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"string"}},"500":{"description":"export fail","schema":{"type":"string"}},"406":{"description":" not Acceptable client-side","schema":{"type":"string"}}}}},"/apiRoute/{serviceName}/version/{version}":{"get":{"tags":["ApiRoute"],"summary":"get one ApiRoute ","description":"","operationId":"getApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"500":{"description":"get ApiRouteInfo fail","schema":{"type":"string"}},"404":{"description":"ApiRouteInfo not found","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["ApiRoute"],"summary":"update one ApiRoute by serviceName and version","description":"","operationId":"updateApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"in":"body","name":"body","description":"ApiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/ApiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"400":{"description":"Unprocessable ApiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update ApiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}}}},"delete":{"tags":["ApiRoute"],"summary":"delete one ApiRoute by serviceName and version","description":"","operationId":"deleteApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"}],"responses":{"500":{"description":"delete ApiRouteInfo fail","schema":{"type":"string"}},"204":{"description":"delete ApiRouteInfo succeed "},"404":{"description":"ApiRouteInfo not found","schema":{"type":"string"}}}}},"/apiRoute/{serviceName}/version/{version}/status/{status}":{"put":{"tags":["ApiRoute"],"summary":"update one ApiRoute  status by serviceName and version","description":"","operationId":"updateApiRouteStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"status","in":"path","description":"ApiRoute status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"500":{"description":"update status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}},"404":{"description":"ApiRouteInfo not found","schema":{"type":"string"}}}}},"/customRoute/all":{"get":{"tags":["CustomRoute"],"summary":"get all CustomRoute ","description":"","operationId":"getCustomRoutes","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/CustomRouteInfo"}}},"500":{"description":"get CustomRouteInfo List  fail","schema":{"type":"string"}}}}},"/customRoute/instance":{"get":{"tags":["CustomRoute"],"summary":"get one CustomRoute ","description":"","operationId":"getCustomRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":false,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"500":{"description":"get CustomRoute fail","schema":{"type":"string"}},"404":{"description":"CustomRoute not found","schema":{"type":"string"}},"415":{"description":"Unprocessable CustomRoute Entity ","schema":{"type":"string"}}}},"post":{"tags":["CustomRoute"],"summary":"add one CustomRoute ","description":"","operationId":"addCustomRoute","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"CustomRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/CustomRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"400":{"description":"Unprocessable CustomRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add CustomRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable CustomRouteInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["CustomRoute"],"summary":"update one CustomRoute by serviceName","description":"","operationId":"updateCustomRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":true,"type":"string"},{"in":"body","name":"body","description":"CustomRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/CustomRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"400":{"description":"Unprocessable CustomRoute JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update CustomRoute fail","schema":{"type":"string"}},"415":{"description":"Unprocessable CustomRoute Entity ","schema":{"type":"string"}}}},"delete":{"tags":["CustomRoute"],"summary":"delete one CustomRoute by serviceName","description":"","operationId":"deleteCustomRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":true,"type":"string"}],"responses":{"500":{"description":"delete customRoute fail","schema":{"type":"string"}},"204":{"description":"delete customRoute succeed "},"404":{"description":"customRoute not found","schema":{"type":"string"}}}}},"/customRoute/status":{"put":{"tags":["CustomRoute"],"summary":"update one CustomRoute  status by serviceName ","description":"","operationId":"updateCustomRouteStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":true,"type":"string"},{"name":"status","in":"query","description":"CustomRoute status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"500":{"description":"update status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable customRoute Entity ","schema":{"type":"string"}},"404":{"description":"customRoute not found","schema":{"type":"string"}}}}},"/iuiRoute":{"get":{"tags":["iuiRoute"],"summary":"get all iuiRoute ","description":"","operationId":"getIuiRoutes","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/IuiRouteInfo"}}},"500":{"description":"get iuiRouteInfo List  fail","schema":{"type":"string"}}}},"post":{"tags":["iuiRoute"],"summary":"add one iuiRoute ","description":"","operationId":"addIuiRoute","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"iuiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/IuiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"400":{"description":"Unprocessable iuiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add iuiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable iuiRouteInfo Entity ","schema":{"type":"string"}}}}},"/iuiRoute/{serviceName}":{"get":{"tags":["iuiRoute"],"summary":"get one iuiRoute ","description":"","operationId":"getIuiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"500":{"description":"get IuiRouteInfo fail","schema":{"type":"string"}},"404":{"description":"IuiRouteInfo not found","schema":{"type":"string"}},"415":{"description":"Unprocessable IuiRouteInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["iuiRoute"],"summary":"update one iuiRoute by serviceName","description":"","operationId":"updateIuiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"},{"in":"body","name":"body","description":"iuiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/IuiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"400":{"description":"Unprocessable IuiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update IuiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable IuiRouteInfo Entity ","schema":{"type":"string"}}}},"delete":{"tags":["iuiRoute"],"summary":"delete one iuiRoute by serviceName","description":"","operationId":"deleteIuiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"}],"responses":{"500":{"description":"delete IuiRouteInfo fail","schema":{"type":"string"}},"204":{"description":"delete IuiRouteInfo succeed "},"404":{"description":"IuiRouteInfo not found","schema":{"type":"string"}}}}},"/iuiRoute/{serviceName}/status/{status}":{"put":{"tags":["iuiRoute"],"summary":"update one iuiRoute  status by serviceName ","description":"","operationId":"updateIuiRouteStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"},{"name":"status","in":"path","description":"iuiRoute status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"500":{"description":"update IuiRouteInfo status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable IuiRouteInfo Entity ","schema":{"type":"string"}},"404":{"description":"IuiRouteInfo not found","schema":{"type":"string"}}}}},"/metrics":{"get":{"tags":["metrics"],"summary":"get Metrics Info ","description":"","operationId":"getMetricsInfo","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/MetricsInfo"}}}}},"/serviceaccess/{serviceName}":{"get":{"tags":["ServiceAccess"],"summary":"get the msb access address of the service ","description":"","operationId":"getApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"serviceName","required":true,"type":"string"},{"name":"type","in":"query","description":"service type","required":false,"type":"string","enum":["api","iui","custom","p2p"]},{"name":"version","in":"query","description":"version","required":false,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/ServiceAccessInfo"}},"500":{"description":"get access address error "}}}},"/services":{"get":{"tags":["MSB-Service Resource"],"summary":"get all microservices ","description":"","operationId":"getMicroService","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/MicroServiceFullInfo"}}},"500":{"description":"get microservice List  fail","schema":{"type":"string"}}}},"post":{"tags":["MSB-Service Resource"],"summary":"add one microservice ","description":"","operationId":"addMicroService","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"MicroServiceInfo Instance Info","required":true,"schema":{"$ref":"#/definitions/MicroServiceInfo"}},{"name":"createOrUpdate","in":"query","description":"createOrUpdate","required":false,"type":"boolean","default":"true"},{"name":"port","in":"query","description":"port","required":false,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"400":{"description":"Unprocessable MicroServiceInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add microservice fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}}},"/services/{serviceName}/version/{version}":{"get":{"tags":["MSB-Service Resource"],"summary":"get one microservice ","description":"","operationId":"getMicroService","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"port","in":"query","description":"port","required":false,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"500":{"description":"get microservice fail","schema":{"type":"string"}},"404":{"description":"microservice not found","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["MSB-Service Resource"],"summary":"update one microservice by serviceName and version","description":"","operationId":"updateMicroService","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"in":"body","name":"body","description":"microservice Instance Info","required":true,"schema":{"$ref":"#/definitions/MicroServiceInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"400":{"description":"Unprocessable MicroServiceInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update microservice fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}},"delete":{"tags":["MSB-Service Resource"],"summary":"delete one full microservice by serviceName and version","description":"","operationId":"deleteMicroService","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"port","in":"query","description":"port","required":false,"type":"string"}],"responses":{"500":{"description":"delete microservice fail","schema":{"type":"string"}},"204":{"description":"delete microservice succeed "},"404":{"description":"microservice not found","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}}},"/services/{serviceName}/version/{version}/nodes/{ip}/{port}":{"put":{"tags":["MSB-Service Resource"],"summary":"update  single node by serviceName and version and node","description":"","operationId":"updateNode","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"ip","in":"path","description":"ip","required":true,"type":"string"},{"name":"port","in":"path","description":"port","required":true,"type":"string"},{"name":"ttl","in":"query","description":"ttl","required":false,"type":"integer","format":"int32"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"500":{"description":"update node fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}},"404":{"description":"microservice not found","schema":{"type":"string"}}}},"delete":{"tags":["MSB-Service Resource"],"summary":"delete single node by serviceName and version and node","description":"","operationId":"deleteNode","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"ip","in":"path","description":"ip","required":true,"type":"string"},{"name":"port","in":"path","description":"port","required":true,"type":"string"}],"responses":{"500":{"description":"delete node fail","schema":{"type":"string"}},"204":{"description":"delete node succeed "},"404":{"description":"node not found","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}}},"/services/{serviceName}/version/{version}/status/{status}":{"put":{"tags":["MSB-Service Resource"],"summary":"update  microservice status by serviceName and version","description":"","operationId":"updateServiceStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"status","in":"path","description":"status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"500":{"description":"update status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}},"404":{"description":"microservice not found","schema":{"type":"string"}}}}}},"definitions":{"JVMMetrics":{"type":"object","properties":{"value":{"type":"number","format":"double"}}},"DiscoverInfo":{"type":"object","properties":{"ip":{"type":"string"},"port":{"type":"integer","format":"int32"},"enabled":{"type":"boolean","default":false}}},"IuiRouteInfo":{"type":"object","required":["servers","serviceName","url"],"properties":{"serviceName":{"type":"string"},"url":{"type":"string","example":"/test","description":"Target Service URL,start with /"},"control":{"type":"string","example":"0","description":"[control Range] 0：default   1：readonly  2：hidden ","enum":["0","1","2"]},"status":{"type":"string","example":"1","description":"[status] 1：abled    0：disabled ","enum":["0","1"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"useOwnUpstream":{"type":"string","example":"0","description":"[LB Policy]non_ip_hash:0,ip_hash:1","enum":["0","1"]},"servers":{"type":"array","items":{"$ref":"#/definitions/RouteServer"}}}},"Node":{"type":"object","required":["ip","port"],"properties":{"ip":{"type":"string"},"port":{"type":"string"},"ttl":{"type":"integer","format":"int32"}}},"RouteServer":{"type":"object","required":["ip","port"],"properties":{"ip":{"type":"string"},"port":{"type":"string"},"weight":{"type":"integer","format":"int32"}}},"MicroServiceInfo":{"type":"object","required":["protocol","serviceName","url"],"properties":{"serviceName":{"type":"string"},"version":{"type":"string","example":"v1"},"url":{"type":"string","example":"/api/serviceName/v1","description":"Target Service URL,start with /"},"protocol":{"type":"string","example":"REST","description":"Service Protocol","enum":["REST","UI","MQ","FTP","SNMP","TCP","UDP"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"lb_policy":{"type":"string","example":"hash","description":"lb policy","enum":["round-robin","hash","least_conn"]},"namespace":{"type":"string"},"nodes":{"type":"array","uniqueItems":true,"items":{"$ref":"#/definitions/Node"}}}},"HttpMetrics":{"type":"object","properties":{"count":{"type":"integer","format":"int32"},"max":{"type":"number","format":"double"},"mean":{"type":"number","format":"double"},"min":{"type":"number","format":"double"},"p50":{"type":"number","format":"double"},"p75":{"type":"number","format":"double"},"p95":{"type":"number","format":"double"},"p98":{"type":"number","format":"double"},"p99":{"type":"number","format":"double"},"p999":{"type":"number","format":"double"},"stddev":{"type":"number","format":"double"},"m15_rate":{"type":"number","format":"double"},"m1_rate":{"type":"number","format":"double"},"m5_rate":{"type":"number","format":"double"},"mean_rate":{"type":"number","format":"double"},"duration_units":{"type":"string"},"rate_units":{"type":"string"}}},"ApiRouteInfo":{"type":"object","required":["servers","serviceName","url","version"],"properties":{"serviceName":{"type":"string"},"version":{"type":"string","example":"v1"},"url":{"type":"string","example":"/test","description":"Target Service URL,start with /"},"apiJson":{"type":"string"},"apiJsonType":{"type":"string","example":"1","description":"[apiJson Type] 0：local file  1： remote file","enum":["0","1"]},"metricsUrl":{"type":"string"},"control":{"type":"string","example":"0","description":"[control Range] 0：default   1：readonly  2：hidden ","enum":["0","1","2"]},"status":{"type":"string","example":"1","description":"[status] 1：abled    0：disabled ","enum":["0","1"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"useOwnUpstream":{"type":"string","example":"0","description":"[LB Policy]non_ip_hash:0,ip_hash:1","enum":["0","1"]},"servers":{"type":"array","items":{"$ref":"#/definitions/RouteServer"}}}},"Gauges":{"type":"object","properties":{"jvm.attribute.uptime":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Eden-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Eden-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Perm-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Perm-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Survivor-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Survivor-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Tenured-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Old-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Code-Cache.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.heap.init":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.non-heap.init":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.heap.used":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.non-heap.used":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.heap.max":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.runnable.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.timed_waiting.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.waiting.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.blocked.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.count":{"$ref":"#/definitions/JVMMetrics"}}},"MetricsInfo":{"type":"object","properties":{"gauges":{"$ref":"#/definitions/Gauges"},"timers":{"$ref":"#/definitions/Timers"}}},"ServiceAccessInfo":{"type":"object","properties":{"serviceType":{"type":"string"},"serviceName":{"type":"string"},"version":{"type":"string"},"accessAddr":{"type":"string"}}},"MicroServiceFullInfo":{"type":"object","required":["protocol","serviceName","url"],"properties":{"serviceName":{"type":"string"},"version":{"type":"string","example":"v1"},"url":{"type":"string","example":"/api/serviceName/v1","description":"Target Service URL,start with /"},"protocol":{"type":"string","example":"REST","description":"Service Protocol","enum":["REST","UI","MQ","FTP","SNMP","TCP","UDP"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"lb_policy":{"type":"string","example":"hash","description":"lb policy","enum":["round-robin","hash","least_conn"]},"namespace":{"type":"string"},"nodes":{"type":"array","uniqueItems":true,"items":{"$ref":"#/definitions/NodeInfo"}},"status":{"type":"string"}}},"NodeInfo":{"type":"object","required":["ip","port"],"properties":{"ip":{"type":"string"},"port":{"type":"string"},"ttl":{"type":"integer","format":"int32"},"nodeId":{"type":"string"},"expiration":{"type":"string","format":"date-time"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}}},"CustomRouteInfo":{"type":"object","required":["servers","serviceName","url"],"properties":{"serviceName":{"type":"string"},"url":{"type":"string","example":"/test","description":"Target Service URL,start with /"},"control":{"type":"string","example":"0","description":"[control Range] 0：default   1：readonly  2：hidden ","enum":["0","1","2"]},"status":{"type":"string","example":"1","description":"[status] 1：abled    0：disabled ","enum":["0","1"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"useOwnUpstream":{"type":"string","example":"0","description":"[LB Policy]non_ip_hash:0,ip_hash:1","enum":["0","1"]},"servers":{"type":"array","items":{"$ref":"#/definitions/RouteServer"}}}},"Timers":{"type":"object","properties":{"org.openo.msb.resources.ApiRouteResource.addApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.deleteApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getApiDocs":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getApiRoutes":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getServerIP":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.updateApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.addIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.deleteIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.getIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.getIuiRoutes":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.updateIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.get-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.post-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.put-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.delete-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.other-requests":{"$ref":"#/definitions/HttpMetrics"}}}}};
+
         const workflows = [{
             id: 'workflow1',
             name: 'workflow1',
             nodes: [],
             configs: {
-                microservices: []
+                microservices: [{
+                    definition: "/s/swagger",
+                    name: "test",
+                    swaggerJson: JSON.stringify(swagger),
+                    version: "v2"
+                }]
             }
         }, {
             id: 'workflow2',
@@ -34,8 +42,6 @@ export class InMemoryDataService implements InMemoryDbService {
             }
         }
         ];
-
-        const swagger = {"swagger":"2.0","info":{"version":"1.0.0","title":"MicroService Bus rest API"},"basePath":"/api/microservices/v1","tags":[{"name":"metrics"},{"name":"iuiRoute"},{"name":"ServiceAccess"},{"name":"ApiRoute"},{"name":"MSB-Service Resource"},{"name":"CustomRoute"}],"paths":{"/apiRoute":{"get":{"tags":["ApiRoute"],"summary":"get all ApiRoute ","description":"","operationId":"getApiRoutes","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/ApiRouteInfo"}}},"500":{"description":"get ApiRouteInfo List  fail","schema":{"type":"string"}}}},"post":{"tags":["ApiRoute"],"summary":"add one ApiRoute ","description":"","operationId":"addApiRoute","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"ApiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/ApiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"400":{"description":"Unprocessable ApiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add ApiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}}}}},"/apiRoute/apiDocs":{"get":{"tags":["ApiRoute"],"summary":"get all Local apiDoc ","description":"","operationId":"getApiDocs","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"type":"string"}}},"500":{"description":"get apiDoc List  fail","schema":{"type":"string"}}}}},"/apiRoute/apiGatewayPort":{"get":{"tags":["ApiRoute"],"summary":"get apiGateway Port ","description":"","operationId":"getApiGatewayPort","produces":["text/plain"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"string"}},"500":{"description":"get apiGateway Port  fail","schema":{"type":"string"}}}}},"/apiRoute/discoverInfo":{"get":{"tags":["ApiRoute"],"summary":"get discover Info ","description":"","operationId":"getServiceDiscoverInfo","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/DiscoverInfo"}},"500":{"description":"get discover Info fail","schema":{"type":"string"}}}}},"/apiRoute/export":{"get":{"tags":["ApiRoute"],"summary":"export all route service Info by json-file","description":"","operationId":"exportService","produces":["text/plain"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"string"}},"500":{"description":"export fail","schema":{"type":"string"}},"406":{"description":" not Acceptable client-side","schema":{"type":"string"}}}}},"/apiRoute/{serviceName}/version/{version}":{"get":{"tags":["ApiRoute"],"summary":"get one ApiRoute ","description":"","operationId":"getApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"500":{"description":"get ApiRouteInfo fail","schema":{"type":"string"}},"404":{"description":"ApiRouteInfo not found","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["ApiRoute"],"summary":"update one ApiRoute by serviceName and version","description":"","operationId":"updateApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"in":"body","name":"body","description":"ApiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/ApiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"400":{"description":"Unprocessable ApiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update ApiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}}}},"delete":{"tags":["ApiRoute"],"summary":"delete one ApiRoute by serviceName and version","description":"","operationId":"deleteApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"}],"responses":{"500":{"description":"delete ApiRouteInfo fail","schema":{"type":"string"}},"204":{"description":"delete ApiRouteInfo succeed "},"404":{"description":"ApiRouteInfo not found","schema":{"type":"string"}}}}},"/apiRoute/{serviceName}/version/{version}/status/{status}":{"put":{"tags":["ApiRoute"],"summary":"update one ApiRoute  status by serviceName and version","description":"","operationId":"updateApiRouteStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"ApiRoute serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"ApiRoute version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"status","in":"path","description":"ApiRoute status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/ApiRouteInfo"}},"500":{"description":"update status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable ApiRouteInfo Entity ","schema":{"type":"string"}},"404":{"description":"ApiRouteInfo not found","schema":{"type":"string"}}}}},"/customRoute/all":{"get":{"tags":["CustomRoute"],"summary":"get all CustomRoute ","description":"","operationId":"getCustomRoutes","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/CustomRouteInfo"}}},"500":{"description":"get CustomRouteInfo List  fail","schema":{"type":"string"}}}}},"/customRoute/instance":{"get":{"tags":["CustomRoute"],"summary":"get one CustomRoute ","description":"","operationId":"getCustomRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":false,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"500":{"description":"get CustomRoute fail","schema":{"type":"string"}},"404":{"description":"CustomRoute not found","schema":{"type":"string"}},"415":{"description":"Unprocessable CustomRoute Entity ","schema":{"type":"string"}}}},"post":{"tags":["CustomRoute"],"summary":"add one CustomRoute ","description":"","operationId":"addCustomRoute","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"CustomRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/CustomRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"400":{"description":"Unprocessable CustomRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add CustomRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable CustomRouteInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["CustomRoute"],"summary":"update one CustomRoute by serviceName","description":"","operationId":"updateCustomRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":true,"type":"string"},{"in":"body","name":"body","description":"CustomRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/CustomRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"400":{"description":"Unprocessable CustomRoute JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update CustomRoute fail","schema":{"type":"string"}},"415":{"description":"Unprocessable CustomRoute Entity ","schema":{"type":"string"}}}},"delete":{"tags":["CustomRoute"],"summary":"delete one CustomRoute by serviceName","description":"","operationId":"deleteCustomRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":true,"type":"string"}],"responses":{"500":{"description":"delete customRoute fail","schema":{"type":"string"}},"204":{"description":"delete customRoute succeed "},"404":{"description":"customRoute not found","schema":{"type":"string"}}}}},"/customRoute/status":{"put":{"tags":["CustomRoute"],"summary":"update one CustomRoute  status by serviceName ","description":"","operationId":"updateCustomRouteStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"query","description":"CustomRoute serviceName","required":true,"type":"string"},{"name":"status","in":"query","description":"CustomRoute status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/CustomRouteInfo"}},"500":{"description":"update status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable customRoute Entity ","schema":{"type":"string"}},"404":{"description":"customRoute not found","schema":{"type":"string"}}}}},"/iuiRoute":{"get":{"tags":["iuiRoute"],"summary":"get all iuiRoute ","description":"","operationId":"getIuiRoutes","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/IuiRouteInfo"}}},"500":{"description":"get iuiRouteInfo List  fail","schema":{"type":"string"}}}},"post":{"tags":["iuiRoute"],"summary":"add one iuiRoute ","description":"","operationId":"addIuiRoute","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"iuiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/IuiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"400":{"description":"Unprocessable iuiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add iuiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable iuiRouteInfo Entity ","schema":{"type":"string"}}}}},"/iuiRoute/{serviceName}":{"get":{"tags":["iuiRoute"],"summary":"get one iuiRoute ","description":"","operationId":"getIuiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"500":{"description":"get IuiRouteInfo fail","schema":{"type":"string"}},"404":{"description":"IuiRouteInfo not found","schema":{"type":"string"}},"415":{"description":"Unprocessable IuiRouteInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["iuiRoute"],"summary":"update one iuiRoute by serviceName","description":"","operationId":"updateIuiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"},{"in":"body","name":"body","description":"iuiRoute Instance Info","required":true,"schema":{"$ref":"#/definitions/IuiRouteInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"400":{"description":"Unprocessable IuiRouteInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update IuiRouteInfo fail","schema":{"type":"string"}},"415":{"description":"Unprocessable IuiRouteInfo Entity ","schema":{"type":"string"}}}},"delete":{"tags":["iuiRoute"],"summary":"delete one iuiRoute by serviceName","description":"","operationId":"deleteIuiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"}],"responses":{"500":{"description":"delete IuiRouteInfo fail","schema":{"type":"string"}},"204":{"description":"delete IuiRouteInfo succeed "},"404":{"description":"IuiRouteInfo not found","schema":{"type":"string"}}}}},"/iuiRoute/{serviceName}/status/{status}":{"put":{"tags":["iuiRoute"],"summary":"update one iuiRoute  status by serviceName ","description":"","operationId":"updateIuiRouteStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"iuiRoute serviceName","required":true,"type":"string"},{"name":"status","in":"path","description":"iuiRoute status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/IuiRouteInfo"}},"500":{"description":"update IuiRouteInfo status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable IuiRouteInfo Entity ","schema":{"type":"string"}},"404":{"description":"IuiRouteInfo not found","schema":{"type":"string"}}}}},"/metrics":{"get":{"tags":["metrics"],"summary":"get Metrics Info ","description":"","operationId":"getMetricsInfo","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/MetricsInfo"}}}}},"/serviceaccess/{serviceName}":{"get":{"tags":["ServiceAccess"],"summary":"get the msb access address of the service ","description":"","operationId":"getApiRoute","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"serviceName","required":true,"type":"string"},{"name":"type","in":"query","description":"service type","required":false,"type":"string","enum":["api","iui","custom","p2p"]},{"name":"version","in":"query","description":"version","required":false,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/ServiceAccessInfo"}},"500":{"description":"get access address error "}}}},"/services":{"get":{"tags":["MSB-Service Resource"],"summary":"get all microservices ","description":"","operationId":"getMicroService","produces":["application/json"],"parameters":[],"responses":{"200":{"description":"successful operation","schema":{"type":"array","items":{"$ref":"#/definitions/MicroServiceFullInfo"}}},"500":{"description":"get microservice List  fail","schema":{"type":"string"}}}},"post":{"tags":["MSB-Service Resource"],"summary":"add one microservice ","description":"","operationId":"addMicroService","produces":["application/json"],"parameters":[{"in":"body","name":"body","description":"MicroServiceInfo Instance Info","required":true,"schema":{"$ref":"#/definitions/MicroServiceInfo"}},{"name":"createOrUpdate","in":"query","description":"createOrUpdate","required":false,"type":"boolean","default":"true"},{"name":"port","in":"query","description":"port","required":false,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"400":{"description":"Unprocessable MicroServiceInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"add microservice fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}}},"/services/{serviceName}/version/{version}":{"get":{"tags":["MSB-Service Resource"],"summary":"get one microservice ","description":"","operationId":"getMicroService","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"port","in":"query","description":"port","required":false,"type":"string"}],"responses":{"200":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"500":{"description":"get microservice fail","schema":{"type":"string"}},"404":{"description":"microservice not found","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}},"put":{"tags":["MSB-Service Resource"],"summary":"update one microservice by serviceName and version","description":"","operationId":"updateMicroService","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"in":"body","name":"body","description":"microservice Instance Info","required":true,"schema":{"$ref":"#/definitions/MicroServiceInfo"}}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"400":{"description":"Unprocessable MicroServiceInfo JSON REQUEST","schema":{"type":"string"}},"500":{"description":"update microservice fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}},"delete":{"tags":["MSB-Service Resource"],"summary":"delete one full microservice by serviceName and version","description":"","operationId":"deleteMicroService","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"port","in":"query","description":"port","required":false,"type":"string"}],"responses":{"500":{"description":"delete microservice fail","schema":{"type":"string"}},"204":{"description":"delete microservice succeed "},"404":{"description":"microservice not found","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}}},"/services/{serviceName}/version/{version}/nodes/{ip}/{port}":{"put":{"tags":["MSB-Service Resource"],"summary":"update  single node by serviceName and version and node","description":"","operationId":"updateNode","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"ip","in":"path","description":"ip","required":true,"type":"string"},{"name":"port","in":"path","description":"port","required":true,"type":"string"},{"name":"ttl","in":"query","description":"ttl","required":false,"type":"integer","format":"int32"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"500":{"description":"update node fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}},"404":{"description":"microservice not found","schema":{"type":"string"}}}},"delete":{"tags":["MSB-Service Resource"],"summary":"delete single node by serviceName and version and node","description":"","operationId":"deleteNode","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"ip","in":"path","description":"ip","required":true,"type":"string"},{"name":"port","in":"path","description":"port","required":true,"type":"string"}],"responses":{"500":{"description":"delete node fail","schema":{"type":"string"}},"204":{"description":"delete node succeed "},"404":{"description":"node not found","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}}}}},"/services/{serviceName}/version/{version}/status/{status}":{"put":{"tags":["MSB-Service Resource"],"summary":"update  microservice status by serviceName and version","description":"","operationId":"updateServiceStatus","produces":["application/json"],"parameters":[{"name":"serviceName","in":"path","description":"microservice serviceName","required":true,"type":"string"},{"name":"version","in":"path","description":"microservice version,if the version is empty, please enter \"null\"","required":true,"type":"string"},{"name":"status","in":"path","description":"status,1：abled  0：disabled","required":true,"type":"string"}],"responses":{"201":{"description":"successful operation","schema":{"$ref":"#/definitions/MicroServiceFullInfo"}},"500":{"description":"update status fail","schema":{"type":"string"}},"415":{"description":"Unprocessable MicroServiceInfo Entity ","schema":{"type":"string"}},"404":{"description":"microservice not found","schema":{"type":"string"}}}}}},"definitions":{"JVMMetrics":{"type":"object","properties":{"value":{"type":"number","format":"double"}}},"DiscoverInfo":{"type":"object","properties":{"ip":{"type":"string"},"port":{"type":"integer","format":"int32"},"enabled":{"type":"boolean","default":false}}},"IuiRouteInfo":{"type":"object","required":["servers","serviceName","url"],"properties":{"serviceName":{"type":"string"},"url":{"type":"string","example":"/test","description":"Target Service URL,start with /"},"control":{"type":"string","example":"0","description":"[control Range] 0：default   1：readonly  2：hidden ","enum":["0","1","2"]},"status":{"type":"string","example":"1","description":"[status] 1：abled    0：disabled ","enum":["0","1"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"useOwnUpstream":{"type":"string","example":"0","description":"[LB Policy]non_ip_hash:0,ip_hash:1","enum":["0","1"]},"servers":{"type":"array","items":{"$ref":"#/definitions/RouteServer"}}}},"Node":{"type":"object","required":["ip","port"],"properties":{"ip":{"type":"string"},"port":{"type":"string"},"ttl":{"type":"integer","format":"int32"}}},"RouteServer":{"type":"object","required":["ip","port"],"properties":{"ip":{"type":"string"},"port":{"type":"string"},"weight":{"type":"integer","format":"int32"}}},"MicroServiceInfo":{"type":"object","required":["protocol","serviceName","url"],"properties":{"serviceName":{"type":"string"},"version":{"type":"string","example":"v1"},"url":{"type":"string","example":"/api/serviceName/v1","description":"Target Service URL,start with /"},"protocol":{"type":"string","example":"REST","description":"Service Protocol","enum":["REST","UI","MQ","FTP","SNMP","TCP","UDP"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"lb_policy":{"type":"string","example":"hash","description":"lb policy","enum":["round-robin","hash","least_conn"]},"namespace":{"type":"string"},"nodes":{"type":"array","uniqueItems":true,"items":{"$ref":"#/definitions/Node"}}}},"HttpMetrics":{"type":"object","properties":{"count":{"type":"integer","format":"int32"},"max":{"type":"number","format":"double"},"mean":{"type":"number","format":"double"},"min":{"type":"number","format":"double"},"p50":{"type":"number","format":"double"},"p75":{"type":"number","format":"double"},"p95":{"type":"number","format":"double"},"p98":{"type":"number","format":"double"},"p99":{"type":"number","format":"double"},"p999":{"type":"number","format":"double"},"stddev":{"type":"number","format":"double"},"m15_rate":{"type":"number","format":"double"},"m1_rate":{"type":"number","format":"double"},"m5_rate":{"type":"number","format":"double"},"mean_rate":{"type":"number","format":"double"},"duration_units":{"type":"string"},"rate_units":{"type":"string"}}},"ApiRouteInfo":{"type":"object","required":["servers","serviceName","url","version"],"properties":{"serviceName":{"type":"string"},"version":{"type":"string","example":"v1"},"url":{"type":"string","example":"/test","description":"Target Service URL,start with /"},"apiJson":{"type":"string"},"apiJsonType":{"type":"string","example":"1","description":"[apiJson Type] 0：local file  1： remote file","enum":["0","1"]},"metricsUrl":{"type":"string"},"control":{"type":"string","example":"0","description":"[control Range] 0：default   1：readonly  2：hidden ","enum":["0","1","2"]},"status":{"type":"string","example":"1","description":"[status] 1：abled    0：disabled ","enum":["0","1"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"useOwnUpstream":{"type":"string","example":"0","description":"[LB Policy]non_ip_hash:0,ip_hash:1","enum":["0","1"]},"servers":{"type":"array","items":{"$ref":"#/definitions/RouteServer"}}}},"Gauges":{"type":"object","properties":{"jvm.attribute.uptime":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Eden-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Eden-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Perm-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Perm-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Survivor-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Survivor-Space.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Tenured-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.PS-Old-Gen.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.pools.Code-Cache.usage":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.heap.init":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.non-heap.init":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.heap.used":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.non-heap.used":{"$ref":"#/definitions/JVMMetrics"},"jvm.memory.heap.max":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.runnable.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.timed_waiting.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.waiting.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.blocked.count":{"$ref":"#/definitions/JVMMetrics"},"jvm.threads.count":{"$ref":"#/definitions/JVMMetrics"}}},"MetricsInfo":{"type":"object","properties":{"gauges":{"$ref":"#/definitions/Gauges"},"timers":{"$ref":"#/definitions/Timers"}}},"ServiceAccessInfo":{"type":"object","properties":{"serviceType":{"type":"string"},"serviceName":{"type":"string"},"version":{"type":"string"},"accessAddr":{"type":"string"}}},"MicroServiceFullInfo":{"type":"object","required":["protocol","serviceName","url"],"properties":{"serviceName":{"type":"string"},"version":{"type":"string","example":"v1"},"url":{"type":"string","example":"/api/serviceName/v1","description":"Target Service URL,start with /"},"protocol":{"type":"string","example":"REST","description":"Service Protocol","enum":["REST","UI","MQ","FTP","SNMP","TCP","UDP"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"lb_policy":{"type":"string","example":"hash","description":"lb policy","enum":["round-robin","hash","least_conn"]},"namespace":{"type":"string"},"nodes":{"type":"array","uniqueItems":true,"items":{"$ref":"#/definitions/NodeInfo"}},"status":{"type":"string"}}},"NodeInfo":{"type":"object","required":["ip","port"],"properties":{"ip":{"type":"string"},"port":{"type":"string"},"ttl":{"type":"integer","format":"int32"},"nodeId":{"type":"string"},"expiration":{"type":"string","format":"date-time"},"created_at":{"type":"string","format":"date-time"},"updated_at":{"type":"string","format":"date-time"}}},"CustomRouteInfo":{"type":"object","required":["servers","serviceName","url"],"properties":{"serviceName":{"type":"string"},"url":{"type":"string","example":"/test","description":"Target Service URL,start with /"},"control":{"type":"string","example":"0","description":"[control Range] 0：default   1：readonly  2：hidden ","enum":["0","1","2"]},"status":{"type":"string","example":"1","description":"[status] 1：abled    0：disabled ","enum":["0","1"]},"visualRange":{"type":"string","example":"1","description":"[visual Range]interSystem:0,inSystem:1","enum":["0","1"]},"useOwnUpstream":{"type":"string","example":"0","description":"[LB Policy]non_ip_hash:0,ip_hash:1","enum":["0","1"]},"servers":{"type":"array","items":{"$ref":"#/definitions/RouteServer"}}}},"Timers":{"type":"object","properties":{"org.openo.msb.resources.ApiRouteResource.addApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.deleteApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getApiDocs":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getApiRoutes":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.getServerIP":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.ApiRouteResource.updateApiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.addIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.deleteIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.getIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.getIuiRoutes":{"$ref":"#/definitions/HttpMetrics"},"org.openo.msb.resources.IuiRouteResource.updateIuiRoute":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.get-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.post-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.put-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.delete-requests":{"$ref":"#/definitions/HttpMetrics"},"io.dropwizard.jetty.MutableServletContextHandler.other-requests":{"$ref":"#/definitions/HttpMetrics"}}}}};
         return { workflows, swagger};
     }
 }
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
index 38d9fb5c..a8a9aeea 100644
--- a/sdc-workflow-designer-ui/src/app/services/workflow-config.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/workflow-config.service.ts
@@ -41,7 +41,7 @@ export class WorkflowConfigService {
     public getSwaggerInfo(serviceName: string, version: string): Swagger {
         const microservice = this.getMicroservices().find(service => (service.name === serviceName && service.version === version));
         if(microservice) {
-            return microservice.swagger;
+            return new Swagger(JSON.parse(microservice.swaggerJson));
         } else {
             return undefined;
         }
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 3a6c5df1..4bcd43b0 100644
--- a/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
+++ b/sdc-workflow-designer-ui/src/app/services/workflow.service.ts
@@ -20,6 +20,7 @@ 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 { PlanTreeviewItem } from "../model/plan-treeview-item";
 
 /**
  * WorkflowService
@@ -92,6 +93,60 @@ export class WorkflowService {
         }
     }
 
+    public getPlanParameters(nodeId: string): PlanTreeviewItem[] {
+        const preNodeList = new Array<WorkflowNode>();
+        this.getPreNodes(nodeId, preNodeList);
+
+        return this.loadNodeOutputs(preNodeList);
+    }
+
+    private loadNodeOutputs(nodes: WorkflowNode[]): PlanTreeviewItem[] {
+        const params = new Array<PlanTreeviewItem>();
+        nodes.forEach(node => {
+            switch (node.type) {
+                case NodeType[NodeType.startEvent]:
+                    params.push(this.loadOutput4StartEvent(<StartEvent>node));
+                    break;
+                case NodeType[NodeType.restTask]:
+                    // TODO for rest task
+                    break;
+                default:
+                    break;
+            }
+        });
+
+        return params;
+    }
+
+    private loadOutput4StartEvent(node: StartEvent): PlanTreeviewItem {
+        const startItem = new PlanTreeviewItem(node.name, `[${node.id}]`, []);
+        node.parameters.map(param =>
+            startItem.children.push(new PlanTreeviewItem(param.name, `[${param.name}]`, [])));
+        return startItem;
+    }
+
+    public getPreNodes(nodeId: string, preNodes: WorkflowNode[]) {
+        const preNode4CurrentNode = [];
+        this.workflow.nodes.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.
+                } else {
+                    preNode4CurrentNode.push(node);
+                    preNodes.push(node);
+                }
+            }
+        });
+
+        preNode4CurrentNode.forEach(node => this.getPreNodes(node.id, preNodes));
+    }
+
+    public isPreNode(preNode: WorkflowNode, id: string): boolean {
+        const targetNode = preNode.sequenceFlows.find(connection => connection.targetRef === id);
+        return targetNode !== undefined;
+    }
+
     public getNodeById(sourceId: string): WorkflowNode {
         return this.workflow.nodes.find(node => node.id === sourceId);
     }
diff --git a/sdc-workflow-designer-ui/src/ngict-component.css b/sdc-workflow-designer-ui/src/ngict-component.css
new file mode 100644
index 00000000..32582bbc
--- /dev/null
+++ b/sdc-workflow-designer-ui/src/ngict-component.css
@@ -0,0 +1,1908 @@
+/***main***/
+body,
+button,
+input,
+optgroup,
+select,
+textarea,
+.tooltip {
+  font-family: "Microsoft yahei", Segoe UI, Arial !important;
+  font-size: 12px;
+  color: #333;
+}
+body {
+  background-color: transparent;
+  font-size: 14px;
+}
+[class^="col-"],
+[class*="col-"] {
+  float: left;
+}
+.clearfix:after,
+.container:after,
+.container-fluid:after,
+.row:after,
+.form-horizontal .form-group:after,
+.btn-toolbar:after,
+.btn-group-vertical > .btn-group:after,
+.nav:after,
+.navbar:after,
+.navbar-header:after,
+.navbar-collapse:after,
+.pager:after,
+.panel-body:after,
+.modal-footer:after {
+  clear: both;
+}
+.clearfix:before,
+.clearfix:after,
+.container:before,
+.container:after,
+.container-fluid:before,
+.container-fluid:after,
+.row:before,
+.row:after,
+.form-horizontal .form-group:before,
+.form-horizontal .form-group:after,
+.btn-toolbar:before,
+.btn-toolbar:after,
+.btn-group-vertical > .btn-group:before,
+.btn-group-vertical > .btn-group:after,
+.nav:before,
+.nav:after,
+.navbar:before,
+.navbar:after,
+.navbar-header:before,
+.navbar-header:after,
+.navbar-collapse:before,
+.navbar-collapse:after,
+.pager:before,
+.pager:after,
+.panel-body:before,
+.panel-body:after,
+.modal-footer:before,
+.modal-footer:after {
+  content: " ";
+  display: table;
+}
+.label,
+label {
+  font-weight: 400;
+}
+*:focus {
+  outline: 0;
+}
+a {
+  color: #00abff;
+  text-decoration: none ;
+  cursor: pointer;
+}
+a:hover {
+  color: #00a3f5;
+  text-decoration: underline;
+}
+.border-box {
+  border: 1px solid #ddd;
+}
+/***icon***/
+[class^="ict-"],
+[class*=" ict-"] {
+  padding-right: 3px;
+}
+/***color***/
+.red {
+  background-color: #ff5b55;
+  color: #fff;
+}
+.red:hover {
+  background-color: #f55651;
+  color: #fff;
+}
+.green {
+  background-color: #5fcc4a;
+  color: #fff;
+}
+.green:hover {
+  background-color: #329d96;
+  color: #fff;
+}
+.gold {
+  background-color: #c0af69;
+  color: #fff;
+}
+.gold:hover {
+  background-color: #ad9a4d;
+  color: #fff;
+}
+.over-grey {
+  background-color: transparent;
+  color: #00abff;
+  border: 0;
+}
+.over-grey:hover {
+  background-color: #f8f8f8;
+}
+.over-grey:focus:active {
+  background-color: #f2f2f2;
+}
+.grey {
+  background-color: #fff;
+  color: #a5a5a5;
+  border: 1px solid #eee;
+}
+.grey:hover {
+  background-color: #fcfcfc;
+}
+.grey-disabled,
+.grey-disabled:hover {
+  border: 1px solid #c6c6c6;
+  color: #c6c6c6;
+  background-color: #fff;
+}
+.dark-grey {
+  background-color: #333;
+  color: #fff;
+}
+.dark-grey:hover {
+  background-color: #101010;
+  color: #fff;
+}
+.oes-red {
+  color: #ff5b55;
+}
+.bg-danger {
+  background-color: #ff5b55 !important;
+}
+.oes-red-bg {
+  background-color: #ff5b55;
+  color: #fff;
+}
+.oes-red-bg:hover {
+  background-color: #f55651;
+  color: #fff;
+}
+.oes-red-bg:active {
+  background-color: #eb534d;
+  color: #fff;
+}
+.oes-green {
+  color: #5fcc4a;
+}
+.oes-green-bg {
+  background-color: #73cf22;
+  color: #fff;
+}
+.oes-green-bg:hover {
+  background-color: #6cc41f;
+  color: #fff;
+}
+.oes-green-bg:active {
+  background-color: #67ba1e;
+  color: #fff;
+}
+.oes-yellow {
+  color: #ffc766;
+}
+.oes-yellow-bg {
+  background-color: #f7c515;
+  color: #fff;
+}
+.oes-yellow-bg:hover {
+  background-color: #edbe13;
+  color: #fff;
+}
+.oes-yellow-bg:active {
+  background-color: #e3b612;
+  color: #fff;
+}
+.oes-grey {
+  color: #a5a5a5;
+}
+.oes-grey-bg {
+  background-color: #a5a5a5;
+  color: #fff;
+}
+.oes-grey-bg:hover {
+  background-color: #949393;
+  color: #fff;
+}
+.oes-grey-bg:active {
+  background-color: #848383;
+  color: #fff;
+}
+.blue {
+  background-color: #fff;
+  color: #1991c5;
+}
+.blue:hover {
+  background-color: #e8f3fd;
+  color: #3366cc;
+}
+.blue.selected {
+  border: 0;
+  background-color: #00abff;
+  color: #fff;
+}
+.blue.selected:hover {
+  border: 0;
+  background-color: #00abff;
+  color: #fff;
+}
+.blue1 {
+  background-color: #00abff;
+  color: #fff;
+  border: 1px solid #00abff;
+}
+.blue1:hover {
+  background-color: #00a3f5;
+  color: #fff;
+  border: 1px solid #00a3f5;
+}
+.blue1:active {
+  background-color: #009ceb;
+}
+.blue1:focus {
+  background-color: #00abff;
+  color: #fff;
+  border: 1px solid #00abff;
+}
+.blue1:focus:hover {
+  background-color: #00a3f5;
+  color: #fff;
+  border: 1px solid #00a3f5;
+}
+.blue1:focus:active {
+  background-color: #009ceb;
+}
+.blue1-active {
+  background-color: #00abff !important;
+  color: #fff  !important;
+  border: 1px solid #00abff !important;
+}
+.blue1-active:hover {
+  background-color: #00a3f5 !important;
+  color: #fff  !important;
+  border: 1px solid #00a3f5 !important;
+}
+.blue1-active:focus {
+  background-color: #00abff !important;
+  color: #fff  !important;
+  border: 1px solid #00abff !important;
+}
+.blue1-active:focus:hover {
+  background-color: #00a3f5 !important;
+  color: #fff  !important;
+  border: 1px solid #00a3f5 !important;
+}
+.white {
+  background-color: #fff;
+  border: 1px solid #eee;
+  color: #00abff;
+}
+.white:hover {
+  background-color: #fcfcfc;
+}
+.white:active {
+  background-color: #f8f8f8;
+}
+.white.active {
+  background-color: #00abff;
+  color: #fff;
+  border-color: #00abff;
+}
+.white:focus {
+  background-color: #fff;
+  border: 1px solid #eee;
+  color: #00abff;
+  outline: none;
+}
+.white:focus:hover {
+  background-color: #fcfcfc;
+}
+.white:focus:hover:active {
+  background-color: #f8f8f8;
+}
+.white:focus.active {
+  background-color: #00abff;
+  color: #fff;
+  border-color: #00abff;
+}
+.blue1-icons {
+  color: #009ceb;
+}
+.blue1-icons:hover {
+  color: #00a3f5;
+}
+.oes-font1,
+.oes-font1:active,
+.oes-font1:focus {
+  color: #c2c6c9;
+}
+.oes-font2,
+.oes-font2:active,
+.oes-font2:focus {
+  color: #777;
+}
+.oes-font3,
+.oes-font3:active,
+.oes-font3:focus {
+  color: #4d5761;
+}
+.oes-font4,
+.oes-font4:active,
+.oes-font4:focus {
+  color: #333;
+}
+/***
+Responsive & Scrollable Tables
+***/
+.table-scrollable {
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border: 1px solid #ddd;
+}
+.table-scrollable > .table {
+  width: 100% !important;
+  margin: 0 !important;
+  margin-bottom: 0;
+  background-color: #fff;
+}
+.table-scrollable > .table-bordered {
+  border: 0;
+}
+.table-scrollable > .table-bordered > thead > tr > th:first-child,
+.table-scrollable > .table-bordered > tbody > tr > th:first-child,
+.table-scrollable > .table-bordered > tfoot > tr > th:first-child,
+.table-scrollable > .table-bordered > thead > tr > td:first-child,
+.table-scrollable > .table-bordered > tbody > tr > td:first-child,
+.table-scrollable > .table-bordered > tfoot > tr > td:first-child {
+  border-left: 0;
+}
+.table-scrollable > .table-bordered > thead > tr > th:last-child,
+.table-scrollable > .table-bordered > tbody > tr > th:last-child,
+.table-scrollable > .table-bordered > tfoot > tr > th:last-child,
+.table-scrollable > .table-bordered > thead > tr > td:last-child,
+.table-scrollable > .table-bordered > tbody > tr > td:last-child,
+.table-scrollable > .table-bordered > tfoot > tr > td:last-child {
+  border-right: 0;
+}
+.table-scrollable > .table-bordered > thead > tr:last-child > th,
+.table-scrollable > .table-bordered > tbody > tr:last-child > th,
+.table-scrollable > .table-bordered > tfoot > tr:last-child > th,
+.table-scrollable > .table-bordered > thead > tr:last-child > td,
+.table-scrollable > .table-bordered > tbody > tr:last-child > td,
+.table-scrollable > .table-bordered > tfoot > tr:last-child > td {
+  border-bottom: 0;
+}
+/*table*/
+table {
+  font-size: 12px;
+}
+.table-hover > tbody > tr:hover > td,
+.table-hover > tbody > tr:hover > th {
+  background: #ebf6fd;
+}
+.dataTables_length,
+.dataTables_info,
+.dataTables_paginate {
+  font-size: 12px;
+  color: #7c868d;
+  display: inline-block;
+}
+.dataTables_length {
+  margin-right: 9px;
+}
+.dataTables_info {
+  margin-right: 10px;
+  color: #4d5761;
+}
+.dataTables_length select {
+  margin-left: 1px;
+  margin-right: 1px;
+  width: 42px;
+  height: 30px;
+  border-color: #ddd;
+  color: #7c868d;
+}
+.dataTables_paginate {
+  vertical-align: top;
+}
+.dataTables_paginate input {
+  border-color: #ddd !important;
+  width: 42px !important;
+  height: 30px !important;
+  margin-left: 6px!important;
+  margin-right: 6px!important;
+  color: #7c868d;
+}
+.dataTables_paginate .pagination-panel a {
+  border: 1px solid #ddd;
+  width: 26px;
+  height: 30px;
+  opacity: 1;
+  margin-left: 6px;
+  vertical-align: top;
+  cursor: pointer;
+  color: #7c868d;
+}
+.dataTables_wrapper > div > div {
+  float: right;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+table th {
+  font-weight: normal;
+  font-size: 12px;
+}
+.table thead th {
+  border-bottom: 0;
+  color: #8b8b8b;
+}
+.table th {
+  border-top: 0;
+}
+table .heading {
+  font-size: 12px;
+  background: #fff !important;
+  font-weight: normal;
+}
+table tr:nth-of-type(odd) {
+  background: #f9f9f9;
+}
+table tr:nth-of-type(even) {
+  background: #fff;
+}
+table tr td label {
+  cursor: pointer;
+}
+.table-btn span {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.table-bordered > thead > tr > th,
+.table-bordered > thead > tr > td {
+  border-bottom-width: 1px;
+}
+table tr td .btn-xs {
+  margin-bottom: 3px;
+  margin-top: 3px;
+}
+/* oes-table */
+.oes-table.light .oes-th {
+  padding-bottom: 15px !important;
+}
+.oes-table .oes-th {
+  padding-bottom: 10px !important;
+}
+/*.oes-table.card  tr:nth-of-type(odd){
+  background-color:#fff !important;
+}*/
+.oes-table.card tr:nth-of-type(odd):hover {
+  background-color: #ebf6fd !important;
+}
+.oes-table.card tr td:first-child,
+.oes-table.card tr th:first-child {
+  text-align: center;
+}
+.oes-table.card .title {
+  font-weight: normal;
+}
+.oes-table .filter span.filterToggle {
+  width: 30px !important;
+  height: 30px !important;
+}
+.oes-table input[type="checkbox"] {
+  margin-right: 0;
+}
+.oes-page-item .oes-page-link {
+  height: 28px !important;
+}
+.oes-filters .oes-th {
+  padding-bottom: 2px !important;
+}
+.oes-pagination {
+  margin-top: 0 !important;
+}
+.oes-table .filter span.filterToggle {
+  height: 30px !important;
+}
+.oes-table label,
+.oes-table input[type="checkbox"] {
+  margin-bottom: 0;
+}
+.oes-table .innerTable tr:nth-of-type(odd) {
+  background-color: #fff !important;
+}
+/*ng2-smart-table*/
+.ng2-smart-table.light .ng2-smart-th,
+.ng2-smart-table .ng2-smart-th {
+  padding-bottom: 10px !important;
+}
+.ng2-smart-table .card tr:nth-of-type(odd) {
+  background-color: #fff !important;
+}
+.ng2-smart-table .card tr:nth-of-type(odd):hover {
+  background-color: #ebf6fd !important;
+}
+.ng2-smart-table .card tr td:first-child,
+.ng2-smart-table .card tr th:first-child {
+  text-align: center;
+}
+.ng2-smart-table .card .title {
+  font-weight: normal;
+}
+.ng2-smart-table .filter span.filterToggle {
+  width: 30px !important;
+  height: 30px !important;
+}
+.ng2-smart-table input[type="checkbox"] {
+  margin-right: 0;
+}
+.ng2-smart-page-item .ng2-smart-page-link {
+  height: 28px !important;
+}
+.ng2-smart-filters .ng2-smart-th {
+  padding-bottom: 2px !important;
+}
+.ng2-smart-pagination {
+  margin-top: 0 !important;
+}
+.ng2-smart-table .filter span.filterToggle {
+  height: 30px !important;
+}
+.ng2-smart-table label,
+.ng2-smart-table input[type="checkbox"] {
+  margin-bottom: 0;
+}
+.ng2-smart-table .innerTable tr:nth-of-type(odd) {
+  background-color: #fff !important;
+}
+/***form***/
+.form {
+  padding: 0 !important;
+}
+.form-group .multiRow {
+  margin-bottom: 15px;
+}
+.form-group .multiRow:last-child {
+  margin-bottom: 5px;
+}
+.form-group {
+  font-size: 12px;
+}
+.form-group .btn {
+  font-size: 14px;
+}
+.form-group .btn-s {
+  font-size: 12px;
+}
+.form-group .ict-helpTip {
+  font-size: 18px;
+  color: #bababa;
+  margin-left: 10px;
+  vertical-align: text-bottom;
+}
+.form-group .ict-helpTip:hover {
+  color: #00abff;
+}
+.form-group.equal-group .form-control {
+  display: block;
+}
+.form-group.equal-group .form-control:first-child {
+  margin-bottom: 5px;
+}
+.form-body {
+  padding: 15px;
+}
+.form-actions .btn {
+  font-size: 14px;
+}
+.form-actions.nobg {
+  background-color: transparent;
+}
+.form-actions.top {
+  margin-top: 0;
+  margin-bottom: 20px;
+  border-top: 0;
+  border-bottom: 1px solid #e5e5e5;
+}
+.form-control {
+  font-size: 12px;
+  display: inline-block;
+}
+.form-actions .btnGroup {
+  padding-left: 0;
+}
+.form-actions.fluid > [class^="col-"] {
+  padding-left: 13px;
+}
+.form-actions:before,
+.form-actions:after {
+  display: table;
+  line-height: 0;
+  content: "";
+}
+.form-actions:after {
+  clear: both;
+}
+.form-section {
+  margin: 30px 0px 25px 0px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid #eee;
+}
+.form .form-section:first-child {
+  margin-top: 5px;
+}
+.help-inline {
+  font-size: 13px;
+  color: #737373;
+  display: inline-block;
+  padding: 5px;
+}
+.submBtn {
+  /*text-align: center;*/
+}
+.subm-iconMargin {
+  margin-left: -40px;
+}
+.subm-margin {
+  margin-left: -40px;
+}
+.form-actions.right {
+  padding-left: 0;
+  padding-right: 10px;
+  text-align: right;
+}
+.form-actions.left {
+  padding-left: 10px;
+  padding-right: 0;
+  text-align: left;
+}
+.help-block {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  color: #a94442 !important;
+}
+.form-inline input {
+  margin-bottom: 0px !important;
+}
+.form-horizontal .control-label {
+  text-align: right;
+}
+.form-group .control-label {
+  padding-top: 3px;
+}
+.form-control-static {
+  font-size: 14px;
+  padding-top: 7px;
+}
+.control-label .required {
+  color: #e02222;
+  font-size: 12px;
+  padding-left: 2px;
+}
+.form-control:focus {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+select.form-control,
+.form-control {
+  padding: 4px 12px;
+  border-radius: 2px;
+  height: 30px;
+  /* width:400px;*/
+  border-color: #ddd;
+}
+select.form-control:not([size]):not([multiple]) {
+  height: 30px ;
+}
+/***checkbox&radio***/
+/* Checkbox */
+.form-group .checkbox {
+  padding-left: 0;
+}
+.checkbox-list > label {
+  display: block;
+}
+.checkbox-list > label.checkbox-inline {
+  display: inline-block;
+}
+.checkbox-list > label.checkbox-inline:first-child {
+  padding-left: 0;
+}
+/* Radios */
+input[type="radio"] {
+  cursor: pointer;
+}
+.radio-list > label {
+  display: block;
+}
+.radio-list > label.radio-inline {
+  display: inline-block;
+}
+.radio-list > label.radio-inline:first-child {
+  padding-left: 0;
+}
+.form-horizontal .radio-list .radio {
+  padding-top: 1px;
+}
+.form-horizontal .radio-list > label {
+  margin-bottom: 0;
+}
+.form-horizontal .radio > span {
+  margin-top: 2px;
+}
+input[type="checkbox"]:focus,
+input[type="radio"]:focus {
+  outline: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border: 0;
+}
+.raw-container {
+  font-size: 0;
+  position: relative;
+}
+.raw-container input[type="checkbox"],
+.raw-container input[type="radio"] {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+.raw-container input[type="checkbox"] + .checkbox-substitute + span,
+.raw-container input[type="radio"] + .radio-substitute + span {
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 12px;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.raw-container input[type="checkbox"] + .checkbox-substitute {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  height: 14px;
+  width: 14px;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  vertical-align: middle;
+  margin-right: 6px;
+}
+.raw-container input[type="checkbox"] + .checkbox-substitute:hover {
+  border-color: #00abff;
+}
+.raw-container input[type="checkbox"]:checked + .checkbox-substitute {
+  border-color: #00abff;
+  background-color: #00abff;
+}
+.raw-container input[type="checkbox"]:checked + .checkbox-substitute::after {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 6px;
+  height: 10px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  left: 3px;
+  top: 0;
+}
+.raw-container input[type="checkbox"][disabled] + .checkbox-substitute {
+  background-color: #efefef;
+  cursor: auto;
+  border-color: #ccc;
+}
+.raw-container input[type="checkbox"]:checked[disabled] + .checkbox-substitute {
+  background-color: #efefef;
+  cursor: auto;
+  border-color: #ccc;
+}
+.raw-container input[type="checkbox"]:checked[disabled] + .checkbox-substitute::after {
+  border: 1px solid #ccc;
+  border-width: 0 2px 2px 0;
+}
+.raw-container input[type="checkbox"]:checked.portion + .checkbox-substitute {
+  background-color: #97dbfc;
+  border-color: #97dbfc;
+}
+.raw-container input[type="radio"] + .radio-substitute {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  height: 14px;
+  width: 14px;
+  border: 1px solid #ccc;
+  border-radius: 14px;
+  vertical-align: middle;
+  margin-right: 6px;
+}
+.raw-container input[type="radio"] + .radio-substitute:hover {
+  border-color: #00abff;
+}
+.raw-container input[type="radio"]:checked + .radio-substitute {
+  border-color: #00abff;
+  border-width: 4px;
+}
+.raw-container input[type="radio"][disabled] + .radio-substitute {
+  border-color: #ccc;
+  background-color: #efefef;
+  cursor: auto;
+}
+.raw-container input[type="radio"]:checked [disabled] + .radio-substitute {
+  border-color: #ccc;
+  cursor: auto;
+}
+/***input***/
+::-webkit-input-placeholder {
+  color: #bcbcbc !important;
+}
+:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  color: #bcbcbc !important;
+}
+::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  color: #bcbcbc !important;
+}
+input:-ms-input-placeholder {
+  color: #bcbcbc !important;
+}
+input::-webkit-input-placeholder {
+  color: #bcbcbc !important;
+}
+/*group*/
+.input-group-btn-vertical.fa {
+  font-size: 12px;
+}
+.input-group.spinner .btn {
+  min-width: 20px !important;
+  height: 16px;
+}
+.spinner {
+  width: 60px !important;
+  margin-left: 10px;
+  margin-right: 30px;
+}
+.spinner input {
+  text-align: right;
+}
+.input-group-btn-vertical {
+  position: relative;
+  white-space: nowrap;
+  width: 1%;
+  vertical-align: middle;
+  display: table-cell;
+}
+.input-group-btn-vertical > .btn {
+  display: block;
+  float: none;
+  width: 100%;
+  max-width: 100%;
+  padding: 6px;
+  margin-left: -1px;
+  position: relative;
+  border-radius: 0;
+}
+.input-group-btn-vertical > .btn {
+  min-width: 20px;
+}
+.input-group-btn-vertical > .btn:first-child {
+  border-top-right-radius: 4px;
+}
+.input-group-btn-vertical > .btn:last-child {
+  margin-top: -2px;
+  border-bottom-right-radius: 4px;
+}
+.input-group-btn-vertical i {
+  position: absolute;
+  top: 0;
+  left: 6px;
+}
+/*.input-group .form-control {
+    height: 26px !important;	
+}*/
+.input-group {
+  /* width:400px;*/
+  font-size: 0;
+}
+.input-group .form-control {
+  display: inline-block;
+}
+.input-group .form-control:hover,
+.input-group .form-control:focus:hover {
+  z-index: 2;
+}
+.input-group .input-group-btn {
+  z-index: 0;
+}
+/*html滑块组件*/
+input[type="range"] {
+  margin-top: 2px;
+  background-color: #f0f3f9;
+  border: 1px solid #ccd6e8;
+  border-radius: 15px;
+  width: 400px;
+  -webkit-appearance: none;
+  height: 15px;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  cursor: pointer;
+  top: -5px;
+  height: 28px;
+  width: 15px;
+  transform: translateY(-4px);
+  background: none repeat scroll 0 0 #f0f3f9;
+  background-color: #9cc2cb;
+  border-radius: 20px;
+}
+input[type="range"]:focus {
+  outline: none;
+}
+/*search*/
+.input-group .btn {
+  min-width: 40px;
+  padding-top: 3px;
+}
+/***tab***/
+.nav-tabs {
+  border: 0;
+  font-weight: bold;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:hover,
+.nav-tabs > li.active > a:focus {
+  border: 0;
+}
+.nav-tabs > li > a {
+  border-radius: 0;
+  font-weight: bold;
+  border: 0;
+  margin-right: 0;
+}
+.nav > li > a:hover,
+.nav > li > a:focus {
+  background-color: transparent;
+}
+.nav-tabs.boder-tab > li.active > a,
+.nav-tabs.boder-tab > div > li.active > a {
+  border: 1px solid #ddd;
+  border-bottom: 0;
+}
+.nav-tabs-content {
+  border: 1px solid #ddd;
+}
+/***tab***/
+.nav-tabs.tabset > li.active,
+.nav-tabs.tabset > li.active:hover,
+.nav-tabs.tabset > li.active:focus {
+  border: 0;
+  border-top: 2px solid #00abff;
+}
+.nav-tabs > div > li.active,
+.nav-tabs > div > li.active:hover,
+.nav-tabs > div > li.active:focus {
+  border: 0;
+  background-color: #fcfcfc;
+  border-top: 2px solid #00abff;
+}
+ul.nav.nav-tabs {
+  background-color: transparent;
+}
+.nav-tabs > div > li > a:hover {
+  background-color: transparent;
+  border-bottom: 1px transparent;
+}
+.nav-tabs .nav-link {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  color: #777;
+}
+.nav-tabs .nav-link:hover {
+  background-color: transparent;
+  border-color: transparent;
+  color: #777;
+}
+.nav-tabs .nav-link:focus {
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+.boder-tab ul.nav.nav-tabs {
+  background-color: #fff;
+}
+.boder-tab ul.nav.nav-tabs .nav-link:hover {
+  border-bottom: 1px solid #ddd ;
+  background-color: #fcfcfc;
+}
+.boder-tab ul.nav.nav-tabs .nav-link.active:hover {
+  border-bottom: 0 ;
+}
+.nav-tabs {
+  border: 0;
+  font-weight: normal;
+}
+.nav-tabs > li > a {
+  border-radius: 0;
+  font-weight: normal;
+  border: 0;
+  margin-right: 0;
+}
+.nav-tabs > li > a:hover,
+.nav-tabs > li > a:focus {
+  background-color: transparent;
+}
+.nav-tabs .nav-link.active {
+  border: 0;
+  border-top: 2px solid #00abff;
+  background-color: #fff;
+}
+.nav-tabs .nav-link.active:hover {
+  background-color: #fff;
+  border-top: 2px solid #00abff;
+}
+.nav-tabs .nav-link.disabled {
+  border-top: 0;
+  color: #c2c6c9;
+}
+.nav-tabs .nav-link.disabled:hover,
+.nav-tabs .nav-link.disabled:focus {
+  background-color: transparent;
+  color: #c2c6c9;
+}
+.boder-tab > .nav-tabs > .nav-item > .nav-link.active,
+.less-border > .nav-tabs > .nav-item > .nav-link.active {
+  border: 1px solid #ddd;
+  border-top: 2px solid #00abff;
+  border-bottom: 0;
+}
+.boder-tab .tab-pane.active {
+  border: 1px solid #ddd;
+}
+.tab-pane.active {
+  padding: 15px;
+}
+.nav-pills .nav-link.active,
+.nav-pills .nav-item.show .nav-link {
+  color: #fff;
+  cursor: default;
+  background-color: #00abff;
+}
+.less-border .tab-pane.active {
+  border-top: 1px solid #ddd;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+}
+/***button***/
+button {
+  font-size: 14px;
+}
+.btn {
+  min-width: 80px;
+  letter-spacing: 1px;
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+  height: 30px;
+  font-size: 14px;
+  cursor: pointer;
+  line-height: 1.42857143;
+}
+.btnGroup .btn,
+.btnGroup a {
+  margin-right: 10px;
+}
+.btnGroup a:last-child,
+.btnGroup .btn:last-child {
+  margin-right: 0;
+}
+.btnGroup .sub-btn {
+  /*float:right;
+	width: 400px;*/
+  /*text-align: right;*/
+}
+.pagination-panel .btn {
+  min-width: 4px;
+}
+.btn.dropdown-toggle,
+.btn-group .btn.dropdown-toggle,
+.btn:hover,
+.btn:disabled,
+.btn[disabled],
+.btn:focus,
+.btn:active,
+.btn.active {
+  outline: none !important;
+  background-image: none !important;
+  filter: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+  text-shadow: none;
+}
+.btn-s {
+  height: 26px;
+  line-height: 14px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.btn-s:hover {
+  text-decoration: none ;
+}
+.btn-s:focus {
+  outline: 0;
+}
+.btn-xs {
+  line-height: 1.2;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 12px;
+  cursor: pointer;
+}
+.btn-xs:hover {
+  text-decoration: none ;
+}
+.btn-xs:focus {
+  outline: 0;
+}
+/***btn-group***/
+.btn-group .blue1-active {
+  border-left: #a4d7f7 1px solid !important;
+}
+.btn-group .blue1-active:hover {
+  border-left: #1289d6 1px solid !important;
+}
+.btn-group .white.btn.active,
+.btn-group .white.btn-s.active {
+  border-left: #6ac7f5 1px solid !important;
+}
+/***toolbar & icons ***/
+.toolbar span {
+  padding: 5px;
+  font-size: 20px;
+  cursor: pointer;
+  color: #00abff;
+  border: 1px solid transparent;
+}
+.toolbar span:hover {
+  color: #00a3f5;
+  border: 1px solid #cbdfec;
+}
+.toolbar i.seperate-vertical {
+  padding: 0;
+  border-right: 1px solid #ddd;
+  margin-right: 8px;
+  margin-left: 4px;
+}
+/*btn-link*/
+.btn-link {
+  color: #ccc;
+}
+.btn-link:hover {
+  color: #1798eb;
+}
+/***radius***/
+.radius-l {
+  border-radius: 20px;
+}
+.radius-m {
+  border-radius: 8px;
+}
+.radius-s {
+  border-radius: 4px;
+}
+.radius-xs {
+  border-radius: 3px;
+}
+/***progress***/
+.progress,
+.progress-s {
+  border: 0;
+  background-image: none !important;
+  filter: none !important;
+  -webkit-box-shadow: none !important;
+  -moz-box-shadow: none !important;
+  box-shadow: none !important;
+  opacity: 0.7;
+}
+.progress {
+  height: 8px;
+  display: inline-block;
+}
+.progress-s {
+  height: 2px;
+}
+.progress > .progress-bar-success {
+  background-color: #00abff;
+}
+.progress-bar {
+  height: 8px;
+}
+.progress > .bg-success {
+  background-color: #00abff !important;
+}
+.oes-progressbar .progress {
+  display: inline-block;
+}
+.progress-rate {
+  vertical-align: sub;
+  margin-left: 5px;
+}
+.progress-error {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 16px;
+  border: 1px solid #ff5b55;
+  font-size: 12px;
+  color: #ff5b55;
+  text-align: center;
+  line-height: 1;
+  margin-left: 5px;
+}
+.progress-error::before {
+  content: "!";
+}
+.progressbar-s .progress {
+  height: 2px;
+}
+/***separator & title***/
+.separator-line {
+  height: 1px;
+  width: 100%;
+  background: #ddd;
+  overflow: hidden;
+  margin-bottom: 15px;
+  opacity: 0.7;
+}
+.separator {
+  opacity: 0.7;
+}
+.separator:hover {
+  opacity: 1;
+}
+.separator-line-dashed {
+  margin-top: 15px;
+  height: 1px;
+  border-bottom: 1px dashed #ddd;
+  margin-bottom: 15px;
+  overflow: hidden;
+  width: 100%;
+}
+.titlefont {
+  font-size: 14px;
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+.form-title,
+.form-title-foldable {
+  border-left: 3px solid #00abff;
+}
+.form-title {
+  padding: 1px 2px 1px 5px;
+  margin-bottom: 15px;
+  color: #7c868d;
+  font-size: 14px;
+}
+.form-title-foldable {
+  padding: 1px 2px 1px 5px;
+  margin-bottom: 15px;
+  font-size: 14px;
+}
+.form-title-foldable span {
+  margin-right: 10px;
+  cursor: pointer;
+}
+.form-title-foldable span[class^="ict-"] {
+  font-size: 12px;
+  color: #009ceb;
+}
+/***ztree***/
+.ztree {
+  padding: 15px 30px 0 5px;
+}
+.ztree * {
+  font-family: "microsoft yahei";
+  font-size: 12px;
+}
+.ztree li a {
+  width: auto;
+  padding-right: 5px;
+  height: 25px;
+  border: 1px solid #fff;
+  padding-left: 5px;
+}
+.ztree li a:hover {
+  border: 1px solid #ddd !important;
+}
+.ztree li > span {
+  margin-top: 5px !important;
+}
+.ztree li span.button.chk {
+  width: 13px;
+  height: 13px;
+  margin-left: 10px;
+  cursor: auto;
+}
+.ztree li span.button.add {
+  margin-left: 2px;
+  margin-right: 4px;
+  background-position: -144px 0;
+  vertical-align: top;
+  *vertical-align: middle;
+  float: right;
+}
+.ztree li span.button.edit {
+  margin-right: 4px;
+  background-position: -110px -48px;
+  vertical-align: top;
+  *vertical-align: middle;
+  float: right;
+}
+.ztree li span.button.remove {
+  margin-right: 4px;
+  background-position: -110px -64px;
+  vertical-align: top;
+  *vertical-align: middle;
+  float: right;
+}
+.ztree li a.curSelectedNode {
+  height: 25px;
+  border: 1px #accbdd solid !important;
+}
+.ztree-select .ztree li a {
+  border: 1px solid #fff !important;
+}
+.ztree-select .ztree li a:hover {
+  border: 1px #ddd solid !important;
+}
+/***tip***/
+.terminology {
+  color: #468ECE;
+  border-bottom: 1px #468ECE dotted;
+}
+.General-tip {
+  height: 20px;
+  width: 20px;
+  background-color: #fff;
+  border: 1px #5b9bd1 solid;
+  padding-bottom: 5px;
+  padding-left: 5px;
+  border-radius: 20px;
+  margin-top: 5px;
+}
+.General-tip span {
+  font-size: 15px;
+  text-align: center;
+  color: #5b9bd1;
+  line-height: 1.1;
+}
+.General-tip:hover {
+  border: 1px #2a6496 solid;
+  cursor: pointer;
+}
+.General-tip:hover span {
+  color: #2a6496;
+}
+/*tip-box*/
+.frmTipBoxTransition {
+  -webkit-transition: -webkit-transform 0.3s ease-out;
+  -o-transition: -o-transform 0.3s ease-out;
+  transition: transform 0.3s ease-out;
+  -webkit-transform: translate(0, 50%);
+  -ms-transform: translate(0, 50%);
+  -o-transform: translate(0, 50%);
+  transform: translate(0, 50%);
+}
+#frmTipBox {
+  position: absolute;
+  width: 400px;
+  margin: 10px auto;
+  left: 30%;
+  right: 30%;
+  top: 14px;
+}
+/*alert*/
+.alert {
+  padding: 12px 15px;
+  max-width: 600px;
+  text-align: left;
+  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
+}
+/*	
+.alert-success {
+    color: #fff;
+    background-color: #73cf22;   
+    border-color:#73cf22;
+}
+
+.alert-info {
+    color: #fff;
+    background-color: #00abff;   
+	border-color:#00abff;	
+}
+
+.alert-warning {
+    color: #fff;
+    background-color: #f7c515; 
+	border-color:#f7c515;		
+}
+
+.alert-danger {
+    color: #fff;
+    background-color: #ff5b55;
+	border-color:#ff5b55;	
+}*/
+.close {
+  color: #f2f2f2;
+  font-size: 16px;
+}
+.close:hover,
+.close:focus {
+  color: inherit;
+  outline: 0;
+}
+.alert-success {
+  color: #56963e;
+  background-color: #edfbe8;
+  border-color: #d5eccc;
+  opacity: 0.85;
+}
+.alert-info {
+  color: #5090c3;
+  background-color: #ecf7fd;
+  border-color: #bce1f1;
+  opacity: 0.85;
+}
+.alert-warning {
+  color: #bf880a;
+  background-color: #fff8e9;
+  border-color: #f5e1b8;
+  opacity: 0.85;
+}
+.alert-danger {
+  color: #df4364;
+  background-color: #fbf0f1;
+  border-color: #f3d9da;
+  opacity: 0.85;
+}
+.close {
+  color: #333;
+  font-size: 1rem;
+}
+/*tooltip*/
+.tooltip.show {
+  font-size: 12px;
+  opacity: 1;
+}
+.tooltip.show .tooltip-inner {
+  background-color: #4d5761;
+  border-radius: 4px;
+  padding: 5px 8px;
+}
+.tooltip.tooltip-top .tooltip-inner::before,
+.tooltip.bs-tether-element-attached-bottom .tooltip-inner::before {
+  border-top-color: #4d5761;
+}
+.tooltip.tooltip-right .tooltip-inner::before,
+.tooltip.bs-tether-element-attached-left .tooltip-inner::before {
+  border-right-color: #4d5761;
+}
+.tooltip.tooltip-bottom .tooltip-inner::before,
+.tooltip.bs-tether-element-attached-top .tooltip-inner::before {
+  border-bottom-color: #4d5761;
+}
+.tooltip.tooltip-left .tooltip-inner::before,
+.tooltip.bs-tether-element-attached-right .tooltip-inner::before {
+  border-left-color: #4d5761;
+}
+/*modal*/
+.modal-footer {
+  border-top: 0;
+  margin-top: 0;
+  padding-top: 0;
+}
+.modal-content {
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
+}
+.modal-title {
+  font-size: 16px;
+}
+.modal {
+  z-index: 10000;
+}
+.modal .modal-dialog {
+  max-width: 1000px;
+}
+.modal .close {
+  color: #bbb;
+  font-size: 20px;
+  text-shadow: none;
+  width: 24px;
+  height: 24px;
+  background: #fff;
+  border-radius: 20px;
+  padding-bottom: 2px;
+}
+.modal .close:hover {
+  background: #f2f2f2;
+}
+.modal .modal-header {
+  border-bottom: 0;
+}
+.modal .alert-modal.row {
+  margin-left: 30px;
+  margin-bottom: 30px;
+  text-align: left;
+}
+.modal .alert-modal.row .tip-img {
+  display: inline-block;
+  width: 52px;
+  height: 52px;
+  border-radius: 50px;
+  font-size: 45px;
+  text-align: center;
+  line-height: 1;
+  margin-right: 15px;
+}
+.modal .alert-modal.row .tip-img::before {
+  content: "!";
+}
+.modal .alert-modal.row .warning {
+  border: 3px solid #ffbb51;
+  color: #ffbb51;
+}
+.modal .alert-modal.row .error {
+  border: 3px solid #ff5b55;
+  color: #ff5b55;
+}
+.modal .alert-modal.row .tip-info {
+  width: 300px;
+}
+.modal .alert-modal.row .tip-info .alert-title {
+  font-size: 16px;
+  color: #7c868d;
+}
+.modal .alert-modal.row .tip-info .alert-result {
+  font-size: 14px;
+  color: #7c868d;
+}
+.modal .modal-btn {
+  float: right;
+  font-size: 0;
+}
+.oes-modal .modal-footer {
+  display: block;
+}
+.modal-body {
+  padding-top: 0;
+}
+.modal-body .form-group:last-child,
+.modal-body form:last-child {
+  margin-bottom: 0;
+}
+/***pagination***/
+.page-item.active .page-link {
+  background-color: #1798eb;
+  border-color: #1798eb;
+}
+/***wizard***/
+.form-wizard .nav > li > a {
+  padding-bottom: 0;
+}
+.wizard-body .button-next.disabled,
+.wizard-body .button-previous.disabled {
+  display: none ;
+}
+.wizard-body .nav .step {
+  background: none !important;
+}
+.form-wizard .progress {
+  margin-bottom: 30px;
+  margin-top: 10px;
+  height: 4px;
+  width: 100%;
+}
+.form-wizard .steps {
+  background-color: #fff ;
+  background-image: none ;
+  filter: none ;
+  border: 0px;
+  box-shadow: none ;
+}
+.form-wizard .steps li a {
+  background-color: #fff ;
+  background-image: none ;
+  filter: none;
+  border: 0px;
+  box-shadow: none ;
+  color: #7c868d;
+}
+.form-wizard .steps:hover {
+  background: none;
+}
+.form-wizard .step:hover {
+  text-decoration: none;
+}
+.form-wizard .step .number {
+  background-color: #ddd;
+  color: #fff;
+  display: inline-block;
+  text-align: center !important;
+  font-size: 14px;
+  font-weight: 300;
+  padding-top: 2px;
+  margin-right: 10px;
+  height: 24px;
+  width: 24px;
+  -webkit-border-radius: 50% !important;
+  -moz-border-radius: 50% !important;
+  border-radius: 50% !important;
+}
+.form-wizard .step .desc {
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 300;
+  color: #7c868d;
+}
+.form-wizard .step i {
+  display: none;
+}
+.form-wizard .active .step .number {
+  background-color: #35aa47;
+  color: #fff;
+}
+.form-wizard .active .step .desc {
+  color: #333;
+  font-weight: 400;
+}
+.form-wizard .done .step .number {
+  background-color: #73cf22 ;
+  color: #fff;
+}
+.form-wizard .done .step .desc {
+  font-weight: 400;
+}
+.form-wizard .done .step .form-wizard .done .step i {
+  font-size: 12px;
+  font-weight: normal;
+  color: #999;
+  display: inline-block;
+}
+.form-wizard .steps > li.active > a.step .number {
+  background-color: #00abff;
+}
+@media (min-width: 600px) and (max-width: 1280px) {
+  .form-wizard .step .desc {
+    margin-top: 10px;
+    display: block;
+  }
+}
+@media (max-width: 600px) {
+  .form-wizard .steps > li > a {
+    text-align: left;
+  }
+}
+@media (min-width: 600px) {
+  .nav-justified > li {
+    display: table-cell;
+    width: 1%;
+  }
+}
+.oes-wizard .nav.nav-pills.steps li {
+  text-align: center;
+}
+.oes-wizard .nav.nav-pills.steps li .desc {
+  font-size: 14px;
+}
+.oes-wizard .nav.nav-pills.steps li .oes-wizard .form-wizard .step .number {
+  padding-top: 1px;
+}
+/***popover***/
+ngb-popover-window.popover.show {
+  color: #333;
+  border: 1px solid #ddd;
+}
+.popover.popover-top::after,
+.popover.bs-tether-element-attached-bottom::after {
+  border-top-color: #fff;
+}
+.popover.popover-top::before,
+.popover.bs-tether-element-attached-bottom::before {
+  border-top-color: #ddd;
+}
+.popover.popover-left::after,
+.popover.bs-tether-element-attached-right::after {
+  border-left-color: #fff;
+}
+.popover.popover-left::before,
+.popover.bs-tether-element-attached-right::before {
+  border-left-color: #ddd;
+}
+.popover.popover-right::after,
+.popover.bs-tether-element-attached-left::after {
+  border-right-color: #fff;
+}
+.popover.popover-right::before,
+.popover.bs-tether-element-attached-left::before {
+  border-right-color: #ddd;
+}
+.popover.popover-bottom::after,
+.popover.bs-tether-element-attached-top::after {
+  border-bottom-color: #fff;
+}
+.popover.popover-bottom::before,
+.popover.bs-tether-element-attached-top::before {
+  border-bottom-color: #ddd;
+}
+.popover {
+  background-color: #fff;
+  font-family: "Microsoft yahei", Segoe UI, Arial !important;
+  font-size: 12px;
+  border-color: #ddd;
+  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+}
+.popover .popover-title {
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+}
+.popover .popover-content {
+  background-color: #fff;
+}
+/***collapse***/
+#collapseExample .card {
+  position: relative;
+  width: 100%;
+  height: 100px;
+}
+/*.collapse-bottom .card span.pop-trgl {
+    position: absolute;
+    top: -10px;
+    left: 20px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 10px 10px 10px;
+    border-color: transparent transparent #cbc5c5 transparent;
+}
+.collapse-bottom .card span.pop-trgl i {
+    position: absolute;
+    left: -9px;
+    top: 1px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 9px 9px 9px;
+    border-color: transparent transparent #fff transparent;
+}
+
+.collapse-top .card span.pop-trgl {
+    position: absolute;
+    bottom: -10px;
+    left: 20px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 10px 10px 10px;
+    border-color: transparent transparent #cbc5c5 transparent;
+	transform:rotate(180deg);
+}
+.collapse-top .card span.pop-trgl i {
+    position: absolute;
+    left: -9px;
+    top: 1px;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 9px 9px 9px;
+    border-color: transparent transparent #fff transparent;
+}*/
+.collapse-top .card-block {
+  padding: 0;
+}
+.collapse-top .card {
+  margin-bottom: 5px;
+  padding: 15px;
+}
+.collapse-bottom .card {
+  margin-top: 5px;
+  padding: 15px;
+}
+/***select-box with icon***/
+.iconselect-box .col-xs-1 {
+  width: 15px;
+  padding: 110px 0 0 0;
+}
+.iconPosition > div {
+  margin: 20px 0px 0px 0px;
+}
+/***.dropdown-item***/
+.dropdown-item {
+  color: #4d5761;
+}
+.dropdown-item:focus,
+.dropdown-item:hover,
+.dropdown-item:active {
+  background-color: #f8f8f8;
+  outline: none;
+  color: #4d5761;
+}
+.dropdown-menu {
+  border: 0;
+  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+}
+.btn-xs + .dropdown-menu .dropdown-item {
+  font-size: 12px;
+}
+/***datepicker***/
+.oes-dp-header {
+  border-bottom: 0 !important;
+}
+.oes-dp-header select.custom-select {
+  color: #777;
+  margin-top: 5px;
+  width: 45%;
+  margin-right: 5px;
+  font-size: 12px;
+}
+.oes-date-range-picker .ngb-dp-weekday {
+  color: #777;
+}
+.oes-date-range-picker .ngb-dp-header {
+  border-bottom: 0 !important;
+}
+.oes-dp-months.pb-1 {
+  padding-left: 15px !important;
+  padding-right: 15px !important;
+}
+.oes-dp-months.pb-1 .oes-dp-day,
+.oes-dp-months.pb-1 .oes-dp-weekday,
+.oes-dp-months.pb-1 .oes-dp-week-number {
+  width: 40px;
+  height: 40px;
+}
+.oes-dp-week.d-flex {
+  color: #777;
+}
+.font-italic {
+  font-style: normal;
+}
+.oes-dp-weekday.text-info {
+  color: #777 !important;
+}
+.oes-dp-day .btn-secondary {
+  border-radius: 20px !important;
+}
+.oes-dp-day .bg-primary {
+  background-color: #00abff !important;
+  border-radius: 20px !important;
+}
+.dropdown-menu .oes-dp-day {
+  font-size: 14px;
+}
+.dropdown-menu .oes-dp-weekday.small {
+  font-size: 80%;
+}
+.oes-dp-month-name.text-center {
+  color: #777;
+  font-size: 14px !important;
+}
+.custom-day.weekend {
+  background-color: #00abff !important;
+  height: 2rem;
+  line-height: 1.8;
+  border-radius: 20px !important;
+}
+.custom-day.weekend:hover {
+  background-color: #00a3f5 !important;
+}
+/***oes-upload***/
+.oes-uploder .progress {
+  width: 300px;
+}
diff --git a/sdc-workflow-designer-ui/src/styles.css b/sdc-workflow-designer-ui/src/styles.css
index 30d6d116..1d000bfc 100644
--- a/sdc-workflow-designer-ui/src/styles.css
+++ b/sdc-workflow-designer-ui/src/styles.css
@@ -14,3 +14,42 @@
      height: 100%;
      margin: 0px;
  }
+
+ .form-group .btn{
+    min-width: 20px;
+}
+
+.form-control-label{
+    line-height: 30px;
+}
+
+.tree-select-class{
+    padding: 0;
+}
+
+.dropdown-menu{
+    display: block;
+    font-size: 12px;
+}
+
+.caret {
+  border-top: 6px dashed;
+  border-right: 3px solid transparent;
+  border-left: 3px solid transparent;
+}
+
+.selected-container-text{
+    padding-left: 14px !important;
+    line-height: 20px;
+}
+
+.selected-container-text:hover{
+    background-color: #fff;
+    cursor: default;
+    border-color: #ddd;
+}
+
+.selected-item-text{
+    margin: 0 !important;
+    font-size: 12px !important;
+}
author	Lvbo163 <lv.bo163@zte.com.cn>	2017-09-06 17:31:15 +0800
committer	Lvbo163 <lv.bo163@zte.com.cn>	2017-09-06 17:31:15 +0800
commit	b8932e8304ed077912949890c3ec47a087be7ddd (patch)
tree	7ac38d7bed907a3ca60e26c307bda953051a114a
parent	15f0e4fa63bb1fd533091d9ab85d3612752c2d27 (diff)