From 1f4acde5c38f72327fb02121db57d2ddb9609e99 Mon Sep 17 00:00:00 2001 From: cyuamber Date: Thu, 28 Nov 2019 14:46:25 +0800 Subject: Added ability to filter data based on processing status Change-Id: I39a9cc83651745dda7844ae119429d47aa8a46b4 Issue-ID: USECASEUI-352 Signed-off-by: cyuamber --- usecaseui-portal/src/app/app.module.ts | 12 ++-- .../src/app/core/services/serviceList.service.ts | 8 +-- .../src/app/core/services/slicingTaskServices.ts | 54 ++++++++++++++++++ .../src/app/mock/json/slicing_task_auditInfo.json | 57 +++++++++++++++++++ .../src/app/mock/json/slicing_task_list.json | 4 +- .../mock/json/slicing_task_processing_status.json | 27 +++++++++ usecaseui-portal/src/app/mock/routes.js | 2 + .../slicing-task-management.component.html | 16 ++---- .../slicing-task-management.component.less | 12 +++- .../slicing-task-management.component.ts | 65 ++++++++++++++-------- usecaseui-portal/src/constants/constants.ts | 18 ++++++ 11 files changed, 228 insertions(+), 47 deletions(-) create mode 100644 usecaseui-portal/src/app/core/services/slicingTaskServices.ts create mode 100644 usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json create mode 100644 usecaseui-portal/src/app/mock/json/slicing_task_processing_status.json create mode 100644 usecaseui-portal/src/constants/constants.ts (limited to 'usecaseui-portal/src') diff --git a/usecaseui-portal/src/app/app.module.ts b/usecaseui-portal/src/app/app.module.ts index cd277f97..be380b85 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -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, diff --git a/usecaseui-portal/src/app/core/services/serviceList.service.ts b/usecaseui-portal/src/app/core/services/serviceList.service.ts index 2280aa9e..475e1868 100644 --- a/usecaseui-portal/src/app/core/services/serviceList.service.ts +++ b/usecaseui-portal/src/app/core/services/serviceList.service.ts @@ -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(url); } - // Get slicing order task list - getSlicingTaskList (pageNo, pageSize) { - const url = this.url.slicingTaskList.replace("{pageNo}", pageNo).replace("{pageSize}", pageSize) - return this.http.get(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 index 00000000..fa0a42fd --- /dev/null +++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts @@ -0,0 +1,54 @@ +/* + Copyright (C) 2019 CMCC, Inc. and others. All rights reserved. + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*/ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; + +@Injectable() +export class SlicingTaskServices { + constructor(private http: HttpClient) { } + baseUrl: string = '/api/uui-slicing/nsmf'; + url = { + slicingTaskList: this.baseUrl + "/task/business/pageNo/{pageNo}/pageSize/{pageSize}", + taskProcessingStatus: this.baseUrl + '/task/{processingStatus}/business/pageNo/{pageNo}/pageSize/{pageSize}', + auditInfo: this.baseUrl + '/task/{taskId}/auditInfo' + } + + + + // Get slicing order task list + getSlicingTaskList (pageNo: string, pageSize: string) { + const url = this.url.slicingTaskList + .replace("{pageNo}", pageNo) + .replace("{pageSize}", pageSize); + return this.http.get(url); + } + // Get list based on task processing status + getTaskProcessingStatus (processingStatus: string, pageNo: string, pageSize: string) { + const url = this.url.taskProcessingStatus + .replace('{processingStatus}', processingStatus) + .replace("{pageNo}", pageNo) + .replace("{pageSize}", pageSize); + return this.http.get(url); + } + // Get + getAuditInfo (taskId: string){ + const url = this.url.auditInfo.replace('{taskId}', taskId); + return this.http.get(url); + } +} + + 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 index 00000000..17d589d7 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/slicing_task_auditInfo.json @@ -0,0 +1,57 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "5G slicing task configure audit information result." + }, + "result_body": { + "task_id": "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177", + "task_name": "5G Slice service eMMB", + "create_timer": "1454171445000", + "processing_status": "Waiting to Confirm", + "business_demand_info": { + "service_name": "5G Slice eMMB", + "service_snssai": "1-010101", + "exp_data_rate_dl": "300", + "exp_data_rate_ul": "300", + "ue_mobility_level": "stageary", + "latency": "20", + "use_interval": "12", + "coverage_area_ta_list": [" xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx "], + "activity_factor": "60", + "resource_sharing_level": "shared", + "area_traffic_cap_ul": "300", + "area_traffic_cap_dl": "300", + "max_number_of_ues": "10000" + }, + "nst_info": { + "nst_id": "46da8cf8-0878-48ac-bea3-f2200959411a", + "nst_name": "eMBBNST" + }, + "nsi_nssi_info": { + "suggest_nsi_id": "46da8cf8-0878-48ac-bea3-f2200959411a", + "suggest_nsi_name": "eMBB instance1", + "an_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a", + "an_suggest_nssi_name": "eMBB ANinstance1", + "an_latency": "10", + "an_5qi": "8", + "an_coverage_area_ta_list": [" xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx ", " xxxx;xxxxx;xxxxx "], + "tn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a", + "tn_suggest_nssi_name": "46da8cf8-0878-48ac-bea3-f2200959411a", + "tn_latency": "10", + "tn_bandwidth": "300", + "cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a", + "cn_suggest_nssi_name": "eMBB CNinstance1", + "cn_service_snssai": "1-010101", + "cn_resource_sharing_level": "shared", + "cn_ue_mobility_level": "stageary", + "cn_latency": "10", + "cn_max_number_of_ues": "10000", + "cn_activity_factor": "60", + "cn_exp_data_rate_dl": "300", + "cn_exp_data_rate_ul": "300", + "cn_area_traffic_cap_dl": "300", + "cn_area_traffic_cap_ul": "300" + } + + } +} diff --git a/usecaseui-portal/src/app/mock/json/slicing_task_list.json b/usecaseui-portal/src/app/mock/json/slicing_task_list.json index 2c7b67c0..31cdc4df 100644 --- a/usecaseui-portal/src/app/mock/json/slicing_task_list.json +++ b/usecaseui-portal/src/app/mock/json/slicing_task_list.json @@ -1,10 +1,10 @@ { "result_header": { - "result_code": "200", + "result_code": "200", "result_message": "5G slicing task query result." }, "result_body": { - "record_number": 2, + "record_number": 30, "slicing_task_list": [ { "task_id": "b1bb0ce7-ebca-4fa7-95ed-4840d70a1177", 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 index 00000000..4a113ef5 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/slicing_task_processing_status.json @@ -0,0 +1,27 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "5G slicing task query based on status 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": "b1bb0de7-ebca-4fa7-95ed-4840d7041177", + "task_name": "5G Slice service eMMB", + "service_snssai": "1-010101", + "service_type": "eMMB", + "arrival_time": "1544471445000", + "processing_status": "Waiting to Confirm" + } + ] + } +} \ 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 bac9e15f..fe982ca5 100644 --- a/usecaseui-portal/src/app/mock/routes.js +++ b/usecaseui-portal/src/app/mock/routes.js @@ -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", 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 ac350037..40a166c3 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,11 +1,9 @@
-
- Status： - - - - +
+ Status : + +
@@ -31,10 +29,8 @@ {{ data.arrival_time }} {{ data.status }} - 任务处理 - 任务处理 - 查看进度 - 查看结果 + {{ data.operation }} + {{ data.operation }} 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 1de685d6..bc14d4ff 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 @@ -1,3 +1,13 @@ nz-select { width: 200px; -} \ No newline at end of file +} +.task_status{ + margin-bottom: 20px; + span{ + margin-right: 5%; + } +} +.task_operation_disabled { + color: #A2ABCE; + cursor: default; +} 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 3d8efab0..7bba2c07 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,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 index 00000000..46d9f7c4 --- /dev/null +++ b/usecaseui-portal/src/constants/constants.ts @@ -0,0 +1,18 @@ +export const TASK_PROCESSING_STATUS = [ + { + title: '规划阶段', + value: 'Planning' + }, + { + title: '审核阶段', + value: 'Waiting to Confirm' + }, + { + title: '切片创建中', + value: 'Creating' + }, + { + title: '创建完成', + value: 'Completed' + } + ] \ No newline at end of file -- cgit 1.2.3-korg