Service instance lifecycle management

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

3 files changed, 155 insertions, 35 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 4a1a44d3..9e36c7b3 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
@@ -14,7 +14,8 @@
     limitations under the License.
 -->
 <div class="action ant-tabs-bar">
-    <span>Customer: </span>
+
+    <span><i style="margin-right: 10px"><img src="../../../assets/images/customer.png" alt=""></i>Customer: </span>
     <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'">
         <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i>
         </button>
@@ -25,8 +26,7 @@
         </ul>
     </nz-dropdown>
 
-    &nbsp;&nbsp;
-    <span>Service Type: </span>
+    <span style="margin-left:40px"><i style="margin-right: 10px"><img src="../../../assets/images/service-type.png" alt=""></i>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>
@@ -40,10 +40,22 @@
     <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="CREATE" (nzOnCancel)="handleCancel()"
+    <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle="TEMPLATE" (nzOnCancel)="handleCancel()"
               (nzOnOk)="handleOk()">
         <div class="select-list">
-            <span style="display:inline-block;width:70px;">Service: </span>
+            <span style="display:inline-block;">Customer: </span>
+            <nz-select style="width: 176px;float: right;" [(ngModel)]="customerSelected2.name" nzAllowClear>
+                <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>
+                <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> -->
@@ -62,14 +74,14 @@
                 </nz-select>
             </div>
             <div class="select-list">
-                <span style="display:inline-block;width:70px;"> SITE: </span>
+                <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;width:70px;">SD-WAN: </span>
+                    <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>
@@ -144,8 +156,10 @@
                     <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>
+                        <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',
@@ -156,11 +170,24 @@
                     </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>
+                           class="anticon anticon-bars" (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 [ngClass]="{'cannotclick':data.status == 'In Progress'}" class="anticon anticon-ellipsis"
+                           (click)="iconMoreShow(data)" style="transform: rotate(90deg);"></i>
+
+                        <ul *ngIf="data.iconMore==true " class="icon-more">
+                            <li>
+                                <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>
+                                <span>scale</span>
+                            </li>
+                           <li>
+                               <i [ngClass]="{'cannotclick':data.status == 'In Progress'||(data.status=='Failed' && data.operationType=='1001')||(data.status=='Failed' && data.operationType=='1002')}"
+                                  class="anticon anticon-cloud-upload-o" (click)="update(data)"></i>
+                               <span>update</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> -->
@@ -171,7 +198,11 @@
                     <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>
+                        <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'}">{{data.tips}}</span>
                         <nz-progress *ngIf=" item.status == 'Healing' " [nzPercent]="item.rate"></nz-progress>
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 55419785..ec4a7f76 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
@@ -73,7 +73,7 @@ hr {
         top:50%;
         width:116px;
         height:42px;
-        background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%);
+        background:#0DA9E2;
         border-radius:2px;
         margin-top: -15px;
         span {
@@ -89,7 +89,8 @@ hr {
         border: none;
     }
     .create:hover{
-        background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
+        background:#09C6E2;
+        //background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important;
     }
 
 }
@@ -100,21 +101,34 @@ hr {
 .top-list{
     position: relative;
     width:22%;
-    height:160px;
-    margin: 15px 1.5%;
-    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);
+    height:184px;
+  margin: 15px 1.5%;
+  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%);
     border-radius:2px;
 }
