summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-05-09 17:46:02 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-05-09 17:46:09 +0800
commit88fb2fed36e33ddb7e22dd948afeb0198adbe56b (patch)
treea11d7bf0ffc5b1a3d697eeff9c967a3f1fc6052c /usecaseui-portal/src/app
parentd72175c1e88052929dec9f59d5f620cc2d964cdd (diff)
Service instance lifecycle management
Change-Id: I5047ebd4cc48eab8a03664b5ac61ef9faeedadbb Issue-ID: USECASEUI-218 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app')
-rw-r--r--usecaseui-portal/src/app/app.component.html9
-rw-r--r--usecaseui-portal/src/app/app.component.ts4
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.html323
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.ts148
4 files changed, 405 insertions, 79 deletions
diff --git a/usecaseui-portal/src/app/app.component.html b/usecaseui-portal/src/app/app.component.html
index 021cf263..ee0fdd8d 100644
--- a/usecaseui-portal/src/app/app.component.html
+++ b/usecaseui-portal/src/app/app.component.html
@@ -77,15 +77,6 @@
</a>
</li>
</ul>
-
- <!--<nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">-->
- <!--<button nz-button nz-dropdown><span>{{selectLanguage | translate}}</span> <i class="anticon anticon-down"></i></button>-->
- <!--<ul nz-menu>-->
- <!--<li nz-menu-item (click)="changeLanguage(item)" *ngFor="let item of Language">-->
- <!--<a>{{item | translate}}</a>-->
- <!--</li>-->
- <!--</ul>-->
- <!--</nz-dropdown>-->
</nz-sider>
<nz-layout style="margin-left: 260px; height:100vh; position:relative;">
<router-outlet></router-outlet>
diff --git a/usecaseui-portal/src/app/app.component.ts b/usecaseui-portal/src/app/app.component.ts
index dc8b03e9..190f42e3 100644
--- a/usecaseui-portal/src/app/app.component.ts
+++ b/usecaseui-portal/src/app/app.component.ts
@@ -28,12 +28,10 @@ export class AppComponent {
constructor(private translate: TranslateService,private myhttp: HomesService) {
this.currentLanguageGet();
- // translate.addLangs(['en', 'zh']);
// translate.use('en');
}
-
- // Language:String[] = ["zh","en"];
+
//209.05.08 Get the currentLanguage
currentloginId = null;
currentLanguage = "en";
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
index 2839e5b8..7fe4564d 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -74,7 +74,7 @@
</div>
<div *ngIf="templateTypeSelected == 'E2E Service'">
<div class="select-list">
- <span style="display:inline-block;width:70px;">Orchestrator: </span>
+ <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Orchestrator" | translate}} : </span>
<nz-select style="width: 176px;float: right;" [(ngModel)]="orchestratorSelected" nzAllowClear>
<nz-option *ngFor="let item of orchestratorList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
</nz-select>
@@ -166,13 +166,13 @@
<li>
<i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
class="anticon anticon-setting" (click)="scaleService(data)"></i>
- <span>scale</span>
+ <span> {{"i18nTextDefine_Scale" | translate}} </span>
+ </li>
+ <li>
+ <i [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+ class="anticon anticon-cloud-upload-o" (click)="update(data)"></i>
+ <span> {{"i18nTextDefine_Update" | translate}} </span>
</li>
- <li>
- <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
- class="anticon anticon-cloud-upload-o" (click)="update(data)"></i>
- <span>update</span>
- </li>
</ul>
<!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> -->
<!-- <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}"
@@ -202,13 +202,17 @@
</tbody>
</nz-table>
- <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} " (nzOnCancel)="scaleCancel()"
- (nzOnOk)="scaleOk()" nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+ <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} "
+ (nzOnCancel)="scaleCancel()"
+ (nzOnOk)="scaleOk(templatescalestarting,templateScaleSuccessFaild)" nzClassName="scaleModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+ nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
<h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureScale" | translate}} </h3>
<div class="question">
<h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4>
- <div class="scaleModelContent" style="width: 100%">{{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
- thisService["vnfInstanceId"]}}</div>
+ <div class="scaleModelContent" style="width: 100%">{{ thisService["service-instance-id"] ||
+ thisService["nsInstanceId"] ||
+ thisService["vnfInstanceId"]}}
+ </div>
</div>
<div *ngFor="let item of e2e_nsData" style="margin-top: 20px">
<h3>{{ item.netWorkServiceName }}</h3>
@@ -236,20 +240,53 @@
</nz-select>
</div>
</div>
+ <!--2019.05.09 add Scale notification-->
+ <ng-template #templatescalestarting >
+ <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">E2E &nbsp; {{"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>
+ </div>
+ </ng-template>
</nz-modal>
- <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} " (nzOnCancel)="deleteCancel()"
- (nzOnOk)="deleteOk()" nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+ <nz-modal nzWidth="428" [(nzVisible)]="deleteModelVisible" nzTitle=" {{'i18nTextDefine_delete' | translate}} "
+ (nzOnCancel)="deleteCancel()"
+ (nzOnOk)="deleteOk(templatedeletestarting,templateDeleteSuccessFaild)"
+ nzClassName="{{thisService['serviceDomain'] == 'Network Service'?'nsdeleteModel':'deleteModel'}}"
+ nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+ nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
<h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureDelete" | translate}} </h3>
<div class="question">
<h4> {{"i18nTextDefine_InstanceName" | translate}} :</h4>
- <div class="deleteModelContent">{{ thisService["service-instance-id"] ||
- thisService["nsInstanceId"] }}</div>
+ <div class="deleteModelContent">{{ thisService["service-instance-name"] ||
+ thisService["nsInstanceName"] }}
+ </div>
</div>
<div class="question">
<h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4>
- <div class="deleteModelContent">{{ thisService["service-instance-name"] ||
- thisService["nsInstanceName"] }}</div>
+ <div class="deleteModelContent">{{ thisService["service-instance-id"] ||
+ thisService["nsInstanceId"] }}
+ </div>
</div>
<div *ngIf="thisService['serviceDomain'] == 'Network Service'">
<div class="question">
@@ -265,10 +302,42 @@
[(ngModel)]="gracefulTerminationTimeout">
</div>
</div>
+ <!--2019.05.09 add delete notification-->
+ <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'] }} &nbsp; {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
+ </div>
+ <div class="ant-notification-notice-message" *ngIf="thisService['serviceDomain'] == 'E2E Service'">E2E &nbsp; {{"i18nTextDefine_InstanceTeminationStarting" | translate}}</div>
+ <div class="ant-notification-notice-message" *ngIf="thisService['serviceDomain'] == 'Network Service'">NS &nbsp; {{"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>
+ </div>
+ </ng-template>
</nz-modal>
- <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} " (nzOnCancel)="healCancel()"
- (nzOnOk)="healOk()" nzClassName="healModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
+ <nz-modal nzWidth="428" [nzVisible]="healModelVisible" nzTitle=" {{'i18nTextDefine_Heal' | translate}} "
+ (nzOnCancel)="healCancel()"
+ (nzOnOk)="healOk(templatehealstarting,templatehealSuccessFaild)" nzClassName="healModel" nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
+ nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
<h3><span style="color: red">*&nbsp;</span> {{"i18nTextDefine_SureHeal" | translate}} </h3>
<div class="heal-question">
<p class="heal-label"> {{"i18nTextDefine_InstanceID" | translate}} : </p>
@@ -331,9 +400,217 @@
</nz-select>
</div>
</div>
+ <!--2019.05.09 add heal notification-->
+ <ng-template #templatehealstarting >
+ <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">NS &nbsp; {{"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>
+ </div>
+ </ng-template>
</nz-modal>
- </div>
+ <!-- add notification-->
+ <ng-template #templateCreatestarting >
+ <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="thisCreateService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN'">{{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceCreationStarting" | translate}}
+ </div>
+ <div class="ant-notification-notice-message" *ngIf="thisCreateService['serviceDomain'] == 'E2E Service'">E2E &nbsp; {{"i18nTextDefine_InstanceCreationStarting" | translate}}</div>
+ <div class="ant-notification-notice-message" *ngIf="thisCreateService['serviceDomain'] == 'Network Service'">NS &nbsp; {{"i18nTextDefine_InstanceCreationStarting" | translate}}</div>
+ <div class="ant-notification-notice-description">
+ <div class="notificationlist">
+ <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+ <span>{{ thisCreateService["service-instance-name"] }}
+ </span>
+ </div>
+ <div class="notificationlist">
+ <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+ <span>{{ customerSelected2.name }}</span>
+ </div>
+ <div class="notificationlist">
+ <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+ <span>{{ thisCreateService['serviceDomain'] }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </ng-template>
+ <ng-template #templateCreateSuccessFaild >
+ <div class="ant-notification-notice-content">
+ <div class="ant-notification-notice-with-icon">
+ <span class="ant-notification-notice-icon">
+ <img src="../../../assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisCreateService.status == 'Successful'">
+ <img src="../../../assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisCreateService.status == 'Failed'">
+ </span>
+ <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Successful'">{{ thisCreateService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}
+ </div>
+ <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Successful'">E2E &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}</div>
+ <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Successful'">NS &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}</div>
+ <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Failed'">{{ thisCreateService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceCreationFailed" | translate}}
+ </div>
+ <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Failed'">E2E &nbsp; {{"i18nTextDefine_InstanceCreationFailed" | translate}}</div>
+ <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Failed'">NS &nbsp; {{"i18nTextDefine_InstanceCreationFailed" | translate}}</div>
+ <div class="ant-notification-notice-description">
+ <div class="notificationlist">
+ <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+ <span>{{ thisCreateService["service-instance-name"] ||
+ thisCreateService["nsInstanceName"] }}
+ </span>
+ </div>
+ <div class="notificationlist">
+ <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+ <span>{{ customerSelected2.name }}</span>
+ </div>
+ <div class="notificationlist">
+ <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+ <span>{{ thisCreateService["serviceDomain"] }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </ng-template>
+ <ng-template #templateDeleteSuccessFaild >
+ <div class="ant-notification-notice-content">
+ <div class="ant-notification-notice-with-icon">
+ <span class="ant-notification-notice-icon">
+ <img src="../../../assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'">
+ <img src="../../../assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'">
+ </span>
+ <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Successful'">{{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}
+ </div>
+ <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Successful'">E2E &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}</div>
+ <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Successful'">NS &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}</div>
+ <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Failed'">{{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" | translate}}
+ </div>
+ <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Failed'">E2E &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" | translate}}</div>
+ <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Failed'">NS &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" | 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>
+ </div>
+ </ng-template>
+ <ng-template #templateScaleSuccessFaild >
+ <div class="ant-notification-notice-content">
+ <div class="ant-notification-notice-with-icon">
+ <span class="ant-notification-notice-icon">
+ <img src="../../../assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'">
+ <img src="../../../assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'">
+ </span>
+ <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">E2E &nbsp; {{"i18nTextDefine_InstanceScaledSuccessfully" | translate}}</div>
+ <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">E2E &nbsp; {{"i18nTextDefine_InstanceScaleFailed" | 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>
+ </div>
+ </ng-template>
+ <ng-template #templatehealSuccessFaild >
+ <div class="ant-notification-notice-content">
+ <div class="ant-notification-notice-with-icon">
+ <span class="ant-notification-notice-icon">
+ <img src="../../../assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'">
+ <img src="../../../assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'">
+ </span>
+ <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">NS &nbsp; {{"i18nTextDefine_InstanceHealedSuccessfully" | translate}}</div>
+ <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">NS &nbsp; {{"i18nTextDefine_InstanceHealingFailed" | 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>
+ </div>
+ </ng-template>
+ <ng-template #templateUpdateSuccessFaild >
+ <div class="ant-notification-notice-content">
+ <div class="ant-notification-notice-with-icon">
+ <span class="ant-notification-notice-icon">
+ <img src="../../../assets/images/execute-success.png" alt="instance temination is starting" *ngIf="thisService.status == 'Successful'">
+ <img src="../../../assets/images/execute-faild.png" alt="instance temination is starting" *ngIf="thisService.status == 'Failed'">
+ </span>
+ <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Successful'">CCVPN &nbsp; {{"i18nTextDefine_InstanceUpdatedSuccessfully" | translate}}</div>
+ <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">CCVPN &nbsp; {{"i18nTextDefine_InstanceUpdateFailed" | 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>
+ </div>
+ </ng-template>
+ </div>
<div class="detailComponent" *ngIf="detailshow">
<app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData"
(closeDetail)="detailshow = false;listDisplay = false;"></app-ccvpn-detail>
@@ -345,14 +622,14 @@
<div class="createComponent" *ngIf="createshow">
<app-ccvpn-creation
[createParams]="createData"
- (closeCreate)="closeCreate($event)">
+ (closeCreate)="closeCreate($event,templateCreatestarting,templateCreateSuccessFaild)">
</app-ccvpn-creation>
</div>
<div class="createComponent" *ngIf="createshow2">
<app-e2e-creation
[createParams]="createData"
- (nsCloseCreate)="nsCloseCreate($event)"
- (e2eCloseCreate)="e2eCloseCreate($event)">
+ (nsCloseCreate)="nsCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)"
+ (e2eCloseCreate)="e2eCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)">
</app-e2e-creation>
</div>
<!--</div>-->
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
index 85ebb8fb..088bc7bc 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -13,10 +13,11 @@
See the License for the specific language governing permissions and
limitations under the License.
*/
-import { Component, OnInit, HostBinding } from '@angular/core';
-import { MyhttpService } from '../../myhttp.service';
-import { slideToRight } from '../../animates';
-import { NzModalService } from 'ng-zorro-antd';
+import {Component, OnInit, HostBinding,TemplateRef } from '@angular/core';
+import {MyhttpService} from '../../myhttp.service';
+import {slideToRight} from '../../animates';
+import {NzModalService} from 'ng-zorro-antd';
+import { NzNotificationService } from 'ng-zorro-antd';
@Component({
selector: 'app-services-list',
@@ -26,8 +27,8 @@ import { NzModalService } from 'ng-zorro-antd';
})
export class ServicesListComponent implements OnInit {
@HostBinding('@routerAnimate') routerAnimateState;
- constructor(private myhttp: MyhttpService, private modalService: NzModalService) { }
-
+ constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) {
+ }
ngOnInit() {
this.getallCustomers();
@@ -50,7 +51,6 @@ export class ServicesListComponent implements OnInit {
listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters'));
language="en";
iconMore=false;
- maskShow=false;
serviceMunber = [
{
"serviceDomain": "E2E",
@@ -384,7 +384,8 @@ export class ServicesListComponent implements OnInit {
this.e2e_nsData = data;
})
}
- scaleOk(){
+
+ scaleOk(templatescalestarting,templateScaleSuccessFaild) {
this.scaleModelVisible = false;
let requestBody = {
"service": {
@@ -406,12 +407,23 @@ export class ServicesListComponent implements OnInit {
})
}
}
- this.scaleE2eService(this.thisService,requestBody);
+ this.scaleE2eService(this.thisService, requestBody,templateScaleSuccessFaild);
+ this.scaleNotification(templatescalestarting);
}
scaleCancel(){
this.scaleModelVisible = false;
}
+ scaleNotification(template: TemplateRef<{}>): void {
+ console.log(template,"scaleNotification show");
+ this.notification.template(template);
+ // this.notification.template(template,{ nzDuration: 0 });
+ }
+ scaleSuccessNotification(template: TemplateRef<{}>): void {
+ console.log(template,"scaleNotification show");
+ this.notification.template(template);
+ // this.notification.template(template,{ nzDuration: 0 });
+ }
updataService(){
console.log("updataService!");
}
@@ -458,7 +470,6 @@ export class ServicesListComponent implements OnInit {
// console.log(service);
this.thisService = service;
this.healModelVisible = true;
- this.maskShow = true;
if(service.serviceDomain == "vnf"){
this.vnfParams.vnfInstanceId = service.vnfInstanceId;
this.myhttp.getVnfInfo(service.vnfInstanceId)
@@ -469,9 +480,8 @@ export class ServicesListComponent implements OnInit {
})
}
}
- healOk(){
+ healOk(templatehealstarting,templatehealSuccessFaild){
this.healModelVisible = false;
- this.maskShow = false;
// nsParams
this.nsParams.actionsHealing = this.healActions.map((item)=>{return item.value});
let additional = {};
@@ -485,13 +495,23 @@ export class ServicesListComponent implements OnInit {
let requestBody = this.thisService["serviceDomain"] == "Network Service" ? {healNsData:this.nsParams} : {healVnfData:this.vnfParams};
console.log(requestBody);
- this.healNsVnfService(this.thisService,requestBody);
- }
- healCancel(){
- this.healModelVisible = false;
- this.maskShow = false;
+ this.healNsVnfService(this.thisService, requestBody,templatehealSuccessFaild);
+ this.healNotification(templatehealstarting);
}
+ healCancel() {
+ this.healModelVisible = false;
+ }
+ healNotification(template: TemplateRef<{}>): void {
+ console.log(template,"healNotification show");
+ this.notification.template(template);
+ // this.notification.template(template,{ nzDuration: 0 });
+ }
+ healSuccessNotification(template: TemplateRef<{}>): void {
+ console.log(template,"healNotification show");
+ this.notification.template(template);
+ // this.notification.template(template,{ nzDuration: 0 });
+ }
// show detail
detailshow = false;
detailshow2 = false;
@@ -526,26 +546,46 @@ export class ServicesListComponent implements OnInit {
deleteModel(service){
this.thisService = service;
this.deleteModelVisible = true;
- this.maskShow = true;
}
- deleteOk(){
- this.deleteModelVisible = false;
- this.maskShow = false;
- if(this.thisService["serviceDomain"] == "Network Service"){
- this.deleteNsService(this.thisService);
- }else{
- this.deleteService(this.thisService);
+deleteOk(templatedeletestarting,templateDeleteSuccessFaild) {
+ this.deleteModelVisible = false;
+ if (this.thisService["serviceDomain"] == "Network Service") {
+ this.deleteNsService(this.thisService,templateDeleteSuccessFaild);
+ } else {
+ this.deleteService(this.thisService,templateDeleteSuccessFaild);
+ }
+ this.deleteNotification(templatedeletestarting);
}
- }
- deleteCancel(){
- this.deleteModelVisible = false;
- this.maskShow = false;
- }
+ deleteCancel() {
+ this.deleteModelVisible = false;
+ }
+
+ deleteNotification(template: TemplateRef<{}>): void {
+ console.log(template,"deleteNotification show");
+ this.notification.template(template);
+ // this.notification.template(template,{ nzDuration: 0 });
+ }
+ deleteSuccessNotification(template: TemplateRef<{}>): void {
+ console.log(template,"deleteSuccessNotification show");
+ this.notification.template(template);
+ // this.notification.template(template,{ nzDuration: 0 });
+ }
+ createNotification(template: TemplateRef<{}>): void {
+ console.log(template,"deleteNotification show");
+ this.notification.template(template);
+ // this.notification.template(template,{ nzDuration: 0 });
+ }
+ createSuccessNotification(template: TemplateRef<{}>): void {
+ console.log(template,"deleteSuccessNotification show");
+ this.notification.template(template);
+ // this.notification.template(template,{ nzDuration: 0 });
+ }
//ccvpn sotn createservice
parentServiceInstanceId="";
- closeCreate(obj){
+ thisCreateService = {};
+ closeCreate(obj,templateCreatestarting,templateCreateSuccessFaild) {
if(!obj){
this.createshow = false; //close
this.listDisplay = false; //close
@@ -556,10 +596,10 @@ export class ServicesListComponent implements OnInit {
console.log(obj);
let newData; //Newly created service data for the main table
- let createParams = "?customerId=" + this.customerSelected.id +
+ let createParams = "?customerId=" + this.customerSelected2.id +
"&serviceType=" + this.serviceTypeSelected2.name +
"&serviceDomain=" + this.templateTypeSelected;
- this.createService(obj, createParams).then((data) => {
+ this.createService(obj, createParams,templateCreatestarting,templateCreateSuccessFaild).then((data) => {
console.log(data)
newData = { //Newly created service data in the main form
'service-instance-id': data["serviceId"],
@@ -571,8 +611,9 @@ export class ServicesListComponent implements OnInit {
statusClass: 1001,
tips: ""
};
+ this.thisCreateService = newData;
this.tableData = [newData, ...this.tableData];
-
+ this.createNotification(templateCreatestarting);
let updata = (prodata) => {
newData.rate = prodata.progress;
newData.tips = this.listSortMasters["operationTypes"].find((its) => {
@@ -591,6 +632,7 @@ export class ServicesListComponent implements OnInit {
console.log(data);
newData.rate = 100;
newData.status = "Successful";
+ this.createSuccessNotification(templateCreateSuccessFaild);
newData.tips = this.listSortMasters["operationTypes"].find((its) => {
return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
})["sortValue"] + '\xa0\xa0\xa0' + newData["status"];
@@ -605,7 +647,7 @@ export class ServicesListComponent implements OnInit {
})
}
- e2eCloseCreate(obj){
+e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) {
if(!obj){
this.createshow2 = false; //
this.listDisplay = false; //
@@ -621,7 +663,7 @@ export class ServicesListComponent implements OnInit {
"&parentServiceInstanceId="+
"&uuid="+obj.service.serviceUuid+
"&invariantUuuid="+obj.service.serviceInvariantUuid;
- this.createService(obj,createParams).then((data)=>{
+ this.createService(obj, createParams,templateCreatestarting,templateCreateSuccessFaild).then((data) => {
console.log(data);
newData = { //
'service-instance-id':data["serviceId"],
@@ -632,8 +674,9 @@ export class ServicesListComponent implements OnInit {
rate:0,
tips:""
}
-
+ this.thisCreateService = newData;
this.tableData = [newData,...this.tableData];
+ this.createNotification(templateCreatestarting);
let updata = (prodata)=>{
newData.rate = prodata.progress;
newData.tips = newData["status"]+newData.rate+"%";
@@ -648,6 +691,7 @@ export class ServicesListComponent implements OnInit {
console.log(data);
newData.rate = 100;
newData.status = "Successful";
+ this.createSuccessNotification(templateCreateSuccessFaild);
newData.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"];
let hasUndone = this.tableData.some((item)=>{
return item.rate < 100;
@@ -661,7 +705,7 @@ export class ServicesListComponent implements OnInit {
}
- nsCloseCreate(obj){
+ nsCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) {
if(!obj){
this.createshow2 = false; //
this.listDisplay = false; //
@@ -684,20 +728,24 @@ export class ServicesListComponent implements OnInit {
rate:0,
tips:""
}
+ this.thisCreateService = newData;
this.tableData = [newData,...this.tableData];
+ this.createNotification(templateCreatestarting);
if(data.status == "FAILED"){
+ this.createSuccessNotification(templateCreateSuccessFaild);
console.log("create ns service failed :" + JSON.stringify(data));
newData.status = "failed";
return false;
}
let createParams = "?ns_instance_id=" + data.nsInstanceId +
- "&customerId="+this.customerSelected.id +
+ "&customerId=" + this.customerSelected2.id +
"&serviceType="+this.serviceTypeSelected2.name +
"&serviceDomain="+ this.templateTypeSelected +
"&parentServiceInstanceId=";
// step2
this.createNsService(createParams,obj.step2).then((jobid)=>{
if(jobid == "failed"){
+ this.createSuccessNotification(templateCreateSuccessFaild);
newData.status = "failed";
return false;
}
@@ -716,6 +764,7 @@ export class ServicesListComponent implements OnInit {
console.log(data);
newData.rate = 100;
newData.status = "Successful";
+ this.createSuccessNotification(templateCreateSuccessFaild);
newData.tips = this.listSortMasters["operationTypes"].find((its)=>{ return its["sortCode"]==newData["statusClass"] && its["language"]==this.language})["sortValue"]+'\xa0\xa0\xa0'+newData["status"];
let hasUndone = this.tableData.some((item)=>{
return item.rate < 100;
@@ -729,11 +778,12 @@ export class ServicesListComponent implements OnInit {
})
}
- createService(requestBody,createParams){
+ createService(requestBody, createParams,templateCreatestarting,templateCreateSuccessFaild) {
let mypromise = new Promise((res,rej)=>{
this.myhttp.createInstance(requestBody,createParams)
.subscribe((data)=>{
if(data.status == "FAILED"){
+ this.createSuccessNotification(templateCreateSuccessFaild);
console.log("create e2e service failed :" + JSON.stringify(data));
return false;
}
@@ -757,7 +807,7 @@ export class ServicesListComponent implements OnInit {
return mypromise;
}
- scaleE2eService(service,requestBody){
+ scaleE2eService(service, requestBody,templateScaleSuccessFaild) {
let id = service["service-instance-id"];
service.rate = 0;
service.status = "In Progress";
@@ -768,6 +818,7 @@ export class ServicesListComponent implements OnInit {
if(data.status == "FAILED"){
console.log("scale E2e service failed :" + JSON.stringify(data));
service.status = "failed";
+ this.scaleSuccessNotification(templateScaleSuccessFaild);
return false;
}
let obj = {
@@ -787,11 +838,12 @@ export class ServicesListComponent implements OnInit {
service.rate = 100;
service.status = "Successful";
service.tips = "Scaling"+ '\xa0\xa0\xa0' + service["status"];
+ this.scaleSuccessNotification(templateScaleSuccessFaild);
})
})
}
- healNsVnfService(service,requestBody){
+ healNsVnfService(service, requestBody,templatehealSuccessFaild) {
console.log(service);
service.rate = 0;
service.status = "In Progress";
@@ -803,6 +855,7 @@ export class ServicesListComponent implements OnInit {
if(data.status == "FAILED"){
console.log("heal nsvnf service failed :" + JSON.stringify(data));
service.status = "failed";
+ this.healSuccessNotification(templatehealSuccessFaild);
return false;
}
let jobid = data.jobId;
@@ -821,11 +874,12 @@ export class ServicesListComponent implements OnInit {
service.rate = 100;
service.status = "Successful";
service.tips = "Healing" + service["status"];
+ this.healSuccessNotification(templatehealSuccessFaild);
});
})
}
- deleteService(service){
+ deleteService(service,templateDeleteSuccessFaild) {
let allprogress = {}; //
let querypros = []; //
service.rate = 0;
@@ -871,6 +925,7 @@ export class ServicesListComponent implements OnInit {
service.rate = 100;
service.status = "Successful";
service.tips = "Deleting" + service.status;
+ this.deleteSuccessNotification(templateDeleteSuccessFaild);
let hasUndone = this.tableData.some((item)=>{
return item.rate < 100;
})
@@ -882,7 +937,7 @@ export class ServicesListComponent implements OnInit {
})
})
}
- deleteNsService(service){
+ deleteNsService(service,templateDeleteSuccessFaild) {
service.rate = 0;
service.status = "In Progress";
service.tips = "Deleting";
@@ -915,12 +970,17 @@ export class ServicesListComponent implements OnInit {
service.rate = 100;
service.status = "Successful";
service.tips = "Deleting" + service["status"];
+ this.deleteSuccessNotification(templateDeleteSuccessFaild);
if(data.status == "FAILED"){
console.log("delete ns service failed :" + JSON.stringify(data));
service.status = "failed";
service.tips = "Deleting" +'\xa0\xa0\xa0' + service["status"];
+ this.deleteSuccessNotification(templateDeleteSuccessFaild);
return false;
}
+ console.log(service,"deleteservice");
+ console.log(this.thisService,"thisService");
+ this.deleteSuccessNotification(templateDeleteSuccessFaild);
let hasUndone = this.tableData.some((item)=>{
return item.rate < 100;
})