feat: Local simulation data and display on the Slicing task management page

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

6 files changed, 105 insertions, 30 deletions

diff --git a/usecaseui-portal/package.json b/usecaseui-portal/package.json
index eabd63d0..5e75e09b 100644
--- a/usecaseui-portal/package.json
+++ b/usecaseui-portal/package.json
@@ -35,6 +35,7 @@
     "faker": "^4.1.0",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",
+    "moment": "^2.24.0",
     "ng-zorro-antd": "^0.7.1",
     "ngx-echarts": "^2.2.0",
     "rxjs": "^5.5.12",
diff --git a/usecaseui-portal/src/app/core/services/serviceList.service.ts b/usecaseui-portal/src/app/core/services/serviceList.service.ts
index bde2c253..2280aa9e 100644
--- a/usecaseui-portal/src/app/core/services/serviceList.service.ts
+++ b/usecaseui-portal/src/app/core/services/serviceList.service.ts
@@ -23,6 +23,7 @@ export class ServiceListService {
 
   constructor(private http: HttpClient) { }
   baseUrl = baseUrl.baseUrl;
+  nsmfBaseUrl = '/api/uui-slicing/nsmf'
   url = {
     customers: this.baseUrl + "/uui-lcm/customers",
     serviceType: this.baseUrl + "/uui-lcm/customers/" + "*_*" + "/service-subscriptions",
@@ -51,6 +52,7 @@ export class ServiceListService {
     pnfDetail: this.baseUrl + "/uui-sotn/getPnfInfo/",
     connectivity: this.baseUrl + "/uui-sotn/getConnectivityInfo/",
     vpnBinding: this.baseUrl + "/uui-sotn/getPinterfaceByVpnId/",
+    slicingTaskList: this.nsmfBaseUrl + "/task/business/pageNo/{pageNo}/pageSize/{pageSize}"
   };
 
 
@@ -207,4 +209,11 @@ export class ServiceListService {
     let url = this.url.vpnBinding + id;
     return this.http.get<any>(url);
   }
+
+  // Get slicing order task list
+  getSlicingTaskList (pageNo, pageSize) {
+    const url = this.url.slicingTaskList.replace("{pageNo}", pageNo).replace("{pageSize}", pageSize)
+    return this.http.get<any>(url);
+  }
+
 }
diff --git a/usecaseui-portal/src/app/mock/json/slicing_task_list.json b/usecaseui-portal/src/app/mock/json/slicing_task_list.json
new file mode 100644
index 00000000..2c7b67c0
--- /dev/null
+++ b/usecaseui-portal/src/app/mock/json/slicing_task_list.json
@@ -0,0 +1,43 @@
+{

+    "result_header": {

+    "result_code": "200",

+        "result_message": "5G slicing task query result."

+    },

+    "result_body": {

+        "record_number": 2,

+        "slicing_task_list": [

+            {

+                "task_id": "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177",

+                "task_name": "5G Slice service eMMB",

+                "service_snssai": "1-010101",

+                "service_type": "eMMB",

+                "arrival_time": "1454171445000",

+                "processing_status": "Waiting to Confirm"

+            },

+            {

+                "task_id": "6965-8758-5468-2548-457896541236",

+                "task_name": "5G Slice service eMMB",

+                "service_snssai": "1-010101",

+                "service_type": "eMMB",

+                "arrival_time": "1454171445500",

+                "processing_status": "Creating"

+            },

+            {

+                "task_id": "b1bb0ce7-ebca-4fa7-95ed-4840d7041177",

+                "task_name": "5G Slice service eMMB",

+                "service_snssai": "1-010101",

+                "service_type": "eMMB",

+                "arrival_time": "1454471445000",

+                "processing_status": "Planning"

+            },

+            {

+                "task_id": "b1bb0de7-ebca-4fa7-95ed-4840d7041177",

+                "task_name": "5G Slice service eMMB",

+                "service_snssai": "1-010101",

+                "service_type": "eMMB",

+                "arrival_time": "1544471445000",

+                "processing_status": "Completed"

+            }

+        ]

+    }

+}

diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js
index 093f847b..bac9e15f 100644
--- a/usecaseui-portal/src/app/mock/routes.js
+++ b/usecaseui-portal/src/app/mock/routes.js
@@ -91,6 +91,9 @@ module.exports =
         "/POST/uui-lcm/vf-packages": "/POST_uui-lcm_vf-packages",
         "/POST/uui-lcm/:jsonData": "/POST_uui-lcm_create",
 
+        ///////<-------------slicing-tesk-management--------->/////
+        "/uui-slicing/nsmf/task/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_task_list",
+
         ///////<-------------general interface--------->/////
         "/api/*": "/$1",
         "/*/*": "/$1_$2",
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 6a5abe88..ac350037 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
@@ -13,19 +13,28 @@
     <nz-table #basicTable [nzData]="listOfData">
       <thead>
         <tr>
-          <th>Name</th>
-          <th>Age</th>
-          <th>Status</th>
-          <th>Action</th>
+          <th>任务ID</th>
+          <th>任务名称</th>
+          <th>S-NSSAI</th>
+          <th>切片业务类型</th>
+          <th>到达时间</th>
+          <th>处理环节</th>
+          <th>操作</th>
         </tr>
       </thead>
       <tbody>
         <tr *ngFor="let data of basicTable.data">
-          <td>{{ data.name }}</td>
-          <td>{{ data.age }}</td>
-          <td>{{ data.status===0?"Checking Configuration":"Creating Slicing" }}</td>
+          <td>{{ data.task_id }}</td>
+          <td>{{ data.task_name }}</td>
+          <td>{{ data.service_snssai }}</td>
+          <td>{{ data.service_type }}</td>
+          <td>{{ data.arrival_time }}</td>
+          <td>{{ data.status }}</td>
           <td>
-            <a (click)="showdetail(data)">Show Detail</a>
+            <span *ngIf="data.processing_status === 'Planning'">任务处理</span>
+            <a (click)="showdetail(data)" *ngIf="data.processing_status === 'Waiting to Confirm'">任务处理</a>
+            <a (click)="showdetail(data)" *ngIf="data.processing_status === 'Creating'">查看进度</a>
+            <a (click)="showdetail(data)" *ngIf="data.processing_status === 'Completed'">查看结果</a>
           </td>
         </tr>
       </tbody>
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
index ad29c5ed..3d8efab0 100644
--- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
+++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
+import { ServiceListService } from '.././../../../core/services/serviceList.service'
 
 @Component({
   selector: 'app-slicing-task-management',
@@ -7,33 +9,41 @@ import { Component, OnInit } from '@angular/core';
 })
 export class SlicingTaskManagementComponent implements OnInit {
 
-  constructor() { }
+  constructor(private myhttp: ServiceListService) { }
 
-  ngOnInit() { }
+  ngOnInit() { 
+    this.getTaskList()
+  }
   showDetail: boolean = false;
   selectedValue = null;
   detailData: object = {};
   moduleTitle: string = "";
-  listOfData = [
-    {
-      key: '1',
-      name: 'John Brown',
-      age: 32,
-      status: 0
-    },
-    {
-      key: '2',
-      name: 'Jim Green',
-      age: 42,
-      status: 0
-    },
-    {
-      key: '3',
-      name: 'Joe Black',
-      age: 32,
-      status: 1
-    }
-  ];
+  listOfData = []; 
+  getTaskList (): void{
+    this.myhttp.getSlicingTaskList(1,10).subscribe (res => {
+      const { result_header: { result_code }, result_body: { slicing_task_list } } = res
+      if (+result_code === 200) {
+        this.listOfData = slicing_task_list.map( item => {
+          item.arrival_time = moment(+item.arrival_time).format('YYYY-MM-DD hh:mm')
+          switch (item.processing_status){
+            case 'Planning':
+              item.status = '规划阶段';
+              break;
+            case 'Waiting to Confirm':
+              item.status = '审核阶段';
+              break;
+            case 'Creating':
+              item.status = '切片创建中';
+              break;
+            case 'Completed': 
+              item.status = '创建完成';
+              break;
+          }
+          return item;
+        })
+      }
+    })
+  }
   showdetail(data: any) {
     console.log(data, this.showDetail)
     this.detailData = data;