+.top-num .top-list:nth-child(2){
+    background:url("../../../assets/images/servicelist-ns.png") no-repeat;
+    background-size: 100% 100%;
+}
+.top-num .top-list:nth-child(3){
+    background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat;
+    background-size: 100% 100%;
+}
+.top-num .top-list:nth-child(4){
+    background:url("../../../assets/images/servicelist-sotn.png") no-repeat;
+    background-size: 100% 100%;
+}
 .top-list .round{
     position: absolute;
     width: 60px;
     height: 60px;
     line-height: 60px;
-    text-align: center;
-    top:50%;
-    left: 10px;
+  text-align: center;
+    top:45%;
+    left: 50px;
     margin-top: -30px;
     background:#E0EDFF;
     border:2px solid rgba(224,237,255,1);
@@ -128,12 +142,15 @@ hr {
     text-align: right;
     height: 40px;
     line-height: 20px;
-    top:50%;
+    top:45%;
     margin-top: -20px;
-    right: 15px;
+    right: 50px;
     color: #fff;
     span:nth-child(1){
+        display: inline-block;
         font-size: 22px;
+        font-weight: 500;
+        margin-bottom: 10px;
     }
 }
 .list {
@@ -143,6 +160,7 @@ hr {
     nz-table {
         tbody {
             td {
+                position: relative;
                 span.active {
                     font-size: 14px;
                     color: #147dc2;
@@ -188,6 +206,26 @@ hr {
                     color: #aaa;
                     opacity: 0.6;
                 }
+                .icon-more{
+                    position: absolute;
+                    width: 115px;
+                    height: 135px;
+                    //height: 156px;
+                    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;
+                        span{
+                            margin-left: 5px;
+                        }
+                    }
+                }
             }
             tr.childtr {
                 td {
@@ -223,26 +261,48 @@ hr {
     z-index: 3;
 }
 /*2019.01.14*/
-.e2eColor{
-    color: #5B45E7;
+.e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{
+    color: #FFFFFF;
+    width:120px;
+    height: 34px;
+    line-height: 34px;
+    margin-bottom: 0!important;
+    text-align: center;
+    background:linear-gradient(131deg,rgba(79,151,239,1) 0%,rgba(48,217,196,1) 100%);
+    border-radius:4px
 }
 .nsColor{
-    color: #F96D7D;
+    background:linear-gradient(135deg,rgba(252,167,91,1) 0%,rgba(253,203,106,1) 100%);
 }
-.ccvpnColor{
-    color: #3E86EC;
+.ccvpnColor{ 
+    background:linear-gradient(135deg,rgba(81,113,251,1) 0%,rgba(201,123,254,1) 100%);
 }
 .sotnColor{
-    color: #FFB629;
+    background:linear-gradient(133deg,rgba(24,179,170,1) 0%,rgba(70,216,178,1) 100%);
+}
+.voLTEColor{    
+    background:#0AD251;
 }
+.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: 280px;
+    width: 320px;
     height: 32px;
     line-height: 32px;
     margin: 25px auto;
 }
 .select-list>span{
-    text-align: left;
+    text-align: right;
+    width: 110px!important;
     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 0b550caa..ed724383 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
@@ -35,14 +35,19 @@ export class ServicesListComponent implements OnInit {
   }
   // customer servicetype
   isSol005Interface = false;
-  customerList = [];
   orchestratorList = [];
+  customerList = [];
+  customerList2 = [];
   customerSelected = {name:null,id:null};
-  orchestratorSelected = {name:null,id:null};
+  customerSelected2 = {name: null, id: null};
   serviceTypeList = [];
+  serviceTypeList2 = [];
   serviceTypeSelected = {name:null};
+  serviceTypeSelected2 = {name: null};
+  orchestratorSelected = {name:null,id:null};
   listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters'));
   language="en";
+    iconMore=false;
     serviceMunber = [
         {
             "serviceDomain": "E2E",
@@ -62,6 +67,14 @@ export class ServicesListComponent implements OnInit {
         }
     ];
 
+    //The icon behind each row of data in the table expands
+    iconMoreShow(data){
+        if(data.iconMore==false){
+            data.iconMore=true;
+        }else {
+            data.iconMore=false;
+        }
+    }
   getallCustomers(){
     console.log(this.listSortMasters);
     this.myhttp.getAllCustomers()
@@ -71,7 +84,15 @@ export class ServicesListComponent implements OnInit {
           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) {
+            console.log("customerList2.length == 0", this.customerList2);
+            return false;
+        }
         this.customerSelected = this.customerList[0];
+                this.customerSelected2 = this.customerList2[0];
         this.choseCustomer(this.customerSelected);
         // console.log(this.customers)
       })
@@ -94,11 +115,19 @@ export class ServicesListComponent implements OnInit {
     this.myhttp.getServiceTypes(this.customerSelected)
       .subscribe((data)=>{
         this.serviceTypeList = data.map((item)=>{return {name:item["service-type"]}});
+                this.serviceTypeList2 = data.map((item) => {
+                    return {name: item["service-type"]}
+                });
         if(this.serviceTypeList.length==0){
           console.log("serviceTypeList.length == 0",this.serviceTypeList);
           return false;
         }
+          if (this.serviceTypeList2.length == 0) {
+              console.log("serviceTypeList2.length == 0", this.serviceTypeList2);
+              return false;
+          }
         this.serviceTypeSelected = this.serviceTypeList[0];
+                this.serviceTypeSelected2 = this.serviceTypeList2[0];
         this.choseServiceType(this.serviceTypeSelected);
         // console.log(this.listServiceTypes);
       })