feat:Adjust page style and order of cmsf slice business management

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

8 files changed, 45 insertions, 39 deletions

diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
index c3f2d631..2da05546 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html
@@ -1,4 +1,4 @@
-<div class="slicing-resource-table slicing-resource_tab">
+<div>
   <div nz-row>
     <div nz-col nzSpan="12" class="task_status">
       <span>Status : </span>
@@ -27,37 +27,37 @@
       <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index">
         <tr>
           <td>{{i+1}}</td>
-          <td>{{ data.service_id }}</td>
-          <td>{{ data.service_name }}</td>
+          <td>{{ data.service_instance_id }}</td>
+          <td>{{ data.service_instance_name }}</td>
           <td>{{ data.service_type?data.service_type:'--' }}</td>
           <td>{{ data.service_snssai }}</td>
           <td>
                             <span class="marginLeft10">
-                                <span *ngIf="data.last_operation_process && data.last_operation_process !== '100'">
-                                    {{data.last_operation_process+'%'}}
+                                <span *ngIf="data.last_operation_progress && data.last_operation_progress !== '100'">
+                                    {{data.last_operation_progress+'%'}}
                                 </span>
                                 <br>
-                                {{data.service_status}}
+                                {{data.orchestration_status}}
                             </span>
             <br>
           </td>
           <td>
             <div class="action-icon">
               <nz-switch [ngModel]="data.service_status==='activated'?true:false"
-                         [nzDisabled]="data.last_operation_type && data.last_operation_process && data.last_operation_process !== '100'"
+                         [nzDisabled]="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100'"
                          (ngModelChange)="switchChange(data,i)"></nz-switch>
               <nz-progress
