diff options
12 files changed, 304 insertions, 175 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 08307fa7..12066fca 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -93,19 +93,20 @@ export class CcvpnCreationComponent implements OnInit { }; //Screening separation sotnvpn data Object.keys(inputss).map((item) => { - if (item.search("vpn")) { + if (item.search("vpn")!=-1) { inputs["vpnresourcelist"] = inputss[item]; } - if (item.search("site")) { + if (item.search("site")!=-1) { inputs["sitereourcelist"] = inputss[item]; } }); + console.log(inputss); console.log(inputs); inputs["vpnresourcelist"].map((item, index) => { if (item["required"] != undefined) { this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(item); } - if(item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("sitelan") && item[Object.keys(item)[0]] instanceof Array === true){ + if(item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("sitelan")!=-1 && item[Object.keys(item)[0]] instanceof Array === true){ this.templateParameters["sotnvpn"]["sdwansitelan_list"] = item[Object.keys(item)[0]] } }); @@ -115,10 +116,10 @@ export class CcvpnCreationComponent implements OnInit { if (item["required"] != undefined) { this.templateParameters["site"]["sdwansiteresource_list"].push(item); } - if(item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("device") && item[Object.keys(item)[0]] instanceof Array === true){ + if(item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("device")!=-1 && item[Object.keys(item)[0]] instanceof Array === true){ this.templateParameters["site"]["sdwandevice_list"] = item[Object.keys(item)[0]]; } - if(item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("sitewan") && item[Object.keys(item)[0]] instanceof Array === true){ + if(item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("sitewan")!=-1 && item[Object.keys(item)[0]] instanceof Array === true){ this.templateParameters["site"]["sdwansitewan_list"] = item[Object.keys(item)[0]]; } }); @@ -184,7 +185,11 @@ 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) + } + }); this.templateParameters.site.sdwansitewan_list.push( { ipMode: "", @@ -356,6 +361,7 @@ export class CcvpnCreationComponent implements OnInit { editSotnVpn(num){ this.sotnVpnModelShow = true; this.isEditSotnVpn = num; + console.log(this.templateParameters.sotnvpn.sdwanvpnresource_list) Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; }); 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 cfd32f7c..9620a977 100644 --- a/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts +++ b/usecaseui-portal/src/app/ccvpn-network/ccvpn-network.component.ts @@ -131,7 +131,7 @@ export class CcvpnNetworkComponent implements OnInit { imgmap = { '1': './assets/images/cloud-county1.png', - '2': './assets/images/cloud-city1.png', + '2': './assets/images/tp.png', '3': './assets/images/cloud-out.png', }; tpoption = { diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html index 1a76a726..31307abf 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -18,7 +18,7 @@ <!-- nsList --> <div class="list" *ngIf="tab === 'NS'"> <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> - <div style="width:100%;"> + <div style="width:100%;height: 30%;margin-bottom: 1%"> <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS"> <p class="ant-upload-drag-icon"> @@ -34,46 +34,29 @@ </div> <div class="listlin"></div> <div class="listfile"> - <div> - <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> + <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> + <div style="height:80%;overflow: auto"> + <div class="listfilebgc" *ngFor="let itemns of nsRightList"> <div> - <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + <i class="anticon anticon-link"></i> </div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div class="color"> - <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div> + <div class="color" *ngIf="itemns.status"> + <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress> + </div> + <div class="color" *ngIf="!itemns.status"> + <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span> + <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span> + </div> + <div *ngIf="!itemns.status"> + <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i> + <i class="anticon anticon-exclamation-circle" *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i> </div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div>{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> </div> </div> </div> </div> - <nz-spin [nzSpinning]="isSpinning"> + <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> <div class="mask" *ngIf="isSpinning"></div> <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize" @@ -145,6 +128,7 @@ <!-- VNFList --> <div class="list" *ngIf="tab === 'VNF'"> <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <div style="width:100%;height: 30%;margin-bottom: 1%"> <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF"> <p class="ant-upload-drag-icon"> @@ -160,45 +144,29 @@ </div> <div class="listlin"></div> <div class="listfile"> - <div> - <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> + <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> + <div style="height:80%;overflow: auto"> + <div class="listfilebgc" *ngFor="let itemns of vnfRightList"> <div> - <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + <i class="anticon anticon-link"></i> </div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div class="color"> - <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div> + <div class="color" *ngIf="itemns.status"> + <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress> + </div> + <div class="color" *ngIf="!itemns.status"> + <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span> + <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span> + </div> + <div *ngIf="!itemns.status"> + <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i> + <i class="anticon anticon-exclamation-circle" *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i> </div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div>{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> </div> </div> </div> - <nz-spin [nzSpinning]="isSpinning"> + </div> + <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> <div class="mask" *ngIf="isSpinning"></div> <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize" @@ -257,6 +225,7 @@ <!-- PNFList --> <div class="list" *ngIf="tab === 'PNF'"> <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> --> + <div style="width:100%;height: 30%;margin-bottom: 1%"> <div class="listupload"> <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF"> <p class="ant-upload-drag-icon"> @@ -272,45 +241,29 @@ </div> <div class="listlin"></div> <div class="listfile"> - <div> - <div style="color: #42548F;font-family:ArialMT;padding-bottom: 15px;">Uploaded files</div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> + <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div> + <div style="height:80%;overflow: auto"> + <div class="listfilebgc" *ngFor="let itemns of pnfRightList"> <div> - <nz-progress [nzPercent]="20" [nzShowInfo]="false"></nz-progress> + <i class="anticon anticon-link"></i> </div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div class="color"> - <nz-progress [nzPercent]="50" [nzShowInfo]="false"></nz-progress> + <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div> + <div class="color" *ngIf="itemns.status"> + <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress> + </div> + <div class="color" *ngIf="!itemns.status"> + <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span> + <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span> + </div> + <div *ngIf="!itemns.status"> + <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i> + <i class="anticon anticon-exclamation-circle" *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i> </div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div>pnf-test.csar</div> - <div class="color">{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> - </div> - <div class="listfilebgc"> - <div>111</div> - <div class="color">pnf-test.csar</div> - <div>{{"i18nTextDefine_File_upload_completed" | translate}}</div> - <div>456</div> </div> </div> </div> - <nz-spin [nzSpinning]="isSpinning"> + </div> + <nz-spin [nzSpinning]="isSpinning" style="height: 69%"> <div class="mask" *ngIf="isSpinning"></div> <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize" diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less index b973e575..593597dc 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less @@ -77,6 +77,7 @@ hr { } .listfile { width: 43%; + height: 100%; vertical-align: top; display: inline-block; margin-left: 10%; @@ -96,6 +97,7 @@ hr { } :first-child { width: 6%; + margin-left: 5px; } :nth-child(2){ width:20%; @@ -108,8 +110,14 @@ hr { padding-left: 4%; } .color { - color:rgba(66,84,143,0.5); + color:rgba(66,84,143,1); + span{ + color:rgba(66,84,143,0.7); + } } + .progress{ + color:rgba(66,84,143,0.7); + } } } nz-table { diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts index a10996de..ac880f4a 100644 --- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -22,6 +22,7 @@ import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zor import { filter } from 'rxjs/operators'; import { Title } from '@angular/platform-browser'; import * as $ from 'jquery'; +import { NzNotificationService } from 'ng-zorro-antd'; @Component({ @@ -136,8 +137,8 @@ export class OnboardVnfVmComponent implements OnInit { // ns beforeUpload beforeUploadNS = (file: UploadFile): boolean => { this.fileListNS.push(file); - console.log('beforeUpload'); - console.log('fileListNS' + this.fileListNS); + console.log('beforeUpload'); + console.log(this.fileListNS.length); console.log('fileListNS' + JSON.stringify(this.fileListNS)); this.myhttp.getCreatensData("createNetworkServiceData",this.requestBody)//on-line // this.myhttp.getCreatensData("creatensDataNS") //local @@ -229,6 +230,12 @@ export class OnboardVnfVmComponent implements OnInit { } } + nsRightList = []; + nsNum=0; + vnfRightList = []; + vnfNum=0; + pnfRightList = []; + pnfNum=0; //put Upload Upload handleUpload(url,tab): void { console.log('startUpload') @@ -240,18 +247,84 @@ export class OnboardVnfVmComponent implements OnInit { formData.append('file', file); }); this.nsuploading = true; + let lastNs = this.fileListNS[this.fileListNS.length-1]; + let nsfile={ + name:lastNs.name, + uid:lastNs.uid, + progress:0, + status:true, + success:0 + }; + this.nsNum+=1; + this.nsRightList.push(nsfile); + let requeryNs = (nsfile) => { + setTimeout(() => { + nsfile.progress+=2; + if (nsfile.progress < 100) { + requeryNs(nsfile) + } else { + nsfile.progress = 100; + nsfile.status = false; + } + }, 100) + }; + requeryNs(nsfile); break case "VNF": this.fileListVNF.forEach((file: any) => { formData.append('file', file); }); this.vnfuploading = true; + let lastVnf = this.fileListVNF[this.fileListVNF.length-1]; + let vnffile={ + name:lastVnf.name, + uid:lastVnf.uid, + progress:0, + status:true, + success:0 + }; + this.vnfNum+=1; + this.vnfRightList.push(vnffile); + let requeryVnf = (vnffile) => { + setTimeout(() => { + vnffile.progress+=2; + if (vnffile.progress < 100) { + requeryVnf(vnffile) + } else { + vnffile.progress = 100; + vnffile.status = false; + } + }, 100) + }; + requeryVnf(vnffile); break case "PNF": this.fileListPNF.forEach((file: any) => { formData.append('file', file); }); this.pnfloading = true; + let lastPnf = this.fileListPNF[this.fileListPNF.length-1]; + let pnffile={ + name:lastPnf.name, + uid:lastPnf.uid, + progress:0, + status:true, + success:0 + }; + this.pnfNum+=1; + this.pnfRightList.push(pnffile); + let requeryPnf = (pnffile) => { + setTimeout(() => { + pnffile.progress+=2; + if (pnffile.progress < 100) { + requeryPnf(pnffile) + } else { + pnffile.progress = 100; + pnffile.status = false; + } + }, 100) + }; + requeryPnf(pnffile); break } @@ -277,11 +350,47 @@ export class OnboardVnfVmComponent implements OnInit { .pipe(filter(e => e instanceof HttpResponse)) .subscribe( (event: {}) => { + if(tab =="NS"){ + console.log(this.nsRightList[this.nsNum-1],"this.nsRightList") + this.nsRightList[this.nsNum-1].progress = 100; + this.nsRightList[this.nsNum-1].status = false; + this.nsRightList[this.nsNum-1].success=0; + } + if(tab =="VNF"){ + console.log(this.vnfRightList[this.vnfNum-1],"this.vnfRightList") + this.vnfRightList[this.vnfNum-1].progress = 100; + this.vnfRightList[this.vnfNum-1].status = false; + this.vnfRightList[this.vnfNum-1].success=0; + } + if(tab =="PNF"){ + console.log(this.pnfRightList[this.pnfNum-1],"this.pnfRightList") + this.pnfRightList[this.pnfNum-1].progress = 100; + this.pnfRightList[this.pnfNum-1].status = false; + this.pnfRightList[this.pnfNum-1].success=0; + } this.changeUploadingSta(tab) console.log('upload successfully') this.msg.success('upload successfully.'); }, err => { + if(tab =="NS"){ + console.log(this.nsRightList[this.nsNum-1]) + this.nsRightList[this.nsNum-1].progress = 100; + this.nsRightList[this.nsNum-1].status = false; + this.nsRightList[this.nsNum-1].success=1; + } + if(tab =="VNF"){ + console.log(this.vnfRightList[this.vnfNum-1],"this.vnfRightList") + this.vnfRightList[this.vnfNum-1].progress = 100; + this.vnfRightList[this.vnfNum-1].status = false; + this.vnfRightList[this.vnfNum-1].success=1; + } + if(tab =="PNF"){ + console.log(this.pnfRightList[this.pnfNum-1],"this.pnfRightList") + this.pnfRightList[this.pnfNum-1].progress = 100; + this.pnfRightList[this.pnfNum-1].status = false; + this.pnfRightList[this.pnfNum-1].success=1; + } this.changeUploadingSta(tab) console.log('upload failed') this.msg.error('upload failed.'); 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 55551402..3185869d 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 @@ -50,7 +50,7 @@ </div> <div class="select-list"> <span style="display:inline-block;"> {{"i18nTextDefine_ServiceType" | translate}} : </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear> + <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear (ngModelChange)="serviceTypeChange()"> <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name" [nzLabel]="item.name" ></nz-option> </nz-select> </div> @@ -130,7 +130,7 @@ <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}} </th> <th nzWidth="5%"></th> <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}} </th> - <th nzWidth="20%"> {{"i18nTextDefine_Description" | translate}} </th> + <th nzWidth="20%"> {{"i18nTextDefine_InstanceID" | translate}} </th> <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}} </th> <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}} </th> <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}} </th> @@ -639,15 +639,21 @@ <div class="createComponent" *ngIf="createshow"> <app-ccvpn-creation [createParams]="createData" + [ccvpn_temParametersContent]="ccvpn_temParametersContent" (closeCreate)="closeCreate($event,templateCreatestarting,templateCreateSuccessFaild)"> </app-ccvpn-creation> </div> <div class="createComponent" *ngIf="createshow2"> <app-e2e-creation [createParams]="createData" + [e2e_ns_temParametersContent]="e2e_ns_temParametersContent" (nsCloseCreate)="nsCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)" (e2eCloseCreate)="e2eCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)"> </app-e2e-creation> </div> <!--</div>--> </nz-layout> +<div class="loading" *ngIf="loadingAnimateShow"> + <img src="./assets/images/loading-animate2.gif" alt="loading"> + <p>Please wating……</p> +</div> diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less index b7499724..bbc8109e 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -35,6 +35,38 @@ hr { background: rgba(0, 0, 0, 0.65); top:0; } +.loading{ + width: 100%; + height: 100%; + position: fixed; + top: 0; + margin-top: -50px; + margin-left: -50px; + z-index: 1001; + text-align: center; + background: transparent; + p{ + color: #0DA9E2; + text-align: center; + position: absolute; + width: 300px; + height: 30px; + line-height: 30px; + top: 71%; + left: 36%; + margin-top: -150px; + margin-left: -150px; + } + img{ + width: 300px; + height: 300px; + position: absolute; + top: 50%; + left: 36%; + margin-top: -150px; + margin-left: -150px; + } +} .action { margin-bottom: 15px; padding: 28px; @@ -308,33 +340,34 @@ hr { } /*2019.01.14*/ .e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{ - color: #3671AB; + //color: #3671AB; width:120px; height: 34px; line-height: 34px; margin-bottom: 0!important; text-align: center; - background:linear-gradient(131deg,rgba(147,196,255,1) 0%,rgba(120,241,226,1) 100%); + background:rgba(158, 158, 158, 0.38); + //background:linear-gradient(131deg,rgba(147,196,255,1) 0%,rgba(120,241,226,1) 100%); border-radius:4px } -.nsColor{ - background:linear-gradient(135deg,rgba(253,187,127,1) 0%,rgba(250,215,153,1) 100%); - border-radius:4px; - color: #A16C39; -} -.ccvpnColor{ - background:linear-gradient(135deg,rgba(198,222,251,1) 0%,rgba(217,215,252,1) 100%); - border-radius:4px; - color: #7C74BB; -} -.sotnColor{ - background:rgba(201,243,239,1); - border-radius:4px; - color: #30B0A0; -} -.voLTEColor{ - background:rgba(201,243,239,1); -} +//.nsColor{ +// background:linear-gradient(135deg,rgba(253,187,127,1) 0%,rgba(250,215,153,1) 100%); +// border-radius:4px; +// color: #A16C39; +//} +//.ccvpnColor{ +// background:linear-gradient(135deg,rgba(198,222,251,1) 0%,rgba(217,215,252,1) 100%); +// border-radius:4px; +// color: #7C74BB; +//} +//.sotnColor{ +// background:rgba(201,243,239,1); +// border-radius:4px; +// color: #30B0A0; +//} +//.voLTEColor{ +// background:rgba(201,243,239,1); +//} .vnfColor,.siteColor,.SDWANColor{ color:rgba(60,79,140,0.5); width:120px; 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 06323fac..fb110626 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 @@ -42,14 +42,15 @@ export class ServicesListComponent implements OnInit { customerSelected2 = {name: null, id: null}; serviceTypeList = []; serviceTypeList2 = []; - serviceTypeSelected = {name:null}; - serviceTypeSelected2 = {name: null}; + serviceTypeSelected = {name:''}; + serviceTypeSelected2 = {name: ''}; serviceTypeSelectedName = ""; templateTypeSelected ="CCVPN"; orchestratorSelected = {name:null,id:null}; listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters')); language = sessionStorage.getItem("DefaultLang"); iconMore=false; + loadingAnimateShow = false; serviceMunber = [ { "serviceDomain": "E2E", @@ -161,17 +162,19 @@ export class ServicesListComponent implements OnInit { console.log("serviceTypeList.length == 0", this.serviceTypeList2); return false; } - this.serviceTypeSelected2 = this.serviceTypeSelected; - this.serviceTypeSelectedName = this.serviceTypeSelected2.name; - console.log(this.customerSelected2); - console.log(this.serviceTypeSelected2); this.getAlltemplates(); }) } + serviceTypeChange(): void { + this.serviceTypeSelected2.name = this.serviceTypeSelectedName + console.log(this.serviceTypeSelectedName) + } createModal(): void { this.isVisible = true; this.getallOrchestrators(); this.customerSelected2 = this.customerSelected; + this.serviceTypeSelectedName = this.serviceTypeSelected.name; + this.serviceTypeSelected2 = Object.assign({},this.serviceTypeSelected); this.getServiceType(this.customerSelected2); } // @@ -227,7 +230,7 @@ export class ServicesListComponent implements OnInit { handleCancel(): void { // console.log('Button cancel clicked!'); this.isVisible = false; - this.temParametersTips = false; + this.loadingAnimateShow = false; } @@ -242,12 +245,14 @@ export class ServicesListComponent implements OnInit { }else if(types == "Network Service"){ types = "ns"; } + this.loadingAnimateShow = true; this.myhttp.getTemplateParameters(types, chosedtemplates) .subscribe((data) => { + this.loadingAnimateShow = false; if (data.status == "FAILED") { this.temParametersTips = true; this.isVisible = true; - console.log("Template parsing failed"); + console.log("Template parsing Failed"); }else { this.isVisible = false; this.temParametersTips = false; @@ -733,7 +738,7 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { 'service-instance-name':obj.service.name, serviceDomain:this.templateTypeSelected, childServiceInstances:[], - status:"Creating", + status:"In Progress", statusClass: 1001, rate:0, tips:"" @@ -743,7 +748,9 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { this.createNotification(templateCreatestarting); let updata = (prodata)=>{ newData.rate = prodata.progress; - newData.tips = newData["status"]+newData.rate+"%"; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + newData.rate + "%"; if(newData["rate"] > 100){ newData["status"]= prodata.status; newData.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"]; @@ -792,18 +799,18 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { 'service-instance-name':obj.step1.nsName, serviceDomain:this.templateTypeSelected, childServiceInstances:[], - status:"Creating", - statusClass: 1001, + status:"In Progress", + statusClass: 1001, rate:0, tips:"" } - this.thisCreateService = newData; + this.thisCreateService = newData; this.tableData = [newData,...this.tableData]; - this.createNotification(templateCreatestarting); + this.createNotification(templateCreatestarting); if(data.status == "FAILED"){ - this.createSuccessNotification(templateCreateSuccessFaild); - console.log("create ns service failed :" + JSON.stringify(data)); - newData.status = "failed"; + console.log("create ns service Failed :" + JSON.stringify(data)); + newData.status = "Failed"; + this.createSuccessNotification(templateCreateSuccessFaild); return false; } let createParams = "?ns_instance_id=" + data.nsInstanceId + @@ -813,9 +820,12 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { "&parentServiceInstanceId="; // step2 this.createNsService(createParams,obj.step2).then((jobid)=>{ - if(jobid == "failed"){ - this.createSuccessNotification(templateCreateSuccessFaild); - newData.status = "failed"; + if(jobid == "Failed"){ + newData.status = "Failed"; + console.log(jobid,"ns two jobid") + this.thisCreateService = newData; + console.log(this.thisCreateService) + this.createSuccessNotification(templateCreateSuccessFaild); newData.tips = this.listSortMasters["operationTypes"].find((its) => { return its["sortCode"] == newData["statusClass"] && its["language"] == this.language })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { @@ -826,7 +836,9 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { let operationType="1001"; let updata = (prodata)=>{ newData.rate = prodata.progress; - newData.tips = newData["status"]+newData.rate+"%"; + newData.tips = this.listSortMasters["operationTypes"].find((its) => { + return its["sortCode"] == newData["statusClass"] && its["language"] == this.language + })["sortValue"] + newData.rate + "%"; if(newData["rate"] > 100){ newData["status"]=prodata.status; newData.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"]; @@ -861,8 +873,8 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { this.myhttp.createInstance(requestBody,createParams) .subscribe((data)=>{ if(data.status == "FAILED"){ - this.createSuccessNotification(templateCreateSuccessFaild); - console.log("create e2e service failed :" + JSON.stringify(data)); + res("Failed"); + console.log("create e2e service Failed :" + JSON.stringify(data)); return false; } res(data.service); @@ -875,8 +887,8 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { this.myhttp.nsCreateInstance2(id,obj) .subscribe((data)=>{ if(data.status == "FAILED"){ - console.log("instantiate ns service failed :" + JSON.stringify(data)); - res("failed"); + console.log("instantiate ns service Failed :" + JSON.stringify(data)); + res("Failed"); return false; } res(data.jobId); @@ -894,8 +906,8 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { this.myhttp.scaleE2eService(id,requestBody) .subscribe((data)=>{ if(data.status == "FAILED"){ - console.log("scale E2e service failed :" + JSON.stringify(data)); - service.status = "failed"; + console.log("scale E2e service Failed :" + JSON.stringify(data)); + service.status = "Failed"; service.tips = this.listSortMasters["operationTypes"].find((its) => { return its["sortCode"] == service.statusClass && its["language"] == this.language })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { @@ -944,8 +956,8 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { this.myhttp.healNsService(id,requestBody) .subscribe((data)=>{ if(data.status == "FAILED"){ - console.log("heal nsvnf service failed :" + JSON.stringify(data)); - service.status = "failed"; + console.log("heal nsvnf service Failed :" + JSON.stringify(data)); + service.status = "Failed"; service.tips = this.listSortMasters["operationTypes"].find((its) => { return its["sortCode"] == service.statusClass && its["language"] == this.language })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { @@ -1001,8 +1013,8 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { this.myhttp.deleteInstance(params) .subscribe((data)=>{ if(data.status == "FAILED"){ - console.log("delete service failed :" + JSON.stringify(data)); - service.status = "failed"; + console.log("delete service Failed :" + JSON.stringify(data)); + service.status = "Failed"; service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+ this.listSortMasters["operationResults"].find((its) => { return its["sortCode"] == 2002 && its["language"] == this.language })["sortValue"]; @@ -1057,8 +1069,8 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { gracefulTerminationTimeout : this.gracefulTerminationTimeout } this.stopNsService(id,requestBody).then((jobid)=>{ - if(jobid == "failed"){ - service.status = "failed"; + if(jobid == "Failed"){ + service.status = "Failed"; service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"] + this.listSortMasters["operationResults"].find((its) => { return its["sortCode"] == 2002 && its["language"] == this.language })["sortValue"]; @@ -1084,8 +1096,8 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { })["sortValue"]; this.deleteSuccessNotification(templateDeleteSuccessFaild); if(data.status == "FAILED"){ - console.log("delete ns service failed :" + JSON.stringify(data)); - service.status = "failed"; + console.log("delete ns service Failed :" + JSON.stringify(data)); + service.status = "Failed"; service.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==service.statusClass && its["language"]==this.language})["sortValue"] + this.listSortMasters["operationResults"].find((its) => { return its["sortCode"] == 2002 && its["language"] == this.language })["sortValue"]; @@ -1112,8 +1124,8 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { this.myhttp.stopNsService(id,obj) .subscribe((data)=>{ if(data.status == "FAILED"){ - console.log("stop ns service failed :" + JSON.stringify(data)); - res("failed"); + console.log("stop ns service Failed :" + JSON.stringify(data)); + res("Failed"); return false; } res(data.jobId); @@ -1141,7 +1153,7 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { this.myhttp.getProgress(obj) .subscribe((data)=>{ if(data.status == "FAILED"){ - callback({progress:255,status:"failed"}); + callback({progress:255,status:"Failed"}); return false; } if(data.operationStatus == null || data.operationStatus.progress==undefined){ @@ -1211,7 +1223,7 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { this.myhttp.getNsProgress(jobid,id,operationType) .subscribe((data)=>{ if(data.status == "FAILED"){ - callback({progress:255,status:"failed"}); + callback({progress:255,status:"Failed"}); return false; } if(data.responseDescriptor == null || data.responseDescriptor.progress==undefined){ @@ -1226,8 +1238,8 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) { },10000) return false; } - if(data.responseDescriptor.progress > 100){ - callback({progress:255,status:"time over"}); + if(data.responseDescriptor.progress > 100 && data.responseDescriptor.status == "error"){ + callback({progress:255,status:data.responseDescriptor.statusDescription}); return false; } if(data.responseDescriptor.progress < 100){ diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json index 20f8143b..1edb2f93 100644 --- a/usecaseui-portal/src/assets/i18n/cn.json +++ b/usecaseui-portal/src/assets/i18n/cn.json @@ -100,6 +100,7 @@ "i18nTextDefine_Uploading":"上传中", "i18nTextDefine_StartUpload":"开始上传", "i18nTextDefine_File_upload_completed":"文件上传完毕", + "i18nTextDefine_File_upload_failed":"文件上传失败", "i18nTextDefine_Version":"版本", "i18nTextDefine_OnboardingState":"分发状态", "i18nTextDefine_OperationalState":"操作状态", @@ -123,7 +124,7 @@ "i18nTextDefine_CustomerID":"用户ID", "ccvpn-network-component":"--:", - "i18nTextDefine_AddLink":"添加链接", + "i18nTextDefine_CreateLink":"添加链接", "i18nTextDefine_SetAttribtes":"设置属性", "i18nTextDefine_LinkName":"链接名称", "i18nTextDefine_LeftPort":"左侧端口", diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json index cfd40ec2..5909e151 100644 --- a/usecaseui-portal/src/assets/i18n/en.json +++ b/usecaseui-portal/src/assets/i18n/en.json @@ -100,6 +100,7 @@ "i18nTextDefine_Uploading":"Uploading", "i18nTextDefine_StartUpload":"StartUpload", "i18nTextDefine_File_upload_completed":"File upload completed", + "i18nTextDefine_File_upload_failed":"File upload failed", "i18nTextDefine_Version":"Version", "i18nTextDefine_OnboardingState":"Onboarding State", "i18nTextDefine_OperationalState":"Operational State", @@ -123,7 +124,7 @@ "i18nTextDefine_CustomerID":"Customer ID", "ccvpn-network-component":"--:", - "i18nTextDefine_AddLink":"Add Link", + "i18nTextDefine_CreateLink":"Create Link", "i18nTextDefine_SetAttribtes":"Set Attribtes", "i18nTextDefine_LinkName":"Link Name ", "i18nTextDefine_LeftPort":"Left Port", diff --git a/usecaseui-portal/src/assets/images/loading-animate2.gif b/usecaseui-portal/src/assets/images/loading-animate2.gif Binary files differnew file mode 100644 index 00000000..1855bf3e --- /dev/null +++ b/usecaseui-portal/src/assets/images/loading-animate2.gif diff --git a/usecaseui-portal/src/assets/images/tp.png b/usecaseui-portal/src/assets/images/tp.png Binary files differindex 9daf005b..3b0841a3 100644 --- a/usecaseui-portal/src/assets/images/tp.png +++ b/usecaseui-portal/src/assets/images/tp.png |
