portal-FE-os/src/app/pages/application-onboarding/application-details-dialog/application-details-dialog.component.ts

   1 /*-
   2  * ============LICENSE_START==========================================
   3  * ONAP Portal
   4  * ===================================================================
   5  * Copyright (C) 2019 AT&T Intellectual Property. All rights reserved.
   6  * ===================================================================
   7  *
   8  * Unless otherwise specified, all software contained herein is licensed
   9  * under the Apache License, Version 2.0 (the "License");
  10  * you may not use this software except in compliance with the License.
  11  * You may obtain a copy of the License at
  12  *
  13  *             http://www.apache.org/licenses/LICENSE-2.0
  14  *
  15  * Unless required by applicable law or agreed to in writing, software
  16  * distributed under the License is distributed on an "AS IS" BASIS,
  17  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  18  * See the License for the specific language governing permissions and
  19  * limitations under the License.
  20  *
  21  * Unless otherwise specified, all documentation contained herein is licensed
  22  * under the Creative Commons License, Attribution 4.0 Intl. (the "License");
  23  * you may not use this documentation except in compliance with the License.
  24  * You may obtain a copy of the License at
  25  *
  26  *             https://creativecommons.org/licenses/by/4.0/
  27  *
  28  * Unless required by applicable law or agreed to in writing, documentation
  29  * distributed under the License is distributed on an "AS IS" BASIS,
  30  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  31  * See the License for the specific language governing permissions and
  32  * limitations under the License.
  33  *
  34  * ============LICENSE_END============================================
  35  *
  36  *
  37  */
  38
  39 import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef, Inject, PLATFORM_ID, Injector } from '@angular/core';
  40 import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';
  41 import { IApplications } from 'src/app/shared/model/applications-onboarding/applications';
  42 import { ApplicationsService } from 'src/app/shared/services';
  43 import { ConfirmationModalComponent } from 'src/app/modals/confirmation-modal/confirmation-modal.component';
  44 import { InformationModalComponent } from 'src/app/modals/information-modal/information-modal.component';
  45 import { isPlatformBrowser } from '@angular/common';
  46
  47 @Component({
  48   selector: 'app-application-details-dialog',
  49   templateUrl: './application-details-dialog.component.html',
  50   styleUrls: ['./application-details-dialog.component.scss'],
  51 })
  52 export class ApplicationDetailsDialogComponent implements OnInit {
  53
  54   addEditAction: any;
  55   emptyImg = null;
  56   emptyImgForPreview:string;
  57   conflictMessages = {};
  58   result: any;
  59   isEditMode: boolean = false;
  60   appImageTypeError: boolean = false;
  61   isSaving: boolean = false;
  62   originalImage: any;
  63   ECOMP_URL_REGEX = "/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i";
  64   private ngbModal:NgbModal;
  65
  66   constructor(public activeModal: NgbActiveModal,
  67     public applicationsService : ApplicationsService,@Inject(PLATFORM_ID)private platformId:Object,private injector:Injector) {
  68       if(isPlatformBrowser(this.platformId))
  69       {
  70         this.ngbModal = this.injector.get(NgbModal);
  71       }
  72      }
  73
  74   @Input() applicationObj: IApplications;
  75   @Input() action: any;
  76   @Output() passEntry: EventEmitter<any> = new EventEmitter();
  77   @ViewChild('applicationName') applicationNameElement: ElementRef;
  78
  79   newAppModel = {
  80     'id': null,
  81     'appName': null,
  82     'imageUrl': null,
  83     'appDescription': null,
  84     'appNotes': null,
  85     'landingPage': null,
  86     'alternateUrl': null,
  87     'restUrl': null,
  88     'isOpen': false,
  89     'appBasicAuthUsername': null,
  90     'appBasicAuthPassword': null,
  91     'thumbnail': this.emptyImg,
  92     'isEnabled': false,
  93     'applicationType': null,
  94     'rolesInAAF': false,
  95     'nameSpace': null,
  96     'uebTopicName': null,
  97     'uebKey': null,
  98     'uebSecret': null,
  99     'imageLink': null,
 100     'usesCadi': true,
 101     'modeOfIntegration': null,
 102     'appAck': false,
 103     'restrictedApp': false
 104   };
 105
 106   applicationTypeArray: any[] = [
 107     { name: 'GUI Application', value: "1" },
 108     { name: 'HyperLink Application', value: "2" },
 109     { name: 'Non-GUI Application', value: "3" }
 110
 111   ];
 112
 113   rolesManagementType: any[] = [
 114     { name: 'Roles in Application (Non-Centralized)', value: false },
 115     { name: 'Roles in AAF (Centralized)', value: true }
 116   ];
 117
 118   modeOfIntegration: any[] = [
 119     { name: 'Portal SDK Based', value: 'sdk' },
 120     { name: 'Framework Based', value: 'fw' }
 121   ]
 122
 123   ngOnInit() {
 124
 125     this.addEditAction = this.action;
 126
 127
 128     if (this.action === 'add') {
 129       this.applicationObj.applicationType = "1";
 130       if (this.applicationObj.applicationType == '1') {
 131         this.applicationObj.modeOfIntegration = this.modeOfIntegration[0].value;
 132       }
 133       this.applicationObj.rolesInAAF = true;
 134       this.applicationObj.usesCadi = true;
 135       this.applicationObj.appAck = false;
 136       console.log("Action : ", this.action);
 137       console.log("Focus : ", this.applicationNameElement.nativeElement);
 138       setTimeout(() => { // this will make the execution after the above boolean has changed
 139         this.applicationNameElement.nativeElement.focus();
 140       }, 0);
 141     }
 142
 143     if (this.applicationObj.id) {
 144       this.isEditMode = true;
 145     }else{
 146       this.isEditMode = false;
 147     }
 148     //console.log("isEditMode :: ",this.isEditMode);
 149     this.originalImage = null
 150     this.emptyImgForPreview = '../../../assets/images/default_app_image.gif';
 151   }
 152
 153   appImageHandler(event: any){
 154     var reader = new FileReader();
 155     if(event.target.files && event.target.files[0]){
 156       reader.readAsDataURL(event.target.files[0]); // read file as data url
 157       var fileName = event.target.files[0].name;
 158       var validFormats = ['jpg', 'jpeg', 'bmp', 'gif', 'png'];
 159       //Get file extension
 160       var ext = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();
 161       //console.log("fileName::>>",fileName ,ext)
 162       //console.log("fileExtetion::>>",ext)
 163       //Check for valid format
 164       if(validFormats.indexOf(ext) == -1){
 165           this.newAppModel.thumbnail = this.emptyImg;
 166           this.originalImage = null;
 167           this.applicationObj.imageUrl = null;
 168           this.applicationObj.imageLink = null;
 169           this.applicationObj.thumbnail = null;
 170           if(!this.isEditMode){
 171             this.newAppModel.imageUrl = null;
 172             this.newAppModel.imageLink = null;
 173             this.newAppModel.thumbnail = null;
 174           }
 175           this.appImageTypeError=true;
 176       }else{
 177         reader.onload = (event: any) => { // called once readAsDataURL is completed
 178           this.applicationObj.imageLink = event.target.result;
 179           this.applicationObj.imageUrl = event.target.result;
 180           this.applicationObj.thumbnail = event.target.result;
 181           this.originalImage =  event.target.result;
 182           if(!this.isEditMode){
 183             this.newAppModel.imageLink = event.target.result;
 184             this.newAppModel.imageUrl = event.target.result;
 185             this.newAppModel.thumbnail = event.target.result;
 186             this.originalImage =  event.target.result;
 187           }
 188         }
 189       }
 190     }
 191   }
 192
 193   removeImage(){
 194     let confirmationMsg = 'Are you sure you want to remove the image?';
 195     this.openInformationModal("Confirmation",confirmationMsg).result.then((result) => {
 196       if (result === 'Ok') {
 197         //this.imageApi.clearFile();
 198         this.applicationObj.thumbnail = this.emptyImg;
 199         this.originalImage = null;
 200         this.applicationObj.imageUrl = null;
 201         this.applicationObj.imageLink = null;
 202         this.emptyImgForPreview = '../../../assets/images/default_app_image.gif';
 203       }
 204     }, (resut) => {
 205       return;
 206     })
 207   }
 208
 209   /** Add/Edit Application Method*/
 210   saveChanges() {
 211     //console.log("addNewApplication getting called..");
 212     if (this.applicationObj.rolesInAAF) {
 213       //if valid.
 214       if (this.applicationObj.applicationType == "1") {
 215         console.log("Gui Application valodations");
 216         //if valid.
 217         if (!this.applicationObj.isEnabled) {
 218           if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) || (this.applicationObj.nameSpace == 'undefined'
 219             || !this.applicationObj.nameSpace) || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername))) {
 220             this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized application');
 221             return;
 222           }
 223         }
 224         if (this.applicationObj.isEnabled) {
 225           if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName)
 226             || (this.applicationObj.landingPage == 'undefined' || !this.applicationObj.landingPage)
 227             || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername) || (this.applicationObj.nameSpace == 'undefined'
 228               || !this.applicationObj.nameSpace))) {
 229
 230             this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized active application');
 231             return;
 232           }
 233         }
 234       } else if (this.applicationObj.applicationType == "3") {
 235         console.log("Non-Gui Application valodations");
 236         if (!this.applicationObj.isEnabled) {
 237           if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) || (this.applicationObj.nameSpace == 'undefined'
 238             || !this.applicationObj.nameSpace) || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername))) {
 239             this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized application');
 240             return;
 241           }
 242         }
 243
 244         if (this.applicationObj.isEnabled) {
 245           if (((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName)
 246             || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername) || (this.applicationObj.nameSpace == 'undefined'
 247               || !this.applicationObj.nameSpace))) {
 248
 249             this.openConfirmationModal('', 'Please fill in all required fields(*) for centralized active application');
 250             return;
 251           }
 252         }
 253       }
 254     } else {
 255       console.log("Non-centralized applications validation");
 256       this.applicationObj.appAck = null;
 257       if (!this.applicationObj.isEnabled) {
 258         if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName)) {
 259           this.openConfirmationModal('', 'Please fill in all required field(*) ApplicationName to Save the applictaion');
 260           return;
 261         }
 262       } else if (this.applicationObj.isEnabled && (this.applicationObj.applicationType == "1")) {
 263         if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName)
 264           || (this.applicationObj.landingPage == 'undefined' || !this.applicationObj.landingPage)
 265           || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername) ||
 266           (this.applicationObj.appBasicAuthPassword == 'undefined' || !this.applicationObj.appBasicAuthPassword)) {
 267
 268           this.openConfirmationModal('', 'Please fill in all required fields(*) along with password as the app is not centralized');
 269           return;
 270         }
 271       } else if (this.applicationObj.isEnabled && (this.applicationObj.applicationType == "3")) {
 272         console.log("Non gui validation");
 273         if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName)
 274           || (this.applicationObj.appBasicAuthUsername == 'undefined' || !this.applicationObj.appBasicAuthUsername)) {
 275           this.openConfirmationModal('', 'Please fill in all required fields(*)');
 276           return;
 277         }
 278       } else if (this.applicationObj.isEnabled && (this.applicationObj.applicationType == "2")) {
 279         if ((this.applicationObj.appName == 'undefined' || !this.applicationObj.appName) || (this.applicationObj.landingPage == 'undefined'
 280           || !this.applicationObj.landingPage)) {
 281           this.openConfirmationModal('', 'Please fill in all required fields(*)');
 282           return;
 283         }
 284       }
 285     }
 286
 287     //URL Validation
 288     if (this.applicationObj.isEnabled && this.applicationObj.applicationType == "1") {
 289       if (this.applicationObj.landingPage && this.applicationObj.landingPage != 'undefined' && this.applicationObj.landingPage != '') {
 290         let isValidURL = this.isUrlValid(this.applicationObj.landingPage);
 291         if (!isValidURL) {
 292           this.openConfirmationModal('Error', 'Application URL must be a valid URL.');
 293           return;
 294         }
 295       } else {
 296         this.openConfirmationModal('Error', 'Application URL is required.');
 297         return;
 298       }
 299     }
 300
 301
 302     this.isSaving = true;
 303     // For a restricted app, null out all irrelevant fields
 304     if (this.applicationObj.applicationType == "2") {
 305       console.log("Hyperlinka pplication validation");
 306       this.newAppModel.restUrl = null;
 307       this.newAppModel.isOpen = true;
 308       this.newAppModel.appBasicAuthUsername = null;
 309       this.newAppModel.appBasicAuthPassword = null;
 310       this.newAppModel.uebTopicName = null;
 311       this.newAppModel.uebKey = null;
 312       this.newAppModel.uebSecret = null;
 313       this.newAppModel.restrictedApp = true;
 314
 315       /**Need to set below fields values based on input provided in the dialog */
 316       this.newAppModel.applicationType = this.applicationObj.applicationType;
 317       this.newAppModel.appName = this.applicationObj.appName;
 318       this.newAppModel.landingPage = this.applicationObj.landingPage;
 319       this.newAppModel.usesCadi = this.applicationObj.usesCadi;
 320       if (this.applicationObj.isEnabled) {
 321         this.newAppModel.isEnabled = this.applicationObj.isEnabled;
 322       }else{
 323         this.newAppModel.isEnabled = false;
 324       }
 325       console.log("New Model : ", this.newAppModel);
 326     } else {
 327
 328       /**Need to set below fields values based on input provided in the dialog */
 329       this.newAppModel.applicationType = this.applicationObj.applicationType;
 330       this.newAppModel.appName = this.applicationObj.appName;
 331       this.newAppModel.landingPage = this.applicationObj.landingPage;
 332       this.newAppModel.restUrl = this.applicationObj.restUrl;
 333       this.newAppModel.appBasicAuthUsername = this.applicationObj.appBasicAuthUsername;
 334       this.newAppModel.appBasicAuthPassword = this.applicationObj.appBasicAuthPassword;
 335       this.newAppModel.modeOfIntegration = this.applicationObj.modeOfIntegration;
 336       this.newAppModel.usesCadi = this.applicationObj.usesCadi;
 337       this.newAppModel.appAck = this.applicationObj.appAck;
 338
 339        if(this.applicationObj.isEnabled){
 340         this.newAppModel.isEnabled = this.applicationObj.isEnabled;
 341        }else{
 342         this.newAppModel.isEnabled = false;
 343        }
 344
 345        if(this.applicationObj.isOpen){
 346         this.newAppModel.isOpen = this.applicationObj.isOpen;
 347        }else{
 348         this.newAppModel.isOpen = false;
 349        }
 350        //console.log("this.applicationObj.isOpen",this.applicationObj.isOpen);
 351
 352       if (this.applicationObj.rolesInAAF) {
 353         this.newAppModel.rolesInAAF = this.applicationObj.rolesInAAF;
 354       } else {
 355         this.newAppModel.rolesInAAF = false;
 356         this.newAppModel.usesCadi = false;
 357       }
 358
 359     }
 360
 361     if (this.applicationObj.nameSpace=="") {
 362       this.newAppModel.nameSpace = null;
 363     }else{
 364       this.newAppModel.nameSpace = this.applicationObj.nameSpace;
 365     }
 366
 367     if (this.applicationObj.applicationType == "2" || this.applicationObj.applicationType == "3") {
 368       this.applicationObj.modeOfIntegration = null;
 369     }
 370
 371     if (this.newAppModel.applicationType == "2" || this.newAppModel.applicationType == "3") {
 372       this.newAppModel.modeOfIntegration = null;
 373     }
 374
 375     if (this.isEditMode) {
 376       console.log("Edit application Object : ", JSON.stringify(this.applicationObj));
 377       console.log("Mode Of iNtegration : ", this.applicationObj.modeOfIntegration);
 378       this.applicationsService.updateOnboardingApp(this.applicationObj)
 379         .subscribe( _data => {
 380           this.result = _data;
 381           //console.log("update application response :: ",this.result);
 382           if(this.result !=null && this.result.httpStatusCode ==200){
 383             this.passEntry.emit(this.result);
 384             this.ngbModal.dismissAll();
 385           }else{
 386             this.openConfirmationModal('Error','There was a problem updating the application changes. Please try again. If the problem persists, then try again later. Error: '+this.result);
 387             return
 388           }
 389         }, error => {
 390           console.log(error);
 391           if(error.status == 409){
 392             this.openConfirmationModal('Error', 'There was a problem updating the application changes. ' +
 393             'The Application Name and Namespace should  be unique.  Error: ' +
 394             error.status);
 395             return;
 396           }else if(error.status == 500){
 397             this.openConfirmationModal('Error', 'There was a problem updating the application information. ' +
 398             'Please try again later. Error: ' +error.status);
 399             return;
 400           }else if(error.status == 404 || error.status == 403){
 401             this.openConfirmationModal('Error', 'There was a problem updating the application information. ' +
 402             'Invalid namespace. Error: ' +error.status);
 403             return;
 404           }else if(error.status == 401){
 405             this.openConfirmationModal('Error', 'There was a problem updating the application information. ' +
 406             'Portal Mechid is unauthorized to access the given namespace. Error: ' +error.status);
 407             return;
 408           }else if(error.status == 400){
 409             this.openConfirmationModal('Error','Bad Request Error: ' + error.status);
 410             return;
 411           } else{
 412             this.openConfirmationModal('Error', 'There was a problem updating the application changes. ' +
 413             'Please try again. If the problem persists, then try again later. Error: ' +
 414             error.status);
 415             return;
 416           }
 417       });
 418
 419     }else{
 420       //console.log("Coming inside add application",this.newAppModel);
 421
 422       this.applicationsService.addOnboardingApp(this.newAppModel)
 423         .subscribe( _data => {
 424           this.result = _data;
 425           //console.log("Add application response :: ",this.result);
 426           if(this.result !=null && this.result.httpStatusCode ==200){
 427             this.passEntry.emit(this.result);
 428             this.ngbModal.dismissAll();
 429           }else{
 430             this.openConfirmationModal('Error','There was a problem adding the application changes. Please try again. If the problem persists, then try again later. Error: '+this.result);
 431             return
 432           }
 433         }, error => {
 434           console.log(error);
 435           if(error.status == 409){
 436             this.openConfirmationModal('Error', 'There was a problem adding the application changes. ' +
 437             'The Application Name and URL should  be unique.  Error: ' +
 438             error.status);
 439             return;
 440           } else if(error.status == 500){
 441             this.openConfirmationModal('Error', 'There was a problem adding the application information. ' +
 442             'Please try again later. Error: ' +error.status);
 443             return;
 444           }else if(error.status == 400){
 445             this.openConfirmationModal('Error','Bad Request Error: ' + error.status);
 446             return;
 447           } else{
 448             this.openConfirmationModal('Error', 'There was a problem adding the application changes. ' +
 449             'Please try again. If the problem persists, then try again later. Error: ' +
 450             error.status);
 451             return;
 452           }
 453       });
 454     }
 455   }
 456
 457   isUrlValid(userInput){
 458     //let  regexQuery = "/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i";
 459     let  regexQuery = "https?://.+";
 460     let res = userInput.match(regexQuery);
 461     if(res == null){
 462       return false;
 463     }else{
 464       return true;
 465     }
 466   }
 467
 468   openConfirmationModal(_title: string, _message: string) {
 469     const modalInfoRef = this.ngbModal.open(ConfirmationModalComponent);
 470     modalInfoRef.componentInstance.title = _title;
 471     modalInfoRef.componentInstance.message = _message;
 472   }
 473
 474   openInformationModal(_title: string, _message: string){
 475     const modalInfoRef = this.ngbModal.open(InformationModalComponent);
 476     modalInfoRef.componentInstance.title = _title;
 477     modalInfoRef.componentInstance.message = _message;
 478     return modalInfoRef;
 479   }
 480 }