Service instance lifecycle management

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

4 files changed, 55 insertions, 80 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 c09b15be..de137fd4 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
@@ -40,7 +40,7 @@
     <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i
             class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> Create </span>
     </button>
-    <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="TEMPLATE" (nzOnCancel)="handleCancel()"
+    <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="Service Creation" (nzOnCancel)="handleCancel()"
               (nzOnOk)="handleOk()">
         <div class="select-list">
             <span style="display:inline-block;">Customer: </span>
@@ -48,47 +48,19 @@
                 <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;">Service Type: </span>
-            <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelected2.name" nzAllowClear>
+       <div class="select-list">
+            <span style="display:inline-block;">SERVICE TYPE: </span>
+            <nz-select style="width: 176px;float: right;" [(ngModel)]="serviceTypeSelected2.name" nzAllowClear (ngModelChange)="choseTemplateType()">
                 <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;">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>
+  <div class="select-list">
+            <span style="display:inline-block;width:70px;">TEMPLATE: </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 == '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;"> 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;">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'">
             <div class="select-list">
                 <span style="display:inline-block;width:70px;">Orchestrator: </span>
@@ -97,14 +69,7 @@
                 </nz-select>
             </div>
         </div>
-        <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>
+   
         <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>
@@ -119,7 +84,7 @@
             <span class="round">{{item.serviceDomain}}</span>
             <div class="top-list-text">
                 <span>{{item.number}}</span><br>
-                <span>{{item.serviceDomain}}&nbsp;&nbsp;Service Instances</span>
+                <span>{{item.detailName}}</span>
             </div>
         </li>
     </ul>
@@ -142,9 +107,9 @@
             <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%">Description</th>
+                <th nzWidth="15%">Use Case</th>
                 <th nzWidth="20%">Status</th>
                 <th nzWidth="15%">Action</th>
             </tr>
@@ -154,8 +119,8 @@
                 <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["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}}
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 48d03b16..915afd3a 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
@@ -74,7 +74,7 @@ hr {
         width:116px;
         height:42px;
         background:#0DA9E2;
-        border-radius:2px;
+        border-radius:6px;
         margin-top: -15px;
         span {
             color: #fff;
@@ -100,10 +100,10 @@ hr {
 }
 .top-list{
     position: relative;
-    width:22%;
-    height:184px;
-  margin: 15px 1.5%;
-  float: left;
+    width:31%;
+    height:224px;
+    margin: 15px 1%;
+    float: left;
     background:url("../../../assets/images/servicelist-e2e.png") no-repeat;
     background-size: 100% 100%;
     //background:linear-gradient(90deg,rgba(16,174,222,1) 0%,rgba(43,206,202,1) 100%);
@@ -114,7 +114,8 @@ hr {
     background-size: 100% 100%;
 }
 .top-num .top-list:nth-child(3){
-    background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat;
+    //background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat;
+    background:url("../../../assets/images/servicelist-sotn.png") no-repeat;
     background-size: 100% 100%;
 }
 .top-num .top-list:nth-child(4){
@@ -150,7 +151,7 @@ hr {
         display: inline-block;
         font-size: 22px;
         font-weight: 500;
-        margin-bottom: 10px;
+        margin-bottom: 20px;
     }
 }
 .list {
@@ -301,7 +302,7 @@ hr {
     width: 320px;
     height: 32px;
     line-height: 32px;
-    margin: 25px auto;
+    margin: 35px auto;
 }
 .select-list>span{
     text-align: right;
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 2ddf1cad..2efe231a 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
@@ -51,19 +51,22 @@ export class ServicesListComponent implements OnInit {
     serviceMunber = [
         {
             "serviceDomain": "E2E",
-            "number": 10
+            "number": 10,
+            "detailName":"End To End service"
         },
         {
             "serviceDomain": "NS",
-            "number": 20
-        },
-        {
-            "serviceDomain": "SOTN",
-            "number": 30
+            "number": 20,
+            "detailName":"Network Service"
         },
+        // {
+        //     "serviceDomain": "SOTN",
+        //     "number": 30
+        // },
         {
             "serviceDomain": "CCVPN",
-            "number": 40
+            "number": 40,
+            "detailName":"Cross Domain and Cross Layer VPN"
         }
     ];
 
@@ -153,7 +156,8 @@ export class ServicesListComponent implements OnInit {
     this.getAlltemplates();
   }
   //
-  templateTypeSelected = "SOTN";
+    templateTypeSelected = this.serviceTypeList2["name"];
+
   choseTemplateType(){
     this.getallOrchestrators();
     this.getAlltemplates();
@@ -180,11 +184,8 @@ export class ServicesListComponent implements OnInit {
         }
         console.log(this.templates);
         this.template1 = this.templates[0];
-        this.template2 = this.templates[1];
-        this.template3 = this.templates[2];
-        this.template4 = this.templates[0];
-
-      },(err)=>{
+             
+            }, (err) => {
 
       })
   }
@@ -200,13 +201,11 @@ export class ServicesListComponent implements OnInit {
     this.isVisible = false;
 
     if(this.templateTypeSelected=="SOTN"||this.templateTypeSelected=="CCVPN"){
-      let data1 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"SOTN"},templates:{template1:this.template1,template2:this.template2}};
-      let data2 = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:"CCVPN"},templates:{template1:this.template1,template2:this.template2,template3:this.template3}};
-      this.createData = this.templateTypeSelected == "SOTN" ? data1 : data2;
+     this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected2, templateType:this.templateTypeSelected},template:this.template1};
       this.createshow = true;
       this.listDisplay = true;
     }else if(this.templateTypeSelected=="E2E Service"||this.templateTypeSelected=="Network Service"){
-      this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected, templateType:this.templateTypeSelected},template:this.template4, orchestrator:this.orchestratorSelected, isSol005Interface:this.isSol005Interface};
+      this.createData = {commonParams:{customer:this.customerSelected, serviceType:this.serviceTypeSelected2, templateType:this.templateTypeSelected},template:this.template1, orchestrator:this.orchestratorSelected, isSol005Interface:this.isSol005Interface};
       this.createshow2 = true;
             this.listDisplay = true;
     }
