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!==''"><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"
  77                            data-ng-disabled="newChangeManagement.serviceType.$pristine">
  78                 </div>
  79
  80                 <div class="col">
  81                     <button class="search-vnf" type="button" id="searchVNF" name="searchVNFs" class="btn btn-primary"
  82                             ng-click="vm.searchVNFs()"
  83                             ng-disabled="newChangeManagement.subscriber.$pristine || newChangeManagement.serviceType.$pristine">
  84                         Search VNFs
  85                     </button>
  86                 </div>
  87             </div>
  88
  89         </div>
  90
  91
  92         <div class="form-group">
  93             <label class="control-label">Source VNF Model Version</label>
  94             <select class="form-control" ng-model="vm.changeManagement.fromVNFVersion" ng-change="vm.loadVNFNames()"
  95                     name="fromVNFVersion" id="fromVNFVersion"
  96                     ng-options="item.key as item.value for item in vm.fromVNFVersions" required
  97                     data-ng-disabled="vm.isDisabledVNFmodelVersion(newChangeManagement.vnfType.$pristine); ">
  98                 <option value="" disabled>Select VNF Model Version</option>
  99             </select>
 100         </div>
 101
 102
 103         <div class="form-group">
 104             <label class="control-label">Available VNF</label>
 105             <multiselect ng-model="vm.changeManagement.vnfNames" ng-change="vm.loadWorkFlows()" name="vnfName"
 106                          id="vnfName" options="vm.vnfNames" display-prop="name" id-prop="id" required
 107                          data-ng-disabled="newChangeManagement.fromVNFVersion.$pristine"></multiselect>
 108         </div>
 109         <div ng-show="vm.changeManagement.vnfNames && vm.changeManagement.vnfNames.length > 0"
 110              class="form-group vnf-versions-container">
 111             <table class="table table-bordered">
 112                 <tbody>
 113                 <tr ng-repeat="vnfName in vm.changeManagement.vnfNames">
 114                     <td class="col-md-2"><span class="vnf-versions-name">{{vnfName.name}}</span></td>
 115                     <td class="col-md-2">
 116                         <select ng-model="vnfName.version" ng-change="vm.selectVersionForVNFName(vnfName)"
 117                                 class="vnf-versions-select-as-text"
 118                                 id="{{vnfName['invariant-id']}}-target-version-select">
 119                             <option value="" disabled="" selected="selected">Select Target VNF Model Version</option>
 120                             <option ng-repeat="version in vnfName.availableVersions">
 121                                 {{version.modelInfo.modelVersion}}
 122                             </option>
 123                         </select>
 124                     </td>
 125                     <td class="col-md-1 vnf-versions-file">
 126                         <input ng-model="vnfName.filePath"
 127                                onchange="angular.element(this).scope().selectFileForVNFName(this)" type="file"
 128                                id="{{vnfName['invariant-id']}}" class="vnf-files-select"/>
 129                         <span class="vnf-versions-file">Select File<span class="caret"></span></span></td>
 130                 </tr>
 131                 </tbody>
 132             </table>
 133         </div>
 134         <div class="form-group">
 135             <label class="control-label">Workflow</label>
 136             <select class="form-control" ng-model="vm.changeManagement.workflow" name="workflow" id="workflow"
 137                     ng-options="item for item in vm.workflows" required
 138                     data-ng-disabled="newChangeManagement.vnfName.$pristine">
 139                 <option value="" disabled>Select workflow</option>
 140             </select>
 141         </div>
 142
 143         <div class="form-group" ng-if="vm.changeManagement.workflow"
 144              ng-repeat="item in vm.getInternalWorkFlowParameters(vm.changeManagement.workflow, 'FILE')">
 145             <label class="control-label">{{item.name}}</label>
 146             <div class="file-wrapper">
 147                 <input id="{{vm.getIdFor('file',item.id,item.name)}}" ng-change="vm.onChange(item)" class="file-input"
 148                        type="file" ngf-select ng-model="item.value" ngf-validate-async-fn="vm.uploadConfigFile($file)"
 149                        ng-attr-name="{{'internal-workflow-parameter-file-name-' + item.id}}"
 150                        accept="{{item.acceptableFileType}}" ngf-pattern="{{item.acceptableFileType}}"
 151                        ng-required="{{item.required}}"/>
 152                 <label id="{{vm.getIdFor('file',item.id,item.name)}}-label" class="file-input-label">
 153                     {{item.value&&item.value.name||"Select File"}} </label>
 154                 <label ng-attr-for="{{vm.getIdFor('file',item.id,item.name)}}"><span class="icon-browse"></span></label>
 155             </div>
 156             <label id="errorLabel" class="icon-alert error"
 157                    ng-if="vm.hasPatternError(newChangeManagement, 'internal-workflow-parameter-file-name-' + item.id)">{{item.msgOnPatternError}}</label>
 158             <label id="errorContentLabel" class="icon-alert error"
 159                    ng-if="vm.hasAsyncFnError(newChangeManagement, 'internal-workflow-parameter-file-name-' + item.id)">{{item.msgOnContentError}}</label>
 160         </div>
 161
 162         <div class="form-group" ng-if="vm.changeManagement.workflow"
 163              ng-repeat="item in vm.getInternalWorkFlowParameters(vm.changeManagement.workflow, 'text')">
 164             <label ng-attr-for="{{vm.getIdFor('text',item.id,item.name)}}" class="control-label">{{item.name}}</label>
 165             <input ng-model="item.value" type="text" id="{{vm.getIdFor('text',item.id,item.name)}}"
 166                    pattern="{{item.pattern}}" ng-required="{{item.required}}">
 167         </div>
 168
 169         <div class="form-group" ng-if="vm.changeManagement.workflow"
 170              ng-repeat="item in vm.getRemoteWorkFlowParameters(vm.changeManagement.workflow)">
 171             <label for="so-workflow-parameter-{{item.id}}" class="control-label">{{item.name}}</label>
 172             <input ng-model="item.value" type="text" id="so-workflow-parameter-{{item.id}}" pattern="{{item.pattern}}"
 173                    maxlength="{{item.maxLength}}" ng-required="{{item.required}}" soFieldName="{{item.soFieldName}}">
 174         </div>
 175     </div>
 176
 177     <div class="modal-body step2 scale-out-modules" ng-if="vm.wizardStep === 2">
 178
 179         <div class="table-header table-row">
 180             <div></div>
 181             <div>Service Instance Name</div>
 182             <div>VNF Instance Name</div>
 183             <div>Model V</div>
 184             <div>Category</div>
 185             <div>UUID</div>
 186             <div>Invariant UUID</div>
 187         </div>
 188
 189         <div class="table-row" ng-repeat-start="vnf in vm.changeManagement.vnfNames"
 190              ng-click="vnf.isOpen=!!!vnf.isOpen">
 191             <div>{{vnf.isOpen ? '-' : '+'}}</div>
 192             <div>{{vnf['service-instance-node'][0].properties['service-instance-name']}}</div>
 193             <div>{{vnf.name}}</div>
 194             <div>{{vnf['availableVersions'][0].modelInfo.modelVersion}}</div>
 195             <div>{{vnf.category}}</div>
 196             <div>{{vnf.modelVersionId}}</div>
 197             <div>{{vnf['invariant-id']}}</div>
 198         </div>
 199         <div class="modules-table" ng-repeat-end="" ng-class="{'open' :vnf.isOpen}">
 200             <div class="table-header table-row">
 201                 <div>VF Module</div>
 202                 <div>In Service</div>
 203                 <div>Scale</div>
 204                 <div>Module UID</div>
 205                 <div>File</div>
 206             </div>
 207
 208             <div class="table-row" ng-repeat="(custUUID, moduleArr) in vnf.groupModules">
 209                 <div>{{moduleArr[0].modelCustomizationName}}</div>
 210                 <div>{{moduleArr.length}}</div>
 211                 <div ng-if="!moduleArr[0].scalable">N/A</div>
 212                 <div ng-if="moduleArr[0].scalable">
 213                     <input type="checkbox" ng-model="moduleArr[0].scale"/>
 214                 </div>
 215                 <div>{{moduleArr[0].uuid}}</div>
 216                 <div ng-if="!moduleArr[0].scalable">N/A</div>
 217                 <div ng-if="moduleArr[0].scalable">
 218                     <input type="file" accept="application/json"
 219                            onchange="angular.element(this).scope().setPreload(this)"/>
 220                 </div>
 221             </div>
 222         </div>
 223     </div>
 224
 225     <div class="modal-footer">
 226         <div class="pull-left">
 227             <button ng-if="vm.wizardStep === 2" ng-click="vm.prevStep();" type="button" id="back" name="back"
 228                     class="btn btn-primary">Back
 229             </button>
 230         </div>
 231         <div class="pull-right">
 232             <button type="button" id="cancel" name="cancel" class="btn btn-white" ng-click="vm.close()">Cancel</button>
 233             <button ng-if="!vm.isScaleOut() || (vm.isScaleOut() && vm.wizardStep === 2) || vm.hasScheduler"
 234                     type="submit" id="submit" name="submit" class="btn btn-primary"
 235                     data-ng-disabled="newChangeManagement.$invalid">{{vm.hasScheduler ? "Schedule" : "Confirm"}}
 236             </button>
 237             <button ng-if="(vm.isScaleOut() && vm.wizardStep === 1) && !vm.hasScheduler" ng-click="vm.nextStep();"
 238                     type="button" id="next" name="next" class="btn btn-primary"
 239                     data-ng-disabled="newChangeManagement.$invalid">Next
 240             </button>
 241             <button ng-if="isShowErrorReport() && vm.errorMsg!==''" ng-click="showReportWindow()" type="button"
 242                     class="btn btn-danger">Create report
 243             </button>
 244         </div>
 245     </div>
 246 </form>