diff options
Diffstat (limited to 'usecaseui-portal/src')
13 files changed, 328 insertions, 34 deletions
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<any>(url);
}
+ getSlicingInstance (pageNo: string, pageSize: string){
+ const url = this.url.slicingInstance
+ .replace("{pageNo}", pageNo)
+ .replace("{pageSize}", pageSize);
+ return this.http.get<any>(url);
+ }
+ getSlicingSubnetInstance(nsiId: string){
+ const url = this.url.slicingSubnetInstance.replace('{nsiId}', nsiId);
+ return this.http.get<any>(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<any>(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 @@ <nz-list-item nz-row nzType="flex" nzJustify="start" [nzGutter]="8"> <div nz-col nzSpan="12"> 切片实例 ID： - <nz-select nzShowSearch [(ngModel)]="selectedServiceId" (ngModelChange)="serviceIdChange($event)"> - <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option> + <nz-select nzShowSearch + [(ngModel)]="selectedServiceId" + (ngModelChange)="slicingInstanceChange()" + (nzOpenChange)="getSlicingData($event)" + > + <nz-option *ngFor="let item of slicingInstances" [nzValue]="item.service_instance_id" [nzLabel]="item.service_instance_id"></nz-option> </nz-select> </div> <div nz-col nzSpan="8"> - 切片实例名称：{{selectedServiceName}} + 切片实例名称：{{ selectedServiceName }} </div> <div nz-col nzSpan="4"> - <button nz-button nzType="primary" (click)="resetService()"> + <button nz-button nzType="primary" (click)="resetSlicingInstance()"> <i nz-icon class="anticon anticon-plus"></i> </button> </div> @@ -74,23 +78,26 @@ <div nz-row [nzGutter]="8"> <div nz-col nzSpan="12"> 切片子网实例 ID： - <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="serviceIdChange($event)"> - <nz-option *ngFor="let p of serviceId" [nzValue]="p" [nzLabel]="p"></nz-option> + <nz-select nzShowSearch [(ngModel)]="item.slicingId" (ngModelChange)="slicingSubnetChange(item)" (nzOpenChange)="getSubnetInstances($event, item)"> + <nz-option *ngFor="let item of item.instances" [nzValue]="item.service_instance_id" [nzLabel]="item.service_instance_id"></nz-option> </nz-select> </div> <div nz-col nzSpan="8"> 切片子网实例名称：{{item.slicingName}} </div> <div nz-col nzSpan="4"> - <button nz-button nzType="primary" (click)="resetService()"> <i nz-icon - class="anticon anticon-plus"></i></button> - <button nz-button nzType="primary"> <i nz-icon class="anticon anticon-setting" - nzTheme="outline"></i></button> + <button nz-button nzType="primary" (click)="restSubnetInstance(item)"> + <i nz-icon class="anticon anticon-plus"></i> + </button> + <button nz-button nzType="primary" (click)="showParamsModel(item)"> + <i nz-icon class="anticon anticon-setting" nzTheme="outline"></i> + </button> </div> </div> </nz-card> </nz-list-item> </nz-list> </div> + <app-subnet-params-model [showModel]="isShowParams" [detailData]="params" [title]="paramsTitle" (cancel)="isShowParams=$event"></app-subnet-params-model> </nz-modal>
\ 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 @@ +<nz-modal [(nzVisible)]="showModel" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="750px"> +</nz-modal> 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 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less 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<SubnetParamsModelComponent>; + + 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<boolean>(); + + 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'
+ },
+]
|