Added ability to filter data based on processing status 16/98916/1
authorcyuamber <xuranyjy@chinamobile.com>
Thu, 28 Nov 2019 06:46:25 +0000 (14:46 +0800)
committercyuamber <xuranyjy@chinamobile.com>
Thu, 28 Nov 2019 06:46:35 +0000 (14:46 +0800)
Change-Id: I39a9cc83651745dda7844ae119429d47aa8a46b4
Issue-ID: USECASEUI-352
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
usecaseui-portal/src/app/app.module.ts
usecaseui-portal/src/app/core/services/serviceList.service.ts
usecaseui-portal/src/app/core/services/slicingTaskServices.ts [new file with mode: 0644]
usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json [new file with mode: 0644]
usecaseui-portal/src/app/mock/json/slicing_task_list.json
usecaseui-portal/src/app/mock/json/slicing_task_processing_status.json [new file with mode: 0644]
usecaseui-portal/src/app/mock/routes.js
usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.html
usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.less
usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-management.component.ts
usecaseui-portal/src/constants/constants.ts [new file with mode: 0644]

index cd277f9..be380b8 100644 (file)
@@ -66,6 +66,9 @@ import { ServiceListService } from './core/services/serviceList.service';
 import { HomesService } from './core/services/homes.service';
 import { onboardService } from './core/services/onboard.service';
 import { networkHttpservice } from './core/services/networkHttpservice.service';
+// slicingTask service
+import { SlicingTaskServices } from './core/services/slicingTaskServices'
+
 import { PerformanceDetailsComponent } from './shared/components/performance-details/performance-details.component';
 import { E2eDetailComponent } from './views/services/services-list/e2e-detail/e2e-detail.component';
 import { CustomerComponent } from './views/management/customer/customer.component';
