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

        </div>
        <div ng-if="vm.isScaleOut() || vm.shouldShowVnfInPlaceFields()">
            <div class="form-group">
                <label class="control-label">Controller Type</label>
                <select class="form-control" ng-model="vm.changeManagement.controllerType" name="controllerType" id="controllerType"
                        ng-options="o as o for o in vm.controllers">
                </select>
            </div>
        </div>
    </div>

    <div class="modal-body step2 scale-out-modules" ng-if="vm.wizardStep === 2">

        <div class="table-header table-row">
            <div></div>
            <div>Service Instance Name</div>
            <div>VNF Instance Name</div>
            <div>Model V</div>
            <div>Category</div>
            <div>UUID</div>
            <div>Invariant UUID</div>
        </div>

        <div class="table-row" ng-repeat-start="vnf in vm.changeManagement.vnfNames" ng-click="vnf.isOpen=!!!vnf.isOpen">
            <div>+</div>
            <div>{{vnf['service-instance-node'][0].properties['service-instance-name']}}</div>
            <div>{{vnf.name}}</div>
            <div>{{vnf['availableVersions'][0].modelInfo.modelVersion}}</div>
            <div>{{vnf.category}}</div>
            <div>{{vnf.modelVersionId}}</div>
            <div>{{vnf['invariant-id']}}</div>
        </div>
        <div class="modules-table" ng-repeat-end="" ng-class="{'open' :vnf.isOpen}">
            <div class="table-header table-row">
                <div>VF Module</div>
                <div>In Service</div>
                <div>Scale</div>
                <div>Module UID</div>
                <div>File</div>
            </div>

            <div class="table-row" ng-repeat="(custUUID, moduleArr) in vnf.groupModules">
                <div>{{moduleArr[0].modelCustomizationName}}</div>
                <div>{{moduleArr.length}}</div>
                <div ng-if="!(moduleArr[0].properties.maxCountInstances - moduleArr.length > 0)">N/A</div>
                <div ng-if="moduleArr[0].properties.maxCountInstances - moduleArr.length > 0">
                    <input type="checkbox" ng-model="moduleArr[0].scale" />
                </div>
                <div>{{moduleArr[0].uuid}}</div>
                <div>
                    <input type="file" accept="application/json" onchange="angular.element(this).scope().setPreload(this)" />
                </div>
            </div>
        </div>

    </div>

    <div class="modal-footer">
        <div class="pull-left">
            <button ng-if="vm.wizardStep === 2" ng-click="vm.prevStep();" type="button" id="back" name="back" class="btn btn-primary">Back</button>
        </div>
        <div class="pull-right">
            <button type="button" id="cancel" name="cancel" class="btn btn-white" ng-click="vm.close()">Cancel</button>
            <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>
            <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>
        </div>
    </div>
</form>