portal-FE-common/src/app/pages/microservice-onboarding/microservice-add-details/microservice-add-details.component.html

   1 <!--
   2   ============LICENSE_START==========================================
   3   ONAP Portal
   4   ===================================================================
   5   Copyright (C) 2017 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 <div class="container">
  40   <form name="form" (ngSubmit)="f.form.valid && saveChanges()" #f="ngForm" novalidate autocomplete="off">
  41
  42     <!--Modal Headers-->
  43     <div class="modal-header">
  44       <h4 class="modal-title">Microservice Onboarding</h4>
  45       <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross')">
  46         <span aria-hidden="true">&times;</span>
  47       </button>
  48     </div>
  49
  50     <!--Modal Body goes here-->
  51     <div class="modal-body">
  52       <div id="microservices" class="microservice-add-details-model">
  53         <div class="microservice-properties-main">
  54             <div class="item required">
  55               <div class="item-label">Microservice Name</div>
  56               <input id="microservice-details-input-name" class="table-search-field"
  57                 type="text" name="name" #name="ngModel" ng-pattern="/^[\w -]*$/" maxlength="100"
  58                 [(ngModel)]="ms.name"
  59                 ng-change="microserviceAddDetails.updateServiceName()"
  60                 [ngClass]="{'is-invalid': f.submitted && name.invalid}" required />
  61
  62                 <div class="error-container" *ngIf="f.submitted && name.invalid">
  63                     <div class="error-container">
  64                       <small id="microservices-details-input-name-required" class="err-message">
  65                         Microservice Name is required
  66                       </small>
  67                     </div>
  68                 </div>
  69             </div>
  70
  71
  72             <div class="item required">
  73                 <div class="item-label">Microservice Description</div>
  74                   <textarea b2b-reset b2b-reset-textarea id="widgets-details-input-desc"
  75                     name="desc" [(ngModel)]="ms.desc" #desc="ngModel" class="microservice-desc"
  76                     ng-change="microserviceAddDetails.updateDesc()"
  77                     [ngClass]="{'is-invalid': f.submitted && desc.invalid}" required>
  78                   </textarea>
  79
  80                   <div class="error-container" *ngIf="f.submitted && desc.invalid">
  81                       <div class="error-container">
  82                         <small id="microservices-details-input-desc-required" class="err-message">
  83                           Microservice Description is required
  84                         </small>
  85                       </div>
  86                   </div>
  87             </div>
  88
  89             <div class="item required">
  90                 <div class="service-select">
  91                   <mat-form-field>
  92                     <mat-label>Applications Name</mat-label>
  93                     <mat-select name="microservice-details-application-select"
  94                        [(ngModel)]="ms.appId" #appId="ngModel" [(value)]="selected"
  95                        [ngClass]="{'is-invalid': f.submitted && appId.invalid}" required>
  96                       <mat-option *ngFor="let d of applicationList" [value]="d.value" >{{d.title}}</mat-option>
  97                     </mat-select>
  98                   </mat-form-field>
  99                 </div>
 100
 101                 <div class="error-container" *ngIf="f.submitted && appId.invalid">
 102                     <div class="error-container">
 103                       <small id="microservices-details-input-appid-required" class="err-message">
 104                           Please select microservice Application
 105                       </small>
 106                     </div>
 107                 </div>
 108             </div>
 109
 110             <div class="item required">
 111               <div class="item-label">Microservice Endpoint URL</div>
 112               <input id="microservice-details-input-endpoint-url"
 113                 [(ngModel)]="ms.url" #url="ngModel" ng-change="microserviceAddDetails.updateURL()" type="text"
 114                 name="url" maxlength="200" [ngClass]="{'is-invalid': f.submitted && url.invalid}" required />
 115
 116                 <div class="error-container" *ngIf="f.submitted && url.invalid">
 117                     <div class="error-container">
 118                       <small id="microservices-details-input-url-required" class="err-message">
 119                         Microservice Endpoint URL is required
 120                       </small>
 121                     </div>
 122                 </div>
 123             </div>
 124
 125             <div class="item">
 126               <div class="service-select">
 127                   <mat-form-field>
 128                     <mat-label>Security Type</mat-label>
 129                     <mat-select name="microservice-details-input-security-type" [(ngModel)]="ms.securityType" [(value)]="selected">
 130                       <mat-option *ngFor="let d of availableSecurityTypes" [value]="d.name" >{{d.name}}</mat-option>
 131                     </mat-select>
 132                   </mat-form-field>
 133               </div>
 134             </div>
 135
 136             <div class="item" *ngIf="ms.securityType == 'Basic Authentication'">
 137               <div class="item-label">Username</div>
 138               <input id="microservice-details-input-username" class="table-search-field"
 139                 type="text" name="username" maxlength="100"
 140                 [(ngModel)]="ms.username" />
 141             </div>
 142
 143             <div class="item" *ngIf="ms.securityType == 'Basic Authentication'">
 144               <div class="item-label">Password</div>
 145               <input id="microservice-details-input-password" class="table-search-field"
 146                 type="password" name="password" maxlength="100"
 147                 [(ngModel)]="ms.password" />
 148             </div>
 149
 150             <div class="item" *ngIf="isEditMode">
 151                 <div class="left-test-item">
 152                   <div class="item-label">Test Microservice</div>
 153                 </div>
 154                 <div class="right-test-item">
 155                   <div id="microservice-details-test-button" class="test-button"
 156                     (click)="testServiceURL()">Test</div>
 157                 </div>
 158             </div>
 159
 160             <div class="item" *ngIf="isEditMode">
 161                 <div class="item-label">JSON output</div>
 162                 <textarea id="microservice-details-input-json" class="json-field"
 163                   name="json"></textarea>
 164             </div>
 165
 166             <div class="add-para-item">
 167                 <div class="item-label add-label-left">Add User Parameter</div>
 168                 <div class="icon-primary-accordion-plus" (click)="addParameter()">
 169                     <i class="icon ion-ios-add-circle-outline"></i>
 170                 </div>
 171             </div>
 172
 173             <div class="item">
 174               <div class="param-label-item-left"
 175                 *ngIf="ms.parameterList.length > 0">
 176                 Parameter Key
 177               </div>
 178               <div class="para-label-item-right"
 179                 *ngIf="ms.parameterList.length > 0">
 180                 Parameter Default Value
 181               </div>
 182
 183               <div id="microservice-details-user-paramters" *ngFor="let parameter of ms.parameterList; let i=index">
 184                 <div class="param-item-left">
 185                         <input id="microservice-details-input-user-parameter-key"
 186                           class="table-search-field" type="text" name="param-key" maxlength="200"
 187                           [(ngModel)]="parameter.para_key" />
 188                         <input id="microservice-details-input-user-parameter-value"
 189                           class="table-search-fields" type="text" name="param-value"
 190                           maxlength="200" [(ngModel)]="parameter.para_value" />
 191                 </div>
 192
 193                 <div (click)="removeParamItem(parameter)">
 194                     <i class="icon ion-ios-remove-circle-outline"></i>
 195                 </div>
 196               </div>
 197
 198               <div class="microservice-property">
 199                   <mat-checkbox  name="active" type="checkbox" [(ngModel)]="ms.active"
 200                     id="microservices-checkbox-app-is-enabled" [checked]="ms.active">
 201                     Active
 202                   </mat-checkbox>
 203               </div>
 204             </div>
 205           </div>
 206       </div>
 207     </div>
 208     <!--Modal Footer goes Here-->
 209     <div class="modal-footer">
 210       <button type="submit" class="btn btn-primary">Save</button> &nbsp;
 211       <button type="button" class="btn btn-primary" (click)="activeModal.close('Close')">Cancel</button>
 212     </div>
 213   </form>
 214 </div>