vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html

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