@@ -84,9 +87,9 @@ import { SlicingManagementComponent } from './views/services/slicing-management/
 import { SlicingTaskManagementComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-management.component';
 import { SlicingResourceManagementComponent } from './views/services/slicing-management/slicing-resource-management/slicing-resource-management.component';
 import { SlicingTaskModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component';
-import { SlicingBusinessManagementComponent } from './views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component';
-import { NsiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nsi-management/nsi-management.component';
-import { NssiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-management.component';
+import { SlicingBusinessManagementComponent } from './views/services/slicing-management/slicing-resource-management/slicing-business-management/slicing-business-management.component'
+import { NsiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nsi-management/nsi-management.component'
+import { NssiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-management.component'
 
 @NgModule({
   providers: [
@@ -98,7 +101,8 @@ import { NssiManagementComponent } from './views/services/slicing-management/sli
     onboardService,
     networkHttpservice,
     ManagemencsService,
-    TextService
+    TextService,
+    SlicingTaskServices
   ],
   declarations: [
     AppComponent,
index 2280aa9..475e186 100644 (file)
@@ -23,7 +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",
@@ -52,7 +52,6 @@ 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}"
   };
 
 
@@ -210,10 +209,5 @@ export class ServiceListService {
     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/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts
new file mode 100644 (file)
index 0000000..fa0a42f
--- /dev/null
@@ -0,0 +1,54 @@
+/*\r
+    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.\r
+\r
+    Licensed under the Apache License, Version 2.0 (the "License");\r
+    you may not use this file except in compliance with the License.\r
+    You may obtain a copy of the License at\r
+\r
+            http://www.apache.org/licenses/LICENSE-2.0\r
+\r
+    Unless required by applicable law or agreed to in writing, software\r
+    distributed under the License is distributed on an "AS IS" BASIS,\r
+    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
+    See the License for the specific language governing permissions and\r
+    limitations under the License.\r
+*/\r
+import { Injectable } from '@angular/core';\r
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';\r
+import { Observable } from 'rxjs/Observable';\r
+\r
+@Injectable()\r
+export class SlicingTaskServices {\r
+    constructor(private http: HttpClient) { }\r
+    baseUrl: string = '/api/uui-slicing/nsmf';\r
+    url = {\r
+        slicingTaskList: this.baseUrl + "/task/business/pageNo/{pageNo}/pageSize/{pageSize}",\r
+        taskProcessingStatus: this.baseUrl + '/task/{processingStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}',\r
+        auditInfo: this.baseUrl + '/task/{taskId}/auditInfo'\r
+    }\r
+\r
+\r
+    \r
+    // Get slicing order task list\r
+    getSlicingTaskList (pageNo: string, pageSize: string) {\r
+        const url = this.url.slicingTaskList\r
+                        .replace("{pageNo}", pageNo)\r
+                        .replace("{pageSize}", pageSize);\r
+        return this.http.get<any>(url);\r
+    }\r
+    // Get list based on task processing status\r
+    getTaskProcessingStatus (processingStatus: string, pageNo: string, pageSize: string) {\r
+        const url = this.url.taskProcessingStatus\r
+                        .replace('{processingStatus}', processingStatus)\r
+                        .replace("{pageNo}", pageNo)\r
+                        .replace("{pageSize}", pageSize);\r
+        return this.http.get<any>(url);\r
+    }\r
+    // Get \r
+    getAuditInfo (taskId: string){\r
+        const url = this.url.auditInfo.replace('{taskId}', taskId);\r
+        return this.http.get<any>(url);\r
+    }\r
+}\r
+\r
+\r
diff --git a/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json
new file mode 100644 (file)
index 0000000..17d589d
--- /dev/null
@@ -0,0 +1,57 @@
+{\r
+    "result_header": {\r
+        "result_code": "200",\r
+        "result_message": "5G slicing task configure audit information result."\r
+    },\r
+    "result_body": {\r
+        "task_id": "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177",\r
+        "task_name": "5G Slice service eMMB",\r
+        "create_timer": "1454171445000",\r
+        "processing_status": "Waiting to Confirm",\r
+        "business_demand_info": {\r
+            "service_name": "5G Slice eMMB",\r
+            "service_snssai": "1-010101",\r
+            "exp_data_rate_dl": "300",\r
+            "exp_data_rate_ul": "300",\r
+            "ue_mobility_level": "stageary",\r
+            "latency": "20",\r
+            "use_interval": "12",\r
+            "coverage_area_ta_list": [" xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx "],\r
+            "activity_factor": "60",\r
+            "resource_sharing_level": "shared",\r
+            "area_traffic_cap_ul": "300",\r
+            "area_traffic_cap_dl": "300",\r
+            "max_number_of_ues": "10000"\r
+        },\r
+        "nst_info": {\r
+            "nst_id": "46da8cf8-0878-48ac-bea3-f2200959411a",\r
+            "nst_name": "eMBBNST"\r
+        },\r
+        "nsi_nssi_info": {\r
+            "suggest_nsi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",\r
+            "suggest_nsi_name": "eMBB instance1",\r
+            "an_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",\r
+            "an_suggest_nssi_name": "eMBB ANinstance1",\r
+            "an_latency": "10",\r
+            "an_5qi": "8",\r
+            "an_coverage_area_ta_list": [" xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx "],\r
+            "tn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",\r
+            "tn_suggest_nssi_name": "46da8cf8-0878-48ac-bea3-f2200959411a",\r
+            "tn_latency": "10",\r
+            "tn_bandwidth": "300",\r
+            "cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a",\r
+            "cn_suggest_nssi_name": "eMBB CNinstance1",\r
+            "cn_service_snssai": "1-010101",\r
+            "cn_resource_sharing_level": "shared",\r
+            "cn_ue_mobility_level": "stageary",\r
+            "cn_latency": "10",\r
+            "cn_max_number_of_ues": "10000",\r
+            "cn_activity_factor": "60",\r
+            "cn_exp_data_rate_dl": "300",\r
+            "cn_exp_data_rate_ul": "300",\r
+            "cn_area_traffic_cap_dl": "300",\r
+            "cn_area_traffic_cap_ul": "300"\r
+        }\r
+\r
+    }\r
+}\r
index 2c7b67c..31cdc4d 100644 (file)
@@ -1,10 +1,10 @@
 {\r
     "result_header": {\r
-    "result_code": "200",\r
+        "result_code": "200",\r
         "result_message": "5G slicing task query result."\r
     },\r
     "result_body": {\r
-        "record_number": 2,\r
+        "record_number": 30,\r
         "slicing_task_list": [\r
             {\r
                 "task_id": "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177",\r
diff --git a/usecaseui-portal/src/app/mock/json/slicing_task_processing_status.json b/usecaseui-portal/src/app/mock/json/slicing_task_processing_status.json
new file mode 100644 (file)
index 0000000..4a113ef
--- /dev/null
@@ -0,0 +1,27 @@
+{\r
+    "result_header": {\r
+        "result_code": "200",\r
+        "result_message": "5G slicing task query based on status result."\r
+    },\r
+    "result_body": {\r
+        "record_number": 2,\r
+        "slicing_task_list": [\r
+            {\r
+                "task_id": "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177",\r
+                "task_name": "5G Slice service eMMB",\r
+                "service_snssai": "1-010101",\r
+                "service_type": "eMMB",\r
+                "arrival_time": "1454171445000",\r
+                "processing_status": "Waiting to Confirm"\r
+            },\r
+            {\r
+                "task_id": "b1bb0de7-ebca-4fa7-95ed-4840d7041177",\r
+                "task_name": "5G Slice service eMMB",\r
+                "service_snssai": "1-010101",\r
+                "service_type": "eMMB",\r
+                "arrival_time": "1544471445000",\r
+                "processing_status": "Waiting to Confirm"\r
+            }\r
+        ]\r
+    }\r
+}
\ No newline at end of file
index bac9e15..fe982ca 100644 (file)
@@ -93,6 +93,8 @@ module.exports =
 
         ///////<-------------slicing-tesk-management--------->/////
         "/uui-slicing/nsmf/task/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_task_list",
+        "/uui-slicing/nsmf/task/:processingStatus/business/pageNo/:pageNo/pageSize/:pageSize": "/slicing_task_processing_status",
+        "/uui-slicing/nsmf/task/:taskId/auditInfo": "/slicing_task_auditInfo",
 
         ///////<-------------general interface--------->/////
         "/api/*": "/$1",
index ac35003..40a166c 100644 (file)
@@ -1,11 +1,9 @@
 <div>
   <div nz-row>
-    <div nz-col nzSpan="6">
-      <span>Status:</span>
-      <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a person" [(ngModel)]="selectedValue">
-        <nz-option nzLabel="Jack" nzValue="jack"></nz-option>
-        <nz-option nzLabel="Lucy" nzValue="lucy"></nz-option>
-        <nz-option nzLabel="Tom" nzValue="tom"></nz-option>
+    <div nz-col nzSpan="12" class="task_status">
+      <span>Status : </span>
+      <nz-select nzShowSearch nzAllowClear nzPlaceHolder="Select a processing status" [(ngModel)]="selectedValue" (ngModelChange)="getListOfProcessingStatus()">
+        <nz-option *ngFor="let item of statusOptions" [nzLabel]="item.title" [nzValue]="item.value"></nz-option>
       </nz-select>
     </div>
   </div>
           <td>{{ data.arrival_time }}</td>
           <td>{{ data.status }}</td>
           <td>
-            <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>
+            <span *ngIf="data.processing_status === 'Planning'" class="task_operation_disabled">{{ data.operation }}</span>
+            <a (click)="showdetail(data)" *ngIf="data.processing_status !== 'Planning'">{{ data.operation }}</a>
           </td>
         </tr>
       </tbody>
index 3d8efab..7bba2c0 100644 (file)
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import * as moment from 'moment';
-import { ServiceListService } from '.././../../../core/services/serviceList.service'
+import { SlicingTaskServices } from '.././../../../core/services/slicingTaskServices';
+import { TASK_PROCESSING_STATUS } from '../../../../../constants/constants';
 
 @Component({
   selector: 'app-slicing-task-management',
@@ -9,7 +10,7 @@ import { ServiceListService } from '.././../../../core/services/serviceList.serv
 })
 export class SlicingTaskManagementComponent implements OnInit {
 
-  constructor(private myhttp: ServiceListService) { }
+  constructor(private myhttp: SlicingTaskServices) { }
 
   ngOnInit() { 
     this.getTaskList()
@@ -19,35 +20,53 @@ export class SlicingTaskManagementComponent implements OnInit {
   detailData: object = {};
   moduleTitle: string = "";
   listOfData = []; 
+  statusOptions = TASK_PROCESSING_STATUS;
+
   getTaskList (): void{
-    this.myhttp.getSlicingTaskList(1,10).subscribe (res => {
+    this.myhttp.getSlicingTaskList('1', '10').subscribe (res => {
+      const { result_header: { result_code }, result_body: { slicing_task_list } } = res
+      if (+result_code === 200) {
+        this.dataFormatting(slicing_task_list)
+      }
+    })
+  }
+  getListOfProcessingStatus():void {
+    this.myhttp.getTaskProcessingStatus(this.selectedValue, '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;
-        })
+        this.dataFormatting(slicing_task_list)
       }
     })
   }
+  
+  dataFormatting(list: any):void{
+    this.listOfData = list.map( item => {
+      item.arrival_time = moment(+item.arrival_time).format('YYYY-MM-DD hh:mm')
+      switch (item.processing_status){
+        case 'Planning':
+          item.status = '规划阶段';
+          item.operation = '任务处理'
+          break;
+        case 'Waiting to Confirm':
+          item.status = '审核阶段';
+          item.operation = '任务处理'
+          break;
+        case 'Creating':
+          item.status = '切片创建中';
+          item.operation = '查看进度'
+          break;
+        case 'Completed': 
+          item.status = '创建完成';
+          item.operation = '查看结果'
+          break;
+      }
+      return item;
+    })
+  }
+
   showdetail(data: any) {
-    console.log(data, this.showDetail)
     this.detailData = data;
     this.showDetail = true;
-    this.moduleTitle = data.status === 0 ? "Check Configuration" : "View Progress";
+    this.moduleTitle = data.status;
   }
 }
diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts
new file mode 100644 (file)
index 0000000..46d9f7c
--- /dev/null
@@ -0,0 +1,18 @@
+export const TASK_PROCESSING_STATUS = [\r
+    {\r
+      title: '规划阶段',\r
+      value: 'Planning'\r
+    },\r
+    {\r
+      title: '审核阶段',\r
+      value: 'Waiting to Confirm'\r
+    }, \r
+    {\r
+      title: '切片创建中',\r
+      value: 'Creating'\r
+    },\r
+    {\r
+      title: '创建完成',\r
+      value: 'Completed'\r
+    }\r
+  ]
\ No newline at end of file