catalog-ui/src/app/view-models/forms/artifact-form/artifact-form-view.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15 -->
  16
  17 <ng1-modal modal="modalInstanceArtifact" type="classic" class="sdc-add-artifact" buttons="footerButtons" header="{{getFormTitle()}}" show-close-button="true" get-close-modal-response="close" data-tests-id="sdc-add-artifact">
  18
  19     <loader data-display="isLoading"></loader>
  20
  21     <div class="sdc-edit-artifact-form-container"
  22          data-ng-class="{'mandatory-artifact': (editArtifactResourceModel.artifactResource.mandatory && artifactType !=='deployment') || artifactType === 'api'}">
  23         <form novalidate class="w-sdc-form" name="forms.editForm">
  24
  25             <!--------------------- ARTIFACT FILE START-------------------->
  26             <div class="i-sdc-form-item">
  27                 <label class="required">Upload File</label>
  28                 <file-upload id="fileUploadElement"
  29                              form-element="forms.editForm"
  30                              element-required="{{::fileUploadRequired()}}"
  31                              element-name="myArtifactFile"
  32                              file-model="editArtifactResourceModel.artifactFile"
  33                              extensions="{{fileExtensions()}}"
  34                              element-disabled="{{!editArtifactResourceModel.artifactResource.artifactType}}"
  35                              data-ng-class="{'error': forms.editForm.myArtifactFile.$dirty && forms.editForm.myArtifactFile.$invalid}"></file-upload>
  36
  37                 <div class="input-error-file-upload" data-ng-show="forms.editForm.myArtifactFile.$dirty && forms.editForm.myArtifactFile.$invalid">
  38                     <span ng-show="forms.editForm.myArtifactFile.$error.required  || forms.editForm.myArtifactFile.$error.emptyFile" translate="ADD_ARTIFACT_ERROR_FILE_REQUIRED"></span>
  39                     <span ng-show="forms.editForm.myArtifactFile.$error.maxsize" translate="VALIDATION_ERROR_MAX_FILE_SIZE"></span>
  40                     <span ng-if="artifactType === 'deployment'" ng-show="forms.editForm.myArtifactFile.$error.filetype" translate="ADD_ARTIFACT_ERROR_VALID_EXTENSIONS" translate-values="{'extensions': '{{fileExtensions()}}' }"></span>
  41                     <span ng-show="forms.editForm.myArtifactFile.$error.emptyFile" translate="VALIDATION_ERROR_EMPTY_FILE"></span>
  42                 </div>
  43             </div>
  44             <!--------------------- ARTIFACT FILE END -------------------->
  45
  46             <div class="w-sdc-form-columns-wrapper">
  47
  48                 <div class="w-sdc-form-column" data-ng-if="artifactType === 'deployment' || (!editArtifactResourceModel.artifactResource.mandatory && artifactType !== 'api')">
  49
  50                     <div class="i-sdc-form-item"
  51                          data-ng-class="{error:(forms.editForm.artifactLabel.$dirty && forms.editForm.artifactLabel.$invalid)}"
  52                          data-ng-if="!isDeploymentHeat()">
  53                         <label class="i-sdc-form-label required">Artifact Label</label>
  54                         <input class="i-sdc-form-input"
  55                                data-ng-maxlength="25"
  56                                data-ng-model="editArtifactResourceModel.artifactResource.artifactLabel"
  57                                type="text"
  58                                name="artifactLabel"
  59                                data-required
  60                                data-ng-model-options="{ debounce: 200 }"
  61                                data-ng-pattern="labelValidationPattern"
  62                                maxlength="25"
  63                                data-ng-disabled="!isNew"
  64                                data-tests-id="artifactLabel"
  65                                autofocus/>
  66
  67                         <div class="input-error" data-ng-show="forms.editForm.artifactLabel.$dirty && forms.editForm.artifactLabel.$invalid">
  68                             <span ng-show="forms.editForm.artifactLabel.$error.required" translate="ADD_ARTIFACT_ERROR_LABEL_REQUIRED"></span>
  69                             <span ng-show="forms.editForm.artifactLabel.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
  70                             <span ng-show="forms.editForm.artifactLabel.$error.pattern" translate="VALIDATION_ERROR_SPECIAL_CHARS_NOT_ALLOWED"></span>
  71                         </div>
  72
  73                     </div>
  74
  75                     <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.type.$dirty && forms.editForm.type.$invalid)}">
  76                         <label class="i-sdc-form-label required">Type</label>
  77                         <select class="i-sdc-form-select"
  78                                 data-required
  79                                 name="type"
  80                                 data-ng-disabled="!isNew"
  81                                 data-ng-change="setDefaultTimeout()"
  82                                 data-ng-model="editArtifactResourceModel.artifactResource.artifactType"
  83                                 data-ng-options="type as type for type in editArtifactResourceModel.artifactTypes track by type | uppercase"
  84                                 data-tests-id="artifacttype">
  85                             <option value="">Choose Type</option>
  86                         </select>
  87
  88                         <div class="input-error" data-ng-show="forms.editForm.type.$dirty && forms.editForm.type.$invalid">
  89                             <span ng-show="forms.editForm.type.$error.required" translate="ADD_ARTIFACT_ERROR_TYPE_REQUIRED"></span>
  90                         </div>
  91
  92                     </div>
  93
  94                     <div class="i-sdc-form-item" data-ng-class="{error:(forms.editForm.timeout.$dirty && forms.editForm.timeout.$invalid)}" data-ng-if="isDeploymentHeat()">
  95                         <label class="i-sdc-form-label">Deployment Timeout (minutes)</label>
  96                         <input class="i-sdc-form-input"
  97                                data-ng-maxlength="25"
  98                                data-ng-model="editArtifactResourceModel.artifactResource.timeout"
  99                                type="number"
 100                                name="timeout"
 101                                min="1"
 102                                max="2147483647"
 103                                data-ng-disabled="'HEAT_ENV'==editArtifactResourceModel.artifactResource.artifactType"
 104                                data-ng-model-options="{ debounce: 200 }"
 105                                data-ng-pattern="integerValidationPattern"
 106                                data-ng-init="setDefaultTimeout()"
 107                                data-ng-change="setDefaultTimeout()"
 108                                maxlength="25"
 109                                data-tests-id="timeout" />
 110
 111                         <div class="input-error" data-ng-show="forms.editForm.timeout.$dirty && forms.editForm.timeout.$invalid">
 112                             <span ng-show="forms.editForm.timeout.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '25' }"></span>
 113                             <span ng-show="forms.editForm.timeout.$error.pattern" translate="ADD_ARTIFACT_ERROR_TIMEOUT_PATTERN"></span>
 114                             <span ng-show="forms.editForm.timeout.$error.min" translate="ADD_ARTIFACT_ERROR_TIMEOUT_MIN"></span>
 115                         </div>
 116
 117                     </div>
 118
 119                 </div><!-- w-sdc-form-column -->
 120
 121                 <div class="w-sdc-form-column i-sdc-form-url" data-ng-if="artifactType==='api'">
 122
 123                     <div class="i-sdc-form-item"
 124                          data-ng-class="{error:(forms.editForm.apiUrl.$dirty && forms.editForm.apiUrl.$invalid)}">
 125                         <label class="i-sdc-form-label required">URL</label>
 126                         <input class="i-sdc-form-input"
 127                                data-ng-maxlength="100"
 128                                data-ng-model="editArtifactResourceModel.artifactResource.apiUrl"
 129                                data-ng-model-options="{ debounce: 200 }"
 130                                type="url"
 131                                name="apiUrl"
 132                                data-required
 133                                ng-pattern="urlValidationPattern"
 134                                maxlength="100"
 135                                autofocus
 136                                invalid-characters=',#?&@$<>~^`\[]{}|")(*!+=;%' />
 137
 138                         <div class="input-error" data-ng-show="forms.editForm.apiUrl.$dirty && forms.editForm.apiUrl.$invalid">
 139                             <span ng-show="forms.editForm.apiUrl.$error.required" translate="ADD_ARTIFACT_ERROR_APIURL_REQUIRED"></span>
 140                             <span ng-show="forms.editForm.apiUrl.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '100' }"></span>
 141                             <span ng-show="forms.editForm.apiUrl.$error.url || forms.editForm.apiUrl.$error.pattern || forms.editForm.apiUrl.$error.invalidCharacters" translate="ADD_ARTIFACT_ERROR_APIURL_URL"></span>
 142                         </div>
 143
 144                     </div>
 145
 146                 </div><!-- w-sdc-form-column -->
 147
 148                 <div class="w-sdc-form-column">
 149
 150                     <div class="i-sdc-form-item"
 151                          data-ng-class="{error:(forms.editForm.description.$dirty && forms.editForm.description.$invalid)}">
 152                         <label class="i-sdc-form-label required">Description</label>
 153                         <textarea class="i-sdc-form-textarea"
 154                                   data-ng-maxlength="256"
 155                                   maxlength="256"
 156                                   data-required
 157                                   name="description"
 158                                   data-ng-model="editArtifactResourceModel.artifactResource.description"
 159                                   data-ng-model-options="{ debounce: 200 }"
 160                                   data-ng-pattern="commentValidationPattern"
 161                                   data-tests-id="description"></textarea>
 162
 163                         <div class="input-error" data-ng-show="forms.editForm.description.$dirty && forms.editForm.description.$invalid">
 164                             <span ng-show="forms.editForm.description.$error.required" translate="ADD_ARTIFACT_ERROR_DESCRIPTION_REQUIRED"></span>
 165                             <span ng-show="forms.editForm.description.$error.maxlength" translate="VALIDATION_ERROR_MAX_LENGTH" translate-values="{'max': '256' }"></span>
 166                             <span ng-show="forms.editForm.description.$error.pattern" translate="ADD_ARTIFACT_ERROR_DESCRIPTION_PATTERN"></span>
 167                         </div>
 168
 169                         <div class="w-sdc-form-column artifact-info" data-ng-show="!isNew && editArtifactResourceModel.artifactResource.esId">
 170                             UUID <span data-ng-bind="editArtifactResourceModel.artifactResource.artifactUUID"></span>
 171                             <br />
 172                             Version <span data-ng-bind="editArtifactResourceModel.artifactResource.artifactVersion"></span>
 173                         </div>
 174                     </div>
 175
 176                 </div><!-- w-sdc-form-column -->
 177
 178             </div><!-- w-sdc-form-columns-wrapper -->
 179
 180             <span class="w-sdc-form-note" data-ng-show="forms.editForm.$invalid && false" translate="LABEL_ALL_FIELDS_ARE_MANDATORY"></span>
 181
 182         </form>
 183     </div>
 184 </ng1-modal>
 185