feat: change the project structure and add mock data function

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

14 files changed, 0 insertions, 4070 deletions

diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
deleted file mode 100644
index 4e80750c..00000000
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.css
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-.title {
-  font: 700 18px/18px "思源黑体";
-  color: #4c5e70;
-  margin-bottom: 18px;
-}
-hr {
-  border: none;
-  height: 2px;
-  background-color: #dce1e7;
-  margin-bottom: 20px;
-}
-.list {
-  background-color: #fff;
-  border-radius: 5px;
-  padding: 10px;
-}
-.list nz-table tbody td span.onboarding {
-  font-size: 12px;
-  color: #147dc2;
-}
-.list nz-table tbody td span.onboarded {
-  font-size: 14px;
-  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.invalid {
-  font-size: 14px;
-  color: purple;
-}
-.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 td .fileIcon{
-  display: none;
-}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
deleted file mode 100644
index 70ee81c0..00000000
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.html
+++ /dev/null
@@ -1,333 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
-    <nz-tab *ngFor="let tab of tabs" [nzTitle]="tab" (nzClick)="handleTabChange(tab)">
-        <!-- nsList -->
-        <div class="list" *ngIf="tab === 'NS'">
-            <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> -->
-            <div style="width:100%;height: 30%;margin-bottom: 1%">
-                <div class="listupload">
-                    <nz-upload nzType="drag" [(nzFileList)]="fileListNS" [nzBeforeUpload]="beforeUploadNS">
-                        <p class="ant-upload-drag-icon">
-                            <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
-                        </p>
-                        <p class="ant-upload-text"> {{"i18nTextDefine_Click_CSAR_File" | translate}} </p>
-                        <p class="ant-upload-hint"></p>
-                    </nz-upload>
-                    <button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileListNS.length == 0"
-                        style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
-                        {{ nsuploading ? 'Uploading' : 'Start Upload' }}
-                    </button>
-                </div>
-                <div class="listlin"></div>
-                <div class="listfile">
-                    <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
-                    <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
-                    <div style="height:80%;overflow: auto">
-                        <div class="listfilebgc" *ngFor="let itemns of nsRightList">
-                            <div>
-                                <i class="anticon anticon-link"></i>
-                            </div>
-                            <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div>
-                            <div class="color" *ngIf="itemns.status">
-                                <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress>
-                            </div>
-                            <div class="color" *ngIf="!itemns.status">
-                                <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
-                                <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
-                            </div>
-                            <div *ngIf="!itemns.status">
-                                <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i>
-                                <i class="anticon anticon-exclamation-circle"  *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <nz-spin [nzSpinning]="isSpinning" style="height: 69%">
-                <div class="mask" *ngIf="isSpinning"></div>
-                <nz-table #nzTable [nzData]="nstableData" nzShowSizeChanger [nzFrontPagination]="true"
-                    [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="nspageSize"
-                    [(nzPageIndex)]='nspageIndex' [nzLoading]="loading" nzSize="middle">
-                    <thead (nzSortChange)="sort($event)" nzSingleSort>
-                        <tr>
-                            <th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
-                            <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_OperationalState" | translate}} </th>
-                            <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let item of nzTable.data; let i = index; ">
-                            <td>{{i+1}}</td>
-                            <!--<td *ngIf="item.uuid">{{item.uuid}}</td>-->
-
-                            <td *ngIf="item.nsdName">{{item.nsdName}}</td>
-                            <td *ngIf="item.nsdName === null || item.nsdName === ''">&nbsp;</td>
-                            <td *ngIf="item.name">{{item.name}}</td>
-                            <td *ngIf="item.name===null || item.name=== ''">&nbsp;</td>
-                            <td *ngIf="item.nsdVersion">{{item.nsdVersion}}</td>
-                            <td *ngIf="item.nsdVersion === null || item.nsdVersion === ''">&nbsp;</td>
-                            <td *ngIf="item.version">{{item.version}}</td>
-                            <td *ngIf="item.version === null || item.version === ''">&nbsp;</td>
-                            <td>
-                                <span *ngIf="item.nsdOnboardingState">{{item.nsdOnboardingState}}</span>
-                                <span *ngIf="item.nsdOnboardingState === null || item.nsdOnboardingState === ''">&nbsp;</span>
-                                <span *ngIf="item.uuid">{{status}}</span>
-
-                                <!-- <span *ngIf="item.uuid" [ngClass]="{'active':data.status=='Active','closed':data.status=='Closed','onboarding':data.status=='Onboarding',
-                                    'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating',
-                                    'scaling':data.status=='Scaling','healing':data.status=='Healing'}">{{data.status || "Active"}}</span>
-                                    <nz-progress  *ngIf="item.uuid"  *ngIf="data.status == 'Creating' || data.status == 'Deleting' ||  data.status == 'Scaling' || data.status == 'Healing' " [nzPercent]="data.rate"></nz-progress> -->
-                            </td>
-                            <td>{{item.nsdOperationalState}}</td>
-                            <td>{{item.nsdUsageState}}</td>
-                            <td>
-                                <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding' && i == currentIndex}"
-                                    class="anticon anticon-upload upicon" #upload_icon (click)="updataNsService(item.uuid,i,notificationModel)"
-                                    *ngIf="item.uuid"></i>
-                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)"
-                                    *ngIf="item.id"></i>
-                                <!--<span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">-->
-                                <!--<span *ngIf="item.id && item.sameid == undefined">-->
-                                    <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">-->
-                                        <!--<i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>-->
-                                    <!--</nz-upload>-->
-                                    <!--<button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"-->
-                                        <!--style="margin-top: 16px" *ngIf="item.id==nsdInfoId">-->
-                                        <!--{{ nsuploading ? 'Uploading' : 'Start Upload' }}-->
-                                    <!--</button>-->
-                                <!--</span>-->
-
-                            </td>
-                        </tr>
-                    </tbody>
-                </nz-table>
-            </nz-spin>
-            <!-- <div style="margin-top:8px;">
-                        Loading state:
-                        <nz-switch [(ngModel)]="isSpinning"></nz-switch>
-                      </div> -->
-
-        </div>
-        <!-- VNFList -->
-        <div class="list" *ngIf="tab === 'VNF'">
-            <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> -->
-            <div style="width:100%;height: 30%;margin-bottom: 1%">
-            <div class="listupload">
-                <nz-upload nzType="drag" [(nzFileList)]="fileListVNF" [nzBeforeUpload]="beforeUploadVNF">
-                    <p class="ant-upload-drag-icon">
-                        <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
-                    </p>
-                    <p class="ant-upload-text">Click or drag CSAR File here</p>
-                    <p class="ant-upload-hint"></p>
-                </nz-upload>
-                <button nz-button [nzLoading]="vnfuploading" (click)="onClick(tab)" [disabled]="fileListVNF.length == 0"
-                    style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
-                    {{ vnfuploading ? 'Uploading' : 'Start Upload' }}
-                </button>
-            </div>
-            <div class="listlin"></div>
-            <div class="listfile">
-                <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
-                <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
-                <div style="height:80%;overflow: auto">
-                    <div class="listfilebgc" *ngFor="let itemns of vnfRightList">
-                        <div>
-                            <i class="anticon anticon-link"></i>
-                        </div>
-                        <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div>
-                        <div class="color" *ngIf="itemns.status">
-                            <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress>
-                        </div>
-                        <div class="color" *ngIf="!itemns.status">
-                            <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
-                            <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
-                        </div>
-                        <div *ngIf="!itemns.status">
-                            <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i>
-                            <i class="anticon anticon-exclamation-circle"  *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            </div>
-            <nz-spin [nzSpinning]="isSpinning"  style="height: 69%">
-                <div class="mask" *ngIf="isSpinning"></div>
-                <nz-table #nzTable [nzData]="vnftableData" nzShowSizeChanger [nzFrontPagination]="true"
-                    [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="vnfpageSize"
-                    [(nzPageIndex)]='vnfpageIndex' [nzLoading]="loading" nzSize="middle">
-                    <thead (nzSortChange)="sort($event)" nzSingleSort>
-                        <tr>
-							<th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
-                            <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_OperationalState" | translate}} </th>
-                            <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let item of nzTable.data; let i = index; ">
-                            <td>{{i+1}}</td>
-                            <!--<td *ngIf="item.uuid">{{item.uuid}}</td>-->
-                            <td *ngIf="item.vnfProductName">{{item.vnfProductName}}</td>
-                            <td *ngIf="item.vnfProductName === null || item.vnfProductName === ''">&nbsp;</td>
-                            <td *ngIf="item.name">{{item.name}}</td>
-                            <td *ngIf="item.vnfdVersion">{{item.vnfdVersion}}</td>
-                            <td *ngIf="item.vnfdVersion === null || item.vnfdVersion === ''">&nbsp;</td>
-                            <td *ngIf="item.version">{{item.version}}</td>
-                            <td>{{item.onboardingState}}</td>
-                            <td>{{item.operationalState}}</td>
-                            <td>{{item.usageState}}</td>
-                            <td>
-                                <i [ngClass]="{'cannotclick':onboardData.status == 'onboarding'  && i == currentIndex}"
-                                    class="anticon anticon-upload upicon" #upload_icon (click)="updataVnfService(item.uuid,i,notificationModel)"
-                                    *ngIf="item.uuid"></i>
-                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)"
-                                    *ngIf="item.id"></i>
-                                <!--<span *ngIf="item.id && item.sameid == undefined">-->
-                                    <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">-->
-                                        <!--&lt;!&ndash; <button nz-button> &ndash;&gt;-->
-                                        <!--<i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>-->
-                                        <!--&lt;!&ndash; <span >upload</span> &ndash;&gt;-->
-                                        <!--&lt;!&ndash; </button> &ndash;&gt;-->
-
-                                    <!--</nz-upload>-->
-                                    <!--<button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"-->
-                                        <!--style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"-->
-                                        <!--*ngIf="item.id==vnfPkgId">-->
-                                        <!--{{ nsuploading ? 'Uploading' : 'Start Upload' }}-->
-                                    <!--</button>-->
-                                <!--</span>-->
-                            </td>
-                        </tr>
-                    </tbody>
-                </nz-table>
-            </nz-spin>
-
-        </div>
-        <!-- PNFList -->
-        <div class="list" *ngIf="tab === 'PNF'">
-            <!-- <h3 class="title"> Onboard {{tabTitle}} </h3> -->
-            <div style="width:100%;height: 30%;margin-bottom: 1%">
-            <div class="listupload">
-                <nz-upload nzType="drag" [(nzFileList)]="fileListPNF" [nzBeforeUpload]="beforeUploadPNF">
-                    <p class="ant-upload-drag-icon">
-                        <i nz-icon type="inbox" class="anticon anticon-inbox"></i>
-                    </p>
-                    <p class="ant-upload-text">Click or drag CSAR File here</p>
-                    <p class="ant-upload-hint"></p>
-                </nz-upload>
-                <button nz-button [nzLoading]="pnfuploading" (click)="onClick(tab)" [disabled]="fileListPNF.length == 0"
-                    style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;">
-                    {{ pnfuploading ? 'Uploading' : 'Start Upload' }}
-                </button>
-            </div>
-            <div class="listlin"></div>
-            <div class="listfile">
-                <div style="color: rgba(66,84,143,1);font-family:ArialMT;padding-bottom: 15px;height: 15%"> {{"i18nTextDefine_Uploaded_files" | translate}} </div>
-                <div class="nouploadfile">{{"i18nTextDefine_Nofileuploading" | translate}}</div>
-                <div style="height:80%;overflow: auto">
-                    <div class="listfilebgc" *ngFor="let itemns of pnfRightList">
-                        <div>
-                            <i class="anticon anticon-link"></i>
-                        </div>
-                        <div class="color" [ngClass]="{'progress':itemns.status == true}">{{itemns.name}}</div>
-                        <div class="color" *ngIf="itemns.status">
-                            <nz-progress [nzPercent]="itemns.progress" [nzShowInfo]="false"></nz-progress>
-                        </div>
-                        <div class="color" *ngIf="!itemns.status">
-                            <span *ngIf="itemns.success == 0">{{"i18nTextDefine_File_upload_completed" | translate}}</span>
-                            <span *ngIf="itemns.success == 1">{{"i18nTextDefine_File_upload_failed" | translate}}</span>
-                        </div>
-                        <div *ngIf="!itemns.status">
-                            <i class="anticon anticon-check-circle" *ngIf="itemns.success == 0" style="color:#7BC7F3!important;"></i>
-                            <i class="anticon anticon-exclamation-circle"  *ngIf="itemns.success == 1" style="color:#fb5c5c!important;"></i>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            </div>
-            <nz-spin [nzSpinning]="isSpinning" style="height: 69%">
-                <div class="mask" *ngIf="isSpinning"></div>
-                <nz-table #nzTable [nzData]="pnftableData" nzShowSizeChanger [nzFrontPagination]="true"
-                    [nzShowQuickJumper]="true" [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pnfpageSize"
-                    [(nzPageIndex)]='pnfpageIndex' [nzLoading]="loading" nzSize="middle">
-                    <thead (nzSortChange)="sort($event)" nzSingleSort>
-                        <tr>
-							<th nzWidth="15%"> {{"i18nTextDefine_NO" | translate}} </th>
-                            <th nzWidth="15%" nzShowSort nzSortKey="name"> {{"i18nTextDefine_Name" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Version" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_OnboardingState" | translate}} </th>
-                            <th nzWidth="10%"> {{"i18nTextDefine_UsageState" | translate}} </th>
-                            <th nzWidth="15%"> {{"i18nTextDefine_Operationbutton" | translate}} </th>                 
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr *ngFor="let item of nzTable.data; let i = index; ">
-                            <td>{{i+1}}</td>
-                            <td>{{item.pnfdName}}</td>
-                            <td>{{item.pnfdVersion}}</td>
-                            <td>{{item.pnfdOnboardingState}}</td>
-                            <td>{{item.pnfdUsageState}}</td>
-                            <td>
-                                <i class="anticon anticon-delete" nzType="info" (click)="showConfirm(i,item.id,tab,notificationModel)"></i>
-                                <!--<span *ngIf="item.id" [ngClass]="{'fileIcon':OnboardFile == 'disNone'}">-->
-                                    <!--<nz-upload [(nzFileList)]="fileList" [nzBeforeUpload]="beforeUpload">-->
-                                        <!--<i class="anticon anticon-file" type="upload" (click)="onClickId(item.id,tab)"></i>-->
-                                    <!--</nz-upload>-->
-                                    <!--<button nz-button [nzLoading]="nsuploading" (click)="onClick(tab)" [disabled]="fileList.length == 0"-->
-                                        <!--style="margin-top: 16px;margin-left: 55px;color: #FFFFFF;font-size: 13px;background-color: #3E9BFF;font-family: ArialMT;"-->
-                                        <!--*ngIf="item.id==vnfPkgId">-->
-                                        <!--{{ nsuploading ? 'Uploading' : 'Start Upload' }}-->
-                                    <!--</button>-->
-                                <!--</span>-->
-                            </td>
-                        </tr>
-                    </tbody>
-                </nz-table>
-            </nz-spin>
-
-        </div>
-    </nz-tab>
-    <!--2019.08.14 add notification-->
-    <ng-template #notificationModel >
-        <div class="ant-notification-notice-content">
-            <div class="ant-notification-notice-with-icon">
-                        <span class="ant-notification-notice-icon">
-                            <img src="{{notificationAttributes.imgPath}}" alt="{{notificationAttributes.status}}">
-                        </span>
-                <div class="ant-notification-notice-message">
-                    {{notificationAttributes.title}}&nbsp;
-                    {{"i18nTextDefine_"+notificationAttributes.action | translate}}&nbsp;&nbsp;{{"i18nTextDefine_"+notificationAttributes.status | translate}}
-                </div>
-                <div class="ant-notification-notice-description">
-                    <div class="notificationlist">
-                        <p>{{notificationAttributes.title}} id:&nbsp;</p>
-                        <span>{{ notificationAttributes.id }}</span>
-                    </div>
-                </div>
-                <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
-            </div>
-        </div>
-    </ng-template>
-</nz-tabset>
-
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
deleted file mode 100644
index c31409c9..00000000
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.less
+++ /dev/null
@@ -1,182 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-.title {
-    font: 700 18px/18px "思源黑体";
-    color: #4c5e70;
-    margin-bottom: 18px; 
-}
-hr {
-    border: none;
-    height: 2px;
-    background-color: #dce1e7;
-    margin-bottom: 20px;
-}
-.switch_btn {
-    position: absolute;
-    right: 6%;
-    top: 18px;
-    border: 1px solid #3fa8eb;
-    width: 8%;
-    border-radius: 10px;
-    margin-bottom: 18px;
-    span {
-        display: block;
-        float: left;
-        text-align: center;
-        width: 50%;
-        color: #3fa8eb;
-        font-weight: 700;
-        cursor: pointer;
-    }
-    span:first-child {
-        border-radius: 10px 0 0 10px;
-    }
-    span:last-child {
-        border-radius: 0 10px 10px 0;
-    }
-    span.left_b {
-        border-left: 1px solid #3fa8eb;
-    }
-    span.active {
-        color: #fff;
-        background: #3fa8eb;
-    }
-}
-  
-.list {
-    // background-color: #fff;
-    border-radius: 5px;
-    // padding: 10px;
-    .listupload {
-        width: 22%;
-        vertical-align: top;
-        display: inline-block;
-        margin-left: 13%;
-    }
-    .listlin {
-        vertical-align: top;
-        display: inline-block;
-        width: 1%;
-        margin-left: 10%;
-        height: 177px;
-        margin-bottom: 30px;
-        border-right: 2px solid #EEEEEE;
-    }
-    .listfile {
-        width: 43%;
-        height: 100%;
-        vertical-align: top;
-        display: inline-block;
-        margin-left: 10%;
-        .nouploadfile{
-            height: 80%;
-            width: 100%;
-            text-align: center;
-            font-size: 22px;
-            margin-top: 5%;
-        }
-        .listfilebgc { 
-        background-color: #fff;
-        border-bottom: 8px solid #F7F8FC;
-        }
-        .listfilebgc {
-            background-color: #fff;
-            height: 30px;
-            border-radius: 2px;
-            line-height: 2;
-            color: #42548F;
-            border-bottom: 4px solid #F7F8FC;
-            >div {
-                float: left;
-            }
-           :first-child {
-               width: 6%;
-               margin-left: 5px;
-           }
-           :nth-child(2){
-                width:20%;
-           }
-           :nth-child(3){
-               width: 60%;
-               text-align: center;
-           }
-           :nth-child(4){
-            padding-left: 4%;
-           }
-           .color {
-               color:rgba(66,84,143,1);
-               span{
-                   color:rgba(66,84,143,0.7);
-               }
-           }
-            .progress{
-                color:rgba(66,84,143,0.7);
-            }
-        }
-    }
-    nz-table {
-        tbody {
-            td {
-                span.onboarding {
-                    font-size: 12px;
-                    color: #147dc2;
-                }
-                span.onboarded {
-                    font-size: 14px;
-                    color: #147dc2;
-                }
-                span.updating {
-                    font-size: 12px;
-                    color: blue;
-                }
-                span.deleting {
-                    font-size: 12px;
-                    color: red;
-                }
-                span.invalid {
-                    font-size: 14px;
-                    color: purple;
-                }
-                i.anticon {
-                    cursor: pointer;
-                    font-size: 18px;
-                    padding: 2px;
-                    &:hover{
-                        color: #147dc2;
-                    }
-                }
-                .cannotclick {
-                    pointer-events: none;
-                    color: #aaa;
-                    opacity: 0.6;
-                }
-                .fileIcon{
-                    display: none;
-                }
-            }
-        }
-    }
-}
-.mask {
-    top: 0;
-    left: 0;
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    opacity: 0.1;
-    background: black;
-    z-index: 1049;
-}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
deleted file mode 100644
index 0e49f656..00000000
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { OnboardVnfVmComponent } from './onboard-vnf-vm.component';
-
-describe('OnboardVnfVmComponent', () => {
-  let component: OnboardVnfVmComponent;
-  let fixture: ComponentFixture<OnboardVnfVmComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ OnboardVnfVmComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(OnboardVnfVmComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
deleted file mode 100644
index dd2e7dd7..00000000
--- a/usecaseui-portal/src/app/services/onboard-vnf-vm/onboard-vnf-vm.component.ts
+++ /dev/null
@@ -1,670 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http';
-import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core';
-import { NzNotificationService } from 'ng-zorro-antd';
-// import { MyhttpService } from '../../myhttp.service';
-import { onboardService } from '../../onboard.service';
-import { slideToRight } from '../../animates';
-import { NzMessageService, UploadFile, NzModalRef, NzModalService } from 'ng-zorro-antd';
-import { filter } from 'rxjs/operators';
-import { Title } from '@angular/platform-browser';
-import * as $ from 'jquery';
-
-
-@Component({
-  selector: 'app-onboard-vnf-vm',
-  templateUrl: './onboard-vnf-vm.component.html',
-  styleUrls: ['./onboard-vnf-vm.component.less'],
-  animations: [slideToRight]
-})
-export class OnboardVnfVmComponent implements OnInit {
-  @HostBinding('@routerAnimate') routerAnimateState;
-
-  // delete Modal
-  confirmModal: NzModalRef;
-  nsdInfoId = '';
-  vnfPkgId = '';
-  pnfdInfoId = '';
-  tabTitle = "NS";
-  nsuploading = false;
-  vnfuploading = false;
-  pnfloading = false;
-  fileList: UploadFile[] = [];
-  fileListNS: UploadFile[] = [];
-  fileListVNF: UploadFile[] = [];
-  fileListPNF: UploadFile[] = [];
-  // onboard initial value
-  status = "Onboard Available";
-  jobId = '';
-  //url
-  url = {
-    // line up
-    ns: '/api/nsd/v1/ns_descriptors/*_*/nsd_content',
-    vnf: '/api/vnfpkgm/v1/vnf_packages/*_*/package_content',
-    pnf: '/api/nsd/v1/pnf_descriptors/*_*/pnfd_content'
-    // line local
-    //ns: 'https://jsonplaceholder.typicode.com/posts/',
-    //vnf: 'https://jsonplaceholder.typicode.com/posts/',
-    //pnf: 'https://jsonplaceholder.typicode.com/posts/',
-  };
-  constructor(
-    private myhttp: onboardService,
-    private http: HttpClient,
-    private msg: NzMessageService,
-    private titleService: Title,
-    private modal: NzModalService,
-    private modalService: NzModalService,
-    private notification: NzNotificationService
-  ) { }
-  //default Call ns data by default
-  ngOnInit() {
-    this.getTableData();
-  }
-
-  //Tabular data
-  nstableData: any;
-  vnftableData: any;
-  pnftableData: any;
-  nssdcData: any;
-  nsvfcData: any;
-
-  vnfsdcData: any;
-  vnfvfcData: any;
-  nspageIndex = 1;
-  nspageSize = 10;
-  vnfpageIndex = 1;
-  vnfpageSize = 10;
-  pnfpageIndex = 1;
-  pnfpageSize = 10;
-  total;
-  nsloading = false;
-  sortName = null;
-  sortValue = null;
-  tabs = ['NS', 'VNF', 'PNF'];
-  isSpinning = false;
-
-  //2019.08.14 add
-  notificationAttributes = {
-    "title": this.tabs[0],
-    "imgPath": "../../../../assets/images/execute-inproess.png",
-    "action": "OnboardingState",
-    "status": "InProgress",
-    "id": null
-  };
-  notificationModelShow(template: TemplateRef<{}>): void {
-    this.notification.template(template);
-  }
-  notificationSuccess(notificationModel) {
-    this.notificationAttributes.imgPath = "../../../assets/images/execute-success.png";
-    this.notificationAttributes.status = "Success";
-    this.notificationModelShow(notificationModel);
-  }
-  notificationFailed(notificationModel) {
-    this.notificationAttributes.imgPath = "../../../assets/images/execute-faild.png";
-    this.notificationAttributes.status = "Failed";
-    this.notificationModelShow(notificationModel);
-  }
-  // Handling tab switching request data
-  handleTabChange(tab) {
-    this.tabTitle = tab;
-    switch (tab) {
-      case 'NS':
-        this.nstableData = [];
-        this.getTableData();
-        this.fileList = []; //Empty uploaded files when switching
-        break
-      case 'VNF':
-        this.vnftableData = [];
-        this.getTableVnfData()
-        this.fileList = [];
-        break
-      case 'PNF':
-        this.pnftableData = [];
-        this.getTablePnfData()
-        this.fileList = [];
-        break
-    }
-  }
-
-
-  //before put create--Drag and drop files to the page before uploading
-  requestBody = {
-    "userDefinedData": {
-      "additionalProp1": "",
-      "additionalProp2": "",
-      "additionalProp3": ""
-    }
-  }
-
-  //NS/VNF List add file
-  beforeUpload = (file: UploadFile): boolean => {
-    this.fileList.push(file);
-    return false;
-  }
-
-  // ns  beforeUpload
-  beforeUploadNS = (file: UploadFile): boolean => {
-    this.fileListNS.push(file);
-    this.myhttp.getCreatensData("createNetworkServiceData", this.requestBody)//on-line
-      // this.myhttp.getCreatensData("creatensDataNS")  //local
-      .subscribe((data) => {
-        this.nsdInfoId = data["id"];
-      }, (err) => {
-        console.log(err);
-      })
-    return false;
-  }
-
-  //vnf  beforeUpload
-  beforeUploadVNF = (file: UploadFile): boolean => {
-    this.fileListVNF.push(file);
-    this.myhttp.getCreatensData("createVnfData", this.requestBody)//on-line
-      // this.myhttp.getCreatensData("creatensDataVNF") //local
-      .subscribe((data) => {
-        this.vnfPkgId = data["id"];
-      }, (err) => {
-        console.log(err);
-      })
-    return false;
-  }
-
-  // //pnf eforeUpload
-  beforeUploadPNF = (file: UploadFile): boolean => {
-    this.fileListPNF.push(file);
-    this.myhttp.getCreatensData("createPnfData", this.requestBody)  //on-line
-      // this.myhttp.getCreatensData("creatensDataPNF")  //local
-      .subscribe((data) => {
-        this.pnfdInfoId = data["id"];
-      }, (err) => {
-        console.log(err);
-      })
-    return false;
-  }
-
-  //Get list list id
-  onClickId(id, tab) {
-    switch (tab) {
-      case 'NS':
-        this.nsdInfoId = id;
-        break
-      case 'VNF':
-        this.vnfPkgId = id;
-        break
-      case 'PNF':
-        this.pnfdInfoId = id;
-        break
-    }
-  }
-
-  //Drag and drop and click the upload button
-  onClick(tab) {
-    switch (tab) {
-      case 'NS':
-        // this.handleUpload('/api/nsd/v1/ns_descriptors/'+this.nsdInfoId+'/nsd_content',tab);
-        this.handleUpload(this.url.ns.replace("*_*", this.nsdInfoId), tab);
-        this.getTableData();
-        break
-      case 'VNF':
-        // this.handleUpload('/api/vnfpkgm/v1/vnf_packages/'+this.vnfPkgId+'/package_content',tab); 
-        this.handleUpload(this.url.vnf.replace("*_*", this.vnfPkgId), tab);
-        this.getTableVnfData()
-        break
-      case 'PNF':
-        // this.handleUpload('/api/nsd/v1/pnf_descriptors/'+this.pnfdInfoId+'/pnfd_content',tab);
-        this.handleUpload(this.url.pnf.replace("*_*", this.pnfdInfoId), tab);
-        this.getTablePnfData();
-        break
-    }
-  }
-
-  nsRightList = [];
-  nsNum = 0;
-  vnfRightList = [];
-  vnfNum = 0;
-  pnfRightList = [];
-  pnfNum = 0;
-  //put Upload Upload
-  handleUpload(url, tab): void {
-    const formData = new FormData();
-    // tslint:disable-next-line:no-any
-    switch (tab) {
-      case "NS":
-        this.fileListNS.forEach((file: any) => {
-          formData.append('file', file);
-        });
-        this.nsuploading = true;
-        let lastNs = this.fileListNS[this.fileListNS.length - 1];
-        let nsfile = {
-          name: lastNs.name,
-          uid: lastNs.uid,
-          progress: 0,
-          status: true,
-          success: 0
-        };
-        this.nsNum += 1;
-        this.nsRightList.push(nsfile);
-        let requeryNs = (nsfile) => {
-          setTimeout(() => {
-            nsfile.progress += 2;
-            if (nsfile.progress < 100) {
-              requeryNs(nsfile)
-            } else {
-              nsfile.progress = 100;
-              nsfile.status = false;
-            }
-          }, 100)
-        };
-        requeryNs(nsfile);
-        break
-      case "VNF":
-        this.fileListVNF.forEach((file: any) => {
-          formData.append('file', file);
-        });
-        this.vnfuploading = true;
-        let lastVnf = this.fileListVNF[this.fileListVNF.length - 1];
-        let vnffile = {
-          name: lastVnf.name,
-          uid: lastVnf.uid,
-          progress: 0,
-          status: true,
-          success: 0
-        };
-        this.vnfNum += 1;
-        this.vnfRightList.push(vnffile);
-        let requeryVnf = (vnffile) => {
-          setTimeout(() => {
-            vnffile.progress += 2;
-            if (vnffile.progress < 100) {
-              requeryVnf(vnffile)
-            } else {
-              vnffile.progress = 100;
-              vnffile.status = false;
-            }
-          }, 100)
-        };
-        requeryVnf(vnffile);
-        break
-      case "PNF":
-        this.fileListPNF.forEach((file: any) => {
-          formData.append('file', file);
-        });
-        this.pnfloading = true;
-        let lastPnf = this.fileListPNF[this.fileListPNF.length - 1];
-        let pnffile = {
-          name: lastPnf.name,
-          uid: lastPnf.uid,
-          progress: 0,
-          status: true,
-          success: 0
-        };
-        this.pnfNum += 1;
-        this.pnfRightList.push(pnffile);
-        let requeryPnf = (pnffile) => {
-          setTimeout(() => {
-            pnffile.progress += 2;
-            if (pnffile.progress < 100) {
-              requeryPnf(pnffile)
-            } else {
-              pnffile.progress = 100;
-              pnffile.status = false;
-            }
-          }, 100)
-        };
-        requeryPnf(pnffile);
-        break
-    }
-    // line PUT
-    const req = new HttpRequest('PUT', url, formData, {
-      reportProgress: true,
-      withCredentials: true
-    });
-    //Upload pre-empty array
-    this.fileList = [];
-    this.fileListNS = [];
-    this.fileListVNF = [];
-    this.fileListPNF = [];
-    this.http.request(req)
-      .pipe(filter(e => e instanceof HttpResponse))
-      .subscribe(
-        (event: {}) => {
-          if (tab == "NS") {
-            this.nsRightList[this.nsNum - 1].progress = 100;
-            this.nsRightList[this.nsNum - 1].status = false;
-            this.nsRightList[this.nsNum - 1].success = 0;
-          }
-          if (tab == "VNF") {
-            this.vnfRightList[this.vnfNum - 1].progress = 100;
-            this.vnfRightList[this.vnfNum - 1].status = false;
-            this.vnfRightList[this.vnfNum - 1].success = 0;
-          }
-          if (tab == "PNF") {
-            this.pnfRightList[this.pnfNum - 1].progress = 100;
-            this.pnfRightList[this.pnfNum - 1].status = false;
-            this.pnfRightList[this.pnfNum - 1].success = 0;
-          }
-          this.changeUploadingSta(tab);
-          this.msg.success('upload successfully.');
-        },
-        err => {
-          if (tab == "NS") {
-            this.nsRightList[this.nsNum - 1].progress = 100;
-            this.nsRightList[this.nsNum - 1].status = false;
-            this.nsRightList[this.nsNum - 1].success = 1;
-          }
-          if (tab == "VNF") {
-            this.vnfRightList[this.vnfNum - 1].progress = 100;
-            this.vnfRightList[this.vnfNum - 1].status = false;
-            this.vnfRightList[this.vnfNum - 1].success = 1;
-          }
-          if (tab == "PNF") {
-            this.pnfRightList[this.pnfNum - 1].progress = 100;
-            this.pnfRightList[this.pnfNum - 1].status = false;
-            this.pnfRightList[this.pnfNum - 1].success = 1;
-          }
-          this.changeUploadingSta(tab);
-          this.msg.error('upload failed.');
-        }
-      );
-  }
-
-  //  Control the status of uploading
-  changeUploadingSta(tab) {
-    switch (tab) {
-      case "NS":
-        this.nsuploading = false;
-        break
-      case "VNF":
-        this.vnfuploading = false;
-        break
-      case "PNF":
-        this.pnfloading = false;
-    }
-  }
-
-  //----------------------------------------------------------------------------------------------
-
-  // Get the NS list
-  getTableData() {
-    this.isSpinning = true;
-    //ns vfc lists 
-    this.myhttp.getOnboardTableData()
-      .subscribe((data) => {
-        this.nsvfcData = data;
-        this.nstableData = this.nsvfcData;
-        //ns sdc list
-        this.myhttp.getSDC_NSTableData()
-          .subscribe((data) => {
-            this.isSpinning = false; //loading hide
-            this.nssdcData = data;
-            this.nsvfcData.map((nsvfc) => { nsvfc.sameid = this.nssdcData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; });
-            let sameData = this.nssdcData.filter((nssdc) => { return !this.nsvfcData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) });
-            this.nstableData = this.nstableData.concat(sameData);
-          }, (err) => {
-            console.log(err);
-            this.isSpinning = false;
-          })
-      }, (err) => {
-        console.log(err);
-        this.isSpinning = false;
-      })
-
-  }
-
-  // Get the vnf list
-  getTableVnfData() {
-    this.isSpinning = true;
-    //vnf vfc lists
-    this.myhttp.getOnboardTableVnfData()
-      .subscribe((data) => {
-        this.vnfvfcData = data;
-        this.vnftableData = this.vnfvfcData;
-        //vnf sdc lists
-        this.myhttp.getSDC_VNFTableData()
-          .subscribe((data) => {
-            this.isSpinning = false; //loading hide
-            this.vnfsdcData = data;
-            this.vnfvfcData.map((vnfvfc) => { vnfvfc.sameid = this.vnfsdcData.find((nssdc) => { return vnfvfc.id == nssdc.uuid }) && vnfvfc.id; return vnfvfc; });
-            let sameData = this.vnfsdcData.filter((vnfsdc) => { return !this.vnfvfcData.find((vnfvfc) => { return vnfvfc.id == vnfsdc.uuid }) });
-            this.vnftableData = this.vnftableData.concat(sameData);
-          }, (err) => {
-            console.log(err);
-          })
-
-      }, (err) => {
-        console.log(err);
-      })
-  }
-
-  // Get pnf list
-  getTablePnfData() {
-    this.isSpinning = true;
-    this.myhttp.getOnboardTablePnfData()
-      .subscribe((data) => {
-        this.pnftableData = data;
-        this.isSpinning = false;   //loading hide
-      }, (err) => {
-        console.log(err);
-      })
-  }
-
-  //-----------------------------------------------------------------------------------
-  /* onboard */
-  //Successful frame
-  success(tab): void {
-    const modal = this.modalService.success({
-      nzTitle: 'This is an success message',
-      nzContent: 'Package Onboard Completed.'
-    });
-    switch (tab) {
-      case "NS":
-        this.getTableData();
-        break
-      case "VNF":
-        this.getTableVnfData();
-        break
-    }
-  }
-
-  //Failure frame
-  error(): void {
-    this.modalService.error({
-      nzTitle: 'This is an error message',
-      nzContent: 'Package Onboard Failed!'
-    });
-  }
-
-  //onboard status
-  onboardData = {
-    status: "onboard",
-    progress: 0,
-  }
-  currentIndex = 0;
-  // ns onboard Upload button
-  updataNsService(id, index, notificationModel) {
-    this.currentIndex = index;
-    this.onboardData.status = "onboarding"; //Disabled
-    this.onboardData.progress = 0;
-    let requestBody = {
-      "csarId": id
-    };
-    this.notificationAttributes = {
-      "title": this.tabs[0],
-      "imgPath": "../../../../assets/images/execute-inproess.png",
-      "action": "OnboardingState",
-      "status": "InProgress",
-      "id": id
-    };
-    this.notificationModelShow(notificationModel);
-    this.myhttp.getNsonboard(requestBody)
-      .subscribe((data) => {
-        if (data.status == "failed") {
-          this.onboardData.status = "Failed";
-          this.notificationFailed(notificationModel);
-          this.error();
-          return false
-        } else if (data.status == "success") {
-          this.success("NS");
-          this.onboardData.status = "onboarded";
-          this.notificationSuccess(notificationModel);
-        }
-      }, (err) => {
-        console.log(err);
-      })
-  }
-
-  // vnf onboard Upload button
-  updataVnfService(id, index, notificationModel) {
-    this.currentIndex = index;
-    this.onboardData.status = "onboarding";  //Disabled button
-    this.onboardData.progress = 0;
-
-
-    let requestBody = {
-      "csarId": id
-    };
-    this.notificationAttributes = {
-      "title": this.tabs[1],
-      "imgPath": "../../../../assets/images/execute-inproess.png",
-      "action": "OnboardingState",
-      "status": "InProgress",
-      "id": id
-    };
-    this.notificationModelShow(notificationModel);
-    this.myhttp.getVnfonboard(requestBody)
-      .subscribe((data) => {
-        this.jobId = data.jobId;
-        this.queryProgress(this.jobId, 0, notificationModel);   //vnf Need to query progress interface
-      }, (err) => {
-        console.log(err);
-      })
-  }
-
-  //Progress Progress inquiry
-  queryProgress(jobId, responseId, notificationModel) {
-    let mypromise = new Promise((res) => {
-      this.myhttp.getProgress(jobId, responseId)
-        .subscribe((data) => {
-          if (data.responseDescriptor == null || data.responseDescriptor == "null" || data.responseDescriptor.progress == undefined || data.responseDescriptor.progress == null) {
-            this.onboardData.status = "onboarding";
-            setTimeout(() => {
-              this.queryProgress(this.jobId, 0, notificationModel);
-            }, 10000)
-            return false
-          }
-          if (data.responseDescriptor.progress > 100) {
-            this.onboardData.status = "Failed";
-            this.notificationFailed(notificationModel);
-            this.error();
-            return false
-          }
-          if (data.responseDescriptor.progress < 100) {
-            this.onboardData.status = "onboarding";
-            setTimeout(() => {
-              this.queryProgress(this.jobId, 0, notificationModel);
-            }, 5000)
-          } else if (data.responseDescriptor.progress == 100) {
-            res(data);
-            this.success("VNF");
-            this.onboardData.status = "onboarded";
-            this.notificationSuccess(notificationModel);
-          }
-          return false
-        })
-    })
-    return mypromise;
-  }
-
-  //--------------------------------------------------------------------------------
-  /* delete button */
-  showConfirm(index, pkgid, tab, notificationModel): void {
-    this.notificationAttributes = {
-      "title": this.tabs[0],
-      "imgPath": "../../../../assets/images/execute-inproess.png",
-      "action": "OnboardingState",
-      "status": "InProgress",
-      "id": pkgid
-    };
-    this.confirmModal = this.modal.confirm({
-      nzTitle: 'Do you Want to delete these items?',
-      nzContent: 'Do you Want to delete these items?',
-      nzOkText: 'Yes',
-      nzCancelText: 'No',
-      nzOnOk: () => new Promise((resolve, reject) => {
-        switch (tab) {
-          case 'NS':
-            this.notificationAttributes.title = this.tabs[0];
-            this.notificationModelShow(notificationModel);
-            this.deleteNsService(index, pkgid, notificationModel);
-            setTimeout(Math.random() > 0.5 ? resolve : reject, 2000);
-            break
-          case 'VNF':
-            this.notificationAttributes.title = this.tabs[1];
-            this.notificationModelShow(notificationModel);
-            this.deleteVnfService(index, pkgid, notificationModel);
-            setTimeout(Math.random() > 0.5 ? resolve : reject, 2000);
-            break
-          case 'PNF':
-            this.notificationAttributes.title = this.tabs[2];
-            this.notificationModelShow(notificationModel);
-            this.deletePnfService(index, pkgid, notificationModel);
-            setTimeout(Math.random() > 0.5 ? resolve : reject, 2000);
-            break
-        }
-      }).catch(() => console.log('Oops errors!'))
-    });
-  }
-
-  //delete nsItem
-  deleteNsService(index, pkgid, notificationModel) {
-    this.myhttp.deleteNsIdData(pkgid)
-      .subscribe((data) => {
-        this.notificationSuccess(notificationModel);
-        //refresh list after successful deletion
-        this.getTableData();
-      }, (err) => {
-        console.log(err);
-        this.notificationFailed(notificationModel);
-      })
-  }
-
-  //delete vnfItem
-  deleteVnfService(index, pkgid, notificationModel) {
-    this.myhttp.deleteVnfIdData(pkgid)
-      .subscribe((data) => {
-        this.notificationSuccess(notificationModel);
-        //refresh list after successful deletion
-        this.getTableVnfData()
-      }, (err) => {
-        console.log(err);
-        this.notificationFailed(notificationModel);
-      })
-  }
-
-  //delete PnfItem
-  deletePnfService(index, pkgid, notificationModel) {
-    this.myhttp.deletePnfIdData(pkgid)
-      .subscribe((data) => {
-        //refresh list after successful deletion
-        this.notificationSuccess(notificationModel);
-        this.getTablePnfData()
-      }, (err) => {
-        console.log(err);
-        this.notificationFailed(notificationModel);
-      })
-  }
-
-}
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.css b/usecaseui-portal/src/app/services/services-list/services-list.component.css
deleted file mode 100644
index 0a7f92eb..00000000
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.css
+++ /dev/null
@@ -1,145 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-.title {
-  font: 700 18px/18px "思源黑体";
-  color: #4c5e70;
-  margin-bottom: 18px;
-}
-hr {
-  border: none;
-  height: 2px;
-  background-color: #dce1e7;
-  margin-bottom: 20px;
-}
-.action {
-  margin-bottom: 20px;
-}
-.action span {
-  display: inline-block;
-  font: 700 14px "Arial";
-  color: #4c5e70;
-}
-.action nz-dropdown {
-  vertical-align: middle;
-}
-.action nz-dropdown :hover {
-  border-color: #147dc2;
-}
-.action nz-dropdown button {
-  width: 165px;
-  height: 30px;
-  background-color: #eceff4;
-  text-align: left;
-  border-color: #9fa9ab;
-}
-.action nz-dropdown button span {
-  font-weight: 400;
-  display: inline-block;
-  width: 120px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-top: 2px;
-}
-.action nz-dropdown button i {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-}
-.action .create {
-  float: right;
-  height: 30px;
-  padding: 0 10px;
-}
-.action .create span {
-  color: #fff;
-  font-weight: 400;
-}
-.list {
-  background-color: #fff;
-  border-radius: 5px;
-  padding: 10px;
-}
-.list nz-table tbody td span.active {
-  font-size: 14px;
-  color: #147dc2;
-}
-.list nz-table tbody td span.closed {
-  font-size: 14px;
-  color: red;
-}
-.list nz-table tbody td span.onboarding {
-  font-size: 12px;
-  color: #147dc2;
-}
-.list nz-table tbody td span.updating {
-  font-size: 12px;
-  color: blue;
-}
-.list nz-table tbody td span.deleting {
-  font-size: 12px;
-  color: red;
-}
-.list nz-table tbody td span.creating {
-  font-size: 12px;
-  color: green;
-}
-.list nz-table tbody td span.scaling {
-  font-size: 12px;
-  color: purple;
-}
-.list nz-table tbody td span.healing {
-  font-size: 12px;
-  color: orangered;
-}
-.list nz-table tbody td i.anticon {
-  cursor: pointer;
-  font-size: 18px;
-  padding: 2px;
-}
-.list nz-table tbody td i.anticon:hover {
-  color: #147dc2;
-}
-.list nz-table tbody td .cannotclick {
-  pointer-events: none;
-  color: #aaa;
-  opacity: 0.6;
-}
-.list nz-table tbody tr.childtr td {
-  font-size: 12px;
-  color: #147dc2;
-}
-.detailComponent {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100vh;
-  background-color: #f3f3f3;
-  overflow-y: auto;
-  padding: 20px 32px;
-  z-index: 3;
-}
-.createComponent {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100vh;
-  background-color: #f3f3f3;
-  overflow-y: auto;
-  padding: 20px 32px;
-  z-index: 3;
-}
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
deleted file mode 100644
index d47b342c..00000000
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ /dev/null
@@ -1,769 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<div class="action ant-tabs-bar">
-
-    <span>
-        <i class="icon">
-            <img src="../../../assets/images/customer.png" alt="">
-        </i>
-         {{"i18nTextDefine_Customer" | translate}} : 
-    </span>
-    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
-        <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i>
-        </button>
-        <ul nz-menu>
-            <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
-                <a title="{{item.name}}">{{item.name}}</a>
-            </li>
-        </ul>
-    </nz-dropdown>
-
-    <span>
-        <i class="icon">
-            <img src="../../../assets/images/service-type.png"alt="">
-        </i> 
-        {{"i18nTextDefine_ServiceType" | translate}} : 
-    </span>
-    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
-        <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i>
-        </button>
-        <ul nz-menu>
-            <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
-                <a title="{{item.name}}">{{item.name}}</a>
-            </li>
-        </ul>
-    </nz-dropdown>
-
-    <button class="create" nz-button [nzType]="'primary'" (click)="createModal()">
-        <i *ngIf="width>1200" class="anticon anticon-plus"></i>
-        <span> {{"i18nTextDefine_Create" | translate}} </span>
-    </button>
-    <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} "
-              (nzOnCancel)="handleCancel()"
-              (nzOnOk)="handleOk()" nzClassName="serviceCreationModel"
-              nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
-              nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
-        <div class="select-list">
-            <span style="display:inline-block;"> {{"i18nTextDefine_Customer" | translate}} : </span>
-            <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear
-                       (ngModelChange)="customerChange()">
-                <nz-option *ngFor="let item of customerList2" [nzValue]="item.name" [nzLabel]="item.name"></nz-option>
-            </nz-select>
-        </div>
-        <div class="select-list">
-            <span style="display:inline-block;"> {{"i18nTextDefine_ServiceType" | translate}} : </span>
-            <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelectedName" nzAllowClear
-                       (ngModelChange)="serviceTypeChange()">
-                <nz-option *ngFor="let item of serviceTypeList2" [nzValue]="item.name"
-                           [nzLabel]="item.name"></nz-option>
-            </nz-select>
-        </div>
-        <div class="select-list">
-            <span style="display:inline-block;"> {{"i18nTextDefine_UseCase" | translate}} : </span>
-            <nz-select style="width: 176px;float: right;" [(ngModel)]="templateTypeSelected" nzAllowClear
-                       (ngModelChange)="choseTemplateType()">
-                <!-- <nz-option *ngFor="let item of templateType" [nzValue]="item" [nzLabel]="item"></nz-option> -->
-                <nz-option nzValue="SOTN" nzLabel="SOTN"></nz-option>
-                <nz-option nzValue="CCVPN" nzLabel="CCVPN"></nz-option>
-                <nz-option nzValue="E2E Service" nzLabel="E2E Service"></nz-option>
-                <nz-option nzValue="Network Service" nzLabel="Network Service"></nz-option>
-            </nz-select>
-        </div>
-
-        <div class="select-list">
-            <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Template" | translate}} : </span>
-            <nz-select style="width: 176px;float: right;" [(ngModel)]="template1" nzAllowClear>
-                <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
-            </nz-select>
-        </div>
-        <div *ngIf="templateTypeSelected == 'E2E Service'">
-            <div class="select-list">
-                <span style="display:inline-block;width:70px;"> {{"i18nTextDefine_Orchestrator" | translate}} : </span>
-                <nz-select style="width: 176px;float: right;" [(ngModel)]="orchestratorSelected" nzAllowClear>
-                    <nz-option *ngFor="let item of orchestratorList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
-                </nz-select>
-            </div>
-        </div>
-        <div *ngIf="templateTypeSelected == 'E2E Service'">
-            <div class="check-box" style="margin:30px; height: 50px">
-                <input class="check-box-style" style="zoom: 1.8; width: 70px" type="checkbox"
-                       [(ngModel)]="isSol005Interface" value="true" nzAllowClear>
-                <label class="label" style="font-size: 20px; color: rgb(60,79,140,0.5)">Sol005</label>
-            </div>
-        </div>
-        <div class="select-list" style="color: red;margin-left: 66px;" *ngIf="temParametersTips">
-            {{"i18nTextDefine_Templateparsingfailed" | translate}}
-        </div>
-    </nz-modal>
-</div>
-<nz-layout style=" padding: 20px 32px; ">
-    <ul class="top-num">
-        <li *ngFor="let item of serviceMunber" class="top-list">
-            <span class="round">{{item.serviceDomain}}</span>
-            <div class="top-list-text">
-                <p>
-                    <span>{{item.failed}}</span>
-                    <span> {{"i18nTextDefine_Failed" | translate}} </span>
-                </p>
-                <p>
-                    <span>{{item.Success}}</span>
-                    <span> {{"i18nTextDefine_Success" | translate}} </span>
-                </p>
-                <p>
-                    <span>{{item.InProgress}}</span>
-                    <span> {{"i18nTextDefine_InProgress" | translate}} </span>
-                </p>
-            </div>
-            <p class="service-description"> {{item.detailName | translate}} </p>
-        </li>
-    </ul>
-    <div class="list" id="services-list" [ngClass]="{'listdisplay':listDisplay == true}">
-        <nz-table *ngIf="1"
-                  #nzTable [nzData]="tableData"
-                  nzShowSizeChanger
-                  [nzFrontPagination]="false"
-                  [nzShowQuickJumper]="true"
-                  [nzPageSizeOptions]="[5,10,15,20]"
-                  [nzTotal]='total'
-                  [(nzPageSize)]="pageSize"
-                  [(nzPageIndex)]='pageIndex'
-                  [nzLoading]="loading"
-                  [nzSize]="'middle'"
-                  [nzScroll]="{ y: '58vh' }"
-                  (nzPageIndexChange)="searchData()"
-                  (nzPageSizeChange)="searchData(true)">
-            <thead>
-            <tr>
-                <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}}</th>
-                <th nzWidth="5%"></th>
-                <th nzWidth="20%"> {{"i18nTextDefine_Name" | translate}}</th>
-                <th nzWidth="20%"> {{"i18nTextDefine_InstanceID" | translate}}</th>
-                <th nzWidth="15%"> {{"i18nTextDefine_UseCase" | translate}}</th>
-                <th nzWidth="20%"> {{"i18nTextDefine_Status" | translate}}</th>
-                <th nzWidth="15%"> {{"i18nTextDefine_Action" | translate}}</th>
-            </tr>
-            </thead>
-            <tbody>
-            <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
-                <tr>
-                    <td>{{pageSize*(pageIndex-1) + i+1}}</td>
-                    <td [nzShowExpand]="data.childServiceInstances[0]" [(nzExpand)]="data.expand"></td>
-                    <td>{{data["service-instance-name"] || data.nsName}}</td>
-                    <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
-                    <td>
-                        <p [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN','voLTEColor':data.serviceDomain=='voLTE type'}">
-                            {{data.serviceDomain}}
-                        </p>
-                    </td>
-                    <td>
-              <span [ngClass]="{'active':data.statusClass=='2001','closed':data.statusClass=='Closed','onboarding':data.statusClass=='Onboarding',
-                    'updating':data.statusClass=='Updating','deleting':data.statusClass=='1002','creating':data.statusClass=='1001',
-                    'scaling':data.statusClass=='1003','healing':data.statusClass=='1004'}"
-                    *ngIf="data.tips != 'Available' && data.tips != 'Unavailable'">{{data.tips}}</span>
-                        <span *ngIf="data.tips == 'Available' " style="margin-left: 10px">
-                            <img src="assets/images/wancheng-icon.png" alt="Available">
-                        </span>
-                        <span *ngIf="data.tips == 'Unavailable' " style="margin-left: 10px">
-                            <img src="assets/images/shibai-icon.png" alt="Unavailable">
-                        </span>
-                        <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate" [nzShowInfo]="false"
-                                     nzStatus="active"></nz-progress>
-                    </td>
-                    <td>
-                        <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
-                           class="anticon anticon-bars" (click)="serviceDetail(data,1)"></i>
-                        <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-delete"
-                           (click)="deleteModel(data)"></i>
-                        <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-ellipsis"
-                           (click)="iconMoreShow(data,tableData)" style="transform: rotate(90deg);"></i>
-
-                        <ul *ngIf="data.iconMore==true " class="icon-more">
-                            <li (click)="scaleService(data)"
-                                [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
-                                <i class="anticon anticon-scale"></i>
-                                <span> {{"i18nTextDefine_Scale" | translate}} </span>
-                            </li>
-                            <li (click)="serviceDetail(data,2)"
-                                [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}">
-                                <i class="anticon anticon-update"></i>
-                                <span> {{"i18nTextDefine_Update" | translate}} </span>
-                            </li>
-                        </ul>
-                        <!-- <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network Service' " class="anticon anticon-cloud-upload-o" (click)="updataService(data)"></i> -->
-                        <!-- <i [ngClass]="{'cannotclick':data.status == 'processing'||data.status=='Deleting'||data.status=='Creating'||data.status=='Healing'}"
-                          *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="healService(data)"></i> -->
-                    </td>
-                </tr>
-                <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
-                    <td></td>
-                    <td></td>
-                    <td>{{item["service-instance-id"] || item.nsInstanceId || item.vnfInstanceId}}</td>
-                    <td>{{item["service-instance-name"] || item.nsName || item.vnfInstanceName}}</td>
-                    <td>
-                        <p [ngClass]="{'vnfColor':item.serviceDomain=='vnf','siteColor':item.serviceDomain=='SITE','SDWANColor':item.serviceDomain=='SDWAN'}">
-                            {{item.serviceDomain}}
-                        </p>
-                    </td>
-                    <td>
-                        <span [ngClass]="{'healing':data.statusClass=='1004'}">{{item.tips}}</span>
-                        <nz-progress *ngIf=" item.status == 'In Progress' " [nzPercent]="item.rate"></nz-progress>
-                    </td>
-                    <td>
-                        <i [ngClass]="{'cannotclick':data.serviceDomain!='Network Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
-                           class="anticon anticon-reload" (click)="healService(item)"></i>
-                    </td>
-                </tr>
-            </ng-template>
-            </tbody>
-        </nz-table>
-
-        <nz-modal nzWidth="428" [nzVisible]="scaleModelVisible" nzTitle=" {{'i18nTextDefine_Scale' | translate}} "
-                  (nzOnCancel)="scaleCancel()"
-                  (nzOnOk)="scaleOk(templatescalestarting,templateScaleSuccessFaild)" nzClassName="scaleModel"
-                  nzCancelText=" {{'i18nTextDefine_Cancel' | translate}} "
-                  nzOkText=" {{'i18nTextDefine_modelOk' | translate}} ">
-            <h3><span style="color: red">*&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>
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less
deleted file mode 100644
index 2a19e5bb..00000000
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ /dev/null
@@ -1,433 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-@media screen and (min-width: 1050px){
-    .action{
-        span:nth-of-type(2){
-            margin-left: 40px;
-        }
-    }
-    
-}
-@media screen and (max-width: 1050px){
-    .action{
-        span:nth-of-type(2){
-            margin-left: 20px;
-        }
-    }
-    
-}
-@media screen and (max-width: 1300px){
-    .top-list-text{
-        p{
-            width: 200px;
-        }
-    }
-}
-@media screen and (min-width: 1200px){
-    .round{
-        top:45%;
-        left: 50px;
-        margin-top: -40px;
-    }
-    
-}
-
-@media screen and (max-width: 1200px){
-    .round{
-        top:12%;
-        left: 12%;
-    }
-    .top-list-text{
-        p{
-            width: 170px;
-        }
-    }
-    
-}
-
-
-.title {
-    font: 700 18px/18px "思源黑体";
-    color: #4c5e70;
-    margin-bottom: 18px; 
-}
-hr {
-    border: none;
-    height: 2px;
-    background-color: #dce1e7;
-    margin-bottom: 20px;
-}
-.ant-tabs-bar{
-    margin-bottom: 0!important;
-}
-.ant-dropdown-menu{
-    min-height:40px;
-    max-height: 200px;
-    overflow: auto;
-}
-.ant-dropdown-menu-item{
-    a{
-        max-width: 165px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-}
-.mask{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 999;
-    background: rgba(0, 0, 0, 0.65);
-    top:0;
-}
-.loading{
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    margin-top: -50px;
-    margin-left: -50px;
-    z-index: 1001;
-    text-align: center;
-    background: transparent;
-    p{
-        color: #0DA9E2;
-        text-align: center;
-        position: absolute;
-        width: 300px;
-        height: 30px;
-        line-height: 30px;
-        top: 71%;
-        left: 36%;
-        margin-top: -150px;
-        margin-left: -150px;
-    }
-    img{
-        width: 300px;
-        height: 300px;
-        position: absolute;
-        top: 50%;
-        left: 36%;
-        margin-top: -150px;
-        margin-left: -150px;
-    }
-}
-.action {
-    margin-bottom: 15px;
-    padding: 28px;
-    background: #ffffff;
-    position: relative;
-    span {
-        display: inline-block;
-        font: 700 14px "Arial";
-        color: #3C4F8C;
-        margin-right: 5px;
-        .icon{
-            margin-right: 10px;
-        }
-    }
-    nz-dropdown {
-        width: 20%;
-        vertical-align: middle;
-        background-color:#ffffff;
-        :hover{
-            border-color: #48C6EF;
-        }
-        button {
-            width: 100%;
-            max-width:165px;
-            height: 42px;
-            background-color:#ffffff;
-            text-align: left;
-            border-color: #EEEEEE;
-            span {
-                font-weight: 400;
-                color: #3C4F8C;
-                display: inline-block;
-                width: 120px;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                padding-top: 2px;
-            }
-            i {
-                position: absolute;
-                top: 10px;
-                right: 10px;
-            }
-        }
-    }
-    //The style in the drop-down box is in style.less, and the drop-down box is extra temporary generated in the body.
-    .create {
-        position: absolute;
-        right: 3%;
-        top:50%;
-        height:42px;
-        background:#0DA9E2;
-        border-radius:6px;
-        margin-top: -15px;
-        i{
-            transform: scale(1.5);
-            line-height: 15px;
-            margin-right: 5px;
-        }
-        span {
-            color: #fff;
-            font-weight: 400;
-            font-size: 18px;
-        }
-        .anticon-plus-circle-o{
-            font-size: 18px;
-        }
-    }
-    .create.ant-btn.ant-btn-primary{
-        border: none;
-    }
-    .create:hover{
-        background:#09C6E2;
-    }
-
-}
-nz-layout{
-    padding: 20px 32px;
-    .top-num{
-
-        width: 100%;
-        display: flex;
-        justify-content: space-around;
-        .top-list{
-            position: relative;
-            width:32%;
-            max-width:400px;
-            height:170px;
-            background:url("../../../assets/images/servicelist-e2e.png") no-repeat;
-            background-size: 100% 100%;
-            border-radius:2px;
-            .round{
-                position: absolute;
-                width: 60px;
-                height: 60px;
-                line-height: 60px;
-                text-align: center;               
-                background:#E0EDFF;
-                border:2px solid rgba(224,237,255,1);
-                border-radius: 50%;
-                font-size:16px;
-                font-family:ArialMT;
-                color:#3C4F8C;
-                transition: .5s;    
-            }
-            .top-list-text{
-                position: absolute;
-                text-align: right;
-                line-height: 20px;
-                right: 12%;
-                color: #fff;
-                p{
-                    height: 28px;
-                    margin-bottom: 0;
-                    padding-left: 5px;
-                    font-size: 14px;
-                    clear: both;
-                    span{
-                        display: inline-block;
-                        float: right;
-                        font-weight: 500;
-                        text-align: right;
-                    }
-                    span:nth-child(1){
-                        font-size: 18px;
-                        margin-left: 15px;
-                    }
-                    span:nth-child(2){
-                        width: 85px;
-                        font-size: 16px;
-                    }
-                }
-                p:nth-child(1){
-                    margin-top: 25px;
-                }
-                .service-description{
-                    
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    color: #3C4F8C;
-
-                }
-            }
-        }
-        
-    }
-}
-.list {
-    background-color: #fff;
-    border-radius: 5px;
-    padding: 10px;
-    nz-table {
-        tbody {
-            td {
-                position: relative;
-                span.active {
-                    font-size: 14px;
-                    color: #147dc2;
-                }
-                span.closed {
-                    font-size: 14px;
-                    color: red;
-                }
-                span.onboarding{
-                    font-size: 12px;
-                    color: #147dc2;
-                }
-                span.updating{
-                    font-size: 12px;
-                    color: blue;
-                }
-                span.deleting {
-                    font-size: 12px;
-                    color: red;
-                }
-                span.creating {
-                    font-size: 12px;
-                    color: green;
-                }
-                span.scaling {
-                    font-size: 12px;
-                    color: purple;
-                }
-                span.healing {
-                    font-size: 12px;
-                    color: orangered;
-                }
-                i.anticon {
-                    cursor: pointer;
-                    font-size: 18px;
-                    padding: 2px;
-                    &:hover{
-                        color: #147dc2;
-                    }
-                }
-                .cannotclick {
-                    pointer-events: none;
-                    color: #aaa;
-                    opacity: 0.6;
-                }
-                .icon-more{
-                    position: absolute;
-                    width: 115px;
-                    height: 90px;
-                    top:50px;
-                    padding:15px 0 0 15px;
-                    background: #ffffff;
-                    z-index: 2;
-                    border-radius: 5px;
-                    box-shadow: 0px 10px 15px 2px rgba(247, 247, 247, 0.5);
-                    li{
-                        margin-bottom:10px;
-                        line-height: 20px;
-                        text-align: left;
-                        cursor: pointer;
-                        .anticon{
-                            width: 18px;
-                            height: 18px;
-                            background: url("../../../assets/images/scale.png") no-repeat;
-                        }
-                        .anticon.anticon-update{
-                            background: url("../../../assets/images/update.png") no-repeat;
-                        }
-                        span{
-                            margin-left: 5px;
-                        }
-                    }
-                    li:hover{
-                        color: #0DA9E2;
-                        .anticon{
-                            background: url("../../../assets/images/scale-active.png") no-repeat;
-                        }
-                        .anticon.anticon-update{
-                            background: url("../../../assets/images/update-active.png") no-repeat;
-                        }
-                    }
-                }
-            }
-            tr.childtr {
-                td {
-                    font-size: 12px;
-                    color: #147dc2;
-                }
-            }
-        }
-    }
-}
-
-
-.detailComponent {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: #f3f3f3;
-    overflow-y: auto;
-    z-index: 3;
-}
-.createComponent {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: #F7F8FC;
-    overflow-y: auto;
-    z-index: 3;
-}
-
-.e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{
-    width:120px;
-    height: 34px;
-    line-height: 34px;
-    margin-bottom: 0!important;
-    text-align: center;
-    background:rgba(158, 158, 158, 0.38);
-    border-radius:4px
-}
-
-.vnfColor,.siteColor,.SDWANColor{
-    color:rgba(60,79,140,0.5);
-    width:120px;
-    height: 34px;
-    line-height: 34px;
-    margin-bottom: 0!important;
-    text-align: center;
-    background:rgba(238,238,238,1);
-    border-radius:4px;
-}
-
-.select-list{
-    width: 320px;
-    height: 32px;
-    line-height: 32px;
-    margin: 35px auto;
-}
-.select-list>span{
-    text-align: right;
-    width: 110px!important;
-    line-height: 32px;
-}
-
-.listdisplay{
-    display: none;
-}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts
deleted file mode 100644
index 61440dc3..00000000
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ServicesListComponent } from './services-list.component';
-
-describe('ServicesListComponent', () => {
-  let component: ServicesListComponent;
-  let fixture: ComponentFixture<ServicesListComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ServicesListComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ServicesListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
deleted file mode 100644
index 3a07c1fe..00000000
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ /dev/null
@@ -1,1363 +0,0 @@
-/*
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
-*/
-import { Component, OnInit, HostBinding, TemplateRef } from '@angular/core';
-import { MyhttpService } from '../../myhttp.service';
-import { slideToRight } from '../../animates';
-import { NzModalService } from 'ng-zorro-antd';
-import { NzNotificationService } from 'ng-zorro-antd';
-import { Observable } from 'rxjs/Rx';
-
-@Component({
-    selector: 'app-services-list',
-    templateUrl: './services-list.component.html',
-    styleUrls: ['./services-list.component.less'],
-    animations: [slideToRight]
-})
-export class ServicesListComponent implements OnInit {
-    @HostBinding('@routerAnimate') routerAnimateState;
-
-    public width:number = document.documentElement.clientWidth;
-
-    constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) {
-    }
-
-    ngOnInit() {
-        this.getallCustomers();
-        Observable.fromEvent(window, 'resize').subscribe((event) => {
-            this.width = document.documentElement.clientWidth
-        });
-    }
-
-    // customer servicetype
-    isSol005Interface = false;
-    orchestratorList = [];
-    customerList = [];
-    customerList2 = [];
-    customerSelected = { name: null, id: null };
-    customerSelected2 = { name: null, id: null };
-    serviceTypeList = [];
-    serviceTypeList2 = [];
-    serviceTypeSelected = { name: '' };
-    serviceTypeSelected2 = { name: '' };
-    serviceTypeSelectedName = "";
-    templateTypeSelected = "CCVPN";
-    orchestratorSelected = { name: null, id: null };
-    listSortMasters = JSON.parse(sessionStorage.getItem('listSortMasters'));
-    language = sessionStorage.getItem("DefaultLang");
-    iconMore = false;
-    loadingAnimateShow = false;
-    serviceMunber = [ // top: E2E/NS/CCVPN data
-        {
-            "serviceDomain": "E2E",
-            "Success": 0,
-            "failed": 0,
-            "InProgress": 0,
-            "detailName": "i18nTextDefine_End_To_End_Service"
-        },
-        {
-            "serviceDomain": "NS",
-            "Success": 0,
-            "failed": 0,
-            "InProgress": 0,
-            "detailName": "i18nTextDefine_Network_Service"
-        },
-        {
-            "serviceDomain": "CCVPN",
-            "Success": 0,
-            "failed": 0,
-            "InProgress": 0,
-            "detailName": "i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN"
-        }
-    ];
-
-    //The icon behind each row of data in the table expands
-    iconMoreShow(data, tableData) {
-        tableData.map((its) => {
-            if (its["service-instance-id"] == data["service-instance-id"]) {
-                if (its["iconMore"] == false) {
-                    data.iconMore = true;
-                } else if (its["iconMore"] == true) {
-                    data.iconMore = false;
-                }
-            } else {
-                its["iconMore"] = false;
-            }
-        })
-    }
-
-    //Get all the customers
-    getallCustomers() {
-        console.log(this.language, "this.language");
-        this.myhttp.getAllCustomers()
-            .subscribe((data) => {
-                this.customerList = data.map((item) => {
-                    return { name: item["subscriber-name"], id: item["global-customer-id"] }
-                });
-                if (this.customerList.length == 0) {
-                    console.log("customerList.length == 0", this.customerList);
-                    return false;
-                }
-                this.customerList2 = data.map((item) => {
-                    return { name: item["subscriber-name"], id: item["global-customer-id"] }
-                });
-                if (this.customerList2.length == 0) {
-                    return false;
-                }
-                this.customerSelected = this.customerList[0];
-                this.choseCustomer(this.customerSelected);
-            })
-    }
-
-    getallOrchestrators() {
-        this.myhttp.getAllOrchestrators()
-            .subscribe((data) => {
-                this.orchestratorList = data.map((item) => {
-                    return { name: item["name"], id: item["name"] }
-                });
-                if (this.orchestratorList.length == 0) {
-                    console.log("orchestratorList.length == 0", this.orchestratorList);
-                    return false;
-                }
-                this.orchestratorSelected = this.orchestratorList[0];
-            })
-    }
-
-    choseCustomer(item) {
-        this.customerSelected = item;
-        this.myhttp.getServiceTypes(this.customerSelected)
-            .subscribe((data) => {
-                this.serviceTypeList = data.map((item) => {
-                    return { name: item["service-type"] }
-                });
-
-                if (this.serviceTypeList.length == 0) {
-                    console.log("serviceTypeList.length == 0", this.serviceTypeList);
-                    return false;
-                }
-
-                this.serviceTypeSelected = this.serviceTypeList[0];
-
-                this.choseServiceType(this.serviceTypeSelected);
-            })
-    }
-
-    choseServiceType(item) {
-        this.serviceTypeSelected = item;
-        this.getTableData();
-    }
-
-
-    // Create modal box 2 (dialog box) create -------------------------------
-    isVisible = false;
-
-    customerChange(): void {
-        this.getServiceType(this.customerSelected2);
-    }
-
-    getServiceType(customerSelected2) {
-        this.myhttp.getServiceTypes(customerSelected2)
-            .subscribe((data) => {
-                this.serviceTypeList2 = data.map((item) => {
-                    return { name: item["service-type"] }
-                });
-                if (this.serviceTypeList2.length == 0) {
-                    console.log("serviceTypeList.length == 0", this.serviceTypeList2);
-                    return false;
-                }
-                this.getAlltemplates();
-            })
-    }
-
-    serviceTypeChange(): void {
-        this.serviceTypeSelected2.name = this.serviceTypeSelectedName
-    }
-
-    createModal(): void {
-        this.isVisible = true;
-        this.getallOrchestrators();
-        this.customerSelected2 = this.customerSelected;
-        this.serviceTypeSelectedName = this.serviceTypeSelected.name;
-        this.serviceTypeSelected2 = Object.assign({}, this.serviceTypeSelected);
-        this.getServiceType(this.customerSelected2);
-    }
-
-    choseTemplateType() {
-        this.getallOrchestrators();
-        this.getAlltemplates();
-    }
-
-    templates = [];
-    template1 = { name: null };
-
-    getAlltemplates() {
-        this.myhttp.getAllServiceTemplates(this.templateTypeSelected)
-            .subscribe((data) => {
-                this.templates = data;
-                if (this.templateTypeSelected == "Network Service") {
-                    this.templates = data.filter((d) => {
-                        return typeof d.packageInfo.csarName == "string";
-                    }).map((item) => {
-                        let cName = item.packageInfo.csarName.split("/").reverse()[0];
-                        return { name: cName, id: item.csarId, packageInfo: item.packageInfo }
-                    });
-                }
-                this.template1 = this.templates[0];
-            }, (err) => {
-                console.log(err);
-            })
-    }
-
-    createshow = false;
-    createshow2 = false;
-    listDisplay = false;
-    createData: Object = {};
-
-    handleOk(): void {
-        if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") {
-            this.createData = {
-                commonParams: {
-                    customer: this.customerSelected,
-                    serviceType: this.serviceTypeSelected2,
-                    templateType: this.templateTypeSelected
-                }, template: this.template1
-            };
-        } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") {
-            this.createData = {
-                commonParams: {
-                    customer: this.customerSelected,
-                    serviceType: this.serviceTypeSelected2,
-                    templateType: this.templateTypeSelected
-                },
-                template: this.template1,
-                orchestrator: this.orchestratorSelected,
-                isSol005Interface: this.isSol005Interface
-            };
-        }
-        this.getTemParameters();
-    }
-
-    handleCancel(): void {
-        this.isVisible = false;
-        this.loadingAnimateShow = false;
-    }
-
-    temParametersTips = false;
-    ccvpn_temParametersContent: any;
-    e2e_ns_temParametersContent: any;
-
-    getTemParameters() {
-        let chosedtemplates = this.createData["template"];
-        let types = this.createData["commonParams"].templateType;
-        if (types == "E2E Service") {
-            types = "e2e";
-        } else if (types == "Network Service") {
-            types = "ns";
-        }
-        this.loadingAnimateShow = true;
-        this.myhttp.getTemplateParameters(types, chosedtemplates)
-            .subscribe((data) => {
-                this.loadingAnimateShow = false;
-                if (data.status == "FAILED") {
-                    this.temParametersTips = true;
-                    this.isVisible = true;
-                    console.log("Template parsing Failed");
-                } else {
-                    this.isVisible = false;
-                    this.temParametersTips = false;
-                    if (this.templateTypeSelected == "SOTN" || this.templateTypeSelected == "CCVPN") {
-                        this.ccvpn_temParametersContent = data;
-                        this.createshow = true;
-                        this.listDisplay = true;
-                    } else if (this.templateTypeSelected == "E2E Service" || this.templateTypeSelected == "Network Service") {
-                        this.e2e_ns_temParametersContent = data;
-                        this.createshow2 = true;
-                        this.listDisplay = true;
-                    }
-                }
-            })
-    }
-
-    //tableData
-    tableData = [];
-    pageIndex = 1;
-    pageSize = 10;
-    total = 100;
-    loading = false;
-
-    getTableData() {
-        this.loading = true;
-        // Query parameter: customer serviceType Current page number, number of pages per page
-        let paramsObj = {
-            customerId: this.customerSelected.id,
-            serviceType: this.serviceTypeSelected.name,
-            currentPage: this.pageIndex,
-            pageSize: this.pageSize
-        }
-        this.myhttp.getServicesTableData(paramsObj)
-            .subscribe((data) => {
-                this.total = data.body.total;
-                this.tableData = data.body.tableList.map((item) => {
-                    if (typeof item == "string") {
-                        item = JSON.parse(item);
-                    }
-
-                    item["iconMore"] = this.iconMore;
-                    if (item["serviceDomain"] == "Network Service") {
-                        if (item["vnfInfo"]) {
-                            item["childServiceInstances"] = item["vnfInfo"].map((vnf) => {
-                                vnf["serviceDomain"] = "vnf";
-                                return vnf;
-                            });
-                        } else if (item["relationship-list"] && item["relationship-list"]["relationship"]) {
-                            item["childServiceInstances"] = item["relationship-list"]["relationship"].filter((relate) => {
-                                return relate["related-to"] == "generic-vnf";
-                            }).map((vnf) => {
-                                let vnfInfo = {
-                                    vnfNsInstanceId: "",
-                                    vnfInstanceId: "",
-                                    vnfInstanceName: "",
-                                    serviceDomain: "vnf"
-                                };
-                                vnfInfo.vnfNsInstanceId = item["nsInstanceId"] || item["service-instance-id"];
-                                vnfInfo.vnfInstanceId = vnf["relationship-data"].find((vnfid) => {
-                                    return vnfid["relationship-key"] == "generic-vnf.vnf-id"
-                                })["relationship-value"];
-                                vnfInfo.vnfInstanceName = vnf["related-to-property"].find((vnfname) => {
-                                    return vnfname["property-key"] == "generic-vnf.vnf-name"
-                                })["property-value"];
-                                return vnfInfo;
-                            })
-                        }
-                    } else {
-                        item["childServiceInstances"] = [];
-                    }
-
-                    //
-                    if (item["operationResult"] == "2001") { //operationResult==2001
-                        item["status"] = "Available";
-                        item["tips"] = "Available";
-                        item["statusClass"] = item["operationResult"];
-                    }
-                    // 2018.12.13
-                    else if (item["operationResult"] == "2002") { //operationResult==2002
-                        if (item["operationType"] == "1001" || item["operationType"] == "1002") {
-                            // item["status"] = this.accordingState["operationResult"][item["operationResult"]];
-                            item["status"] = this.listSortMasters["operationResults"].find((its) => {
-                                return its["sortCode"] == item["operationResult"] && its["language"] == this.language
-                            })["sortValue"];
-                            item["tips"] = "Unavailable";
-                            item["statusClass"] = item["operationType"];
-                        } else if (item["operationType"] != "1001" && item["operationType"] != "1002") {
-                            // item["status"] = this.accordingState["operationResult"][item["operationResult"]];
-                            item["status"] = this.listSortMasters["operationResults"].find((its) => {
-                                return its["sortCode"] == item["operationResult"] && its["language"] == this.language
-                            })["sortValue"];
-                            item["tips"] = "Available";
-                            item["statusClass"] = item["operationType"];
-                        }
-
-                    }
-                    else if (item["operationResult"] == "2003") { //operationResult==2003
-                        // item["status"] = this.accordingState["operationResult"][item["operationResult"]];
-                        item["status"] = this.listSortMasters["operationResults"].find((its) => {
-                            return its["sortCode"] == item["operationResult"] && its["language"] == this.language
-                        })["sortValue"];
-                        item["statusClass"] = item["operationType"];
-                        if (item["serviceDomain"] == "Network Service") {
-                            let updata = (prodata) => {
-                                item["rate"] = prodata.progress;
-                                item["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                                    return its["sortCode"] == item["operationType"] && its["language"] == this.language
-                                })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%";
-                                if (item["rate"] > 100) {
-                                    item["status"] = prodata.status;
-                                    item["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                                        return its["sortCode"] == item["operationType"] && its["language"] == this.language
-                                    })["sortValue"] + '\xa0\xa0\xa0' + item["status"];
-                                }
-                            }
-                            let id = item["nsInstanceId"] || item["service-instance-id"];
-                            let jobid = item["jobId"] || item["operationId"];
-                            let operationType = item["operationType"];
-                            this.queryNsProgress(jobid, id, updata, operationType).then(() => {
-                                item["rate"] = 100;
-                                item["status"] = this.listSortMasters["operationResults"].find((its) => {
-                                    return its["sortCode"] == 2001 && its["language"] == this.language
-                                })["sortValue"];
-                                item["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                                    return its["sortCode"] == item["operationType"] && its["language"] == this.language
-                                })["sortValue"] + '\xa0\xa0\xa0' + item["status"];
-                            })
-                        } else {
-                            let updata = (prodata) => {
-                                item["rate"] = prodata.progress || item["rate"];
-                                item["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                                    return its["sortCode"] == item["operationType"] && its["language"] == this.language
-                                })["sortValue"] + '\xa0\xa0\xa0' + prodata.progress + "%";
-                                if (item["rate"] > 100) {
-                                    item["status"] = prodata.status;
-                                    item["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                                        return its["sortCode"] == item["operationType"] && its["language"] == this.language
-                                    })["sortValue"] + '\xa0\xa0\xa0' + item["status"];
-                                }
-                            }
-                            let obj = {
-                                serviceId: item["service-instance-id"],
-                                operationId: item["operationId"],
-                                operationType: item["operationType"]
-                            }
-                            this.queryProgress(obj, updata).then(() => {
-                                item["rate"] = 100;
-                                item["status"] = this.listSortMasters["operationResults"].find((its) => {
-                                    return its["sortCode"] == 2001 && its["language"] == this.language
-                                })["sortValue"];
-                                item["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                                    return its["sortCode"] == item["operationType"] && its["language"] == this.language
-                                })["sortValue"] + '\xa0\xa0\xa0' + item["status"];
-                            })
-                        }
-                    }
-                    return item;
-                })
-                this.tableData.map((item, index) => {
-                    if (item.serviceDomain == 'E2E Service') {
-                        if (item.operationResult == 2001) {
-                            this.serviceMunber[0]["Success"] += 1;
-                        } else if (item.operationResult == 2002) {
-                            this.serviceMunber[0]["failed"] += 1;
-                        } else if (item.operationResult == 2003) {
-                            this.serviceMunber[0]["InProgress"] += 1;
-                        }
-                    }
-                    else if (item.serviceDomain == 'Network Service') {
-                        if (item.operationResult == 2001) {
-                            this.serviceMunber[1]["Success"] += 1;
-                        } else if (item.operationResult == 2002) {
-                            this.serviceMunber[1]["failed"] += 1;
-                        } else if (item.operationResult == 2003) {
-                            this.serviceMunber[1]["InProgress"] += 1;
-                        }
-                    }
-                    else if (item.serviceDomain == 'CCVPN') {
-                        if (item.operationResult == 2001) {
-                            this.serviceMunber[2]["Success"] += 1;
-                        } else if (item.operationResult == 2002) {
-                            this.serviceMunber[2]["failed"] += 1;
-                        } else if (item.operationResult == 2003) {
-                            this.serviceMunber[2]["InProgress"] += 1;
-                        }
-                    }
-                })
-                this.loading = false;
-            }, (err) => {
-                console.log(err);
-                this.loading = false;
-            })
-    }
-
-    searchData(reset: boolean = false) {
-        this.getTableData();
-    }
-
-    thisService = {};  //The current service of the operation
-    e2e_nsData: Object[];
-    scaleModelVisible = false;
-
-    scaleService(service) {
-        this.thisService = service;
-        this.scaleModelVisible = true;
-        let paramsObj = {
-            customerId: this.customerSelected.id,
-            serviceType: this.serviceTypeSelected.name,
-            serviceId: service["service-instance-id"]
-        }
-        this.myhttp.getE2e_nsData(paramsObj)
-            .subscribe((data) => {
-                this.e2e_nsData = data;
-            })
-    }
-
-    scaleOk(templatescalestarting, templateScaleSuccessFaild) {
-        this.scaleModelVisible = false;
-        let requestBody = {
-            "service": {
-                "serviceInstanceName": this.thisService["service-instance-name"],
-                "serviceType": this.serviceTypeSelected.name,
-                "globalSubscriberId": this.customerSelected.id,
-                "resources": this.e2e_nsData.map((item) => {
-                    return {
-                        "resourceInstanceId": item["netWorkServiceId"],
-                        "scaleType": item["scaleType"],
-                        "scaleNsData": {
-                            "scaleNsByStepsData": {
-                                "aspectId": item["aspectId"],
-                                "numberOfSteps": item["numberOfSteps"],
-                                "scalingDirection": item["scalingDirection"]
-                            }
-                        }
-                    }
-                })
-            }
-        }
-        this.scaleE2eService(this.thisService, requestBody, templateScaleSuccessFaild);
-        this.scaleNotification(templatescalestarting);
-    }
-
-    scaleCancel() {
-        this.scaleModelVisible = false;
-    }
-
-    scaleNotification(template: TemplateRef<{}>): void {
-        this.notification.template(template);
-    }
-
-    scaleSuccessNotification(template: TemplateRef<{}>): void {
-        this.notification.template(template);
-    }
-
-    //heal
-    healModelVisible = false;
-    healActions = [];
-    nsAdditional = [];
-    nsParams = {
-        degreeHealing: "HEAL_RESTORE",
-        actionsHealing: [],
-        healScript: "",
-        additionalParamsforNs: ""
-    }
-    vnfVms = [];
-    vmSelected = {};
-    vnfParams = {
-        vnfInstanceId: "",
-        cause: "",
-        additionalParams: {
-            action: "",
-            actionvminfo: {
-                vmid: "",
-                vduid: "",
-                vmname: ""
-            }
-        }
-    }
-
-    addActionsHealing() {
-        this.healActions.push({ value: "" })
-    }
-
-    minusActionsHealing(index) {
-        this.healActions.splice(index, 1);
-    }
-
-    addNsAdditional() {
-        this.nsAdditional.push({ key: "", value: "" })
-    }
-
-    minusNsAdditional(index) {
-        this.nsAdditional.splice(index, 1);
-    }
-
-    healService(service) {
-        this.thisService = service;
-        this.healModelVisible = true;
-        if (service.serviceDomain == "vnf") {
-            this.vnfParams.vnfInstanceId = service.vnfInstanceId;
-            this.myhttp.getVnfInfo(service.vnfInstanceId)
-                .subscribe((data) => {
-                    this.vnfVms = data.vnfVms;
-                    this.vmSelected = this.vnfVms[0];
-                })
-        }
-    }
-
-    healOk(templatehealstarting, templatehealSuccessFaild) {
-        this.healModelVisible = false;
-        // nsParams
-        this.nsParams.actionsHealing = this.healActions.map((item) => {
-            return item.value
-        });
-        let additional = {};
-        this.nsAdditional.forEach((item) => {
-            additional[item.key] = item.value;
-        });
-        this.nsParams.additionalParamsforNs = JSON.stringify(additional);
-        // vnfParams
-        this.vnfParams.additionalParams.actionvminfo.vmid = this.vmSelected["vmId"];
-        this.vnfParams.additionalParams.actionvminfo.vmname = this.vmSelected["vmName"];
-
-        let requestBody = this.thisService["serviceDomain"] == "Network Service" ? { healNsData: this.nsParams } : { healVnfData: this.vnfParams };
-        this.healNsVnfService(this.thisService, requestBody, templatehealSuccessFaild);
-        this.healNotification(templatehealstarting);
-    }
-
-    healCancel() {
-        this.healModelVisible = false;
-    }
-
-    healNotification(template: TemplateRef<{}>): void {
-        this.notification.template(template);
-    }
-
-    healSuccessNotification(template: TemplateRef<{}>): void {
-        this.notification.template(template);
-    }
-
-    // show detail
-    detailshow = false;
-    detailshow2 = false;
-    upDateShow = false;
-    detailData: Object;
-
-    serviceDetail(service, typeNum) {
-        service["siteSer"] = [];
-        service["sdwanSer"] = [];
-        service["customer"] = this.customerSelected;
-        service["serviceType"] = this.serviceTypeSelected;
-
-        service.childServiceInstances.forEach((item) => {
-            if (item.serviceDomain == "SITE") {
-                service.siteSer.push(item);
-            } else if (item.serviceDomain == "SDWAN") {
-                service.sdwanSer.push(item);
-            }
-        })
-        if (service["serviceDomain"] == 'CCVPN' || service["serviceDomain"] == 'SOTN') {
-            this.detailshow = true;
-            if (typeNum == 1) {
-                this.upDateShow = false;
-            } else {
-                this.upDateShow = true;
-            }
-        } else if (service["serviceDomain"] == 'E2E Service' || service["serviceDomain"] == 'Network Service') {
-            this.detailshow2 = true;
-        }
-        this.listDisplay = true;
-        this.detailData = service;
-        console.log(service);
-    }
-
-    deleteModelVisible = false;
-    terminationType = "graceful";
-    gracefulTerminationTimeout = 120;
-
-    // delete Model show
-    deleteModel(service) {
-        this.thisService = service;
-        this.deleteModelVisible = true;
-    }
-
-    deleteOk(templatedeletestarting, templateDeleteSuccessFaild) {
-        this.deleteModelVisible = false;
-        this.loadingAnimateShow = true;
-        if (this.thisService["serviceDomain"] == "Network Service") {
-            this.deleteNsService(this.thisService, templateDeleteSuccessFaild);
-        } else {
-            this.deleteService(this.thisService, templateDeleteSuccessFaild);
-        }
-        this.deleteNotification(templatedeletestarting);
-    }
-
-    deleteCancel() {
-        this.deleteModelVisible = false;
-    }
-
-    deleteNotification(template: TemplateRef<{}>): void {
-        this.notification.template(template);
-    }
-
-    deleteSuccessNotification(template: TemplateRef<{}>): void {
-        this.notification.template(template);
-    }
-
-    createNotification(template: TemplateRef<{}>): void {
-        this.notification.template(template);
-    }
-
-    createSuccessNotification(template: TemplateRef<{}>): void {
-        this.notification.template(template);
-    }
-
-    //ccvpn sotn createservice
-    parentServiceInstanceId = "";
-    thisCreateService = {};
-
-    closeCreate(obj, templateCreatestarting, templateCreateSuccessFaild) {
-        if (!obj) {
-            this.createshow = false; //close
-            this.listDisplay = false; //close
-            return false;
-        }
-        this.createshow = false;
-        this.listDisplay = false;
-        this.loadingAnimateShow = true;
-        console.log(obj);
-        let newData; //Newly created service data for the main table
-
-        let createParams = "?customerId=" + this.customerSelected2.id +
-            "&serviceType=" + this.serviceTypeSelected2.name +
-            "&serviceDomain=" + this.templateTypeSelected;
-        this.createService(obj, createParams, templateCreatestarting, templateCreateSuccessFaild).then((data) => {
-            console.log(data);
-            this.loadingAnimateShow = false;
-            newData = {  //Newly created service data in the main form
-                'service-instance-id': data["serviceId"],
-                'service-instance-name': obj.service.name,
-                serviceDomain: this.templateTypeSelected,
-                childServiceInstances: [],
-                status: "In Progress",
-                rate: 0,
-                statusClass: 1001,
-                tips: ""
-            };
-            this.thisCreateService = newData;
-            this.tableData = [newData, ...this.tableData];
-            this.createNotification(templateCreatestarting);
-            let updata = (prodata) => {
-                newData.rate = prodata.progress;
-                newData.tips = this.listSortMasters["operationTypes"].find((its) => {
-                    return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
-                })["sortValue"] + newData.rate + "%";
-                if (newData["rate"] > 100) {
-                    newData["status"] = prodata.status;
-                    newData.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
-                    })["sortValue"] + '\xa0\xa0\xa0' + newData["status"];
-                }
-            };
-            let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" };
-            return this.queryProgress(queryParams, updata);
-        }).then((data) => {
-            console.log(data);
-            newData.rate = 100;
-            newData.status = "Successful";
-            this.createSuccessNotification(templateCreateSuccessFaild);
-            newData.tips = this.listSortMasters["operationTypes"].find((its) => {
-                return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
-            })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
-                return its["sortCode"] == 2001 && its["language"] == this.language
-            })["sortValue"];
-            let hasUndone = this.tableData.some((item) => {
-                return item.rate < 100;
-            });
-            if (!hasUndone) {
-                setTimeout(() => {
-                    this.getTableData();
-                }, 1000)
-            }
-        })
-    }
-
-    e2eCloseCreate(obj, templateCreatestarting, templateCreateSuccessFaild) {
-        if (!obj) {
-            this.createshow2 = false; //
-            this.listDisplay = false; //
-            return false;
-        }
-        this.createshow2 = false; //
-        this.listDisplay = false; //
-        this.loadingAnimateShow = true;
-        console.log(obj);
-        let newData; //
-        let createParams = "?customerId=" + this.customerSelected.id +
-            "&serviceType=" + this.serviceTypeSelected2.name +
-            "&serviceDomain=" + this.templateTypeSelected +
-            "&parentServiceInstanceId=" +
-            "&uuid=" + obj.service.serviceUuid +
-            "&invariantUuuid=" + obj.service.serviceInvariantUuid;
-        this.createService(obj, createParams, templateCreatestarting, templateCreateSuccessFaild).then((data) => {
-            console.log(data);
-            this.loadingAnimateShow = false;
-            newData = {  //
-                'service-instance-id': data["serviceId"],
-                'service-instance-name': obj.service.name,
-                serviceDomain: this.templateTypeSelected,
-                childServiceInstances: [],
-                status: "In Progress",
-                statusClass: 1001,
-                rate: 0,
-                tips: ""
-            }
-            this.thisCreateService = newData;
-            this.tableData = [newData, ...this.tableData];
-            this.createNotification(templateCreatestarting);
-            let updata = (prodata) => {
-                newData.rate = prodata.progress;
-                newData.tips = this.listSortMasters["operationTypes"].find((its) => {
-                    return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
-                })["sortValue"] + newData.rate + "%";
-                if (newData["rate"] > 100) {
-                    newData["status"] = prodata.status;
-                    newData.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
-                    })["sortValue"] + '\xa0\xa0\xa0' + newData["status"];
-                }
-            }
-            let queryParams = { serviceId: data["serviceId"], operationId: data["operationId"], operationType: "1001" };
-            return this.queryProgress(queryParams, updata);
-        }).then((data) => {
-            console.log(data);
-            newData.rate = 100;
-            newData.status = "Successful";
-            this.createSuccessNotification(templateCreateSuccessFaild);
-            newData.tips = this.listSortMasters["operationTypes"].find((its) => {
-                return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
-            })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
-                return its["sortCode"] == 2001 && its["language"] == this.language
-            })["sortValue"];
-            let hasUndone = this.tableData.some((item) => {
-                return item.rate < 100;
-            })
-            if (!hasUndone) {
-                setTimeout(() => {
-                    this.getTableData();
-                }, 1000)
-            }
-        })
-
-    }
-
-    nsCloseCreate(obj, templateCreatestarting, templateCreateSuccessFaild) {
-        if (!obj) {
-            this.createshow2 = false; //
-            this.listDisplay = false; //
-            return false;
-        }
-        this.createshow2 = false; //
-        this.listDisplay = false; //
-        this.loadingAnimateShow = true;
-        console.log(obj);
-        let newData; //
-        // step1
-        this.myhttp.nsCreateInstance(obj.step1)
-            .subscribe((data) => {
-                // console.log(data);
-                this.loadingAnimateShow = false;
-                newData = {  //
-                    'service-instance-id': data.nsInstanceId,
-                    'service-instance-name': obj.step1.nsName,
-                    serviceDomain: this.templateTypeSelected,
-                    childServiceInstances: [],
-                    status: "In Progress",
-                    statusClass: 1001,
-                    rate: 0,
-                    tips: ""
-                }
-                this.thisCreateService = newData;
-                this.tableData = [newData, ...this.tableData];
-                this.createNotification(templateCreatestarting);
-                if (data.status == "FAILED") {
-                    console.log("create ns service Failed :" + JSON.stringify(data));
-                    newData.status = "Failed";
-                    this.createSuccessNotification(templateCreateSuccessFaild);
-                    return false;
-                }
-                let createParams = "?ns_instance_id=" + data.nsInstanceId +
-                    "&customerId=" + this.customerSelected2.id +
-                    "&serviceType=" + this.serviceTypeSelected2.name +
-                    "&serviceDomain=" + this.templateTypeSelected +
-                    "&parentServiceInstanceId=";
-                // step2
-                this.createNsService(createParams, obj.step2).then((jobid) => {
-                    if (jobid == "Failed") {
-                        newData.status = "Failed";
-                        console.log(jobid, "ns two jobid")
-                        this.thisCreateService = newData;
-                        console.log(this.thisCreateService)
-                        this.createSuccessNotification(templateCreateSuccessFaild);
-                        newData.tips = this.listSortMasters["operationTypes"].find((its) => {
-                            return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
-                        })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
-                            return its["sortCode"] == 2002 && its["language"] == this.language
-                        })["sortValue"];
-                        return false;
-                    }
-                    let operationType = "1001";
-                    let updata = (prodata) => {
-                        newData.rate = prodata.progress;
-                        newData.tips = this.listSortMasters["operationTypes"].find((its) => {
-                            return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
-                        })["sortValue"] + newData.rate + "%";
-                        if (newData["rate"] > 100) {
-                            newData["status"] = prodata.status;
-                            newData.tips = this.listSortMasters["operationTypes"].find((its) => {
-                                return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
-                            })["sortValue"] + '\xa0\xa0\xa0' + newData["status"];
-                        }
-                    }
-
-                    return this.queryNsProgress(jobid, newData["service-instance-id"], updata, operationType);
-                }).then((data) => {
-                    console.log(data);
-                    newData.rate = 100;
-                    newData.status = "Successful";
-                    this.thisCreateService = newData;
-                    console.log(this.thisCreateService)
-                    this.createSuccessNotification(templateCreateSuccessFaild);
-                    newData.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == newData["statusClass"] && its["language"] == this.language
-                    })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
-                        return its["sortCode"] == 2001 && its["language"] == this.language
-                    })["sortValue"];
-                    let hasUndone = this.tableData.some((item) => {
-                        return item.rate < 100;
-                    })
-                    if (!hasUndone) {
-                        setTimeout(() => {
-                            this.getTableData();
-                        }, 1000)
-                    }
-                })
-            })
-    }
-
-    createService(requestBody, createParams, templateCreatestarting, templateCreateSuccessFaild) {
-        let mypromise = new Promise((res, rej) => {
-            this.myhttp.createInstance(requestBody, createParams)
-                .subscribe((data) => {
-                    if (data.status == "FAILED") {
-                        this.loadingAnimateShow = false;
-                        res("Failed");
-                        console.log("create e2e service Failed :" + JSON.stringify(data));
-                        return false;
-                    }
-                    res(data.service);
-                })
-        })
-        return mypromise;
-    }
-
-    createNsService(id, obj) {
-        let mypromise = new Promise((res, rej) => {
-            this.myhttp.nsCreateInstance2(id, obj)
-                .subscribe((data) => {
-                    if (data.status == "FAILED") {
-                        this.loadingAnimateShow = false;
-                        console.log("instantiate ns service Failed :" + JSON.stringify(data));
-                        res("Failed");
-                        return false;
-                    }
-                    res(data.jobId);
-                })
-        })
-        return mypromise;
-    }
-
-    scaleE2eService(service, requestBody, templateScaleSuccessFaild) {
-        let id = service["service-instance-id"];
-        service.rate = 0;
-        service.status = "In Progress";
-        service.statusClass = "1003";
-        service.tips = "";
-        this.myhttp.scaleE2eService(id, requestBody)
-            .subscribe((data) => {
-                if (data.status == "FAILED") {
-                    console.log("scale E2e service Failed :" + JSON.stringify(data));
-                    service.status = "Failed";
-                    service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == service.statusClass && its["language"] == this.language
-                    })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
-                        return its["sortCode"] == 2002 && its["language"] == this.language
-                    })["sortValue"];
-                    this.scaleSuccessNotification(templateScaleSuccessFaild);
-                    return false;
-                }
-                let obj = {
-                    serviceId: id,
-                    operationId: data.operationId,
-                    operationType: "1003"
-                }
-                let updata = (prodata) => {
-                    service.rate = prodata.progress;
-                    service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == service.statusClass && its["language"] == this.language
-                    })["sortValue"] + '\xa0\xa0\xa0' + service["rate"] + "%";
-                    if (service["rate"] > 100) {
-                        service["status"] = prodata.status;
-                        service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                            return its["sortCode"] == service["statusClass"] && its["language"] == this.language
-                        })["sortValue"] + '\xa0\xa0\xa0' + service["status"];
-                    }
-                }
-                this.queryProgress(obj, updata).then(() => {
-                    service.rate = 100;
-                    service.status = "Successful";
-                    service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == service["statusClass"] && its["language"] == this.language
-                    })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
-                        return its["sortCode"] == 2001 && its["language"] == this.language
-                    })["sortValue"];
-                    this.scaleSuccessNotification(templateScaleSuccessFaild);
-                })
-            })
-    }
-
-    healNsVnfService(service, requestBody, templatehealSuccessFaild) {
-        console.log(service);
-        service.rate = 0;
-        service.status = "In Progress";
-        service.tips = "";
-        service.statusClass = "1004";
-        let id = service.nsInstanceId || service["service-instance-id"] || service["vnfNsInstanceId"];
-        this.myhttp.healNsService(id, requestBody)
-            .subscribe((data) => {
-                if (data.status == "FAILED") {
-                    console.log("heal nsvnf service Failed :" + JSON.stringify(data));
-                    service.status = "Failed";
-                    service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == service.statusClass && its["language"] == this.language
-                    })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
-                        return its["sortCode"] == 2002 && its["language"] == this.language
-                    })["sortValue"];
-                    this.healSuccessNotification(templatehealSuccessFaild);
-                    return false;
-                }
-                let jobid = data.jobId;
-                let operationType = "1004";
-                let updata = (prodata) => {
-                    service.rate = prodata.progress;
-                    service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == service.statusClass && its["language"] == this.language
-                    })["sortValue"] + '\xa0\xa0\xa0' + service.rate + "%";
-                    console.log(service.rate)
-                    if (service["rate"] > 100) {
-                        service["status"] = prodata.status;
-                        service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                            return its["sortCode"] == service.statusClass && its["language"] == this.language
-                        })["sortValue"] + '\xa0\xa0\xa0' + service["status"];
-                    }
-                }
-                this.queryNsProgress(jobid, null, updata, operationType).then((data1) => {
-                    console.log(data1);
-                    service.rate = 100;
-                    service.status = "Successful";
-                    service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == service.statusClass && its["language"] == this.language
-                    })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
-                        return its["sortCode"] == 2001 && its["language"] == this.language
-                    })["sortValue"];
-                    this.healSuccessNotification(templatehealSuccessFaild);
-                });
-            })
-    }
-
-    updateCcvpnNotification(template: TemplateRef<{}>): void {
-        this.notification.template(template);
-    }
-
-    updateCcvpnSuccessNotification(template: TemplateRef<{}>): void {
-        this.notification.template(template);
-    }
-
-    closeCCVPNUpdate(obj, templateUpdateSuccessFaild) {
-        console.log(obj);
-        this.detailshow = false;
-        this.listDisplay = false;
-        this.upDateShow = false;
-        this.detailData["rate"] = 0;
-        this.detailData["status"] = "In Progress";
-        this.detailData['tips'] = "";
-        this.detailData["statusClass"] = "1005";
-        let id = this.detailData["service-instance-id"];
-        this.myhttp.updateccvpn(id, obj)
-            .subscribe((data) => {
-                if (data.status == "FAILED") {
-                    console.log("scale E2e service Failed :" + JSON.stringify(data));
-                    this.detailData["status"] = "Failed";
-                    this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language
-                    })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
-                        return its["sortCode"] == 2002 && its["language"] == this.language
-                    })["sortValue"];
-                    this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild);
-                    return false;
-                }
-                let obj = {
-                    serviceId: id,
-                    operationId: data.operationId
-                }
-                let updata = (prodata) => {
-                    this.detailData["rate"] = prodata.progress;
-                    this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language
-                    })["sortValue"] + '\xa0\xa0\xa0' + this.detailData["rate"] + "%";
-                    if (this.detailData["rate"] > 100) {
-                        this.detailData["status"] = prodata.status;
-                        this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                            return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language
-                        })["sortValue"] + '\xa0\xa0\xa0' + this.detailData["status"];
-                    }
-                };
-                this.queryProgress(obj, updata).then(() => {
-                    this.detailData["rate"] = 100;
-                    this.detailData["status"] = "Successful";
-                    this.detailData["tips"] = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == this.detailData["statusClass"] && its["language"] == this.language
-                    })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
-                        return its["sortCode"] == 2001 && its["language"] == this.language
-                    })["sortValue"];
-                    this.updateCcvpnSuccessNotification(templateUpdateSuccessFaild);
-                })
-            })
-    }
-
-    deleteService(service, templateDeleteSuccessFaild) {
-        let allprogress = {};  //
-        let querypros = [];  //
-        service.rate = 0;
-        service.status = "In Progress";
-        service.tips = "";
-        service.statusClass = "1002";
-        service["childServiceInstances"].push({ "service-instance-id": service["service-instance-id"] });
-        let deletePros = service["childServiceInstances"].map((item) => {
-            let params = {
-                globalSubscriberId: this.customerSelected.id,
-                serviceType: this.serviceTypeSelected,
-                serviceInstanceId: item["service-instance-id"]
-            }
-            return new Promise((res, rej) => {
-                this.myhttp.deleteInstance(params)
-                    .subscribe((data) => {
-                        this.loadingAnimateShow = false;
-                        if (data.status == "FAILED") {
-                            console.log("delete service Failed :" + JSON.stringify(data));
-                            service.status = "Failed";
-                            service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                                return its["sortCode"] == service.statusClass && its["language"] == this.language
-                            })["sortValue"] + '\xa0\xa0\xa0' + this.listSortMasters["operationResults"].find((its) => {
-                                return its["sortCode"] == 2002 && its["language"] == this.language
-                            })["sortValue"];
-                            return false;
-                        }
-                        let obj = {
-                            serviceId: params.serviceInstanceId,
-                            operationId: data.operationId,
-                            operationType: "1002"
-                        }
-                        let updata = (prodata) => {
-                            allprogress[prodata.operationId] = prodata.progress;
-                            let average = ((arr) => {
-                                return eval(arr.join("+")) / arr.length
-                            })(Object.values(allprogress));
-                            service["rate"] = average;
-                            service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                                return its["sortCode"] == service.statusClass && its["language"] == this.language
-                            })["sortValue"] + '\xa0\xa0\xa0' + service["rate"] + "%";
-                            if (service["rate"] > 100) {
-                                service["status"] = prodata.status;
-                                service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                                    return its["sortCode"] == service.statusClass && its["language"] == this.language
-                                })["sortValue"] + '\xa0\xa0\xa0' + service["status"];
-                            }
-                        };
-                        querypros.push(this.queryProgress(obj, updata));
-                        res();
-                    })
-            })
-        });
-        Promise.all(deletePros).then(() => {
-            Promise.all(querypros).then((data) => {
-                console.log(data);
-                service.rate = 100;
-                service.status = "Successful";
-                service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                    return its["sortCode"] == service.statusClass && its["language"] == this.language
-                })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
-                    return its["sortCode"] == 2001 && its["language"] == this.language
-                })["sortValue"];
-                this.deleteSuccessNotification(templateDeleteSuccessFaild);
-                let hasUndone = this.tableData.some((item) => {
-                    return item.rate < 100;
-                })
-                if (!hasUndone) {
-                    setTimeout(() => {
-                        this.getTableData();
-                    }, 1000)
-                }
-            })
-        })
-    }
-
-    deleteNsService(service, templateDeleteSuccessFaild) {
-        service.rate = 0;
-        service.status = "In Progress";
-        service.tips = "";
-        service.statusClass = "1002";
-        let id = service.nsInstanceId || service["service-instance-id"];
-        let operationType = "1002";
-        let requestBody = {
-            terminationType: this.terminationType,
-            gracefulTerminationTimeout: this.gracefulTerminationTimeout
-        }
-        this.stopNsService(id, requestBody).then((jobid) => {
-            if (jobid == "Failed") {
-                service.status = "Failed";
-                this.deleteSuccessNotification(templateDeleteSuccessFaild);
-                service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                    return its["sortCode"] == service.statusClass && its["language"] == this.language
-                })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
-                    return its["sortCode"] == 2002 && its["language"] == this.language
-                })["sortValue"];
-                return false;
-            }
-            let updata = (prodata) => {
-                service.rate = prodata.progress;
-                service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                    return its["sortCode"] == service.statusClass && its["language"] == this.language
-                })["sortValue"] + '\xa0\xa0\xa0' + service.rate + "%";
-                if (service["rate"] > 100) {
-                    service["status"] = prodata.status;
-                    service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == service.statusClass && its["language"] == this.language
-                    })["sortValue"] + service["status"];
-                }
-            }
-            return this.queryNsProgress(jobid, null, updata, operationType);
-        }).then(() => {
-            this.myhttp.nsDeleteInstance(id)
-                .subscribe((data) => {
-                    console.log(data);
-                    service.rate = 100;
-                    service.status = "Successful";
-                    service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                        return its["sortCode"] == service.statusClass && its["language"] == this.language
-                    })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
-                        return its["sortCode"] == 2001 && its["language"] == this.language
-                    })["sortValue"];
-                    this.deleteSuccessNotification(templateDeleteSuccessFaild);
-                    if (data.status == "FAILED") {
-                        console.log("delete ns service Failed :" + JSON.stringify(data));
-                        service.status = "Failed";
-                        service.tips = this.listSortMasters["operationTypes"].find((its) => {
-                            return its["sortCode"] == service.statusClass && its["language"] == this.language
-                        })["sortValue"] + this.listSortMasters["operationResults"].find((its) => {
-                            return its["sortCode"] == 2002 && its["language"] == this.language
-                        })["sortValue"];
-                        this.deleteSuccessNotification(templateDeleteSuccessFaild);
-                        return false;
-                    }
-                    console.log(service, "deleteservice");
-                    console.log(this.thisService, "thisService");
-                    let hasUndone = this.tableData.some((item) => {
-                        return item.rate < 100;
-                    })
-                    if (!hasUndone) {
-                        setTimeout(() => {
-                            this.getTableData();
-                        }, 1000)
-                    }
-                })
-        })
-    }
-
-    stopNsService(id, obj) {
-        let mypromise = new Promise((res, rej) => {
-            this.myhttp.stopNsService(id, obj)
-                .subscribe((data) => {
-                    this.loadingAnimateShow = false;
-                    if (data.status == "FAILED") {
-                        console.log("stop ns service Failed :" + JSON.stringify(data));
-                        res("Failed");
-                        return false;
-                    }
-                    res(data.jobId);
-                })
-        })
-        return mypromise;
-    }
-
-    queryProgress(obj, callback) {
-        let mypromise = new Promise((res, rej) => {
-            let errorNums = 180;
-            let requery = () => {
-                this.myhttp.getProgress(obj)
-                    .subscribe((data) => {
-                        if (data.status == "FAILED") {
-                            callback({ progress: 255, status: "Failed" });
-                            return false;
-                        }
-                        if (data.operationStatus == null || data.operationStatus.progress == undefined) {
-                            // console.log(data);
-                            errorNums--;
-                            if (errorNums == 0) {
-                                callback({ progress: 255, status: "time over" });
-                                return false;
-                            }
-                            setTimeout(() => {
-                                requery();
-                            }, 10000)
-                            return false;
-                        }
-                        if (data.operationStatus.progress > 100) {
-                            callback({ progress: 255, status: "time over" });
-                            return false;
-                        }
-                        if (data.operationStatus.progress < 100) {
-                            callback(data.operationStatus);
-                            setTimeout(() => {
-                                requery();
-                            }, 5000)
-                        } else {
-                            res(data.operationStatus);
-                        }
-                    })
-            }
-            requery();
-        })
-        return mypromise;
-    }
-
-    queryNsProgress(jobid, id, callback, operationType) {
-        let mypromise = new Promise((res, rej) => {
-           
-            let errorNums = 180;
-            let requery = () => {
-                this.myhttp.getNsProgress(jobid, id, operationType)
-                    .subscribe((data) => {
-                        if (data.status == "FAILED") {
-                            callback({ progress: 255, status: "Failed" });
-                            return false;
-                        }
-                        if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) {
-                            errorNums--;
-                            if (errorNums == 0) {
-                                callback({ progress: 255, status: "time over" });
-                                return false;
-                            }
-                            setTimeout(() => {
-                                requery();
-                            }, 10000)
-                            return false;
-                        }
-                        if (data.responseDescriptor.progress > 100 && data.responseDescriptor.status == "error") {
-                            callback({ progress: 255, status: data.responseDescriptor.statusDescription });
-                            return false;
-                        }
-                        if (data.responseDescriptor.progress < 100) {
-                            callback(data.responseDescriptor);
-                            setTimeout(() => {
-                                requery();
-                            }, 5000)
-                        } else {
-                            res(data);
-                        }
-                    })
-              
-            };
-            requery();
-        });
-        return mypromise;
-    }
-
-}
diff --git a/usecaseui-portal/src/app/services/services.component.html b/usecaseui-portal/src/app/services/services.component.html
deleted file mode 100644
index 10142833..00000000
--- a/usecaseui-portal/src/app/services/services.component.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-<p>
-  services works!
-</p>
diff --git a/usecaseui-portal/src/app/services/services.component.less b/usecaseui-portal/src/app/services/services.component.less
deleted file mode 100644
index e69de29b..00000000
--- a/usecaseui-portal/src/app/services/services.component.less
+++ /dev/null
diff --git a/usecaseui-portal/src/app/services/services.component.spec.ts b/usecaseui-portal/src/app/services/services.component.spec.ts
deleted file mode 100644
index 2e76b9f9..00000000
--- a/usecaseui-portal/src/app/services/services.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ServicesComponent } from './services.component';
-
-describe('ServicesComponent', () => {
-  let component: ServicesComponent;
-  let fixture: ComponentFixture<ServicesComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ServicesComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ServicesComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/usecaseui-portal/src/app/services/services.component.ts b/usecaseui-portal/src/app/services/services.component.ts
deleted file mode 100644
index eec235b4..00000000
--- a/usecaseui-portal/src/app/services/services.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-services',
-  templateUrl: './services.component.html',
-  styleUrls: ['./services.component.less']
-})
-export class ServicesComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}