Service instance lifecycle management

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

16 files changed, 124 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;
         }
diff --git a/usecaseui-portal/src/assets/i18n/cn.json b/usecaseui-portal/src/assets/i18n/cn.json
index 3983d099..9686dea3 100644
--- a/usecaseui-portal/src/assets/i18n/cn.json
+++ b/usecaseui-portal/src/assets/i18n/cn.json
@@ -81,6 +81,7 @@
   "i18nTextDefine_InstanceUpdateStarting":"更新开始",
   "i18nTextDefine_InstanceUpdatedSuccessfully":"更新成功",
   "i18nTextDefine_InstanceUpdateFailed":"更新失败",
+  "i18nTextDefine_Close":"关闭",
 
   "ccvpn-creation-component":"--:",
   "i18nTextDefine_InstanceCreation":"实例创建",
diff --git a/usecaseui-portal/src/assets/i18n/en.json b/usecaseui-portal/src/assets/i18n/en.json
index 255134f8..26e95fda 100644
--- a/usecaseui-portal/src/assets/i18n/en.json
+++ b/usecaseui-portal/src/assets/i18n/en.json
@@ -81,6 +81,7 @@
   "i18nTextDefine_InstanceUpdateStarting":"instance update is starting.",
   "i18nTextDefine_InstanceUpdatedSuccessfully":"instance was updated successfully.",
   "i18nTextDefine_InstanceUpdateFailed":"instance update failed!!!",
+  "i18nTextDefine_Close":"close",
 
   "ccvpn-creation-component":"--:",
   "i18nTextDefine_InstanceCreation":"Instance Creation",
diff --git a/usecaseui-portal/src/assets/images/damaged-icon.png b/usecaseui-portal/src/assets/images/damaged-icon.png
new file mode 100644
index 00000000..37a016bc
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/damaged-icon.png
diff --git a/usecaseui-portal/src/assets/images/execute-faild.png b/usecaseui-portal/src/assets/images/execute-faild.png
index 91ab52fe..c7bfce06 100644
--- a/usecaseui-portal/src/assets/images/execute-faild.png
+++ b/usecaseui-portal/src/assets/images/execute-faild.png
diff --git a/usecaseui-portal/src/assets/images/execute-inproess.png b/usecaseui-portal/src/assets/images/execute-inproess.png
index 6a1beb3b..7a11d6cd 100644
--- a/usecaseui-portal/src/assets/images/execute-inproess.png
+++ b/usecaseui-portal/src/assets/images/execute-inproess.png
diff --git a/usecaseui-portal/src/assets/images/execute-success.png b/usecaseui-portal/src/assets/images/execute-success.png
index 36d67efd..aaf46c35 100644
--- a/usecaseui-portal/src/assets/images/execute-success.png
+++ b/usecaseui-portal/src/assets/images/execute-success.png
diff --git a/usecaseui-portal/src/assets/images/scale-active.png b/usecaseui-portal/src/assets/images/scale-active.png
new file mode 100644
index 00000000..0ff69f30
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/scale-active.png
diff --git a/usecaseui-portal/src/assets/images/scale.png b/usecaseui-portal/src/assets/images/scale.png
new file mode 100644
index 00000000..1cd508bd
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/scale.png
diff --git a/usecaseui-portal/src/assets/images/shibai-icon.png b/usecaseui-portal/src/assets/images/shibai-icon.png
new file mode 100644
index 00000000..374f6270
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/shibai-icon.png
diff --git a/usecaseui-portal/src/assets/images/update-active.png b/usecaseui-portal/src/assets/images/update-active.png
new file mode 100644
index 00000000..75eeecc0
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/update-active.png
diff --git a/usecaseui-portal/src/assets/images/update.png b/usecaseui-portal/src/assets/images/update.png
new file mode 100644
index 00000000..d6788024
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/update.png
diff --git a/usecaseui-portal/src/assets/images/wancheng-icon.png b/usecaseui-portal/src/assets/images/wancheng-icon.png
new file mode 100644
index 00000000..4d672a81
--- /dev/null
+++ b/usecaseui-portal/src/assets/images/wancheng-icon.png
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index a5a95a1d..3cdc7112 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -742,7 +742,11 @@ nz-notification-container .ant-notification{
       background: rgba(255,255,255,0);
       opacity: 1!important;
       color: #ffffff;
+      position: relative;
+      background-image: url("assets/images/notificationmodel.png");
+      background-repeat: no-repeat;
       .ant-notification-notice-content{
+        position: relative;
         .ant-notification-notice-icon{}
         .ant-notification-notice-message{
           margin-left: 88px;
@@ -752,6 +756,8 @@ nz-notification-container .ant-notification{
         }
         .ant-notification-notice-description{
           margin-left: 88px;
+          width: 68%;
+          display: inline-block;
           .notificationlist{
             height: 25px;
             line-height: 25px;
@@ -766,10 +772,30 @@ nz-notification-container .ant-notification{
             }
           }
         }
+        .close-icons{
+          position: absolute;
+          width: 100px;
+          text-align: center;
+          display: inline-block;
+          color: #D9DEF1;
+          top: 0;
+          line-height: 120px;
+          font-size: 18px;
+        }
       }
       .ant-notification-notice-close,.ant-notification-notice-close:hover{
         color: #ffffff!important;
       }
+      .ant-notification-notice-close{
+        width: 80px;
+        height: 100%;
+        position: absolute;
+        border-left: 1px solid #717171;
+        top: 0;
+        .ant-notification-notice-close-x{
+          display: none;
+        }
+      }
     }
   }
 }