feat: change the project structure and add mock data function

Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

5 files changed, 2705 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.css b/usecaseui-portal/src/app/views/services/services-list/services-list.component.css
new file mode 100644
index 00000000..0a7f92eb
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.css
@@ -0,0 +1,145 @@
+/*
+    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/views/services/services-list/services-list.component.html b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
new file mode 100644
index 00000000..6f6d8f74
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.html
@@ -0,0 +1,745 @@
+<!--
+    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 style="margin-right: 10px"><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 style="min-height:40px;max-height: 200px; overflow: auto;">
+            <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
+                <a title="{{item.name}}"
+                    style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+            </li>
+        </ul>
+    </nz-dropdown>
+
+    <span style="margin-left:40px"><i style="margin-right: 10px"><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 style="min-height:40px;max-height: 200px; overflow: auto;">
+            <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
+                <a title="{{item.name}}"
+                    style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+            </li>
+        </ul>
+    </nz-dropdown>
+
+    <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i class="anticon anticon-plus"
+            style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></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">*&nbsp;</span> {{"i18nTextDefine_SureScale" | translate}} </h3>
+            <div class="question">
+                <h4> {{"i18nTextDefine_InstanceID" | translate}} :</h4>
+                <div class="scaleModelContent" style="width: 100%">{{ thisService["service-instance-id"] ||
+                    thisService["nsInstanceId"] ||
+                    thisService["vnfInstanceId"]}}
+                </div>
+            </div>
+            <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 &nbsp;
+                            {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
+                        </div>
+                        <div class="ant-notification-notice-description">
+                            <div class="notificationlist">
+                                <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+                                <span>{{ thisService["service-instance-name"] ||
+                                    thisService["nsInstanceName"] }}
+                                </span>
+                            </div>
+                            <div class="notificationlist">
+                                <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+                                <span>{{ customerSelected.name }}</span>
+                            </div>
+                            <div class="notificationlist">
+                                <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+                                <span>{{ thisService["serviceDomain"] }}</span>
+                            </div>
+                        </div>
+                        <div 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">*&nbsp;</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'] }} &nbsp; {{"i18nTextDefine_InstanceTeminationStarting" |
+                            translate}}
+                        </div>
+                        <div class="ant-notification-notice-message"
+                            *ngIf="thisService['serviceDomain'] == 'E2E Service'">E2E &nbsp;
+                            {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
+                        </div>
+                        <div class="ant-notification-notice-message"
+                            *ngIf="thisService['serviceDomain'] == 'Network Service'">NS &nbsp;
+                            {{"i18nTextDefine_InstanceTeminationStarting" | translate}}
+                        </div>
+                        <div class="ant-notification-notice-description">
+                            <div class="notificationlist">
+                                <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+                                <span>{{ thisService["service-instance-name"] ||
+                                    thisService["nsInstanceName"] }}
+                                </span>
+                            </div>
+                            <div class="notificationlist">
+                                <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+                                <span>{{ customerSelected.name }}</span>
+                            </div>
+                            <div class="notificationlist">
+                                <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+                                <span>{{ thisService["serviceDomain"] }}</span>
+                            </div>
+                        </div>
+                        <div 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">*&nbsp;</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>
+                        &nbsp;
+                    </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"> &nbsp;
+                        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 &nbsp;
+                            {{"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'] }} &nbsp; {{"i18nTextDefine_InstanceCreationStarting" |
+                        translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="thisCreateService['serviceDomain'] == 'E2E Service'">E2E &nbsp;
+                        {{"i18nTextDefine_InstanceCreationStarting" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="thisCreateService['serviceDomain'] == 'Network Service'">NS &nbsp;
+                        {{"i18nTextDefine_InstanceCreationStarting" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-description">
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+                            <span>{{ thisCreateService["service-instance-name"] }}
+                            </span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+                            <span>{{ customerSelected2.name }}</span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+                            <span>{{ thisCreateService['serviceDomain'] }}</span>
+                        </div>
+                    </div>
+                    <div 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'] }} &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" |
+                        translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Successful'">
+                        E2E &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Successful'">
+                        NS &nbsp; {{"i18nTextDefine_InstanceCreatedSuccessfully" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="(thisCreateService['serviceDomain'] == 'CCVPN' || thisCreateService['serviceDomain'] == 'SOTN') && thisCreateService.status == 'Failed'">
+                        {{ thisCreateService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceCreationFailed" |
+                        translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="(thisCreateService['serviceDomain'] == 'E2E Service') && thisCreateService.status == 'Failed'">
+                        E2E &nbsp; {{"i18nTextDefine_InstanceCreationFailed" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="(thisCreateService['serviceDomain'] == 'Network Service') && thisCreateService.status == 'Failed'">
+                        NS &nbsp; {{"i18nTextDefine_InstanceCreationFailed" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-description">
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+                            <span>{{ thisCreateService["service-instance-name"] ||
+                                    thisCreateService["nsInstanceName"] }}
+                            </span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+                            <span>{{ customerSelected2.name }}</span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+                            <span>{{ thisCreateService["serviceDomain"] }}</span>
+                        </div>
+                    </div>
+                    <div 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'] }} &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" |
+                        translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Successful'">
+                        E2E &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Successful'">
+                        NS &nbsp; {{"i18nTextDefine_InstanceTeminatedSuccessfully" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="(thisService['serviceDomain'] == 'CCVPN' || thisService['serviceDomain'] == 'SOTN') && thisService.status == 'Failed'">
+                        {{ thisService['serviceDomain'] }} &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" |
+                        translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="(thisService['serviceDomain'] == 'E2E Service') && thisService.status == 'Failed'">E2E
+                        &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message"
+                        *ngIf="(thisService['serviceDomain'] == 'Network Service') && thisService.status == 'Failed'">
+                        NS &nbsp; {{"i18nTextDefine_InstanceTeminationFailed" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-description">
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+                            <span>{{ thisService["service-instance-name"] ||
+                                    thisService["nsInstanceName"] }}
+                            </span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+                            <span>{{ customerSelected.name }}</span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+                            <span>{{ thisService["serviceDomain"] }}</span>
+                        </div>
+                    </div>
+                    <div 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 &nbsp;
+                        {{"i18nTextDefine_InstanceScaledSuccessfully" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">E2E &nbsp;
+                        {{"i18nTextDefine_InstanceScaleFailed" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-description">
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+                            <span>{{ thisService["service-instance-name"] ||
+                                    thisService["nsInstanceName"] }}
+                            </span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+                            <span>{{ customerSelected.name }}</span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+                            <span>{{ thisService["serviceDomain"] }}</span>
+                        </div>
+                    </div>
+                    <div 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 &nbsp;
+                        {{"i18nTextDefine_InstanceHealedSuccessfully" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">NS &nbsp;
+                        {{"i18nTextDefine_InstanceHealingFailed" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-description">
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+                            <span>{{ thisService["service-instance-name"] ||
+                                    thisService["nsInstanceName"] }}
+                            </span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+                            <span>{{ customerSelected.name }}</span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+                            <span>{{ thisService["serviceDomain"] }}</span>
+                        </div>
+                    </div>
+                    <div 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 &nbsp;
+                        {{"i18nTextDefine_InstanceUpdatedSuccessfully" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-message" *ngIf="thisService.status == 'Failed'">CCVPN &nbsp;
+                        {{"i18nTextDefine_InstanceUpdateFailed" | translate}}
+                    </div>
+                    <div class="ant-notification-notice-description">
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_InstanceName" | translate}} :</p>
+                            <span>{{ thisService["service-instance-name"] ||
+                                    thisService["nsInstanceName"] }}
+                            </span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_Customer" | translate}} :</p>
+                            <span>{{ customerSelected.name }}</span>
+                        </div>
+                        <div class="notificationlist">
+                            <p> {{"i18nTextDefine_UseCase" | translate}} :</p>
+                            <span>{{ thisService["serviceDomain"] }}</span>
+                        </div>
+                    </div>
+                    <div 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>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/services-list/services-list.component.less b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
new file mode 100644
index 00000000..392d1b3a
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.less
@@ -0,0 +1,380 @@
+/*
+    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;
+}
+.ant-tabs-bar{
+    margin-bottom: 0!important;
+}
+.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;
+    }
+    nz-dropdown {
+        vertical-align: middle;
+        background-color:#ffffff;
+        :hover{
+            border-color: #48C6EF;
+        }
+        button {
+            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%;
+        width:116px;
+        height:42px;
+        background:#0DA9E2;
+        border-radius:6px;
+        margin-top: -15px;
+        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;
+    }
+
+}
+.top-num{
+    overflow: auto;
+    width: 100%;
+}
+.top-list{
+    position: relative;
+    width:29%;
+    height:170px;
+    margin: 10px 1%;
+    float: left;
+    background:url("../../../../assets/images/servicelist-e2e.png") no-repeat;
+    background-size: 100% 100%;
+    border-radius:2px;
+}
+.top-num .top-list:nth-child(2){
+    background:url("../../../../assets/images/servicelist-e2e.png") no-repeat;
+    background-size: 100% 100%;
+}
+.top-num .top-list:nth-child(3){
+    background:url("../../../../assets/images/servicelist-e2e.png") no-repeat;
+    background-size: 100% 100%;
+}
+.top-num .top-list:nth-child(4){
+    background:url("../../../../assets/images/servicelist-sotn.png") no-repeat;
+    background-size: 100% 100%;
+}
+.top-list .round{
+    position: absolute;
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+  text-align: center;
+    top:45%;
+    left: 50px;
+    margin-top: -30px;
+    background:#E0EDFF;
+    border:2px solid rgba(224,237,255,1);
+    border-radius: 50%;
+    font-size:16px;
+    font-family:ArialMT;
+    color:#3C4F8C;
+}
+.top-list {
+    .top-list-text {
+        position: absolute;
+        text-align: right;
+        height: 40px;
+        line-height: 20px;
+        right: 50px;
+        color: #fff;
+        p {
+            font-size: 14px;
+            width: 250px;
+            margin: 15px 0 0 0;
+            height: 13px;
+            clear: both;
+            span {
+                display: inline-block;
+                font-weight: 500;
+                text-align: right;
+                float: right;
+            }
+            span:nth-child(1) {
+                font-size: 18px;
+                width: 40px;
+                min-width: 40px;
+            }
+            span:nth-child(2) {
+                width: 85px;
+                font-size: 16px;
+            }
+        }
+        p:nth-child(1) {
+            margin-top: 25px;
+        }
+    }
+    .service-description{
+        font-size: 14px;
+        width: 250px;
+        height: 13px;
+        position: absolute;
+        bottom: 30px;
+        left: 50px;
+        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/views/services/services-list/services-list.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.spec.ts
new file mode 100644
index 00000000..61440dc3
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.spec.ts
@@ -0,0 +1,25 @@
+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/views/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
new file mode 100644
index 00000000..c15e9f11
--- /dev/null
+++ b/usecaseui-portal/src/app/views/services/services-list/services-list.component.ts
@@ -0,0 +1,1410 @@
+/*
+    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 '../../../core/services/myhttp.service';
+import { slideToRight } from '../../../animates';
+import { NzModalService } from 'ng-zorro-antd';
+import { NzNotificationService } from 'ng-zorro-antd';
+
+@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;
+
+    constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) {
+    }
+
+    ngOnInit() {
+        this.getallCustomers();
+    }
+
+    // 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 data = {
+            //   operationStatus:{
+            //     "operationId": "XXXXXX",
+            //     "operation": "create|delete|update|scale",
+            //     "result": "finished|error|processing",
+            //     "reason": "",
+            //     "userId": "",
+            //     "operationContent": "Be creating pop.",
+            //     "progress": 0,
+            //     "operateAt": "",
+            //     "finishedAt": ""
+            //   }
+            // }
+            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);
+                        }
+                    })
+                // setTimeout(()=>{
+                //   console.log(data.operationStatus.progress)
+                //   data.operationStatus.progress++;
+                //   if(data.operationStatus.progress<100){
+                //     callback(data.operationStatus);
+                //     requery()
+                //   }else{
+                //     callback(data.operationStatus);
+                //     res(data.operationStatus)
+                //   }
+                // },100)
+            }
+            requery();
+        })
+        return mypromise;
+    }
+
+    queryNsProgress(jobid, id, callback, operationType) {
+        let mypromise = new Promise((res, rej) => {
+            // let data = {
+            //   "jobId": "string",
+            //   "responseDescriptor": {
+            //     "status": "string",
+            //     "progress": 0,
+            //     "statusDescription": "string",
+            //     "errorCode": "string",
+            //     "responseId": "string",
+            //     "responseHistoryList": [
+            //       {
+            //         "status": "string",
+            //         "progress": "string",
+            //         "statusDescription": "string",
+            //         "errorCode": "string",
+            //         "responseId": "string"
+            //       }
+            //     ]
+            //   }
+            // }
+            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) {
+                            // console.log(data);
+                            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);
+                        }
+                    })
+                // setTimeout(()=>{
+                //   console.log(data.responseDescriptor.progress)
+                //   data.responseDescriptor.progress++;
+                //   if(data.responseDescriptor.progress<100){
+                //     callback(data.responseDescriptor);
+                //     requery()
+                //   }else{
+                //     callback(data);
+                //     res(data)
+                //   }
+                // },100)
+            };
+            requery();
+        });
+        return mypromise;
+    }
+
+}