diff options
Diffstat (limited to 'usecaseui-portal/src/app/views')
4 files changed, 1321 insertions, 684 deletions
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 aa5cebe0..88da11b6 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 @@ -1,428 +1,531 @@ -import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core'; -import { SlicingTaskServices } from '@src/app/core/services/slicingTaskServices'; -import { indexDebugNode } from '@angular/core/src/debug/debug_node'; +import { + Component, + OnInit, + Input, + Output, + EventEmitter, + ViewChild, +} from "@angular/core"; +import { SlicingTaskServices } from "@src/app/core/services/slicingTaskServices"; +import { indexDebugNode } from "@angular/core/src/debug/debug_node"; @Component({ - selector: 'app-slicing-task-model', - templateUrl: './slicing-task-model.component.html', - styleUrls: ['./slicing-task-model.component.less'] + selector: "app-slicing-task-model", + templateUrl: "./slicing-task-model.component.html", + styleUrls: ["./slicing-task-model.component.less"], }) export class SlicingTaskModelComponent implements OnInit { - @Input() showDetail: boolean; - @Input() moduleTitle: string; - @Input() taskId: string; - @Output() cancel = new EventEmitter<object>(); - @ViewChild('notification') notification1: any; + @Input() showDetail: boolean; + @Input() moduleTitle: string; + @Input() taskId: string; + @Output() cancel = new EventEmitter<object>(); + @ViewChild("notification") notification1: any; - constructor(private http: SlicingTaskServices) { } + constructor(private http: SlicingTaskServices) {} - // 配置审核详情 - checkDetail: any[] = [{}]; - //业务需求信息 - businessRequirement: any[] = []; - //匹配NST信息 - NSTinfo: object[] = [{}]; - // 共享切片实例 - selectedServiceId: string; - selectedServiceName: string; - slicingInstances: any; - //an/tn/cn instances NSSI ID下拉框的开关 - enableNSSISelectionList: any[] = [] - // 子网实例 - slicingSubnet: any[] = [ - { - title: 'An', - context: 'an', - slicingId: '', - slicingName: '', - total: 0, - currentPage: '1', - pageSize: '10', - isLoading: false, - flag: false, - instances: [] - }, - { - title: 'Tn', - context: 'tn', - slicingId: '', - slicingName: '', - total: 0, - currentPage: '1', - pageSize: '10', - isLoading: false, - flag: false, - instances: [] - }, - { - title: 'Cn', - context: 'cn', - slicingId: '', - slicingName: '', - total: 0, - currentPage: '1', - pageSize: '10', - isLoading: false, - flag: false, - instances: [] - } - ] - isDisabled: any = [true,true,true] - // 子网参数 - isShowParams: boolean; - paramsTitle: string; - params: any; - noPassPara: string[]; - // 获取数据loading - isSpinning: boolean = false; - loading: boolean = false; + // 配置审核详情 + checkDetail: any[] = [{}]; + //业务需求信息 + businessRequirement: any[] = []; + //匹配NST信息 + NSTinfo: object[] = [{}]; + // 共享切片实例 + selectedServiceId: string; + selectedServiceName: string; + slicingInstances: any; + //an/tn/cn instances NSSI ID下拉框的开关 + enableNSSISelectionList: any[] = []; + // 子网实例 + slicingSubnet: any[] = [ + { + title: "An", + context: "an", + slicingId: "", + slicingName: "", + total: 0, + currentPage: "1", + pageSize: "10", + isLoading: false, + flag: false, + instances: [], + }, + { + title: "Tn", + context: "tn", + slicingId: "", + slicingName: "", + total: 0, + currentPage: "1", + pageSize: "10", + isLoading: false, + flag: false, + instances: [], + }, + { + title: "Cn", + context: "cn", + slicingId: "", + slicingName: "", + total: 0, + currentPage: "1", + pageSize: "10", + isLoading: false, + flag: false, + instances: [], + }, + ]; + isDisabled: any = [true, true, true]; + // 子网参数 + isShowParams: boolean; + paramsTitle: string; + params: any; + noPassPara: string[]; + // 获取数据loading + isSpinning: boolean = false; + loading: boolean = false; + ngOnInit() {} - ngOnInit() { } + ngOnChanges() { + if (this.showDetail) { + this.isSpinning = true; + this.getautidInfo(); + } else { + this.isDisabled.map((item) => { + item = true; + }); + } + } - ngOnChanges() { - if (this.showDetail) { - this.isSpinning = true; - this.getautidInfo(); - } else { - this.isDisabled.map(item=>{ - item = true - }) - } - } + // used for picking some key-value pairs from a object. + pick(obj, arr): Object { + return arr.reduce((iter, val) => { + if (val in obj) { + iter[val] = obj[val]; + } + return iter; + }, {}); + } - // used for picking some key-value pairs from a object. - pick(obj, arr): Object { - return arr.reduce((iter, val) => { - if(val in obj) { - iter[val] = obj[val]; - } - return iter; - }, {}); - } + getautidInfo(): void { + let getAuditInfoFailedCallback = () => { + this.isSpinning = false; + }; + this.http + .getAuditInfo(this.taskId, getAuditInfoFailedCallback) + .then((res) => { + this.isSpinning = false; + const { + business_demand_info, + nst_info, + nsi_nssi_info, + ...checkInfo + } = res.result_body; + // 处理配置审核详情数据 + this.checkDetail = [ + { + ...checkInfo, + service_snssai: business_demand_info.service_snssai, + }, + ]; + // 业务需求信息数据 + if (business_demand_info.coverage_area_ta_list !== null) { + business_demand_info.area = business_demand_info.coverage_area_ta_list.map( + (item) => { + item = item.split(";").join(" - "); + return item; + } + ); + } else { + business_demand_info.area = []; + } + // 前端模拟数据 + let areaList = [ + "Haidian District;Beijing;Beijing", + "Xicheng District;Beijing;Beijing", + "Changping District;Beijing;Beijing", + ].map((item) => { + item = item.split(";").join(" - "); + return item; + }); + this.businessRequirement = [ + { ...business_demand_info, area: areaList }, + ]; + // 匹配NST信息 + this.NSTinfo = [nst_info]; + // 共享切片实例 + this.selectedServiceId = nsi_nssi_info.suggest_nsi_id; + this.selectedServiceName = nsi_nssi_info.suggest_nsi_name; + // an/tn/cn 3 select box switches parameters of Matching Shared NSSI + this.enableNSSISelectionList = [ + nsi_nssi_info.an_enableNSSISelection, + nsi_nssi_info.tn_bh_enableNSSISelection, + nsi_nssi_info.cn_enableNSSISelection, + ]; + if (!this.selectedServiceId || !this.selectedServiceName) { + this.isDisabled.map((item, index) => { + this.isDisabled[index] = false; + }); + } + this.isDisabled.map((item, index) => { + if (this.enableNSSISelectionList[index]) { + this.isDisabled[index] = false; + } + }); + this.slicingInstances = { + currentPage: "1", + pageSize: "10", + isLoading: false, + total: 0, + flag: false, + list: [ + { + service_instance_id: this.selectedServiceId, + service_instance_name: this.selectedServiceName, + }, + ], + }; + // 子网实例 + let subnetData = this.pick(nsi_nssi_info, [ + "an_suggest_nssi_id", + "an_suggest_nssi_name", + "tn_bh_suggest_nssi_id", + "tn_bh_suggest_nssi_name", + "cn_suggest_nssi_id", + "cn_suggest_nssi_name", + ]); + this.subnetDataFormatting(subnetData, 0); + // 前端模拟数据 + let area = [ + "Beijing;Beijing;Haidian District", + "Beijing;Beijing;Xicheng District", + "Beijing;Beijing;Changping District", + ]; + this.slicingSubnet[0].params = { + ...this.pick(nsi_nssi_info, [ + "sliceProfile_AN_sNSSAI", + "sliceProfile_AN_resourceSharingLevel", + "sliceProfile_AN_uEMobilityLevel", + "an_latency", + "sliceProfile_AN_maxNumberofUEs", + "sliceProfile_AN_activityFactor", + "sliceProfile_AN_expDataRateDL", + "sliceProfile_AN_expDataRateUL", + "sliceProfile_AN_areaTrafficCapDL", + "sliceProfile_AN_areaTrafficCapUL", + "an_script_name", + "sliceProfile_AN_overallUserDensity", + "an_enableNSSISelection", + "sliceProfile_AN_maxNumberofPDUSession", + ]), + an_coverage_area_ta_list: area, + }; + this.slicingSubnet[1].params = this.pick(nsi_nssi_info, [ + "tn_bh_latency", + "tn_bh_bandwidth", + "tn_bh_script_name", + "sliceProfile_TN_BH_jitte", + "sliceProfile_TN_BH_sNSSAI", + "tn_bh_enableNSSISelection", + "sliceProfile_TN_resourceSharingLevel", + "sliceProfile_CN_logicInterfaceId", + "sliceProfile_CN_ipAddress", + "sliceProfile_CN_nextHopInfo", + "sliceProfile_AN_ipAddress", + "sliceProfile_AN_logicInterfaceId", + "sliceProfile_AN_nextHopInfo", + "tn_connection_links", + ]); + this.slicingSubnet[2].params = { + ...this.pick(nsi_nssi_info, [ + "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", + "cn_script_name", + "sliceProfile_CN_overallUserDensity", + "cn_enableNSSISelection", + "sliceProfile_CN_maxNumberofPDUSession", + ]), + }; + }); + } - getautidInfo(): void { - let getAuditInfoFailedCallback = () => { - this.isSpinning = false; - } - this.http.getAuditInfo(this.taskId, getAuditInfoFailedCallback).then( res => { - this.isSpinning = false; - const { - business_demand_info, - nst_info, - nsi_nssi_info, - ...checkInfo - } = res.result_body; - // 处理配置审核详情数据 - this.checkDetail = [{...checkInfo, 'service_snssai': business_demand_info.service_snssai}]; - // 业务需求信息数据 - if(business_demand_info.coverage_area_ta_list !== null){ - business_demand_info.area = business_demand_info.coverage_area_ta_list.map(item => { - item = item.split(';').join(' - ') - return item - }) - }else{ - business_demand_info.area = [] - } - // 前端模拟数据 - let areaList = ["Haidian District;Beijing;Beijing", "Xicheng District;Beijing;Beijing", "Changping District;Beijing;Beijing"].map(item => { - item = item.split(';').join(' - ') - return item - }) - this.businessRequirement = [{ ...business_demand_info, area: areaList }]; - // 匹配NST信息 - this.NSTinfo = [nst_info]; - // 共享切片实例 - this.selectedServiceId = nsi_nssi_info.suggest_nsi_id; - this.selectedServiceName = nsi_nssi_info.suggest_nsi_name; - // an/tn/cn 3 select box switches parameters of Matching Shared NSSI - this.enableNSSISelectionList = [nsi_nssi_info.an_enableNSSISelection,nsi_nssi_info.tn_bh_enableNSSISelection,nsi_nssi_info.cn_enableNSSISelection]; - if (!this.selectedServiceId || !this.selectedServiceName) { - this.isDisabled.map((item,index)=>{ - this.isDisabled[index] = false - }) - } - this.isDisabled.map((item,index)=>{ - if(this.enableNSSISelectionList[index]){ - this.isDisabled[index] = false - } - }) - this.slicingInstances = { - currentPage: '1', - pageSize: '10', - isLoading: false, - total: 0, - flag: false, - list: [{ - service_instance_id: this.selectedServiceId, - service_instance_name: this.selectedServiceName - }] - } - // 子网实例 - let subnetData = this.pick(nsi_nssi_info, ['an_suggest_nssi_id', 'an_suggest_nssi_name', 'tn_bh_suggest_nssi_id', 'tn_bh_suggest_nssi_name', 'cn_suggest_nssi_id', 'cn_suggest_nssi_name']); - this.subnetDataFormatting(subnetData, 0); - // 前端模拟数据 - let area = ["Beijing;Beijing;Haidian District", "Beijing;Beijing;Xicheng District", "Beijing;Beijing;Changping District"]; - this.slicingSubnet[0].params = {...this.pick(nsi_nssi_info, [ - 'sliceProfile_AN_sNSSAI', - 'sliceProfile_AN_resourceSharingLevel', - 'sliceProfile_AN_uEMobilityLevel', - 'an_latency', - 'sliceProfile_AN_maxNumberofUEs', - 'sliceProfile_AN_activityFactor', - 'sliceProfile_AN_expDataRateDL', - 'sliceProfile_AN_expDataRateUL', - 'sliceProfile_AN_areaTrafficCapDL', - 'sliceProfile_AN_areaTrafficCapUL', - 'an_script_name', - 'sliceProfile_AN_overallUserDensity', - 'an_enableNSSISelection', - 'sliceProfile_AN_maxNumberofPDUSession', - ]), an_coverage_area_ta_list: area}; - this.slicingSubnet[1].params = this.pick(nsi_nssi_info, [ - 'tn_bh_latency', - 'tn_bh_bandwidth', - 'tn_bh_script_name', - 'sliceProfile_TN_BH_jitte', - 'sliceProfile_TN_BH_sNSSAI', - 'tn_bh_enableNSSISelection', - 'sliceProfile_TN_resourceSharingLevel', - 'sliceProfile_CN_logicInterfaceId', - 'sliceProfile_CN_ipAddress', - 'sliceProfile_CN_nextHopInfo', - 'sliceProfile_AN_ipAddress', - 'sliceProfile_AN_logicInterfaceId', - 'sliceProfile_AN_nextHopInfo', - 'tn_connection_links']); - this.slicingSubnet[2].params = {...this.pick(nsi_nssi_info, [ - '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', - 'cn_script_name', - 'sliceProfile_CN_overallUserDensity', - 'cn_enableNSSISelection', - 'sliceProfile_CN_maxNumberofPDUSession', - ])}; - }) - } + openSlicingInstance(bool: boolean): void { + const { total, currentPage, pageSize } = this.slicingInstances; + if (bool && !total) { + this.slicingInstances.list = []; + this.getSlicingInstances(currentPage, pageSize); + } + } - openSlicingInstance(bool: boolean): void { - const { total, currentPage, pageSize } = this.slicingInstances; - if (bool && !total) { - this.slicingInstances.list = []; - this.getSlicingInstances(currentPage, pageSize) - } - } + getNextPageData(): void { + const { total, currentPage, pageSize } = this.slicingInstances; + if (total - +currentPage * +pageSize > 0) { + if (this.slicingInstances.flag) return; + this.slicingInstances.flag = true; + this.getSlicingInstances(currentPage, pageSize); + this.slicingInstances.currentPage = ( + +this.slicingInstances.currentPage + 1 + ).toString(); + } + } - getNextPageData(): void { - const { total, currentPage, pageSize } = this.slicingInstances; - if (total - (+currentPage * +pageSize) > 0) { - if (this.slicingInstances.flag) return; - this.slicingInstances.flag = true - this.getSlicingInstances(currentPage, pageSize) - this.slicingInstances.currentPage = (+this.slicingInstances.currentPage + 1).toString(); - } - } + getSlicingInstances(pageNo: string, pageSize: string): void { + this.slicingInstances.isLoading = true; + let getSlicingInstanceFailedCallback = () => { + this.slicingInstances.isLoading = false; + this.slicingInstances.flag = false; + }; + this.http + .getSlicingInstance( + pageNo, + pageSize, + getSlicingInstanceFailedCallback + ) + .then((res) => { + const { result_body } = res; + setTimeout(() => { + const { + nsi_service_instances, + record_number, + } = result_body; + this.slicingInstances.total = record_number; + this.slicingInstances.list.push(...nsi_service_instances); + this.slicingInstances.isLoading = false; + this.slicingInstances.flag = false; + }, 2000); + }); + } - getSlicingInstances(pageNo: string, pageSize: string): void { - this.slicingInstances.isLoading = true; - let getSlicingInstanceFailedCallback = () => { - this.slicingInstances.isLoading = false; - this.slicingInstances.flag = false; - } - this.http.getSlicingInstance(pageNo, pageSize, getSlicingInstanceFailedCallback).then(res => { - const { result_body } = res; - setTimeout(() => { - const { nsi_service_instances, record_number } = result_body; - this.slicingInstances.total = record_number; - this.slicingInstances.list.push(...nsi_service_instances); - this.slicingInstances.isLoading = false; - this.slicingInstances.flag = false; - }, 2000) - }) - } + slicingInstanceChange(): void { + // choose the target nssi + this.isDisabled.map((item, index) => { + if (!this.enableNSSISelectionList[index]) { + this.isDisabled[index] = true; + } + }); + this.selectedServiceName = ""; + // 获取切片子网实例数据 + let getSlicingSubnetInstanceFailedCallback = () => { + this.subnetDataFormatting({}, 1); + }; + this.http + .getSlicingSubnetInstance( + this.selectedServiceId, + getSlicingSubnetInstanceFailedCallback + ) + .then((res) => { + const { result_body, record_number } = res; + this.subnetDataFormatting(result_body, record_number); + }); + this.slicingInstances.list.forEach((item) => { + if (item.service_instance_id === this.selectedServiceId) { + this.selectedServiceName = item.service_instance_name; + } + }); + } - slicingInstanceChange(): void { // choose the target nssi - this.isDisabled.map((item,index)=>{ - if (!this.enableNSSISelectionList[index]) { - this.isDisabled[index] = true - } - }) - this.selectedServiceName = ''; - // 获取切片子网实例数据 + subnetDataFormatting(subnetData?: any, total?: number): void { + const { + an_suggest_nssi_id, + an_suggest_nssi_name, + tn_bh_suggest_nssi_id, + tn_bh_suggest_nssi_name, + cn_suggest_nssi_id, + cn_suggest_nssi_name, + } = subnetData; + this.slicingSubnet[0].slicingId = an_suggest_nssi_id; + this.slicingSubnet[0].slicingName = an_suggest_nssi_name; + this.slicingSubnet[0].total = total; + this.slicingSubnet[0].currentPage = "1"; + this.slicingSubnet[0].instances = [ + { + service_instance_id: an_suggest_nssi_id, + service_instance_name: an_suggest_nssi_name, + }, + ]; - let getSlicingSubnetInstanceFailedCallback = () => { - this.subnetDataFormatting({}, 1); - }; - this.http.getSlicingSubnetInstance(this.selectedServiceId, getSlicingSubnetInstanceFailedCallback).then(res => { - const { result_body, record_number} = res; - this.subnetDataFormatting(result_body, record_number) - }) - this.slicingInstances.list.forEach(item => { - if (item.service_instance_id === this.selectedServiceId) { - this.selectedServiceName = item.service_instance_name; - } - }) - } + this.slicingSubnet[1].slicingId = tn_bh_suggest_nssi_id; + this.slicingSubnet[1].slicingName = tn_bh_suggest_nssi_name; + this.slicingSubnet[1].total = total; + this.slicingSubnet[1].currentPage = "1"; + this.slicingSubnet[1].instances = [ + { + service_instance_id: tn_bh_suggest_nssi_id, + service_instance_name: tn_bh_suggest_nssi_name, + }, + ]; - subnetDataFormatting ( subnetData?: any, total?: number): void{ - const { an_suggest_nssi_id, an_suggest_nssi_name, tn_bh_suggest_nssi_id, tn_bh_suggest_nssi_name, cn_suggest_nssi_id, cn_suggest_nssi_name } = subnetData; - this.slicingSubnet[0].slicingId = an_suggest_nssi_id; - this.slicingSubnet[0].slicingName = an_suggest_nssi_name; - this.slicingSubnet[0].total = total; - this.slicingSubnet[0].currentPage = '1'; - this.slicingSubnet[0].instances = [{ - service_instance_id: an_suggest_nssi_id, - service_instance_name: an_suggest_nssi_name - }]; + this.slicingSubnet[2].slicingId = cn_suggest_nssi_id; + this.slicingSubnet[2].slicingName = cn_suggest_nssi_name; + this.slicingSubnet[2].total = total; + this.slicingSubnet[2].currentPage = "1"; + this.slicingSubnet[2].instances = [ + { + service_instance_id: cn_suggest_nssi_id, + service_instance_name: cn_suggest_nssi_name, + }, + ]; + } - this.slicingSubnet[1].slicingId = tn_bh_suggest_nssi_id; - this.slicingSubnet[1].slicingName = tn_bh_suggest_nssi_name; - this.slicingSubnet[1].total = total; - this.slicingSubnet[1].currentPage = '1'; - this.slicingSubnet[1].instances = [{ - service_instance_id: tn_bh_suggest_nssi_id, - service_instance_name: tn_bh_suggest_nssi_name - }]; + resetSlicingInstance(): void { + this.selectedServiceId = ""; + this.selectedServiceName = ""; + this.slicingSubnet.map((item) => { + item.slicingId = ""; + item.slicingName = ""; + }); + this.isDisabled.map((item, index) => { + this.isDisabled[index] = false; + }); + } - this.slicingSubnet[2].slicingId = cn_suggest_nssi_id; - this.slicingSubnet[2].slicingName = cn_suggest_nssi_name; - this.slicingSubnet[2].total = total; - this.slicingSubnet[2].currentPage = '1'; - this.slicingSubnet[2].instances = [{ - service_instance_id: cn_suggest_nssi_id, - service_instance_name: cn_suggest_nssi_name - }]; - } + openSubnetInstances(bool: boolean, instance: any): void { + if (bool && !instance.total) { + instance.instances = []; + this.getSubnetInstances(instance); + } + } - resetSlicingInstance(): void { - this.selectedServiceId = ''; - this.selectedServiceName = ''; - this.slicingSubnet.map(item => { - item.slicingId = ''; - item.slicingName = ''; - }) - this.isDisabled.map((item,index)=>{ - this.isDisabled[index] = false - }) - } + getNextPageSubnet(instance: any): void { + const { total, currentPage, pageSize } = instance; + if (total - +currentPage * +pageSize > 0) { + if (instance.flag) return; + instance.flag = true; + this.getSubnetInstances(instance); + let count = +instance.currentPage; + instance.currentPage = (++count).toString(); + } + } - openSubnetInstances(bool: boolean, instance: any): void { - if (bool && !instance.total) { - instance.instances = [] - this.getSubnetInstances(instance) - } - } + getSubnetInstances(instance: any): void { + instance.isLoading = true; + const { context, currentPage, pageSize } = instance; + let getSubnetInContextFailedCallback = () => { + instance.isLoading = false; + instance.flag = false; + }; + this.http + .getSubnetInContext( + context, + currentPage, + pageSize, + getSubnetInContextFailedCallback + ) + .then((res) => { + const { result_body } = res; + const { nssi_service_instances, record_number } = result_body; + this.slicingSubnet.map((item) => { + if (item.context === context) { + item.total = record_number; + item.instances.push(...nssi_service_instances); + } + }); + instance.isLoading = false; + instance.flag = false; + }); + } - getNextPageSubnet(instance: any): void { - const { total, currentPage, pageSize } = instance; - if (total - (+currentPage * +pageSize) > 0) { - if (instance.flag) return; - instance.flag = true; - this.getSubnetInstances(instance); - let count = +instance.currentPage; - instance.currentPage = (++count).toString(); - } - } + slicingSubnetChange(instance: any): void { + instance.slicingName = ""; + instance.instances.forEach((item) => { + if (instance.slicingId === item.service_instance_id) { + instance.slicingName = item.service_instance_name; + } + }); + } - getSubnetInstances(instance: any): void { - instance.isLoading = true; - const { context, currentPage, pageSize } = instance; - let getSubnetInContextFailedCallback = () => { - instance.isLoading = false; - instance.flag = false; - }; - this.http.getSubnetInContext(context, currentPage, pageSize,getSubnetInContextFailedCallback).then(res => { - const { result_body } = res; - const { nssi_service_instances, record_number } = result_body; - this.slicingSubnet.map(item => { - if (item.context === context) { - item.total = record_number; - item.instances.push(...nssi_service_instances); - } - }) - instance.isLoading = false; - instance.flag = false; - }) - } + restSubnetInstance(instance: any): void { + instance.slicingId = ""; + instance.slicingName = ""; + } - slicingSubnetChange(instance: any): void { - instance.slicingName = '' - instance.instances.forEach(item => { - if (instance.slicingId === item.service_instance_id) { - instance.slicingName = item.service_instance_name; - } - }) - } + showParamsModel(item: any): void { + this.isShowParams = true; + this.paramsTitle = item.title; + this.params = item.params; + } - restSubnetInstance(instance: any): void { - instance.slicingId = ''; - instance.slicingName = ''; - } - - showParamsModel(item: any): void { - this.isShowParams = true; - this.paramsTitle = item.title; - this.params = item.params - } - - changeParams(params: any): void { - const index = this.paramsTitle === 'An' ? 0 : (this.paramsTitle === 'Tn' ? 1 : 2); - this.slicingSubnet[index].params = params - } - noPassParaChange (noPassPara: string[]): void { - this.noPassPara = noPassPara - } - handleCancel(bool: boolean = false) { - this.showDetail = false; - this.cancel.emit({ showDetail: this.showDetail, bool }); - } - handleOk() { - this.loading = true; - const { selectedServiceId, selectedServiceName, slicingSubnet, checkDetail, businessRequirement, NSTinfo } = this; - // slicingSubnet[1] is about Tn, - // Delete parameters that do not need to be passed - if (this.noPassPara.length !== 0 ) { - this.noPassPara.forEach((item) => { - for (let val in slicingSubnet[1].params) { - if (val === item) { - delete slicingSubnet[1].params[val] - } - } - }) - } - const nsi_nssi_info: object = { - suggest_nsi_id: selectedServiceId, - suggest_nsi_name: selectedServiceName, - an_suggest_nssi_id: slicingSubnet[0].slicingId, - an_suggest_nssi_name: slicingSubnet[0].slicingName, - ...slicingSubnet[0].params, - tn_bh_suggest_nssi_id: slicingSubnet[1].slicingId, - tn_bh_suggest_nssi_name: slicingSubnet[1].slicingName, - ...slicingSubnet[1].params, - cn_suggest_nssi_id: slicingSubnet[2].slicingId, - cn_suggest_nssi_name: slicingSubnet[2].slicingName, - ...slicingSubnet[2].params, - } - delete businessRequirement[0].area - let reqBody = { ...checkDetail[0], business_demand_info: businessRequirement[0], nst_info: NSTinfo[0], nsi_nssi_info }; - delete reqBody.service_snssai; - let submitSlicingFailedCallback = () => { - this.loading = false; - this.notification1.notificationFailed('Task', 'Sumbit', this.taskId) - } - this.http.submitSlicing(reqBody,submitSlicingFailedCallback).then(res => { - this.notification1.notificationSuccess('Task', 'Sumbit', this.taskId) - this.loading = false; - this.handleCancel(true); - }) - } + changeParams(params: any): void { + const index = + this.paramsTitle === "An" ? 0 : this.paramsTitle === "Tn" ? 1 : 2; + this.slicingSubnet[index].params = params; + } + noPassParaChange(noPassPara: string[]): void { + this.noPassPara = noPassPara; + } + handleCancel(bool: boolean = false) { + this.showDetail = false; + this.cancel.emit({ showDetail: this.showDetail, bool }); + } + handleOk() { + this.loading = true; + const { + selectedServiceId, + selectedServiceName, + slicingSubnet, + checkDetail, + businessRequirement, + NSTinfo, + } = this; + // slicingSubnet[1] is about Tn, + // Delete parameters that do not need to be passed + if (this.noPassPara.length !== 0) { + this.noPassPara.forEach((item) => { + for (let val in slicingSubnet[1].params) { + if (val === item) { + delete slicingSubnet[1].params[val]; + } + } + }); + } + const nsi_nssi_info: object = { + suggest_nsi_id: selectedServiceId, + suggest_nsi_name: selectedServiceName, + an_suggest_nssi_id: slicingSubnet[0].slicingId, + an_suggest_nssi_name: slicingSubnet[0].slicingName, + ...slicingSubnet[0].params, + tn_bh_suggest_nssi_id: slicingSubnet[1].slicingId, + tn_bh_suggest_nssi_name: slicingSubnet[1].slicingName, + ...slicingSubnet[1].params, + cn_suggest_nssi_id: slicingSubnet[2].slicingId, + cn_suggest_nssi_name: slicingSubnet[2].slicingName, + ...slicingSubnet[2].params, + }; + delete businessRequirement[0].area; + let reqBody = { + ...checkDetail[0], + business_demand_info: businessRequirement[0], + nst_info: NSTinfo[0], + nsi_nssi_info, + }; + delete reqBody.service_snssai; + let submitSlicingFailedCallback = () => { + this.loading = false; + this.notification1.notificationFailed( + "Task", + "Sumbit", + this.taskId + ); + }; + this.http + .submitSlicing(reqBody, submitSlicingFailedCallback) + .then((res) => { + this.notification1.notificationSuccess( + "Task", + "Sumbit", + this.taskId + ); + this.loading = false; + this.handleCancel(true); + }); + } } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts new file mode 100644 index 00000000..e83f50e3 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts @@ -0,0 +1,413 @@ +/******* + title /MUST/: MARK THE ITEM NAME, + key /MUST/: MARK THE ITEM KEY, + type /MUST/: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select/select/table-radio/endpoint + required /MUST/: IF REQUIRED, + disable /MUST/: IF DISABLED, + scoped: IF SCOPED NUMBERS, CAN BE EMITTED IF NOT + scopedText: SCOPED NUMBERS' DESCRIPTION. IF SCOPED NUMBERS EXITS, IT'S A MUST + placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT + options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT +********/ + +export const TRANSFRER_FORM_ITEMS = [ + { + title: "S-NSSAI", + key: "sliceProfile_TN_BH_sNSSAI", + required: true, + type: "input", + disable: true, + }, + { + title: "Latency (ms)", + key: "tn_bh_latency", + required: true, + type: "input", + disable: false, + }, + { + title: "Jitter", + key: "sliceProfile_TN_BH_jitte", + required: false, + type: "input", + disable: false, + }, + { + title: "MaxBandwidth", + key: "tn_bh_bandwidth", + required: true, + type: "input", + disable: false, + }, + { + title: "Resource Sharing Level", // select + key: "sliceProfile_TN_resourceSharingLevel", // :new + required: true, + disable: false, + type: "radio", + options: [ + { + title: "Shared", + key: "shared", + }, + { + title: "Non-shared", + key: "non-shared", + }, + ], + }, + { + title: "Connection Links", // table + key: "tn_connection_links", // :new + required: false, // combined + type: "table-radio", + disable: false, + }, + { + title: "AN Endpoint", // input group + key: "an_Endpoint", + type: "endpoint", + required: false, + disable: false, + options: [ + { + title: "ip_address", + key: "sliceProfile_AN_ipAddress", + holder: "IpAddress", + }, + { + title: "logical_link", + key: "sliceProfile_AN_logicInterfaceId", + holder: "LogicId", + }, + { + title: "nexthop_info", + key: "sliceProfile_AN_nextHopInfo", + holder: "NextHop", + }, + ], + }, + { + title: "CN Endpoint", + key: "cn_Endpoint", + type: "endpoint", + required: false, + disable: false, + options: [ + { + title: "ip_address", + key: "sliceProfile_CN_ipAddress", + holder: "IpAddress", + }, + { + title: "logical_link", + key: "sliceProfile_CN_logicInterfaceId", + holder: "LogicId", + }, + { + title: "nexthop_info", + key: "sliceProfile_CN_nextHopInfo", + holder: "NextHop", + }, + ], + }, +]; + +export const CORE_FORM_ITEMS = { + An: [ + { + title: "S-NSSAI", + key: "sliceProfile_AN_sNSSAI", + required: true, + type: "input", + disable: "true", + }, + { + title: "Resource Sharing Level", + key: "sliceProfile_AN_resourceSharingLevel", + required: true, + type: "radio", + disable: false, + options: [ + { + title: "Shared", + key: "shared", + }, + { + title: "Non-shared", + key: "non-shared", + }, + ], + }, + { + title: "Mobility", + key: "sliceProfile_AN_uEMobilityLevel", + required: true, + type: "select", + disable: false, + options: [ + { + title: "Stationary", + key: "stationary", + }, + { + title: "Nomadic", + key: "nomadic", + }, + { + title: "Spatially Restricted Mobility", + key: "spatially restricted mobility", + }, + { + title: "Fully Mobility", + key: "fully mobility", + }, + ], + }, + { + title: "Latency (ms)", + key: "an_latency", + required: true, + type: "input", + disable: false, + }, + { + title: "Max Number of PUD Session", + key: "sliceProfile_AN_maxNumberofPDUSession", + required: true, + type: "input", + disable: false, + }, + { + title: "Max Number of UEs", + key: "sliceProfile_AN_maxNumberofUEs", + required: true, + type: "input", + disable: false, + }, + { + title: "Activity Factor (%)", + key: "sliceProfile_AN_activityFactor", + required: true, + type: "input", + disable: false, + }, + { + title: "User Downlink Experience Rate（Mbps）", + key: "sliceProfile_AN_expDataRateDL", + required: true, + type: "input", + disable: false, + }, + { + title: "User Uplink Experience Rate（Mbps）", + key: "sliceProfile_AN_expDataRateUL", + required: true, + type: "input", + disable: false, + }, + { + title: "Downlink Regional Traffic Density（Mbps/km ）", + key: "sliceProfile_AN_areaTrafficCapDL", + required: false, + type: "input", + disable: false, + }, + { + title: "Uplink Regional Traffic Density（Mbps/km ）", + key: "sliceProfile_AN_areaTrafficCapUL", + required: false, + type: "input", + disable: false, + }, + { + title: "Script Name", + key: "an_script_name", + required: false, + type: "input", + disable: false, + }, + { + title: "Overall User Density", + key: "sliceProfile_AN_overallUserDensity", + required: false, + type: "input", + disable: false, + }, + { + title: "Coverage Area Ta List", + key: "an_coverage_area_ta_list", + required: true, + type: "city-select", + disable: false, + }, + ], + Cn: [ + { + title: "S-NSSAI", + key: "cn_service_snssai", + required: true, + type: "input", + disable: true, + }, + { + title: "Resource Sharing Level", + key: "cn_resource_sharing_level", + required: true, + type: "radio", + disable: false, + options: [ + { + title: "Shared", + key: "shared", + }, + { + title: "Non-shared", + key: "non-shared", + }, + ], + }, + { + title: "Mobility", + key: "cn_ue_mobility_level", + required: true, + type: "select", + disable: false, + options: [ + { + title: "Stationary", + key: "stationary", + }, + { + title: "Nomadic", + key: "nomadic", + }, + { + title: "Spatially Restricted Mobility", + key: "spatially restricted mobility", + }, + { + title: "Fully Mobility", + key: "fully mobility", + }, + ], + }, + { + title: "Latency (ms)", + key: "cn_latency", + required: true, + type: "input", + disable: false, + }, + { + title: "Max Number of UEs", + key: "cn_max_number_of_ues", + required: true, + type: "input", + disable: false, + }, + { + title: "Activity Factor (%)", + key: "cn_activity_factor", + required: true, + type: "input", + disable: false, + }, + { + title: "User Downlink Experience Rate（Mbps）", + key: "cn_exp_data_rate_dl", + required: true, + type: "input", + disable: false, + }, + { + title: "User Uplink Experience Rate（Mbps）", + key: "cn_exp_data_rate_ul", + required: true, + type: "input", + disable: false, + }, + { + title: "Downlink Regional Traffic Density（Mbps/km ）", + key: "cn_area_traffic_cap_dl", + required: false, + type: "input", + disable: false, + }, + { + title: "Uplink Regional Traffic Density（Mbps/km ）", + key: "cn_area_traffic_cap_ul", + required: false, + type: "input", + disable: false, + }, + { + title: "Script Name", + key: "cn_script_name", + required: false, + type: "input", + disable: false, + }, + { + title: "Max Number of PUD Session", + key: "sliceProfile_CN_maxNumberofPDUSession", + required: true, + type: "input", + disable: false, + }, + { + title: "OverAll User Density", + key: "sliceProfile_CN_overallUserDensity", + required: false, + type: "input", + disable: false, + }, + ], +}; + +export const ADDRESS = [ + { + id: "1", + name: "Beijing", + city: [ + { + id: "101", + name: "Beijing", + county: [ + { + id: "1001", + name: "Haiding District", + }, + { + id: "1002", + name: "Xicheng District", + }, + { + id: "1003", + name: "Changping District", + }, + ], + }, + ], + }, + { + id: "2", + name: "Shanghai", + city: [ + { + id: "201", + name: "Shanghai City", + county: [ + { + id: "2001", + name: "Pudongxin District", + }, + { + id: "2002", + name: "Jingan District", + }, + ], + }, + ], + }, +]; 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 index 6a9ebf6c..b0e3696c 100644 --- 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 @@ -1,6 +1,7 @@ <nz-modal [(nzVisible)]="showModel" [nzTitle]="title + 'Parameter'" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="960px"> <div class="subnet_params_container"> + <!-- TN interface --> <form nz-form *ngIf="title === 'Tn'"> <nz-form-item *ngFor="let item of transferFormItems"> <nz-form-label [nzSpan]="7" [nzRequired]="item.required" [nzFor]="item.key" @@ -9,10 +10,9 @@ </nz-form-label> <nz-form-control [nzSpan]="16"> <input nz-input [(ngModel)]="formData[item.key]" [name]="item.key" [id]="item.key" - [readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'" - [placeholder]="inputHolder(item.title)" *ngIf="specialParaTN.indexOf(item.title)===-1" /> - <nz-radio-group [name]=" item.key" [(ngModel)]="formData[item.key]" - *ngIf="item.title==='Resource Sharing Level'" (ngModelChange)="changeResourceShare()"> + [disabled]="item.disable" [placeholder]="inputHolder(item.title)" *ngIf="item.type==='input'" /> + <nz-radio-group [name]=" item.key" [(ngModel)]="formData[item.key]" *ngIf="item.type==='radio'" + (ngModelChange)="changeResourceShare()"> <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options"> {{ option.title }} </label> @@ -56,7 +56,7 @@ </div> </nz-input-group> <!-- connection links table --> - <div *ngIf="item.title === 'Connection Links'"> + <div *ngIf="item.type==='table-radio'"> <nz-table #basicTable [nzData]="connectionLinkTable" nzShowPagination="true" nzPageSize="2"> <thead> <tr> @@ -85,38 +85,37 @@ </tbody> </nz-table> </div> + <!-- Prompt whether the detection value is empty --> <div class="validation_alert" *ngIf="item.required"> {{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div> </nz-form-control> </nz-form-item> </form> + <!-- AN interface or CN interface --> <form nz-form *ngIf="title === 'An' || title === 'Cn'"> <nz-form-item *ngFor="let item of coreFormItems"> - <nz-form-label [nzSpan]="item.key === 'an_coverage_area_ta_list'?7:13" [nzRequired]="item.required" - *ngIf=" item.title !== 'Endpoint' || EndpointEnable " [ngStyle]="labelStyle(item.required)"> + <nz-form-label [nzSpan]="item.type === 'city-select'?7:13" [nzRequired]="item.required" + [ngStyle]="labelStyle(item.required)"> {{ item.title }} </nz-form-label> - <nz-form-control nzSpan="8" *ngIf="item.key !== 'an_coverage_area_ta_list'"> + <nz-form-control nzSpan="8" *ngIf="item.type !== 'city-select'"> <input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="formData[item.key]" - [readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'" - *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' " + [disabled]="item.disable" *ngIf=" item.type === 'input'" [placeholder]="inputHolder(item.title)" /> - <nz-radio-group [name]="item.key" [(ngModel)]="formData[item.key]" - *ngIf="item.title === 'Resource Sharing Level'"> + <nz-radio-group [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.type === 'radio'"> <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options"> {{ option.title }} </label> </nz-radio-group> - <nz-select [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.title === 'Mobility'"> + <nz-select [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.type === 'select'"> <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options"> </nz-option> </nz-select> <div class="validation_alert" *ngIf="item.required"> {{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div> - <!-- Comment: The following code--> - <!-- Comment: Above code--> </nz-form-control> - <div *ngIf="title === 'An' && item.key === 'an_coverage_area_ta_list'"> + <!-- Address selection needs special treatment --> + <div *ngIf="title === 'An' && item.type === 'city-select'"> <div *ngFor="let area of areaList; let i = index"> <nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0" class="subnet_params_area" *ngFor="let item of area; let ind = index"> 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 index d6798064..bc352ad4 100644 --- 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 @@ -1,18 +1,23 @@ -import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core'; -import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS , NexthopInfo_Options } from '@src/constants/constants'; +import { + Component, + OnInit, + Input, + Output, + EventEmitter, + ElementRef, +} from "@angular/core"; +import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS } from "./constants"; import { NzMessageService } from "ng-zorro-antd"; -import { stringify } from '@angular/core/src/util'; -import { Util } from '../../../../../../shared/utils/utils'; -import { SlicingTaskServices } from '@src/app/core/services/slicingTaskServices'; - +import { stringify } from "@angular/core/src/util"; +import { Util } from "../../../../../../shared/utils/utils"; +import { SlicingTaskServices } from "@src/app/core/services/slicingTaskServices"; @Component({ - selector: 'app-subnet-params-model', - templateUrl: './subnet-params-model.component.html', - styleUrls: ['./subnet-params-model.component.less'] + 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; @@ -21,378 +26,475 @@ export class SubnetParamsModelComponent implements OnInit { @Output() noPassParaChange = new EventEmitter<any>(); transferFormItems: any[] = TRANSFRER_FORM_ITEMS; - regxpIP = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; // check for correct ip address + regxpIP = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; // check for correct ip address formData: any; - coreFormItems : any = []; + coreFormItems: any = []; areaList: any[] = []; - // 2020.08.17 Add 3 parameters for Endpoint, Comment: The following code - NexthopInfoOptions = NexthopInfo_Options; ANEndpointInputs: object = {}; CNEndpointInputs: object = {}; ANkeyList: string[] = []; CNkeyList: string[] = []; - EndpointEnable: boolean = false; // Whether to enable the three parameters of Endpoint + EndpointEnable: boolean = false; // Whether to enable the three parameters of Endpoint keyList: string[] = []; // keys of endPoint - specialParaTN: string[] = ['Resource Sharing Level', 'Connection Links', 'AN Endpoint', 'CN Endpoint']; + specialParaTN: string[] = [ + "Resource Sharing Level", + "Connection Links", + "AN Endpoint", + "CN Endpoint", + ]; // Parameters not passed to the back end - notPassPara: string[] = ['tn_connection_links']; + notPassPara: string[] = ["tn_connection_links"]; connectionLinkTable: any[] = []; connectionTableHeader: string[] = []; objectKeys = Object.keys; - // Comment: Above code + // Comment: Above code constructor( private message: NzMessageService, private Util: Util, private http: SlicingTaskServices - ) { - } + ) {} - ngOnInit() { - } + ngOnInit() {} ngOnChanges() { if (this.title) { this.formData = JSON.parse(JSON.stringify(this.detailData)); - if (this.title === 'An' || this.title === 'Cn') { - this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[]; - } - else if (this.title === 'Tn') { + if (this.title === "An" || this.title === "Cn") { + this.coreFormItems = + this.title === "An" + ? CORE_FORM_ITEMS.An + : this.title === "Cn" + ? CORE_FORM_ITEMS.Cn + : []; + } else if (this.title === "Tn") { this.getConnectionLinkTable(); - this.ANkeyList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options.map((val) => {return val.key}) - this.CNkeyList = this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).options.map((val) => {return val.key}) - this.keyList = this.ANkeyList.concat(this.CNkeyList) - if (typeof this.formData !== 'undefined' && Object.keys(this.formData).length !== 0) { - this.EndpointEnable = this.keyList.every((item) => {return this.formData.hasOwnProperty(item)}) + this.ANkeyList = this.transferFormItems + .find((item) => { + return item.title === "AN Endpoint"; + }) + .options.map((val) => { + return val.key; + }); + this.CNkeyList = this.transferFormItems + .find((item) => { + return item.title === "CN Endpoint"; + }) + .options.map((val) => { + return val.key; + }); + this.keyList = this.ANkeyList.concat(this.CNkeyList); + if ( + typeof this.formData !== "undefined" && + Object.keys(this.formData).length !== 0 + ) { + this.EndpointEnable = this.keyList.every((item) => { + return this.formData.hasOwnProperty(item); + }); } - if(this.EndpointEnable){ - this.ANEndpointInputs = this.Util.pick(this.formData, this.ANkeyList) - this.CNEndpointInputs = this.Util.pick(this.formData, this.CNkeyList) + if (this.EndpointEnable) { + this.ANEndpointInputs = this.Util.pick( + this.formData, + this.ANkeyList + ); + this.CNEndpointInputs = this.Util.pick( + this.formData, + this.CNkeyList + ); } else { - this.transferFormItems.map((item,index)=>{ - if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') { - this.transferFormItems.splice(index,1) + this.transferFormItems.map((item, index) => { + if ( + item.title === "AN Endpoint" || + item.title === "CN Endpoint" + ) { + this.transferFormItems.splice(index, 1); } - }) + }); } } // If the endpoint related parameters from the back end are incomplete, delete the endpoint item //-------> Comment: Above code - if (this.title === 'An') { - this.AreaFormatting(); + if (this.title === "An") { + this.AreaFormatting(); } } } - addCheckStatus () { + addCheckStatus() { this.connectionLinkTable.forEach((item) => { - if (item.hasOwnProperty('linkId') && typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links'] !== '' && this.formData['tn_connection_links'] !== null && item['linkId'] === this.formData['tn_connection_links']) { - item.checked = true + if ( + item.hasOwnProperty("linkId") && + typeof this.formData["tn_connection_links"] !== "undefined" && + this.formData["tn_connection_links"] !== "" && + this.formData["tn_connection_links"] !== null && + item["linkId"] === this.formData["tn_connection_links"] + ) { + item.checked = true; } else { - item.checked = false + item.checked = false; } - }) + }); } - changeResourceShare () { - this.judgeTn() + changeResourceShare() { + this.judgeTn(); } - isObject (val) { - if (Object.prototype.toString.call(val) === '[object Object]') { - return true + isObject(val) { + if (Object.prototype.toString.call(val) === "[object Object]") { + return true; } else { - return false + return false; } } - getConnectionLinkTable (): void{ - this.http.getConnectionLinkTable(this.getConnetionFailed).then ((res) => { - this.connectionLinkTable = res.result_body.connection_links_list - this.addCheckStatus() // add init check status for connection link table - this.judgeTn() // init judge - this.getTableHeader() - }) + getConnectionLinkTable(): void { + this.http + .getConnectionLinkTable(this.getConnetionFailed) + .then((res) => { + this.connectionLinkTable = + res.result_body.connection_links_list; + this.addCheckStatus(); // add init check status for connection link table + this.judgeTn(); // init judge + this.getTableHeader(); + }); } - getTableHeader (): void { // Find the common key of all data - let keyList :any[] = this.connectionLinkTable.map((item) => { - return Object.keys(item) - }) - this.connectionTableHeader = this.Util.intersection(keyList).filter((item) => { - return item !== 'checked' - }) + getTableHeader(): void { + // Find the common key of all data + let keyList: any[] = this.connectionLinkTable.map((item) => { + return Object.keys(item); + }); + this.connectionTableHeader = this.Util.intersection(keyList).filter( + (item) => { + return item !== "checked"; + } + ); // Filter redundant items in table data this.connectionLinkTable.forEach((item) => { for (let key in item) { - if (key !== 'linkId' && key !== 'checked' && this.connectionTableHeader.indexOf(key) === -1) { - delete item[key] + if ( + key !== "linkId" && + key !== "checked" && + this.connectionTableHeader.indexOf(key) === -1 + ) { + delete item[key]; } else { // Filter out the null values in each item for (let i in item[key]) { - if (i === 'jitter' && (item[key][i] === '' || item[key][i] === 'null' || item[key][i] === null)) { - delete item[key][i] + if ( + i === "jitter" && + (item[key][i] === "" || + item[key][i] === "null" || + item[key][i] === null) + ) { + delete item[key][i]; } } } } - }) + }); } - getConnetionFailed () { - console.log('failed') + getConnetionFailed() { + console.log("failed"); } - judgeTn (): void { - if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'non-shared') { - this.connectionLinkTable.forEach ((item) => { - item.checked = false - }) - this.formData['tn_connection_links'] = null - this.notPassPara = ['tn_connection_links'] + judgeTn(): void { + if ( + this.formData["sliceProfile_TN_resourceSharingLevel"] === + "non-shared" + ) { + this.connectionLinkTable.forEach((item) => { + item.checked = false; + }); + this.formData["tn_connection_links"] = null; + this.notPassPara = ["tn_connection_links"]; this.transferFormItems.forEach((item) => { - if (item.title === 'Connection Links') { - item.disable = true - } else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') { - item.required = true - item.disable = false + if (item.title === "Connection Links") { + item.disable = true; + } else if ( + item.title === "AN Endpoint" || + item.title === "CN Endpoint" + ) { + item.required = true; + item.disable = false; } - }) - } else if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'shared') { + }); + } else if ( + this.formData["sliceProfile_TN_resourceSharingLevel"] === "shared" + ) { this.transferFormItems.forEach((item) => { - if (item.title === 'Connection Links') { - item.disable = false - } else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') { - if (typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links'] !== null && this.formData['tn_connection_links'] !== '') { - item.disable = true - item.required = false - this.notPassPara = [] - this.notPassPara = this.notPassPara.concat(this.ANkeyList, this.CNkeyList) - } else { //:todo - this.formData['tn_connection_links'] = '' - item.disable = false - item.required = true - this.notPassPara = [] + if (item.title === "Connection Links") { + item.disable = false; + } else if ( + item.title === "AN Endpoint" || + item.title === "CN Endpoint" + ) { + if ( + typeof this.formData["tn_connection_links"] !== + "undefined" && + this.formData["tn_connection_links"] !== null && + this.formData["tn_connection_links"] !== "" + ) { + item.disable = true; + item.required = false; + this.notPassPara = []; + this.notPassPara = this.notPassPara.concat( + this.ANkeyList, + this.CNkeyList + ); + } else { + //:todo + this.formData["tn_connection_links"] = ""; + item.disable = false; + item.required = true; + this.notPassPara = []; } } - }) + }); } } - validateEndPoint (key: string, value: any, required: boolean): string { + validateEndPoint(key: string, value: any, required: boolean): string { if (required) { if (this.Util.isEmpty(value)) { - return 'can not be empty'; + return "can not be empty"; } } - if (key === 'ip_address') { + if (key === "ip_address") { if (!this.regxpIP.test(value)) { - if (value !== '') { - return 'xxx.xxx.xxx.xxx'; + if (value !== "") { + return "xxx.xxx.xxx.xxx"; } else { - return '' + return ""; } } else { - return ''; + return ""; } - } else if (key === 'logical_link') { - if (!this.Util.isInteger(value)){ - if (value !== ''){ - return 'integer only' + } else if (key === "logical_link") { + if (!this.Util.isInteger(value)) { + if (value !== "") { + return "integer only"; } else { - return '' + return ""; } } else { - return '' + return ""; } } else { - return ''; + return ""; } } - changeLinkCheck (id: string) : void{ // update the selection state + changeLinkCheck(id: string): void { + // update the selection state this.connectionLinkTable.forEach((item) => { - if (item['linkId'] === id) { - item.checked = true + if (item["linkId"] === id) { + item.checked = true; } else { - item.checked = false + item.checked = false; } - }) - this.formData['tn_connection_links'] = id // get the selected id - this.judgeTn() + }); + this.formData["tn_connection_links"] = id; // get the selected id + this.judgeTn(); } - AreaFormatting () { + AreaFormatting() { let areaList = [...this.formData.an_coverage_area_ta_list]; - this.areaList = areaList.map ( (item: any) => { - let arr = item.split(';'); - item = arr.map( (ite, index) => { + this.areaList = areaList.map((item: any) => { + let arr = item.split(";"); + item = arr.map((ite, index) => { let key: string; if (!index) { - key = 'province'; - } else if (index === 1){ - key = 'city' + key = "province"; + } else if (index === 1) { + key = "city"; } else { - key = 'district' + key = "district"; } const obj: any = {}; obj.key = key; - obj.selected = ite - obj.options = [{name: ite, id: ite}] - return obj - }) + obj.selected = ite; + obj.options = [{ name: ite, id: ite }]; + return obj; + }); return item; - }) + }); } - creatAreaList (): void { + creatAreaList(): void { let arr = [ { - key: 'province', - selected: '', - options: [] + key: "province", + selected: "", + options: [], }, { - key: 'city', - selected: '', - options: [] + key: "city", + selected: "", + options: [], }, { - key: 'district', - selected: '', - options: [] - } - ] - this.areaList.push(arr) + key: "district", + selected: "", + options: [], + }, + ]; + this.areaList.push(arr); } - deleteAreaList (index: number): void { - this.areaList.splice(index,1); + deleteAreaList(index: number): void { + this.areaList.splice(index, 1); } - handleChange(area: any[], areaItem: any): void{ - if (areaItem.key === 'province' && areaItem.options.length <= 1) { + handleChange(area: any[], areaItem: any): void { + if (areaItem.key === "province" && areaItem.options.length <= 1) { areaItem.options = ADDRESS; - } else if (areaItem.key === 'city' && areaItem.options.length <= 1) { - ADDRESS.forEach( item => { - if(item.name === area[0].selected) { + } else if (areaItem.key === "city" && areaItem.options.length <= 1) { + ADDRESS.forEach((item) => { + if (item.name === area[0].selected) { areaItem.options = item.city; } - }) - }else if (areaItem.key === 'district' && areaItem.options.length <= 1) { - ADDRESS.forEach( (item: any) => { - item.city.forEach(city => { + }); + } else if ( + areaItem.key === "district" && + areaItem.options.length <= 1 + ) { + ADDRESS.forEach((item: any) => { + item.city.forEach((city) => { if (city.name === area[1].selected) { areaItem.options = city.county; } - }) - }) + }); + }); } } handleChangeSelected(area: any[], areaItem: any) { - if (areaItem.key === 'province') { - area[1].selected = '' + if (areaItem.key === "province") { + area[1].selected = ""; area[1].options = []; - area[2].selected = ''; + area[2].selected = ""; area[2].options = []; - } else if (areaItem.key === 'city') { - area[2].selected = ''; + } else if (areaItem.key === "city") { + area[2].selected = ""; area[2].options = []; } } - handleCancel() : void{ - this.showModel = false - this.cancel.emit(this.showModel) + handleCancel(): void { + this.showModel = false; + this.cancel.emit(this.showModel); } - + // prompt text for each item of area_list - checkArea (area: any) : string{ - if (area.every((item) => {return item.selected === ''})) { - return 'empty'; + checkArea(area: any): string { + if ( + area.every((item) => { + return item.selected === ""; + }) + ) { + return "empty"; } - if (area.some((item) => {return item.selected === ''})) { - return 'incomplete'; + if ( + area.some((item) => { + return item.selected === ""; + }) + ) { + return "incomplete"; } - return ''; + return ""; } // special handling for address - areaCheckBeforeSubmit (target: object) : Boolean{ + areaCheckBeforeSubmit(target: object): Boolean { for (const prop in target) { - if (target.hasOwnProperty(prop)) { - if (prop === 'an_coverage_area_ta_list' || prop ==='cn_coverage_area_ta_list') { + if (target.hasOwnProperty(prop)) { + if ( + prop === "an_coverage_area_ta_list" || + prop === "cn_coverage_area_ta_list" + ) { // if the vlaue is "shanghai;shanghai;", the input is incomplete - return target[prop].every((item) => {return this.Util.deepCheck(item.split(';'))}); + return target[prop].every((item) => { + return this.Util.deepCheck(item.split(";")); + }); } } } return true; } - endCheckBeforeSubmit (endpoint, required) : Array<any>{ + endCheckBeforeSubmit(endpoint, required): Array<any> { // check params of Endpoint - let result: Array<any> = [true, '']; - let endPointList; - endPointList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options - let ipKey = ''; - let logicalKey = ''; - let nextKey = '' - for (let item of endPointList) { - if (item.title === 'ip_address') { - ipKey = item.key - } else if (item.title === 'logical_link') { - logicalKey = item.key - } else if (item.title === 'nexthop_info') { - nextKey = item.key - } + let result: Array<any> = [true, ""]; + let endPointList; + endPointList = this.transferFormItems.find((item) => { + return item.title === "AN Endpoint"; + }).options; + let ipKey = ""; + let logicalKey = ""; + let nextKey = ""; + for (let item of endPointList) { + if (item.title === "ip_address") { + ipKey = item.key; + } else if (item.title === "logical_link") { + logicalKey = item.key; + } else if (item.title === "nexthop_info") { + nextKey = item.key; } - for (let prop in endpoint) { - if (prop === ipKey) { - if (required) { - if (endpoint[prop] === '') { - result = [false, 'Endpoint can not be empty'] - } else if (!this.regxpIP.test(endpoint[prop])) { - result = [false, 'Illegal IpAddress'] - } - } else if (!this.regxpIP.test(endpoint[prop]) && endpoint[prop] !== '') { - result = [false, 'Illegal IpAddress'] + } + for (let prop in endpoint) { + if (prop === ipKey) { + if (required) { + if (endpoint[prop] === "") { + result = [false, "Endpoint can not be empty"]; + } else if (!this.regxpIP.test(endpoint[prop])) { + result = [false, "Illegal IpAddress"]; } - } else if (prop === logicalKey) { - if (required) { - if (endpoint[prop] === '') { - result = [false, 'logical can not be empty'] - } else if (!this.Util.isInteger(endpoint[prop])) { - result = [false, 'LogicalID can only be an integer'] - } - } else if (!this.Util.isInteger(endpoint[prop]) && endpoint[prop] !== '') { - result = [false, 'LogicalID can only be an integer'] + } else if ( + !this.regxpIP.test(endpoint[prop]) && + endpoint[prop] !== "" + ) { + result = [false, "Illegal IpAddress"]; + } + } else if (prop === logicalKey) { + if (required) { + if (endpoint[prop] === "") { + result = [false, "logical can not be empty"]; + } else if (!this.Util.isInteger(endpoint[prop])) { + result = [false, "LogicalID can only be an integer"]; } - } else if (prop === nextKey) { - if (required && endpoint[prop] === '') { - result = [false, 'Endpoint can not be empty'] - } + } else if ( + !this.Util.isInteger(endpoint[prop]) && + endpoint[prop] !== "" + ) { + result = [false, "LogicalID can only be an integer"]; + } + } else if (prop === nextKey) { + if (required && endpoint[prop] === "") { + result = [false, "Endpoint can not be empty"]; } - } - return result; + } + } + return result; } - inputHolder (title: string): string { - const titleArr = title.split(' ') + inputHolder(title: string): string { + const titleArr = title.split(" "); if (titleArr.length > 1) { - return titleArr.slice(0, 2).join(''); + return titleArr.slice(0, 2).join(""); } else { return title; } } - - labelStyle (required: boolean) : object{ + + labelStyle(required: boolean): object { let style; if (!required) { - style = {'margin-left': '18px', 'margin-right': '-18px'}; + style = { "margin-left": "18px", "margin-right": "-18px" }; } else { - style = {} + style = {}; } return style; } @@ -400,17 +502,27 @@ export class SubnetParamsModelComponent implements OnInit { handleOk(): void { // Verify that items of EndPoint is correct if (this.EndpointEnable) { - let endCheckResult = [] - if (this.title === 'Tn') { - const ANendCheckResult = this.endCheckBeforeSubmit(this.ANEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).required) - const CNendCheckResult = this.endCheckBeforeSubmit(this.CNEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).required) + let endCheckResult = []; + if (this.title === "Tn") { + const ANendCheckResult = this.endCheckBeforeSubmit( + this.ANEndpointInputs, + this.transferFormItems.find((item) => { + return item.title === "AN Endpoint"; + }).required + ); + const CNendCheckResult = this.endCheckBeforeSubmit( + this.CNEndpointInputs, + this.transferFormItems.find((item) => { + return item.title === "CN Endpoint"; + }).required + ); if (ANendCheckResult[0] && CNendCheckResult[0]) { - endCheckResult[0] = true + endCheckResult[0] = true; } else { if (ANendCheckResult[0] === false) { - endCheckResult = ANendCheckResult + endCheckResult = ANendCheckResult; } else { - endCheckResult = CNendCheckResult + endCheckResult = CNendCheckResult; } } } @@ -420,52 +532,62 @@ export class SubnetParamsModelComponent implements OnInit { } // replace the params about endPoint for (let prop in this.formData) { - if (this.title === 'Tn' && typeof this.ANEndpointInputs[prop] !== 'undefined') { + if ( + this.title === "Tn" && + typeof this.ANEndpointInputs[prop] !== "undefined" + ) { this.formData[prop] = this.ANEndpointInputs[prop]; - } else if (this.title === 'Tn' && typeof this.CNEndpointInputs[prop] !== 'undefined') { + } else if ( + this.title === "Tn" && + typeof this.CNEndpointInputs[prop] !== "undefined" + ) { this.formData[prop] = this.CNEndpointInputs[prop]; } } } let params: object; - if (this.title === 'An') { + if (this.title === "An") { const an_coverage_area_ta_list: string[] = []; - this.areaList.forEach( item => { - let str: string = ''; - item.forEach( area => { - str += area.selected + ';'; - }) - an_coverage_area_ta_list.push(str.substring(0, str.length-1)); - }) - params = {...this.formData, an_coverage_area_ta_list}; + this.areaList.forEach((item) => { + let str: string = ""; + item.forEach((area) => { + str += area.selected + ";"; + }); + an_coverage_area_ta_list.push(str.substring(0, str.length - 1)); + }); + params = { ...this.formData, an_coverage_area_ta_list }; } else { - params = {...this.formData}; + params = { ...this.formData }; + } + // Verify that each item exclude endpoint is not empty, include special handeling of area_list + let checkParams: object = params; + let requireKeyList: string[] = []; + let targetFormItems: any[] = []; + if (this.title === "An" || this.title === "Cn") { + targetFormItems = this.coreFormItems; + } else if ((this.title = "Tn")) { + targetFormItems = this.transferFormItems; } - // Verify that each item exclude endpoint is not empty, include special handeling of area_list - let checkParams : object= params - let requireKeyList :string[] = [] - let targetFormItems : any[] = [] - if (this.title === 'An' || this.title === 'Cn') { - targetFormItems = this.coreFormItems - } else if (this.title = 'Tn') { - targetFormItems = this.transferFormItems - } - for (let item of targetFormItems) { - if (typeof item.required !== 'undefined' && item.required) { - if (typeof item.type !== 'undefined' && item.type !== 'endpoint') - { - requireKeyList.push(item.key) - } - } - } - checkParams = this.Util.pick(params, requireKeyList) - if (this.Util.deepCheck(checkParams) && this.areaCheckBeforeSubmit(params)) { + for (let item of targetFormItems) { + if (typeof item.required !== "undefined" && item.required) { + if ( + typeof item.type !== "undefined" && + item.type !== "endpoint" + ) { + requireKeyList.push(item.key); + } + } + } + checkParams = this.Util.pick(params, requireKeyList); + if ( + this.Util.deepCheck(checkParams) && + this.areaCheckBeforeSubmit(params) + ) { this.paramsDataChange.emit(params); - this.noPassParaChange.emit(this.notPassPara) + this.noPassParaChange.emit(this.notPassPara); this.handleCancel(); } else { - this.message.error('Please complete the form'); + this.message.error("Please complete the form"); } } - } |