summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2018-11-09 18:35:15 +0800
committerzhangab <zhanganbing@chinamobile.com>2018-11-09 18:35:30 +0800
commit58dd57750fb8b50114af0a19a3788ffc24fa7073 (patch)
tree35f18a18397d989639be4066af8b67ffd34c1d24
parentf33a49e701ad97e74c69e4a20a0951a807aea078 (diff)
Fix bugs in drag and drop upload operations
Change-Id: Ieaeacb3317c6d03fedbb26f19b39770e0123b744 Issue-ID: USECASEUI-156 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html25
-rw-r--r--usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts122
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)