Service instance lifecycle management

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

3 files changed, 69 insertions, 34 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 f3378d03..9fa6b5c8 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
@@ -94,8 +94,19 @@
         <li *ngFor="let item of serviceMunber" class="top-list">
             <span class="round">{{item.serviceDomain}}</span>
             <div class="top-list-text">
-                <span>{{item.number}}</span><br>
-                <span>{{item.detailName}}</span>
+                    <p>
+                        <span>{{item.failed}}</span>
+                        <span>failed</span>
+                    </p>
+                    <p>
+                        <span>{{item.Success}}</span>
+                        <span>Success</span>
+                    </p>
+                    <p>
+                        <span>{{item.InProgress}}</span>
+                        <span>In Progress</span>
+                    </p>
+                <p class="service-description">{{item.detailName}}</p>
             </div>
         </li>
     </ul>
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 ca0ac419..c1cf7598 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
@@ -108,9 +108,9 @@ hr {
 }
 .top-list{
     position: relative;
-    width:31%;
-    height:224px;
-    margin: 15px 1%;
+    width:29%;
+    height:170px;
+    margin: 10px 1%;
     float: left;
     background:url("../../../assets/images/servicelist-e2e.png") no-repeat;
     background-size: 100% 100%;
@@ -151,15 +151,35 @@ hr {
     text-align: right;
     height: 40px;
     line-height: 20px;
-    top:45%;
-    margin-top: -20px;
     right: 50px;
     color: #fff;
-    span:nth-child(1){
-        display: inline-block;
-        font-size: 22px;
-        font-weight: 500;
-        margin-bottom: 20px;
+    p{
+        font-size: 14px;
+        width: 250px;
+        margin: 15px 0 0 0;
+        height: 13px;
+        clear: both;
+        span{
+            display: inline-block;
+            font-weight: 500;
+            text-align: right;
+            float: right;
+        }
+        span:nth-child(1){
+            font-size: 18px;
+            width: 40px;
+            min-width: 40px;
+        }
+        span:nth-child(2){
+            width: 85px;
+            font-size: 16px;
+        }
+    }
+    p:nth-child(1){
+        margin-top: 25px;
+    }
+    .service-description{
+        color: rgba(255,255,255,0.7);
     }
 }
 .list {
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 0c5c26a9..38fa7e23 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,17 +54,23 @@ export class ServicesListComponent implements OnInit {
     serviceMunber = [
         {
             "serviceDomain": "E2E",
-            "number": 10,
+            "Success": 16,
+            "failed": 4,
+            "InProgress": 11,
             "detailName":"End To End service"
         },
         {
             "serviceDomain": "NS",
-            "number": 20,
+            "Success": 21,
+            "failed": 2,
+            "InProgress": 17,
             "detailName":"Network Service"
         },
         {
             "serviceDomain": "CCVPN",
-            "number": 40,
+            "Success": 36,
+            "failed": 15,
+            "InProgress": 6,
             "detailName":"Cross Domain and Cross Layer VPN"
         }
     ];
@@ -92,21 +98,17 @@ 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);
-	 this.getServiceType(this.customerSelected2);
-
-        // console.log(this.customers)
-      })
-  }
+                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.choseCustomer(this.customerSelected);
+            })
+    }
 
   getallOrchestrators(){
     this.myhttp.getAllOrchestrators()
@@ -160,16 +162,18 @@ export class ServicesListComponent implements OnInit {
                     console.log("serviceTypeList.length == 0", this.serviceTypeList2);
                     return false;
                 }
-                this.serviceTypeSelected2 = this.serviceTypeList2[0];
+                this.serviceTypeSelected2 = this.serviceTypeSelected;
                 this.serviceTypeSelectedName = this.serviceTypeSelected2.name;
-                console.log(this.serviceTypeList2);
+                console.log(this.customerSelected2);
+                console.log(this.serviceTypeSelected2);
                 this.getAlltemplates();
             })
     }
   createModal(): void {
     this.isVisible = true;
-    this.getallOrchestrators();
-
+     this.getallOrchestrators();
+        this.customerSelected2 = this.customerSelected;
+        this.getServiceType(this.customerSelected2);
   }
   //