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