feat: add CSMF slice task management interface page code

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

8 files changed, 267 insertions, 7 deletions

diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
index 686673d6..7902f0d1 100644
--- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
+++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
@@ -47,6 +47,8 @@ export class SlicingTaskServices {
         slicingNssiList: this.baseUrl + "/resource/nssi/instances/pageNo/{pageNo}/pageSize/{pageSize}",

         slicingNssiQueryOfStatus: this.baseUrl + "/resource/nssi/instanceStatus/{instanceStatus}/instances/pageNo/{pageNo}/pageSize/{pageSize}",

         slicingNssiDetail: this.baseUrl + "/resource/nssi/{nssiId}/details",

+        //csmf

+        csmfSlicingBusinessList:"/api/usecaseui/csmf/5gSlicing/services/status/{status}/pageNo/{pageNo}/pageSize/{pageSize}",

         //monitor 5G

         fetchTraffic: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/trafficData",

         fetchOnlineusers: this.baseUrl + "/monitoring/queryTimestamp/{queryTimestamp}/onlineUsers",

@@ -167,6 +169,13 @@ export class SlicingTaskServices {
         let url = this.url.slicingNssiDetail.replace("{nssiId}", nssiId);

         return this.http.get<any>(url);

     }

+    // Get CSMF slicing business list

+    getCSMFSlicingBusinessList(paramsObj) {

+        let url = this.url.csmfSlicingBusinessList.replace("{status}", paramsObj.status).replace("{pageNo}", paramsObj.pageNo)

+            .replace("{pageSize}", paramsObj.pageSize);

+        return this.http.get<any>(url);

+    }

+

     //monitor 5G

     getFetchTraffic(service_list, time) {

         let url = this.url.fetchTraffic.replace("{queryTimestamp}", time);

diff --git a/usecaseui-portal/src/app/mock/json/csmf_slicing_businessData.json b/usecaseui-portal/src/app/mock/json/csmf_slicing_businessData.json
new file mode 100644
index 00000000..4ec93450
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/csmf_slicing_businessData.json
@@ -0,0 +1,91 @@
+{
+  "result_header": {
+    "result_code": "200",
+    "result_message": "Query all slicing services processing succeeded."
+  },
+  "result_body": {
+    "record_number": 8,
+    "slicing_service_list": [
+      {
+        "service_id": "5G-777",
+        "service_name": "eMBB_e2e_Slice_Service_5GCustomer",
+        "service_type": "embb",
+        "service_snssai": "01-010101",
+        "service_status": "activated",
+        "last_operation_id": "8401c767-4fe9-43c3-82b5-707c1aaf5caf",
+        "last_operation_type": "activation",
+        "last_operation_process": 100
+      },
+      {
+        "service_id": "8c681037-75c9-444c-a665-34a66372e13e",
+        "service_name": "test_0203",
+        "service_type": "embb",
+        "service_snssai": "01-1370889D",
+        "service_status": "deactivated",
+        "last_operation_id": null,
+        "last_operation_type": null,
+        "last_operation_process": null
+      },
+      {
+        "service_id": "dfa76a2f-6416-4070-9024-355d0d210234",
+        "service_name": "CSMFService",
+        "service_type": "embb",
+        "service_snssai": "01-485C16B6",
+        "service_status": "deactivated",
+        "last_operation_id": "06258836-8152-43ad-9c8e-e2a1783b1996",
+        "last_operation_type": "activation",
+        "last_operation_process": 0
+      },
+      {
+        "service_id": "1e6a6a4b-8efb-4211-b583-b2e8567c5950",
+        "service_name": "CSMFService",
+        "service_type": "embb",
+        "service_snssai": "01-6C572676",
+        "service_status": "deactivated",
+        "last_operation_id": null,
+        "last_operation_type": null,
+        "last_operation_process": null
+      },
+      {
+        "service_id": "9941305e-311f-4a88-bd9e-431252a46337",
+        "service_name": "CSMFService",
+        "service_type": "embb",
+        "service_snssai": "01-D38E2F0",
+        "service_status": "deactivated",
+        "last_operation_id": null,
+        "last_operation_type": null,
+        "last_operation_process": null
+      },
+      {
+        "service_id": "4876265d-e4bb-4240-bcda-7b4b00481e4a",
+        "service_name": "test_0205",
+        "service_type": "embb",
+        "service_snssai": "01-6A345C48",
+        "service_status": "deactivated",
+        "last_operation_id": null,
+        "last_operation_type": null,
+        "last_operation_process": null
+      },
+      {
+        "service_id": "6c52086a-e9b6-4f31-bc7a-7b34d66c69c0",
+        "service_name": "test_0204",
+        "service_type": "embb",
+        "service_snssai": "01-774F54FC",
+        "service_status": "deactivated",
+        "last_operation_id": null,
+        "last_operation_type": null,
+        "last_operation_process": null
+      },
+      {
+        "service_id": "1cab507a-3422-46f8-8520-9b46c95b7f9d",
+        "service_name": "aaa",
+        "service_type": "embb",
+        "service_snssai": "01-44AA4085",
+        "service_status": "deactivated",
+        "last_operation_id": "012c888a-a46f-4ebc-bcde-7f7c769769b7",
+        "last_operation_type": "DELETE",
+        "last_operation_process": 100
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js
index fdd29ff3..420f017c 100644
--- a/usecaseui-portal/src/app/mock/routes.js
+++ b/usecaseui-portal/src/app/mock/routes.js
@@ -20,6 +20,8 @@ module.exports =
         ///////<-------------api proxy--------->/////
         "/usecaseui-server/v1/*": "/$1",
         "/usecaseui-server/v1/*?:param": "/$1",
+        "/usecaseui/csmf/*": "/$1",
+        "/usecaseui/csmf/*?:param": "/$1",
         ///////////////
 
         //text interface
@@ -117,6 +119,8 @@ module.exports =
         "/uui-slicing/nsmf/resource/nssi/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nssi_list",
         "/uui-slicing/nsmf/resource/nssi/instanceStatus/:instanceStatus/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_nssi_list_activated",
         "/uui-slicing/nsmf/resource/nssi/:nssiId/details":"/getSlicingNssiDetail",
+        ///////<-------------CSMF slicing_business--------->/////
+        "/5gSlicing/services/status/:status/pageNo/:pageNo/pageSize/:pageSize": "/csmf_slicing_businessData",
         ///////<-------------monitor 5G--------->/////
         "/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/trafficData": "/fetchTrafficData",
         "/POST/uui-slicing/nsmf/monitoring/queryTimestamp/:queryTimestamp/onlineUsers": "/fetchOnlineusersData",
diff --git a/usecaseui-portal/src/app/mock/server.js b/usecaseui-portal/src/app/mock/server.js
index 930f500b..3c49777d 100644
--- a/usecaseui-portal/src/app/mock/server.js
+++ b/usecaseui-portal/src/app/mock/server.js
@@ -20,6 +20,7 @@ const middlewares = jsonServer.defaults();
 const customersRouters = require('./routes');
 const baseUrl = "/usecaseui-server/v1";
 const nsmfBaseUrl = "/uui-slicing/nsmf"; 
+const csmfBaseUrl = "/usecaseui/csmf";
 
 // Set default middlewares (logger, static, cors and no-cache)
 server.use(middlewares);
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 aaf5d959..c3f2d631 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,3 +1,69 @@
-<p>
-  csmf-slicing-business-management works!
-</p>
+<div class="slicing-resource-table slicing-resource_tab">
+  <div nz-row>
+    <div nz-col nzSpan="12" class="task_status">
+      <span>Status : </span>
+      <nz-select nzShowSearch nzPlaceHolder="Select a processing status" [(ngModel)]="selectedValue"
+                 (ngModelChange)="getListOfProcessingStatus()">
+        <nz-option *ngFor="let item of statusOptions" [nzLabel]="item" [nzValue]="item"></nz-option>
+      </nz-select>
+    </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)">
+      <thead>
+      <tr>
+        <th width=100>No</th>
+        <th width=280>Service Instance Id</th>
+        <th width=200>Service Instance Name</th>
+        <th width=110>Service Type</th>
+        <th width=110>S-NSSAI</th>
+        <th width=110>Status</th>
+        <th width=180>Aciton</th>
+      </tr>
+      </thead>
+      <tbody>
+      <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_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>
+                                <br>
+                                {{data.service_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'"
+                         (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">
+              </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')}"
+                 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">
+              </nz-progress>
+            </div>
+          </td>
+        </tr>
+      </ng-template>
+      </tbody>
+    </nz-table>
+  </div>
+</div>
\ 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.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.less
index e69de29b..b813e966 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
@@ -0,0 +1,30 @@
+nz-select {
+  width: 200px;
+}
+.task_status{
+  margin-bottom: 20px;
+  span{
+    margin-right: 5%;
+  }
+}
+.action-icon{
+  display: inline-block;
+  vertical-align: top;
+}
+i.anticon {
+  cursor: pointer;
+  font-size: 18px;
+  padding: 2px 15px;
+  vertical-align: inherit!important;
+  &:hover{
+    color: #147dc2;
+  }
+}
+.cannotclick {
+  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 dddbacf7..8b844f5f 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
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-
+import {BUSINESS_STATUS} from "../../../../../constants/constants";
+import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices';
 @Component({
   selector: 'app-csmf-slicing-business-management',
   templateUrl: './csmf-slicing-business-management.component.html',
@@ -7,9 +8,62 @@ import { Component, OnInit } from '@angular/core';
 })
 export class CsmfSlicingBusinessManagementComponent implements OnInit {
 
-  constructor() { }
-
+    constructor(
+        private myhttp: SlicingTaskServices
+    ) {
+    }
   ngOnInit() {
+      this.getCSMFBusinessList()
   }
+    selectedValue: string = BUSINESS_STATUS[0];
+    listOfData: any[] = [];
+    pageIndex: number = 1;
+    pageSize: number = 10;
+    total: number = 0;
+    loading = false;
+    isSelect: boolean = false;
+    statusOptions: any[] = BUSINESS_STATUS;
+    terminateStart: boolean = false;
+
+    getCSMFBusinessList(){
+        this.loading = true;
+        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;
+            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 (item.last_operation_type === 'DELETE') this.terminateStart = true;
+                        }
+                        return item
+                    });
+                }
+            }
+        })
+    }
+
+    getListOfProcessingStatus() {
+        this.pageIndex = 1;
+        this.pageSize = 10;
+        this.getCSMFBusinessList();
+    }
+    searchData(reset: boolean = false) {
+        this.getCSMFBusinessList();
+    }
 
+    switchChange(slicing, i) {
+      console.log(slicing,i,"slicing")
+    }
+    terminate(slicing) {
+        console.log(slicing,"slicing")
+    }
 }
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 2c8db58d..965dca6a 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,4 @@
-<nz-tabset (nzSelectChange)="handleTabChange($event)">
+<nz-tabset (nzSelectChange)="handleTabChange($event)" class="slicing">
   <nz-tab nzTitle="Slicing Task Management">
     <app-slicing-task-management
             *ngIf="currentTab ==='Slicing Task Management'"
@@ -9,4 +9,9 @@
             *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