diff options
| author |   cyuamber <xuranyjy@chinamobile.com> | 2019-08-22 16:55:57 +0800 |
|---|---|---|
| committer | cyuamber <xuranyjy@chinamobile.com> | 2019-08-22 16:56:09 +0800 |
| commit | d0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch) | |
| tree | b3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/services/services-list | |
| parent | 56923755c761897cc86ca2457667fcc3e6a0e43f (diff) | |
feat: change the project structure and add mock data function
Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/services/services-list')
5 files changed, 0 insertions, 2735 deletions
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css deleted file mode 100644 index 0a7f92eb..00000000 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.css +++ /dev/null @@ -1,145 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.action { - margin-bottom: 20px; -} -.action span { - display: inline-block; - font: 700 14px "Arial"; - color: #4c5e70; -} -.action nz-dropdown { - vertical-align: middle; -} -.action nz-dropdown :hover { - border-color: #147dc2; -} -.action nz-dropdown button { - width: 165px; - height: 30px; - background-color: #eceff4; - text-align: left; - border-color: #9fa9ab; -} -.action nz-dropdown button span { - font-weight: 400; - display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; -} -.action nz-dropdown button i { - position: absolute; - top: 10px; - right: 10px; -} -.action .create { - float: right; - height: 30px; - padding: 0 10px; -} -.action .create span { - color: #fff; - font-weight: 400; -} -.list { - background-color: #fff; - border-radius: 5px; - padding: 10px; -} -.list nz-table tbody td span.active { - font-size: 14px; - color: #147dc2; -} -.list nz-table tbody td span.closed { - font-size: 14px; - color: red; -} -.list nz-table tbody td span.onboarding { - font-size: 12px; - color: #147dc2; -} -.list nz-table tbody td span.updating { - font-size: 12px; - color: blue; -} -.list nz-table tbody td span.deleting { - font-size: 12px; - color: red; -} -.list nz-table tbody td span.creating { - font-size: 12px; - color: green; -} -.list nz-table tbody td span.scaling { - font-size: 12px; - color: purple; -} -.list nz-table tbody td span.healing { - font-size: 12px; - color: orangered; -} -.list nz-table tbody td i.anticon { - cursor: pointer; - font-size: 18px; - padding: 2px; -} -.list nz-table tbody td i.anticon:hover { - color: #147dc2; -} -.list nz-table tbody td .cannotclick { - pointer-events: none; - color: #aaa; - opacity: 0.6; -} -.list nz-table tbody tr.childtr td { - font-size: 12px; - color: #147dc2; -} -.detailComponent { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100vh; - background-color: #f3f3f3; - overflow-y: auto; - padding: 20px 32px; - z-index: 3; -} -.createComponent { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100vh; - background-color: #f3f3f3; - overflow-y: auto; - padding: 20px 32px; - z-index: 3; -} 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 deleted file mode 100644 index d47b342c..00000000 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ /dev/null @@ -1,769 +0,0 @@ -<!-- - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. ---> -<div class="action ant-tabs-bar"> - - <span> - <i class="icon"> - <img src="../../../assets/images/customer.png" alt=""> - </i> - {{"i18nTextDefine_Customer" | translate}} : - </span> - <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> - <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i> - </button> - <ul nz-menu> - <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList"> - <a title="{{item.name}}">{{item.name}}</a> - </li> - </ul> - </nz-dropdown> - - <span> - <i class="icon"> - <img src="../../../assets/images/service-type.png"alt=""> - </i> - {{"i18nTextDefine_ServiceType" | translate}} : - </span> - <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> - <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i> - </button> - <ul nz-menu> - <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList"> - <a title="{{item.name}}">{{item.name}}</a> - </li> - </ul> - </nz-dropdown> - - <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"> - <i *ngIf="width>1200" class="anticon anticon-plus"></i> - <span> {{"i18nTextDefine_Create" | translate}} </span> - </button> - <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} " - (nzOnCancel)="handleCancel()" - (nzOnOk)="handleOk()" nzClassName="serviceCreationModel" - nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} " - nzOkText=" {{'i18nTextDefine_modelOk' | translate}} "> - <div class="select-list"> - <span style="display:inline-block;"> {{"i18nTextDefine_Customer" | translate}} : </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear - (ngModelChange)="customerChange()"> - <nz-option *ngFor="let item of customerList2" [nzValue]="item.name" [nzLabel]="item.name"></nz-option> - </nz-select> - </div> - <div class="select-list"> - <span style="display:inline-block;"> {{"i18nTextDefine_ServiceType" | translate}} : </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear - (ngModelChange)="serviceTypeChange()"> - <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name" - [nzLabel]="item.name"></nz-option> - </nz-select> - </div> - <div class="select-list"> - <span style="display:inline-block;"> {{"i18nTextDefine_UseCase" | translate}} : </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="templateTypeSelected" nzAllowClear - (ngModelChange)="choseTemplateType()"> - <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> --> - <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option> - <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option> - <nz-option nzValue="E2E Service" nzLabel="E2E Service"></nz-option> - <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option> - </nz-select> - </div> - - <div class="select-list"> - <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Template" | translate}} : </span> - <nz-select style="width: 176px;float: right;" [(ngModel)]="template1" nzAllowClear> - <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option> - </nz-select> - </div> - <div *ngIf="templateTypeSelected == 'E2E Service'"> - <div class="select-list"> - <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> - </div> - </div> - <div *ngIf="templateTypeSelected == 'E2E Service'"> - <div class="check-box" style="margin:30px; height: 50px"> - <input class="check-box-style" style="zoom: 1.8; width: 70px" type="checkbox" - [(ngModel)]="isSol005Interface" value="true" nzAllowClear> - <label class="label" style="font-size: 20px; color: rgb(60,79,140,0.5)">Sol005</label> - </div> - </div> - <div class="select-list" style="color: red;margin-left: 66px;" *ngIf="temParametersTips"> - {{"i18nTextDefine_Templateparsingfailed" | translate}} - </div> - </nz-modal> -</div> -<nz-layout style=" padding: 20px 32px; "> - <ul class="top-num"> - <li *ngFor="let item of serviceMunber" class="top-list"> - <span class="round">{{item.serviceDomain}}</span> - <div class="top-list-text"> - <p> - <span>{{item.failed}}</span> - <span> {{"i18nTextDefine_Failed" | translate}} </span> - </p> - <p> - <span>{{item.Success}}</span> - <span> {{"i18nTextDefine_Success" | translate}} </span> - </p> - <p> - <span>{{item.InProgress}}</span> - <span> {{"i18nTextDefine_InProgress" | translate}} </span> - </p> - </div> - <p class="service-description"> {{item.detailName | translate}} </p> - </li> - </ul> - <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay == true}"> - <nz-table *ngIf="1" - #nzTable [nzData]="tableData" - nzShowSizeChanger - [nzFrontPagination]="false" - [nzShowQuickJumper]="true" - [nzPageSizeOptions]="[5,10,15,20]" - [nzTotal]='total' - [(nzPageSize)]="pageSize" - [(nzPageIndex)]='pageIndex' - [nzLoading]="loading" - [nzSize]="'middle'" - [nzScroll]="{ y: '58vh' }" - (nzPageIndexChange)="searchData()" - (nzPageSizeChange)="searchData(true)"> - <thead> - <tr> - <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}}</th> - <th nzWidth="5%"></th> - <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}}</th> - <th nzWidth="20%"> {{"i18nTextDefine_InstanceID" | translate}}</th> - <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}}</th> - <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}}</th> - <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}}</th> - </tr> - </thead> - <tbody> - <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index"> - <tr> - <td>{{pageSize*(pageIndex-1) + i+1}}</td> - <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td> - <td>{{data["service-instance-name"] || data.nsName}}</td> - <td>{{data["service-instance-id"] || data.nsInstanceId}}</td> - <td> - <p [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN','voLTEColor':data.serviceDomain=='voLTE type'}"> - {{data.serviceDomain}} - </p> - </td> - <td> - <span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding', - 'updating':data.statusClass=='Updating','deleting':data.statusClass=='1002','creating':data.statusClass=='1001', - 'scaling':data.statusClass=='1003','healing':data.statusClass=='1004'}" - *ngIf="data.tips != 'Available' && data.tips != 'Unavailable'">{{data.tips}}</span> - <span *ngIf="data.tips == 'Available' " style="margin-left: 10px"> - <img src="assets/images/wancheng-icon.png" alt="Available"> - </span> - <span *ngIf="data.tips == 'Unavailable' " style="margin-left: 10px"> - <img src="assets/images/shibai-icon.png" alt="Unavailable"> - </span> - <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate" [nzShowInfo]="false" - nzStatus="active"></nz-progress> - </td> - <td> - <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" - class="anticon anticon-bars" (click)="serviceDetail(data,1)"></i> - <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-delete" - (click)="deleteModel(data)"></i> - <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-ellipsis" - (click)="iconMoreShow(data,tableData)" style="transform: rotate(90deg);"></i> - - <ul *ngIf="data.iconMore==true " class="icon-more"> - <li (click)="scaleService(data)" - [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"> - <i class="anticon anticon-scale"></i> - <span> {{"i18nTextDefine_Scale" | translate}} </span> - </li> - <li (click)="serviceDetail(data,2)" - [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"> - <i class="anticon anticon-update"></i> - <span> {{"i18nTextDefine_Update" | translate}} </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'}" - *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> --> - </td> - </tr> - <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances"> - <td></td> - <td></td> - <td>{{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}}</td> - <td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td> - <td> - <p [ngClass]="{'vnfColor':item.serviceDomain=='vnf','siteColor':item.serviceDomain=='SITE','SDWANColor':item.serviceDomain=='SDWAN'}"> - {{item.serviceDomain}} - </p> - </td> - <td> - <span [ngClass]="{'healing':data.statusClass=='1004'}">{{item.tips}}</span> - <nz-progress *ngIf=" item.status == 'In Progress' " [nzPercent]="item.rate"></nz-progress> - </td> - <td> - <i [ngClass]="{'cannotclick':data.serviceDomain!='Network Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}" - class="anticon anticon-reload" (click)="healService(item)"></i> - </td> - </tr> - </ng-template> - </tbody> - </nz-table> - - <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> - <div *ngFor="let item of e2e_nsData" style="margin-top: 20px"> - <h3>{{ item.netWorkServiceName }}</h3> - <div class="e2eScaleContent"> - <span class="e2eScaleLable"> {{"i18nTextDefine_ScaleType" | translate}} :</span> - <nz-select style="width: 165px;" [(ngModel)]="item.scaleType"> - <nz-option nzValue="SCALE_NS" nzLabel="SCALE_NS"></nz-option> - <nz-option nzValue="SCALE_VNF" nzLabel="SCALE_VNF"></nz-option> - </nz-select> - </div> - <div class="e2eScaleContent"> - <span class="e2eScaleLable"> {{"i18nTextDefine_AspectId" | translate}} :</span> - <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string"> - </div> - <div class="e2eScaleContent"> - <span class="e2eScaleLable"> {{"i18nTextDefine_Number_Of_Steps" | translate}} :</span> - <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100" - nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number> - </div> - <div class="e2eScaleContent"> - <span class="e2eScaleLable"> {{"i18nTextDefine_ScalingDirection" | translate}} :</span> - <nz-select style="width: 165px;" nzPlaceHolder="Chose" [(ngModel)]="item.scalingDirection"> - <nz-option nzValue="SCALE_IN" nzLabel="SCALE_IN"></nz-option> - <nz-option nzValue="SCALE_OUT" nzLabel="SCALE_OUT"></nz-option> - </nz-select> - </div> - </div> - - <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 class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> - </div> - </div> - </ng-template> - </nz-modal> - - <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-name"] || - thisService["nsInstanceName"] }} - </div> - </div> - <div class="question"> - <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4> - <div class="deleteModelContent">{{ thisService["service-instance-id"] || - thisService["nsInstanceId"] }} - </div> - </div> - <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> - <div class="question"> - <h4> {{"i18nTextDefine_terminationType" | translate}} :</h4> - <nz-select style="width: 306px;" [(ngModel)]="terminationType"> - <nz-option nzValue="graceful" nzLabel=" {{'i18nTextDefine_graceful' | translate}} "></nz-option> - <nz-option nzValue="forceful" nzLabel=" {{'i18nTextDefine_forceful' | translate}} "></nz-option> - </nz-select> - </div> - <div class="question"> - <h4 *ngIf="terminationType=='graceful'"> {{"i18nTextDefine_gracefulTerminationTimeout" | translate}} - :</h4> - <input *ngIf="terminationType=='graceful'" style="width: 306px;" nz-input - [(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}} " - (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> - <div class="healModelContent" title="{{ thisService['service-instance-id'] || thisService['nsInstanceId'] || - thisService['vnfInstanceId']}}"> {{ thisService["service-instance-id"] || - thisService["nsInstanceId"] || - thisService["vnfInstanceId"]}} - </div> - </div> - <!-- NS --> - <div *ngIf="thisService['serviceDomain'] == 'Network Service'"> - <div class="question"> - <p class="heal-label"> {{"i18nTextDefine_degreeHealing" | translate}} :</p> - <nz-select style="width: 200px;height:42px;margin-left: 15px;border-radius: 6px" - [(ngModel)]="nsParams.degreeHealing"> - <nz-option nzValue="HEAL_RESTORE" nzLabel="HEAL_RESTORE"></nz-option> - <nz-option nzValue="HEAL_QOS" nzLabel="HEAL_QOS"></nz-option> - <nz-option nzValue="HEAL_RESET" nzLabel="HEAL_RESET"></nz-option> - <nz-option nzValue="PARTIAL_HEALING" nzLabel="PARTIAL_HEALING"></nz-option> - </nz-select> - </div> - <div> - <span style="display:inline-block;"> {{"i18nTextDefine_actionsHealing" | translate}} :</span> - <button nz-button [nzType]="'default'" (click)="addActionsHealing()"><i - class="anticon anticon-plus-circle-o"></i></button> - <br> - <div *ngFor="let item of healActions;let i = index;" style="display:inline-block;"> - <input style="width: 165px;" nz-input [(ngModel)]="item.value"> - <button nz-button [nzType]="'dashed'" (click)="minusActionsHealing(i)"><i - class="anticon anticon-minus-circle-o"></i></button> - - </div> - </div> - <span style="display:inline-block;width:50%;"> {{"i18nTextDefine_healScript" | translate}} :</span> - <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript"> - <div> - <span style="display:inline-block;"> {{"i18nTextDefine_additionalParamsforNs" | translate}} :</span> - <button nz-button [nzType]="'default'" (click)="addNsAdditional()"><i - class="anticon anticon-plus-circle-o"></i></button> - <br> - <div *ngFor="let item of nsAdditional;let i = index;"> - Key: <input style="width: 165px;" nz-input [(ngModel)]="item.key"> - Value: <input style="width: 165px;" nz-input [(ngModel)]="item.value"> - <button nz-button [nzType]="'dashed'" (click)="minusNsAdditional(i)"><i - class="anticon anticon-minus-circle-o"></i></button> - </div> - </div> - </div> - <!-- vnf --> - <div *ngIf="thisService['serviceDomain'] == 'vnf'" style="clear: both"> - <div class="heal-question"> - <p class="heal-label"> {{"i18nTextDefine_cause" | translate}} :</p> - <input nz-input [(ngModel)]="vnfParams.cause" class="heal-input"> - </div> - <div class="heal-question"> - <p class="heal-label"> {{"i18nTextDefine_action" | translate}} :</p> - <input nz-input [(ngModel)]="vnfParams.additionalParams.action" class="heal-input"> - </div> - <div class="heal-question"> - <p class="heal-label"> {{"i18nTextDefine_actionvminfo" | translate}}:</p> - <nz-select - style=" float: right;width: 200px;margin-left: 15px;border-radius: 6px;margin-right: 30px" - [(ngModel)]="vmSelected"> - <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option> - </nz-select> - </div> - </div> - - <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_InstanceHealingStarting" | 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> - - <!-- 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 class="close-icons">{{"i18nTextDefine_Close" | translate}}</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 class="close-icons">{{"i18nTextDefine_Close" | translate}}</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 class="close-icons">{{"i18nTextDefine_Close" | translate}}</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 class="close-icons">{{"i18nTextDefine_Close" | translate}}</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 class="close-icons">{{"i18nTextDefine_Close" | translate}}</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 class="close-icons">{{"i18nTextDefine_Close" | translate}}</div> - </div> - </div> - </ng-template> - </div> - <div class="detailComponent" *ngIf="detailshow"> - <app-ccvpn-detail [detailParams]="detailData" - [upDateShow]="upDateShow" - (closeUpdate)="closeCCVPNUpdate($event,templateUpdateSuccessFaild)" - (closeDetail)="detailshow = false;listDisplay = false;"></app-ccvpn-detail> - </div> - <div class="detailComponent" *ngIf="detailshow2"> - <app-e2e-detail [detailParams]="detailData" - (closeDetail)="detailshow2 = false;listDisplay = false;"></app-e2e-detail> - </div> - <div class="createComponent" *ngIf="createshow"> - <app-ccvpn-creation - [createParams]="createData" - [ccvpn_temParametersContent]="ccvpn_temParametersContent" - (closeCreate)="closeCreate($event,templateCreatestarting,templateCreateSuccessFaild)"> - </app-ccvpn-creation> - </div> - <div class="createComponent" *ngIf="createshow2"> - <app-e2e-creation - [createParams]="createData" - [e2e_ns_temParametersContent]="e2e_ns_temParametersContent" - (nsCloseCreate)="nsCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)" - (e2eCloseCreate)="e2eCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)"> - </app-e2e-creation> - </div> - <!--</div>--> -</nz-layout> -<div class="loading" *ngIf="loadingAnimateShow"> - <img src="./assets/images/loading-animate2.gif" alt="loading"> - <p>Please wating……</p> -</div> diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less deleted file mode 100644 index 2a19e5bb..00000000 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ /dev/null @@ -1,433 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -@media screen and (min-width: 1050px){ - .action{ - span:nth-of-type(2){ - margin-left: 40px; - } - } - -} -@media screen and (max-width: 1050px){ - .action{ - span:nth-of-type(2){ - margin-left: 20px; - } - } - -} -@media screen and (max-width: 1300px){ - .top-list-text{ - p{ - width: 200px; - } - } -} -@media screen and (min-width: 1200px){ - .round{ - top:45%; - left: 50px; - margin-top: -40px; - } - -} - -@media screen and (max-width: 1200px){ - .round{ - top:12%; - left: 12%; - } - .top-list-text{ - p{ - width: 170px; - } - } - -} - - -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 20px; -} -.ant-tabs-bar{ - margin-bottom: 0!important; -} -.ant-dropdown-menu{ - min-height:40px; - max-height: 200px; - overflow: auto; -} -.ant-dropdown-menu-item{ - a{ - max-width: 165px; - overflow: hidden; - text-overflow: ellipsis; - } -} -.mask{ - width: 100%; - height: 100%; - position: absolute; - z-index: 999; - background: rgba(0, 0, 0, 0.65); - top:0; -} -.loading{ - width: 100%; - height: 100%; - position: fixed; - top: 0; - margin-top: -50px; - margin-left: -50px; - z-index: 1001; - text-align: center; - background: transparent; - p{ - color: #0DA9E2; - text-align: center; - position: absolute; - width: 300px; - height: 30px; - line-height: 30px; - top: 71%; - left: 36%; - margin-top: -150px; - margin-left: -150px; - } - img{ - width: 300px; - height: 300px; - position: absolute; - top: 50%; - left: 36%; - margin-top: -150px; - margin-left: -150px; - } -} -.action { - margin-bottom: 15px; - padding: 28px; - background: #ffffff; - position: relative; - span { - display: inline-block; - font: 700 14px "Arial"; - color: #3C4F8C; - margin-right: 5px; - .icon{ - margin-right: 10px; - } - } - nz-dropdown { - width: 20%; - vertical-align: middle; - background-color:#ffffff; - :hover{ - border-color: #48C6EF; - } - button { - width: 100%; - max-width:165px; - height: 42px; - background-color:#ffffff; - text-align: left; - border-color: #EEEEEE; - span { - font-weight: 400; - color: #3C4F8C; - display: inline-block; - width: 120px; - overflow: hidden; - text-overflow: ellipsis; - padding-top: 2px; - } - i { - position: absolute; - top: 10px; - right: 10px; - } - } - } - //The style in the drop-down box is in style.less, and the drop-down box is extra temporary generated in the body. - .create { - position: absolute; - right: 3%; - top:50%; - height:42px; - background:#0DA9E2; - border-radius:6px; - margin-top: -15px; - i{ - transform: scale(1.5); - line-height: 15px; - margin-right: 5px; - } - span { - color: #fff; - font-weight: 400; - font-size: 18px; - } - .anticon-plus-circle-o{ - font-size: 18px; - } - } - .create.ant-btn.ant-btn-primary{ - border: none; - } - .create:hover{ - background:#09C6E2; - } - -} -nz-layout{ - padding: 20px 32px; - .top-num{ - - width: 100%; - display: flex; - justify-content: space-around; - .top-list{ - position: relative; - width:32%; - max-width:400px; - height:170px; - background:url("../../../assets/images/servicelist-e2e.png") no-repeat; - background-size: 100% 100%; - border-radius:2px; - .round{ - position: absolute; - width: 60px; - height: 60px; - line-height: 60px; - text-align: center; - background:#E0EDFF; - border:2px solid rgba(224,237,255,1); - border-radius: 50%; - font-size:16px; - font-family:ArialMT; - color:#3C4F8C; - transition: .5s; - } - .top-list-text{ - position: absolute; - text-align: right; - line-height: 20px; - right: 12%; - color: #fff; - p{ - height: 28px; - margin-bottom: 0; - padding-left: 5px; - font-size: 14px; - clear: both; - span{ - display: inline-block; - float: right; - font-weight: 500; - text-align: right; - } - span:nth-child(1){ - font-size: 18px; - margin-left: 15px; - } - span:nth-child(2){ - width: 85px; - font-size: 16px; - } - } - p:nth-child(1){ - margin-top: 25px; - } - .service-description{ - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: #3C4F8C; - - } - } - } - - } -} -.list { - background-color: #fff; - border-radius: 5px; - padding: 10px; - nz-table { - tbody { - td { - position: relative; - span.active { - font-size: 14px; - color: #147dc2; - } - span.closed { - font-size: 14px; - color: red; - } - span.onboarding{ - font-size: 12px; - color: #147dc2; - } - span.updating{ - font-size: 12px; - color: blue; - } - span.deleting { - font-size: 12px; - color: red; - } - span.creating { - font-size: 12px; - color: green; - } - span.scaling { - font-size: 12px; - color: purple; - } - span.healing { - font-size: 12px; - color: orangered; - } - i.anticon { - cursor: pointer; - font-size: 18px; - padding: 2px; - &:hover{ - color: #147dc2; - } - } - .cannotclick { - pointer-events: none; - color: #aaa; - opacity: 0.6; - } - .icon-more{ - position: absolute; - width: 115px; - height: 90px; - top:50px; - padding:15px 0 0 15px; - background: #ffffff; - z-index: 2; - border-radius: 5px; - box-shadow: 0px 10px 15px 2px rgba(247, 247, 247, 0.5); - li{ - margin-bottom:10px; - line-height: 20px; - text-align: left; - cursor: pointer; - .anticon{ - width: 18px; - height: 18px; - background: url("../../../assets/images/scale.png") no-repeat; - } - .anticon.anticon-update{ - background: url("../../../assets/images/update.png") no-repeat; - } - span{ - margin-left: 5px; - } - } - li:hover{ - color: #0DA9E2; - .anticon{ - background: url("../../../assets/images/scale-active.png") no-repeat; - } - .anticon.anticon-update{ - background: url("../../../assets/images/update-active.png") no-repeat; - } - } - } - } - tr.childtr { - td { - font-size: 12px; - color: #147dc2; - } - } - } - } -} - - -.detailComponent { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100vh; - background-color: #f3f3f3; - overflow-y: auto; - z-index: 3; -} -.createComponent { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100vh; - background-color: #F7F8FC; - overflow-y: auto; - z-index: 3; -} - -.e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{ - width:120px; - height: 34px; - line-height: 34px; - margin-bottom: 0!important; - text-align: center; - background:rgba(158, 158, 158, 0.38); - border-radius:4px -} - -.vnfColor,.siteColor,.SDWANColor{ - color:rgba(60,79,140,0.5); - width:120px; - height: 34px; - line-height: 34px; - margin-bottom: 0!important; - text-align: center; - background:rgba(238,238,238,1); - border-radius:4px; -} - -.select-list{ - width: 320px; - height: 32px; - line-height: 32px; - margin: 35px auto; -} -.select-list>span{ - text-align: right; - width: 110px!important; - line-height: 32px; -} - -.listdisplay{ - display: none; -}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts deleted file mode 100644 index 61440dc3..00000000 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ServicesListComponent } from './services-list.component'; - -describe('ServicesListComponent', () => { - let component: ServicesListComponent; - let fixture: ComponentFixture<ServicesListComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ ServicesListComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ServicesListComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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 deleted file mode 100644 index 3a07c1fe..00000000 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts +++ /dev/null @@ -1,1363 +0,0 @@ -/* - Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. - - Licensed under the Apache License, Version 2.0 (the "License"); - you may not use this file except in compliance with the License. - You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. -*/ -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'; -import { Observable } from 'rxjs/Rx'; - -@Component({ - selector: 'app-services-list', - templateUrl: './services-list.component.html', - styleUrls: ['./services-list.component.less'], - animations: [slideToRight] -}) -export class ServicesListComponent implements OnInit { - @HostBinding('@routerAnimate') routerAnimateState; - - public width:number = document.documentElement.clientWidth; - - constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) { - } - - ngOnInit() { - this.getallCustomers(); - Observable.fromEvent(window, 'resize').subscribe((event) => { - this.width = document.documentElement.clientWidth - }); - } - - // customer servicetype - isSol005Interface = false; - orchestratorList = []; - customerList = []; - customerList2 = []; - customerSelected = { name: null, id: null }; - customerSelected2 = { name: null, id: null }; - serviceTypeList = []; - serviceTypeList2 = []; - serviceTypeSelected = { name: '' }; - serviceTypeSelected2 = { name: '' }; - serviceTypeSelectedName = ""; - templateTypeSelected = "CCVPN"; - orchestratorSelected = { name: null, id: null }; - listSortMasters = JSON.parse(sessionStorage.getItem('listSortMasters')); - language = sessionStorage.getItem("DefaultLang"); - iconMore = false; - loadingAnimateShow = false; - serviceMunber = [ // top: E2E/NS/CCVPN data - { - "serviceDomain": "E2E", - "Success": 0, - "failed": 0, - "InProgress": 0, - "detailName": "i18nTextDefine_End_To_End_Service" - }, - { - "serviceDomain": "NS", - "Success": 0, - "failed": 0, - "InProgress": 0, - "detailName": "i18nTextDefine_Network_Service" - }, - { - "serviceDomain": "CCVPN", - "Success": 0, - "failed": 0, - "InProgress": 0, - "detailName": "i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN" - } - ]; - - //The icon behind each row of data in the table expands - iconMoreShow(data, tableData) { - tableData.map((its) => { - if (its["service-instance-id"] == data["service-instance-id"]) { - if (its["iconMore"] == false) { - data.iconMore = true; - } else if (its["iconMore"] == true) { - data.iconMore = false; - } - } else { - its["iconMore"] = false; - } - }) - } - - //Get all the customers - getallCustomers() { - console.log(this.language, "this.language"); - this.myhttp.getAllCustomers() - .subscribe((data) => { - this.customerList = data.map((item) => { - return { name: item["subscriber-name"], id: item["global-customer-id"] } - }); - if (this.customerList.length == 0) { - console.log("customerList.length == 0", this.customerList); - return false; - } - this.customerList2 = data.map((item) => { - return { name: item["subscriber-name"], id: item["global-customer-id"] } - }); - if (this.customerList2.length == 0) { - return false; - } - this.customerSelected = this.customerList[0]; - this.choseCustomer(this.customerSelected); - }) - } - - getallOrchestrators() { - this.myhttp.getAllOrchestrators() - .subscribe((data) => { - this.orchestratorList = data.map((item) => { - return { name: item["name"], id: item["name"] } - }); - if (this.orchestratorList.length == 0) { - console.log("orchestratorList.length == 0", this.orchestratorList); - return false; - } - this.orchestratorSelected = this.orchestratorList[0]; - }) - } - - choseCustomer(item) { - this.customerSelected = item; - this.myhttp.getServiceTypes(this.customerSelected) - .subscribe((data) => { - this.serviceTypeList = data.map((item) => { - return { name: item["service-type"] } - }); - - if (this.serviceTypeList.length == 0) { - console.log("serviceTypeList.length == 0", this.serviceTypeList); - return false; - } - - this.serviceTypeSelected = this.serviceTypeList[0]; - - this.choseServiceType(this.serviceTypeSelected); - }) - } - - choseServiceType(item) { - this.serviceTypeSelected = item; - this.getTableData(); - } - - - // Create modal box 2 (dialog box) create ------------------------------- - isVisible = false; - - customerChange(): void { - this.getServiceType(this.customerSelected2); - } - - getServiceType(customerSelected2) { - this.myhttp.getServiceTypes(customerSelected2) - .subscribe((data) => { - this.serviceTypeList2 = data.map((item) => { - return { name: item["service-type"] } - }); - if (this.serviceTypeList2.length == 0) { - console.log("serviceTypeList.length == 0", this.serviceTypeList2); - return false; - } - this.getAlltemplates(); - }) - } - - serviceTypeChange(): void { - this.serviceTypeSelected2.name = this.serviceTypeSelectedName - } - - createModal(): void { - this.isVisible = true; - this.getallOrchestrators(); - this.customerSelected2 = this.customerSelected; - this.serviceTypeSelectedName = this.serviceTypeSelected.name; - this.serviceTypeSelected2 = Object.assign({}, this.serviceTypeSelected); - this.getServiceType(this.customerSelected2); - } - - choseTemplateType() { - this.getallOrchestrators(); - this.getAlltemplates(); - } - - templates = []; - template1 = { name: null }; - - getAlltemplates() { - this.myhttp.getAllServiceTemplates(this.templateTypeSelected) - .subscribe((data) => { - this.templates = data; - if (this.templateTypeSelected == "Network Service") { - this.templates = data.filter((d) => { - return typeof d.packageInfo.csarName == "string"; - }).map((item) => { - let cName = item.packageInfo.csarName.split("/").reverse()[0]; - return { name: cName, id: item.csarId, packageInfo: item.packageInfo } - }); - } - this.template1 = this.templates[0]; - }, (err) => { - console.log(err); - }) - } - - createshow = false; - createshow2 = false; - listDisplay = false; - createData: Object = {}; - - handleOk(): void { - if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") { - this.createData = { - commonParams: { - customer: this.customerSelected, - serviceType: this.serviceTypeSelected2, - templateType: this.templateTypeSelected - }, template: this.template1 - }; - } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") { - this.createData = { - commonParams: { - customer: this.customerSelected, - serviceType: this.serviceTypeSelected2, - templateType: this.templateTypeSelected - }, - template: this.template1, - orchestrator: this.orchestratorSelected, - isSol005Interface: this.isSol005Interface - }; - } - this.getTemParameters(); - } - - handleCancel(): void { - this.isVisible = false; - this.loadingAnimateShow = false; - } - - temParametersTips = false; - ccvpn_temParametersContent: any; - e2e_ns_temParametersContent: any; - - getTemParameters() { - let chosedtemplates = this.createData["template"]; - let types = this.createData["commonParams"].templateType; - if (types == "E2E Service") { - types = "e2e"; - } else if (types == "Network Service") { - types = "ns"; - } - this.loadingAnimateShow = true; - this.myhttp.getTemplateParameters(types, chosedtemplates) - .subscribe((data) => { - this.loadingAnimateShow = false; - if (data.status == "FAILED") { - this.temParametersTips = true; - this.isVisible = true; - console.log("Template parsing Failed"); - } else { - this.isVisible = false; - this.temParametersTips = false; - if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") { - this.ccvpn_temParametersContent = data; - this.createshow = true; - this.listDisplay = true; - } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") { - this.e2e_ns_temParametersContent = data; - this.createshow2 = true; - this.listDisplay = true; - } - } - }) - } - - //tableData - tableData = []; - pageIndex = 1; - pageSize = 10; - total = 100; - loading = false; - - getTableData() { - this.loading = true; - // Query parameter: customer serviceType Current page number, number of pages per page - let paramsObj = { - customerId: this.customerSelected.id, - serviceType: this.serviceTypeSelected.name, - currentPage: this.pageIndex, - pageSize: this.pageSize - } - this.myhttp.getServicesTableData(paramsObj) - .subscribe((data) => { - this.total = data.body.total; - this.tableData = data.body.tableList.map((item) => { - if (typeof item == "string") { - item = JSON.parse(item); - } - - item["iconMore"] = this.iconMore; - if (item["serviceDomain"] == "Network Service") { - if (item["vnfInfo"]) { - item["childServiceInstances"] = item["vnfInfo"].map((vnf) => { - vnf["serviceDomain"] = "vnf"; - return vnf; - }); - } else if (item["relationship-list"] && item["relationship-list"]["relationship"]) { - item["childServiceInstances"] = item["relationship-list"]["relationship"].filter((relate) => { - return relate["related-to"] == "generic-vnf"; - }).map((vnf) => { - let vnfInfo = { - vnfNsInstanceId: "", - vnfInstanceId: "", - vnfInstanceName: "", - serviceDomain: "vnf" - }; - vnfInfo.vnfNsInstanceId = item["nsInstanceId"] || item["service-instance-id"]; - vnfInfo.vnfInstanceId = vnf["relationship-data"].find((vnfid) => { - return vnfid["relationship-key"] == "generic-vnf.vnf-id" - })["relationship-value"]; - vnfInfo.vnfInstanceName = vnf["related-to-property"].find((vnfname) => { - return vnfname["property-key"] == "generic-vnf.vnf-name" - })["property-value"]; - return vnfInfo; - }) - } - } else { - item["childServiceInstances"] = []; - } - - // - if (item["operationResult"] == "2001") { //operationResult==2001 - item["status"] = "Available"; - item["tips"] = "Available"; - item["statusClass"] = item["operationResult"]; - } - // 2018.12.13 - else if (item["operationResult"] == "2002") { //operationResult==2002 - if (item["operationType"] == "1001" || item["operationType"] == "1002") { - // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; - item["status"] = this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == item["operationResult"] && its["language"] == this.language - })["sortValue"]; - item["tips"] = "Unavailable"; - item["statusClass"] = item["operationType"]; - } else if (item["operationType"] != "1001" && item["operationType"] != "1002") { - // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; - item["status"] = this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == item["operationResult"] && its["language"] == this.language - })["sortValue"]; - item["tips"] = "Available"; - item["statusClass"] = item["operationType"]; - } - - } - else if (item["operationResult"] == "2003") { //operationResult==2003 - // item["status"] = this.accordingState["operationResult"][item["operationResult"]]; - item["status"] = this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == item["operationResult"] && its["language"] == this.language - })["sortValue"]; - item["statusClass"] = item["operationType"]; - if (item["serviceDomain"] == "Network Service") { - let updata = (prodata) => { - item["rate"] = prodata.progress; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%"; - if (item["rate"] > 100) { - item["status"] = prodata.status; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; - } - } - let id = item["nsInstanceId"] || item["service-instance-id"]; - let jobid = item["jobId"] || item["operationId"]; - let operationType = item["operationType"]; - this.queryNsProgress(jobid, id, updata, operationType).then(() => { - item["rate"] = 100; - item["status"] = this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; - }) - } else { - let updata = (prodata) => { - item["rate"] = prodata.progress || item["rate"]; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%"; - if (item["rate"] > 100) { - item["status"] = prodata.status; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; - } - } - let obj = { - serviceId: item["service-instance-id"], - operationId: item["operationId"], - operationType: item["operationType"] - } - this.queryProgress(obj, updata).then(() => { - item["rate"] = 100; - item["status"] = this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - item["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == item["operationType"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + item["status"]; - }) - } - } - return item; - }) - this.tableData.map((item, index) => { - if (item.serviceDomain == 'E2E Service') { - if (item.operationResult == 2001) { - this.serviceMunber[0]["Success"] += 1; - } else if (item.operationResult == 2002) { - this.serviceMunber[0]["failed"] += 1; - } else if (item.operationResult == 2003) { - this.serviceMunber[0]["InProgress"] += 1; - } - } - else if (item.serviceDomain == 'Network Service') { - if (item.operationResult == 2001) { - this.serviceMunber[1]["Success"] += 1; - } else if (item.operationResult == 2002) { - this.serviceMunber[1]["failed"] += 1; - } else if (item.operationResult == 2003) { - this.serviceMunber[1]["InProgress"] += 1; - } - } - else if (item.serviceDomain == 'CCVPN') { - if (item.operationResult == 2001) { - this.serviceMunber[2]["Success"] += 1; - } else if (item.operationResult == 2002) { - this.serviceMunber[2]["failed"] += 1; - } else if (item.operationResult == 2003) { - this.serviceMunber[2]["InProgress"] += 1; - } - } - }) - this.loading = false; - }, (err) => { - console.log(err); - this.loading = false; - }) - } - - searchData(reset: boolean = false) { - this.getTableData(); - } - - thisService = {}; //The current service of the operation - e2e_nsData: Object[]; - scaleModelVisible = false; - - scaleService(service) { - this.thisService = service; - this.scaleModelVisible = true; - let paramsObj = { - customerId: this.customerSelected.id, - serviceType: this.serviceTypeSelected.name, - serviceId: service["service-instance-id"] - } - this.myhttp.getE2e_nsData(paramsObj) - .subscribe((data) => { - this.e2e_nsData = data; - }) - } - - scaleOk(templatescalestarting, templateScaleSuccessFaild) { - this.scaleModelVisible = false; - let requestBody = { - "service": { - "serviceInstanceName": this.thisService["service-instance-name"], - "serviceType": this.serviceTypeSelected.name, - "globalSubscriberId": this.customerSelected.id, - "resources": this.e2e_nsData.map((item) => { - return { - "resourceInstanceId": item["netWorkServiceId"], - "scaleType": item["scaleType"], - "scaleNsData": { - "scaleNsByStepsData": { - "aspectId": item["aspectId"], - "numberOfSteps": item["numberOfSteps"], - "scalingDirection": item["scalingDirection"] - } - } - } - }) - } - } - this.scaleE2eService(this.thisService, requestBody, templateScaleSuccessFaild); - this.scaleNotification(templatescalestarting); - } - - scaleCancel() { - this.scaleModelVisible = false; - } - - scaleNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - scaleSuccessNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - //heal - healModelVisible = false; - healActions = []; - nsAdditional = []; - nsParams = { - degreeHealing: "HEAL_RESTORE", - actionsHealing: [], - healScript: "", - additionalParamsforNs: "" - } - vnfVms = []; - vmSelected = {}; - vnfParams = { - vnfInstanceId: "", - cause: "", - additionalParams: { - action: "", - actionvminfo: { - vmid: "", - vduid: "", - vmname: "" - } - } - } - - addActionsHealing() { - this.healActions.push({ value: "" }) - } - - minusActionsHealing(index) { - this.healActions.splice(index, 1); - } - - addNsAdditional() { - this.nsAdditional.push({ key: "", value: "" }) - } - - minusNsAdditional(index) { - this.nsAdditional.splice(index, 1); - } - - healService(service) { - this.thisService = service; - this.healModelVisible = true; - if (service.serviceDomain == "vnf") { - this.vnfParams.vnfInstanceId = service.vnfInstanceId; - this.myhttp.getVnfInfo(service.vnfInstanceId) - .subscribe((data) => { - this.vnfVms = data.vnfVms; - this.vmSelected = this.vnfVms[0]; - }) - } - } - - healOk(templatehealstarting, templatehealSuccessFaild) { - this.healModelVisible = false; - // nsParams - this.nsParams.actionsHealing = this.healActions.map((item) => { - return item.value - }); - let additional = {}; - this.nsAdditional.forEach((item) => { - additional[item.key] = item.value; - }); - this.nsParams.additionalParamsforNs = JSON.stringify(additional); - // vnfParams - this.vnfParams.additionalParams.actionvminfo.vmid = this.vmSelected["vmId"]; - this.vnfParams.additionalParams.actionvminfo.vmname = this.vmSelected["vmName"]; - - let requestBody = this.thisService["serviceDomain"] == "Network Service" ? { healNsData: this.nsParams } : { healVnfData: this.vnfParams }; - this.healNsVnfService(this.thisService, requestBody, templatehealSuccessFaild); - this.healNotification(templatehealstarting); - } - - healCancel() { - this.healModelVisible = false; - } - - healNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - healSuccessNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - // show detail - detailshow = false; - detailshow2 = false; - upDateShow = false; - detailData: Object; - - serviceDetail(service, typeNum) { - service["siteSer"] = []; - service["sdwanSer"] = []; - service["customer"] = this.customerSelected; - service["serviceType"] = this.serviceTypeSelected; - - service.childServiceInstances.forEach((item) => { - if (item.serviceDomain == "SITE") { - service.siteSer.push(item); - } else if (item.serviceDomain == "SDWAN") { - service.sdwanSer.push(item); - } - }) - if (service["serviceDomain"] == 'CCVPN' || service["serviceDomain"] == 'SOTN') { - this.detailshow = true; - if (typeNum == 1) { - this.upDateShow = false; - } else { - this.upDateShow = true; - } - } else if (service["serviceDomain"] == 'E2E Service' || service["serviceDomain"] == 'Network Service') { - this.detailshow2 = true; - } - this.listDisplay = true; - this.detailData = service; - console.log(service); - } - - deleteModelVisible = false; - terminationType = "graceful"; - gracefulTerminationTimeout = 120; - - // delete Model show - deleteModel(service) { - this.thisService = service; - this.deleteModelVisible = true; - } - - deleteOk(templatedeletestarting, templateDeleteSuccessFaild) { - this.deleteModelVisible = false; - this.loadingAnimateShow = true; - if (this.thisService["serviceDomain"] == "Network Service") { - this.deleteNsService(this.thisService, templateDeleteSuccessFaild); - } else { - this.deleteService(this.thisService, templateDeleteSuccessFaild); - } - this.deleteNotification(templatedeletestarting); - } - - deleteCancel() { - this.deleteModelVisible = false; - } - - deleteNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - deleteSuccessNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - createNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - createSuccessNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - //ccvpn sotn createservice - parentServiceInstanceId = ""; - thisCreateService = {}; - - closeCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { - if (!obj) { - this.createshow = false; //close - this.listDisplay = false; //close - return false; - } - this.createshow = false; - this.listDisplay = false; - this.loadingAnimateShow = true; - console.log(obj); - let newData; //Newly created service data for the main table - - let createParams = "?customerId=" + this.customerSelected2.id + - "&serviceType=" + this.serviceTypeSelected2.name + - "&serviceDomain=" + this.templateTypeSelected; - this.createService(obj, createParams, templateCreatestarting, templateCreateSuccessFaild).then((data) => { - console.log(data); - this.loadingAnimateShow = false; - newData = { //Newly created service data in the main form - 'service-instance-id': data["serviceId"], - 'service-instance-name': obj.service.name, - serviceDomain: this.templateTypeSelected, - childServiceInstances: [], - status: "In Progress", - rate: 0, - 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) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + newData.rate + "%"; - if (newData["rate"] > 100) { - newData["status"] = prodata.status; - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; - } - }; - let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" }; - return this.queryProgress(queryParams, updata); - }).then((data) => { - 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' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - let hasUndone = this.tableData.some((item) => { - return item.rate < 100; - }); - if (!hasUndone) { - setTimeout(() => { - this.getTableData(); - }, 1000) - } - }) - } - - e2eCloseCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { - if (!obj) { - this.createshow2 = false; // - this.listDisplay = false; // - return false; - } - this.createshow2 = false; // - this.listDisplay = false; // - this.loadingAnimateShow = true; - console.log(obj); - let newData; // - let createParams = "?customerId=" + this.customerSelected.id + - "&serviceType=" + this.serviceTypeSelected2.name + - "&serviceDomain=" + this.templateTypeSelected + - "&parentServiceInstanceId=" + - "&uuid=" + obj.service.serviceUuid + - "&invariantUuuid=" + obj.service.serviceInvariantUuid; - this.createService(obj, createParams, templateCreatestarting, templateCreateSuccessFaild).then((data) => { - console.log(data); - this.loadingAnimateShow = false; - newData = { // - 'service-instance-id': data["serviceId"], - 'service-instance-name': obj.service.name, - serviceDomain: this.templateTypeSelected, - childServiceInstances: [], - status: "In Progress", - statusClass: 1001, - rate: 0, - 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) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + newData.rate + "%"; - if (newData["rate"] > 100) { - newData["status"] = prodata.status; - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; - } - } - let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" }; - return this.queryProgress(queryParams, updata); - }).then((data) => { - 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' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - let hasUndone = this.tableData.some((item) => { - return item.rate < 100; - }) - if (!hasUndone) { - setTimeout(() => { - this.getTableData(); - }, 1000) - } - }) - - } - - nsCloseCreate(obj, templateCreatestarting, templateCreateSuccessFaild) { - if (!obj) { - this.createshow2 = false; // - this.listDisplay = false; // - return false; - } - this.createshow2 = false; // - this.listDisplay = false; // - this.loadingAnimateShow = true; - console.log(obj); - let newData; // - // step1 - this.myhttp.nsCreateInstance(obj.step1) - .subscribe((data) => { - // console.log(data); - this.loadingAnimateShow = false; - newData = { // - 'service-instance-id': data.nsInstanceId, - 'service-instance-name': obj.step1.nsName, - serviceDomain: this.templateTypeSelected, - childServiceInstances: [], - status: "In Progress", - statusClass: 1001, - rate: 0, - tips: "" - } - this.thisCreateService = newData; - this.tableData = [newData, ...this.tableData]; - this.createNotification(templateCreatestarting); - if (data.status == "FAILED") { - console.log("create ns service Failed :" + JSON.stringify(data)); - newData.status = "Failed"; - this.createSuccessNotification(templateCreateSuccessFaild); - return false; - } - let createParams = "?ns_instance_id=" + data.nsInstanceId + - "&customerId=" + this.customerSelected2.id + - "&serviceType=" + this.serviceTypeSelected2.name + - "&serviceDomain=" + this.templateTypeSelected + - "&parentServiceInstanceId="; - // step2 - this.createNsService(createParams, obj.step2).then((jobid) => { - if (jobid == "Failed") { - newData.status = "Failed"; - console.log(jobid, "ns two jobid") - this.thisCreateService = newData; - console.log(this.thisCreateService) - this.createSuccessNotification(templateCreateSuccessFaild); - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - return false; - } - let operationType = "1001"; - let updata = (prodata) => { - newData.rate = prodata.progress; - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + newData.rate + "%"; - if (newData["rate"] > 100) { - newData["status"] = prodata.status; - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + newData["status"]; - } - } - - return this.queryNsProgress(jobid, newData["service-instance-id"], updata, operationType); - }).then((data) => { - console.log(data); - newData.rate = 100; - newData.status = "Successful"; - this.thisCreateService = newData; - console.log(this.thisCreateService) - this.createSuccessNotification(templateCreateSuccessFaild); - newData.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == newData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - let hasUndone = this.tableData.some((item) => { - return item.rate < 100; - }) - if (!hasUndone) { - setTimeout(() => { - this.getTableData(); - }, 1000) - } - }) - }) - } - - createService(requestBody, createParams, templateCreatestarting, templateCreateSuccessFaild) { - let mypromise = new Promise((res, rej) => { - this.myhttp.createInstance(requestBody, createParams) - .subscribe((data) => { - if (data.status == "FAILED") { - this.loadingAnimateShow = false; - res("Failed"); - console.log("create e2e service Failed :" + JSON.stringify(data)); - return false; - } - res(data.service); - }) - }) - return mypromise; - } - - createNsService(id, obj) { - let mypromise = new Promise((res, rej) => { - this.myhttp.nsCreateInstance2(id, obj) - .subscribe((data) => { - if (data.status == "FAILED") { - this.loadingAnimateShow = false; - console.log("instantiate ns service Failed :" + JSON.stringify(data)); - res("Failed"); - return false; - } - res(data.jobId); - }) - }) - return mypromise; - } - - scaleE2eService(service, requestBody, templateScaleSuccessFaild) { - let id = service["service-instance-id"]; - service.rate = 0; - service.status = "In Progress"; - service.statusClass = "1003"; - service.tips = ""; - this.myhttp.scaleE2eService(id, requestBody) - .subscribe((data) => { - if (data.status == "FAILED") { - console.log("scale E2e 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"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - this.scaleSuccessNotification(templateScaleSuccessFaild); - return false; - } - let obj = { - serviceId: id, - operationId: data.operationId, - operationType: "1003" - } - let updata = (prodata) => { - service.rate = prodata.progress; - 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"] + '\xa0\xa0\xa0' + service["status"]; - } - } - this.queryProgress(obj, updata).then(() => { - service.rate = 100; - service.status = "Successful"; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - this.scaleSuccessNotification(templateScaleSuccessFaild); - }) - }) - } - - healNsVnfService(service, requestBody, templatehealSuccessFaild) { - console.log(service); - service.rate = 0; - service.status = "In Progress"; - service.tips = ""; - service.statusClass = "1004"; - let id = service.nsInstanceId || service["service-instance-id"] || service["vnfNsInstanceId"]; - this.myhttp.healNsService(id, requestBody) - .subscribe((data) => { - if (data.status == "FAILED") { - console.log("heal nsvnf 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"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - this.healSuccessNotification(templatehealSuccessFaild); - return false; - } - let jobid = data.jobId; - let operationType = "1004"; - let updata = (prodata) => { - service.rate = prodata.progress; - service.tips = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == service.statusClass && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + service.rate + "%"; - console.log(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"] + '\xa0\xa0\xa0' + service["status"]; - } - } - this.queryNsProgress(jobid, null, updata, operationType).then((data1) => { - console.log(data1); - 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.healSuccessNotification(templatehealSuccessFaild); - }); - }) - } - - updateCcvpnNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - updateCcvpnSuccessNotification(template: TemplateRef<{}>): void { - this.notification.template(template); - } - - closeCCVPNUpdate(obj, templateUpdateSuccessFaild) { - console.log(obj); - this.detailshow = false; - this.listDisplay = false; - this.upDateShow = false; - this.detailData["rate"] = 0; - this.detailData["status"] = "In Progress"; - this.detailData['tips'] = ""; - this.detailData["statusClass"] = "1005"; - let id = this.detailData["service-instance-id"]; - this.myhttp.updateccvpn(id, obj) - .subscribe((data) => { - if (data.status == "FAILED") { - console.log("scale E2e service Failed :" + JSON.stringify(data)); - this.detailData["status"] = "Failed"; - this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild); - return false; - } - let obj = { - serviceId: id, - operationId: data.operationId - } - let updata = (prodata) => { - this.detailData["rate"] = prodata.progress; - this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.detailData["rate"] + "%"; - if (this.detailData["rate"] > 100) { - this.detailData["status"] = prodata.status; - this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.detailData["status"]; - } - }; - this.queryProgress(obj, updata).then(() => { - this.detailData["rate"] = 100; - this.detailData["status"] = "Successful"; - this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => { - return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language - })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2001 && its["language"] == this.language - })["sortValue"]; - this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild); - }) - }) - } - - deleteService(service, templateDeleteSuccessFaild) { - let allprogress = {}; // - let querypros = []; // - service.rate = 0; - service.status = "In Progress"; - service.tips = ""; - service.statusClass = "1002"; - service["childServiceInstances"].push({ "service-instance-id": service["service-instance-id"] }); - let deletePros = service["childServiceInstances"].map((item) => { - let params = { - globalSubscriberId: this.customerSelected.id, - serviceType: this.serviceTypeSelected, - serviceInstanceId: item["service-instance-id"] - } - return new Promise((res, rej) => { - this.myhttp.deleteInstance(params) - .subscribe((data) => { - this.loadingAnimateShow = false; - if (data.status == "FAILED") { - console.log("delete 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"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => { - return its["sortCode"] == 2002 && its["language"] == this.language - })["sortValue"]; - return false; - } - let obj = { - serviceId: params.serviceInstanceId, - operationId: data.operationId, - operationType: "1002" - } - let updata = (prodata) => { - allprogress[prodata.operationId] = prodata.progress; - let average = ((arr) => { - return eval(arr.join("+")) / arr.length - })(Object.values(allprogress)); - service["rate"] = average; - 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"] + '\xa0\xa0\xa0' + service["status"]; - } - }; - querypros.push(this.queryProgress(obj, updata)); - res(); - }) - }) - }); - Promise.all(deletePros).then(() => { - Promise.all(querypros).then((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); - let hasUndone = this.tableData.some((item) => { - return item.rate < 100; - }) - if (!hasUndone) { - setTimeout(() => { - this.getTableData(); - }, 1000) - } - }) - }) - } - - deleteNsService(service, templateDeleteSuccessFaild) { - service.rate = 0; - service.status = "In Progress"; - service.tips = ""; - service.statusClass = "1002"; - let id = service.nsInstanceId || service["service-instance-id"]; - let operationType = "1002"; - let requestBody = { - terminationType: this.terminationType, - gracefulTerminationTimeout: this.gracefulTerminationTimeout - } - this.stopNsService(id, requestBody).then((jobid) => { - if (jobid == "Failed") { - service.status = "Failed"; - this.deleteSuccessNotification(templateDeleteSuccessFaild); - 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"]; - return false; - } - let updata = (prodata) => { - service.rate = prodata.progress; - 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"]; - } - } - return this.queryNsProgress(jobid, null, updata, operationType); - }).then(() => { - this.myhttp.nsDeleteInstance(id) - .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; - }) - if (!hasUndone) { - setTimeout(() => { - this.getTableData(); - }, 1000) - } - }) - }) - } - - stopNsService(id, obj) { - let mypromise = new Promise((res, rej) => { - this.myhttp.stopNsService(id, obj) - .subscribe((data) => { - this.loadingAnimateShow = false; - if (data.status == "FAILED") { - console.log("stop ns service Failed :" + JSON.stringify(data)); - res("Failed"); - return false; - } - res(data.jobId); - }) - }) - return mypromise; - } - - queryProgress(obj, callback) { - let mypromise = new Promise((res, rej) => { - let errorNums = 180; - let requery = () => { - this.myhttp.getProgress(obj) - .subscribe((data) => { - if (data.status == "FAILED") { - callback({ progress: 255, status: "Failed" }); - return false; - } - if (data.operationStatus == null || data.operationStatus.progress == undefined) { - // console.log(data); - errorNums--; - if (errorNums == 0) { - callback({ progress: 255, status: "time over" }); - return false; - } - setTimeout(() => { - requery(); - }, 10000) - return false; - } - if (data.operationStatus.progress > 100) { - callback({ progress: 255, status: "time over" }); - return false; - } - if (data.operationStatus.progress < 100) { - callback(data.operationStatus); - setTimeout(() => { - requery(); - }, 5000) - } else { - res(data.operationStatus); - } - }) - } - requery(); - }) - return mypromise; - } - - queryNsProgress(jobid, id, callback, operationType) { - let mypromise = new Promise((res, rej) => { - - let errorNums = 180; - let requery = () => { - this.myhttp.getNsProgress(jobid, id, operationType) - .subscribe((data) => { - if (data.status == "FAILED") { - callback({ progress: 255, status: "Failed" }); - return false; - } - if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) { - errorNums--; - if (errorNums == 0) { - callback({ progress: 255, status: "time over" }); - return false; - } - setTimeout(() => { - requery(); - }, 10000) - return false; - } - if (data.responseDescriptor.progress > 100 && data.responseDescriptor.status == "error") { - callback({ progress: 255, status: data.responseDescriptor.statusDescription }); - return false; - } - if (data.responseDescriptor.progress < 100) { - callback(data.responseDescriptor); - setTimeout(() => { - requery(); - }, 5000) - } else { - res(data); - } - }) - - }; - requery(); - }); - return mypromise; - } - -} |