diff options
| -rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html | 25 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts | 122 |
2 files changed, 89 insertions, 58 deletions
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 82d0fc51..46a6c818 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 @@ -45,9 +45,9 @@ <p class="ant-upload-text">Click or drag file to this area to upload</p> <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> </nz-upload> - <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" + <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" style="margin-top: 16px"> - {{ uploading ? 'Uploading' : 'Start Upload' }} + {{ nsuploading ? 'Uploading' : 'Start Upload' }} </button> <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' @@ -77,17 +77,17 @@ <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td> <td *ngIf="item.version">{{ item.version }}</td> <td> - <span [ngClass]="{'onboarding':item.status=='Onboarding','onboarded':item.status=='Onboarded', - 'updating':item.status=='Updating','deleting':item.status=='Deleting','invalid':item.status=='Invalid'}">{{item.nsdOnboardingState}}</span> + <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span> + <span *ngIf="item.uuid" data_id="i">{{status}}</span> <!-- <nz-progress *ngIf="item.status!='Onboarded' && item.status!='Invalid'" [nzPercent]="item.progress"></nz-progress> --> </td> - <td>{{item.nsdOperationalState}}</td> + <td>{{item.nsdOperationalState}}</td> <td>{{item.nsdUsageState}}</td> <td> <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i> <!-- <i class="anticon anticon-download" (click)="downloadNsService(item.id)"></i> --> - <i nzType="info" (click)="showConfirm(i, item.id)" class="anticon anticon-delete" *ngIf="item.id" ></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i> <!-- (click)="deleteNsService(i,item.id)" --> <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> <!-- <i class="anticon anticon-delete" *ngIf="item.uuid" (click)="deleteNsSdcService(i,item.uuid)"></i> --> @@ -106,9 +106,9 @@ <p class="ant-upload-text">Click or drag file to this area to upload</p> <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> </nz-upload> - <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0" + <button nz-button [nzLoading]="vnfuploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0" style="margin-top: 16px"> - {{ uploading ? 'Uploading' : 'Start Upload' }} + {{ vnfuploading ? 'Uploading' : 'Start Upload' }} </button> <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' @@ -147,7 +147,7 @@ <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i> <!-- <i class="anticon anticon-download" (click)="downloadVnfService()"></i> --> - <i nzType="info" (click)="showVnfConfirm(i,item.id)" class="anticon anticon-delete" *ngIf="item.id"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" id="{{ item.id}}" *ngIf="item.id"></i> <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> </td> </tr> @@ -165,9 +165,9 @@ <p class="ant-upload-text">Click or drag file to this area to upload</p> <p class="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p> </nz-upload> - <button nz-button [nzLoading]="uploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0" + <button nz-button [nzLoading]="pnfuploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0" style="margin-top: 16px"> - {{ uploading ? 'Uploading' : 'Start Upload' }} + {{ pnfuploading ? 'Uploading' : 'Start Upload' }} </button> <nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex' @@ -201,8 +201,7 @@ <!-- <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i> --> <!-- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataService(item.id)" *ngIf="item.id"></i> --> <!-- <i class="anticon anticon-download" (click)="downloadPnfService(item.id)"></i> --> - <i nzType="info" (click)="showPnfConfirm(i,item.id)" class="anticon anticon-delete"></i> - <!-- <button nz-button nzType="info" (click)="showConfirm()">Confirm</button> --> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> </td> </tr> <!-- </ng-template> --> 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 794df742..3cdbf9cf 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 @@ -30,15 +30,18 @@ export class OnboardVnfVmComponent implements OnInit { vnfPkgId =''; pnfdInfoId = ''; tabTitle = "NS"; - uploading = false; + nsuploading = false; + vnfuploading = false; + pnfloading = false; fileListNS: UploadFile[] = []; fileListVNF: UploadFile[] = []; fileListPNF: UploadFile[] = []; - constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService) { } + // onboard initial value + status = "Onboard Available"; + constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService, private modalService: NzModalService) { } //default 默认调用ns数据 ngOnInit() { - console.log("11111111111111") this.getTableData(); } @@ -49,7 +52,7 @@ export class OnboardVnfVmComponent implements OnInit { pageIndex = 1; pageSize = 10; total; - loading = false; + nsloading = false; sortName = null; sortValue = null; tabs = ['NS', 'VNF', 'PNF']; @@ -180,21 +183,25 @@ export class OnboardVnfVmComponent implements OnInit { this.fileListNS.forEach((file: any) => { formData.append('files[]', file); }); + this.nsuploading = true; break case "VNF": this.fileListVNF.forEach((file: any) => { formData.append('files[]', file); }); + this.vnfuploading = true; break case "PNF": this.fileListPNF.forEach((file: any) => { formData.append('files[]', file); }); + this.pnfloading = true; break } - this.uploading = true; + + // this.nsuploading = true; // You can use any AJAX library you like - const req = new HttpRequest('PUT', url, formData, { + const req = new HttpRequest('POST', url, formData, { reportProgress: true, withCredentials: true }); @@ -203,17 +210,30 @@ export class OnboardVnfVmComponent implements OnInit { .pipe(filter(e => e instanceof HttpResponse)) .subscribe( (event: {}) => { - this.uploading = false; + this.changeUploadingSta(tab) console.log('upload successfully') this.msg.success('upload successfully.'); }, err => { - this.uploading = false; + this.changeUploadingSta(tab) console.log('upload failed') this.msg.error('upload failed.'); } ); } +// 控制uploading的状态 +changeUploadingSta(tab) { + switch(tab) { + case "NS": + this.nsuploading = false; + break + case "VNF": + this.vnfuploading = false; + break + case "PNF": + this.pnfloading = false; + } +} //---------------------------------------------------------------------------------------------- @@ -314,19 +334,39 @@ export class OnboardVnfVmComponent implements OnInit { // console.log('dddd',reset) // this.getTableData(); // } - - + /* onboard 上传按钮 */ // ns onboard + + success(): void { + const modal = this.modalService.success({ + nzTitle: 'This is an success message', + nzContent: 'Package Onboard Completed.' + }); + + window.setTimeout(() => modal.destroy(), 2000); + } + + error(): void { + this.modalService.error({ + nzTitle: 'This is an error message', + nzContent: 'Package Onboard Failed!' + }); + } updataNsService(id) { console.log(id); - let requestBody = { "csarId": id } this.myhttp.getNsonboard(requestBody) .subscribe((data) => { console.log('onboard ns sdc', data); + if(data["status"] == 200) { + this.success(); + + } else { + this.error(); + } this.getTableData(); }, (err) => { console.log(err); @@ -340,6 +380,7 @@ export class OnboardVnfVmComponent implements OnInit { // vnf onboard updataVnfService(id) { + this.status = "Onboarding"; console.log(id) let requestBody = { "csarId": id @@ -347,7 +388,11 @@ export class OnboardVnfVmComponent implements OnInit { this.myhttp.getVnfonboard(requestBody) .subscribe((data) => { console.log('onboard vnf sdc', data); - this.getTableVnfData(); + if(data["status"] == "200"){ + this.success(); + }else { + this.error(); + } }, (err) => { console.log(err); }) @@ -367,45 +412,32 @@ export class OnboardVnfVmComponent implements OnInit { //-------------------------------------------------------------------------------- /* delete 删除按钮 */ // ns - showConfirm(index, pkgid): void { - console.log(index) - console.log(pkgid) + showConfirm(index,pkgid,tab): void { this.confirmModal = this.modal.confirm({ nzTitle: 'Do you Want to delete these items?', - nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', - nzOnOk: () => new Promise((resolve, reject) => { - this.deleteNsService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); + nzContent: 'Do you Want to delete these items?', + nzOkText : 'Yes', + nzCancelText: 'No', + nzOnOk: () => new Promise((resolve, reject) => { + switch (tab) { + case 'NS': + this.deleteNsService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + break + case 'VNF': + this.deleteVnfService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + break + case 'PNF': + this.deletePnfService(index,pkgid); + setTimeout(Math.random() > 0.5 ? resolve : reject,1000); + break + } }).catch(() => console.log('Oops errors!')) }); } - //vnf - showVnfConfirm(index, pkgid): void { - console.log(index) - console.log(pkgid) - this.confirmModal = this.modal.confirm({ - nzTitle: 'Do you Want to delete these items?', - nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', - nzOnOk: () => new Promise((resolve, reject) => { - this.deleteVnfService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); - }).catch(() => console.log('Oops errors!')) - }); - } - //vnf - showPnfConfirm(index, pkgid): void { - console.log(index) - console.log(pkgid) - this.confirmModal = this.modal.confirm({ - nzTitle: 'Do you Want to delete these items?', - nzContent: 'When clicked the OK button, this dialog will be closed after 1 second', - nzOnOk: () => new Promise((resolve, reject) => { - this.deletePnfService(index,pkgid); - setTimeout(Math.random() > 0.5 ? resolve : reject, 1000); - }).catch(() => console.log('Oops errors!')) - }); - } + /* delete 删除按钮 */ //delete nsItem deleteNsService(index,pkgid) { console.log(pkgid) |