From e9ed865ef5d4095cd81e405e8248218247f2d494 Mon Sep 17 00:00:00 2001
From: cyuamber <xuranyjy@chinamobile.com>
Date: Sat, 12 Oct 2019 16:06:37 +0800
Subject: feat: extract the deletion notification of the service-list page
Change-Id: I7520a0a2e7406db712ad7c09dd1f23e213e725dc
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
---
.../notification/notification.component.html | 47 ++++++--
.../notification/notification.component.ts | 15 ++-
.../management/customer/customer.component.html | 2 +-
.../onboard-vnf-vm/onboard-vnf-vm.component.html | 2 +-
.../services-list/services-list.component.html | 52 ++-------
.../services-list/services-list.component.ts | 125 +++++++++------------
6 files changed, 111 insertions(+), 132 deletions(-)
(limited to 'usecaseui-portal')
diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.html b/usecaseui-portal/src/app/shared/components/notification/notification.component.html
index acf6f62a..f20fd48c 100644
--- a/usecaseui-portal/src/app/shared/components/notification/notification.component.html
+++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.html
@@ -4,18 +4,47 @@
<span class="ant-notification-notice-icon">
<img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
</span>
- <div class="ant-notification-notice-message">
- {{(notificationAttributes.action === 'OnboardingState'? notificationAttributes.title : "i18nTextDefine_"+notificationAttributes.title) | translate}}
- {{"i18nTextDefine_"+notificationAttributes.action | translate}} {{"i18nTextDefine_"+notificationAttributes.status | translate}}
+ <!-- customer&onboard -->
+ <div *ngIf="!isServicesList">
+ <div class="ant-notification-notice-message">
+ {{(notificationAttributes.action === 'OnboardingState'? notificationAttributes.title : "i18nTextDefine_"+notificationAttributes.title) | translate}}
+ {{"i18nTextDefine_"+notificationAttributes.action | translate}} {{"i18nTextDefine_"+notificationAttributes.status | translate}}
+ </div>
+ <div class="ant-notification-notice-description">
+ <div class="notificationlist">
+ <p *ngIf="notificationAttributes.action !== 'OnboardingState'">{{"i18nTextDefine_"+notificationAttributes.title | translate}}:</p>
+ <p *ngIf="notificationAttributes.action === 'OnboardingState'">{{notificationAttributes.title}} id: </p>
+ <span>{{ notificationAttributes.name }}</span>
+ </div>
+ </div>
+ <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
</div>
- <div class="ant-notification-notice-description">
- <div class="notificationlist">
- <p *ngIf="notificationAttributes.action !== 'OnboardingState'">{{"i18nTextDefine_"+notificationAttributes.title | translate}}:</p>
- <p *ngIf="notificationAttributes.action === 'OnboardingState'">{{notificationAttributes.title}} id: </p>
- <span>{{ notificationAttributes.name }}</span>
+ <!-- services-list -->
+ <div *ngIf="isServicesList">
+ <div class="ant-notification-notice-message"
+ *ngIf="notificationAttributes.title === 'CCVPN' || notificationAttributes.title === 'SOTN'">
+ {{ notificationAttributes.title }} {{notificationAttributes.status === 'Success'? "i18nTextDefine_InstanceTeminatedSuccessfully" : (notificationAttributes.status === 'Failed'?"i18nTextDefine_InstanceTeminationFailed":"i18nTextDefine_InstanceTeminationStarting") | translate}}
+ </div>
+ <div class="ant-notification-notice-message"
+ *ngIf="notificationAttributes.title === 'E2E Service' || notificationAttributes.title === 'Network Service'">
+ {{notificationAttributes.title === 'E2E Service'?'E2E': 'NS'}} {{notificationAttributes.status === 'Success'? "i18nTextDefine_InstanceTeminatedSuccessfully" :(notificationAttributes.status === 'Failed'?"i18nTextDefine_InstanceTeminationFailed":"i18nTextDefine_InstanceTeminationStarting")| translate}}
+ </div>
+ <div class="ant-notification-notice-description">
+ <div class="notificationlist">
+ <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+ <span>{{ notificationAttributes.name }} </span>
+ </div>
+ <div class="notificationlist">
+ <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+ <span>{{ customerSelected.name }}</span>
+ </div>
+ <div class="notificationlist">
+ <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+ <span>{{ notificationAttributes.title }}</span>
+ </div>
</div>
+ <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
</div>
- <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
</div>
</div>
</ng-template>
diff --git a/usecaseui-portal/src/app/shared/components/notification/notification.component.ts b/usecaseui-portal/src/app/shared/components/notification/notification.component.ts
index 00ccf90b..de0df083 100644
--- a/usecaseui-portal/src/app/shared/components/notification/notification.component.ts
+++ b/usecaseui-portal/src/app/shared/components/notification/notification.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
+import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd';
@Component({
@@ -8,6 +8,8 @@ import { NzNotificationService } from 'ng-zorro-antd';
})
export class NotificationComponent implements OnInit {
@ViewChild('notificationModel')notificationModel: any;
+ @Input()isServicesList: boolean;
+ @Input()customerSelected: object;
notificationAttributes: {
title: string,
@@ -23,17 +25,22 @@ export class NotificationComponent implements OnInit {
}
setNotification({ title, imgPath, action, status, name }):void{
- this.notificationAttributes = { title, imgPath, action, status, name }
+ this.notificationAttributes = { title, imgPath, action, status, name };
}
notificationSuccess(title: string, action: string, name: string): void {
- this.notification.remove()
+ this.notification.remove();
this.setNotification({ title, imgPath: "assets/images/execute-success.png", action, status: 'Success', name })
this.notification.template(this.notificationModel);
}
notificationFailed(title: string, action: string, name: string): void {
- this.notification.remove()
+ this.notification.remove();
this.setNotification({ title, imgPath: "assets/images/execute-faild.png", action, status: 'Failed', name })
this.notification.template(this.notificationModel)
}
+ notificationStart(title: string, action: string, name: string): void {
+ this.notification.remove();
+ this.setNotification({ title, imgPath: "assets/images/execute-inproess.png", action , status: 'instance temination is starting', name })
+ this.notification.template(this.notificationModel)
+ }
}
diff --git a/usecaseui-portal/src/app/views/management/customer/customer.component.html b/usecaseui-portal/src/app/views/management/customer/customer.component.html
index 0f033e47..63b0a5b8 100644
--- a/usecaseui-portal/src/app/views/management/customer/customer.component.html
+++ b/usecaseui-portal/src/app/views/management/customer/customer.component.html
@@ -114,5 +114,5 @@
<div class="deleteModelContent">{{thisdeleteServiceType["type"]}}</div>
</div>
</nz-modal>
- <app-notification #notification></app-notification>
+ <app-notification #notification [isServicesList]="false"></app-notification>
</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
index 374afe0d..c48d68f9 100644
--- a/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ b/usecaseui-portal/src/app/views/services/onboard-vnf-vm/onboard-vnf-vm.component.html
@@ -120,4 +120,4 @@
</nz-table>
</nz-spin>
</div>
-<app-notification #notification></app-notification>
\ No newline at end of file
+<app-notification #notification [isServicesList]="false"></app-notification>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
index a82c8a2b..a97c3766 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
@@ -66,7 +66,7 @@
[serviceDetailName]="item.detailName">
</app-top-card>
</div>
- <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay == true}">
+ <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay === true}">
<nz-table #nzTable [nzData]="tableData" nzShowSizeChanger [nzFrontPagination]="false"
[nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize"
[(nzPageIndex)]='pageIndex' [nzLoading]="loading" [nzSize]="'middle'"
@@ -224,7 +224,7 @@
</nz-modal>
<!-- <app-delete-modal *ngIf="deleteModalVisible" [deleteModalVisible]="deleteModalVisible"></app-delete-modal> -->
<nz-modal nzWidth="428" [(nzVisible)]="deleteModalVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}}"
- (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk(templatedeletestarting,templateDeleteSuccessFaild)"
+ (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk(templateDeleteSuccessFaild)"
nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}"
nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
@@ -256,46 +256,6 @@
[(ngModel)]="gracefulTerminationTimeout">
</div>
</div>
-
- <ng-template #templatedeletestarting>
- <div class="ant-notification-notice-content">
- <div class="ant-notification-notice-with-icon">
- <span class="ant-notification-notice-icon">
- <img src="assets/images/execute-inproess.png" alt="instance temination is starting">
- </span>
- <div class="ant-notification-notice-message"
- *ngIf="thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">
- {{ thisService['serviceDomain'] }} {{"i18nTextDefine_InstanceTeminationStarting" |
- translate}}
- </div>
- <div class="ant-notification-notice-message"
- *ngIf="thisService['serviceDomain'] == 'E2E Service'">E2E
- {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
- </div>
- <div class="ant-notification-notice-message"
- *ngIf="thisService['serviceDomain'] == 'Network Service'">NS
- {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
- </div>
- <div class="ant-notification-notice-description">
- <div class="notificationlist">
- <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
- <span>{{ thisService["service-instance-name"] ||
- thisService["nsInstanceName"] }}
- </span>
- </div>
- <div class="notificationlist">
- <p> {{"i18nTextDefine_Customer" | translate}} :</p>
- <span>{{ customerSelected.name }}</span>
- </div>
- <div class="notificationlist">
- <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
- <span>{{ thisService["serviceDomain"] }}</span>
- </div>
- </div>
- <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
- </div>
- </div>
- </ng-template>
</nz-modal>
<nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} "
@@ -401,6 +361,7 @@
</ng-template>
</nz-modal>
+ <app-notification #notification [isServicesList]="true" [customerSelected]="customerSelected"></app-notification>
<!-- add notification-->
<ng-template #templateCreatestarting>
<div class="ant-notification-notice-content">
@@ -409,7 +370,7 @@
<img src="assets/images/execute-inproess.png" alt="instance temination is starting">
</span>
<div class="ant-notification-notice-message"
- *ngIf="thisCreateService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">
+ *ngIf="thisCreateService['serviceDomain'] === 'CCVPN' || thisService['serviceDomain'] === 'SOTN'">
{{ thisService['serviceDomain'] }} {{"i18nTextDefine_InstanceCreationStarting" |
translate}}
</div>
@@ -517,6 +478,7 @@
*ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Successful'">
NS {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}
</div>
+
<div class="ant-notification-notice-message"
*ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Failed'">
{{ thisService['serviceDomain'] }} {{"i18nTextDefine_InstanceTeminationFailed" |
@@ -678,7 +640,7 @@
</div>
<!--</div>-->
</nz-layout>
-<!-- <div class="loading" *ngIf="loadingAnimateShow">
+<div class="loading" *ngIf="loadingAnimateShow">
<img src="assets/images/loading-animate2.gif" alt="loading">
<p>Please wating……</p>
-</div> -->
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
index 5a1a1ab0..9de72233 100644
--- a/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
@@ -13,7 +13,7 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
-import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core';
+import { Component, OnInit, HostBinding, TemplateRef, ViewChild } from '@angular/core';
import { ServiceListService } from '../../../core/services/serviceList.service';
import { slideToRight } from '../../../shared/utils/animates';
import { NzModalService } from 'ng-zorro-antd';
@@ -28,6 +28,7 @@ import { Observable } from 'rxjs/Rx';
})
export class ServicesListComponent implements OnInit {
@HostBinding('@routerAnimate') routerAnimateState;
+ @ViewChild('notification') notification1: any;
public width:number = document.documentElement.clientWidth;
@@ -516,7 +517,7 @@ export class ServicesListComponent implements OnInit {
})
if (service["serviceDomain"] === 'CCVPN' || service["serviceDomain"] === 'SOTN') {
this.detailshow = true;
- if (typeNum == 1) {
+ if (typeNum === 1) {
this.upDateShow = false;
} else {
this.upDateShow = true;
@@ -538,25 +539,21 @@ export class ServicesListComponent implements OnInit {
this.deleteModalVisible = true;
}
- deleteOk(templatedeletestarting, templateDeleteSuccessFaild) {
+ deleteOk(templateDeleteSuccessFaild) {
this.deleteModalVisible = false;
this.loadingAnimateShow = true;
- if (this.thisService["serviceDomain"] == "Network Service") {
- this.deleteNsService(this.thisService, templateDeleteSuccessFaild);
+ if (this.thisService["serviceDomain"] === "Network Service") {
+ this.deleteNsService(this.thisService);
} else {
this.deleteService(this.thisService, templateDeleteSuccessFaild);
}
- this.deleteNotification(templatedeletestarting);
+ this.notification1.notificationStart(this.thisService['serviceDomain'],'deleteStarting',this.thisService["service-instance-name"] ||this.thisService["nsInstanceName"])
}
deleteCancel() {
this.deleteModalVisible = false;
}
- deleteNotification(template: TemplateRef<{}>): void {
- this.notification.template(template);
- }
-
deleteSuccessNotification(template: TemplateRef<{}>): void {
this.notification.template(template);
}
@@ -1072,7 +1069,7 @@ export class ServicesListComponent implements OnInit {
})
}
- deleteNsService(service, templateDeleteSuccessFaild) {
+ deleteNsService(service) {
service.rate = 0;
service.status = "In Progress";
service.tips = "";
@@ -1084,9 +1081,9 @@ export class ServicesListComponent implements OnInit {
gracefulTerminationTimeout: this.gracefulTerminationTimeout
}
this.stopNsService(id, requestBody).then((jobid) => {
- if (jobid == "Failed") {
+ if (jobid === "Failed") {
service.status = "Failed";
- this.deleteSuccessNotification(templateDeleteSuccessFaild);
+ this.notification1.notificationFailed(service.serviceDomain,'deleteStarting',service["service-instance-name"] ||service["nsInstanceName"])
service.tips = this.listSortMasters["operationTypes"].find((its) => {
return its["sortCode"] == service.statusClass && its["language"] == this.language
})["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
@@ -1095,55 +1092,47 @@ export class ServicesListComponent implements OnInit {
return false;
}
let updata = (prodata) => {
- service.rate = prodata.progress;
+ service.rate = prodata.progress || 0;
+ if(service['rate'] > 100)service["status"] = prodata.status;
service.tips = this.listSortMasters["operationTypes"].find((its) => {
return its["sortCode"] == service.statusClass && its["language"] == this.language
- })["sortValue"] + '\xa0\xa0\xa0' + service.rate + "%";
- if (service["rate"] > 100) {
- service["status"] = prodata.status;
- service.tips = this.listSortMasters["operationTypes"].find((its) => {
- return its["sortCode"] == service.statusClass && its["language"] == this.language
- })["sortValue"] + service["status"];
- }
+ })["sortValue"] + (service["rate"] > 100? service["status"] : ('\xa0\xa0\xa0' + service.rate + "%"));
}
- return this.queryNsProgress(jobid, null, updata, operationType);
- }).then(() => {
- let paramsObj = {
- "ns_instance_id":id
- };
- this.myhttp.nsDeleteInstance(paramsObj)
- .subscribe((data) => {
- console.log(data);
- service.rate = 100;
- service.status = "Successful";
- service.tips = this.listSortMasters["operationTypes"].find((its) => {
- return its["sortCode"] == service.statusClass && its["language"] == this.language
- })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
- return its["sortCode"] == 2001 && its["language"] == this.language
- })["sortValue"];
- this.deleteSuccessNotification(templateDeleteSuccessFaild);
- if (data.status == "FAILED") {
- console.log("delete ns service Failed :" + JSON.stringify(data));
- service.status = "Failed";
- service.tips = this.listSortMasters["operationTypes"].find((its) => {
- return its["sortCode"] == service.statusClass && its["language"] == this.language
- })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
- return its["sortCode"] == 2002 && its["language"] == this.language
- })["sortValue"];
- this.deleteSuccessNotification(templateDeleteSuccessFaild);
- return false;
- }
- console.log(service, "deleteservice");
- console.log(this.thisService, "thisService");
- let hasUndone = this.tableData.some((item) => {
- return item.rate < 100;
+ this.queryNsProgress(jobid, null, updata, operationType).then(() => {
+ let paramsObj = {
+ "ns_instance_id":id
+ };
+ this.myhttp.nsDeleteInstance(paramsObj)
+ .subscribe((data) => {
+ if(data.status == "SUCCESS"){
+ service.rate = 100;
+ service.status = "Successful";
+ service.tips = this.listSortMasters["operationTypes"].find((its) => {
+ return its["sortCode"] == service.statusClass && its["language"] == this.language
+ })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
+ return its["sortCode"] == 2001 && its["language"] == this.language
+ })["sortValue"];
+ this.notification1.notificationSuccess(service.serviceDomain,'deleteStarting',service["service-instance-name"] ||service["nsInstanceName"])
+ }else {
+ service.status = "Failed";
+ service.tips = this.listSortMasters["operationTypes"].find((its) => {
+ return its["sortCode"] == service.statusClass && its["language"] == this.language
+ })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
+ return its["sortCode"] == 2002 && its["language"] == this.language
+ })["sortValue"];
+ this.notification1.notificationFailed(service.serviceDomain,'deleteStarting',service["service-instance-name"] ||service["nsInstanceName"])
+ return false;
+ }
+ let hasUndone = this.tableData.some((item) => {
+ return item.rate < 100;
+ })
+ if (!hasUndone) {
+ setTimeout(() => {
+ this.getTableData();
+ }, 1000)
+ }
})
- if (!hasUndone) {
- setTimeout(() => {
- this.getTableData();
- }, 1000)
- }
- })
+ })
})
}
@@ -1151,7 +1140,7 @@ export class ServicesListComponent implements OnInit {
let paramsObj = {
"ns_instance_id":id
}
- let mypromise = new Promise((res, rej) => {
+ return new Promise((res, rej) => {
this.myhttp.stopNsService(paramsObj, obj)
.subscribe((data) => {
this.loadingAnimateShow = false;
@@ -1163,7 +1152,6 @@ export class ServicesListComponent implements OnInit {
res(data.jobId);
})
})
- return mypromise;
}
queryProgress(obj, callback) {
@@ -1201,7 +1189,7 @@ export class ServicesListComponent implements OnInit {
}
queryNsProgress(jobid, id, callback, operationType) {
- let mypromise = new Promise((res, rej) => {
+ return new Promise((res, rej) => {
let errorNums = 180;
let paramsObj = {
"responseId":0,
@@ -1213,24 +1201,18 @@ export class ServicesListComponent implements OnInit {
.subscribe((data) => {
if (data.status == "FAILED") {
callback({ progress: 255, status: "Failed" });
- return false;
- }
- if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) {
+ }else if (data.responseDescriptor === null || data.responseDescriptor.progress === undefined) {
errorNums--;
- if (errorNums == 0) {
+ if (errorNums === 0) {
callback({ progress: 255, status: "time over" });
return false;
}
this.progressNsOutTimer = setTimeout(()=>{
requeryNs();
},10000);
- return false;
- }
- if (data.responseDescriptor.progress > 100 && data.responseDescriptor.status == "error") {
+ }else if (data.responseDescriptor.progress > 100 && data.responseDescriptor.status === "error") {
callback({ progress: 255, status: data.responseDescriptor.statusDescription });
- return false;
- }
- if (data.responseDescriptor.progress < 100) {
+ }else if (data.responseDescriptor.progress < 100) {
callback(data.responseDescriptor);
this.progressingNsTimer = setTimeout(()=>{
requeryNs();
@@ -1242,6 +1224,5 @@ export class ServicesListComponent implements OnInit {
};
requeryNs();
});
- return mypromise;
}
}
--
cgit