diff options
Diffstat (limited to 'usecaseui-portal/src')
6 files changed, 407 insertions, 88 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">* </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 {{"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">* </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'] }} {{"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> + </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">* </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 {{"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'] }} {{"i18nTextDefine_InstanceCreationStarting" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="thisCreateService['serviceDomain'] == 'E2E Service'">E2E {{"i18nTextDefine_InstanceCreationStarting" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="thisCreateService['serviceDomain'] == 'Network Service'">NS {{"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'] }} {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Successful'">E2E {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Successful'">NS {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Failed'">{{ thisCreateService['serviceDomain'] }} {{"i18nTextDefine_InstanceCreationFailed" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Failed'">E2E {{"i18nTextDefine_InstanceCreationFailed" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Failed'">NS {{"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'] }} {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Successful'">E2E {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *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" | translate}} + </div> + <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Failed'">E2E {{"i18nTextDefine_InstanceTeminationFailed" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Failed'">NS {{"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 {{"i18nTextDefine_InstanceScaledSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">E2E {{"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 {{"i18nTextDefine_InstanceHealedSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">NS {{"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 {{"i18nTextDefine_InstanceUpdatedSuccessfully" | translate}}</div> + <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">CCVPN {{"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; }) diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json index 208c932a..3983d099 100644 --- a/usecaseui-portal/src/assets/i18n/cn.json +++ b/usecaseui-portal/src/assets/i18n/cn.json @@ -1,8 +1,4 @@ { - "Language":"--:", - "zh":"中文", - "en":"英文", - "app-component":"--:", "i18nTextDefine_Home":"首页", "i18nTextDefine_Customer":"用户", @@ -69,6 +65,7 @@ "i18nTextDefine_cause":"原因", "i18nTextDefine_action":"动作", "i18nTextDefine_actionvminfo":"操作虚拟机信息", + "i18nTextDefine_Update":"更新", "i18nTextDefine_InstanceCreationStarting":"创建开始", "i18nTextDefine_InstanceCreatedSuccessfully":"创建成功", "i18nTextDefine_InstanceCreationFailed":"创建失败！", diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json index b3b90e51..255134f8 100644 --- a/usecaseui-portal/src/assets/i18n/en.json +++ b/usecaseui-portal/src/assets/i18n/en.json @@ -1,8 +1,4 @@ { - "Language":"--:", - "zh":"Chinese", - "en":"English", - "app-component":"--:", "i18nTextDefine_Home":"Home", "i18nTextDefine_Customer":"Customer", @@ -69,6 +65,7 @@ "i18nTextDefine_cause":"cause", "i18nTextDefine_action":"action", "i18nTextDefine_actionvminfo":"actionvminfo", + "i18nTextDefine_Update":"Update", "i18nTextDefine_InstanceCreationStarting":"instance creation is starting.", "i18nTextDefine_InstanceCreatedSuccessfully":"instance was created successfully.", "i18nTextDefine_InstanceCreationFailed":"instance creation failed!!!", @@ -85,7 +82,6 @@ "i18nTextDefine_InstanceUpdatedSuccessfully":"instance was updated successfully.", "i18nTextDefine_InstanceUpdateFailed":"instance update failed!!!", - "ccvpn-creation-component":"--:", "i18nTextDefine_InstanceCreation":"Instance Creation", "i18nTextDefine_InstanceTopology":"Instance Topology", |