diff options
author | 2019-08-15 15:43:40 +0800 | |
---|---|---|
committer | 2019-08-15 15:43:45 +0800 | |
commit | cf9c1b79eb94d245ec2a9b18351686e276260277 (patch) | |
tree | e70b3807cf6800b83ecb0f143e98287ee7876a90 /usecaseui-portal/src/app | |
parent | 8ad7c581b715e43f364cc7ca23ea773530826bf7 (diff) |
feat:improve notification for Package Management
Change-Id: I73c832ab13dee20c6526ba2fdf5325a623fa828a
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app')
-rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html | 31 | ||||
-rw-r--r-- | usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts | 108 |
2 files changed, 114 insertions, 25 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 81b77fbb..70ee81c0 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 @@ -100,9 +100,9 @@ <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)" + class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i,notificationModel)" *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)" *ngIf="item.id"></i> <!--<span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">--> <!--<span *ngIf="item.id && item.sameid == undefined">--> @@ -199,9 +199,9 @@ <td>{{item.usageState}}</td> <td> <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}" - class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i)" + class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i,notificationModel)" *ngIf="item.uuid"></i> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)" + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)" *ngIf="item.id"></i> <!--<span *ngIf="item.id && item.sameid == undefined">--> <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">--> @@ -289,7 +289,7 @@ <td>{{item.pnfdOnboardingState}}</td> <td>{{item.pnfdUsageState}}</td> <td> - <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab)"></i> + <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)"></i> <!--<span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">--> <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">--> <!--<i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>--> @@ -308,5 +308,26 @@ </div> </nz-tab> + <!--2019.08.14 add notification--> + <ng-template #notificationModel > + <div class="ant-notification-notice-content"> + <div class="ant-notification-notice-with-icon"> + <span class="ant-notification-notice-icon"> + <img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}"> + </span> + <div class="ant-notification-notice-message"> + {{notificationAttributes.title}} + {{"i18nTextDefine_"+notificationAttributes.action | translate}} {{"i18nTextDefine_"+notificationAttributes.status | translate}} + </div> + <div class="ant-notification-notice-description"> + <div class="notificationlist"> + <p>{{notificationAttributes.title}} id: </p> + <span>{{ notificationAttributes.id }}</span> + </div> + </div> + <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> + </div> + </div> + </ng-template> </nz-tabset> 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 ac880f4a..f65a9560 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 @@ -14,7 +14,8 @@ limitations under the License. */ import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http'; -import { Component, OnInit, HostBinding } from '@angular/core'; +import {Component, OnInit, HostBinding, TemplateRef} from '@angular/core'; +import { NzNotificationService } from 'ng-zorro-antd'; // import { MyhttpService } from '../../myhttp.service'; import { onboardService } from '../../onboard.service'; import { slideToRight } from '../../animates'; @@ -22,7 +23,6 @@ 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({ @@ -61,8 +61,15 @@ export class OnboardVnfVmComponent implements OnInit { //vnf: 'https://jsonplaceholder.typicode.com/posts/', //pnf: 'https://jsonplaceholder.typicode.com/posts/', }; - constructor(private myhttp: onboardService, private http: HttpClient, private msg: NzMessageService,private titleService: Title,private modal: NzModalService, private modalService: NzModalService) { } - + constructor( + private myhttp: onboardService, + private http: HttpClient, + private msg: NzMessageService, + private titleService: Title, + private modal: NzModalService, + private modalService: NzModalService, + private notification: NzNotificationService + ) { } //default Call ns data by default ngOnInit() { this.getTableData(); @@ -90,6 +97,28 @@ export class OnboardVnfVmComponent implements OnInit { tabs = ['NS', 'VNF', 'PNF']; isSpinning = false; + //2019.08.14 add + notificationAttributes = { + "title":this.tabs[0], + "imgPath":"../../../../assets/images/execute-inproess.png", + "action":"OnboardingState", + "status":"InProgress", + "id":null + }; + notificationModelShow(template: TemplateRef<{}>): void { + console.log(this.notificationAttributes,"notificationModelShow show"); + this.notification.template(template); + } + notificationSuccess(notificationModel){ + this.notificationAttributes.imgPath = "../../../assets/images/execute-success.png"; + this.notificationAttributes.status = "Success"; + this.notificationModelShow(notificationModel); + } + notificationFailed(notificationModel){ + this.notificationAttributes.imgPath = "../../../assets/images/execute-faild.png"; + this.notificationAttributes.status = "Failed"; + this.notificationModelShow(notificationModel); + } // Handling tab switching request data handleTabChange(tab) { this.tabTitle = tab; @@ -571,25 +600,35 @@ changeUploadingSta(tab) { } currentIndex = 0; // ns onboard Upload button - updataNsService(id,index) { + updataNsService(id,index,notificationModel) { this.currentIndex = index; this.onboardData.status = "onboarding"; //Disabled this.onboardData.progress = 0; console.log("NS-onboard-id-->" + id); let requestBody = { "csarId": id - } + }; + this.notificationAttributes = { + "title":this.tabs[0], + "imgPath":"../../../../assets/images/execute-inproess.png", + "action":"OnboardingState", + "status":"InProgress", + "id":id + }; + this.notificationModelShow(notificationModel); this.myhttp.getNsonboard(requestBody) .subscribe((data) => { console.log('onboard ns sdc-->', data); if(data.status == "failed"){ console.log("Package Onboard Failed") this.onboardData.status = "Failed"; + this.notificationFailed(notificationModel); this.error(); return false }else if(data.status == "success"){ this.success("NS"); this.onboardData.status = "onboarded"; + this.notificationSuccess(notificationModel); } }, (err) => { console.log(err); @@ -597,7 +636,7 @@ changeUploadingSta(tab) { } // vnf onboard Upload button - updataVnfService(id,index) { + updataVnfService(id,index,notificationModel) { this.currentIndex = index; this.onboardData.status = "onboarding"; //Disabled button this.onboardData.progress = 0; @@ -605,13 +644,21 @@ changeUploadingSta(tab) { console.log("VNF-onboard-id-->" + id) let requestBody = { "csarId": id - } + }; + this.notificationAttributes = { + "title":this.tabs[1], + "imgPath":"../../../../assets/images/execute-inproess.png", + "action":"OnboardingState", + "status":"InProgress", + "id":id + }; + this.notificationModelShow(notificationModel); this.myhttp.getVnfonboard(requestBody) .subscribe((data) => { console.log('onboard vnf sdc-->', data); this.jobId = data.jobId; console.log('onboard vnf sdc jobId-->'+ data.jobId); - this.queryProgress(this.jobId,0); //vnf Need to query progress interface + this.queryProgress(this.jobId,0,notificationModel); //vnf Need to query progress interface }, (err) => { console.log(err); }) @@ -623,7 +670,7 @@ changeUploadingSta(tab) { // } //Progress Progress inquiry - queryProgress(jobId,responseId){ + queryProgress(jobId,responseId,notificationModel){ let mypromise = new Promise((res)=>{ this.myhttp.getProgress(jobId,responseId) .subscribe((data)=>{ @@ -633,7 +680,7 @@ changeUploadingSta(tab) { console.log("progress == undefined"); this.onboardData.status = "onboarding"; setTimeout(()=>{ - this.queryProgress(this.jobId,0); + this.queryProgress(this.jobId,0,notificationModel); },10000) return false } @@ -641,6 +688,7 @@ changeUploadingSta(tab) { console.log("progress-->",data.responseDescriptor.progress) console.log("Package Onboard Failed") this.onboardData.status = "Failed"; + this.notificationFailed(notificationModel); this.error(); return false } @@ -648,7 +696,7 @@ changeUploadingSta(tab) { this.onboardData.status = "onboarding"; console.log("progress < 100") setTimeout(()=>{ - this.queryProgress(this.jobId,0); + this.queryProgress(this.jobId,0,notificationModel); },5000) }else if(data.responseDescriptor.progress == 100){ res(data); @@ -656,7 +704,8 @@ changeUploadingSta(tab) { console.log(data); this.success("VNF"); this.onboardData.status = "onboarded"; - } + this.notificationSuccess(notificationModel); + } return false }) }) @@ -665,7 +714,14 @@ changeUploadingSta(tab) { //-------------------------------------------------------------------------------- /* delete button */ - showConfirm(index,pkgid,tab): void { + showConfirm(index,pkgid,tab,notificationModel): void { + this.notificationAttributes = { + "title":this.tabs[0], + "imgPath":"../../../../assets/images/execute-inproess.png", + "action":"OnboardingState", + "status":"InProgress", + "id":pkgid + }; this.confirmModal = this.modal.confirm({ nzTitle: 'Do you Want to delete these items?', nzContent: 'Do you Want to delete these items?', @@ -674,15 +730,21 @@ changeUploadingSta(tab) { nzOnOk: () => new Promise((resolve, reject) => { switch (tab) { case 'NS': - this.deleteNsService(index,pkgid); + this.notificationAttributes.title = this.tabs[0]; + this.notificationModelShow(notificationModel); + this.deleteNsService(index,pkgid,notificationModel); setTimeout(Math.random() > 0.5 ? resolve : reject,2000); break case 'VNF': - this.deleteVnfService(index,pkgid); + this.notificationAttributes.title = this.tabs[1]; + this.notificationModelShow(notificationModel); + this.deleteVnfService(index,pkgid,notificationModel); setTimeout(Math.random() > 0.5 ? resolve : reject,2000); break case 'PNF': - this.deletePnfService(index,pkgid); + this.notificationAttributes.title = this.tabs[2]; + this.notificationModelShow(notificationModel); + this.deletePnfService(index,pkgid,notificationModel); setTimeout(Math.random() > 0.5 ? resolve : reject,2000); break } @@ -691,44 +753,50 @@ changeUploadingSta(tab) { } //delete nsItem - deleteNsService(index,pkgid) { + deleteNsService(index,pkgid,notificationModel) { console.log(pkgid) console.log("deleteService!"); this.myhttp.deleteNsIdData(pkgid) .subscribe((data) => { console.log("nsdel--->", data); + this.notificationSuccess(notificationModel); //refresh list after successful deletion this.getTableData(); }, (err) => { console.log(err); + this.notificationFailed(notificationModel); }) } //delete vnfItem - deleteVnfService(index,pkgid) { + deleteVnfService(index,pkgid,notificationModel) { console.log(pkgid) console.log("deleteVnfService!"); this.myhttp.deleteVnfIdData(pkgid) .subscribe((data) => { console.log('vnfdel--->', data); + this.notificationSuccess(notificationModel); //refresh list after successful deletion this.getTableVnfData() }, (err) => { console.log(err); + this.notificationFailed(notificationModel); }) } //delete PnfItem - deletePnfService(index,pkgid) { + deletePnfService(index,pkgid,notificationModel) { console.log(pkgid) console.log("deletePnfService!"); this.myhttp.deletePnfIdData(pkgid) .subscribe((data) => { console.log('pnfdel--->', data); //refresh list after successful deletion + this.notificationSuccess(notificationModel); this.getTablePnfData() }, (err) => { console.log(err); + this.notificationFailed(notificationModel); }) } |