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