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

   1 import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core';
   2 import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS , NexthopInfo_Options } from '@src/constants/constants';
   3 import { NzMessageService } from "ng-zorro-antd";
   4 import { stringify } from '@angular/core/src/util';
   5 import { Util } from '../../../../../../shared/utils/utils';
   6 import { SlicingTaskServices } from '@src/app/core/services/slicingTaskServices';
   7
   8
   9 @Component({
  10         selector: 'app-subnet-params-model',
  11         templateUrl: './subnet-params-model.component.html',
  12         styleUrls: ['./subnet-params-model.component.less']
  13 })
  14 export class SubnetParamsModelComponent implements OnInit {
  15
  16         @Input() showModel: boolean;
  17         @Input() detailData: any;
  18         @Input() title: string;
  19         @Output() cancel = new EventEmitter<boolean>();
  20         @Output() paramsDataChange = new EventEmitter<any>();
  21         @Output() noPassParaChange = new EventEmitter<any>();
  22
  23         transferFormItems: any[] = TRANSFRER_FORM_ITEMS;
  24         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
  25         formData: any;
  26         coreFormItems : any = [];
  27         areaList: any[] = [];
  28     // 2020.08.17  Add 3 parameters for Endpoint, Comment: The following code
  29     NexthopInfoOptions = NexthopInfo_Options;
  30         ANEndpointInputs: object = {};
  31         CNEndpointInputs: object = {};
  32         ANkeyList: string[] = [];
  33         CNkeyList: string[] = [];
  34         EndpointEnable: boolean = false;  // Whether to enable the three parameters of Endpoint
  35         keyList: string[] = []; // keys of endPoint
  36         specialParaTN: string[] = ['Resource Sharing Level', 'Connection Links', 'AN Endpoint', 'CN Endpoint'];
  37         // Parameters not passed to the back end
  38         notPassPara: string[] = ['tn_connection_links'];
  39         connectionLinkTable: any[] = [];
  40         connectionTableHeader: string[] = [];
  41         objectKeys = Object.keys;
  42     //  Comment: Above code
  43
  44         constructor(
  45                 private message: NzMessageService,
  46                 private Util: Util,
  47                 private http: SlicingTaskServices
  48                 ) {
  49                 }
  50
  51         ngOnInit() {
  52          }
  53
  54         ngOnChanges() {
  55                 if (this.title) {
  56                         this.formData = JSON.parse(JSON.stringify(this.detailData));
  57                         if (this.title === 'An' || this.title === 'Cn') {
  58                                 this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[];
  59                         }
  60                         else if (this.title === 'Tn') {
  61                                 this.getConnectionLinkTable();
  62                                 this.ANkeyList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options.map((val) => {return val.key})
  63                                 this.CNkeyList = this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).options.map((val) => {return val.key})
  64                                 this.keyList = this.ANkeyList.concat(this.CNkeyList)
  65                                 if (typeof this.formData !== 'undefined' && Object.keys(this.formData).length !== 0) {
  66                                         this.EndpointEnable = this.keyList.every((item) => {return this.formData.hasOwnProperty(item)})
  67                                 }
  68                                 if(this.EndpointEnable){
  69                                         this.ANEndpointInputs = this.Util.pick(this.formData, this.ANkeyList)
  70                                         this.CNEndpointInputs = this.Util.pick(this.formData, this.CNkeyList)
  71                                 } else {
  72                                         this.transferFormItems.map((item,index)=>{
  73                                                 if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
  74                                                         this.transferFormItems.splice(index,1)
  75                                                 }
  76                                         })
  77                                 }
  78                         }
  79                         // If the endpoint related parameters from the back end are incomplete, delete the endpoint item
  80                         //-------> Comment: Above code
  81                         if (this.title === 'An') {
  82                                         this.AreaFormatting();
  83                         }
  84                 }
  85         }
  86
  87         addCheckStatus () {
  88                 this.connectionLinkTable.forEach((item) => {
  89                         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']) {
  90                                 item.checked = true
  91                         } else {
  92                                 item.checked = false
  93                         }
  94                 })
  95         }
  96
  97         changeResourceShare () {
  98                 this.judgeTn()
  99         }
 100
 101         isObject (val) {
 102                 if (Object.prototype.toString.call(val) === '[object Object]') {
 103                         return true
 104                 } else {
 105                         return false
 106                 }
 107         }
 108
 109         getConnectionLinkTable (): void{
 110                 this.http.getConnectionLinkTable(this.getConnetionFailed).then ((res) => {
 111                         this.connectionLinkTable = res.result_body.connection_links_list
 112                         this.addCheckStatus() // add init check status for connection link table
 113                         this.judgeTn() // init judge
 114                         this.getTableHeader()
 115                 })
 116         }
 117
 118         getTableHeader (): void { // Find the common key of all data
 119                 let keyList :any[] = this.connectionLinkTable.map((item) => {
 120                         return Object.keys(item)
 121                 })
 122                 this.connectionTableHeader = this.Util.intersection(keyList).filter((item) => {
 123                         return item !== 'checked'
 124                 })
 125                 // Filter redundant items in table data
 126                 this.connectionLinkTable.forEach((item) => {
 127                         for (let key in item) {
 128                                 if (key !== 'linkId' && key !== 'checked' && this.connectionTableHeader.indexOf(key) === -1) {
 129                                         delete item[key]
 130                                 } else {
 131                                         // Filter out the null values in each item
 132                                         for (let i in item[key]) {
 133                                                 if (i === 'jitter' && (item[key][i] === '' || item[key][i] === 'null' || item[key][i] === null)) {
 134                                                         delete item[key][i]
 135                                                 }
 136                                         }
 137                                 }
 138                         }
 139                 })
 140         }
 141
 142         getConnetionFailed () {
 143                 console.log('failed')
 144         }
 145
 146         judgeTn (): void {
 147                 if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'non-shared') {
 148                         this.connectionLinkTable.forEach ((item) => {
 149                                 item.checked = false
 150                         })
 151                         this.formData['tn_connection_links'] = null
 152                         this.notPassPara = ['tn_connection_links']
 153                         this.transferFormItems.forEach((item) => {
 154                                 if (item.title === 'Connection Links') {
 155                                         item.disable = true
 156                                 } else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
 157                                         item.required = true
 158                                         item.disable = false
 159                                 }
 160                         })
 161                 } else if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'shared') {
 162                         this.transferFormItems.forEach((item) => {
 163                                 if (item.title === 'Connection Links') {
 164                                         item.disable = false
 165                                 } else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') {
 166                                         if (typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links'] !== null && this.formData['tn_connection_links'] !== '') {
 167                                                 item.disable = true
 168                                                 item.required = false
 169                                                 this.notPassPara = []
 170                                                 this.notPassPara = this.notPassPara.concat(this.ANkeyList, this.CNkeyList)
 171                                         } else { //:todo
 172                                                 this.formData['tn_connection_links'] = ''
 173                                                 item.disable = false
 174                                                 item.required = true
 175                                                 this.notPassPara = []
 176                                         }
 177                                 }
 178                         })
 179                 }
 180         }
 181
 182         validateEndPoint (key: string, value: any, required: boolean): string {
 183                 if (required) {
 184                         if (this.Util.isEmpty(value)) {
 185                                 return 'can not be empty';
 186                         }
 187                 }
 188                 if (key === 'ip_address') {
 189                         if (!this.regxpIP.test(value)) {
 190                                 if (value !== '') {
 191                                         return 'xxx.xxx.xxx.xxx';
 192                                 } else {
 193                                         return ''
 194                                 }
 195                         } else {
 196                                 return '';
 197                         }
 198                 } else if (key === 'logical_link') {
 199                         if (!this.Util.isInteger(value)){
 200                                 if (value !== ''){
 201                                         return 'integer only'
 202                                 } else {
 203                                         return ''
 204                                 }
 205                         } else {
 206                                 return ''
 207                         }
 208                 } else {
 209                         return '';
 210                 }
 211         }
 212
 213         changeLinkCheck (id: string) : void{ // update the selection state
 214                 this.connectionLinkTable.forEach((item) => {
 215                         if (item['linkId'] === id) {
 216                                 item.checked = true
 217                         } else {
 218                                 item.checked = false
 219                         }
 220                 })
 221                 this.formData['tn_connection_links'] = id //  get the selected id
 222                 this.judgeTn()
 223         }
 224
 225         AreaFormatting () {
 226                 let areaList = [...this.formData.an_coverage_area_ta_list];
 227                 this.areaList = areaList.map ( (item: any) => {
 228                         let arr = item.split(';');
 229                         item = arr.map( (ite, index) => {
 230                                 let key: string;
 231                                 if (!index) {
 232                                         key = 'province';
 233                                 } else if (index === 1){
 234                                         key = 'city'
 235                                 } else {
 236                                         key = 'district'
 237                                 }
 238                                 const obj: any = {};
 239                                 obj.key = key;
 240                                 obj.selected = ite
 241                                 obj.options = [{name: ite, id: ite}]
 242                                 return obj
 243                         })
 244                         return item;
 245                 })
 246         }
 247
 248         creatAreaList (): void {
 249                 let arr = [
 250                         {
 251                                 key: 'province',
 252                                 selected: '',
 253                                 options: []
 254                         },
 255                         {
 256                                 key: 'city',
 257                                 selected: '',
 258                                 options: []
 259                         },
 260                         {
 261                                 key: 'district',
 262                                 selected: '',
 263                                 options: []
 264                         }
 265                 ]
 266                 this.areaList.push(arr)
 267         }
 268
 269         deleteAreaList (index: number): void {
 270                 this.areaList.splice(index,1);
 271         }
 272
 273         handleChange(area: any[], areaItem: any): void{
 274                 if (areaItem.key === 'province' && areaItem.options.length <= 1) {
 275                         areaItem.options = ADDRESS;
 276                 } else if (areaItem.key === 'city' && areaItem.options.length <= 1) {
 277                         ADDRESS.forEach( item => {
 278                                 if(item.name === area[0].selected) {
 279                                         areaItem.options = item.city;
 280                                 }
 281                         })
 282                 }else if (areaItem.key === 'district' && areaItem.options.length <= 1) {
 283                         ADDRESS.forEach( (item: any) => {
 284                                 item.city.forEach(city => {
 285                                         if (city.name === area[1].selected) {
 286                                                 areaItem.options = city.county;
 287                                         }
 288                                 })
 289                         })
 290                 }
 291         }
 292
 293         handleChangeSelected(area: any[], areaItem: any) {
 294                 if (areaItem.key === 'province') {
 295                         area[1].selected = ''
 296                         area[1].options = [];
 297                         area[2].selected = '';
 298                         area[2].options = [];
 299                 } else if (areaItem.key === 'city') {
 300                         area[2].selected = '';
 301                         area[2].options = [];
 302                 }
 303         }
 304
 305         handleCancel() : void{
 306                 this.showModel = false
 307                 this.cancel.emit(this.showModel)
 308         }
 309
 310         // prompt text for each item of area_list
 311         checkArea (area: any) : string{
 312                 if (area.every((item) => {return item.selected === ''})) {
 313                         return 'empty';
 314                 }
 315                 if (area.some((item) => {return item.selected === ''})) {
 316                         return 'incomplete';
 317                 }
 318                 return '';
 319         }
 320
 321         // special handling for address
 322         areaCheckBeforeSubmit (target: object) : Boolean{
 323                 for (const prop in target) {
 324                         if (target.hasOwnProperty(prop)) {
 325                                 if (prop === 'an_coverage_area_ta_list' || prop ==='cn_coverage_area_ta_list') {
 326                                         // if the vlaue is "shanghai;shanghai;", the input is incomplete
 327                                         return target[prop].every((item) => {return this.Util.deepCheck(item.split(';'))});
 328                                 }
 329                         }
 330                 }
 331                 return true;
 332         }
 333
 334         endCheckBeforeSubmit (endpoint, required) : Array<any>{
 335                 // check params of Endpoint
 336                         let result: Array<any> = [true, ''];
 337                         let endPointList;
 338                         endPointList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options
 339                         let ipKey = '';
 340                         let logicalKey = '';
 341                         let nextKey = ''
 342                         for (let item of endPointList) {
 343                                 if (item.title === 'ip_address') {
 344                                         ipKey = item.key
 345                                 } else if (item.title === 'logical_link') {
 346                                         logicalKey = item.key
 347                                 } else if (item.title === 'nexthop_info') {
 348                                         nextKey = item.key
 349                                 }
 350                         }
 351                         for (let prop in endpoint) {
 352                                 if (prop === ipKey) {
 353                                         if (required) {
 354                                                 if (endpoint[prop] === '') {
 355                                                         result = [false, 'Endpoint can not be empty']
 356                                                 } else if (!this.regxpIP.test(endpoint[prop])) {
 357                                                         result = [false, 'Illegal IpAddress']
 358                                                 }
 359                                         } else if (!this.regxpIP.test(endpoint[prop]) && endpoint[prop] !== '') {
 360                                                 result = [false, 'Illegal IpAddress']
 361                                         }
 362                                 } else if (prop === logicalKey) {
 363                                         if (required) {
 364                                                 if (endpoint[prop] === '') {
 365                                                         result = [false, 'logical can not be empty']
 366                                                 } else if (!this.Util.isInteger(endpoint[prop])) {
 367                                                         result = [false, 'LogicalID can only be an integer']
 368                                                 }
 369                                         } else if (!this.Util.isInteger(endpoint[prop]) && endpoint[prop] !== '') {
 370                                                 result = [false, 'LogicalID can only be an integer']
 371                                         }
 372                                 } else if (prop === nextKey) {
 373                                         if (required && endpoint[prop] === '') {
 374                                                 result = [false, 'Endpoint can not be empty']
 375                                         }
 376                                 }
 377                         }
 378                         return result;
 379         }
 380
 381         inputHolder (title: string): string {
 382                 const titleArr = title.split(' ')
 383                 if (titleArr.length > 1) {
 384                         return titleArr.slice(0, 2).join('');
 385                 } else {
 386                         return title;
 387                 }
 388         }
 389
 390         labelStyle (required: boolean) : object{
 391                 let style;
 392                 if (!required) {
 393                         style = {'margin-left': '18px', 'margin-right': '-18px'};
 394                 } else {
 395                         style = {}
 396                 }
 397                 return style;
 398         }
 399
 400         handleOk(): void {
 401                 // Verify that items of EndPoint is correct
 402                 if (this.EndpointEnable) {
 403                         let endCheckResult = []
 404                         if (this.title === 'Tn') {
 405                                 const ANendCheckResult = this.endCheckBeforeSubmit(this.ANEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).required)
 406                                 const CNendCheckResult = this.endCheckBeforeSubmit(this.CNEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).required)
 407                                 if (ANendCheckResult[0] && CNendCheckResult[0]) {
 408                                         endCheckResult[0] = true
 409                                 } else {
 410                                         if (ANendCheckResult[0] === false) {
 411                                                 endCheckResult = ANendCheckResult
 412                                         } else {
 413                                                 endCheckResult = CNendCheckResult
 414                                         }
 415                                 }
 416                         }
 417                         if (!endCheckResult[0]) {
 418                                 this.message.error(endCheckResult[1].toString());
 419                                 return;
 420                         }
 421                         // replace the params about endPoint
 422                         for (let prop in this.formData) {
 423                                 if (this.title === 'Tn' && typeof this.ANEndpointInputs[prop] !== 'undefined') {
 424                                         this.formData[prop] = this.ANEndpointInputs[prop];
 425                                 } else if (this.title === 'Tn' && typeof this.CNEndpointInputs[prop] !== 'undefined') {
 426                                         this.formData[prop] = this.CNEndpointInputs[prop];
 427                                 }
 428                         }
 429                 }
 430                 let params: object;
 431                 if (this.title === 'An') {
 432                         const an_coverage_area_ta_list: string[] = [];
 433                         this.areaList.forEach( item => {
 434                                 let str: string = '';
 435                                 item.forEach( area => {
 436                                         str += area.selected + ';';
 437                                 })
 438                                 an_coverage_area_ta_list.push(str.substring(0, str.length-1));
 439                         })
 440                         params = {...this.formData, an_coverage_area_ta_list};
 441                 } else {
 442                         params = {...this.formData};
 443                 }
 444         // Verify that each item exclude endpoint is not empty, include special handeling of area_list
 445         let checkParams : object= params
 446         let requireKeyList :string[] = []
 447         let targetFormItems : any[] = []
 448         if (this.title === 'An' || this.title === 'Cn') {
 449             targetFormItems = this.coreFormItems
 450         } else if (this.title = 'Tn') {
 451             targetFormItems = this.transferFormItems
 452         }
 453         for (let item of targetFormItems) {
 454             if (typeof item.required !== 'undefined' && item.required) {
 455                 if (typeof item.type !== 'undefined' && item.type !== 'endpoint')
 456                     {
 457                         requireKeyList.push(item.key)
 458                     }
 459             }
 460         }
 461         checkParams = this.Util.pick(params, requireKeyList)
 462                 if (this.Util.deepCheck(checkParams) && this.areaCheckBeforeSubmit(params)) {
 463                         this.paramsDataChange.emit(params);
 464                         this.noPassParaChange.emit(this.notPassPara)
 465                         this.handleCancel();
 466                 } else {
 467                         this.message.error('Please complete the form');
 468                 }
 469         }
 470
 471 }