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

   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 <div class="container">
  39         <!--Modal Headers-->
  40         <div class="modal-header">
  41                 <h4 class="modal-title">Application Details</h4>
  42                 <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
  43                         <span aria-hidden="true">&times;</span>
  44                 </button>
  45         </div>
  46         <!--Modal Body goes here-->
  47         <div class="modal-body">
  48                 <div class="application-details-modal">
  49                         <div class="app-properties-main" scroll-top="appDetails.scrollApi">
  50                                 <form name="appForm" novalidate autocomplete="off">
  51                                         <div id="app-left-container" class="left-container">
  52                                                 <!-- <div class="property-label checkbox-label">
  53                                                 <mat-checkbox  name="isRestrictedApp" type="checkbox" [(ngModel)]="applicationObj.restrictedApp"
  54                                                         id="checkbox-app-is-restricted" [disabled]="isEditMode" [checked]="applicationObj.restrictedApp">
  55                                                         Hyperlink only application
  56                                                 </mat-checkbox>
  57                                         </div> -->
  58
  59                                                 <div class="property required">
  60                                                         <div class="property-label" style="display: flex;">
  61                                                                 <span style="flex: 9">Application Name</span>
  62                                                                 <app-information-tooltip style="flex: 1;"
  63                                                                         [textMessage]="'Application Name Information'">
  64                                                                 </app-information-tooltip>
  65                                                         </div>
  66                                                         <input #applicationName id="input-app-name" type="text" [(ngModel)]="applicationObj.appName"
  67                                                                 maxlength="100" name="name" pattern="/^[a-zA-Z0-9_\-\s\&]*$/" required="true" />
  68
  69                                                         <div id="error-container-conflict" class="error-container"
  70                                                                 ng-show="appDetails.conflictMessages.name" id="conflictMessages-name">
  71                                                                 <small id="app-name-error-conflict" class="err-message"
  72                                                                         ng-bind="appDetails.conflictMessages.name">
  73                                                                 </small>
  74                                                         </div>
  75                                                 </div>
  76
  77                                                 <div id="property-active" class="property-active" style="display: flex;
  78                                                 justify-content: flex-end;margin-right: 16px;">
  79                                                         <mat-checkbox name="isEnabled" [(ngModel)]="applicationObj.isEnabled"
  80                                                                 [checked]="applicationObj.isEnabled" id="checkbox-app-is-enabled">Active
  81                                                         </mat-checkbox>
  82                                                 </div>
  83
  84                                                 <div class="property">
  85                                                         <div class="property-label" style="display: flex;">
  86                                                                 <mat-label style="flex: 9">Application Type</mat-label>
  87                                                                 <app-information-tooltip style="flex: 1;"
  88                                                                         [textMessage]="'Application Type Information - Gui, Hyperlink or Non-gui'">
  89                                                                 </app-information-tooltip>
  90                                                         </div>
  91                                                         <mat-select [disabled]="action === 'edit'" [(value)]="applicationObj.applicationType">
  92                                                                 <mat-option *ngFor="let appType of applicationTypeArray" [value]="appType.value">
  93                                                                         {{appType.name}}
  94                                                                 </mat-option>
  95                                                         </mat-select>
  96                                                 </div>
  97
  98                                                 <div class="property" *ngIf="applicationObj.applicationType == '1'">
  99                                                         <div class="property-label" style="display: flex;">
 100                                                                 <mat-label style="flex: 9">Mode of Integration</mat-label>
 101                                                                 <app-information-tooltip style="flex: 1;"
 102                                                                         [textMessage]="'Mode Of Integration. SDK or Framework'">
 103                                                                 </app-information-tooltip>
 104                                                         </div>
 105                                                         <mat-select [(value)]="applicationObj.modeOfIntegration">
 106                                                                 <mat-option *ngFor="let integrationType of modeOfIntegration"
 107                                                                         [value]="integrationType.value">
 108                                                                         {{integrationType.name}}
 109                                                                 </mat-option>
 110                                                         </mat-select>
 111                                                 </div>
 112
 113                                                 <div class="property" *ngIf="!(applicationObj.applicationType == '2')">
 114                                                         <div class="property-label" style="display: flex;">
 115                                                                 <mat-label style="flex: 9">Roles Management Type</mat-label>
 116                                                                 <app-information-tooltip style="flex: 1;" [textMessage]="'Roles Management Type'">
 117                                                                 </app-information-tooltip>
 118                                                         </div>
 119                                                         <mat-select [(value)]="applicationObj.rolesInAAF">
 120                                                                 <mat-option *ngFor="let roleRepo of rolesManagementType" [value]="roleRepo.value">
 121                                                                         {{roleRepo.name}}
 122                                                                 </mat-option>
 123                                                         </mat-select>
 124                                                 </div>
 125
 126                                                 <div *ngIf="!((applicationObj.applicationType=='2') || (!applicationObj.rolesInAAF))"
 127                                                         class="property-active" style="display: flex;">
 128                                                         <mat-checkbox style="flex: 9" name="appAck" [(ngModel)]="applicationObj.appAck">
 129                                                                 Notify App For AAF Operations
 130                                                         </mat-checkbox>
 131                                                         <app-information-tooltip style="flex: 1;"
 132                                                                 [textMessage]="'Notify application for AAF operations'">
 133                                                         </app-information-tooltip>
 134                                                 </div>
 135
 136                                                 <div class="property-active" *ngIf="!(applicationObj.applicationType == '2'
 137                                                 ||(!applicationObj.rolesInAAF))">
 138                                                         <mat-checkbox name="usesCadi" [(ngModel)]="applicationObj.usesCadi"
 139                                                                 [checked]="applicationObj.usesCadi">Is CADI Enabled?
 140                                                         </mat-checkbox>
 141                                                 </div>
 142
 143                                                 <div class="table-control" style="display: inline-flex;"
 144                                                         *ngIf="!(applicationObj.applicationType == '2' || !applicationObj.rolesInAAF)">
 145
 146                                                         <div [ngClass]="(applicationObj.rolesInAAF) ? 'property required' : 'property'"
 147                                                                 style="width: 250px;">
 148                                                                 <div id="pwd-property-label" class="property-label">AAF Namespace</div>
 149                                                                 <input type="text" id="input-mylogins-auth-namespace"
 150                                                                         [(ngModel)]="applicationObj.nameSpace" name="appAuthNameSpace" maxlength="256"
 151                                                                         [disabled]="!applicationObj.rolesInAAF" />
 152                                                         </div>
 153                                                         <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
 154
 155                                                                 <div b2b-flyout-toggler class="notification-div">
 156                                                                         <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
 157                                                                                 b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true"
 158                                                                                 role="button"></div>
 159                                                                 </div>
 160                                                                 <!--<div id="notification" align="left">
 161                                                                 <p class="nameSpace-text"  style="font: normal 12px Omnes-ECOMP-W02, Arial;">NameSpace should be created in AAF and portal mechid should be admin of the given namespace.</p>
 162                                                         </div>-->
 163                                                         </div>
 164                                                 </div>
 165
 166                                                 <div *ngIf="!(applicationObj.applicationType == '3')"
 167                                                         [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'">
 168                                                         <div class="property-label" style="display: flex;">
 169                                                                 <span style="flex: 9">Landing Page</span>
 170                                                                 <app-information-tooltip style="flex: 1;" [textMessage]="'Application URL Information'">
 171                                                                 </app-information-tooltip>
 172                                                         </div>
 173                                                         <input id="input-app-url" [(ngModel)]="applicationObj.landingPage" maxlength="256"
 174                                                                 name="url" type="url" placeholder="https://"
 175                                                                 pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i"
 176                                                                 required />
 177
 178                                                         <div id="error-container-edit" class="error-container"
 179                                                                 *ngIf="(applicationObj.isEnabled && applicationObj.landingPage=='')">
 180                                                                 <small id="app-name-error-required" class="err-message">
 181                                                                         Landing Page URL is required
 182                                                                 </small>
 183                                                         </div>
 184                                                 </div>
 185
 186                                                 <div [ngClass]="(applicationObj.isEnabled) ? 'property required' : 'property'"
 187                                                         *ngIf="!(applicationObj.applicationType == '2' || applicationObj.applicationType == '3')">
 188                                                         <div class="property-label" style="display: flex;">
 189                                                                 <span style="flex: 9">Rest API URL</span>
 190                                                                 <app-information-tooltip style="flex: 1;" [textMessage]="'Rest Api URL Information'">
 191                                                                 </app-information-tooltip>
 192                                                         </div>
 193                                                         <input id="input-app-rest-url" [(ngModel)]="applicationObj.restUrl" name="restUrl"
 194                                                                 type="url" placeholder="https://"
 195                                                                 pattern="/^((?:https?\:\/\/|ftp?\:\/\/)?(w{3}.)?(?:[-a-z0-9]+\.)*[-a-z0-9]+.*)[^-_.]$/i"
 196                                                                 maxlength="256" ng-required="applicationObj.applicationType == '1'" />
 197
 198                                                         <div id="error-container-edit" class="error-container"
 199                                                                 *ngIf="(applicationObj.isEnabled && applicationObj.restUrl=='')">
 200                                                                 <small id="app-name-error-required" class="err-message">
 201                                                                         Rest API URL is required
 202                                                                 </small>
 203                                                         </div>
 204                                                 </div>
 205
 206                                                 <div [ngClass]="(applicationObj.isEnabled || applicationObj.rolesInAAF) ? 'property required' : 'property'"
 207                                                         *ngIf="!(applicationObj.applicationType == '2')">
 208                                                         <div id="username-property-label" class="property-label" style="display: flex;">
 209                                                                 <span style="flex: 9">Auth Configured User</span>
 210                                                                 <app-information-tooltip style="flex: 1;"
 211                                                                         [textMessage]="'Basic Authentication Username Information'">
 212                                                                 </app-information-tooltip>
 213                                                         </div>
 214                                                         <input type="text" id="input-username-property"
 215                                                                 [(ngModel)]="applicationObj.appBasicAuthUsername" name="username" maxlength="256"
 216                                                                 ng-required="!appDetails.app.restrictedApp" />
 217
 218                                                         <div id="error-container-edit" class="error-container"
 219                                                                 *ngIf="((applicationObj.isEnabled || applicationObj.rolesInAAF) && applicationObj.appBasicAuthUsername =='')">
 220                                                                 <small id="app-name-error-required" class="err-message">
 221                                                                         App Username is required
 222                                                                 </small>
 223                                                         </div>
 224                                                 </div>
 225
 226                                                 <div [ngClass]="(applicationObj.isEnabled && !applicationObj.rolesInAAF) ? 'property required' : 'property'"
 227                                                         *ngIf="!(applicationObj.applicationType == '2' || (applicationObj.rolesInAAF && applicationObj.usesCadi))">
 228                                                         <div id="pwd-property-label" class="property-label" style="display: flex;">
 229                                                                 <span style="flex: 9">Basic Auth Password</span>
 230                                                                 <app-information-tooltip style="flex: 1;"
 231                                                                         [textMessage]="'Basic Authentication Password Information'">
 232                                                                 </app-information-tooltip>
 233                                                         </div>
 234                                                         <input type="password" id="input-mylogins-password"
 235                                                                 [(ngModel)]="applicationObj.appBasicAuthPassword" autocomplete="new-password"
 236                                                                 name="appPassword" maxlength="256" />
 237
 238                                                         <div id="error-container-edit" class="error-container"
 239                                                                 *ngIf="(applicationObj.isEnabled && !applicationObj.rolesInAAF && applicationObj.appBasicAuthPassword =='')">
 240                                                                 <small id="app-name-error-required" class="err-message">
 241                                                                         Password is required
 242                                                                 </small>
 243                                                         </div>
 244                                                 </div>
 245                                         </div>
 246
 247                                         <!-- Right container-->
 248                                         <div class="right-container">
 249
 250                                                 <div class="property" *ngIf="!(applicationObj.applicationType == '3')">
 251                                                         <div class="property-label" style="display: flex;">
 252                                                                 <span style="flex: 9">Upload
 253                                                                         Image</span>
 254                                                                 <app-information-tooltip style="flex: 1;"
 255                                                                         [textMessage]="'Image file(.png or.jpg or.jpeg with dimension 200X200 pixel) must be smaller than 1MB.'">
 256                                                                 </app-information-tooltip>
 257                                                         </div>
 258                                                         <input #inputAppImageUpload type="file" id="input-app-image-upload"
 259                                                                 class="input-file-field input-app-image-upload-ht" accept="image/*"
 260                                                                 [(ngModel)]="applicationObj.originalImage" name="appImage"
 261                                                                 image-upload="applicationObj.originalImage" image-upload-resize-max-height="300"
 262                                                                 image-upload-resize-max-width="360" image-upload-resize-quality="0.7"
 263                                                                 image-upload-api="appDetails.imageApi" (change)="appImageHandler($event)" />
 264
 265                                                         <div id="app-error-image-upload-type" class="error-container" *ngIf="appImageTypeError"
 266                                                                 class="ng-hide">
 267                                                                 <div class="error-container">
 268                                                                         <small id="error-app-invalid-image-size" class="err-message">File must be an
 269                                                                                 image</small>
 270                                                                 </div>
 271                                                         </div>
 272
 273                                                         <div id="app-error-image-upload" class="error-container"
 274                                                                 *ngIf="(applicationObj.originalImage && applicationObj.originalImage.dirty)">
 275                                                                 <div ng-messages="appForm.appImage.$error" class="error-container">
 276                                                                         <small id="error-app-invalid-image-size" class="err-message"
 277                                                                                 ng-message="imageSize">Image file must be smaller than
 278                                                                                 1MB</small>
 279                                                                 </div>
 280                                                         </div>
 281                                                 </div>
 282
 283
 284                                                 <div class="property" *ngIf="!(applicationObj.applicationType == '3')">
 285                                                         <div class="property-label preview">
 286                                                                 <span class="left-label">Preview</span>
 287                                                                 <span *ngIf="(applicationObj.imageLink && applicationObj.imageLink.indexOf('default_app_image.gif') == -1
 288                                                                 ||applicationObj.thumbnail && applicationObj.thumbnail.indexOf('default_app_image.gif') == -1
 289                                                                 ||emptyImgForPreview && emptyImgForPreview.indexOf('default_app_image.gif') == -1)"
 290                                                                 class="remove" (click)="removeImage()">Remove</span>
 291                                                         </div>
 292                                                         <img id="image-app-preview" class="image-preview"
 293                                                                 src="{{applicationObj.imageLink || applicationObj.thumbnail || emptyImgForPreview}}" />
 294                                                 </div>
 295
 296                                                 <div class="property" *ngIf="!(applicationObj.applicationType == '3')">
 297                                                         <div id="property-guest-access" class="property-guest-access">
 298                                                                 <mat-checkbox name="isOpen" [(ngModel)]="applicationObj.isOpen"
 299                                                                         id="checkbox-app-is-open"
 300                                                                         [checked]="(applicationObj.isOpen || applicationObj.applicationType == '2')"
 301                                                                         [disabled]="applicationObj.applicationType == '2'">Allow guest access
 302                                                                 </mat-checkbox>
 303                                                         </div>
 304                                                 </div>
 305
 306                                                 <div class="table-control" style="display: inline-flex;"
 307                                                         *ngIf="!(applicationObj.applicationType == '2')">
 308                                                         <div id="property-communication-key" class="property"
 309                                                                 *ngIf="!(applicationObj.applicationType == '2' || applicationObj.applicationType == '3')"
 310                                                                 style="width: 250px;">
 311                                                                 <div id="property-communication-key-label" class="property-label">Application
 312                                                                         UUID</div>
 313                                                                 <input type="text" id="input-UEB-communication-key" [(ngModel)]="applicationObj.uebKey"
 314                                                                         name="uebKey" readonly="readonly" [disabled]="true" />
 315                                                         </div>
 316
 317                                                         <div class="communitcaion-key" aria-haspopup="true" style="padding-left: 20px;">
 318                                                                 <div b2b-flyout-toggler class="notification-div">
 319                                                                         <div id="tooltip" class="icon-primary-flat-info" tabindex="0"
 320                                                                                 b2b-accessibility-click="13,32" aria-label="notifications" aria-haspopup="true"
 321                                                                                 role="button"></div>
 322                                                                 </div>
 323                                                                 <!--<div id="notification" align="left">
 324                                                                 <p class="uuid-text" style="font: normal 12px Omnes-ECOMP-W02, Arial;">Application UUID is used as a communication
 325                                                                 key between application and portal.Please place this value in
 326                                                                 portal.properties</p>
 327                                                         </div>-->
 328                                                         </div>
 329                                                 </div>
 330                                         </div>
 331                                 </form>
 332                         </div>
 333                 </div>
 334
 335                 <div class="modal-footer">
 336                         <button type="button" class="btn btn-primary"
 337                                 [disabled]="(!applicationObj.appName ||  applicationObj.appName.length == 0)"
 338                                 (click)="saveChanges()">Save</button> &nbsp;
 339                         <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
 340                 </div>
 341
 342         </div>
 343 </div>