Refactoring code

Refactoring code and formatting

Issue-ID: USECASEUI-303

Signed-off-by: anjali.walsatwar <anjali.walsatwar@huawei.com>
Change-Id: I87258d4df21b3afdeb3bcbd3b400e4dd41847107

5 files changed, 520 insertions, 536 deletions

diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
index 30d3dc46..b3ff2e23 100644
--- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts
@@ -13,50 +13,50 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import * as d3 from 'd3';
 import * as $ from 'jquery';
 import { MyhttpService } from '../myhttp.service';
-import {el} from "@angular/platform-browser/testing/src/browser_util";
+import { el } from "@angular/platform-browser/testing/src/browser_util";
 
 @Component({
-  selector: 'app-ccvpn-creation',
-  templateUrl: './ccvpn-creation.component.html',
-  styleUrls: ['./ccvpn-creation.component.css']
+    selector: 'app-ccvpn-creation',
+    templateUrl: './ccvpn-creation.component.html',
+    styleUrls: ['./ccvpn-creation.component.css']
 })
 export class CcvpnCreationComponent implements OnInit {
 
-  constructor(private myhttp:MyhttpService) { }
+    constructor(private myhttp: MyhttpService) { }
     @Input() createParams;
     @Input() ccvpn_temParametersContent;
     @Output() closeCreate = new EventEmitter();
 
-  ngOnInit() {
-    this.getccvpnTemParameters(this.ccvpn_temParametersContent);
-  }
+    ngOnInit() {
+        this.getccvpnTemParameters(this.ccvpn_temParametersContent);
+    }
 
-  //tabBarStyle
-  tabBarStyle = {
-    "height": "58px",
+    //tabBarStyle
+    tabBarStyle = {
+        "height": "58px",
         "width": "694px",
-    "box-shadow": "none",
-    "margin": "0",
-    "border-radius": "4px 4px 0px 0px"
-  };
-  templateParameters = {
-    service: {},
-    sotnvpn: {
-      info: {},
-      sdwanvpnresource_list: [],
-      sdwansitelan_list: []
-    },
-    site: {
-      info: {},
-      sdwansiteresource_list: [],
-      sdwandevice_list: [],
-      sdwansitewan_list: []
-    }
-  };
+        "box-shadow": "none",
+        "margin": "0",
+        "border-radius": "4px 4px 0px 0px"
+    };
+    templateParameters = {
+        service: {},
+        sotnvpn: {
+            info: {},
+            sdwanvpnresource_list: [],
+            sdwansitelan_list: []
+        },
+        site: {
+            info: {},
+            sdwansiteresource_list: [],
+            sdwandevice_list: [],
+            sdwansitewan_list: []
+        }
+    };
 
     bodyTemplateParameter = {};
 
@@ -134,13 +134,13 @@ export class CcvpnCreationComponent implements OnInit {
         console.log(inputss);
         console.log(this.bodyTemplateParameter);
 
-                this.showTemParametersSotnVpn();
-                this.showTemParametersSite();
-                console.log(this.templateParameters)
+        this.showTemParametersSotnVpn();
+        this.showTemParametersSite();
+        console.log(this.templateParameters)
     }
 
     //sotnVpn data, after combining the structure, rendering the template data to the page
-    showTemParametersSotnVpn(){
+    showTemParametersSotnVpn() {
         //sotn Data analysis, structure assembly
         this.templateParameters.sotnvpn.sdwanvpnresource_list.map((item, index) => {
             let input = {};
@@ -196,8 +196,8 @@ export class CcvpnCreationComponent implements OnInit {
             }
         });
         this.templateParameters.site.sdwandevice_list.map((item, index) => {
-            if(this.getKeys(item).indexOf("lable") == -1){
-                this.templateParameters.site.sdwandevice_list.splice(index,1)
+            if (this.getKeys(item).indexOf("lable") == -1) {
+                this.templateParameters.site.sdwandevice_list.splice(index, 1)
             }
         });
         this.templateParameters.site.sdwansitewan_list.push(
@@ -229,7 +229,7 @@ export class CcvpnCreationComponent implements OnInit {
     }
 
     //add,edit,delete sotnSdwansitelan
-    addSotnSdwansitelan(){
+    addSotnSdwansitelan() {
         if (this.tabInputShowSdwansitelan.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited
             return false;
         }
@@ -245,7 +245,7 @@ export class CcvpnCreationComponent implements OnInit {
         this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; //Table refresh
         console.log(this.sotnSdwansitelanData)
     }
-    editSotnSdwansitelan(num, item, sotnSdwansitelanData){
+    editSotnSdwansitelan(num, item, sotnSdwansitelanData) {
         console.log(item)
         if (this.tabInputShowSdwansitelan[num - 1] == false) {
             this.tabInputShowSdwansitelan[num - 1] = true;
@@ -254,11 +254,11 @@ export class CcvpnCreationComponent implements OnInit {
         }
         console.log(sotnSdwansitelanData);
     }
-    deleteSotnSdwansitelan(num, item, sotnSdwansitelanData){
-        if(this.sotnSdwansitelanData.length <= 1){
-            console.log("num>=1","sotnSdwansitelanData");
+    deleteSotnSdwansitelan(num, item, sotnSdwansitelanData) {
+        if (this.sotnSdwansitelanData.length <= 1) {
+            console.log("num>=1", "sotnSdwansitelanData");
             return false;
-        }else {
+        } else {
 
         }
         this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1);
@@ -291,9 +291,9 @@ export class CcvpnCreationComponent implements OnInit {
         }
         console.log(siteWanData);
     }
-    deleteWanPort(num, item, siteWanData){
-        if(this.siteWanData.length <= 1){
-            console.log("num>=1","siteWanData");
+    deleteWanPort(num, item, siteWanData) {
+        if (this.siteWanData.length <= 1) {
+            console.log("num>=1", "siteWanData");
             return false;
         }
         this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1);
@@ -303,7 +303,7 @@ export class CcvpnCreationComponent implements OnInit {
     //siteModel,sotnVpnModel Display sign
     siteModelShow = false;
     sotnVpnModelShow = false;
-    addSotnvpn(){
+    addSotnvpn() {
         this.sotnVpnModelShow = true;
         this.isEditSotnVpn = 0;
     }
@@ -312,14 +312,14 @@ export class CcvpnCreationComponent implements OnInit {
         this.isEditSite = 0;
     }
 
-//add sotnVpn model
+    //add sotnVpn model
     isEditSotnVpn = 0;//Edit serial number, No value, 0 means increase
-    addSotnVpn_OK(){
-        let inputs= {
-          "sdwansitelan_list":[]
+    addSotnVpn_OK() {
+        let inputs = {
+            "sdwansitelan_list": []
         };
         inputs = Object.assign(inputs, this.sotnInfo);
-        console.log(this.sotnInfo,"this.sotnInfo");
+        console.log(this.sotnInfo, "this.sotnInfo");
         inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => {
             return Object.assign({}, item);
         });
@@ -351,7 +351,7 @@ export class CcvpnCreationComponent implements OnInit {
         this.sotnVpnModelShow = false;
     }
 
-    addSotnVpn_cancel(){
+    addSotnVpn_cancel() {
         Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box
             this.sotnInfo[item] = null;
         });
@@ -369,7 +369,7 @@ export class CcvpnCreationComponent implements OnInit {
         this.sotnVpnModelShow = false;
     }
 
-    editSotnVpn(num){
+    editSotnVpn(num) {
         this.sotnVpnModelShow = true;
         this.isEditSotnVpn = num;
         console.log(this.templateParameters.sotnvpn.sdwanvpnresource_list)
@@ -377,19 +377,19 @@ export class CcvpnCreationComponent implements OnInit {
             this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item];
         });
         this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => {
-            return Object.assign({}, {},item)
+            return Object.assign({}, {}, item)
         });
         this.sotnSdwansitelanData.forEach((item, index) => {
             this.tabInputShowSdwansitelan[index] = false;
         });
     }
 
-    deleteSotnVpn(num){
+    deleteSotnVpn(num) {
         this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1);
         console.log(this.sotnVpnTableData)
     }
 
-// addsite model
+    // addsite model
     isEditSite = 0; //Edit serial number, No value, 0 means increase
     addsite_OK() {
         let inputs = {
@@ -397,7 +397,7 @@ export class CcvpnCreationComponent implements OnInit {
             "sdwansitewan_list": []
         };
         inputs = Object.assign(inputs, this.siteBaseData);
-        console.log(this.siteBaseData,"this.siteBaseData");
+        console.log(this.siteBaseData, "this.siteBaseData");
         inputs["sdwandevice_list"][0] = Object.assign({}, this.siteCpeData);
         inputs["sdwansitewan_list"] = this.siteWanData.map((item) => {
             return Object.assign({}, item);
@@ -476,7 +476,7 @@ export class CcvpnCreationComponent implements OnInit {
         this.drawImage(this.siteTableData);
     }
 
-// Site node graphic depiction
+    // Site node graphic depiction
     lines = [];
     siteImage = [];
     tpImage = [];
@@ -600,18 +600,18 @@ export class CcvpnCreationComponent implements OnInit {
 
     }
 
-    modifyJosnKey(json,oddkey,newkey){
+    modifyJosnKey(json, oddkey, newkey) {
 
-        let val=json[oddkey];
+        let val = json[oddkey];
         delete json[oddkey];
-        json[newkey]=val;
+        json[newkey] = val;
     }
 
-// submit createData
+    // submit createData
     submit() {
         let globalCustomerId = this.createParams.commonParams.customer.id;
         let globalServiceType = this.createParams.commonParams.serviceType.name;
-        let servicebody={
+        let servicebody = {
             service: {
                 name: this.templateParameters.service["name"],
                 description: this.templateParameters.service["description"],
@@ -627,55 +627,55 @@ export class CcvpnCreationComponent implements OnInit {
             }
         };
         console.log(this.bodyTemplateParameter)
-        console.log(this.sotnVpnTableData,"before fixing")
-        console.log(this.siteTableData,'"before fixing"')
-        let siteresource = null, sitewan = null,device = null,vpnresource = null,sitelan = null;
-        Object.keys(this.bodyTemplateParameter).map((item,index) => {
-            if(item.search("site") != -1){
+        console.log(this.sotnVpnTableData, "before fixing")
+        console.log(this.siteTableData, '"before fixing"')
+        let siteresource = null, sitewan = null, device = null, vpnresource = null, sitelan = null;
+        Object.keys(this.bodyTemplateParameter).map((item, index) => {
+            if (item.search("site") != -1) {
                 siteresource = item;
-                this.bodyTemplateParameter[item].map((items,index) => {
-                   if(Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1){
-                       sitewan = Object.keys(items)[0]
-                   }
-                    if(Object.keys(items)[0].search("device") != -1){
+                this.bodyTemplateParameter[item].map((items, index) => {
+                    if (Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1) {
+                        sitewan = Object.keys(items)[0]
+                    }
+                    if (Object.keys(items)[0].search("device") != -1) {
                         device = Object.keys(items)[0]
                     }
                 });
             }
-            if(item.search("vpn") != -1){
+            if (item.search("vpn") != -1) {
                 vpnresource = item;
-                this.bodyTemplateParameter[item].map((items,index) => {
-                    if(Object.keys(items)[0].search("site") != -1){
+                this.bodyTemplateParameter[item].map((items, index) => {
+                    if (Object.keys(items)[0].search("site") != -1) {
                         sitelan = Object.keys(items)[0]
                     }
                 });
             }
         });
         this.sotnVpnTableData.forEach((item, index) => {
-            Object.keys(item).map((items,index) => {
-                if(items.search("site") != -1 && item[items] instanceof Array === true){
-                    this.modifyJosnKey(item,items,sitelan)
+            Object.keys(item).map((items, index) => {
+                if (items.search("site") != -1 && item[items] instanceof Array === true) {
+                    this.modifyJosnKey(item, items, sitelan)
                 }
             });
         });
         this.siteTableData.forEach((item, index) => {
-            Object.keys(item).map((items,index) => {
-                if(items.search("site") != -1 && Object.keys(item)[0].search("device") == -1  && item[items] instanceof Array === true){
-                    this.modifyJosnKey(item,items,sitewan)
+            Object.keys(item).map((items, index) => {
+                if (items.search("site") != -1 && Object.keys(item)[0].search("device") == -1 && item[items] instanceof Array === true) {
+                    this.modifyJosnKey(item, items, sitewan)
                 }
-                if(items.search("device") != -1){
-                    this.modifyJosnKey(item,items,device)
+                if (items.search("device") != -1) {
+                    this.modifyJosnKey(item, items, device)
                 }
             });
         });
-        console.log(siteresource,sitewan,device,vpnresource,sitelan);
-        console.log(this.sotnVpnTableData,"After modification")
-        console.log(this.siteTableData,"After modification")
-        Object.keys(this.bodyTemplateParameter).map((item,index) => {
-            if(item.search("site") != -1){
+        console.log(siteresource, sitewan, device, vpnresource, sitelan);
+        console.log(this.sotnVpnTableData, "After modification")
+        console.log(this.siteTableData, "After modification")
+        Object.keys(this.bodyTemplateParameter).map((item, index) => {
+            if (item.search("site") != -1) {
                 servicebody.service.parameters.requestInputs[item] = [].concat(this.siteTableData);
             }
-            if(item.search("vpn") != -1){
+            if (item.search("vpn") != -1) {
                 servicebody.service.parameters.requestInputs[item] = [].concat(this.sotnVpnTableData);
             }
         });
@@ -685,9 +685,9 @@ export class CcvpnCreationComponent implements OnInit {
 
         this.closeCreate.emit(servicebody);
 
-  }
+    }
 
-  goback(){
-    this.closeCreate.emit(); 
-  }
+    goback() {
+        this.closeCreate.emit();
+    }
 }
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
index d0ef7d1b..1da7faa7 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
@@ -24,7 +24,7 @@ import * as d3 from 'd3';
 })
 export class CcvpnDetailComponent implements OnInit {
 
-    constructor(private myhttp:MyhttpService) { }
+    constructor(private myhttp: MyhttpService) { }
 
     ngOnInit() {
         // this.getDetails();
@@ -87,14 +87,14 @@ export class CcvpnDetailComponent implements OnInit {
         console.log(this.detailParams)
         console.log(this.upDateShow)
         // this.input_parameters = JSON.stringify(this.detailParams['input-parameters'])
-        if(this.detailParams['input-parameters']){
+        if (this.detailParams['input-parameters']) {
             this.input_parameters = JSON.parse(this.detailParams['input-parameters']);
-        }else {
+        } else {
             return false;
         }
         console.log(this.input_parameters);
         this.templateParameters.service = {
-            name:  this.input_parameters.service.name,
+            name: this.input_parameters.service.name,
             description: this.input_parameters.service.description,
             serviceInvariantUuid: this.input_parameters.service["serviceInvariantUuid"],
             serviceUuid: this.input_parameters.service["serviceUuid"]
@@ -111,7 +111,7 @@ export class CcvpnDetailComponent implements OnInit {
                 let sdwanvpnresource_list = inputs[items][0];
                 Object.keys(sdwanvpnresource_list).forEach((its) => {
                     let input = {};
-                    if(its.search("site") != -1 && sdwanvpnresource_list[its] instanceof Array === true){
+                    if (its.search("site") != -1 && sdwanvpnresource_list[its] instanceof Array === true) {
                         Object.keys(sdwanvpnresource_list[its][0]).forEach((i) => {
                             let input1 = {};
                             input1[i] = sdwanvpnresource_list[its][i];
@@ -122,7 +122,7 @@ export class CcvpnDetailComponent implements OnInit {
                         console.log(123456)
                         this.bodyTemplateParameter[items].push(sitelanKey);
                     }
-                    if(its.search("sitelan") == -1 && sdwanvpnresource_list[its] instanceof Array === false){
+                    if (its.search("sitelan") == -1 && sdwanvpnresource_list[its] instanceof Array === false) {
                         input[its] = sdwanvpnresource_list[its];
                         this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(input);
                     }
@@ -137,7 +137,7 @@ export class CcvpnDetailComponent implements OnInit {
                 let sdwansiteresource_list = inputs[items][0];
                 Object.keys(sdwansiteresource_list).forEach((its) => {
                     let input2 = {};
-                    if(its.search("device") != -1 && sdwansiteresource_list[its] instanceof Array === true){
+                    if (its.search("device") != -1 && sdwansiteresource_list[its] instanceof Array === true) {
                         Object.keys(sdwansiteresource_list[its][0]).forEach((i) => {
                             let input1 = {};
                             input1[i] = sdwansiteresource_list[its][i];
@@ -147,13 +147,13 @@ export class CcvpnDetailComponent implements OnInit {
                         sitelanKey[its] = [];
                         this.bodyTemplateParameter[items].push(sitelanKey);
                     }
-                    if(its.search("site") != -1 && its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === true){
+                    if (its.search("site") != -1 && its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === true) {
                         this.templateParameters["site"]["sdwansitewan_list"][0] = sdwansiteresource_list[its][0];
                         let sitelanKey = {};
                         sitelanKey[its] = [];
                         this.bodyTemplateParameter[items].push(sitelanKey);
                     }
-                    if(its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === false){
+                    if (its.search("device") == -1 && sdwansiteresource_list[its] instanceof Array === false) {
                         input2[its] = sdwansiteresource_list[its];
                         this.templateParameters["site"]["sdwansiteresource_list"].push(input2);
                     }
@@ -162,7 +162,7 @@ export class CcvpnDetailComponent implements OnInit {
             }
         });
 
-        console.log( this.templateParameters.site);
+        console.log(this.templateParameters.site);
         console.log(this.siteTableData);
 
         this.showTemParametersSotnVpn();
@@ -171,7 +171,7 @@ export class CcvpnDetailComponent implements OnInit {
     }
 
     //sotnVpn data, after combining the structure, rendering the template data to the page
-    showTemParametersSotnVpn(){
+    showTemParametersSotnVpn() {
         //sotn Data analysis, structure assembly
         this.templateParameters.sotnvpn.sdwanvpnresource_list.map((item, index) => {
             let input = {};
@@ -250,17 +250,17 @@ export class CcvpnDetailComponent implements OnInit {
     //sotnVpn detail show
     sotnVpnDetailShow = false;
     isEditSotnVpn = 0;
-    showstonVpnDetail(num){
+    showstonVpnDetail(num) {
         this.sotnVpnDetailShow = true;
         this.isEditSotnVpn = num;
         Object.keys(this.sotnInfo).forEach((item) => {
             this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item];
         });
         this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => {
-            return Object.assign({}, {},item)
+            return Object.assign({}, {}, item)
         });
     }
-    detailSotnVpn_cancel(){
+    detailSotnVpn_cancel() {
         this.sotnVpnDetailShow = false;
     }
 
@@ -279,10 +279,10 @@ export class CcvpnDetailComponent implements OnInit {
         this.siteCpeData = Object.assign({}, this.siteTableData[num - 1].sdwandevice_list[0]);
         console.log(this.siteCpeData);
         this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => {
-            return Object.assign({}, {},item)
+            return Object.assign({}, {}, item)
         });
     }
-    detailsite_cancel(){
+    detailsite_cancel() {
         this.siteDetail = false;
     }
     deleteUpdateSite(num) {
@@ -305,9 +305,9 @@ export class CcvpnDetailComponent implements OnInit {
         });
         console.log(inputs);
         if (this.isEditSotnVpn) {
-            
+
             this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs;
-            this.sotnVpnTableData = [...this.sotnVpnTableData]; 
+            this.sotnVpnTableData = [...this.sotnVpnTableData];
         } else {
             // this.siteTableData.push(inputs);
             this.sotnVpnTableData = [...this.sotnVpnTableData, inputs];
@@ -315,7 +315,7 @@ export class CcvpnDetailComponent implements OnInit {
         }
         console.log(this.sotnVpnTableData)
 
-        Object.keys(this.sotnInfo).forEach((item) => { 
+        Object.keys(this.sotnInfo).forEach((item) => {
             this.sotnInfo[item] = null;
         });
         this.sotnSdwansitelanData.forEach((item, index) => {
@@ -334,7 +334,7 @@ export class CcvpnDetailComponent implements OnInit {
     }
 
     updateSotnVpn_cancel() {
-        Object.keys(this.sotnInfo).forEach((item) => { 
+        Object.keys(this.sotnInfo).forEach((item) => {
             this.sotnInfo[item] = null;
         });
         this.sotnSdwansitelanData.forEach((item, index) => {
@@ -355,7 +355,7 @@ export class CcvpnDetailComponent implements OnInit {
         this.sotnVpnAddModelShow = true;
         this.isEditSotnVpn = num;
         console.log(this.templateParameters.sotnvpn.sdwanvpnresource_list)
-        Object.keys(this.sotnInfo).forEach((item) => { 
+        Object.keys(this.sotnInfo).forEach((item) => {
             this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item];
         });
         console.log()
@@ -385,7 +385,7 @@ export class CcvpnDetailComponent implements OnInit {
         });
         this.sotnSdwansitelanData[addNum] = inputsData;
         this.tabInputShowSdwansitelan[addNum] = true;
-        this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; 
+        this.sotnSdwansitelanData = [...this.sotnSdwansitelanData];
         console.log(this.sotnSdwansitelanData)
     }
     editUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) {
@@ -423,10 +423,10 @@ export class CcvpnDetailComponent implements OnInit {
         console.log(this.templateParameters);
     }
 
-    editUpdateSite(num) { 
+    editUpdateSite(num) {
         this.siteAddModelShow = true;
         this.isEditSite = num;
-        Object.keys(this.siteBaseData).forEach((item) => { 
+        Object.keys(this.siteBaseData).forEach((item) => {
             this.siteBaseData[item] = this.siteTableData[num - 1][item];
         });
         this.siteCpeData = Object.assign({}, this.siteTableData[num - 1].sdwandevice_list[0]);
@@ -439,10 +439,10 @@ export class CcvpnDetailComponent implements OnInit {
     }
 
     updatesite_cancel() {
-        Object.keys(this.siteBaseData).forEach((item) => { 
+        Object.keys(this.siteBaseData).forEach((item) => {
             this.siteBaseData[item] = null;
         })
-        Object.keys(this.siteCpeData).forEach((item) => { 
+        Object.keys(this.siteCpeData).forEach((item) => {
             this.siteCpeData[item] = null;
         })
         this.siteWanData.forEach((item, index) => {
@@ -545,47 +545,47 @@ export class CcvpnDetailComponent implements OnInit {
     localSite = [];//本地site
     outerSite = [];//外部site
 
-    getSiteAResource(){
-        return new Promise((res,rej)=>{
-            this.detailParams.siteSer.forEach((site)=>{
-                site["relationship-list"]["relationship"].find((item)=>{return item["related-to"]=="site-resource"})?this.localSite.push(site):this.outerSite.push(site);
+    getSiteAResource() {
+        return new Promise((res, rej) => {
+            this.detailParams.siteSer.forEach((site) => {
+                site["relationship-list"]["relationship"].find((item) => { return item["related-to"] == "site-resource" }) ? this.localSite.push(site) : this.outerSite.push(site);
             });
 
-            if(this.localSite[0] && this.localSite[0]["service-instance-name"].startsWith("Dc")){
+            if (this.localSite[0] && this.localSite[0]["service-instance-name"].startsWith("Dc")) {
                 this.localSite.reverse();
             }
 
-            if(this.outerSite[0] && this.outerSite[0]["service-instance-name"].startsWith("Dc")){
+            if (this.outerSite[0] && this.outerSite[0]["service-instance-name"].startsWith("Dc")) {
                 this.outerSite.reverse();
             }
             console.log(this.localSite);
             console.log(this.outerSite);
 
-           if(this.localSite.length>0){
-               this.detailLines = [].concat(this.detailLiness);
-            this.localSite.forEach((site)=>{
-                let obj = {
-                    customerId: this.detailParams.customer.id,
-                    serviceType: this.detailParams.serviceType,
-                    serviceId: site["service-instance-id"]
-                };
-                this.myhttp.getAllottedResource(obj)
-                    .subscribe((data)=>{
-                        let resource = data["allotted-resource"].find((item)=>{ return item["allotted-resource-name"]=="sotn ar"});
-                        let tps_pnfs = resource["relationship-list"]["relationship"].find((item)=>{ return item["related-to"]=="p-interface"})["relationship-data"];
-                        site.tpsitename = tps_pnfs.find((item)=>{return item["relationship-key"]=="p-interface.interface-name"})["relationship-value"];
-                        res("sites-domain");
-                    })
-            })
-           }else {
-               console.log("localSite []");
-               return false;
-           }
+            if (this.localSite.length > 0) {
+                this.detailLines = [].concat(this.detailLiness);
+                this.localSite.forEach((site) => {
+                    let obj = {
+                        customerId: this.detailParams.customer.id,
+                        serviceType: this.detailParams.serviceType,
+                        serviceId: site["service-instance-id"]
+                    };
+                    this.myhttp.getAllottedResource(obj)
+                        .subscribe((data) => {
+                            let resource = data["allotted-resource"].find((item) => { return item["allotted-resource-name"] == "sotn ar" });
+                            let tps_pnfs = resource["relationship-list"]["relationship"].find((item) => { return item["related-to"] == "p-interface" })["relationship-data"];
+                            site.tpsitename = tps_pnfs.find((item) => { return item["relationship-key"] == "p-interface.interface-name" })["relationship-value"];
+                            res("sites-domain");
+                        })
+                })
+            } else {
+                console.log("localSite []");
+                return false;
+            }
         })
     }
 
 
-    vpns = [{name: "", tps: [], domain: "", sitetpname: "", othertpname: ""}];
+    vpns = [{ name: "", tps: [], domain: "", sitetpname: "", othertpname: "" }];
 
 
     getSotnAresource() {
@@ -611,7 +611,7 @@ export class CcvpnDetailComponent implements OnInit {
                         });
                     console.log(vpns);
                     this.detailParams.vpns = vpns.map((item) => {
-                        return {name: item}
+                        return { name: item }
                     });
                     this.detailParams.vpns.forEach((vpn, index) => {
                         this.myhttp.getVpnBinding(vpn.name)
@@ -693,7 +693,7 @@ export class CcvpnDetailComponent implements OnInit {
                 // this.detailLines.push(line);
                 // when local site have 2
                 if (this.localSite.length == 2) {
-                    let line =  {
+                    let line = {
                         "x1": "30%", "y1": "55%", "x2": "42%", "y2": "55%"//tp2--tp3
                     }
                     this.detailLines.push(line);
@@ -707,10 +707,10 @@ export class CcvpnDetailComponent implements OnInit {
                 }
             }
         })
-        let allnodes = [this.getSiteAResource(),this.getSotnAresource()];
-        Promise.all(allnodes).then((data)=>{
-          console.log(data)
-          console.log(this.localSite);
+        let allnodes = [this.getSiteAResource(), this.getSotnAresource()];
+        Promise.all(allnodes).then((data) => {
+            console.log(data)
+            console.log(this.localSite);
 
 
         })
@@ -738,11 +738,11 @@ export class CcvpnDetailComponent implements OnInit {
         }
     ];
 
-    modifyJosnKey(json,oddkey,newkey){
+    modifyJosnKey(json, oddkey, newkey) {
 
-        let val=json[oddkey];
+        let val = json[oddkey];
         delete json[oddkey];
-        json[newkey]=val;
+        json[newkey] = val;
     }
 
     submitUpdate() {
@@ -767,55 +767,55 @@ export class CcvpnDetailComponent implements OnInit {
             }
         };
         console.log(this.bodyTemplateParameter)
-        console.log(this.sotnVpnTableData,"before fixing")
-        console.log(this.siteTableData,'"before fixing"')
-        let siteresource = null, sitewan = null,device = null,vpnresource = null,sitelan = null;
-        Object.keys(this.bodyTemplateParameter).map((item,index) => {
-            if(item.search("site") != -1){
+        console.log(this.sotnVpnTableData, "before fixing")
+        console.log(this.siteTableData, '"before fixing"')
+        let siteresource = null, sitewan = null, device = null, vpnresource = null, sitelan = null;
+        Object.keys(this.bodyTemplateParameter).map((item, index) => {
+            if (item.search("site") != -1) {
                 siteresource = item;
-                this.bodyTemplateParameter[item].map((items,index) => {
-                    if(Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1){
+                this.bodyTemplateParameter[item].map((items, index) => {
+                    if (Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1) {
                         sitewan = Object.keys(items)[0]
                     }
-                    if(Object.keys(items)[0].search("device") != -1){
+                    if (Object.keys(items)[0].search("device") != -1) {
                         device = Object.keys(items)[0]
                     }
                 });
             }
-            if(item.search("vpn") != -1){
+            if (item.search("vpn") != -1) {
                 vpnresource = item;
-                this.bodyTemplateParameter[item].map((items,index) => {
-                    if(Object.keys(items)[0].search("site") != -1){
+                this.bodyTemplateParameter[item].map((items, index) => {
+                    if (Object.keys(items)[0].search("site") != -1) {
                         sitelan = Object.keys(items)[0]
                     }
                 });
             }
         });
         this.sotnVpnTableData.forEach((item, index) => {
-            Object.keys(item).map((items,index) => {
-                if(items.search("site") != -1 && item[items] instanceof Array === true){
-                    this.modifyJosnKey(item,items,sitelan)
+            Object.keys(item).map((items, index) => {
+                if (items.search("site") != -1 && item[items] instanceof Array === true) {
+                    this.modifyJosnKey(item, items, sitelan)
                 }
             });
         });
         this.siteTableData.forEach((item, index) => {
-            Object.keys(item).map((items,index) => {
-                if(items.search("site") != -1 && items.search("device") == -1 && item[items] instanceof Array === true){
-                    this.modifyJosnKey(item,items,sitewan)
+            Object.keys(item).map((items, index) => {
+                if (items.search("site") != -1 && items.search("device") == -1 && item[items] instanceof Array === true) {
+                    this.modifyJosnKey(item, items, sitewan)
                 }
-                if(items.search("device") != -1){
-                    this.modifyJosnKey(item,items,device)
+                if (items.search("device") != -1) {
+                    this.modifyJosnKey(item, items, device)
                 }
             });
         });
-        console.log(siteresource,sitewan,device,vpnresource,sitelan);
-        console.log(this.sotnVpnTableData,"After modification")
-        console.log(this.siteTableData,"After modification")
-        Object.keys(this.bodyTemplateParameter).map((item,index) => {
-            if(item.search("site") != -1){
+        console.log(siteresource, sitewan, device, vpnresource, sitelan);
+        console.log(this.sotnVpnTableData, "After modification")
+        console.log(this.siteTableData, "After modification")
+        Object.keys(this.bodyTemplateParameter).map((item, index) => {
+            if (item.search("site") != -1) {
                 servicebody.service.parameters.requestInputs[item] = [].concat(this.siteTableData);
             }
-            if(item.search("vpn") != -1){
+            if (item.search("vpn") != -1) {
                 servicebody.service.parameters.requestInputs[item] = [].concat(this.sotnVpnTableData);
             }
         });
@@ -827,7 +827,7 @@ export class CcvpnDetailComponent implements OnInit {
         this.closeDetail.emit();
     }
 
-    hiddenModel(){
+    hiddenModel() {
         this.sotnVpnDetailShow = false;
         this.siteDetail = false;
     }
diff --git a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
index 9620a977..9a5b0e23 100644
--- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts
@@ -13,10 +13,10 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 */
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import * as d3 from 'd3';
 import * as $ from 'jquery';
-import {networkHttpservice} from '../networkHttpservice.service';
+import { networkHttpservice } from '../networkHttpservice.service';
 
 @Component({
     selector: 'app-ccvpn-network',
@@ -77,7 +77,7 @@ export class CcvpnNetworkComponent implements OnInit {
             thisNg.delcloudUrl = $(this).attr('data-url');
             thisNg.delLinkname = $(this).attr('data-link');
             thisNg.aaiId = $(this).attr('data-aaiid');
-      	    thisNg.getCloudUrl(thisNg.aaiId);
+            thisNg.getCloudUrl(thisNg.aaiId);
         });
     }
 
@@ -127,7 +127,7 @@ export class CcvpnNetworkComponent implements OnInit {
 
     winWidth = $('#tpContainer').width();
     winHeight = $('#tpContainer').height();
-  charge = -300;
+    charge = -300;
 
     imgmap = {
         '1': './assets/images/cloud-county1.png',
@@ -173,7 +173,7 @@ export class CcvpnNetworkComponent implements OnInit {
                     this.nonetwork = true;
                     return;
                 }
-	 this.nonetwork = false;
+                this.nonetwork = false;
                 for (let ii = 0; ii < data.length; ii++) {//Determine if there is external cloud information in the data, and kick it out.
                     if (data[ii]['aaiId'] != null) {
                         this.dataCloud = data.splice(ii, 1);
@@ -220,7 +220,7 @@ export class CcvpnNetworkComponent implements OnInit {
     getLinksData() {
         this.myhttp.getLogicalLinksData()
             .subscribe((data) => {
-                if (data["status"]=="FAILED") {
+                if (data["status"] == "FAILED") {
                     return;
                 }
                 for (let i = 0; i < data["logical-link"].length; i++) {//Determine whether there is an external cloud connection in the obtained connection, and kick it out.
@@ -273,13 +273,13 @@ export class CcvpnNetworkComponent implements OnInit {
         }
         console.log(charge);
         var svg = d3.select(_this.container).append('svg')
-                .attr('width', width)
-                .attr('height', height)
-                .attr('id', 'content-svg')
-                .style('pointer-events', 'all')
-                .style('position','absolute')
-                .style('top','1%')
-                .style('right','2%'),
+            .attr('width', width)
+            .attr('height', height)
+            .attr('id', 'content-svg')
+            .style('pointer-events', 'all')
+            .style('position', 'absolute')
+            .style('top', '1%')
+            .style('right', '2%'),
             graph = svg.append('g').attr('class', 'graph').attr('id', 'graph'),
 
             _g_nodes = graph.selectAll('g.node')
@@ -565,7 +565,7 @@ export class CcvpnNetworkComponent implements OnInit {
             width = 800;
         }
         var svg = d3.select('#content-svg');
-        svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
+        svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)');
         var out = d3.select('#out');
         out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
         out.append('text').text(networkId)
@@ -590,16 +590,16 @@ export class CcvpnNetworkComponent implements OnInit {
         textval[7] = this.dataCloud[0]['networkId'];
         console.log(this.dataCloud);
         let dataD3 = this.d3Data;
-        let arr=[
-          textval[0],
-          textval[1]
+        let arr = [
+            textval[0],
+            textval[1]
         ];
         for (let p = 0; p < dataD3.length; p++) {//Determine which Domain network the two tp ports belong to
-          for (let pp= 0; pp < arr.length; pp++) {//Determine which Domain network the two tp ports belong to
-            if (dataD3[p]['name'] == arr[pp]) {
-              textval[8] = dataD3[p]['source']['name'];//network1
+            for (let pp = 0; pp < arr.length; pp++) {//Determine which Domain network the two tp ports belong to
+                if (dataD3[p]['name'] == arr[pp]) {
+                    textval[8] = dataD3[p]['source']['name'];//network1
+                }
             }
-          }
         }
         textval[9] = dataCloudLink[0]['link-name'];
         let lines_json = {};
@@ -610,8 +610,8 @@ export class CcvpnNetworkComponent implements OnInit {
         } else {
             width = 800;
         }
-        console.log("shuchu01dataCloudLink"+dataCloudLink[0]);
-        console.log("shuchutextval"+textval);
+        console.log("shuchu01dataCloudLink" + dataCloudLink[0]);
+        console.log("shuchutextval" + textval);
         for (let i = 0; i < $(".node").length; i++) {
             if ($('.node').eq(i).find('text').html() == textval[8]) {
                 //Get the x, y coordinates of the second level
@@ -653,8 +653,8 @@ export class CcvpnNetworkComponent implements OnInit {
             'data-link': textval[9],
         });
         svg.html(svg.html());
-      this.getCloudUrl(textval[6]);
-      this.getExtAAIIdVersion(textval[6]);
+        this.getCloudUrl(textval[6]);
+        this.getExtAAIIdVersion(textval[6]);
     }
 
 
@@ -663,25 +663,25 @@ export class CcvpnNetworkComponent implements OnInit {
         this.myhttp.queryCloudUrl(aaiId)
             .subscribe((data) => {
                 this.delcloudUrl = data['service-url'];
-              $('.cloudline').attr({
-                'data-url': data['service-url']
-              });
+                $('.cloudline').attr({
+                    'data-url': data['service-url']
+                });
             }, (err) => {
                 console.log(err);
             });
     }
 
-  //Query external cloud ext-aai-id resource-version
-    getExtAAIIdVersion(aaiId){
+    //Query external cloud ext-aai-id resource-version
+    getExtAAIIdVersion(aaiId) {
         this.myhttp.queryExtAAIIdVersion(aaiId)
-          .subscribe((data) => {
-            this.delVersion = data["resource-version"];
-            $('.cloudline').attr({
-              'data-version':data["resource-version"],
+            .subscribe((data) => {
+                this.delVersion = data["resource-version"];
+                $('.cloudline').attr({
+                    'data-version': data["resource-version"],
+                });
+            }, (err) => {
+                console.log(err);
             });
-          }, (err) => {
-            console.log(err);
-          });
     }
 
 
@@ -801,7 +801,7 @@ export class CcvpnNetworkComponent implements OnInit {
                 'relationship': [
                     {
                         'related-to': 'p-interface',
-            'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1,
+                        'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode1 + '/p-interfaces/p-interface/' + this.selecteTpName1,
                         'relationship-data': [
                             {
                                 'relationship-key': 'pnf.pnf-id',
@@ -815,7 +815,7 @@ export class CcvpnNetworkComponent implements OnInit {
                     },
                     {
                         'related-to': 'p-interface',
-            'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2,
+                        'related-link': '/aai/v14/network/pnfs/pnf/' + this.selectedNode2 + '/p-interfaces/p-interface/' + this.selecteTpName2,
                         'relationship-data': [
                             {
                                 'relationship-key': 'pnf.pnf-id',
@@ -951,7 +951,7 @@ export class CcvpnNetworkComponent implements OnInit {
                 this.outCloudShow = true;
                 this.hideForm();
                 this.outCloud(this.imgmap);
-                setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name,time), 0);
+                setTimeout(this.cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name, time), 0);
             }, (err) => {
                 console.log(err);
             });
@@ -967,7 +967,7 @@ export class CcvpnNetworkComponent implements OnInit {
             width = 800;
         }
         var svg = d3.select('#content-svg');
-        svg.append('g').attr('class', 'out').attr('id', 'out').style({'display': 'block'}).attr('transform', 'translate(' + (width - 200) + ',0)');
+        svg.append('g').attr('class', 'out').attr('id', 'out').style({ 'display': 'block' }).attr('transform', 'translate(' + (width - 200) + ',0)');
         var out = d3.select('#out');
         out.append('image').style('width', '200').style('height', '118').attr('xlink:href', imgmap['3']);
         out.append('text').text('Partner Network')
@@ -980,7 +980,7 @@ export class CcvpnNetworkComponent implements OnInit {
     }
 
     //Add external cloud connection
-    cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name,time) {
+    cloudLine(networkVal1, selectedNode1, selecteTpName1, cloudUrl, cloudNetWork, cloudNode, cloudTp, status, link_name, time) {
         let lines_json = {};
         var _this = this,
             width;
@@ -989,12 +989,12 @@ export class CcvpnNetworkComponent implements OnInit {
         } else {
             width = 800;
         }
-        console.log("shuchuNetworkVal1:"+networkVal1);
+        console.log("shuchuNetworkVal1:" + networkVal1);
         for (let i = 0; i < $(".node").length; i++) {
             if ($('.node').eq(i).find('text').html() == networkVal1) {
                 //Get the x, y coordinates of the second level
                 var translates = $('.node').eq(i).css('transform');
-                console.log("shuchuTranslates:"+translates);
+                console.log("shuchuTranslates:" + translates);
                 lines_json['x1'] = parseFloat(translates.substring(7).split(',')[4]);
                 lines_json['y1'] = parseFloat(translates.substring(7).split(',')[5]);
                 lines_json['x2'] = width - 100;
@@ -1027,7 +1027,7 @@ export class CcvpnNetworkComponent implements OnInit {
             'data-network': networkVal1,
             'data-cloudnetwork': cloudNetWork,
             'data-url': cloudUrl,
-            'data-aaiid':time,
+            'data-aaiid': time,
             'data-link': link_name
         });
         svg.html(svg.html());
@@ -1037,26 +1037,26 @@ export class CcvpnNetworkComponent implements OnInit {
     //Create an external cloud, call the following 5 interfaces when connecting:createCloudNetwork,createPnfs,createCloudTp,createCloudLinks,createCloudUrls
     createCloudNetwork(time) {
         let _thiss = this;
-        console.log("shuchuCloudNetwork:"+time);
-        let params= {
-      		'-xmlns': 'http://org.onap.aai.inventory/v14',
-                'in-maint': 'false',
-                "network-id":this.cloudNetwork,
-                "provider-id": "",
-                "client-id": "",
-                "te-topo-id": "",
-                "relationship-list": {
-                    "relationship": [{
-                        "related-to": "ext-aai-network",
-          		'related-link': '/aai/v14/network/ext-aai-networks/ext-aai-network/' + time
-                    }]
-                }
+        console.log("shuchuCloudNetwork:" + time);
+        let params = {
+            '-xmlns': 'http://org.onap.aai.inventory/v14',
+            'in-maint': 'false',
+            "network-id": this.cloudNetwork,
+            "provider-id": "",
+            "client-id": "",
+            "te-topo-id": "",
+            "relationship-list": {
+                "relationship": [{
+                    "related-to": "ext-aai-network",
+                    'related-link': '/aai/v14/network/ext-aai-networks/ext-aai-network/' + time
+                }]
+            }
         };
 
         //Do some asynchronous operations
         _thiss.myhttp.createNetwrok(params)
             .subscribe((data) => {
-                if(data["status"]=="SUCCESS"){
+                if (data["status"] == "SUCCESS") {
                     _thiss.createPnfs(time)
                 }
             }, (err) => {
@@ -1066,38 +1066,38 @@ export class CcvpnNetworkComponent implements OnInit {
     }
 
     createPnfs(time) {
-        console.log("shuchupnf:"+time);
+        console.log("shuchupnf:" + time);
         let _thiss = this;
-        let params= {
-      		"-xmlns": "http://org.onap.aai.inventory/v14",
-                "pnf-name": this.cloudNode,
-                "pnf-id": this.cloudNode,
-                "in-maint": "true",
-                "relationship-list": {
-                    "relationship": [
-                        {
-                            "related-to": "ext-aai-network",
-                            "relationship-label": "org.onap.relationships.inventory.BelongsTo",
-            		    "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time,
-                            "relationship-data": {
-                                "relationship-key": "ext-aai-network.aai-id",
-                                "relationship-value":time
-                            }
-                        },
-                        {
-                            "related-to": "network-resource",
-                            "relationship-label": "tosca.relationships.network.LinksTo",
-            		    "related-link": "/aai/v14/network/network-resources/network-resource/" + this.cloudNetwork
+        let params = {
+            "-xmlns": "http://org.onap.aai.inventory/v14",
+            "pnf-name": this.cloudNode,
+            "pnf-id": this.cloudNode,
+            "in-maint": "true",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "ext-aai-network",
+                        "relationship-label": "org.onap.relationships.inventory.BelongsTo",
+                        "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time,
+                        "relationship-data": {
+                            "relationship-key": "ext-aai-network.aai-id",
+                            "relationship-value": time
                         }
-                    ]
-                }
+                    },
+                    {
+                        "related-to": "network-resource",
+                        "relationship-label": "tosca.relationships.network.LinksTo",
+                        "related-link": "/aai/v14/network/network-resources/network-resource/" + this.cloudNetwork
+                    }
+                ]
+            }
         }
 
         // var pro = new Promise(function (resolve, reject) {
         //Do some asynchronous operations
         _thiss.myhttp.createPnf(params)
             .subscribe((data) => {
-                if(data["status"]=="SUCCESS"){
+                if (data["status"] == "SUCCESS") {
                     _thiss.createCloudTp(time)
                 }
             }, (err) => {
@@ -1108,16 +1108,16 @@ export class CcvpnNetworkComponent implements OnInit {
     }
 
     createCloudTp(time) {
-        console.log("shuchuTp:"+time);
+        console.log("shuchuTp:" + time);
         let _thiss = this;
-        let params= {
-      		"-xmlns": "http://org.onap.aai.inventory/v14",
-                "interface-name": this.cloudTp,
-                "speed-value": "1000000",
-                "in-maint": "true",
-                "network-ref": "",
-                "transparent": "true",
-                "operational-status": "up"
+        let params = {
+            "-xmlns": "http://org.onap.aai.inventory/v14",
+            "interface-name": this.cloudTp,
+            "speed-value": "1000000",
+            "in-maint": "true",
+            "network-ref": "",
+            "transparent": "true",
+            "operational-status": "up"
         };
 
         let cloudNodeName = this.cloudNode;
@@ -1126,7 +1126,7 @@ export class CcvpnNetworkComponent implements OnInit {
         //Do some asynchronous operations
         _thiss.myhttp.createTp(params, cloudNodeName)
             .subscribe((data) => {
-                if(data["status"]=="SUCCESS"){
+                if (data["status"] == "SUCCESS") {
                     _thiss.createCloudLinks(time)
                 }
             }, (err) => {
@@ -1137,75 +1137,75 @@ export class CcvpnNetworkComponent implements OnInit {
         // return pro;
     }
 
-  createCloudLinks(time) {
-    let _thiss = this;
-    console.log('shuchuCloudLinks:' + time);
-    let params = {
-      "-xmlns": "http://org.onap.aai.inventory/v14",
-      "link-name": this.linkName,
-      "in-maint": "false",
-      "link-type": "cross-link",
-      "speed-value": "",
-      "operational-status": "up",
-      "relationship-list": {
-        "relationship": [
-          {
-            "related-to": "p-interface",
-            "relationship-label": "tosca.relationships.network.LinksTo",
-            "related-link": "/aai/v14/network/pnfs/pnf/" + this.selectedNode1 + "/p-interfaces/p-interface/" + this.selecteTpName1,
-            "relationship-data": [
-              {
-                "relationship-key": "pnf.pnf-name",
-                "relationship-value": this.selectedNode1
-              },
-              {
-                "relationship-key": "p-interface.interface-name",
-                "relationship-value": this.selecteTpName1
-              }
-            ],
-            "related-to-property": [{
-              "property-key": "p-interface.prov-status"
-            }]
-          },
-          {
-            "related-to": "p-interface",
-            "relationship-label": "tosca.relationships.network.LinksTo",
-            "related-link": "/aai/v14/network/pnfs/pnf/" + this.cloudNode + "/p-interfaces/p-interface/" + this.cloudTp,
-            "relationship-data": [
-              {
-                "relationship-key": "pnf.pnf-name",
-                "relationship-value": this.cloudNode
-              },
-              {
-                "relationship-key": "p-interface.interface-name",
-                "relationship-value": this.cloudTp
-              }
-            ],
-            "related-to-property": [{
-              "property-key": "p-interface.prov-status"
-            }]
-          },
-          {
-            "related-to": "ext-aai-network",
-            "relationship-label": "org.onap.relationships.inventory.BelongsTo",
-            "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time,
-            "relationship-data": [
-              {
-                "relationship-key": "ext-aai-network.aai-id",
-                "relationship-value": time
-              }
-            ]
-          }
-        ]
-      }
-    };
+    createCloudLinks(time) {
+        let _thiss = this;
+        console.log('shuchuCloudLinks:' + time);
+        let params = {
+            "-xmlns": "http://org.onap.aai.inventory/v14",
+            "link-name": this.linkName,
+            "in-maint": "false",
+            "link-type": "cross-link",
+            "speed-value": "",
+            "operational-status": "up",
+            "relationship-list": {
+                "relationship": [
+                    {
+                        "related-to": "p-interface",
+                        "relationship-label": "tosca.relationships.network.LinksTo",
+                        "related-link": "/aai/v14/network/pnfs/pnf/" + this.selectedNode1 + "/p-interfaces/p-interface/" + this.selecteTpName1,
+                        "relationship-data": [
+                            {
+                                "relationship-key": "pnf.pnf-name",
+                                "relationship-value": this.selectedNode1
+                            },
+                            {
+                                "relationship-key": "p-interface.interface-name",
+                                "relationship-value": this.selecteTpName1
+                            }
+                        ],
+                        "related-to-property": [{
+                            "property-key": "p-interface.prov-status"
+                        }]
+                    },
+                    {
+                        "related-to": "p-interface",
+                        "relationship-label": "tosca.relationships.network.LinksTo",
+                        "related-link": "/aai/v14/network/pnfs/pnf/" + this.cloudNode + "/p-interfaces/p-interface/" + this.cloudTp,
+                        "relationship-data": [
+                            {
+                                "relationship-key": "pnf.pnf-name",
+                                "relationship-value": this.cloudNode
+                            },
+                            {
+                                "relationship-key": "p-interface.interface-name",
+                                "relationship-value": this.cloudTp
+                            }
+                        ],
+                        "related-to-property": [{
+                            "property-key": "p-interface.prov-status"
+                        }]
+                    },
+                    {
+                        "related-to": "ext-aai-network",
+                        "relationship-label": "org.onap.relationships.inventory.BelongsTo",
+                        "related-link": "/aai/v14/network/ext-aai-networks/ext-aai-network/" + time,
+                        "relationship-data": [
+                            {
+                                "relationship-key": "ext-aai-network.aai-id",
+                                "relationship-value": time
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
 
         // var pro = new Promise(function (resolve, reject) {
         //Do some asynchronous operations
         _thiss.myhttp.createCloudLink(params)
             .subscribe((data) => {
                 // resolve(data['status']);
-                if(data["status"]=="SUCCESS"){
+                if (data["status"] == "SUCCESS") {
                     _thiss.queryOutCloudLink(time);
                 }
             }, (err) => {
@@ -1216,39 +1216,39 @@ export class CcvpnNetworkComponent implements OnInit {
         // return pro;
     }
 
-  createCloudUrls(time) {
-    let _thiss = this;
-    console.log(this.cloudNetwork);
-    console.log('shuchuUrls:' + time);
-    let params = {
-      '-xmlns': 'http://org.onap.aai.inventory/v14',
-      'aai-id': time,
-      'esr-system-info': {
-        'esr-system-info-id': 'example-esr-system-info-id-val-0',
-        'service-url': this.cloudUrl,
-        'user-name': 'demo',
-        'password': 'demo123456!',
-        'system-type': 'ONAP'
-      }
-    };
-    console.log(time);
-    console.log(params['aai-id']);
-    // var pro = new Promise(function (resolve, reject) {
-    //Do some asynchronous operations
-    _thiss.myhttp.createCloudUrl(params)
-      .subscribe((data) => {
-        if (data['status'] == 'SUCCESS') {
-          console.log(true);
-          _thiss.createCloudNetwork(time);
-        }
-        // resolve(data['status']);
-      }, (err) => {
-        // reject(err);
-        console.log(err);
-      });
-    // });
-    // return pro;
-  }
+    createCloudUrls(time) {
+        let _thiss = this;
+        console.log(this.cloudNetwork);
+        console.log('shuchuUrls:' + time);
+        let params = {
+            '-xmlns': 'http://org.onap.aai.inventory/v14',
+            'aai-id': time,
+            'esr-system-info': {
+                'esr-system-info-id': 'example-esr-system-info-id-val-0',
+                'service-url': this.cloudUrl,
+                'user-name': 'demo',
+                'password': 'demo123456!',
+                'system-type': 'ONAP'
+            }
+        };
+        console.log(time);
+        console.log(params['aai-id']);
+        // var pro = new Promise(function (resolve, reject) {
+        //Do some asynchronous operations
+        _thiss.myhttp.createCloudUrl(params)
+            .subscribe((data) => {
+                if (data['status'] == 'SUCCESS') {
+                    console.log(true);
+                    _thiss.createCloudNetwork(time);
+                }
+                // resolve(data['status']);
+            }, (err) => {
+                // reject(err);
+                console.log(err);
+            });
+        // });
+        // return pro;
+    }
 
     //Local cloud TP port Delete connection Call interface deleteLink
     delLink(): void {
@@ -1291,7 +1291,7 @@ export class CcvpnNetworkComponent implements OnInit {
         let deltp1 = this.delTp1,
             deltp2 = this.delTp2,
             version = this.delVersion,
-            aaiId=this.aaiId;
+            aaiId = this.aaiId;
         let params = {
             "aaiId": aaiId,
             "version": version,
diff --git a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
index 217ee121..609ce3ee 100644
--- a/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
+++ b/usecaseui-portal/src/app/components/charts/bar/bar.component.ts
@@ -41,7 +41,7 @@ export class BarComponent implements OnInit {
       tooltip: this.initData.option.tooltip,
       grid: this.initData.option.grid,
       xAxis: this.initData.option.xAxis,
-      yAxis:this.initData.option.yAxis,
+      yAxis: this.initData.option.yAxis,
       series: this.initData.option.series
     }
   }
diff --git a/usecaseui-portal/src/app/home/home.component.ts b/usecaseui-portal/src/app/home/home.component.ts
index eaa87823..a46c977c 100644
--- a/usecaseui-portal/src/app/home/home.component.ts
+++ b/usecaseui-portal/src/app/home/home.component.ts
@@ -23,12 +23,12 @@ import { Router } from '@angular/router';
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.less'],
-  animations: [ slideToRight ]
+  animations: [slideToRight]
 })
 export class HomeComponent implements OnInit {
   @HostBinding('@routerAnimate') routerAnimateState;
 
-  constructor(private myhttp: HomesService,private router:Router) { }
+  constructor(private myhttp: HomesService, private router: Router) { }
 
   ngOnInit() {
     this.getListSortMasters();
@@ -43,24 +43,24 @@ export class HomeComponent implements OnInit {
 
 
   // services
-  serviceNumber:number = 0;
-  serviceChartData:Object;
-  serviceChartInit:Object = {
-  backgroundColor: '#fff',
+  serviceNumber: number = 0;
+  serviceChartData: Object;
+  serviceChartInit: Object = {
+    backgroundColor: '#fff',
     height: 200,
-    option:{
+    option: {
       legend: {
         orient: 'vertical',
         left: '0px',
         bottom: '0px',
-        data: ['Active','Closed']
+        data: ['Active', 'Closed']
       },
       color: ["#7AC0EF", "#6A86D8", "#748CDC", "#7277D4", "#7067CE", "#B9B0F7", "#7DCFF5"],
       series: [
         {
           name: "服务信息",
           radius: ['50%', '70%'],
-          center:['50%', '45%'],
+          center: ['50%', '45%'],
           avoidLabelOverlap: false,
           label: {
             normal: {
@@ -73,11 +73,11 @@ export class HomeComponent implements OnInit {
               textStyle: {
                 fontSize: '18',
                 fontWeight: 'bold'
+              }
             }
-          }
-        },
-        labelLine: {
-          normal: {
+          },
+          labelLine: {
+            normal: {
               show: false
             }
           },
@@ -96,82 +96,80 @@ export class HomeComponent implements OnInit {
   };
   // gethomeServiceData
   serviceChart = true;
-  getHomeServiceData(){
+  getHomeServiceData() {
     this.myhttp.getHomeServiceData()
-    .subscribe(
-      (data)=>{
-        // console.log(data);
-        this.serviceNumber = data.serviceTotalNum;
+      .subscribe(
+        (data) => {          
+          this.serviceNumber = data.serviceTotalNum;
           if (this.serviceNumber > 0) {
             this.serviceChart = true;
           } else {
             this.serviceChart = false;
           }
-        this.serviceChartData = {
-          series:[{data:data.customerServiceList}]
-        };
-        // console.log(this.serviceChartData);
-      },
-      (err)=>{
-        console.log(err);
-      }
-    )
+          this.serviceChartData = {
+            series: [{ data: data.customerServiceList }]
+          };         
+        },
+        (err) => {
+          console.log(err);
+        }
+      )
   }
 
-    // VM alarm
-    VMAlarmChartData: Object;
-    VMAlarmChartInit: Object = {
-        height: 180,
-        option: {
-            color: [
-                {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                        offset: 0, color: '#FB93C2' 
-                    }, {
-                        offset: 1, color: '#FB7788' 
-                    }],
-                    globalCoord: false // 
-                }, {
-                    type: 'linear',
-                    x: 0,
-                    y: 0,
-                    x2: 0,
-                    y2: 1,
-                    colorStops: [{
-                        offset: 0, color: '#A6BFE4' 
-                    }, {
-                        offset: 1, color: '#7A8BAE' 
-                    }],
-                    globalCoord: false
-                }],
-            series: [{
-                name: "",
-                radius: ['50%', '70%'],
-                center: ['50%', '45%'],
-                label: {
-                    normal: {
-                        show: false,
-                    },
-                    emphasis: {
-                        show: true,
-                        formatter: '{b}\n{c},{d}%',
-                        color: "#3C4F8C"
-                    }
-                }
-            }]
+  // VM alarm
+  VMAlarmChartData: Object;
+  VMAlarmChartInit: Object = {
+    height: 180,
+    option: {
+      color: [
+        {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0, color: '#FB93C2'
+          }, {
+            offset: 1, color: '#FB7788'
+          }],
+          globalCoord: false  
+        }, {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [{
+            offset: 0, color: '#A6BFE4'
+          }, {
+            offset: 1, color: '#7A8BAE'
+          }],
+          globalCoord: false
+        }],
+      series: [{
+        name: "",
+        radius: ['50%', '70%'],
+        center: ['50%', '45%'],
+        label: {
+          normal: {
+            show: false,
+          },
+          emphasis: {
+            show: true,
+            formatter: '{b}\n{c},{d}%',
+            color: "#3C4F8C"
+          }
         }
-    };
+      }]
+    }
+  };
 
   // alarm bar
-  alarmChartData:Object;
-  alarmChartInit:Object = {
+  alarmChartData: Object;
+  alarmChartInit: Object = {
     height: 180,
-    option:{
+    option: {
       legend: {
         orient: 'vertical',
         left: '0px',
@@ -193,7 +191,7 @@ export class HomeComponent implements OnInit {
           colorStops: [{
             offset: 0, color: '#FB93C2'
           }, {
-            offset: 1, color: '#FB7788' 
+            offset: 1, color: '#FB7788'
           }],
           globalCoord: false
         }, {
@@ -212,7 +210,7 @@ export class HomeComponent implements OnInit {
       series: [{
         name: " ",
         radius: '55%',
-        center:['50%', '45%'],
+        center: ['50%', '45%'],
         label: {
           normal: {
             show: false,
@@ -226,35 +224,35 @@ export class HomeComponent implements OnInit {
       }]
     }
   };
-  getHomeAlarmData(){
+  getHomeAlarmData() {
     this.myhttp.getHomeAlarmData()
-      .subscribe((data)=>{
-        this.alarmChartData ={
-          series:[{
+      .subscribe((data) => {
+        this.alarmChartData = {
+          series: [{
             data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
           }]
         };
-                this.VMAlarmChartData = {
-                    series: [{
-                        data: [{name: "Active", value: data[0]}, {name: "Fixed", value: data[1]}]
-                    }]
-                };
-            })
-    }
+        this.VMAlarmChartData = {
+          series: [{
+            data: [{ name: "Active", value: data[0] }, { name: "Fixed", value: data[1] }]
+          }]
+        };
+      })
+  }
 
   // alarm line
-  alarmLineChartData:Object;
-  alarmLineChartInit:Object = {
-    height:320,
-    option:{
+  alarmLineChartData: Object;
+  alarmLineChartInit: Object = {
+    height: 320,
+    option: {
       legend: {
         bottom: '0px',
         data: ['CPU', 'Memory', 'Disk']
       },
-      xAxis:{
-        data:[]
+      xAxis: {
+        data: []
       },
-      series : [
+      series: [
         {
           name: 'CPU',
           type: 'line',
@@ -282,8 +280,8 @@ export class HomeComponent implements OnInit {
       ]
     }
   };
-  
-   // services 
+
+  // services 
   servicesBarChartData: Object;
   servicesBarChartData1: Object;
   servicesBarChartData2: Object;
@@ -291,11 +289,11 @@ export class HomeComponent implements OnInit {
     height: 40,
     width: 160,
     option: {
-      tooltip:{
-        
+      tooltip: {
+
       },
       grid: {
-        
+
       },
       xAxis: {
         type: 'value',
@@ -322,21 +320,7 @@ export class HomeComponent implements OnInit {
         stack: 'income',
         barWidth: 12,
         itemStyle: {
-          normal: {
-            // color: {
-            //   type: 'bar',
-            //   colorStops: [{
-            //     offset: 0,
-            //     color: '#FDAC63' 
-            //   }, {
-            //     offset: 1,
-            //     color: '#FECE72' 
-            //   }],
-            //   globalCoord: false,
-
-            // },
-            // barBorderRadius: [10, 10, 10, 10]
-          }
+          normal: {}
         },
       }, {
         type: 'bar',
@@ -386,9 +370,9 @@ export class HomeComponent implements OnInit {
                       color: '#FDAC63'
                     }, {
                       offset: 1,
-                      color: '#FECE72' 
+                      color: '#FECE72'
                     }],
-                    globalCoord: false, 
+                    globalCoord: false,
                   },
                   barBorderRadius: [10, 10, 10, 10]
                 }
@@ -417,12 +401,12 @@ export class HomeComponent implements OnInit {
                     type: 'bar',
                     colorStops: [{
                       offset: 0,
-                      color: '#9AD09F' 
+                      color: '#9AD09F'
                     }, {
                       offset: 1,
-                      color: '#BCECB8' 
+                      color: '#BCECB8'
                     }],
-                    globalCoord: false, 
+                    globalCoord: false,
 
                   },
                   barBorderRadius: [10, 10, 10, 10]
@@ -443,24 +427,26 @@ export class HomeComponent implements OnInit {
         this.PnfData = data.length;
         this.servicesBarChartData2 = {
           series: [
-            { data: [this.PnfData],
+            {
+              data: [this.PnfData],
               itemStyle: {
                 normal: {
                   color: {
                     type: 'bar',
                     colorStops: [{
                       offset: 0,
-                      color: '#71ADEF' 
+                      color: '#71ADEF'
                     }, {
                       offset: 1,
-                      color: '#ACCAF4' 
+                      color: '#ACCAF4'
                     }],
-                    globalCoord: false, 
+                    globalCoord: false,
 
                   },
                   barBorderRadius: [10, 10, 10, 10]
                 }
-              },},
+              },
+            },
             { data: [100] },
           ]
         }
@@ -472,65 +458,63 @@ export class HomeComponent implements OnInit {
   sourceNameList = ['performanceNameOne'];
   sourceNameSelected = null;
 
-  //2019.1.2 add listSortMasters
-  listSortMasters=null;
+  
+  listSortMasters = null;
 
-  getListSortMasters(){
-      if(sessionStorage.getItem("DefaultLang") ==undefined){
-          sessionStorage.setItem("DefaultLang","en");
-      }
-      this.myhttp.getListSortMasters()
-          .subscribe((data)=>{
-              this.listSortMasters = JSON.stringify(data);
-        // console.log(this.listSortMasters);
-              sessionStorage.setItem('listSortMasters',this.listSortMasters)
-          })
+  getListSortMasters() {
+    if (sessionStorage.getItem("DefaultLang") == undefined) {
+      sessionStorage.setItem("DefaultLang", "en");
+    }
+    this.myhttp.getListSortMasters()
+      .subscribe((data) => {
+        this.listSortMasters = JSON.stringify(data);        
+        sessionStorage.setItem('listSortMasters', this.listSortMasters)
+      })
   }
 
-  getSourceNames(){
+  getSourceNames() {
     this.myhttp.getSourceNames()
-      .subscribe((data)=>{
+      .subscribe((data) => {
         this.sourceNameList = data;
       })
   }
-  sourceNameSelect(item){
-    if(this.sourceNameSelected != item){
-      // console.log(item);
+  sourceNameSelect(item) {
+    if (this.sourceNameSelected != item) {      
       this.sourceNameSelected = item;
       this.getHomeAlarmChartData()
-    } 
+    }
   }
-  getHomeAlarmChartData(){
-    let nowTime = this.myhttp.dateformater( Date.now());
-    let startTime = this.myhttp.dateformater( Date.now()-30*24*60*60*1000 );
+  getHomeAlarmChartData() {
+    let nowTime = this.myhttp.dateformater(Date.now());
+    let startTime = this.myhttp.dateformater(Date.now() - 30 * 24 * 60 * 60 * 1000);
     let obj = {
-      sourceName:this.sourceNameSelected,
+      sourceName: this.sourceNameSelected,
       startTime: startTime,
-      endTime:nowTime,
-      format:"day"
+      endTime: nowTime,
+      format: "day"
     }
-    // console.log(obj);
+   
     this.myhttp.getHomeAlarmChartData(obj)
-      .subscribe((data)=>{
+      .subscribe((data) => {
         this.alarmLineChartData = {
-          xAxis:{
-            data:data.dataList
+          xAxis: {
+            data: data.dataList
           },
-          series:[
-            {data:data.allList},
-            {data:data.ActiveList},
-            {data:data.closedList}
+          series: [
+            { data: data.allList },
+            { data: data.ActiveList },
+            { data: data.closedList }
           ]
         }
-      },(err)=>{
+      }, (err) => {
         console.log(err);
       })
   }
 
-  goback_services(){
+  goback_services() {
     this.router.navigateByUrl('/services/services-list');
   }
-  goback_onboard(){
+  goback_onboard() {
     this.router.navigateByUrl('/services/onboard-vnf-vm');
   }