Service instance lifecycle management

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

3 files changed, 96 insertions, 25 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 24b2af67..c6626379 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
@@ -150,7 +150,14 @@
                     <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>
+                    '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>
@@ -163,14 +170,14 @@
                            (click)="iconMoreShow(data,tableData)" style="transform: rotate(90deg);"></i>
 
                         <ul *ngIf="data.iconMore==true " class="icon-more">
-                            <li>
+                            <li (click)="scaleService(data)">
                                 <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>
+                                   class="anticon anticon-scale"></i>
                                 <span> {{"i18nTextDefine_Scale" | translate}} </span>
                             </li>
-                            <li>
+                            <li (click)="update(data)">
                                 <i [ngClass]="{'cannotclick':data.serviceDomain!='CCVPN' || 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>
+                                   class="anticon anticon-update" ></i>
                                 <span> {{"i18nTextDefine_Update" | translate}} </span>
                             </li>
                         </ul>
@@ -264,6 +271,7 @@
                                 <span>{{ thisService["serviceDomain"] }}</span>
                             </div>
                         </div>
+                        <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                     </div>
                 </div>
             </ng-template>
@@ -329,6 +337,7 @@
                                 <span>{{ thisService["serviceDomain"] }}</span>
                             </div>
                         </div>
+                        <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                     </div>
                 </div>
             </ng-template>
@@ -424,6 +433,7 @@
                                 <span>{{ thisService["serviceDomain"] }}</span>
                             </div>
                         </div>
+                        <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                     </div>
                 </div>
             </ng-template>
@@ -455,6 +465,7 @@
                             <span>{{ thisCreateService['serviceDomain'] }}</span>
                         </div>
                     </div>
+                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                 </div>
             </div>
         </ng-template>
@@ -489,6 +500,7 @@
                             <span>{{ thisCreateService["serviceDomain"] }}</span>
                         </div>
                     </div>
+                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                 </div>
             </div>
         </ng-template>
@@ -523,6 +535,7 @@
                             <span>{{ thisService["serviceDomain"] }}</span>
                         </div>
                     </div>
+                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                 </div>
             </div>
         </ng-template>
@@ -551,6 +564,7 @@
                             <span>{{ thisService["serviceDomain"] }}</span>
                         </div>
                     </div>
+                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                 </div>
             </div>
         </ng-template>
@@ -579,6 +593,7 @@
                             <span>{{ thisService["serviceDomain"] }}</span>
                         </div>
                     </div>
+                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                 </div>
             </div>
         </ng-template>
@@ -607,6 +622,7 @@
                             <span>{{ thisService["serviceDomain"] }}</span>
                         </div>
                     </div>
+                    <div class="close-icons">{{"i18nTextDefine_Close" | translate}}</div>
                 </div>
             </div>
         </ng-template>
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 c1cf7598..b7499724 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
@@ -238,8 +238,7 @@ hr {
                 .icon-more{
                     position: absolute;
                     width: 115px;
-                    height: 135px;
-                    //height: 156px;
+                    height: 90px;
                     top:50px;
                     padding:15px 0 0 15px;
                     background: #ffffff;
@@ -250,10 +249,28 @@ hr {
                         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 {
@@ -275,7 +292,7 @@ hr {
     height: 100vh;
     background-color: #f3f3f3;
     overflow-y: auto;
-    padding: 20px 32px;
+    //padding: 20px 32px;
     z-index: 3;
 }
 .createComponent {
@@ -291,29 +308,32 @@ hr {
 }
 /*2019.01.14*/
 .e2eColor,.nsColor,.ccvpnColor,.sotnColor,.voLTEColor{
-    color: #FFFFFF;
+    color: #3671AB;
     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%);
+    background:linear-gradient(131deg,rgba(147,196,255,1) 0%,rgba(120,241,226,1) 100%);
     border-radius:4px
 }
 .nsColor{
-    background:linear-gradient(135deg,rgba(252,167,91,1) 0%,rgba(253,203,106,1) 100%);
+    background:linear-gradient(135deg,rgba(253,187,127,1) 0%,rgba(250,215,153,1) 100%);
     border-radius:4px;
+    color: #A16C39;
 }
-.ccvpnColor{ 
-    background:linear-gradient(135deg,rgba(81,113,251,1) 0%,rgba(201,123,254,1) 100%);
+.ccvpnColor{
+    background:linear-gradient(135deg,rgba(198,222,251,1) 0%,rgba(217,215,252,1) 100%);
     border-radius:4px;
+    color: #7C74BB;
 }
 .sotnColor{
-    background:linear-gradient(133deg,rgba(24,179,170,1) 0%,rgba(70,216,178,1) 100%);
+    background:rgba(201,243,239,1);
     border-radius:4px;
+    color: #30B0A0;
 }
-.voLTEColor{    
-    background:#0AD251;
+.voLTEColor{
+    background:rgba(201,243,239,1);
 }
 .vnfColor,.siteColor,.SDWANColor{
     color:rgba(60,79,140,0.5);
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 55e339f1..06991b47 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
@@ -54,23 +54,23 @@ export class ServicesListComponent implements OnInit {
     serviceMunber = [
         {
             "serviceDomain": "E2E",
-            "Success": 16,
-            "failed": 4,
-            "InProgress": 11,
+            "Success": 0,
+            "failed": 0,
+            "InProgress": 0,
             "detailName":"i18nTextDefine_End_To_End_Service"
         },
         {
             "serviceDomain": "NS",
-            "Success": 21,
-            "failed": 2,
-            "InProgress": 17,
+            "Success": 0,
+            "failed": 0,
+            "InProgress": 0,
             "detailName":"i18nTextDefine_Network_Service"
         },
         {
             "serviceDomain": "CCVPN",
-            "Success": 36,
-            "failed": 15,
-            "InProgress": 6,
+            "Success": 0,
+            "failed": 0,
+            "InProgress": 0,
             "detailName":"i18nTextDefine_Cross_Domain_and_Cross_Layer_VPN"
         }
     ];
@@ -361,6 +361,36 @@ export class ServicesListComponent implements OnInit {
           return item;
         })
         console.log(this.tableData)
+                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;
+                        }
+                    }
+                })
+                console.log(this.serviceMunber)
       },(err)=>{
         console.log(err);
       })
@@ -838,6 +868,11 @@ e2eCloseCreate(obj,templateCreatestarting,templateCreateSuccessFaild) {
         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;
         }