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>
  26 <form class="form-create" name="newChangeManagement" ng-submit="vm.openModal();vm.close();" novalidate>
  27     <div class="modal-body step1" ng-show="vm.wizardStep === 1" >
  28         <div class="form-group">
  29             <label class="control-label">Subscriber</label>
  30             <select class="form-control" ng-model="vm.changeManagement.subscriberId" ng-change="vm.loadServiceTypes()" name="subscriber" id="subscriber" data-tests-id="subscriberName" required>
  31                 <option value="" disabled>Select subscriber</option>
  32                 <option data-tests-id="subscriberNameOption" class="subscriberNameOption" ng-repeat="item in vm.subscribers" ng-value="item['global-customer-id']" ng-disabled="!(item['is-permitted'])">{{item['subscriber-name']}}</option>
  33             </select>
  34         </div>
  35         <div class="form-group">
  36             <label class="control-label">Service type</label>
  37             <select class="form-control" ng-model="vm.changeManagement.serviceType" ng-change="vm.loadVNFTypes()" name="serviceType" id="serviceType" ng-options="item['service-type'] disable when !(item['is-permitted']) for item in vm.serviceTypes" required data-ng-disabled="newChangeManagement.subscriber.$pristine" data-tests-id="serviceType">
  38                 <option value="" disabled>Select service type</option>
  39             </select>
  40         </div>
  41         <div class="form-group">
  42             <label class="control-label">NF Role</label>
  43             <select class="form-control" ng-model="vm.changeManagement.vnfType" ng-change="vm.loadVNFVersions()" name="vnfType" id="vnfType" ng-options="item for item in vm.vnfTypes" required data-ng-disabled="newChangeManagement.serviceType.$pristine">
  44                 <option value="" disabled>NF Role</option>
  45             </select>
  46         </div>
  47         <div class="form-group">
  48             <label class="control-label">Source VNF Model Version</label>
  49             <select class="form-control" ng-model="vm.changeManagement.fromVNFVersion" ng-change="vm.loadVNFNames()" name="fromVNFVersion" id="fromVNFVersion" ng-options="item.key as item.value for item in vm.fromVNFVersions" required data-ng-disabled="newChangeManagement.vnfType.$pristine">
  50                 <option value="" disabled>Select VNF Model Version</option>
  51             </select>
  52         </div>
  53         <div class="form-group">
  54             <label class="control-label">Available VNF</label>
  55             <multiselect ng-model="vm.changeManagement.vnfNames" ng-change="vm.loadWorkFlows()" name="vnfName" id="vnfName" options="vm.vnfNames" display-prop="name" id-prop="id" required data-ng-disabled="newChangeManagement.fromVNFVersion.$pristine"></multiselect>
  56         </div>
  57         <div ng-show="vm.changeManagement.vnfNames && vm.changeManagement.vnfNames.length > 0" class="form-group vnf-versions-container">
  58             <table class="table table-bordered">
  59                 <tbody>
  60                 <tr ng-repeat="vnfName in vm.changeManagement.vnfNames">
  61                     <td class="col-md-2"><span class="vnf-versions-name">{{vnfName.name}}</span></td>
  62                     <td class="col-md-2">
  63                         <select ng-model="vnfName.version" ng-change="vm.selectVersionForVNFName(vnfName)" class="vnf-versions-select-as-text" id="{{vnfName['invariant-id']}}-target-version-select">
  64                             <option value="" disabled="" selected="selected">Select Target VNF Model Version</option>
  65                             <option ng-repeat="version in vnfName.availableVersions">{{version.modelInfo.modelVersion}}</option>
  66                         </select>
  67                     </td>
  68                     <td class="col-md-1 vnf-versions-name">
  69                         <input ng-model="vnfName.filePath" onchange="angular.element(this).scope().selectFileForVNFName(this)" type="file" id="{{vnfName['invariant-id']}}" class="vnf-files-select" />
  70                         <span class="vnf-versions-name">Select File<span class="caret"></span></span></td>
  71                 </tr>
  72                 </tbody>
  73             </table>
  74         </div>
  75         <div class="form-group">
  76             <label class="control-label">Workflow</label>
  77             <select class="form-control" ng-model="vm.changeManagement.workflow" name="workflow" id="workflow" ng-options="item for item in vm.workflows" required data-ng-disabled="newChangeManagement.vnfName.$pristine">
  78                 <option value="" disabled>Select workflow</option>
  79             </select>
  80         </div>
  81
  82         <div class="form-group" ng-if="vm.changeManagement.workflow" ng-repeat="item in vm.getInternalWorkFlowParameters(vm.changeManagement.workflow, 'FILE')">
  83             <label class="control-label">{{item.name}}</label>
  84             <div class="file-wrapper">
  85                 <input id="internal-workflow-parameter-file-{{item.id}}" class="file-input" type="file" ngf-select ng-model="item.value" ngf-validate-async-fn="vm.uploadConfigFile($file)" name="configUpdateFile" accept="{{item.acceptableFileType}}" ngf-pattern="{{item.acceptableFileType}}" ng-required="{{item.required}}"/>
  86                 <label id="internal-workflow-parameter-file-{{item.id}}-label" class="file-input-label">{{item.value&&item.value.name||"Select File"}} </label>
  87                 <label for="internal-workflow-parameter-file-{{item.id}}"><span class="icon-browse"></span></label>
  88             </div>
  89             <label id="errorLabel" class="icon-alert error" ng-if="item.value.$error.pattern">{{item.msgOnPatternError}}</label>
  90             <label id="errorContentLabel" class="icon-alert error" ng-if="item.value.$error.validateAsyncFn">{{item.msgOnContentError}}</label>
  91         </div>
  92
  93         <div class="form-group" ng-if="vm.changeManagement.workflow" ng-repeat="item in vm.getInternalWorkFlowParameters(vm.changeManagement.workflow, 'STRING')">
  94             <label for="internal-workflow-parameter-text-{{item.id}}" class="control-label">{{item.name}}</label>
  95             <input ng-model="item.value" type="text" id="internal-workflow-parameter-text-{{item.id}}" pattern="{{item.pattern}}" ng-required="{{item.required}}">
  96         </div>
  97
  98         <div class="form-group" ng-if="vm.changeManagement.workflow" ng-repeat="item in vm.getRemoteWorkFlowParameters(vm.changeManagement.workflow)">
  99           <label for="so-workflow-parameter-{{item.id}}" class="control-label">{{item.name}}</label>
 100           <input  ng-model="item.value" type="text" id="so-workflow-parameter-{{item.id}}" pattern="{{item.pattern}}" ng-required="{{item.required}}">
 101         </div>
 102     </div>
 103
 104     <div class="modal-body step2 scale-out-modules" ng-if="vm.wizardStep === 2">
 105
 106         <div class="table-header table-row">
 107             <div></div>
 108             <div>Service Instance Name</div>
 109             <div>VNF Instance Name</div>
 110             <div>Model V</div>
 111             <div>Category</div>
 112             <div>UUID</div>
 113             <div>Invariant UUID</div>
 114         </div>
 115
 116         <div class="table-row" ng-repeat-start="vnf in vm.changeManagement.vnfNames" ng-click="vnf.isOpen=!!!vnf.isOpen">
 117             <div>{{vnf.isOpen ? '-' : '+'}}</div>
 118             <div>{{vnf['service-instance-node'][0].properties['service-instance-name']}}</div>
 119             <div>{{vnf.name}}</div>
 120             <div>{{vnf['availableVersions'][0].modelInfo.modelVersion}}</div>
 121             <div>{{vnf.category}}</div>
 122             <div>{{vnf.modelVersionId}}</div>
 123             <div>{{vnf['invariant-id']}}</div>
 124         </div>
 125         <div class="modules-table" ng-repeat-end="" ng-class="{'open' :vnf.isOpen}">
 126             <div class="table-header table-row">
 127                 <div>VF Module</div>
 128                 <div>In Service</div>
 129                 <div>Scale</div>
 130                 <div>Module UID</div>
 131                 <div>File</div>
 132             </div>
 133
 134             <div class="table-row" ng-repeat="(custUUID, moduleArr) in vnf.groupModules">
 135                 <div>{{moduleArr[0].modelCustomizationName}}</div>
 136                 <div>{{moduleArr.length}}</div>
 137                 <div ng-if="!moduleArr[0].scalable">N/A</div>
 138                 <div ng-if="moduleArr[0].scalable">
 139                     <input type="checkbox" ng-model="moduleArr[0].scale" />
 140                 </div>
 141                 <div>{{moduleArr[0].uuid}}</div>
 142                 <div ng-if="!moduleArr[0].scalable">N/A</div>
 143                 <div ng-if="moduleArr[0].scalable">
 144                     <input type="file" accept="application/json" onchange="angular.element(this).scope().setPreload(this)" />
 145                 </div>
 146             </div>
 147         </div>
 148
 149     </div>
 150
 151     <div class="modal-footer">
 152         <div class="pull-left">
 153             <button ng-if="vm.wizardStep === 2" ng-click="vm.prevStep();" type="button" id="back" name="back" class="btn btn-primary">Back</button>
 154         </div>
 155         <div class="pull-right">
 156             <button type="button" id="cancel" name="cancel" class="btn btn-white" ng-click="vm.close()">Cancel</button>
 157             <button ng-if="!vm.isScaleOut() || (vm.isScaleOut() && vm.wizardStep === 2)" type="submit" id="submit" name="submit" class="btn btn-primary" data-ng-disabled="newChangeManagement.$invalid">{{vm.hasScheduler ? "Schedule" : "Confirm"}}</button>
 158             <button ng-if="vm.isScaleOut() && vm.wizardStep === 1" ng-click="vm.nextStep();" type="button" id="next" name="next" class="btn btn-primary" data-ng-disabled="newChangeManagement.$invalid">Next</button>
 159         </div>
 160     </div>
 161 </form>