-                      *ngIf="data.last_operation_type && data.last_operation_process && data.last_operation_process !== '100' && data.last_operation_type !== 'DELETE'"
-                      [nzPercent]="data.last_operation_process" [nzShowInfo]="false" nzStatus="active">
+                      *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && data.last_operation_type !== 'DELETE'"
+                      [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active">
               </nz-progress>
             </div>
             <div class="action-icon">
-              <i [ngClass]="{'cannotclick': data.last_operation_type && data.last_operation_process && data.last_operation_process !== '100' && (data.last_operation_type !== 'DELETE' || data.service_status==='activated')}"
+              <i [ngClass]="{'cannotclick': data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && (data.last_operation_type !== 'DELETE' || data.service_status==='activated')}"
                  nz-icon nzType="poweroff" nzTheme="outline" class="anticon anticon-poweroff"
                  (click)="terminate(data)"></i>
               <nz-progress
-                      *ngIf="data.last_operation_type && data.last_operation_process && data.last_operation_process !== '100' && terminateStart"
-                      [nzPercent]="data.last_operation_process" [nzShowInfo]="false" nzStatus="active">
+                      *ngIf="data.last_operation_type && data.last_operation_progress && data.last_operation_progress !== '100' && terminateStart"
+                      [nzPercent]="data.last_operation_progress" [nzShowInfo]="false" nzStatus="active">
               </nz-progress>
             </div>
           </td>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less
index b813e966..e71024f5 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less
@@ -24,7 +24,4 @@ i.anticon {
   pointer-events: none;
   color: #aaa;
   opacity: 0.6;
-}
-.slicing-resource-table{
-  margin: 0 0 0 60px!important;
 }
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
index e1b37054..fac4e0cf 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts
@@ -33,34 +33,40 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
     total: number = 0;
     loading = false;
     statusOptions: any[] = BUSINESS_STATUS;
+    isSelect: boolean = false;
     progressingTimer: any[] = [];
     terminateStart: boolean = false;
 
     getCSMFBusinessList() {
         this.loading = true;
+        this.isSelect = false;
         this.listOfData = [];
         let paramsObj = {
             status: this.selectedValue,
             pageNo: this.pageIndex,
             pageSize: this.pageSize
         };
-        this.myhttp.getCSMFSlicingBusinessList(paramsObj).subscribe(res => {
-            const {result_header: {result_code}, result_body: {slicing_service_list, record_number}} = res;
+        if (this.selectedValue !== BUSINESS_STATUS[0]) {
+            paramsObj["businessStatus"] = this.selectedValue;
+            this.isSelect = true;
+        }
+        this.myhttp.getSlicingBusinessList(paramsObj, this.isSelect).subscribe(res => {
+            const {result_header: {result_code}, result_body: {slicing_business_list, record_number}} = res;
             this.loading = false;
             if (+result_code === 200) {
                 this.total = record_number;
-                if (slicing_service_list !== null && slicing_service_list.length > 0) {
-                    this.listOfData = slicing_service_list.map((item, index) => {
-                        if (item.last_operation_process && item.last_operation_type && Number(item.last_operation_process) < 100) {
+                if (slicing_business_list !== null && slicing_business_list.length > 0) {
+                    this.listOfData = slicing_business_list.map((item, index) => {
+                        if (item.last_operation_progress && item.last_operation_type && Number(item.last_operation_progress) < 100) {
                             let updata = (prodata: { operation_progress: string }) => {
-                                item.last_operation_process = prodata.operation_progress || item.last_operation_process;
+                                item.last_operation_progress = prodata.operation_progress || item.last_operation_progress;
                             };
                             let obj = {
                                 serviceId: item.service_instance_id
                             };
                             if (item.last_operation_type === 'DELETE') this.terminateStart = true;
                             this.queryProgress(obj, index, updata).then((res) => {
-                                item.last_operation_process = '100';
+                                item.last_operation_progress = '100';
                                 this.getCSMFBusinessList();
                             })
                         }
@@ -93,12 +99,12 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
         console.log(slicing, i, "slicing");
         this.modalService.confirm({
             nzTitle: '<i>Are you sure you want to perform this task?</i>',
-            nzContent: '<b>Name:' + slicing.service_name + '</b>',
+            nzContent: '<b>Name:' + slicing.service_instance_name + '</b>',
             nzOnOk: () => {
                 let paramsObj = {
-                    serviceId: slicing.service_id
+                    serviceId: slicing.service_instance_id
                 };
-                if (slicing.service_status === 'activated') {
+                if (slicing.orchestration_status === 'activated') {
                     this.changeActivate(paramsObj, false, slicing, "deactivate", "deactivated", i)
                 } else {
                     this.changeActivate(paramsObj, true, slicing, "activate", "activated", i);
@@ -114,7 +120,7 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
     }
     changeActivate(paramsObj, isActivate, slicing, activateValue, finished, index) {
         this.loading = true;
-        this.myhttp.csmfChangeActivate(paramsObj, isActivate).subscribe(res => {
+        this.myhttp.changeActivateSlicingService(paramsObj, isActivate).subscribe(res => {
             const { result_header: { result_code, result_message }, result_body: { operation_id } } = res;
             this.loading = false;
             if (+result_code === 200) {
@@ -139,12 +145,12 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
         console.log(slicing, "slicing");
         this.modalService.confirm({
             nzTitle: 'Are you sure you want to terminate this task?',
-            nzContent: '<b>Name:&nbsp;</b>' + slicing.service_name,
+            nzContent: '<b>Name:&nbsp;</b>' + slicing.service_instance_name,
             nzOnOk: () => {
-                let paramsObj = { serviceId: slicing.service_id };
+                let paramsObj = { serviceId: slicing.service_instance_id };
                 this.terminateStart = true;
                 this.loading = true;
-                this.myhttp.csmfTerminate(paramsObj).subscribe(res => {
+                this.myhttp.terminateSlicingService(paramsObj).subscribe(res => {
                     const { result_header: { result_code, result_message }, result_body: { operation_id } } = res;
                     this.loading = false;
                     if (+result_code === 200) {
@@ -166,7 +172,7 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit {
     queryProgress(obj, index, callback) {
         return new Promise(res => {
             let requery = () => {
-                this.myhttp.csmfSlicingProgress(obj)
+                this.myhttp.getSlicingBusinessProgress(obj)
                     .subscribe((data) => {
                         const { result_header: { result_code, result_message }, result_body: { operation_id } } = data;
                         if (+result_code === 200) {
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
index 965dca6a..1de13788 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.html
@@ -1,4 +1,9 @@
 <nz-tabset (nzSelectChange)="handleTabChange($event)" class="slicing">
+    <nz-tab nzTitle="communication Service">
+        <app-csmf-slicing-business-management
+                *ngIf="currentTab ==='communication Service'"
+        ></app-csmf-slicing-business-management>
+    </nz-tab>
   <nz-tab nzTitle="Slicing Task Management">
     <app-slicing-task-management
             *ngIf="currentTab ==='Slicing Task Management'"
@@ -9,9 +14,4 @@
             *ngIf="currentTab ==='Slicing Resource Management'"
     ></app-slicing-resource-management>
   </nz-tab>
-  <nz-tab nzTitle="CSMF Slicing Business Management">
-    <app-csmf-slicing-business-management
-            *ngIf="currentTab ==='CSMF Slicing Business Management'"
-    ></app-csmf-slicing-business-management>
-  </nz-tab>
 </nz-tabset>
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts
index e2ca18e2..597e4ee9 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-management.component.ts
@@ -15,7 +15,7 @@ export class SlicingManagementComponent implements OnInit {
 
   ngOnInit() {
   }
-    currentTab = 'Slicing Task Management';
+    currentTab = 'communication Service';
     handleTabChange($event): void {
         console.log($event,"$event");
         this.currentTab = $event.tab._title;
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
index d7cb2f8d..415f5241 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
@@ -1,4 +1,4 @@
-<div>
+<div class="slicing-task-resource-table">
 	<div nz-row>
 		<div nz-col nzSpan="12" class="task_status">
 			<span>Status : </span>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less
index 78ae9c6e..17951f40 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less
@@ -21,4 +21,7 @@ nz-select {
 .task_operation_disabled {
     color: #A2ABCE;
     cursor: default;
+}
+.slicing-task-resource-table{
+    margin: 0 0 0 50px!important;
 }
\ No newline at end of file
diff --git a/usecaseui-portal/src/styles.less b/usecaseui-portal/src/styles.less
index 6f10e362..bd3a6b79 100644
--- a/usecaseui-portal/src/styles.less
+++ b/usecaseui-portal/src/styles.less
@@ -816,8 +816,8 @@ nz-notification-container .ant-notification{
   }
 }
 .slicing-resource_tab {
-  width: 104%;
-  margin-left: 20px!important;
+  width: 103%;
+  margin-left: 60px!important;
   margin-top: -35px!important;
   .ant-tabs-content.ant-tabs-content-animated{
     padding:  20px 0!important;