@@ -253,7 +252,7 @@ export class ServicesListComponent implements OnInit {
               return child;
             }
           })
-
+                    item["iconMore"]=this.iconMore;
           if(item["serviceDomain"]=="Network Service"){
             if(item["vnfInfo"]){
               item["childServiceInstances"] = item["vnfInfo"].map((vnf)=>{
@@ -534,7 +533,7 @@ export class ServicesListComponent implements OnInit {
     let stageNum = 0; //Different stages of progress, used to add up subsequent service progress;
 
     let   createParams = "?customerId="+this.customerSelected.id +
-                        "&serviceType="+this.serviceTypeSelected.name +
+                        "&serviceType="+this.serviceTypeSelected2.name +
                         "&serviceDomain="+this.templateTypeSelected +
                         "&parentServiceInstanceId=";
     this.createService(obj.vpnbody,createParams).then((data)=>{
@@ -568,7 +567,7 @@ export class ServicesListComponent implements OnInit {
       let querypros = [];  //All the query
       // Additional parameters
       let   createParams = "?customerId="+this.customerSelected.id +
-                          "&serviceType="+this.serviceTypeSelected.name +
+                          "&serviceType="+this.serviceTypeSelected2.name +
                           "&serviceDomain="+"SDWAN" +
                           "&parentServiceInstanceId="+this.parentServiceInstanceId;
 
@@ -605,7 +604,7 @@ export class ServicesListComponent implements OnInit {
       let querypros = [];  //All the query
       // Additional parameters
       let createParams = "?customerId="+this.customerSelected.id +
-                        "&serviceType="+this.serviceTypeSelected.name +
+                        "&serviceType="+this.serviceTypeSelected2.name +
                         "&serviceDomain="+"SITE" +
                         "&parentServiceInstanceId="+this.parentServiceInstanceId;
       let createPros = obj.sitebody.map((group)=>{
@@ -657,7 +656,7 @@ export class ServicesListComponent implements OnInit {
     console.log(obj);
     let newData; //
     let   createParams = "?customerId="+this.customerSelected.id +
-                        "&serviceType="+this.serviceTypeSelected.name +
+                        "&serviceType="+this.serviceTypeSelected2.name +
                         "&serviceDomain="+this.templateTypeSelected +
                         "&parentServiceInstanceId="+
                         "&uuid="+obj.service.serviceUuid+
@@ -733,7 +732,7 @@ export class ServicesListComponent implements OnInit {
       }
       let createParams = "?ns_instance_id=" + data.nsInstanceId +
                         "&customerId="+this.customerSelected.id +
-                        "&serviceType="+this.serviceTypeSelected.name +
+                        "&serviceType="+this.serviceTypeSelected2.name +
                         "&serviceDomain="+ this.templateTypeSelected +
                         "&parentServiceInstanceId=";
       // step2
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 7c17ab29..845187a5 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -33,9 +33,11 @@ nz-table {
             .ant-select-selection--single {
               height: 40px;
               line-height: 40px !important;
+              border:none !important;
               .ant-select-selection-selected-value {
                 height: 40px;
                 line-height: 40px !important;
+                margin-left: 5px !important;
               }
             }
           }
@@ -63,12 +65,15 @@ nz-table {
             color: #fff;
           }
         }
+        .ant-pagination-options-quick-jumper{
+          display: none!important;
+        }
       }
     }
   }
 }
 
-// Detail page mini table style
+// 详情页迷你表格样式
 .detailInformatioin {
     nz-table {
         .ant-table-small {
@@ -119,9 +124,11 @@ nz-pagination {
         .ant-select-selection--single {
           height: 40px;
           line-height: 40px !important;
+          border:none !important;
           .ant-select-selection-selected-value {
             height: 40px;
             line-height: 40px !important;
+            margin-left: 5px !important;
           }
         }
       }
@@ -149,6 +156,9 @@ nz-pagination {
         color: #fff;
       }
     }
+    .ant-pagination-options-quick-jumper{
+      display: none!important;
+    }
   }
 }