create e2eService and nsService

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

1 files changed, 54 insertions, 77 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 e0866524..c18d294a 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
@@ -39,34 +39,40 @@
 
   <button class="create" nz-button [nzType]="'primary'" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
   <nz-modal [(nzVisible)]="isVisible" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-    <p>Content one</p>
-    <p>Content two</p>
-    <p>Content three</p>
-  </nz-modal>
-  <button class="create" nz-button [nzType]="'primary'" (click)="showModal2()"><i class="anticon anticon-plus-circle-o"></i><span> Create </span></button>
-  <nz-modal [(nzVisible)]="isVisible2" nzTitle="Create" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk2()">
     <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>
 
     <hr>
-    <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>
+    <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>
 
-    <span> 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 >
+      <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 == '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>
@@ -101,76 +107,40 @@
       <tbody>
         <ng-template ngFor let-data [ngForOf]="nzTable.data" let-i="index">
           <tr>
-            <td>{{i+1}}</td>
-            <td [nzShowExpand]="data.children[0]" [(nzExpand)]="data.expand"></td>
-            <td>{{data.serviceId}}</td>
-            <td>{{data.name}}</td>
-            <td>{{data.type}}</td>
+            <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>
               <span [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'}">{{data.status}}</span>
-              <nz-progress *ngIf="data.status!='Active' && data.status!='Closed'" [nzPercent]="data.progress"></nz-progress>
+                    'updating':data.status=='Updating','deleting':data.status=='Deleting','creating':data.status=='Creating'}">{{data.status || "Active"}}</span>
+              <nz-progress *ngIf="data.status == 'Creating' || data.status == 'Deleting' || data.status == 'Updating' " [nzPercent]="data.rate"></nz-progress>
+              <!-- <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress> -->
             </td>
             <td>
-              <i class="anticon anticon-setting" (click)="scaleService()"></i>
-              <i class="anticon anticon-cloud-upload-o" (click)="updataService()"></i>
-              <i class="anticon anticon-delete" (click)="deleteService()"></i>
+              <i *ngIf="data.serviceDomain=='E2E Service'||data.serviceDomain=='Network 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 *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-pause" (click)="stopService(data)"></i>
+              <i *ngIf="data.serviceDomain=='Network Service' " class="anticon anticon-reload" (click)="restartService(data)"></i>
+              <i *ngIf="data.serviceDomain=='SOTN'||data.serviceDomain=='CCVPN' " class="anticon anticon-ellipsis" (click)="serviceDetail(data)"></i>
+              <i class="anticon anticon-delete" (click)="deleteService(data)"></i>
+              <!-- <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
+              (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
+            <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
+              (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span> -->
             </td>
           </tr>
-          <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.children">
+          <tr class="childtr" [nzExpand]="data.expand" *ngFor="let item of data.childServiceInstances">
             <td></td>
             <td></td>
-            <td>{{item.serviceId}}</td>
-            <td>{{item.name}}</td>
-            <td colspan="3">{{item.type}}</td>
+            <td>{{data["service-instance-id"] || data.nsInstanceId}}</td>
+            <td>{{data["service-instance-name"] || data.nsName}}</td>
+            <td colspan="3">{{item.serviceDomain}}</td>
           </tr>
         </ng-template>
       </tbody>
     </nz-table>
-    <nz-table *ngIf="1"
-        #nzTable2 [nzData]="tableData2" 
-        nzShowSizeChanger
-        [nzFrontPagination]="true" 
-        [nzShowQuickJumper]="true" 
-        [nzPageSizeOptions]="[5,10,15,20]" 
-        [(nzPageSize)]="pageSize" 
-        [(nzPageIndex)]='pageIndex'
-        nzSize="middle"
-        [nzScroll]="{ y: '58vh' }">
-        <thead nzSingleSort>
-          <tr>
-            <th nzWidth="5%">NO.</th>
-            <th nzWidth="20%"> Instance ID </th>
-            <th nzWidth="20%">Instance Name</th>
-            <!-- <th nzWidth="10%">Type</th> -->
-            <th nzWidth="25%">Description</th>
-            <th nzWidth="15%">Status</th>
-            <th nzWidth="10%">Action</th>
-          </tr>
-        </thead>
-        <tbody>
-            <!-- <ng-template ngFor let-data [ngForOf]="nzTable2.data" let-i="index"> -->
-            <tr *ngFor="let item of nzTable2.data; let i = index; ">
-                <td>{{pageSize*(pageIndex-1) + i+1}}</td>
-                <td>{{item.sotnvpnSer['service-instance-id']}}</td>
-                <td>{{item.sotnvpnSer['service-instance-name']}}</td>
-                <!-- <td>{{item.type}}</td> -->
-                <td>{{item.sotnvpnSer.description}}</td>
-                <td>
-                    <span *ngIf="item.sotnvpnSer.status!='creating' && item.sotnvpnSer.status!='deleting'">{{item.sotnvpnSer.status}}</span>
-                    <span *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [ngClass]="{'deleting':item.sotnvpnSer.status=='deleting','creating':item.sotnvpnSer.status=='creating'}">{{item.sotnvpnSer.status}}</span>
-                    <nz-progress *ngIf="item.sotnvpnSer.status=='creating' || item.sotnvpnSer.status=='deleting'" [nzPercent]="item.sotnvpnSer.rate"></nz-progress>
-                </td>
-                <td>
-                    <span title="detail" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
-                      (click)="showDetail(item)"> <i class="anticon anticon-ellipsis"></i> </span>
-                    <span title="delete" class="action" [ngClass]="{'cannotclick':item.sotnvpnSer.status=='deleting'||item.sotnvpnSer.status=='creating'}" 
-                      (click)="deleteInstace(item)"> <i class="anticon anticon-delete"></i> </span>
-                </td>
-            </tr>
-            <!-- </ng-template> -->
-        </tbody>
-    </nz-table>
 </div>
 
 <div class="detailComponent" *ngIf="detailshow">
@@ -183,3 +153,10 @@
     (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>