Fix instance instantiation for CCVPN

Change-Id: I4920a1e277de18d55599aff8d3c2bbd7b49480ab
Issue-ID: USECASEUI-170
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

5 files changed, 561 insertions, 282 deletions

diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html
index 76950c32..28162251 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.html
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html
@@ -13,236 +13,276 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<h3 class="title"> Services List </h3>
-<hr>
-<div class="action">
-  <span>Customer: </span>
-  <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
-    <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i></button>
-    <ul nz-menu style="max-height: 200px; overflow: auto;">
-      <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
-        <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
-      </li>
-    </ul>
-  </nz-dropdown>
-  
-  &nbsp;&nbsp;
-  <span>Service Type: </span>
-  <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
-    <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i></button>
-    <ul nz-menu style="max-height: 200px; overflow: auto;">
-      <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
-        <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
-      </li>
-    </ul>
-  </nz-dropdown>
+<div class="action ant-tabs-bar">
+    <span>Customer: </span>
+    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+        <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i>
+        </button>
+        <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
+            <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList">
+                <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+            </li>
+        </ul>
+    </nz-dropdown>
 
-  <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
-  <nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-    <span style="display:inline-block;width:70px;">Service: </span>
-    <nz-select style="width: 165px;" [(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>
+    &nbsp;&nbsp;
+    <span>Service Type: </span>
+    <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
+        <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i>
+        </button>
+        <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;">
+            <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList">
+                <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a>
+            </li>
+        </ul>
+    </nz-dropdown>
 
-    <hr>
-    <div *ngIf="templateTypeSelected == 'SOTN'||templateTypeSelected == 'CCVPN'">
-      <span>SOTN VPN: </span>
-      <nz-select style="width: 165px;" [(ngModel)]="template1" nzAllowClear >
-        <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
-      </nz-select>
+    <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i
+            class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
+    <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="CREATE" (nzOnCancel)="handleCancel()"
+              (nzOnOk)="handleOk()">
+        <div class="select-list">
+            <span style="display:inline-block;width:70px;">Service: </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>
 
-      <br><br>
-      <span style="display:inline-block;width:70px;"> SITE: </span>
-      <nz-select style="width: 165px;" [(ngModel)]="template2" nzAllowClear >
-        <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
-      </nz-select>
-      
-      <div *ngIf="templateTypeSelected == 'CCVPN'">
-        <br>
-        <span style="display:inline-block;width:70px;">SD-WAN: </span>
-        <nz-select style="width: 165px;" [(ngModel)]="template3" nzAllowClear >
-          <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
-        </nz-select>
-      </div>
-    </div>
+        <div *ngIf="templateTypeSelected == 'SOTN'||templateTypeSelected == 'CCVPN'">
+            <div class="select-list">
+                <span style="display:inline-block;">SOTN VPN: </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 class="select-list">
+                <span style="display:inline-block;width:70px;"> SITE: </span>
+                <nz-select style="width: 176px;float: right;" [(ngModel)]="template2" nzAllowClear>
+                    <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+                </nz-select>
+            </div>
+            <div *ngIf="templateTypeSelected == 'CCVPN'">
+                <div class="select-list">
+                    <span style="display:inline-block;width:70px;">SD-WAN: </span>
+                    <nz-select style="width: 176px;float: right;" [(ngModel)]="template3" nzAllowClear>
+                        <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+                    </nz-select>
+                </div>
+            </div>
+        </div>
 
-    <div *ngIf="templateTypeSelected == 'E2E Service'||templateTypeSelected == 'Network Service'">
-      <span style="display:inline-block;width:70px;">TEMPLATE: </span>
-      <nz-select style="width: 165px;" [(ngModel)]="template4" nzAllowClear >
-        <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
-      </nz-select>
-    </div>
-  </nz-modal>
+        <div *ngIf="templateTypeSelected == 'E2E Service'||templateTypeSelected == 'Network Service'">
+            <div class="select-list">
+                <span style="display:inline-block;width:70px;">TEMPLATE: </span>
+                <nz-select style="width: 176px;float: right;" [(ngModel)]="template4" nzAllowClear>
+                    <nz-option *ngFor="let item of templates" [nzValue]="item" [nzLabel]="item.name"></nz-option>
+                </nz-select>
+            </div>
+        </div>
+    </nz-modal>
 </div>
-<div class="list">
-    <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%">NO</th>
-          <th nzWidth="5%"></th>
-          <th nzWidth="20%">Service Instance Id</th>
-          <th nzWidth="20%">Name</th>
-          <th nzWidth="15%">Type</th>
-          <th nzWidth="20%">Status</th>
-          <th nzWidth="15%">Action</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-id"] || data.nsInstanceId}}</td>
-            <td>{{data["service-instance-name"] || data.nsName}}</td>
-            <td>{{data.serviceDomain}}</td>
-            <td>
+<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">
+                <span>{{item.number}}</span><br>
+                <span>{{item.serviceDomain}}&nbsp;&nbsp;Service Instances</span>
+            </div>
+        </li>
+    </ul>
+    <div class="list">
+        <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%">NO</th>
+                <th nzWidth="5%"></th>
+                <th nzWidth="20%">Service Instance Id</th>
+                <th nzWidth="20%">Name</th>
+                <th nzWidth="15%">Service</th>
+                <th nzWidth="20%">Status</th>
+                <th nzWidth="15%">Action</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-id"] || data.nsInstanceId}}</td>
+                    <td>{{data["service-instance-name"] || data.nsName}}</td>
+                    <td [ngClass]="{'e2eColor':data.serviceDomain=='E2E Service','nsColor':data.serviceDomain=='Network Service','ccvpnColor':data.serviceDomain=='CCVPN','sotnColor':data.serviceDomain=='SOTN'}">
+                        {{data.serviceDomain}}
+                    </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'}">{{data.tips}}</span>
-              <nz-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate"></nz-progress>
-            </td>
-            <td>
-              <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
-                *ngIf="data.serviceDomain=='E2E Service' " class="anticon anticon-setting" (click)="scaleService(data)"></i>
-              <!-- <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> -->
-              <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
-                *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
-              <i [ngClass]="{'cannotclick':data.status == 'In Progress'}"  class="anticon anticon-delete" (click)="deleteModel(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>{{item.serviceDomain}}</td>
-            <td>
-              <span [ngClass]="{'healing':item.status=='Healing'}">{{item.status || "Available"}}</span>
-              <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress>
-            </td>
-            <td>
-              <i *ngIf="item.serviceDomain=='vnf'" [ngClass]="{'cannotclick':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-progress *ngIf="data.status == 'In Progress'" [nzPercent]="data.rate"></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-ellipsis" (click)="serviceDetail(data)"></i>
+                        <i [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-delete"
+                           (click)="deleteModel(data)"></i>
+                        <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+                           class="anticon anticon-setting" (click)="scaleService(data)"></i>
+                        <!-- <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>{{item.serviceDomain}}</td>
+                    <td>
+                        <span [ngClass]="{'healing':item.status=='Healing'}">{{item.status || "Available"}}</span>
+                        <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress>
+                    </td>
+                    <td>
+                        <i [ngClass]="{'cannotclick':data.serviceDomain!='E2E Service' || data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+                           class="anticon anticon-reload" (click)="healService(item)"></i>
+                    </td>
+                </tr>
+            </ng-template>
+            </tbody>
+        </nz-table>
 
-    <nz-modal [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk()">
-      <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?</h3>
-      Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || thisService["vnfInstanceId"]}}</b>
-      <div *ngFor="let item of e2e_nsData">
-        <h3>{{ item.netWorkServiceName }}</h3><hr>
-        <span style="display:inline-block;width:50%;">Scale Type:</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>
-        <span style="display:inline-block;width:50%;">AspectId:</span>
-        <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string">
-        <span style="display:inline-block;width:50%;">Number Of Steps:</span>
-        <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100" nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number>
-        <span style="display:inline-block;width:50%;">Scaling Direction:</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>
-    </nz-modal>
-    <nz-modal [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()" (nzOnOk)="deleteOk()">
-      <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure delete this instance?</h3>
-      Instance ID: <b class="deleteModelContent"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] }}</b>
-      <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
-        <span style="display:inline-block;width:50%;">terminationType:</span>
-        <nz-select style="width: 165px;" [(ngModel)]="terminationType" >
-          <nz-option nzValue="graceful" nzLabel="graceful"></nz-option>
-          <nz-option nzValue="forceful" nzLabel="forceful"></nz-option>
-        </nz-select>
-        <span *ngIf="terminationType=='graceful'" style="display:inline-block;width:50%;">gracefulTerminationTimeout:</span>
-        <input *ngIf="terminationType=='graceful'" style="width: 165px;" nz-input [(ngModel)]="gracefulTerminationTimeout">
-      </div>
-    </nz-modal>
-    <nz-modal [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" (nzOnOk)="healOk()">
-      <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?</h3>
-      Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] || thisService["vnfInstanceId"]}}</b>
-      <!-- NS -->
-      <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
-        <span style="display:inline-block;width:50%;">degreeHealing:</span>
-        <nz-select style="width: 165px;" [(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>
-          <span  style="display:inline-block;">actionsHealing:</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%;">healScript:</span>
-        <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript"> 
-        <div>
-          <span  style="display:inline-block;">additionalParamsforNs:</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'">
-          <span style="display:inline-block;width:50%;">cause:</span>
-          <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.cause">
-          <span style="display:inline-block;width:50%;">action:</span>
-          <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.additionalParams.action">
-          <span style="display:inline-block;width:50%;">actionvminfo:</span>
-          <nz-select style="width: 165px;" [(ngModel)]="vmSelected" >
-            <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option>
-          </nz-select>
-      </div>
-    </nz-modal>
-</div>
+        <nz-modal [nzVisible]="scaleModelVisible" nzTitle="Scale" (nzOnCancel)="scaleCancel()" (nzOnOk)="scaleOk()">
+            <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?
+            </h3>
+            Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
+            thisService["vnfInstanceId"]}}</b>
+            <div *ngFor="let item of e2e_nsData">
+                <h3>{{ item.netWorkServiceName }}</h3>
+                <hr>
+                <span style="display:inline-block;width:50%;">Scale Type:</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>
+                <span style="display:inline-block;width:50%;">AspectId:</span>
+                <input style="width: 165px;" nz-input [(ngModel)]="item.aspectId" placeholder="string">
+                <span style="display:inline-block;width:50%;">Number Of Steps:</span>
+                <nz-input-number style="width: 165px;" [(ngModel)]="item.numberOfSteps" [nzMin]="1" [nzMax]="100"
+                                 nzPrecision=0 [nzStep]="1" nzPlaceHolder="number"></nz-input-number>
+                <span style="display:inline-block;width:50%;">Scaling Direction:</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>
+        </nz-modal>
+        <nz-modal [(nzVisible)]="deleteModelVisible" nzTitle="Delete" (nzOnCancel)="deleteCancel()"
+                  (nzOnOk)="deleteOk()">
+            <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure delete this instance?
+            </h3>
+            Instance ID: <b class="deleteModelContent"> {{ thisService["service-instance-id"] ||
+            thisService["nsInstanceId"] }}</b>
+            <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
+                <span style="display:inline-block;width:50%;">terminationType:</span>
+                <nz-select style="width: 165px;" [(ngModel)]="terminationType">
+                    <nz-option nzValue="graceful" nzLabel="graceful"></nz-option>
+                    <nz-option nzValue="forceful" nzLabel="forceful"></nz-option>
+                </nz-select>
+                <span *ngIf="terminationType=='graceful'" style="display:inline-block;width:50%;">gracefulTerminationTimeout:</span>
+                <input *ngIf="terminationType=='graceful'" style="width: 165px;" nz-input
+                       [(ngModel)]="gracefulTerminationTimeout">
+            </div>
+        </nz-modal>
+        <nz-modal [nzVisible]="healModelVisible" nzTitle="Heal" (nzOnCancel)="healCancel()" (nzOnOk)="healOk()">
+            <h3><i class="anticon anticon-question-circle" style="color:yellow;"></i>Are you sure heal this instance?
+            </h3>
+            Instance ID: <b style="color:green"> {{ thisService["service-instance-id"] || thisService["nsInstanceId"] ||
+            thisService["vnfInstanceId"]}}</b>
+            <!-- NS -->
+            <div *ngIf="thisService['serviceDomain'] == 'Network Service'">
+                <span style="display:inline-block;width:50%;">degreeHealing:</span>
+                <nz-select style="width: 165px;" [(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>
+                    <span style="display:inline-block;">actionsHealing:</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%;">healScript:</span>
+                <input style="width: 165px;" nz-input [(ngModel)]="nsParams.healScript">
+                <div>
+                    <span style="display:inline-block;">additionalParamsforNs:</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'">
+                <span style="display:inline-block;width:50%;">cause:</span>
+                <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.cause">
+                <span style="display:inline-block;width:50%;">action:</span>
+                <input style="width: 165px;" nz-input [(ngModel)]="vnfParams.additionalParams.action">
+                <span style="display:inline-block;width:50%;">actionvminfo:</span>
+                <nz-select style="width: 165px;" [(ngModel)]="vmSelected">
+                    <nz-option *ngFor="let item of vnfVms" [nzValue]="item" [nzLabel]="item.vmName"></nz-option>
+                </nz-select>
+            </div>
+        </nz-modal>
+    </div>
 
-<div class="detailComponent" *ngIf="detailshow">
-  <app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData" (closeDetail)="detailshow = false;"></app-ccvpn-detail>
-</div>
-<div class="createComponent" *ngIf="createshow">
-  <app-ccvpn-creation 
-    [createParams]="createData" 
-    [namesTranslate]="namesTranslate" 
-    (closeCreate)="closeCreate($event)">
-  </app-ccvpn-creation>
-</div>
-<div class="createComponent" *ngIf="createshow2">
-  <app-e2e-creation
-    [createParams]="createData" 
-    (nsCloseCreate)="nsCloseCreate($event)" 
-    (e2eCloseCreate)="e2eCloseCreate($event)">
-  </app-e2e-creation>
-</div>
+    <div class="detailComponent" *ngIf="detailshow">
+        <app-ccvpn-detail [namesTranslate]="namesTranslate" [detailParams]="detailData"
+                          (closeDetail)="detailshow = false;"></app-ccvpn-detail>
+    </div>
+    <div class="createComponent" *ngIf="createshow">
+        <app-ccvpn-creation
+                [createParams]="createData"
+                [namesTranslate]="namesTranslate"
+                (closeCreate)="closeCreate($event)">
+        </app-ccvpn-creation>
+    </div>
+    <div class="createComponent" *ngIf="createshow2">
+        <app-e2e-creation
+                [createParams]="createData"
+                (nsCloseCreate)="nsCloseCreate($event)"
+                (e2eCloseCreate)="e2eCloseCreate($event)">
+        </app-e2e-creation>
+    </div>
+    <!--</div>-->
+</nz-layout>
\ No newline at end of file
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
index 40c00231..3ef3fde2 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less
@@ -25,25 +25,31 @@ hr {
     margin-bottom: 20px;
 }
 .action {
-    margin-bottom: 20px;
+    margin-bottom: 15px;
+    padding: 28px;
+    background: #ffffff;
+    position: relative;
     span {
         display: inline-block;
         font: 700 14px "Arial";
-        color: #4c5e70;
+        color: #3C4F8C;
+        margin-right: 5px;
     }
     nz-dropdown {
         vertical-align: middle;
+        background-color:#ffffff;
         :hover{
-            border-color: #147dc2;
+            border-color: #48C6EF;
         }
         button {
             width: 165px;
-            height: 30px;
-            background-color: #eceff4;
+            height: 42px;
+            background-color:#ffffff;
             text-align: left;
-            border-color: #9fa9ab;
+            border-color: #EEEEEE;
             span {
                 font-weight: 400;
+                color: #3C4F8C;
                 display: inline-block;
                 width: 120px;
                 overflow: hidden;
@@ -56,17 +62,69 @@ hr {
                 right: 10px;
             }
         }
-        //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
     }
+    //        //下拉框中的样式在style.less中，下拉框是在body中额外临时生成的
     .create {
-        float: right;
-        height: 30px;
-        padding: 0 10px;
+        position: absolute;
+        right: 3%;
+        top:50%;
+        width:116px;
+        height:42px;
+        background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%);
+        border-radius:2px;
+        margin-top: -15px;
         span {
             color: #fff;
             font-weight: 400;
+            font-size: 18px;
+        }
+        .anticon-plus-circle-o{
+            font-size: 18px;
         }
     }
+    .create.ant-btn.ant-btn-primary{
+        border: none;
+    }
+
+}
+.top-num{
+    overflow: auto;
+}
+.top-list{
+    position: relative;
+    width:360px;
+    height:160px;
+    margin: 15px 15px 30px 15px;
+    float: left;
+    background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%);
+    box-shadow:0px 10px 15px 2px rgba(222,222,222,1);
+    border-radius:2px;
+}
+.top-list .round{
+    position: absolute;
+    width:80px;
+    height:80px;
+    line-height: 80px;
+    text-align: center;
+    top:50%;
+    left: 10px;
+    margin-top: -40px;
+    background:#E0EDFF;
+    border:2px solid rgba(224,237,255,1);
+    border-radius: 50%;
+    font-size:18px;
+    font-family:ArialMT;
+    color:#3C4F8C;
+}
+.top-list .top-list-text{
+    position: absolute;
+    text-align: right;
+    height: 40px;
+    line-height: 20px;
+    top:50%;
+    margin-top: -20px;
+    right: 20px;
+    color: #fff;
 }
 .list {
     background-color: #fff;
@@ -154,3 +212,27 @@ hr {
     padding: 20px 32px;
     z-index: 3;
 }
+/*2019.01.14*/
+.e2eColor{
+    color: #5B45E7;
+}
+.nsColor{
+    color: #F96D7D;
+}
+.ccvpnColor{
+    color: #3E86EC;
+}
+.sotnColor{
+    color: #FFB629;
+}
+.select-list{
+    width: 280px;
+    height: 32px;
+    line-height: 32px;
+    margin: 25px auto;
+}
+.select-list>span{
+    text-align: left;
+    line-height: 32px;
+}
+
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
index 8c273602..7149ae2f 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts
@@ -40,6 +40,24 @@ export class ServicesListComponent implements OnInit {
   serviceTypeSelected = {name:null};
   listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters'));
   language="en";
+    serviceMunber = [
+        {
+            "serviceDomain": "E2E",
+            "number": 10
+        },
+        {
+            "serviceDomain": "NS",
+            "number": 20
+        },
+        {
+            "serviceDomain": "SOTN",
+            "number": 30
+        },
+        {
+            "serviceDomain": "CCVPN",
+            "number": 40
+        }
+    ];
 
   getallCustomers(){
     console.log(this.listSortMasters);
diff --git a/usecaseui-portal/src/assets/images/create-box.png b/usecaseui-portal/src/assets/images/create-box.png
new file mode 100644
index 00000000..5dc9ba35
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/create-box.png
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 23b954c8..93e5251c 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -1,63 +1,97 @@
 /* You can add global styles to this file, and also import other style files */
 // 下拉框背景hover状态颜色
 .ant-dropdown-menu {
-    .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
-        background-color: #3fa8eb;
+  .ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
+    background-color: #3fa8eb;
+    a {
+      color: #fff;
     }
+  }
 }
 // 表格每页条数选项单位置
 nz-table {
-    .ant-table-thead>tr>th {
-        color:rgba(60,79,140,0.5); //标题字体颜色
-        background-color: #F7F8FC;
-        border-bottom: 0px solid #e8e8e8;
-    }
-    .ant-table-tbody>tr>td{
-        background-color:#fff;
-        border-bottom: 8px solid #F7F8FC;
-    }
-    .ant-spin-container {
-        nz-pagination {
-            ul {
-                .ant-pagination-options {
-                    .ant-pagination-options-size-changer.ant-select{
-                        position: absolute;
-                        left: 0;
-                    }
-                }
+  .ant-table-thead > tr > th {
+    color: rgba(60, 79, 140, 0.5); //标题字体颜色
+    background-color: #F7F8FC;
+    border-bottom: 0px solid #e8e8e8;
+  }
+  .ant-table-tbody > tr > td {
+    background-color: #fff;
+    border-bottom: 8px solid #F7F8FC;
+  }
+  .ant-spin-container {
+    nz-pagination {
+      ul {
+        .ant-pagination-options {
+          .ant-pagination-options-size-changer.ant-select {
+            width: 100px;
+            height: 40px;
+            line-height: 40px !important;
+            position: absolute;
+            left: 0;
+            color: #3C4F8C;
+            .ant-select-selection--single {
+              height: 40px;
+              line-height: 40px !important;
+              .ant-select-selection-selected-value {
+                height: 40px;
+                line-height: 40px !important;
+              }
             }
+          }
+        }
+      }
+      .ant-pagination.mini.ant-table-pagination {
+        .ant-pagination-prev, .ant-pagination-item, .ant-pagination-next {
+          width: 40px;
+          height: 40px;
+          line-height: 40px;
+          .ant-pagination-item-link, .ant-pagination-item-link:after {
+            width: 40px;
+            height: 40px;
+            line-height: 40px;
+          }
         }
+        .ant-pagination-item.ant-pagination-item-active {
+          background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%);
+          border-radius: 2px;
+          a {
+            color: #fff;
+          }
+        }
+      }
     }
+  }
 }
 
 // 详情页迷你表格样式
 .detailInformatioin {
-    nz-table {
-        .ant-table-small {
+  nz-table {
+    .ant-table-small {
+      border-color: #dfdfe0;
+      border-right: 0;
+      .ant-table-content {
+        border-color: #dfdfe0;
+        .ant-table-body > table {
+          padding: 0;
+          .ant-table-thead > tr > th {
+            background-color: #f0f2f5;
+            font-weight: 700;
+            font-size: 18px;
+            padding: 2px 15px;
             border-color: #dfdfe0;
-            border-right: 0;
-            .ant-table-content {
-                border-color:  #dfdfe0;
-                .ant-table-body > table { 
-                    padding: 0;
-                    .ant-table-thead > tr > th {
-                        background-color: #f0f2f5;
-                        font-weight: 700;
-                        font-size: 14px;
-                        padding: 2px 15px;
-                        border-color: #dfdfe0;
-                    }
-                    .ant-table-tbody > tr > td {
-                        background-color: #f0f2f5;
-                        font-size: 14px;
-                        padding: 2px 15px;
-                        color: #323437;
-                        border-color: #dfdfe0;
-                    }
-                }
-            }
+          }
+          .ant-table-tbody > tr > td {
+            background-color: #f0f2f5;
+            font-size: 14px;
+            padding: 2px 15px;
+            color: #323437;
+            border-color: #dfdfe0;
+          }
         }
+      }
     }
+  }
 }
 
 // 日期选择插件背景颜色
@@ -69,14 +103,45 @@ nz-table {
 }
 // 分页每页条数选项单位置
 nz-pagination {
-    ul {
-        .ant-pagination-options {
-            .ant-pagination-options-size-changer.ant-select{
-                position: absolute;
-                left: 0;
-            }
+  ul {
+    .ant-pagination-options {
+      .ant-pagination-options-size-changer.ant-select {
+        position: absolute;
+        left: 0;
+        width: 100px;
+        height: 40px;
+        color: #3C4F8C;
+        line-height: 40px !important;
+        .ant-select-selection--single {
+          height: 40px;
+          line-height: 40px !important;
+          .ant-select-selection-selected-value {
+            height: 40px;
+            line-height: 40px !important;
+          }
         }
+      }
     }
+  }
+  .ant-pagination.mini.ant-table-pagination {
+    .ant-pagination-prev, .ant-pagination-item, .ant-pagination-next {
+      width: 40px;
+      height: 40px;
+      line-height: 40px;
+      .ant-pagination-item-link, .ant-pagination-item-link:after {
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+      }
+    }
+    .ant-pagination-item.ant-pagination-item-active {
+      background: linear-gradient(270deg, rgba(63, 156, 255, 1) 0%, rgba(98, 193, 246, 1) 100%);
+      border-radius: 2px;
+      a {
+        color: #fff;
+      }
+    }
+  }
 }
 
 html,body,div,h1,h2,h3,h4,h5,h6,p,ul,li,a,span {
@@ -180,3 +245,77 @@ nz-layout {
 .ant-calendar-picker {
     width: 234px !important;
 }
+
+//2019.01.21 add services-list.component.html
+
+nz-modal {
+  .ant-modal {
+    height: 628px;
+    background: url("assets/images/create-box.png") 100% 100%;
+  }
+  .ant-modal-content{
+    height: 628px;
+    background:transparent;
+  }
+  .ant-modal-header,ant-modal-title,.ant-modal-footer{
+    background:transparent;
+    border: none;
+  }
+  .ant-modal-title{
+    font-size:20px;
+    text-align: center;
+    color:rgba(255,255,255,1);
+    line-height:23px;
+  }
+  .ant-modal-body{
+    span{
+      font-size: 16px;
+      color:rgba(60,79,140,0.5);
+      line-height: 18px;
+      display: inline-block;
+    }
+    nz-select{
+      .ant-select-open.ant-select-selection{
+        border: #48C6EF;
+      }
+      .ant-select-selection__rendered{
+        .ant-select-selection-selected-value{
+          color:rgba(60,79,140,0.5)!important;
+        }
+      }
+    }
+  }
+  .ant-modal-footer{
+    margin: 0 auto;
+    button{
+      width: 126px;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      border: none;
+      outline: none;
+      margin-top: 50px;
+    }
+    button:nth-child(1){
+      background:#EEEEEE;
+      border-radius:2px;
+      margin-left: 50px;
+      margin-right: 10px;
+      span{
+        color: #9DA7C5;
+        font-size: 14px !important;
+      }
+    }
+    button:nth-child(2){
+      background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%);
+      box-shadow:0px 0px 2px 0px rgba(14,90,218,1);
+      border-radius:2px;
+      margin-left: 20px;
+      margin-right: 50px;
+      span{
+        color: #FFFFFF;
+        font-size: 14px !important;
+      }
+    }
+  }
+}
\ No newline at end of file