Service instance lifecycle management

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

3 files changed, 42 insertions, 1 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 7f2f132f..c266c41d 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
@@ -639,15 +639,21 @@
     <div class="createComponent" *ngIf="createshow">
         <app-ccvpn-creation
                 [createParams]="createData"
+                [ccvpn_temParametersContent]="ccvpn_temParametersContent"
                 (closeCreate)="closeCreate($event,templateCreatestarting,templateCreateSuccessFaild)">
         </app-ccvpn-creation>
     </div>
     <div class="createComponent" *ngIf="createshow2">
         <app-e2e-creation
                 [createParams]="createData"
+                [e2e_ns_temParametersContent]="e2e_ns_temParametersContent"
                 (nsCloseCreate)="nsCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)"
                 (e2eCloseCreate)="e2eCloseCreate($event,templateCreatestarting,templateCreateSuccessFaild)">
         </app-e2e-creation>
     </div>
     <!--</div>-->
 </nz-layout>
+<div class="loading" *ngIf="loadingAnimateShow">
+    <img src="../../../assets/images/loading-animate2.gif" alt="loading">
+    <p>Please watingˇ­ˇ­</p>
+</div>
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 d45a2357..bbc8109e 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
@@ -35,6 +35,38 @@ hr {
     background: rgba(0, 0, 0, 0.65);
     top:0;
 }
+.loading{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    margin-top: -50px;
+    margin-left: -50px;
+    z-index: 1001;
+    text-align: center;
+    background: transparent;
+    p{
+        color: #0DA9E2;
+        text-align: center;
+        position: absolute;
+        width: 300px;
+        height: 30px;
+        line-height: 30px;
+        top: 71%;
+        left: 36%;
+        margin-top: -150px;
+        margin-left: -150px;
+    }
+    img{
+        width: 300px;
+        height: 300px;
+        position: absolute;
+        top: 50%;
+        left: 36%;
+        margin-top: -150px;
+        margin-left: -150px;
+    }
+}
 .action {
     margin-bottom: 15px;
     padding: 28px;
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 06323fac..986cbf50 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
@@ -50,6 +50,7 @@ export class ServicesListComponent implements OnInit {
   listSortMasters=JSON.parse(sessionStorage.getItem('listSortMasters'));
     language = sessionStorage.getItem("DefaultLang");
     iconMore=false;
+    loadingAnimateShow = false;
     serviceMunber = [
         {
             "serviceDomain": "E2E",
@@ -227,7 +228,7 @@ export class ServicesListComponent implements OnInit {
   handleCancel(): void {
     // console.log('Button cancel clicked!');
     this.isVisible = false;
-    this.temParametersTips = false;
+    this.loadingAnimateShow = false;
   }
 
 
@@ -242,8 +243,10 @@ export class ServicesListComponent implements OnInit {
         }else if(types == "Network Service"){
             types = "ns";
         }
+        this.loadingAnimateShow = true;
         this.myhttp.getTemplateParameters(types, chosedtemplates)
             .subscribe((data) => {
+                this.loadingAnimateShow = false;
                 if (data.status == "FAILED") {
                     this.temParametersTips = true;
                     this.isVisible = true;