gerrit.onap Code Review - usecase-ui.git/blob

   1 import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';
   2 import { NzMessageService } from 'ng-zorro-antd';
   3 import { SlicingTaskServices } from '@src/app/core/services/slicingTaskServices';
   4 import { indexDebugNode } from '@angular/core/src/debug/debug_node';
   5
   6 @Component({
   7   selector: 'app-slicing-task-model',
   8   templateUrl: './slicing-task-model.component.html',
   9   styleUrls: ['./slicing-task-model.component.less']
  10 })
  11 export class SlicingTaskModelComponent implements OnInit {
  12   @Input() showDetail: boolean;
  13   @Input() moduleTitle: string;
  14   @Input() taskId: string;
  15   @Output() cancel = new EventEmitter<object>();
  16   @ViewChild('notification') notification1: any;
  17
  18   constructor(private http: SlicingTaskServices, private message: NzMessageService) { }
  19
  20   // 配置审核详情
  21   checkDetail: any[] = [{}];
  22   //业务需求信息
  23   businessRequirement: any[] = [];
  24   //匹配NST信息
  25   NSTinfo: object[] = [{}];
  26   // 共享切片实例
  27   selectedServiceId: string;
  28   selectedServiceName: string;
  29   slicingInstances: any;
  30   //an/tn/cn instances NSSI ID下拉框的开关
  31   enableNSSISelectionList: any[] = []
  32   // 子网实例
  33   slicingSubnet: any[] = [
  34     {
  35       title: 'An',
  36       context: 'an',
  37       slicingId: '',
  38       slicingName: '',
  39       total: 0,
  40       currentPage: '1',
  41       pageSize: '10',
  42       isLoading: false,
  43       flag: false,
  44       instances: []
  45     },
  46     {
  47       title: 'Tn',
  48       context: 'tn',
  49       slicingId: '',
  50       slicingName: '',
  51       total: 0,
  52       currentPage: '1',
  53       pageSize: '10',
  54       isLoading: false,
  55       flag: false,
  56       instances: []
  57     },
  58     {
  59       title: 'Cn',
  60       context: 'cn',
  61       slicingId: '',
  62       slicingName: '',
  63       total: 0,
  64       currentPage: '1',
  65       pageSize: '10',
  66       isLoading: false,
  67       flag: false,
  68       instances: []
  69     }
  70   ]
  71   isDisabled: any = [true,true,true]
  72   // 子网参数
  73   isShowParams: boolean;
  74   paramsTitle: string;
  75   params: any;
  76   // 获取数据loading
  77   isSpinning: boolean = false;
  78   loading: boolean = false;
  79
  80
  81   ngOnInit() { }
  82
  83   ngOnChanges() {
  84     if (this.showDetail) {
  85       this.isSpinning = true;
  86       this.getautidInfo();
  87     } else {
  88       this.isDisabled.map(item=>{
  89         item = true
  90       })
  91     }
  92   }
  93
  94   // used for picking some key-value pairs from a object.
  95   pick(obj, arr): Object {
  96     return arr.reduce((iter, val) => {
  97       if(val in obj) {
  98         iter[val] = obj[val];
  99       }
 100       return iter;
 101     }, {});
 102   }
 103
 104   getautidInfo(): void {
 105     this.http.getAuditInfo(this.taskId).subscribe( res => {
 106       const { result_header: { result_code, result_message } } = res;
 107       this.isSpinning = false;
 108       if (+result_code === 200) {
 109         const {
 110           business_demand_info,
 111           nst_info,
 112           nsi_nssi_info,
 113           ...checkInfo
 114         } = res.result_body;
 115         // 处理配置审核详情数据
 116         this.checkDetail = [{...checkInfo, 'service_snssai': business_demand_info.service_snssai}];
 117         // 业务需求信息数据
 118         business_demand_info.area = business_demand_info.coverage_area_ta_list.map(item => {
 119           item = item.split(';').join(' - ')
 120           return item
 121         })
 122         // 前端模拟数据
 123         let areaList = ["Haidian District;Beijing;Beijing", "Xicheng District;Beijing;Beijing", "Changping District;Beijing;Beijing"].map(item => {
 124           item = item.split(';').join(' - ')
 125           return item
 126         })
 127         this.businessRequirement = [{ ...business_demand_info, area: areaList }];
 128         // 匹配NST信息
 129         this.NSTinfo = [nst_info];
 130         // 共享切片实例
 131         this.selectedServiceId = nsi_nssi_info.suggest_nsi_id;
 132         this.selectedServiceName = nsi_nssi_info.suggest_nsi_name;
 133         // an/tn/cn 3 select box switches parameters of Matching Shared NSSI
 134         this.enableNSSISelectionList = [nsi_nssi_info.an_enableNSSISelection,nsi_nssi_info.tn_enableNSSISelection,nsi_nssi_info.cn_enableNSSISelection];
 135         if (!this.selectedServiceId || !this.selectedServiceName) {
 136           this.isDisabled.map((item,index)=>{
 137             this.isDisabled[index] = false
 138           })
 139         }
 140         this.isDisabled.map((item,index)=>{
 141           if(this.enableNSSISelectionList[index]){
 142             this.isDisabled[index] = false
 143           }
 144         })
 145         this.slicingInstances = {
 146           currentPage: '1',
 147           pageSize: '10',
 148           isLoading: false,
 149           total: 0,
 150           flag: false,
 151           list: [{
 152             service_instance_id: this.selectedServiceId,
 153             service_instance_name: this.selectedServiceName
 154           }]
 155         }
 156         // 子网实例
 157         let subnetData = this.pick(nsi_nssi_info, ['an_suggest_nssi_id', 'an_suggest_nssi_name', 'tn_suggest_nssi_id', 'tn_suggest_nssi_name', 'cn_suggest_nssi_id', 'cn_suggest_nssi_name']);
 158         this.subnetDataFormatting(subnetData, 0);
 159         // 前端模拟数据
 160         let area = ["Beijing;Beijing;Haidian District", "Beijing;Beijing;Xicheng District", "Beijing;Beijing;Changping District"];
 161         this.slicingSubnet[0].params = {...this.pick(nsi_nssi_info, [
 162                 'sliceProfile_AN_sNSSAI',
 163                 'sliceProfile_AN_resourceSharingLevel',
 164                 'sliceProfile_AN_uEMobilityLevel',
 165                 'an_latency',
 166                 'sliceProfile_AN_maxNumberofUEs',
 167                 'sliceProfile_AN_activityFactor',
 168                 'sliceProfile_AN_expDataRateDL',
 169                 'sliceProfile_AN_expDataRateUL',
 170                 'sliceProfile_AN_areaTrafficCapDL',
 171                 'sliceProfile_AN_areaTrafficCapUL',
 172                 'an_script_name',
 173                 'sliceProfile_AN_overallUserDensity',
 174                 'an_enableNSSISelection',
 175                 'sliceProfile_AN_maxNumberofPDUSession',
 176                 'sliceProfile_AN_ipAddress',
 177                 'sliceProfile_AN_logicInterfaceId',
 178                 'sliceProfile_AN_nextHopInfo'
 179             ]), an_coverage_area_ta_list: area};
 180         this.slicingSubnet[1].params = this.pick(nsi_nssi_info, ['tn_latency', 'tn_bandwidth', 'tn_script_name', 'sliceProfile_TN_jitte', 'sliceProfile_TN_sNSSAI',"tn_enableNSSISelection"]);
 181         this.slicingSubnet[2].params = {...this.pick(nsi_nssi_info, [
 182           'cn_service_snssai',
 183           'cn_resource_sharing_level',
 184           'cn_ue_mobility_level',
 185           'cn_latency',
 186           'cn_max_number_of_ues',
 187           'cn_activity_factor',
 188           'cn_exp_data_rate_dl',
 189           'cn_exp_data_rate_ul',
 190           'cn_area_traffic_cap_dl',
 191           'cn_area_traffic_cap_ul',
 192           'cn_script_name',
 193           'sliceProfile_CN_overallUserDensity',
 194           'cn_enableNSSISelection',
 195           'sliceProfile_CN_maxNumberofPDUSession',
 196           'sliceProfile_CN_logicInterfaceId',
 197           'sliceProfile_CN_ipAddress',
 198           'sliceProfile_CN_nextHopInfo'
 199         ])};
 200       } else {
 201         this.message.error(result_message || 'Failed to get data')
 202       }
 203     }, ({ status, statusText }) => {
 204       this.message.error(status + ' (' + statusText + ')');
 205       this.isSpinning = false;
 206     })
 207   }
 208
 209   openSlicingInstance(bool: boolean): void {
 210     const { total, currentPage, pageSize } = this.slicingInstances;
 211     if (bool && !total) {
 212       this.slicingInstances.list = [];
 213       this.getSlicingInstances(currentPage, pageSize)
 214     }
 215   }
 216
 217   getNextPageData(): void {
 218     const { total, currentPage, pageSize } = this.slicingInstances;
 219     if (total - (+currentPage * +pageSize) > 0) {
 220       if (this.slicingInstances.flag) return;
 221       this.slicingInstances.flag = true
 222       this.getSlicingInstances(currentPage, pageSize)
 223       this.slicingInstances.currentPage = (+this.slicingInstances.currentPage + 1).toString();
 224     }
 225   }
 226
 227   getSlicingInstances(pageNo: string, pageSize: string): void {
 228     this.slicingInstances.isLoading = true;
 229     this.http.getSlicingInstance(pageNo, pageSize).subscribe(res => {
 230       const { result_header: { result_code, result_message }, result_body } = res;
 231       setTimeout(() => {
 232         if (+result_code === 200) {
 233           const { nsi_service_instances, record_number } = result_body;
 234           this.slicingInstances.total = record_number;
 235           this.slicingInstances.list.push(...nsi_service_instances);
 236         } else {
 237           this.message.error(result_message || 'Failed to get slicing instance ID')
 238         }
 239         this.slicingInstances.isLoading = false;
 240         this.slicingInstances.flag = false;
 241       }, 2000)
 242     }, ({ status, statusText }) => {
 243       this.message.error(status + ' (' + statusText + ')');
 244       this.slicingInstances.isLoading = false;
 245       this.slicingInstances.flag = false;
 246     })
 247   }
 248
 249
 250   slicingInstanceChange(): void { // choose the target nssi
 251     this.isDisabled.map((item,index)=>{
 252       if (!this.enableNSSISelectionList[index]) {
 253         this.isDisabled[index] = true
 254       }
 255     })
 256     this.selectedServiceName = '';
 257     // 获取切片子网实例数据
 258     this.http.getSlicingSubnetInstance(this.selectedServiceId).subscribe(res => {
 259       const { result_header: { result_code, result_message }, result_body, record_number} = res;
 260       if (+result_code === 200) {
 261         this.subnetDataFormatting(result_body, record_number)
 262       } else {
 263         this.subnetDataFormatting({}, 1);
 264         this.message.error(result_message || 'Failed to get slicing subnet instance ID')
 265       }
 266     }, ({ status, statusText }) => {
 267       this.message.error(status + ' (' + statusText + ')');
 268     })
 269     this.slicingInstances.list.forEach(item => {
 270       if (item.service_instance_id === this.selectedServiceId) {
 271         this.selectedServiceName = item.service_instance_name;
 272       }
 273     })
 274   }
 275
 276   subnetDataFormatting ( subnetData?: any, total?: number): void{
 277     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 } = subnetData;
 278     this.slicingSubnet[0].slicingId = an_suggest_nssi_id;
 279     this.slicingSubnet[0].slicingName = an_suggest_nssi_name;
 280     this.slicingSubnet[0].total = total;
 281     this.slicingSubnet[0].currentPage = '1';
 282     this.slicingSubnet[0].instances = [{
 283       service_instance_id: an_suggest_nssi_id,
 284       service_instance_name: an_suggest_nssi_name
 285     }];
 286
 287     this.slicingSubnet[1].slicingId = tn_suggest_nssi_id;
 288     this.slicingSubnet[1].slicingName = tn_suggest_nssi_name;
 289     this.slicingSubnet[1].total = total;
 290     this.slicingSubnet[1].currentPage = '1';
 291     this.slicingSubnet[1].instances = [{
 292       service_instance_id: tn_suggest_nssi_id,
 293       service_instance_name: tn_suggest_nssi_name
 294     }];
 295
 296     this.slicingSubnet[2].slicingId = cn_suggest_nssi_id;
 297     this.slicingSubnet[2].slicingName = cn_suggest_nssi_name;
 298     this.slicingSubnet[2].total = total;
 299     this.slicingSubnet[2].currentPage = '1';
 300     this.slicingSubnet[2].instances = [{
 301       service_instance_id: cn_suggest_nssi_id,
 302       service_instance_name: cn_suggest_nssi_name
 303     }];
 304   }
 305
 306   resetSlicingInstance(): void {
 307     this.selectedServiceId = '';
 308     this.selectedServiceName = '';
 309     this.slicingSubnet.map(item => {
 310       item.slicingId = '';
 311       item.slicingName = '';
 312     })
 313     this.isDisabled.map((item,index)=>{
 314       this.isDisabled[index] = false
 315     })
 316   }
 317
 318   openSubnetInstances(bool: boolean, instance: any): void {
 319     if (bool && !instance.total) {
 320       instance.instances = []
 321       this.getSubnetInstances(instance)
 322     }
 323   }
 324
 325   getNextPageSubnet(instance: any): void {
 326     const { total, currentPage, pageSize } = instance;
 327     if (total - (+currentPage * +pageSize) > 0) {
 328       if (instance.flag) return;
 329       instance.flag = true;
 330       this.getSubnetInstances(instance);
 331       let count = +instance.currentPage;
 332       instance.currentPage = (++count).toString();
 333     }
 334   }
 335
 336   getSubnetInstances(instance: any): void {
 337     instance.isLoading = true;
 338     const { context, currentPage, pageSize } = instance;
 339     this.http.getSubnetInContext(context, currentPage, pageSize).subscribe(res => {
 340       const { result_header: { result_code, result_message }, result_body } = res;
 341       if (+result_code === 200) {
 342         const { nssi_service_instances, record_number } = result_body;
 343         this.slicingSubnet.map(item => {
 344           if (item.context === context) {
 345             item.total = record_number;
 346             item.instances.push(...nssi_service_instances);
 347           }
 348         })
 349       } else {
 350         this.message.error(result_message || 'Failed to get slicing subnet instance ID');
 351       }
 352       instance.isLoading = false;
 353       instance.flag = false;
 354     }, ({ status, statusText }) => {
 355       this.message.error(status + ' (' + statusText + ')');
 356       instance.isLoading = false;
 357       instance.flag = false;
 358     })
 359   }
 360
 361   slicingSubnetChange(instance: any): void {
 362     instance.slicingName = ''
 363     instance.instances.forEach(item => {
 364       if (instance.slicingId === item.service_instance_id) {
 365         instance.slicingName = item.service_instance_name;
 366       }
 367     })
 368   }
 369
 370   restSubnetInstance(instance: any): void {
 371     instance.slicingId = '';
 372     instance.slicingName = '';
 373   }
 374
 375   showParamsModel(item: any): void {
 376     this.isShowParams = true;
 377     this.paramsTitle = item.title;
 378     this.params = item.params
 379   }
 380
 381   changeParams(params: any): void {
 382     const index = this.paramsTitle === 'An' ? 0 : (this.paramsTitle === 'Tn' ? 1 : 2);
 383     this.slicingSubnet[index].params = params
 384   }
 385
 386   handleCancel(bool: boolean = false) {
 387     this.showDetail = false;
 388     this.cancel.emit({ showDetail: this.showDetail, bool });
 389   }
 390   handleOk() {
 391     this.loading = true;
 392     const { selectedServiceId, selectedServiceName, slicingSubnet, checkDetail, businessRequirement, NSTinfo } = this;
 393     const nsi_nssi_info: object = {
 394       suggest_nsi_id: selectedServiceId,
 395       suggest_nsi_name: selectedServiceName,
 396       an_suggest_nssi_id: slicingSubnet[0].slicingId,
 397       an_suggest_nssi_name: slicingSubnet[0].slicingName,
 398       ...slicingSubnet[0].params,
 399       tn_suggest_nssi_id: slicingSubnet[1].slicingId,
 400       tn_suggest_nssi_name: slicingSubnet[1].slicingName,
 401       ...slicingSubnet[1].params,
 402       cn_suggest_nssi_id: slicingSubnet[2].slicingId,
 403       cn_suggest_nssi_name: slicingSubnet[2].slicingName,
 404       ...slicingSubnet[2].params,
 405     }
 406     delete businessRequirement[0].area
 407     let reqBody = { ...checkDetail[0], business_demand_info: businessRequirement[0], nst_info: NSTinfo[0], nsi_nssi_info };
 408     delete reqBody.service_snssai;
 409     this.http.submitSlicing(reqBody).subscribe(res => {
 410       const { result_header: { result_code } } = res;
 411       if (+result_code === 200) {
 412         this.notification1.notificationSuccess('Task', 'Sumbit', this.taskId)
 413       } else {
 414         this.notification1.notificationFailed('Task', 'Sumbit', this.taskId)
 415       }
 416       this.loading = false;
 417       this.handleCancel(true);
 418     }, ({ status, statusText }) => {
 419       this.message.error(status + ' (' + statusText + ')');
 420       this.loading = false;
 421     })
 422   }
 423 }