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 } } = 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_coverage_area_ta_list,
 116           tn_latency,
 117           tn_bandwidth,
 118           cn_service_snssai,
 119           cn_resource_sharing_level,
 120           cn_ue_mobility_level,
 121           cn_latency,
 122           cn_max_number_of_ues,
 123           cn_activity_factor,
 124           cn_exp_data_rate_dl,
 125           cn_exp_data_rate_ul,
 126           cn_area_traffic_cap_dl,
 127           cn_area_traffic_cap_ul
 128         } = nsi_nssi_info;
 129         // 处理配置审核详情数据
 130         this.checkDetail = [{ task_id, task_name, create_time, processing_status, service_snssai }];
 131         // 业务需求信息数据
 132         business_demand_info.area = coverage_area_ta_list.map(item => {
 133           item = item.split(';').join(' - ')
 134           return item
 135         })
 136         // 前端模拟数据
 137         let areaList = ["北京;北京市;海淀区", "北京;北京市;西城区", "北京;北京市;昌平区"].map(item => {
 138           item = item.split(';').join(' - ')
 139           return item
 140         })
 141         this.businessRequirement = [{...business_demand_info, area: areaList}];
 142         // 匹配NST信息
 143         this.NSTinfo = [nst_info];
 144         // 共享切片实例
 145         this.selectedServiceId = suggest_nsi_id;
 146         this.selectedServiceName = suggest_nsi_name;
 147         this.slicingInstances = {
 148           currentPage: '1',
 149           pageSize: '10',
 150           isLoading: false,
 151           total: 0,
 152           flag: false,
 153           list: [{
 154             service_instance_id: this.selectedServiceId,
 155             service_instance_name: this.selectedServiceName
 156           }]
 157         }
 158         // 子网实例
 159         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};
 160         this.subnetDataFormatting(subnetData, 0);
 161         // 前端模拟数据
 162         let area = ["北京;北京市;海淀区", "北京;北京市;西城区", "北京;北京市;昌平区"]
 163         // this.slicingSubnet[0].params = { an_latency, an_5qi, an_coverage_area_ta_list }
 164         this.slicingSubnet[0].params = { an_latency, an_5qi, an_coverage_area_ta_list:area }
 165         this.slicingSubnet[1].params = { tn_latency, tn_bandwidth };
 166         this.slicingSubnet[2].params = {
 167           cn_service_snssai,
 168           cn_resource_sharing_level,
 169           cn_ue_mobility_level,
 170           cn_latency,
 171           cn_max_number_of_ues,
 172           cn_activity_factor,
 173           cn_exp_data_rate_dl,
 174           cn_exp_data_rate_ul,
 175           cn_area_traffic_cap_dl,
 176           cn_area_traffic_cap_ul
 177         };
 178       } else {
 179         this.message.error('Failed to get data')
 180       }
 181     },({status, statusText}) => {
 182                         this.message.error(status + ' (' + statusText + ')');
 183       this.isSpinning = false;
 184     })
 185   }
 186
 187   openSlicingInstance ( bool: boolean): void {
 188     const { total, currentPage, pageSize} = this.slicingInstances;
 189     if (bool && !total) {
 190       this.slicingInstances.list = [];
 191       this.getSlicingInstances(currentPage, pageSize)
 192     }
 193   }
 194
 195   getNextPageData ():void {
 196     const { total, currentPage, pageSize} = this.slicingInstances;
 197     if (total - (+currentPage * +pageSize) > 0 ) {
 198       if (this.slicingInstances.flag) return;
 199       this.slicingInstances.flag = true
 200       this.getSlicingInstances(currentPage, pageSize)
 201       this.slicingInstances.currentPage = (+this.slicingInstances.currentPage +1).toString();
 202     }
 203   }
 204
 205   getSlicingInstances(pageNo: string, pageSize: string): void {
 206     this.slicingInstances.isLoading = true;
 207     this.http.getSlicingInstance(pageNo, pageSize).subscribe ( res => {
 208       const { result_header: { result_code }, result_body } = res;
 209       setTimeout( () => {
 210         if (+result_code === 200) {
 211           const { nsi_service_instances, record_number } = result_body;
 212           this.slicingInstances.total = record_number;
 213           this.slicingInstances.list.push(...nsi_service_instances);
 214         } else {
 215           this.message.error('Failed to get slicing instance ID')
 216         }
 217         this.slicingInstances.isLoading = false;
 218         this.slicingInstances.flag = false;
 219       },2000)
 220     }, ({status, statusText}) => {
 221                         this.message.error(status + ' (' + statusText + ')');
 222       this.slicingInstances.isLoading = false;
 223       this.slicingInstances.flag = false;
 224     })
 225   }
 226
 227
 228   slicingInstanceChange ():void {
 229     this.isDisabled = true;
 230     this.selectedServiceName = ''
 231     // 获取切片子网实例数据
 232     this.http.getSlicingSubnetInstance(this.selectedServiceId).subscribe( res => {
 233       const { result_header: { result_code }, result_body, record_number} = res;
 234       if (+result_code === 200) {
 235         this.subnetDataFormatting(result_body, record_number)
 236       } else {
 237         this.message.error('Failed to get slicing subnet instance ID')
 238       }
 239     }, ({status, statusText}) => {
 240                         this.message.error(status + ' (' + statusText + ')');
 241     })
 242     this.slicingInstances.list.forEach (item => {
 243       if (item.service_instance_id === this.selectedServiceId) {
 244         this.selectedServiceName = item.service_instance_name;
 245       }
 246     })
 247   }
 248
 249   subnetDataFormatting ( subnetData: any, total: number): void{
 250     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;
 251     this.slicingSubnet[0].slicingId = an_suggest_nssi_id;
 252     this.slicingSubnet[0].slicingName = an_suggest_nssi_name;
 253     this.slicingSubnet[0].total = total;
 254     this.slicingSubnet[0].currentPage = '1';
 255     this.slicingSubnet[0].instances = [{
 256       service_instance_id: an_suggest_nssi_id,
 257       service_instance_name: an_suggest_nssi_name
 258     }];
 259
 260     this.slicingSubnet[1].slicingId = tn_suggest_nssi_id;
 261     this.slicingSubnet[1].slicingName = tn_suggest_nssi_name;
 262     this.slicingSubnet[1].total = total;
 263     this.slicingSubnet[1].currentPage = '1';
 264     this.slicingSubnet[1].instances =  [{
 265       service_instance_id: tn_suggest_nssi_id,
 266       service_instance_name: tn_suggest_nssi_name
 267     }];
 268
 269     this.slicingSubnet[2].slicingId = cn_suggest_nssi_id;
 270     this.slicingSubnet[2].slicingName = cn_suggest_nssi_name;
 271     this.slicingSubnet[2].total = total;
 272     this.slicingSubnet[2].currentPage = '1';
 273     this.slicingSubnet[2].instances = [{
 274       service_instance_id: cn_suggest_nssi_id,
 275       service_instance_name: cn_suggest_nssi_name
 276     }];
 277   }
 278
 279   resetSlicingInstance (): void {
 280     this.selectedServiceId = '';
 281     this.selectedServiceName = '';
 282     this.slicingSubnet.map( item => {
 283       item.slicingId = '';
 284       item.slicingName = '';
 285     })
 286     this.isDisabled = false;
 287   }
 288
 289   openSubnetInstances (bool: boolean, instance: any): void {
 290     if(bool && !instance.total) {
 291       instance.instances = []
 292       this.getSubnetInstances(instance)
 293     }
 294   }
 295
 296   getNextPageSubnet (instance: any): void{
 297     const { total, currentPage, pageSize} = instance;
 298     if(total - (+currentPage * +pageSize) > 0 ){
 299       if (instance.flag) return;
 300       instance.flag = true;
 301       this.getSubnetInstances(instance);
 302       let count = +instance.currentPage;
 303       instance.currentPage = (++count).toString();
 304     }
 305   }
 306
 307   getSubnetInstances (instance: any): void {
 308     instance.isLoading = true;
 309     const { context, currentPage, pageSize } = instance;
 310     this.http.getSubnetInContext(context, currentPage, pageSize).subscribe( res => {
 311       const { result_header: { result_code }, result_body } = res;
 312       if (+result_code === 200) {
 313         const { nssi_service_instances, record_number } = result_body;
 314         this.slicingSubnet.map (item => {
 315           if (item.context === context) {
 316             item.total = record_number;
 317             item.instances.push(...nssi_service_instances);
 318           }
 319         })
 320       } else {
 321         this.message.error('Failed to get slicing subnet instance ID');
 322       }
 323       instance.isLoading = false;
 324       instance.flag = false;
 325     }, ({status, statusText}) => {
 326                         this.message.error(status + ' (' + statusText + ')');
 327       instance.isLoading = false;
 328       instance.flag = false;
 329     })
 330   }
 331
 332   slicingSubnetChange (instance: any): void {
 333     instance.slicingName = ''
 334     instance.instances.forEach( item => {
 335       if (instance.slicingId === item.service_instance_id) {
 336         instance.slicingName = item.service_instance_name;
 337       }
 338     })
 339   }
 340
 341   restSubnetInstance (instance: any): void {
 342     instance.slicingId = '';
 343     instance.slicingName = '';
 344   }
 345
 346   showParamsModel (item: any): void {
 347     this.isShowParams = true;
 348     this.paramsTitle = item.title;
 349     this.params = item.params
 350   }
 351
 352   changeParams (params: any): void {
 353     const index = this.paramsTitle === 'An' ? 0 : (this.paramsTitle === 'Tn' ? 1 : 2);
 354     this.slicingSubnet[index].params = params
 355   }
 356
 357   handleCancel(bool: boolean = false) {
 358     this.showDetail = false;
 359     this.cancel.emit({showDetail: this.showDetail, bool});
 360   }
 361   handleOk() {
 362     this.loading = true;
 363     const { selectedServiceId, selectedServiceName, slicingSubnet, checkDetail, businessRequirement, NSTinfo } = this;
 364     const nsi_nssi_info: object = {
 365       suggest_nsi_id:  selectedServiceId,
 366       suggest_nsi_name: selectedServiceName,
 367       an_suggest_nssi_id: slicingSubnet[0].slicingId,
 368       an_suggest_nssi_name: slicingSubnet[0].slicingName,
 369       ...slicingSubnet[0].params,
 370       tn_suggest_nssi_id: slicingSubnet[1].slicingId,
 371       tn_suggest_nssi_name: slicingSubnet[1].slicingName,
 372       ...slicingSubnet[1].params,
 373       cn_suggest_nssi_id: slicingSubnet[2].slicingId,
 374       cn_suggest_nssi_name: slicingSubnet[2].slicingName,
 375       ...slicingSubnet[2].params,
 376     }
 377     delete businessRequirement[0].area
 378     let reqBody = {...checkDetail[0], business_demand_info: businessRequirement[0], nst_info: NSTinfo[0], nsi_nssi_info};
 379     delete reqBody.service_snssai;
 380     this.http.submitSlicing(reqBody).subscribe (res => {
 381       const { result_header: { result_code } } = res;
 382       if (+result_code === 200) {
 383         this.notification1.notificationSuccess('Task', 'Sumbit', this.taskId)
 384       } else {
 385         this.notification1.notificationFailed('Task', 'Sumbit', this.taskId)
 386       }
 387       this.loading = false;
 388       this.handleCancel(true);
 389     }, ({status, statusText}) => {
 390                         this.message.error(status + ' (' + statusText + ')');
 391       this.loading = false;
 392     })
 393   }
 394 }