From cd934c497a6bf26992bcb42e27a179479001658b Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Tue, 14 May 2019 18:41:02 +0800 Subject: Fix instance instantiation for CCVPN Change-Id: Ibf9be061fb6a461cd6c73ccf56a6afe72928157d Issue-ID: USECASEUI-220 Signed-off-by: guochuyicmri --- .../ccvpn-creation/ccvpn-creation.component.css | 12 ++++-- .../ccvpn-creation/ccvpn-creation.component.html | 4 +- .../app/ccvpn-creation/ccvpn-creation.component.ts | 44 ++++++--------------- .../app/ccvpn-detail/ccvpn-detail.component.css | 13 ++++-- .../app/ccvpn-detail/ccvpn-detail.component.html | 4 +- .../e2e-creation/e2e-creation.component.html | 6 +-- .../e2e-creation/e2e-creation.component.less | 12 +++--- .../e2e-creation/e2e-creation.component.ts | 12 +++--- .../e2e-detail/e2e-detail.component.html | 4 +- .../e2e-detail/e2e-detail.component.less | 15 ++++--- .../services-list/services-list.component.html | 1 + .../services-list/services-list.component.ts | 40 ++++++++++++++++--- usecaseui-portal/src/assets/i18n/cn.json | 1 + usecaseui-portal/src/assets/i18n/en.json | 3 +- .../src/assets/images/Return-icon-active.png | Bin 0 -> 1210 bytes usecaseui-portal/src/assets/images/Return-icon.png | Bin 0 -> 1217 bytes 16 files changed, 94 insertions(+), 77 deletions(-) create mode 100644 usecaseui-portal/src/assets/images/Return-icon-active.png create mode 100644 usecaseui-portal/src/assets/images/Return-icon.png diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css index ce546cb8..23ea9d7a 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css @@ -38,18 +38,24 @@ hr { position: relative; display: inline-block; } -.model .back { +.model .back,.model .back:hover{ position: absolute; top: 10px; right: 20px; display: inline-block; width: 35px; height: 35px; - background:#ffffff!important; + background:url("../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; border-radius:4px; color: #D7D7D7; + cursor: pointer; /*border: 1px solid #ffffff;*/ } +.model .back:hover{ + background: url("../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; +} .top-title h3.title { height: 35px; width: 80%; @@ -239,7 +245,7 @@ hr { border-radius:4px; border:1px solid #D7D7D7; } -.sitemodel h3 button:hover,.model .back:hover,.sotnnpnmodel h3 button:hover{ +.sitemodel h3 button:hover,.sotnnpnmodel h3 button:hover{ background:#ffffff; color: #0DA9E2; border:1px solid #0DA9E2; diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html index 3409c8fa..486c11e8 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html @@ -22,9 +22,7 @@
- +
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 b3db8906..f2f35221 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -27,14 +27,14 @@ import {el} from "@angular/platform-browser/testing/src/browser_util"; export class CcvpnCreationComponent implements OnInit { constructor(private myhttp:MyhttpService) { } + @Input() createParams; + @Input() ccvpn_temParametersContent; + @Output() closeCreate = new EventEmitter(); ngOnInit() { - this.getTemParameters(); + this.getccvpnTemParameters(this.ccvpn_temParametersContent); } - @Input() createParams; - @Output() closeCreate = new EventEmitter(); - //tabBarStyle tabBarStyle = { "height": "58px", @@ -77,59 +77,41 @@ export class CcvpnCreationComponent implements OnInit { return Object.keys(item); } - getTemParameters() { //Get template parameters - let chosedtemplates = this.createParams.template; - let types = this.createParams.commonParams.templateType; + getccvpnTemParameters(data) { //Get template parameters console.log(this.createParams); - console.log(chosedtemplates); //Template id array - this.myhttp.getTemplateParameters(types, chosedtemplates) - .subscribe((data) => { let inputs = data["inputs"]; - let vnfs = data["vnfs"]; this.templateParameters.service = { name: data.metadata.name, description: data.metadata.description, serviceInvariantUuid: data.metadata.invariantUUID, serviceUuid: data.metadata.UUID }; - vnfs.map((item) => { //Add basic information about sotnvpn and site - if( item["vnf_id"]=='sdwanvpnresource'){ - this.templateParameters["sotnvpn"]["info"]={resourceName: item["vnf_id"], min:item.properties["min_instances"],resourceInvariantUuid: item.metadata["invariantUUID"], resourceUuid: item.metadata["UUID"],resourceCustomizationUuid: item.metadata["customizationUUID"]} - } - if(item["vnf_id"]=='sdwansiteresource'){ - this.templateParameters["site"]["info"]={resourceName: item["vnf_id"], min:item.properties["min_instances"],resourceInvariantUuid: item.metadata["invariantUUID"], resourceUuid: item.metadata["UUID"],resourceCustomizationUuid: item.metadata["customizationUUID"]} - } - }); - //Screening separation sotnvpn data - inputs["sdwanvpnresource_list"].map((item,index) => { + inputs["vpnresourcelist"].map((item,index) => { if(item["required"] !=undefined){ this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(item); } - if (item["sdwansitelan_list"] != undefined && item["sdwansitelan_list"] instanceof Array === true) { - this.templateParameters["sotnvpn"]["sdwansitelan_list"] = item["sdwansitelan_list"] + if (item["sitelanlist"] != undefined && item["sitelanlist"] instanceof Array === true) { + this.templateParameters["sotnvpn"]["sdwansitelan_list"] = item["sitelanlist"] } }); //Screening separation site data - inputs["sdwansiteresource_list"].map((item,index) => { + inputs["sitereourcelist"].map((item,index) => { if(item["required"] !=undefined){ this.templateParameters["site"]["sdwansiteresource_list"].push(item); } - if (item["sdwandevice_list"] != undefined && item["sdwandevice_list"] instanceof Array === true) { - this.templateParameters["site"]["sdwandevice_list"] = item["sdwandevice_list"] + if (item["deviceList"] != undefined && item["deviceList"] instanceof Array === true) { + this.templateParameters["site"]["sdwandevice_list"] = item["deviceList"] } - if (item["sdwansitewan_list"] != undefined && item["sdwansitewan_list"] instanceof Array === true) { - this.templateParameters["site"]["sdwansitewan_list"] = item["sdwansitewan_list"] + if (item["sitewanlist"] != undefined && item["sitewanlist"] instanceof Array === true) { + this.templateParameters["site"]["sdwansitewan_list"] = item["sitewanlist"] } }); this.showTemParametersSotnVpn(); this.showTemParametersSite(); console.log(this.templateParameters) - }, (err) => { - - }); } //sotnVpn data, after combining the structure, rendering the template data to the page diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css index 912157de..272e0b8f 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css @@ -39,16 +39,23 @@ hr { position: relative; display: inline-block; } -.model .back { +.model .back,.model .back:hover{ position: absolute; top: 10px; right: 20px; display: inline-block; width: 35px; height: 35px; - background:#ffffff!important; + background:url("../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; border-radius:4px; color: #D7D7D7; + cursor: pointer; + /*border: 1px solid #ffffff;*/ +} +.model .back:hover{ + background: url("../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; } .top-title h3.title { height: 35px; @@ -241,7 +248,7 @@ hr { border-radius:4px; border:1px solid #D7D7D7; } -.sitemodel h3 button:hover,.model .back:hover,.sotnnpnmodel h3 button:hover{ +.sitemodel h3 button:hover,.sotnnpnmodel h3 button:hover{ background:#ffffff; color: #0DA9E2; border:1px solid #0DA9E2; diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html index 5e630767..96d5dcb5 100644 --- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html +++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html @@ -19,9 +19,7 @@

{{detailParams['service-instance-name']}} Instance Detail

- +
diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html index b2ec4401..5e9f8158 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.html @@ -20,9 +20,7 @@

{{createParams.commonParams.templateType}} {{"i18nTextDefine_InstanceCreation" | translate}}

- +
@@ -63,7 +61,7 @@

{{template.name}}

  • - {{input.name}}: + {{input.name}}: diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less index 1900f7d2..22c12fb7 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.less @@ -52,21 +52,23 @@ hr { background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; border: none; } - .back { + .back,.back:hover{ position: absolute; top: 10px; right: 20px; display: inline-block; width: 35px; height: 35px; - background:#ffffff!important; + background:url("../../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; border-radius:4px; color: #D7D7D7; + cursor: pointer; + /*border: 1px solid #ffffff;*/ } .back:hover{ - background:#ffffff; - color: #3F9CFF; - border:1px solid #3F9CFF; + background: url("../../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; } .top-title h3.title { height: 35px; diff --git a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts index d5e1a3a0..dc8566e0 100644 --- a/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts +++ b/usecaseui-portal/src/app/components/e2e-creation/e2e-creation.component.ts @@ -27,7 +27,7 @@ export class E2eCreationComponent implements OnInit { constructor( private myhttp:MyhttpService ) { } ngOnInit() { - this.getTemParameters(); + this.gete2eTemParameters(this.e2e_ns_temParametersContent); this.getVimInfo(); this.getSdnControllers(); console.log(this.createParams); @@ -36,6 +36,7 @@ export class E2eCreationComponent implements OnInit { @Output() e2eCloseCreate = new EventEmitter(); @Output() nsCloseCreate = new EventEmitter(); @Input() createParams; + @Input() e2e_ns_temParametersContent; // e2e serviceTemplateParameters @@ -75,12 +76,10 @@ export class E2eCreationComponent implements OnInit { '2': './assets/images/create-ns.png', '3': './assets/images/create-vnf.png', }; - getTemParameters(){ //Get template parameters + gete2eTemParameters(data) { //Get template parameters let type = this.createParams.commonParams.templateType == "E2E Service" ? "e2e" : "ns"; - this.myhttp.getTemplateParameters(type,this.createParams.template) - .subscribe((data)=>{ - // console.log(this.createParams); - // console.log(data); + console.log(this.createParams); + console.log(data); if(type == "e2e"){ this.templateParameters = data; this.templateParameters.nestedTemplates.forEach((item)=>{ @@ -124,7 +123,6 @@ export class E2eCreationComponent implements OnInit { this.drawImage(type) - }) } vimInfos=[]; getVimInfo() { diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html index dec6f2d3..29ac4194 100644 --- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html +++ b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.html @@ -19,9 +19,7 @@

    {{serviceInstanceName}} Instance Detail

    - +
    diff --git a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less index fd306c5b..bba5160f 100644 --- a/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less +++ b/usecaseui-portal/src/app/components/e2e-detail/e2e-detail.component.less @@ -38,21 +38,23 @@ hr { position: relative; display: inline-block; } - .back { + .back,.back:hover{ position: absolute; top: 10px; right: 20px; display: inline-block; width: 35px; height: 35px; - background:#ffffff!important; + background:url("../../../assets/images/Return-icon.png") no-repeat!important; + background-size: 100%!important; border-radius:4px; color: #D7D7D7; + cursor: pointer; + /*border: 1px solid #ffffff;*/ } .back:hover{ - background:#ffffff; - color: #3F9CFF; - border:1px solid #3F9CFF; + background: url("../../../assets/images/Return-icon-active.png")!important; + background-size: 100%!important; } .top-title h3.title { height: 35px; @@ -132,10 +134,7 @@ hr { height: 95%; box-shadow: 0px 10px 35px 10px rgba(222, 222, 222, 0.5); margin-right: 40px; - //background: url("../../../assets/images/ccvpn-createbanner2.png") no-repeat -45px -10px; - //background-size: 110% 110%; background:linear-gradient(180deg,rgba(183, 230, 247, 1) 0%,rgba(214, 240, 254, 1) 100%); - //background-color: rgba(188, 231, 248, 1); border-radius: 4px; #createChart{ height: 100%; diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html index b68210ae..55551402 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html @@ -86,6 +86,7 @@
+
{{"i18nTextDefine_Templateparsingfailed" | translate}}
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts index 90e996a9..1cf8cb98 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts @@ -216,18 +216,13 @@ export class ServicesListComponent implements OnInit { createData:Object={}; handleOk(): void { // console.log('Button ok clicked!'); - this.isVisible = false; if(this.templateTypeSelected=="SOTN"||this.templateTypeSelected=="CCVPN"){ this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected2, templateType:this.templateTypeSelected},template:this.template1}; - this.createshow = true; - this.listDisplay = true; }else if(this.templateTypeSelected=="E2E Service"||this.templateTypeSelected=="Network Service"){ this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected2, templateType:this.templateTypeSelected},template:this.template1, orchestrator:this.orchestratorSelected, isSol005Interface:this.isSol005Interface}; - this.createshow2 = true; - this.listDisplay = true; } - + this.getTemParameters(); } handleCancel(): void { // console.log('Button cancel clicked!'); @@ -235,6 +230,39 @@ export class ServicesListComponent implements OnInit { } + temParametersTips=false; + ccvpn_temParametersContent :any; + e2e_ns_temParametersContent :any; + getTemParameters(){ + let chosedtemplates = this.createData["template"]; + let types = this.createData["commonParams"].templateType; + if(types == "E2E Service"){ + types = "e2e"; + }else if(types == "Network Service"){ + types = "ns"; + } + this.myhttp.getTemplateParameters(types, chosedtemplates) + .subscribe((data) => { + if (data.status == "FAILED") { + this.temParametersTips = true; + this.isVisible = true; + console.log("Template parsing failed"); + }else { + this.isVisible = false; + this.temParametersTips = false; + if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") { + this.ccvpn_temParametersContent = data; + this.createshow = true; + this.listDisplay = true; + } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") { + this.e2e_ns_temParametersContent = data; + this.createshow2 = true; + this.listDisplay = true; + } + } + }) + } + //tableData tableData = []; pageIndex = 1; diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json index 38fdbf25..20f8143b 100644 --- a/usecaseui-portal/src/assets/i18n/cn.json +++ b/usecaseui-portal/src/assets/i18n/cn.json @@ -82,6 +82,7 @@ "i18nTextDefine_InstanceUpdatedSuccessfully":"更新成功", "i18nTextDefine_InstanceUpdateFailed":"更新失败", "i18nTextDefine_Close":"关闭", + "i18nTextDefine_Templateparsingfailed": "模板解析失败", "ccvpn-creation-component":"--:", "i18nTextDefine_InstanceCreation":"实例创建", diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json index 26e95fda..6683ff94 100644 --- a/usecaseui-portal/src/assets/i18n/en.json +++ b/usecaseui-portal/src/assets/i18n/en.json @@ -82,6 +82,7 @@ "i18nTextDefine_InstanceUpdatedSuccessfully":"instance was updated successfully.", "i18nTextDefine_InstanceUpdateFailed":"instance update failed!!!", "i18nTextDefine_Close":"close", + "i18nTextDefine_Templateparsingfailed": "Template parsing failed", "ccvpn-creation-component":"--:", "i18nTextDefine_InstanceCreation":"Instance Creation", @@ -108,7 +109,7 @@ "management-component":"--:", "i18nTextDefine_Create_initial_customer":"Create initial customer", "i18nTextDefine_Customer_not_in_ONAP":"Customer has not been created in ONAP", - "i18nTextDefine_createCustomer":"Please create customer and its service type", + "i18nTextDefine_CreateCustomer":"Please create customer and its service type", "i18nTextDefine_Input_customerName":"Input customer name", "customer-component":"--:", diff --git a/usecaseui-portal/src/assets/images/Return-icon-active.png b/usecaseui-portal/src/assets/images/Return-icon-active.png new file mode 100644 index 00000000..2177d44c Binary files /dev/null and b/usecaseui-portal/src/assets/images/Return-icon-active.png differ diff --git a/usecaseui-portal/src/assets/images/Return-icon.png b/usecaseui-portal/src/assets/images/Return-icon.png new file mode 100644 index 00000000..55431731 Binary files /dev/null and b/usecaseui-portal/src/assets/images/Return-icon.png differ -- cgit 1.2.3-korg