{{ nsuploading ? 'Uploading' : 'Start Upload' }}
</button>
<nz-spin [nzSpinning]="isSpinning">
- <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" [(nzPageIndex)]='nspageIndex'
- [nzLoading]="loading" nzSize="middle">
- <thead (nzSortChange)="sort($event)" nzSingleSort>
- <tr>
- <th nzWidth="15%">NO</th>
- <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
- <th nzWidth="15%">Version</th>
- <th nzWidth="15%">Onboarding State</th>
- <th nzWidth="15%">Operational State</th>
- <th nzWidth="10%">Usage State</th>
- <th nzWidth="15%">Operation button</th>
- </tr>
- </thead>
- <tbody>
- <tr *ngFor="let item of nzTable.data; let i = index; ">
- <td *ngIf="item.id">{{item.id}}</td>
- <td *ngIf="item.uuid">{{item.uuid}}</td>
-
- <td *ngIf="item.nsdName">{{item.nsdName}}</td>
- <td *ngIf="item.nsdName === null">无</td>
- <td *ngIf="item.name">{{item.name}}</td>
- <td *ngIf="item.name===null">无</td>
- <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
- <td *ngIf="item.nsdVersion === null">无</td>
- <td *ngIf="item.version">{{ item.version }}</td>
- <td>
- <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
- <span *ngIf="item.nsdOnboardingState === null">无</span>
- <span *ngIf="item.uuid">{{status}}</span>
-
- <!-- <span *ngIf="item.uuid" [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
- 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating',
- 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span>
- <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> -->
- </td>
- <td>{{item.nsdOperationalState}}</td>
- <td>{{item.nsdUsageState}}</td>
- <td>
- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid)" *ngIf="item.uuid"></i>
- <button class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></button>
- </td>
- </tr>
- </tbody>
- </nz-table>
- </nz-spin>
+ <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" [(nzPageIndex)]='nspageIndex'
+ [nzLoading]="loading" nzSize="middle">
+ <thead (nzSortChange)="sort($event)" nzSingleSort>
+ <tr>
+ <th nzWidth="15%">NO</th>
+ <th nzWidth="15%" nzShowSort nzSortKey="name"> Name </th>
+ <th nzWidth="15%">Version</th>
+ <th nzWidth="15%">Onboarding State</th>
+ <th nzWidth="15%">Operational State</th>
+ <th nzWidth="10%">Usage State</th>
+ <th nzWidth="15%">Operation button</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr *ngFor="let item of nzTable.data; let i = index; ">
+ <td *ngIf="item.id">{{item.id}}</td>
+ <td *ngIf="item.uuid">{{item.uuid}}</td>
+
+ <td *ngIf="item.nsdName">{{item.nsdName}}</td>
+ <td *ngIf="item.nsdName === null">无</td>
+ <td *ngIf="item.name">{{item.name}}</td>
+ <td *ngIf="item.name===null">无</td>
+ <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
+ <td *ngIf="item.nsdVersion === null">无</td>
+ <td *ngIf="item.version">{{ item.version }}</td>
+ <td>
+ <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
+ <span *ngIf="item.nsdOnboardingState === null">无</span>
+ <span *ngIf="item.uuid">{{status}}</span>
+
+ <!-- <span *ngIf="item.uuid" [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
+ 'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating',
+ 'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span>
+ <nz-progress *ngIf="item.uuid" *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> -->
+ </td>
+ <td>{{item.nsdOperationalState}}</td>
+ <td>{{item.nsdUsageState}}</td>
+ <td>
+ <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}"
+ class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i)" *ngIf="item.uuid"></i>
+ <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
+ </td>
+ </tr>
+ </tbody>
+ </nz-table>
+ </nz-spin>
<!-- <div style="margin-top:8px;">
Loading state：
<nz-switch [(ngModel)]="isSpinning"></nz-switch>
{{ vnfuploading ? 'Uploading' : 'Start Upload' }}
</button>
<nz-spin [nzSpinning]="isSpinning">
-
<div class="mask" *ngIf="isSpinning"></div>
- <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true" [nzShowQuickJumper]="true"
+ <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" [(nzPageIndex)]='vnfpageIndex'
[nzLoading]="loading" nzSize="middle">
<thead (nzSortChange)="sort($event)" nzSingleSort>
<td>{{item.usageState}}</td>
<td>{{item.operationalState}}</td>
<td>
- <i class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid)" *ngIf="item.uuid"></i>
- <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
+ <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}"
+ class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)" *ngIf="item.uuid"></i>
+ <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" *ngIf="item.id"></i>
</td>
</tr>
</tbody>
import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd';
import { filter } from 'rxjs/operators';
import { Title } from '@angular/platform-browser';
+import * as $ from 'jquery';
+
@Component({
selector: 'app-onboard-vnf-vm',
fileListPNF: UploadFile[] = [];
// onboard initial value
status = "Onboard Available";
- jobid = '';
+ jobId = '';
//url
url = {
// line up
- ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content',
+ ns: '/api/nsd/v1/ns_descriptors/'+this.nsdInfoId +'/nsd_content',
vnf: '/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',
pnf: '/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content'
// 本地
beforeUploadPNF = (file: UploadFile): boolean => {
this.fileListPNF.push(file);
console.log('beforeUpload');
- console.log('fileListPNF--->' + this.fileListPNF);
+ console.log('fileListPNF--->' + JSON.stringify(this.fileListPNF));
this.myhttp.getCreatensData("createPnfData",this.requestBody) //on-line
// this.myhttp.getCreatensData("creatensDataPNF") //local
.subscribe((data) => {
console.log("NSlist-length-vfc-->",data.length);
this.nsvfcData = data;
//loading
- this.nstableData = this.nsvfcData
- }, (err) => {
+ this.nstableData = this.nsvfcData;
+
+ //sdc list
+ this.myhttp.getSDC_NSTableData()
+ .subscribe((data) => {
+ console.log('NSlist-sdc-->',data);
+ console.log("NSlist-length-vfc-->",data.length);
+ this.nssdcData = data;
+ if (this.nsvfcData.length != 0 && this.nssdcData.length != 0){
+ this.nstableData = this.MergeArray(this.nsvfcData, this.nssdcData) //Array deduplication
+ }else if(this.nsvfcData.length === 0 && this.nssdcData.length != 0){
+ this.nstableData = this.nsvfcData.concat(this.nssdcData); //Array concat
+ }else if(this.nsvfcData.length != 0 && this.nssdcData.length === 0){
+ this.nstableData = this.nsvfcData.concat(this.nssdcData); //Array concat
+ }
+ }, (err) => {
console.log(err);
- })
- // sdc
- this.myhttp.getSDC_NSTableData()
- .subscribe((data) => {
- console.log('NSlist-sdc-->',data);
- console.log("NSlist-length-vfc-->",data.length);
- this.nssdcData = data;
- if (this.nsvfcData.length != 0 && this.nssdcData.length != 0){
- this.nstableData = this.MergeArray(this.nsvfcData, this.nssdcData) //Array deduplication
- }else if(this.nsvfcData.length === 0 && this.nssdcData.length != 0){
- this.nstableData = this.nsvfcData.concat(this.nssdcData); //Array concat
- }else if(this.nsvfcData.length != 0 && this.nssdcData.length === 0){
- this.nstableData = this.nsvfcData.concat(this.nssdcData); //Array concat
- }
- this.isSpinning = false;
+ })
+
}, (err) => {
- console.log(err);
- })
-
+ console.log(err);
+ })
}
console.log("vnfList--vnf>", data);
console.log("vnfList--vnf>", data.length);
this.vnfvfcData = data;
- this.vnftableData = this.vnfvfcData
- }, (err) => {
- console.log(err);
- })
+ this.vnftableData = this.vnfvfcData;
+
+ // sdc
+ this.myhttp.getSDC_VNFTableData()
+ .subscribe((data) => {
+ console.log('vnfList-sdc-->', data)
+ console.log('vnfList-sdc-->', data.length)
+ this.vnfsdcData = data;
+ if (this.vnfvfcData.length != 0 && this.vnfsdcData.length != 0){
+ this.vnftableData = this.MergeArray(this.vnfvfcData, this.vnfsdcData) //Array deduplication
+ }else if(this.vnfvfcData.length === 0 && this.vnfsdcData.length != 0){
+ this.vnftableData = this.vnfvfcData.concat(this.vnfsdcData); //Array concat
+ }else if(this.vnfvfcData.length != 0 && this.vnfsdcData.length === 0){
+ this.vnftableData = this.vnfvfcData.concat(this.vnfsdcData); //Array concat
+ console.log(this.vnftableData)
+ }
+ }, (err) => {
+ console.log(err);
+ })
- // sdc
- this.myhttp.getSDC_VNFTableData()
- .subscribe((data) => {
- console.log('vnfList-sdc-->', data)
- console.log('vnfList-sdc-->', data.length)
- this.vnfsdcData = data;
- if (this.vnfvfcData.length != 0 && this.vnfsdcData.length != 0){
- this.vnftableData = this.MergeArray(this.vnfvfcData, this.vnfsdcData) //Array deduplication
- }else if(this.vnfvfcData.length === 0 && this.vnfsdcData.length != 0){
- this.vnftableData = this.vnfvfcData.concat(this.vnfsdcData); //Array concat
- }else if(this.vnfvfcData.length != 0 && this.vnfsdcData.length === 0){
- this.vnftableData = this.vnfvfcData.concat(this.vnfsdcData); //Array concat
- console.log(this.vnftableData)
- }
- this.isSpinning = false;
}, (err) => {
console.log(err);
})
//-----------------------------------------------------------------------------------
/* onboard */
//成功弹框
- success(): void {
+ success(tab): void {
const modal = this.modalService.success({
nzTitle: 'This is an success message',
nzContent: 'Package Onboard Completed.'
});
+ switch(tab) {
+ case "NS":
+ console.log("NS成功弹框")
+ this.getTableData();
+ break
+ case "VNF":
+ console.log("VNF成功弹框")
+ this.getTableVnfData();
+ break
+ }
window.setTimeout(() => modal.destroy(), 2000);
}
});
}
+ //onboard status
+ onboardData ={
+ status:"onboard",
+ progress: 0,
+ }
+ currentIndex = 0;
+
// ns onboard 上传按钮
- updataNsService(id) {
- console.log(id);
+ updataNsService(id,index) {
+ this.currentIndex = index;
+ console.log("NS-onboard-id-->" + id);
let requestBody = {
"csarId": id
}
+
this.myhttp.getNsonboard(requestBody)
.subscribe((data) => {
+ this.onboardData.status = "onboarding";
+ this.onboardData.progress = 0;
+
console.log('onboard ns sdc-->', data);
- this.jobid = data.jobid;
- this.queryProgress(this.jobid,0);
+ this.jobId = data.jobId;
+ console.log('onboard ns sdc jobId-->'+ data.jobId);
+ this.queryProgress("NS",this.jobId,0);
}, (err) => {
console.log(err);
})
}
// vnf onboard 上传按钮
- updataVnfService(id) {
- // this.status = "Onboarding";
- console.log(id)
+ updataVnfService(id,index) {
+ this.currentIndex = index;
+ console.log("NS-onboard-id-->" + id)
let requestBody = {
"csarId": id
}
- this.myhttp.getVnfonboard(requestBody)
- .subscribe((data) => {
- console.log('onboard vnf sdc-->', data);
- this.jobid = data.jobid;
- this.queryProgress(this.jobid,0);
- }, (err) => {
- console.log(err);
- })
+ this.myhttp.getVnfonboard(requestBody)
+ .subscribe((data) => {
+ this.onboardData.status = "onboarding";
+ this.onboardData.progress = 0;
+
+ console.log('onboard vnf sdc-->', data);
+ this.jobId = data.jobId;
+ console.log('onboard vnf sdc jobId-->'+ data.jobId);
+ this.queryProgress("VNF",this.jobId,0);
+ }, (err) => {
+ console.log(err);
+ })
}
- // pnf onboard
+ // pnf onboard //暂时没有上传功能
// updataPnfService(id) {
// console.log('pnf',id);
// }
- queryProgress(jobid,responseId){
- let mypromise = new Promise((res,rej)=>{
- this.myhttp.getProgress(jobid,responseId)
+
+ //Progress 进度查询
+ queryProgress(tab,jobId,responseId){
+ let mypromise = new Promise((res)=>{
+ this.myhttp.getProgress(jobId,responseId)
.subscribe((data)=>{
console.log("progressData-->");
console.log(data);
- if(data.responseDescriptor == null || data.responseDescriptor.progress==undefined){
+
+ if(data.status == "failed" || data.responseDescriptor.progress > 100){
+ console.log("progress-->",data.responseDescriptor.progress)
+ console.log("Package Onboard Failed")
+ this.onboardData.status = "Failed";
this.error();
- };
+ return false
+ }
+
+ if(data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null){
+ console.log("progress == undefined");
+ this.onboardData.status = "onboarding";
+ setTimeout(()=>{
+ this.queryProgress(tab,this.jobId,0);
+ },10000)
+ return false
+ }
+
if(data.responseDescriptor.progress < 100){
- this.error();
+ this.onboardData.status = "onboarding";
+ console.log("progress < 100")
+ setTimeout(()=>{
+ this.queryProgress(tab,this.jobId,0);
+ },5000)
}else if(data.responseDescriptor.progress == 100){
res(data);
+ console.log("progress == 100");
console.log(data);
- this.success();
- }
+ switch(tab) {
+ case "NS":
+ this.success("NS");
+ this.onboardData.status = "onboarded";
+ break
+ case "VNF":
+ this.success("VNF");
+ this.onboardData.status = "onboarded";
+ break
+ }
+ }
+ return false
+
})
})
return mypromise;
}
-
- // queryProgress(jobid,callback){
- // let mypromise = new Promise((res,rej)=>{
- // let requery = (responseId)=>{
-
- // this.myhttp.getProgress(jobid,responseId)
- // .subscribe((data)=>{
- // if(data.responseDescriptor.progress==undefined){
- // console.log(data);
- // setTimeout(()=>{
- // requery(data.responseDescriptor.responseId);
- // },5000)
- // return false;
- // }
- // if(data.responseDescriptor.progress < 100){
- // callback(data);
- // setTimeout(()=>{
- // requery(data.responseDescriptor.responseId);
- // },5000)
- // }else {
- // res(data);
- // }
- // })
- // }
- // requery(0);
- // })
- // return mypromise;
- // }
-
-
//--------------------------------------------------------------------------------
/* delete 删除按钮 */
// ns
Code Review / usecase-ui.git / commitdiff