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

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