gerrit.onap Code Review - vid.git/blob

   1 <!--
   2   ============LICENSE_START=======================================================
   3   VID
   4   ================================================================================
   5   Copyright (C) 2017 - 2019 AT&T Intellectual Property. All rights reserved.
   6   ================================================================================
   7   Licensed under the Apache License, Version 2.0 (the "License");
   8   you may not use this file except in compliance with the License.
   9   You may obtain a copy of the License at
  10
  11        http://www.apache.org/licenses/LICENSE-2.0
  12
  13   Unless required by applicable law or agreed to in writing, software
  14   distributed under the License is distributed on an "AS IS" BASIS,
  15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16   See the License for the specific language governing permissions and
  17   limitations under the License.
  18   ============LICENSE_END=========================================================
  19   -->
  20
  21 <link rel="stylesheet" type="text/css" href="app/vid/styles/modal-create-new.css"/>
  22 <div class="modal-header">
  23     <h3 class="modal-title" id="modal-title">New VNF Change</h3>
  24     <span ng-click="vm.close()" class="pull-right modal-close" aria-hidden="true">&times;</span>
  25     <div ng-if="vm.errorMsg!==''" style="max-height: 150px; overflow: auto;" data-tests-id="error-message"><font color='red'>{{vm.errorMsg.message}}</font></div>
  26 </div>
  27 <form class="form-create" data-tests-id="newChangeManagementForm" name="newChangeManagement"
  28       ng-submit="vm.openModal();vm.close();" novalidate>
  29     <div class="modal-body step1" ng-show="vm.wizardStep === 1">
  30
  31         <div class="form-group">
  32             <label class="control-label">Subscriber</label>
  33             <select class="form-control" ng-model="vm.changeManagement.subscriberId" ng-change="vm.loadServiceTypes()"
  34                     name="subscriber" id="subscriber" data-tests-id="subscriberName" required>
  35                 <option value="" disabled>Select subscriber</option>
  36                 <option data-tests-id="subscriberNameOption" class="subscriberNameOption"
  37                         ng-repeat="item in vm.subscribers" ng-value="item['global-customer-id']"
  38                         ng-disabled="!(item['is-permitted'])">{{item['subscriber-name']}}
  39                 </option>
  40             </select>
  41         </div>
  42
  43         <div class="form-group">
  44             <label class="control-label">Service type</label>
  45             <select class="form-control" ng-model="vm.changeManagement.serviceType"
  46                     ng-change="vm.serviceTypeChanged()"
  47                     name="serviceType" id="serviceType"
  48                     ng-options="item['service-type'] disable when !(item['is-permitted']) for item in vm.serviceTypes"
  49                     required data-ng-disabled="newChangeManagement.subscriber.$pristine"
  50                     data-tests-id="serviceType">
  51                 <option value="" disabled>Select service type</option>
  52             </select>
  53         </div>
  54
  55
  56         <div ng-if="!isNewFilterChangeManagmentEnabled()">
  57
  58             <div class="form-group">
  59                 <label class="control-label">NF Role</label>
  60                 <select class="form-control" ng-model="vm.changeManagement.vnfType" ng-change="vm.loadVNFVersions()"
  61                         name="vnfType" id="vnfType" ng-options="item for item in vm.vnfTypes" required
  62                         data-ng-disabled="newChangeManagement.serviceType.$pristine">
  63                     <option value="" disabled>NF Role</option>
  64                 </select>
  65             </div>
  66
  67         </div>
  68
  69
  70         <div ng-if="isNewFilterChangeManagmentEnabled()">
  71
  72             <div class="form-group form-row">
  73                 <div class="col nf-role-input">
  74                     <label class="control-label">NF Role</label>
  75                     <input class="form-control" ng-model="vm.changeManagement.vnfType"
  76                            name="vnfType" id="vnfTypeInput" data-tests-id="vnfType"
  77                            data-ng-disabled="newChangeManagement.serviceType.$pristine">
  78                 </div>
  79
  80                 <div class="col nf-role-input">
  81                     <label class="control-label">Cloud Region</label>
  82                     <select name="cloud-region" class="form-control" ng-model="vm.changeManagement.cloudRegion"
  83                             name="vnfType" id="cloudRegion"
  84                             data-ng-disabled="newChangeManagement.serviceType.$pristine">
  85                         <option value="" disabled>select cloud Region</option>
  86                         <option ng-repeat="option in cloudRegionList" value="{{option.cloudRegionOptionId}}"
  87                                 data-ng-if="option.isPermitted && !isFeatureFlagCloudOwner">{{option.cloudRegionId}}
  88                         </option>
  89                         <option ng-repeat="option in cloudRegionList" value="{{option.cloudRegionOptionId}}"
  90                                 data-ng-if="option.isPermitted && isFeatureFlagCloudOwner">
  91                             {{option.cloudRegionId}} ({{removeVendorFromCloudOwner(option.cloudOwner).toUpperCase()}})
  92                         </option>
  93                     </select>
  94                 </div>
  95
  96                 <div class="col">
  97                     <button class="btn btn-primary search-vnf" type="button" id="searchVNF" name="searchVNFs"
  98                             ng-click="vm.searchVNFs()"
  99                             ng-disabled="newChangeManagement.subscriber.$pristine || newChangeManagement.serviceType.$pristine"
 100                             data-tests-id="searchVNFs">
 101                         Search VNFs
 102                     </button>
 103                 </div>
 104             </div>
 105         </div>
 106
 107
 108         <div class="form-group">
 109             <label class="control-label">Source VNF Model Version</label>
 110             <select class="form-control" ng-model="vm.changeManagement.fromVNFVersion" ng-change="vm.loadVNFNames()"
 111                     name="fromVNFVersion" id="fromVNFVersion"
 112                     ng-options="item.key as item.value for item in vm.fromVNFVersions" required
 113                     data-ng-disabled="vm.isDisabledVNFmodelVersion(newChangeManagement.vnfType.$pristine); ">
 114                 <option value="" disabled>Select VNF Model Version</option>
 115             </select>
 116         </div>
 117
 118
 119         <div class="form-group">
 120             <label class="control-label">Available VNF</label>
 121             <multiselect ng-model="vm.changeManagement.vnfNames" ng-change="vm.loadWorkFlows()" name="vnfName"
 122                          id="vnfName" options="vm.vnfNames" display-prop="name" id-prop="id" required
 123                          data-ng-disabled="newChangeManagement.fromVNFVersion.$pristine"></multiselect>
 124         </div>
 125         <div ng-show="vm.changeManagement.vnfNames && vm.changeManagement.vnfNames.length > 0"
 126              class="form-group vnf-versions-container">
 127             <table class="table table-bordered">
 128                 <tbody>
 129                 <tr ng-repeat="vnfName in vm.changeManagement.vnfNames">
 130                     <td class="col-md-2"><span class="vnf-versions-name">{{vnfName.name}}</span></td>
 131                     <td class="col-md-2">
 132                         <select ng-model="vnfName.version" ng-change="vm.selectVersionForVNFName(vnfName)"
 133                                 class="vnf-versions-select-as-text"
 134                                 id="{{vnfName['invariant-id']}}-target-version-select">
 135                             <option value="" disabled="" selected="selected">Select Target VNF Model Version</option>
 136                             <option ng-repeat="version in vnfName.availableVersions">
 137                                 {{version.modelInfo.modelVersion}}
 138                             </option>
 139                         </select>
 140                     </td>
 141                     <td class="col-md-1 vnf-versions-file">
 142                         <input ng-model="vnfName.filePath"
 143                                onchange="angular.element(this).scope().selectFileForVNFName(this)" type="file"
 144                                id="{{vnfName['invariant-id']}}" class="vnf-files-select"/>
 145                         <span class="vnf-versions-file">Select File<span class="caret"></span></span></td>
 146                 </tr>
 147                 </tbody>
 148             </table>
 149         </div>
 150         <div class="form-group">
 151             <label class="control-label">Workflow</label>
 152             <select class="form-control" ng-model="vm.changeManagement.workflow" name="workflow" id="workflow"
 153                     ng-options="item for item in vm.workflows" required
 154                     data-ng-disabled="newChangeManagement.vnfName.$pristine">
 155                 <option value="" disabled>Select workflow</option>
 156             </select>
 157         </div>
 158
 159         <div class="form-group" ng-if="vm.changeManagement.workflow"
 160              ng-repeat="item in vm.getInternalWorkFlowParameters(vm.changeManagement.workflow, 'FILE')">
 161             <label class="control-label">{{item.displayName}}</label>
 162             <div class="file-wrapper">
 163                 <input id="{{vm.getIdFor('file',item)}}" ng-change="vm.onChange(item)" class="file-input"
 164                        type="file" ngf-select ng-model="item.file" ngf-validate-async-fn="vm.uploadConfigFile($file, item)"
 165                        ng-attr-name="{{'internal-workflow-parameter-file-name-' + item.id}}"
 166                        accept="{{item.acceptableFileType}}" ngf-pattern="{{item.acceptableFileType}}"
 167                        ng-required="{{item.required}}"/>
 168                 <label id="{{vm.getIdFor('file',item)}}-label" class="file-input-label">
 169                     {{item.file&&item.file.name||"Select File"}} </label>
 170                 <label ng-attr-for="{{vm.getIdFor('file',item)}}"><span class="icon-browse"></span></label>
 171             </div>
 172             <label id="errorLabel" class="icon-alert error"
 173                    ng-if="vm.hasPatternError(newChangeManagement, 'internal-workflow-parameter-file-name-' + item.id)">{{item.msgOnPatternError}}</label>
 174             <label id="errorContentLabel" class="icon-alert error"
 175                    ng-if="vm.hasAsyncFnError(newChangeManagement, 'internal-workflow-parameter-file-name-' + item.id)">{{item.msgOnContentError}}</label>
 176         </div>
 177
 178         <div class="form-group" ng-if="vm.changeManagement.workflow"
 179              ng-repeat="item in vm.getInternalWorkFlowParameters(vm.changeManagement.workflow, 'text')">
 180             <label ng-attr-for="{{vm.getIdFor('text',item)}}" class="control-label">{{item.displayName}}</label>
 181             <input ng-model="item.value" type="text" id="{{vm.getIdFor('text',item)}}"
 182                    pattern="{{item.pattern}}" ng-required="{{item.required}}">
 183         </div>
 184
 185         <div class="form-group" ng-if="vm.changeManagement.workflow"
 186              ng-repeat="item in vm.getRemoteWorkFlowParameters(vm.changeManagement.workflow)">
 187             <label for="so-workflow-parameter-{{item.id}}" class="control-label">{{item.name}}</label>
 188             <input ng-model="item.value" type="text" id="so-workflow-parameter-{{item.id}}" pattern="{{item.pattern}}"
 189                    maxlength="{{item.maxLength}}" ng-required="{{item.required}}" soFieldName="{{item.soFieldName}}">
 190         </div>
 191     </div>
 192
 193     <div class="modal-body step2 scale-out-modules" ng-if="vm.wizardStep === 2">
 194
 195         <div class="table-header table-row">
 196             <div></div>
 197             <div>Service Instance Name</div>
 198             <div>VNF Instance Name</div>
 199             <div>Model V</div>
 200             <div>Category</div>
 201             <div>UUID</div>
 202             <div>Invariant UUID</div>
 203         </div>
 204
 205         <div class="table-row" ng-repeat-start="vnf in vm.changeManagement.vnfNames"
 206              ng-click="vnf.isOpen=!!!vnf.isOpen">
 207             <div>{{vnf.isOpen ? '-' : '+'}}</div>
 208             <div>{{vnf['service-instance-node'][0].properties['service-instance-name']}}</div>
 209             <div>{{vnf.name}}</div>
 210             <div>{{vnf['availableVersions'][0].modelInfo.modelVersion}}</div>
 211             <div>{{vnf.category}}</div>
 212             <div>{{vnf.modelVersionId}}</div>
 213             <div>{{vnf['invariant-id']}}</div>
 214         </div>
 215         <div class="modules-table" ng-repeat-end="" ng-class="{'open' :vnf.isOpen}">
 216             <div class="table-header table-row">
 217                 <div>VF Module</div>
 218                 <div>In Service</div>
 219                 <div>Scale</div>
 220                 <div>Module UID</div>
 221                 <div>File</div>
 222             </div>
 223
 224             <div class="table-row" ng-repeat="(custUUID, moduleArr) in vnf.groupModules">
 225                 <div>{{moduleArr[0].modelCustomizationName}}</div>
 226                 <div>{{moduleArr.length}}</div>
 227                 <div ng-if="!moduleArr[0].scalable">N/A</div>
 228                 <div ng-if="moduleArr[0].scalable">
 229                     <input type="checkbox" ng-model="moduleArr[0].scale"/>
 230                 </div>
 231                 <div>{{moduleArr[0].uuid}}</div>
 232                 <div ng-if="!moduleArr[0].scalable">N/A</div>
 233                 <div ng-if="moduleArr[0].scalable">
 234                     <input type="file" accept="application/json"
 235                            onchange="angular.element(this).scope().setPreload(this)"/>
 236                 </div>
 237             </div>
 238         </div>
 239     </div>
 240
 241     <div class="modal-footer">
 242         <div class="pull-left">
 243             <button ng-if="vm.wizardStep === 2" ng-click="vm.prevStep();" type="button" id="back" name="back"
 244                     class="btn btn-primary">Back
 245             </button>
 246         </div>
 247         <div class="pull-right">
 248             <button type="button" id="cancel" name="cancel" class="btn btn-white" ng-click="vm.close()">Cancel</button>
 249             <button ng-if="!vm.isScaleOut() || (vm.isScaleOut() && vm.wizardStep === 2) || vm.hasScheduler"
 250                     type="submit" id="submit" name="submit" class="btn btn-primary"
 251                     data-ng-disabled="newChangeManagement.$invalid">{{vm.hasScheduler ? "Schedule" : "Confirm"}}
 252             </button>
 253             <button ng-if="(vm.isScaleOut() && vm.wizardStep === 1) && !vm.hasScheduler" ng-click="vm.nextStep();"
 254                     type="button" id="next" name="next" class="btn btn-primary"
 255                     data-ng-disabled="newChangeManagement.$invalid">Next
 256             </button>
 257             <button ng-if="isShowErrorReport() && vm.errorMsg!==''" ng-click="showReportWindow()" type="button"
 258                     class="btn btn-danger">Create report
 259             </button>
 260         </div>
 261     </div>
 262 </form>