aboutsummaryrefslogtreecommitdiffstats
path: root/vid-app-common/src/main/webapp/app/vid/scripts/modals/new-change-management/new-change-management.html
blob: 1c91ba5e914325c2290deefa3c46647b74f679d3 (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
154
155
156
157
158
159
160
161
<!--
  ============LICENSE_START=======================================================
  VID
  ================================================================================
  Copyright (C) 2017 - 2019 AT&T Intellectual Property. All rights reserved.
  ================================================================================
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
  ============LICENSE_END=========================================================
  -->

<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.changeManagement.workflow" ng-repeat="item in vm.getInternalWorkFlowParameters(vm.changeManagement.workflow, 'FILE')">
            <label class="control-label">{{item.name}}</label>
            <div class="file-wrapper">
                <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}}"/>
                <label id="internal-workflow-parameter-file-{{item.id}}-label" class="file-input-label">{{item.value&&item.value.name||"Select File"}} </label>
                <label for="internal-workflow-parameter-file-{{item.id}}"><span class="icon-browse"></span></label>
            </div>
            <label id="errorLabel" class="icon-alert error" ng-if="item.value.$error.pattern">{{item.msgOnPatternError}}</label>
            <label id="errorContentLabel" class="icon-alert error" ng-if="item.value.$error.validateAsyncFn">{{item.msgOnContentError}}</label>
        </div>

        <div class="form-group" ng-if="vm.changeManagement.workflow" ng-repeat="item in vm.getInternalWorkFlowParameters(vm.changeManagement.workflow, 'text')">
            <label for="internal-workflow-parameter-text-{{item.id}}" class="control-label">{{item.name}}</label>
            <input ng-model="item.value" type="text" id="internal-workflow-parameter-text-{{item.id}}" pattern="{{item.pattern}}" ng-required="{{item.required}}">
        </div>

        <div class="form-group" ng-if="vm.changeManagement.workflow" ng-repeat="item in vm.getRemoteWorkFlowParameters(vm.changeManagement.workflow)">
          <label for="so-workflow-parameter-{{item.id}}" class="control-label">{{item.name}}</label>
          <input  ng-model="item.value" type="text" id="so-workflow-parameter-{{item.id}}" pattern="{{item.pattern}}" maxlength="{{item.maxLength}}" ng-required="{{item.required}}" soFieldName="{{item.soFieldName}}">
        </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>{{vnf.isOpen ? '-' : '+'}}</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].scalable">N/A</div>
                <div ng-if="moduleArr[0].scalable">
                    <input type="checkbox" ng-model="moduleArr[0].scale" />
                </div>
                <div>{{moduleArr[0].uuid}}</div>
                <div ng-if="!moduleArr[0].scalable">N/A</div>
                <div ng-if="moduleArr[0].scalable">
                    <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>