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