fix:fix bugs of slicing business page

Change-Id: I41cdecff5e85df536b94078cd999118772fe92da
Issue-ID: USECASEUI-369
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

4 files changed, 61 insertions, 26 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
index 585f6795..793b8192 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-model/slicing-business-model.component.html
@@ -2,8 +2,13 @@
     <app-basic-info [businessRequirement]="businessRequirement" [NSTinfo]="NSTinfo" [taskModel]="taskModel">
     </app-basic-info>
     <nz-list class="taskmodel_list" nzBordered [nzHeader]="'Slicing NSI :'" [nzFooter]="null">
-        <nz-table #basicTable [nzData]="nsiInfo" [nzShowPagination]="false" nzHideOnSinglePage
-            class="model-table-padding">
+    <nz-table
+            #basicTable
+            [nzData]="nsiInfo"
+            [nzShowPagination]="false"
+            nzHideOnSinglePage
+                class="model-table-padding"
+    >
             <thead>
                 <tr>
                     <th>Service Instance Id</th>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
index 998ae287..5ca936bc 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.html
@@ -9,9 +9,19 @@
         </div>
     </div>
     <div class="slicing-resource-table-list">
-        <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" nzShowSizeChanger
-            [nzPageSizeOptions]="[5,10,15,20]" [nzTotal]='total' [(nzPageSize)]="pageSize" [(nzPageIndex)]='pageIndex'
-            [nzLoading]="loading" (nzPageIndexChange)="searchData()" (nzPageSizeChange)="searchData(true)">
+        <nz-table
+                #basicTable
+                [nzData]="listOfData"
+                [nzFrontPagination]="false"
+                nzShowSizeChanger
+                [nzPageSizeOptions]="[5,10,15,20]"
+                [nzTotal]='total'
+                [(nzPageSize)]="pageSize"
+                [(nzPageIndex)]='pageIndex'
+                [nzLoading]="loading"
+                (nzPageIndexChange)="searchData()"
+                (nzPageSizeChange)="searchData(true)"
+        >
             <thead>
                 <tr>
                     <th>Service Instance Id</th>
@@ -19,7 +29,7 @@
                     <th>Service Type</th>
                     <th>S-NSSAI</th>
                     <th>Status</th>
-                    <th width="130px">Aciton</th>
+                	<th width="180px">Aciton</th>
                     <th width="100px">Detail</th>
                 </tr>
             </thead>
@@ -32,26 +42,39 @@
                         <td>{{ data.service_snssai }}</td>
                         <td>
 
-                            <span class="marginLeft10">
-                                {{ data.last_operation_progress !== 100?data.last_operation_type+'&nbsp;&nbsp;&nbsp;'+data.last_operation_progress+'%':data.orchestration_status }}
+                        <span  class="marginLeft10">
+                            <span *ngIf="data.last_operation_progress !== 100">
+                                {{data.last_operation_progress+'%'}}
                             </span>
-                            <nz-progress *ngIf="data.last_operation_progress !== 100"
-                                [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active">
-                            </nz-progress>
-                        </td>
-                        <td>
+                            <br>
+                            {{data.orchestration_status}}
+                        </span>
+                        <br>
+                    </td>
+                    <td>
+                        <div class="action-icon">
                             <nz-switch [ngModel]="data.orchestration_status==='activated'?true:false"
-                                [nzDisabled]="data.last_operation_progress !== 100"
-                                (ngModelChange)="switchChange(data,i)"></nz-switch>
-                            <i [ngClass]="{'cannotclick':data.last_operation_progress !== 100}" nz-icon
-                                nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff"
-                                (click)="terminate(data)"></i>
-                        </td>
-                        <td>
-                            <!--<i [ngClass]="{'cannotclick':data.last_operation_progress !== 100}"-->
-                            <!--class="anticon anticon-bars"-->
-                            <!--(click)="showdetail(data)">-->
-                            <!--</i>-->
+                                       [nzDisabled]="data.last_operation_progress !== 100"
+                                       (ngModelChange)="switchChange(data,i)"
+                            ></nz-switch>
+                            <nz-progress *ngIf="data.last_operation_progress !== 100 && data.orchestration_status !== 'delete'"
+                                         [nzPercent]="data.last_operation_progress"
+                                         [nzShowInfo]="false" nzStatus="active"></nz-progress>
+                        </div>
+                        <div class="action-icon">
+                            <i [ngClass]="{'cannotclick':data.last_operation_progress !== 100 || data.orchestration_status==='activated'}"
+                               nz-icon
+                               nzType="poweroff"
+                               nzTheme="outline"
+                               class="anticon anticon-poweroff"
+                               (click)="terminate(data)"
+                            ></i>
+                            <nz-progress *ngIf="data.last_operation_progress !== 100 && terminateStart"
+                                         [nzPercent]="data.last_operation_progress"
+                                         [nzShowInfo]="false" nzStatus="active"></nz-progress>
+                        </div>
+                    </td>
+                    <td>
                             <a (click)="showdetail(data)"
                                 [ngClass]="{'cannotclick':data.last_operation_progress !== 100}">View Detail</a>
                         </td>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less
index e13747ee..e71024f5 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.less
@@ -7,6 +7,10 @@ nz-select {
     margin-right: 5%;
   }
 }
+.action-icon{
+  display: inline-block;
+  vertical-align: top;
+}
 i.anticon {
   cursor: pointer;
   font-size: 18px;
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
index 8054b613..1cee88d8 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-table/slicing-business-table.component.ts
@@ -33,6 +33,7 @@ export class SlicingBusinessTableComponent implements OnInit {
     isSelect: boolean = false;
     statusOptions: any[] = BUSINESS_STATUS;
     progressingTimer :any[] = [];
+    terminateStart :boolean = false;
     @ViewChild('notification') notification1: any;
 
     getBusinessList (): void{
@@ -61,7 +62,6 @@ export class SlicingBusinessTableComponent implements OnInit {
                         };
                         this.queryProgress(obj, updata).then((res) => {
                             item.last_operation_progress = 100;
-                            item.orchestration_status = item.last_operation_type === 'activate'?'activated':item.last_operation_type === 'deactivated'?'deactivated':'terminated';
                         })
                     }
                     return item
@@ -135,6 +135,7 @@ export class SlicingBusinessTableComponent implements OnInit {
                 let paramsObj = {
                     serviceId:slicing.service_instance_id
                 };
+                this.terminateStart = true;
                 this.myhttp.terminateSlicingService(paramsObj).subscribe (res => {
                     const { result_header: { result_code, result_message }, result_body: { operation_id } } = res;
                     if (+result_code === 200) {
@@ -150,12 +151,14 @@ export class SlicingBusinessTableComponent implements OnInit {
                         };
                         this.queryProgress(obj, updata).then(() => {
                             slicing.last_operation_progress = 100;
-                            slicing.orchestration_status = "terminated";
+                            slicing.orchestration_status = "delete";
                             this.notification1.notificationSuccess('slicing business', 'terminate', slicing.service_instance_id);
+                            this.terminateStart = false;
                             this.getBusinessList();
                         })
                     }else {
                         this.notification1.notificationFailed('slicing business', 'terminate', slicing.service_instance_id);
+                        this.terminateStart = false;
                         console.error(result_message)
                     }
                 })