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

   1 <link rel="stylesheet" type="text/css" href="app/vid/styles/modal-create-new.css" />
   2 <div class="modal-header">
   3     <h3 class="modal-title" id="modal-title">New VNF Change</h3>
   4     <span ng-click="vm.close()" class="pull-right modal-close" aria-hidden="true">&times;</span>
   5 </div>
   6 <form class="form-create" name="newChangeManagement" ng-submit="vm.openModal();vm.close();" novalidate>
   7     <div class="modal-body step1" ng-show="vm.wizardStep === 1" >
   8         <div class="form-group">
   9             <label class="control-label">Subscriber</label>
  10             <select class="form-control" ng-model="vm.changeManagement.subscriberId" ng-change="vm.loadServiceTypes()" name="subscriber" id="subscriber" data-tests-id="subscriberName" required>
  11                 <option value="" disabled>Select subscriber</option>
  12                 <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>
  13             </select>
  14         </div>
  15         <div class="form-group">
  16             <label class="control-label">Service type</label>
  17             <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">
  18                 <option value="" disabled>Select service type</option>
  19             </select>
  20         </div>
  21         <div class="form-group">
  22             <label class="control-label">NF Role</label>
  23             <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">
  24                 <option value="" disabled>NF Role</option>
  25             </select>
  26         </div>
  27         <div class="form-group">
  28             <label class="control-label">Source VNF Model Version</label>
  29             <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">
  30                 <option value="" disabled>Select VNF Model Version</option>
  31             </select>
  32         </div>
  33         <div class="form-group">
  34             <label class="control-label">Available VNF</label>
  35             <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>
  36         </div>
  37         <div ng-show="vm.changeManagement.vnfNames && vm.changeManagement.vnfNames.length > 0" class="form-group vnf-versions-container">
  38             <table class="table table-bordered">
  39                 <tbody>
  40                 <tr ng-repeat="vnfName in vm.changeManagement.vnfNames">
  41                     <td class="col-md-2"><span class="vnf-versions-name">{{vnfName.name}}</span></td>
  42                     <td class="col-md-2">
  43                         <select ng-model="vnfName.version" ng-change="vm.selectVersionForVNFName(vnfName)" class="vnf-versions-select-as-text" id="{{vnfName['invariant-id']}}-target-version-select">
  44                             <option value="" disabled="" selected="selected">Select Target VNF Model Version</option>
  45                             <option ng-repeat="version in vnfName.availableVersions">{{version.modelInfo.modelVersion}}</option>
  46                         </select>
  47                     </td>
  48                     <td class="col-md-1 vnf-versions-name">
  49                         <input ng-model="vnfName.filePath" onchange="angular.element(this).scope().selectFileForVNFName(this)" type="file" id="{{vnfName['invariant-id']}}" class="vnf-files-select" />
  50                         <span class="vnf-versions-name">Select File<span class="caret"></span></span></td>
  51                 </tr>
  52                 </tbody>
  53             </table>
  54         </div>
  55         <div class="form-group">
  56             <label class="control-label">Workflow</label>
  57             <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">
  58                 <option value="" disabled>Select workflow</option>
  59             </select>
  60         </div>
  61         <div class="form-group" ng-if="vm.isConfigUpdate()">
  62             <label class="control-label">Attach configuration file</label>
  63             <div class="file-wrapper">
  64                 <input id="config-update-input" class="file-input" type="file" ngf-select ng-model="vm.configUpdateFile" ngf-validate-async-fn="vm.uploadConfigFile($file)" name="configUpdateFile"
  65                        accept=".csv" ngf-pattern=".csv" required> </input>
  66                 <label id="config-update-label" class="file-input-label">{{vm.configUpdateFile&&vm.configUpdateFile.name||"Select File"}} </label>
  67                 <label for="config-update-input"><span class="icon-browse"></span></label>
  68             </div>
  69             <label id="errorLabel" class="icon-alert error" ng-if="newChangeManagement.configUpdateFile.$error.pattern">{{vm.configUpdatePatternError}}</label>
  70             <label id="errorContentLabel" class="icon-alert error" ng-if="newChangeManagement.configUpdateFile.$error.validateAsyncFn">{{vm.configUpdateContentError}}</label>
  71         </div>
  72         <div ng-if="vm.shouldShowVnfInPlaceFields()">
  73             <div class="form-group">
  74                 <label class="control-label">operations-timeout</label>
  75                 <input class="form-control" ng-model="vm.changeManagement.operationTimeout" name="operationTimeout" type="text" id="operations-timeout" pattern="[0-9]+" required>
  76             </div>
  77             <div class="form-group">
  78                 <label class="control-label">existing-software-version</label>
  79                 <input class="form-control" ng-model="vm.changeManagement.existingSoftwareVersion" name="existingSoftwareVersion" type="text" id="existing-software-version" pattern="{{vm.softwareVersionRegex}}" required>
  80             </div>
  81             <div class="form-group">
  82                 <label class="control-label">new-software-version</label>
  83                 <input class="form-control" ng-model="vm.changeManagement.newSoftwareVersion" name="newSoftwareVersion" type="text" id="new-software-version" pattern="{{vm.softwareVersionRegex}}" required>
  84             </div>
  85
  86         </div>
  87         <div ng-if="vm.isScaleOut() || vm.shouldShowVnfInPlaceFields()">
  88             <div class="form-group">
  89                 <label class="control-label">Controller Type</label>
  90                 <select class="form-control" ng-model="vm.changeManagement.controllerType" name="controllerType" id="controllerType"
  91                         ng-options="o as o for o in vm.controllers">
  92                 </select>
  93             </div>
  94         </div>
  95     </div>
  96
  97     <div class="modal-body step2 scale-out-modules" ng-if="vm.wizardStep === 2">
  98
  99         <div class="table-header table-row">
 100             <div></div>
 101             <div>Service Instance Name</div>
 102             <div>VNF Instance Name</div>
 103             <div>Model V</div>
 104             <div>Category</div>
 105             <div>UUID</div>
 106             <div>Invariant UUID</div>
 107         </div>
 108
 109         <div class="table-row" ng-repeat-start="vnf in vm.changeManagement.vnfNames" ng-click="vnf.isOpen=!!!vnf.isOpen">
 110             <div>+</div>
 111             <div>{{vnf['service-instance-node'][0].properties['service-instance-name']}}</div>
 112             <div>{{vnf.name}}</div>
 113             <div>{{vnf['availableVersions'][0].modelInfo.modelVersion}}</div>
 114             <div>{{vnf.category}}</div>
 115             <div>{{vnf.modelVersionId}}</div>
 116             <div>{{vnf['invariant-id']}}</div>
 117         </div>
 118         <div class="modules-table" ng-repeat-end="" ng-class="{'open' :vnf.isOpen}">
 119             <div class="table-header table-row">
 120                 <div>VF Module</div>
 121                 <div>In Service</div>
 122                 <div>Scale</div>
 123                 <div>Module UID</div>
 124                 <div>File</div>
 125             </div>
 126
 127             <div class="table-row" ng-repeat="(custUUID, moduleArr) in vnf.groupModules">
 128                 <div>{{moduleArr[0].modelCustomizationName}}</div>
 129                 <div>{{moduleArr.length}}</div>
 130                 <div ng-if="!(moduleArr[0].properties.maxCountInstances - moduleArr.length > 0)">N/A</div>
 131                 <div ng-if="moduleArr[0].properties.maxCountInstances - moduleArr.length > 0">
 132                     <input type="checkbox" ng-model="moduleArr[0].scale" />
 133                 </div>
 134                 <div>{{moduleArr[0].uuid}}</div>
 135                 <div>
 136                     <input type="file" accept="application/json" onchange="angular.element(this).scope().setPreload(this)" />
 137                 </div>
 138             </div>
 139         </div>
 140
 141     </div>
 142
 143     <div class="modal-footer">
 144         <div class="pull-left">
 145             <button ng-if="vm.wizardStep === 2" ng-click="vm.prevStep();" type="button" id="back" name="back" class="btn btn-primary">Back</button>
 146         </div>
 147         <div class="pull-right">
 148             <button type="button" id="cancel" name="cancel" class="btn btn-white" ng-click="vm.close()">Cancel</button>
 149             <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>
 150             <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>
 151         </div>
 152     </div>
 153 </form>