From 655cdc196cf2355aae018575682ba85ec1bda33e Mon Sep 17 00:00:00 2001 From: cyuamber Date: Fri, 29 Nov 2019 16:07:21 +0800 Subject: feat: Completed the interaction logic in the task processing component Change-Id: Ia3b6a4adb00a3c4b1d51ba6e2f63e7713881090e Issue-ID: USECASEUI-352 Signed-off-by: cyuamber --- usecaseui-portal/src/app/app.module.ts | 6 +- .../src/app/core/services/slicingTaskServices.ts | 22 ++- .../src/app/mock/json/slicing_instance.json | 22 +++ .../src/app/mock/json/slicing_subnet_context.json | 27 ++++ .../src/app/mock/json/slicing_subnet_instance.json | 14 ++ usecaseui-portal/src/app/mock/routes.js | 5 +- .../slicing-task-model.component.html | 27 ++-- .../slicing-task-model.component.ts | 152 ++++++++++++++++++--- .../subnet-params-model.component.html | 2 + .../subnet-params-model.component.less | 0 .../subnet-params-model.component.spec.ts | 25 ++++ .../subnet-params-model.component.ts | 33 +++++ usecaseui-portal/src/constants/constants.ts | 27 +++- 13 files changed, 328 insertions(+), 34 deletions(-) create mode 100644 usecaseui-portal/src/app/mock/json/slicing_instance.json create mode 100644 usecaseui-portal/src/app/mock/json/slicing_subnet_context.json create mode 100644 usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts create mode 100644 usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.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 be380b85..f618acdf 100644 --- a/usecaseui-portal/src/app/app.module.ts +++ b/usecaseui-portal/src/app/app.module.ts @@ -89,7 +89,8 @@ import { SlicingResourceManagementComponent } from './views/services/slicing-man 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 { NssiManagementComponent } from './views/services/slicing-management/slicing-resource-management/nssi-management/nssi-management.component'; +import { SubnetParamsModelComponent } from './views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component' @NgModule({ providers: [ @@ -144,7 +145,8 @@ import { NssiManagementComponent } from './views/services/slicing-management/sli SlicingTaskModelComponent, SlicingBusinessManagementComponent, NsiManagementComponent, - NssiManagementComponent + NssiManagementComponent, + SubnetParamsModelComponent ], imports: [ BrowserModule, diff --git a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts index fa0a42fd..165bb80e 100644 --- a/usecaseui-portal/src/app/core/services/slicingTaskServices.ts +++ b/usecaseui-portal/src/app/core/services/slicingTaskServices.ts @@ -24,7 +24,10 @@ export class SlicingTaskServices { 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' + auditInfo: this.baseUrl + '/task/{taskId}/auditInfo', + slicingInstance: this.baseUrl + '/resource/nsi/instances/pageNo/{pageNo}/pageSize/{pageSize}', + slicingSubnetInstance: this.baseUrl + '/resource/nsi/{nsiId}/nssiInstances', + subnetInContext: this.baseUrl + '/resource/nssi/{environmentContext}/instances/pageNo/{pageNo}/pageSize/{pageSize}', } @@ -49,6 +52,23 @@ export class SlicingTaskServices { const url = this.url.auditInfo.replace('{taskId}', taskId); return this.http.get(url); } + getSlicingInstance (pageNo: string, pageSize: string){ + const url = this.url.slicingInstance + .replace("{pageNo}", pageNo) + .replace("{pageSize}", pageSize); + return this.http.get(url); + } + getSlicingSubnetInstance(nsiId: string){ + const url = this.url.slicingSubnetInstance.replace('{nsiId}', nsiId); + return this.http.get(url); + } + getSubnetInContext (context: string, pageNo: string, pageSize: string) { + const url = this.url.subnetInContext + .replace('{environmentContext}', context) + .replace('{pageNo', pageNo) + .replace('{pageSize}', pageSize); + return this.http.get(url); + } } diff --git a/usecaseui-portal/src/app/mock/json/slicing_instance.json b/usecaseui-portal/src/app/mock/json/slicing_instance.json new file mode 100644 index 00000000..11c7f7bf --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/slicing_instance.json @@ -0,0 +1,22 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "5G slicing NSI service instances result." + }, + "result_body": { + "record_number": 2, + "nsi_service_instances": [ + { + "service_instance_order": "1", + "service_instance_id": "46da8cf8-0878-48ac-bea3-f2200959411a", + "service_instance_name": "eMBB instancel" + }, + { + "service_instance_order": "2", + "service_instance_id": "46da8cf8-0878-48bc-bea3-f2200959411a", + "service_instance_name": "eMBB instance2" + } + ] + } +} + diff --git a/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json b/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json new file mode 100644 index 00000000..b44d2135 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/slicing_subnet_context.json @@ -0,0 +1,27 @@ +{ + "result_header":{ + "result_code":"200", + "result_message":"5G slicing NSSI query based on environment context result." + }, + "result_body":{ + "record_number":2, + "nssi_service_instances":[ + { + "service_instance_order":"1", + "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZX", + "service_instance_name":"slicing_core_notwork", + "service_type":"slicing_core_notwork", + "environment_context":"cn", + "orchestration_status":"activated" + }, + { + "service_instance_order":"2", + "service_instance_id":"NSSI-C-001-HDBNJ-NSSMF-01-A-ZX", + "service_instance_name":"slicing_core_notwork", + "service_type":"slicing_core_notwork", + "environment_context":"cn", + "orchestration_status":"activated" + } + ] + } +} diff --git a/usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json b/usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json new file mode 100644 index 00000000..62e690a6 --- /dev/null +++ b/usecaseui-portal/src/app/mock/json/slicing_subnet_instance.json @@ -0,0 +1,14 @@ +{ + "result_header": { + "result_code": "200", + "result_message": "NSSI associated with NSI result." + }, + "result_body": { + "an_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a", + "an_suggest_nssi_name": "eMBBANinstance1", + "tn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a", + "tn_suggest_nssi_name": "eMBBTNinstance1", + "cn_suggest_nssi_id": "46da8cf8-0878-48ac-bea3-f2200959411a", + "cn_suggest_nssi_name": "eMBBCNinstance1" + } +} diff --git a/usecaseui-portal/src/app/mock/routes.js b/usecaseui-portal/src/app/mock/routes.js index fe982ca5..4f91b651 100644 --- a/usecaseui-portal/src/app/mock/routes.js +++ b/usecaseui-portal/src/app/mock/routes.js @@ -91,10 +91,13 @@ module.exports = "/POST/uui-lcm/vf-packages": "/POST_uui-lcm_vf-packages", "/POST/uui-lcm/:jsonData": "/POST_uui-lcm_create", - ///////<-------------slicing-tesk-management--------->///// + ///////<-------------slicing--------->///// "/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", + "/uui-slicing/nsmf/resource/nsi/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_instance", + "/uui-slicing/nsmf/resource/nsi/:nsiId/nssiInstances": "/slicing_subnet_instance", + "/uui-slicing/nsmf/resource/nssi/:environmentContext/instances/pageNo/:pageNo/pageSize/:pageSize": "/slicing_subnet_context", ///////<-------------general interface--------->///// "/api/*": "/$1", diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html index 89d64f51..3aca68fb 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html @@ -55,15 +55,19 @@
切片实例 ID： - - + +
- 切片实例名称：{{selectedServiceName}} + 切片实例名称：{{ selectedServiceName }}
-
@@ -74,23 +78,26 @@
切片子网实例 ID： - - + +
切片子网实例名称：{{item.slicingName}}
- - + +
+ \ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts index 8d61029e..88eb586a 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts @@ -26,24 +26,36 @@ export class SlicingTaskModelComponent implements OnInit { // 共享切片实例 selectedServiceId: string; selectedServiceName: string; + slicingInstances: any[]; + loading: boolean = false; // 子网实例 slicingSubnet: any[] = [ { title: '无线域', + context: 'an', slicingId: '', - slicingName: '' + slicingName: '', + instances: [] }, { title: '传输域', + context: 'tn', slicingId: '', - slicingName: '' + slicingName: '', + instances: [] }, { title: '核心网域', + context: 'cn', slicingId: '', - slicingName: '' + slicingName: '', + instances: [] } ] + // 子网参数 + isShowParams: boolean; + paramsTitle: string; + params: any; ngOnInit() { } @@ -66,7 +78,23 @@ export class SlicingTaskModelComponent implements OnInit { tn_suggest_nssi_id, tn_suggest_nssi_name, cn_suggest_nssi_id, - cn_suggest_nssi_name } = nsi_nssi_info; + cn_suggest_nssi_name, + an_latency, + an_5qi, + an_coverage_area_ta_list, + tn_latency, + tn_bandwidth, + cn_service_snssai, + cn_resource_sharing_level, + cn_ue_mobility_level, + cn_latency, + cn_max_number_of_ues, + cn_activity_factor, + cn_exp_data_rate_dl, + cn_exp_data_rate_ul, + cn_area_traffic_cap_dl, + cn_area_traffic_cap_ul + } = nsi_nssi_info; // 处理配置审核详情数据 this.checkDetail = [{ task_id, task_name, create_timer, processing_status, service_snssai }]; // 业务需求信息数据 @@ -75,38 +103,124 @@ export class SlicingTaskModelComponent implements OnInit { // 共享切片实例 this.selectedServiceId = suggest_nsi_id; this.selectedServiceName = suggest_nsi_name; + this.slicingInstances = [{ + service_instance_id: this.selectedServiceId, + service_instance_name: this.selectedServiceName + }]; // 子网实例 this.slicingSubnet[0].slicingId = an_suggest_nssi_id; this.slicingSubnet[0].slicingName = an_suggest_nssi_name; + this.slicingSubnet[0].instances = [{ + service_instance_id: an_suggest_nssi_id, + service_instance_name: an_suggest_nssi_name + }]; + this.slicingSubnet[0].params = { an_latency, an_5qi, an_coverage_area_ta_list } + this.slicingSubnet[1].slicingId = tn_suggest_nssi_id; this.slicingSubnet[1].slicingName = tn_suggest_nssi_name; + this.slicingSubnet[1].instances = [{ + service_instance_id: tn_suggest_nssi_id, + service_instance_name: tn_suggest_nssi_name + }]; + this.slicingSubnet[1].params = { tn_latency, tn_bandwidth }; + this.slicingSubnet[2].slicingId = cn_suggest_nssi_id; this.slicingSubnet[2].slicingName = cn_suggest_nssi_name; + this.slicingSubnet[2].instances = [{ + service_instance_id: cn_suggest_nssi_id, + service_instance_name: cn_suggest_nssi_name + }]; + this.slicingSubnet[2].params = { + cn_service_snssai, + cn_resource_sharing_level, + cn_ue_mobility_level, + cn_latency, + cn_max_number_of_ues, + cn_activity_factor, + cn_exp_data_rate_dl, + cn_exp_data_rate_ul, + cn_area_traffic_cap_dl, + cn_area_traffic_cap_ul + }; } }) } + getSlicingData ( bool: boolean): void { + this.loading = true + if (bool && this.slicingInstances.length === 1) { + this.http.getSlicingInstance('1', '10').subscribe ( res => { + this.loading = false; + const { result_header: { result_code }, result_body: { nsi_service_instances } } = res + if (+result_code === 200) { + this.slicingInstances = nsi_service_instances; + } + }) + } + } + slicingInstanceChange ():void { + // 获取切片子网实例数据 + this.http.getSlicingSubnetInstance(this.selectedServiceId).subscribe( res => { + const { result_header: { result_code }, result_body} = res; + if (+result_code === 200) { + const { an_suggest_nssi_id, an_suggest_nssi_name, tn_suggest_nssi_id, tn_suggest_nssi_name, cn_suggest_nssi_id, cn_suggest_nssi_name } = result_body; + this.slicingSubnet[0].slicingId = an_suggest_nssi_id; + this.slicingSubnet[0].slicingName = an_suggest_nssi_name; + this.slicingSubnet[1].slicingId = tn_suggest_nssi_id; + this.slicingSubnet[1].slicingName = tn_suggest_nssi_name; + this.slicingSubnet[2].slicingId = cn_suggest_nssi_id; + this.slicingSubnet[2].slicingName = cn_suggest_nssi_name; + } + }) + this.slicingInstances.forEach (item => { + if (item.service_instance_id === this.selectedServiceId) { + this.selectedServiceName = item.service_instance_name; + } + }) + } + resetSlicingInstance (): void { + this.selectedServiceId = ''; + this.selectedServiceName = ''; + this.slicingSubnet.map( item => { + item.slicingId = ''; + item.slicingName = ''; + }) + } + getSubnetInstances (bool: boolean, instance: any): void { + if(bool && instance.instances.length === 1) { + this.http.getSubnetInContext(instance.context, '1', '10').subscribe( res => { + const { result_header: { result_code }, result_body } = res; + if (+result_code === 200) { + this.slicingSubnet.map (item => { + if (item.context === instance.context) { + item.instances = result_body.nssi_service_instances; + } + }) + } + }) + } + } + slicingSubnetChange (instance: any): void { + instance.instances.forEach( item => { + if (instance.slicingId === item.service_instance_id) { + instance.slicingName = item.service_instance_name; + } + }) + } - serviceId = ['46da8cf8-0878-48ac-bea3-f2200959411a', '46da8cf8-0878-48ac-bea3-f2200959411b', '46da8cf8-0878-48ac-bea3-f2200959411c']; - serviceData: {} = { - "46da8cf8-0878-48ac-bea3-f2200959411a": "eMBB instancela", - "46da8cf8-0878-48ac-bea3-f2200959411b": "eMBB instancelb", - "46da8cf8-0878-48ac-bea3-f2200959411c": "eMBB instancelc", - }; - - - - serviceIdChange(value: string): void { - this.selectedServiceName = this.serviceData[value]; - console.log(this.selectedServiceName, "=====") + restSubnetInstance (instance: any): void { + instance.slicingId = ''; + instance.slicingName = ''; } - resetService() { - this.selectedServiceId = ""; - this.serviceIdChange(this.selectedServiceId); + + showParamsModel (item: any): void { + this.isShowParams = true; + this.paramsTitle = item.title; + this.params = item.params } handleCancel() { diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html new file mode 100644 index 00000000..04042d7f --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html @@ -0,0 +1,2 @@ + + diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less new file mode 100644 index 00000000..e69de29b diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts new file mode 100644 index 00000000..b5325d85 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SubnetParamsModelComponent } from './subnet-params-model.component'; + +describe('SubnetParamsModelComponent', () => { + let component: SubnetParamsModelComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SubnetParamsModelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SubnetParamsModelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts new file mode 100644 index 00000000..ec8790ab --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts @@ -0,0 +1,33 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { WIRELESS_FORM_ITEMS, TRANSFRER_FORM_ITEMS } from '../.../../../../../../../../constants/constants' + +@Component({ + selector: 'app-subnet-params-model', + templateUrl: './subnet-params-model.component.html', + styleUrls: ['./subnet-params-model.component.less'] +}) +export class SubnetParamsModelComponent implements OnInit { + + @Input() showModel: boolean; + @Input() detailData: any; + @Input() title: string; + @Output() cancel = new EventEmitter(); + + transferFormItems = TRANSFRER_FORM_ITEMS; + + constructor() { } + + ngOnInit() { + + } + + handleCancel() { + this.showModel = false + this.cancel.emit(this.showModel) + } + + handleOk(): void { + this.handleCancel() + } + +} diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts index a83178b5..6f9c48c1 100644 --- a/usecaseui-portal/src/constants/constants.ts +++ b/usecaseui-portal/src/constants/constants.ts @@ -70,5 +70,30 @@ export const BUSINESS_REQUIREMENT = [ title: '下行区域流量密度（Mbps/km ）', key: 'area_traffic_cap_dl' } - ] + +export const WIRELESS_FORM_ITEMS = [ + { + title: '时延（ms）', + key: 'an_latency' + }, + { + title: '5QI', + key: 'an_5qi' + }, + { + title: '覆盖小区列表', + key: 'an_coverage_area_ta_list' + } +] + +export const TRANSFRER_FORM_ITEMS = [ + { + title: '时延（ms）', + key: 'tn_latency' + }, + { + title: '带宽', + key: 'tn_bandwidth' + }, +] -- cgit 1.2.3-korg