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%;
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;
<div class="fl" style="width: 20%">
<button class="submit" nz-button (click)="submit()"><span> {{"i18nTextDefine_Create" | translate}} </span>
</button>
- <button class="back" nz-button (click)="goback()">
- <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i>
- </button>
+ <button class="back" nz-button (click)="goback()"></button>
</div>
</div>
<!-- chart -->
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",
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
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;
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;
<div class="top-title">
<h3 class="title fl">{{detailParams['service-instance-name']}} Instance Detail</h3>
<div class="fl" style="width: 20%">
- <button class="back" nz-button (click)="goback()">
- <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i>
- </button>
+ <button class="back" nz-button (click)="goback()"></button>
</div>
</div>
<!-- ͼ -->
<h3 class="title fl">{{createParams.commonParams.templateType}} {{"i18nTextDefine_InstanceCreation" | translate}} </h3>
<div class="fl" style="width: 20%">
<button class="submit" nz-button (click)="submit()"><span> {{"i18nTextDefine_Create" | translate}} </span></button>
- <button class="back" nz-button (click)="goback()">
- <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i>
- </button>
+ <button class="back" nz-button (click)="goback()"></button>
</div>
</div>
<div class="e2ecreate-content">
<h3>{{template.name}}</h3>
<ul>
<li *ngFor="let input of template.inputs; let i = index;">
- <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" title=" {{input.name}}"> {{input.name}}: </span>
+ <span *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" title="{{input.name}}"> {{input.name}}: </span>
<input *ngIf="input.type !== 'vf_location' && input.type !== 'sdn_controller'" nz-input
[(ngModel)]="input.value">
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;
constructor( private myhttp:MyhttpService ) { }
ngOnInit() {
- this.getTemParameters();
+ this.gete2eTemParameters(this.e2e_ns_temParametersContent);
this.getVimInfo();
this.getSdnControllers();
console.log(this.createParams);
@Output() e2eCloseCreate = new EventEmitter();
@Output() nsCloseCreate = new EventEmitter();
@Input() createParams;
+ @Input() e2e_ns_temParametersContent;
// e2e serviceTemplateParameters
'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)=>{
this.drawImage(type)
- })
}
vimInfos=[];
getVimInfo() {
<div class="top-title">
<h3 class="title fl">{{serviceInstanceName}} Instance Detail</h3>
<div class="fl" style="width: 20%">
- <button class="back" nz-button (click)="goback()">
- <i class="anticon anticon-arrow-left" style="transform: scale(1.5)"></i>
- </button>
+ <button class="back" nz-button (click)="goback()"></button>
</div>
</div>
<div class="detaildata fl">
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;
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%;
<label class="label" style="font-size: 20px; color: rgb(60,79,140,0.5)">Sol005</label>
</div>
</div>
+ <div class="select-list" style="color: red;margin-left: 66px;" *ngIf="temParametersTips"> {{"i18nTextDefine_Templateparsingfailed" | translate}}</div>
</nz-modal>
</div>
<nz-layout style=" padding: 20px 32px; ">
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!');
}
+ 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;
"i18nTextDefine_InstanceUpdatedSuccessfully":"更新成功",
"i18nTextDefine_InstanceUpdateFailed":"更新失败",
"i18nTextDefine_Close":"关闭",
+ "i18nTextDefine_Templateparsingfailed": "模板解析失败",
"ccvpn-creation-component":"--:",
"i18nTextDefine_InstanceCreation":"实例创建",
"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",
"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":"--:",
Code Review / usecase-ui.git / commitdiff
