<nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)">
<!-- nsList -->
<div class="list" *ngIf="tab === 'NS'">
- <div style="width:100%;height: 30%;margin-bottom: 1%">
+ <div class="listUploadContainer">
<div class="listupload">
<nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
<p class="ant-upload-drag-icon">
<p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p>
<p class="ant-upload-hint"></p>
</nz-upload>
- <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
- style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
+ <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0" class="upload">
{{ nsuploading ? 'Uploading' : 'Start Upload' }}
</button>
</div>
<div class="listlin"></div>
<div class="listfile">
- <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
- <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
- <div style="height:80%;overflow: auto">
- <div class="listfilebgc" *ngFor="let itemns of nsRightList">
- <div>
- <i class="anticon anticon-link"></i>
- </div>
- <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 class="listFileTitle"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
+ <div class="nouploadfile" [style.display]="isNone">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
+ <div class="listfilebgc" *ngIf="nsfile">
+ <i class="anticon anticon-link icon"></i>
+ <div class="color" [ngClass]="{'progress':nsfile.status}">{{nsfile.name}}</div>
+ <div class="color" *ngIf="nsfile.status">
+ <nz-progress [nzPercent]="nsfile.progress" [nzShowInfo]="false"></nz-progress>
+ </div>
+ <div class="color" *ngIf="!nsfile.status">
+ <span *ngIf="nsfile.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
+ <span *ngIf="nsfile.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
+ </div>
+ <div *ngIf="!nsfile.status">
+ <i class="anticon anticon-check-circle" *ngIf="nsfile.success == 0" class="success"></i>
+ <i class="anticon anticon-exclamation-circle" *ngIf="nsfile.success == 1" class="fail"></i>
</div>
</div>
</div>
</div>
- <nz-spin [nzSpinning]="isSpinning" style="height: 69%">
+ <nz-spin [nzSpinning]="isSpinning" class="listContainer">
<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>
+ <tr class="theadColor">
<th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
<th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th>
<th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
</div>
<!-- VNFList -->
<div class="list" *ngIf="tab === 'VNF'">
- <div style="width:100%;height: 30%;margin-bottom: 1%">
+ <div class="listUploadContainer">
<div class="listupload">
<nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF">
<p class="ant-upload-drag-icon">
</div>
</div>
</div>
- <nz-spin [nzSpinning]="isSpinning" style="height: 69%">
+ <nz-spin [nzSpinning]="isSpinning" class="listContainer">
<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"
</div>
<!-- PNFList -->
<div class="list" *ngIf="tab === 'PNF'">
- <div style="width:100%;height: 30%;margin-bottom: 1%">
+ <div class="listUploadContainer">
<div class="listupload">
<nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF">
<p class="ant-upload-drag-icon">
</div>
</div>
</div>
- <nz-spin [nzSpinning]="isSpinning" style="height: 69%">
+ <nz-spin [nzSpinning]="isSpinning" class="listContainer">
<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"
// delete Modal
confirmModal: NzModalRef;
- nsdInfoId = '';
+ nsdInfoId: string;
vnfPkgId = '';
pnfdInfoId = '';
tabTitle = "NS";
- nsuploading = false;
+ nsuploading:boolean = false;
vnfuploading = false;
pnfloading = false;
fileList: UploadFile[] = [];
ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content',
vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content',
pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content'
- // line local
- //ns: 'https://jsonplaceholder.typicode.com/posts/',
- //vnf: 'https://jsonplaceholder.typicode.com/posts/',
- //pnf: 'https://jsonplaceholder.typicode.com/posts/',
};
constructor(
private myhttp: onboardService,
vnftableData: any;
pnftableData: any;
nssdcData: any;
- nsvfcData: any;
vnfsdcData: any;
- vnfvfcData: any;
- nspageIndex = 1;
- nspageSize = 10;
+ nspageIndex: number = 1;
+ nspageSize: number = 10;
vnfpageIndex = 1;
vnfpageSize = 10;
pnfpageIndex = 1;
pnfpageSize = 10;
+
total;
nsloading = false;
sortName = null;
sortValue = null;
tabs = ['NS', 'VNF', 'PNF'];
- isSpinning = false;
+ isSpinning: boolean = false;
+ isNone: string = 'block';
//2019.08.14 add
notificationAttributes = {
}
// Handling tab switching request data
handleTabChange(tab) {
- this.tabTitle = tab;
switch (tab) {
case 'NS':
this.nstableData = [];
// ns beforeUpload
beforeUploadNS = (file: UploadFile): boolean => {
- this.fileListNS.push(file);
+ this.fileListNS.splice(0,1,file);
this.myhttp.getCreatensData("createNetworkServiceData", this.requestBody)//on-line
- // this.myhttp.getCreatensData("creatensDataNS") //local
.subscribe((data) => {
this.nsdInfoId = data["id"];
}, (err) => {
//Drag and drop and click the upload button
onClick(tab) {
+ this.isNone = 'none';
switch (tab) {
case 'NS':
- // this.handleUpload('/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content',tab);
this.handleUpload(this.url.ns.replace("*_*", this.nsdInfoId), tab);
this.getTableData();
break
case 'VNF':
- // this.handleUpload('/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',tab);
this.handleUpload(this.url.vnf.replace("*_*", this.vnfPkgId), tab);
this.getTableVnfData()
break
case 'PNF':
- // this.handleUpload('/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content',tab);
this.handleUpload(this.url.pnf.replace("*_*", this.pnfdInfoId), tab);
this.getTablePnfData();
break
}
}
- nsRightList = [];
- nsNum = 0;
+ nsfile: {
+ name: string,
+ uid: string,
+ progress: number,
+ status: boolean,
+ success: number
+ };
vnfRightList = [];
vnfNum = 0;
pnfRightList = [];
switch (tab) {
case "NS":
this.fileListNS.forEach((file: any) => {
- formData.append('file', file);
+ formData.set('file', file);
});
this.nsuploading = true;
- let lastNs = this.fileListNS[this.fileListNS.length - 1];
- let nsfile = {
- name: lastNs.name,
- uid: lastNs.uid,
+ this.nsfile = {
+ name: this.fileListNS[0].name,
+ uid: this.fileListNS[0].uid,
progress: 0,
status: true,
success: 0
};
- this.nsNum += 1;
- this.nsRightList.push(nsfile);
- let requeryNs = (nsfile) => {
+ let requeryNS = (nsfile) => {
+ nsfile.progress += 3;
setTimeout(() => {
- nsfile.progress += 2;
if (nsfile.progress < 100) {
- requeryNs(nsfile)
- } else {
- nsfile.progress = 100;
- nsfile.status = false;
+ requeryNS(nsfile)
}
}, 100)
};
- requeryNs(nsfile);
+ requeryNS(this.nsfile);
break
case "VNF":
this.fileListVNF.forEach((file: any) => {
.subscribe(
(event: {}) => {
if (tab == "NS") {
- this.nsRightList[this.nsNum - 1].progress = 100;
- this.nsRightList[this.nsNum - 1].status = false;
- this.nsRightList[this.nsNum - 1].success = 0;
+ this.nsfile.progress = 100;
+ this.nsfile.status = false;
+ this.isNone = 'block';
}
if (tab == "VNF") {
this.vnfRightList[this.vnfNum - 1].progress = 100;
},
err => {
if (tab == "NS") {
- this.nsRightList[this.nsNum - 1].progress = 100;
- this.nsRightList[this.nsNum - 1].status = false;
- this.nsRightList[this.nsNum - 1].success = 1;
+ this.nsfile.progress = 100;
+ this.nsfile.status = false;
+ this.nsfile.success = 1;
}
if (tab == "VNF") {
this.vnfRightList[this.vnfNum - 1].progress = 100;
//ns vfc lists
this.myhttp.getOnboardTableData()
.subscribe((data) => {
- this.nsvfcData = data;
- this.nstableData = this.nsvfcData;
+ this.nstableData = data;
//ns sdc list
this.myhttp.getSDC_NSTableData()
.subscribe((data) => {
this.isSpinning = false; //loading hide
this.nssdcData = data;
- this.nsvfcData.map((nsvfc) => { nsvfc.sameid = this.nssdcData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; });
- let sameData = this.nssdcData.filter((nssdc) => { return !this.nsvfcData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) });
+ this.nstableData.map((nsvfc) => { nsvfc.sameid = this.nssdcData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; });
+ let sameData = this.nssdcData.filter((nssdc) => { return !this.nstableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) });
this.nstableData = this.nstableData.concat(sameData);
}, (err) => {
- console.log(err);
+ console.error(err);
this.isSpinning = false;
})
}, (err) => {
- console.log(err);
+ console.error(err);
this.isSpinning = false;
})
//vnf vfc lists
this.myhttp.getOnboardTableVnfData()
.subscribe((data) => {
- this.vnfvfcData = data;
- this.vnftableData = this.vnfvfcData;
+ this.vnftableData = data;
//vnf sdc lists
this.myhttp.getSDC_VNFTableData()
.subscribe((data) => {
this.isSpinning = false; //loading hide
this.vnfsdcData = data;
- this.vnfvfcData.map((vnfvfc) => { vnfvfc.sameid = this.vnfsdcData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; });
- let sameData = this.vnfsdcData.filter((vnfsdc) => { return !this.vnfvfcData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) });
+ this.vnftableData.map((vnfvfc) => { vnfvfc.sameid = this.vnfsdcData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; });
+ let sameData = this.vnfsdcData.filter((vnfsdc) => { return !this.vnftableData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) });
this.vnftableData = this.vnftableData.concat(sameData);
}, (err) => {
- console.log(err);
+ console.error(err);
+ this.isSpinning = false;
})
}, (err) => {
- console.log(err);
+ console.error(err);
+ this.isSpinning = false;
})
}
this.pnftableData = data;
this.isSpinning = false; //loading hide
}, (err) => {
- console.log(err);
+ console.error(err);
+ this.isSpinning = false;
})
}
Code Review / usecase-ui.git / commitdiff