6399065f81845bd4b8123bc7d1ebe00cd2801ff2
[vid.git] / vid-app-common / src / main / webapp / app / vid / scripts / view-models / instantiate.htm
1 <!--\r
2   ============LICENSE_START=======================================================\r
3   VID\r
4   ================================================================================\r
5   Copyright (C) 2017 - 2019 AT&T Intellectual Property. All rights reserved.\r
6   ================================================================================\r
7   Licensed under the Apache License, Version 2.0 (the "License");\r
8   you may not use this file except in compliance with the License.\r
9   You may obtain a copy of the License at\r
10   \r
11        http://www.apache.org/licenses/LICENSE-2.0\r
12   \r
13   Unless required by applicable law or agreed to in writing, software\r
14   distributed under the License is distributed on an "AS IS" BASIS,\r
15   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
16   See the License for the specific language governing permissions and\r
17   limitations under the License.\r
18   ============LICENSE_END=========================================================\r
19   -->\r
20 \r
21 <div>\r
22 \r
23     <div popup-window class="popupContents" ngx-show="{{popup.isVisible}}"\r
24          ng-cloak>\r
25         <div ng-include="'app/vid/scripts/view-models/creationDialog.htm'"></div>\r
26         <div ng-include="'app/vid/scripts/view-models/deleteResumeDialog.htm'"></div>\r
27         <div ng-include="'app/vid/scripts/view-models/detailsDialog.htm'"></div>\r
28         <div ng-include="'app/vid/scripts/view-models/statusDialog.htm'"></div>\r
29         <div ng-include="'app/vid/scripts/view-models/iframeDialog.htm'"></div>\r
30     </div>\r
31     <div ng-controller="aaiSubscriberController" ng-init="getComponentList() ">\r
32         <div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">\r
33             <img src="app/vid/images/spinner.gif"></img>\r
34             <label>Status:</label><span class="status">{{status}}</span>\r
35         </div>\r
36 \r
37         <div class="error-msg" ng-if="errorMsg != null" style="white-space: pre-line"><font color='red'>{{errorMsg}}\r
38             <pre>{{errorDetails | json}}</pre>\r
39         </font></div>\r
40 \r
41         <h1 class="heading1" style="margin-top: 20px;">{{isPermitted ? "View/Edit" : "View"}} Service Instance</h1>\r
42         <a class="btn btn-primary btn-xs pull-right" ng-click="reloadRoute();"><span\r
43                 class="glyphicon glyphicon-refresh"></span></a>\r
44         <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
45            data-tests-id="show-new-screen" ng-if="allowTransferToNewScreenAndShowButton()"\r
46            ng-click="navigateToNewEditViewScreen()" style="margin-right: 8px;">More actions</a>\r
47         <br>\r
48 \r
49         <center>\r
50             <table att-table border="1" ng-model="service">\r
51                 <tr>\r
52                     <th style="text-align: center" width="33%">SUBSCRIBER:\r
53                         {{service.instance.subscriberName}}\r
54                     </th>\r
55                     <th style="text-align: center" width="34%">SERVICE TYPE:\r
56                         {{service.instance.serviceType}}\r
57                     </th>\r
58                     <th data-tests-id="service-instanceId-th-id" style="text-align: center" width="33%">SERVICE INSTANCE\r
59                         ID: {{service.instance.serviceInstanceId}}\r
60                     </th>\r
61                 <tr>\r
62                 <tr>\r
63                     <td colspan='3' style="text-align: center">Service Instance\r
64                         Name: {{service.instance.name || "Not defined"}}\r
65                     </td>\r
66                 <tr>\r
67             </table>\r
68 \r
69         </center>\r
70 \r
71         <div ui-tree data-drag-enabled="false" data-nodrop-enabled="true" style="margin: 30px">\r
72 \r
73             <ol ui-tree-nodes="" ng-model="service">\r
74                 <li ng-repeat="aService in [service]" ui-tree-node>\r
75 \r
76                     <div ng-if="isCR && collectionResource != null">\r
77                         <div ui-tree-handle class="tree-node tree-node-content">\r
78                             <a class="btn btn-success btn-xs" data-nodrag ng-click="this.toggle()">\r
79                                 <span class="glyphicon"\r
80                                       ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
81                             </a>\r
82                             SERVICE INSTANCE: {{aService.instance.name}} | ORCH STATUS: {{serviceOrchestrationStatus}}\r
83                             <a ng-if="isPermitted" data-tests-id="deleteServiceButton"\r
84                                class="pull-right btn btn-danger btn-xs" data-nodrag\r
85                                ng-click="deleteService(aService.instance);">\r
86                                 <span class="glyphicon glyphicon-remove"></span>\r
87                             </a>\r
88 \r
89                             <a class="pull-right btn btn-primary btn-xs" data-tests-id="infoServiceButton" data-nodrag\r
90                                ng-click="describeService(aService.instance)" style="margin-right: 8px;">\r
91                                 <span class="glyphicon glyphicon-info-sign service-info"></span>\r
92                             </a>\r
93                         </div>\r
94                         <ol ui-tree-nodes="" ng-model="collections" ng-class="{hidden: collapsed}">\r
95                             <li ng-repeat="collection in collections" ui-tree-node>\r
96                                 <div ui-tree-handle class="tree-node tree-node-content" data-tests-id="collectionDiv">\r
97                                     <a class="btn btn-success btn-xs" data-nodrag ng-click="this.toggle()">\r
98                                         <span class="glyphicon"\r
99                                               ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
100                                     </a>\r
101                                     COLLECTION: {{collection["collection-name"]}} | TYPE:\r
102                                     {{collection["collection-type"]}}\r
103                                 </div>\r
104                                 <ol ui-tree-nodes="" ng-model="networks" ng-class="{hidden: collapsed}">\r
105                                     <li ng-repeat="network in networks" ui-tree-node>\r
106                                         <div ui-tree-handle class="tree-node tree-node-content"\r
107                                              data-tests-id="collectionNetworkDiv">\r
108                                             NETWORK INSTANCE GROUP: {{network["network-id"]}} | ROLE:\r
109                                             {{network["network-role"]}} | TYPE: {{network["network-type"]}} | # OF\r
110                                             NETWORKS: {{collectionResource.networks.length}}\r
111                                         </div>\r
112                                     </li>\r
113                                 </ol>\r
114                             </li>\r
115                         </ol>\r
116                     </div>\r
117                     <div ng-if="!isCR">\r
118                         <div ui-tree-handle class="tree-node tree-node-content">\r
119                             <a class="btn btn-success btn-xs"\r
120                                ng-if="(aService.instance.vnfs && aService.instance.vnfs.length > 0) ||(aService.instance.pnfs && aService.instance.pnfs.length > 0) || (aService.instance.networks && aService.instance.networks.length > 0)"\r
121                                data-nodrag ng-click="this.toggle()">\r
122                                 <span class="glyphicon"\r
123                                       ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
124                             </a>\r
125                             SERVICE INSTANCE: {{aService.instance.name}} | ORCH STATUS: {{serviceOrchestrationStatus}}\r
126                             <a ng-if="((isMacro()) ||  (isObjectEmpty(aService.instance.vnfs) && isObjectEmpty(aService.instance.networks) && isObjectEmpty(aService.instance.pnfs))) && isPermitted"\r
127                                data-tests-id="deleteServiceButton" class="pull-right btn btn-danger btn-xs" data-nodrag\r
128                                ng-click="deleteService(aService.instance, serviceOrchestrationStatus);">\r
129                                 <span class="glyphicon glyphicon-remove"></span>\r
130                             </a>\r
131                             <div class="pull-right btn-group"\r
132                                  ng-if="(aService.convertedModel.vnfs||aService.convertedModel.vnfs) &&(!isObjectEmpty(aService.convertedModel.pnfs)||!isObjectEmpty(aService.convertedModel.pnfs))  && !aService.convertedModel.isNewFlow && isPermitted">\r
133                                 <button type="button" data-tests-id="addVNFButton"\r
134                                         class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
135                                         aria-haspopup="true" aria-expanded="false">\r
136                                     Add node instance<span class="caret"></span>\r
137                                 </button>\r
138                                 <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs">\r
139                                     <a role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs"\r
140                                        data-tests-id="addVNFOption-{{vnf.modelCustomizationName}}"\r
141                                        ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}}</a>\r
142 \r
143                                 </ul>\r
144                             </div>\r
145                             <div class="pull-right btn-group"\r
146                                  ng-if="aService.convertedModel.vnfs && !isObjectEmpty(aService.convertedModel.vnfs) && aService.convertedModel.isNewFlow && isPermitted">\r
147                                 <button type="button" data-tests-id="addVNFButton"\r
148                                         class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
149                                         aria-haspopup="true" aria-expanded="false">\r
150                                     Add node instance<span class="caret"></span>\r
151                                 </button>\r
152                                 <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs"\r
153                                     data-tests-id="addVnfsDropdown">\r
154                                     <li role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs">\r
155                                         <a data-tests-id="addVNFOption-{{vnf.modelCustomizationName}}"\r
156                                            ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}}\r
157                                             {{vnf.nfType}} {{vnf.nfRole}} {{vnf.nfFunction}} {{vnf.nfCode}}</a>\r
158                                     </li>\r
159                                 </ul>\r
160                             </div>\r
161                             <!--  <div class="pull-right btn-group" ng-if="aService.model.networks && !equals(aService.model.networks, {})">-->\r
162                             <div class="pull-right btn-group"\r
163                                  ng-if="aService.convertedModel.networks && (!(isObjectEmpty(aService.convertedModel.networks))) && isPermitted">\r
164                                 <!--<div class="pull-right btn-group" ng-if="aService.model.networks">-->\r
165                                 <button type="button" data-tests-id="addNetworkButton"\r
166                                         class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
167                                         aria-haspopup="true" aria-expanded="false">\r
168                                     Add Network<span class="caret"></span>\r
169                                 </button>\r
170                                 <ul class="dropdown-menu" ng-model="aService.convertedModel.networks">\r
171                                     <li ng-repeat="(networkUuid, network) in aService.convertedModel.networks">\r
172                                         <a data-tests-id="addNetworkOption-{{network.modelCustomizationName}}"\r
173                                            ng-click="addNetworkInstance(network, aService.instance.vnfs)">{{network.modelCustomizationName}}</a>\r
174                                     </li>\r
175                                 </ul>\r
176                             </div>\r
177                             <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
178                                ng-click="describeService(aService.instance)" style="margin-right: 8px;">\r
179                                 <span class="glyphicon glyphicon-info-sign service-info"></span>\r
180                             </a>\r
181                             <a data-tests-id="deactivateButton" ng-disabled="!isActivateDeactivateEnabled('deactivate')"\r
182                                class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="deactivateMSOInstance()"\r
183                                style="margin-right: 8px;">\r
184                                 Deactivate\r
185                             </a>\r
186                             <a ng-if="!isActivateFabricConfiguration()" data-tests-id="activateButton" ng-disabled="!isActivateDeactivateEnabled('activate')"\r
187                                class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="activateMSOInstance()"\r
188                                style="margin-right: 8px;">\r
189                                 Activate\r
190                             </a>\r
191                             <a ng-if="isActivateFabricConfiguration()" data-tests-id="activateFabricConfigurationButton" ng-disabled="!allConfigurationsAssigned"\r
192                                class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="activateFabricConfigurationMSO()"\r
193                                style="margin-right: 8px;">\r
194                                 Activate Fabric Configuration\r
195                             </a>\r
196                             <a data-tests-id="showAssignmentsButton" ng-if="isShowAssignmentsEnabled()"\r
197                                class="pull-right btn btn-primary btn-xs" data-nodrag style="margin-right: 8px;"\r
198                                target="_blank" ng-href="{{showAssignmentsSDNC()}}">\r
199                                 Show Assignments\r
200                             </a>\r
201                             <a data-tests-id="verifyServiceButton" ng-if="isShowVerifyService()" ng-disabled="!isEnableVerifyService()"\r
202                                class="pull-right btn btn-primary btn-xs" data-nodrag style="margin-right: 8px;"\r
203                                target="_blank" ng-click="activateVerifyService()">\r
204                                 Verify Service\r
205                             </a>\r
206                         </div>\r
207                         <ol ui-tree-nodes="" ng-model="aService.instance.vnfs" ng-class="{hidden: collapsed}">\r
208                             <li ng-repeat="vnf in aService.instance.vnfs" ui-tree-node>\r
209                                 <div ui-tree-handle class="tree-node tree-node-content">\r
210                                     <a class="btn btn-success btn-xs"\r
211                                        ng-if="(vnf.vfModules && vnf.vfModules.length > 0) || (vnf.volumeGroups && vnf.volumeGroups.length > 0)"\r
212                                        data-nodrag ng-click="this.toggle()">\r
213                                         <span class="glyphicon"\r
214                                               ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
215                                     </a>\r
216                                     VNF: {{vnf.name}} | TYPE: {{vnf.nodeType}} | ORCH STATUS: {{vnf.nodeStatus}}\r
217 \r
218                                     <a ng-if="(vnf.vfModules.length == 0) && (vnf.volumeGroups.length == 0) && isPermitted"\r
219                                        data-tests-id="deleteVNFButton" class="pull-right btn btn-danger btn-xs"\r
220                                        data-nodrag ng-click="deleteVnf(aService.instance, vnf)">\r
221                                         <span class="glyphicon glyphicon-remove"></span>\r
222                                     </a>\r
223                                     <!--  <div class="pull-right btn-group" ng-if="aService.convertedModel.vnfs[vnf.object['model-invariant-id']][vnf.object['model-version-id']].vfModules">-->\r
224                                     <div class="pull-right btn-group"\r
225                                          ng-if="(hasVfModules(vnf.object) && (aService.convertedModel.isNewFlow)) && isPermitted">\r
226 \r
227                                         <button type="button" data-tests-id="addVFModuleButton"\r
228                                                 class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
229                                                 aria-haspopup="true" aria-expanded="false">\r
230                                             Add VF-Module<span class="caret"></span>\r
231                                         </button>\r
232                                         <ul class="dropdown-menu" ng-model="vfModule">\r
233                                             <a ng-repeat="(vfModuleCustomizationUuid, vfModule) in aService.convertedModel.vnfs[vnf.object['model-customization-id']].vfModules"\r
234                                                data-tests-id="addVFModuleOption-{{vfModule.modelCustomizationName}}"\r
235                                                ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}} </a>\r
236                                         </ul>\r
237                                     </div>\r
238 \r
239 \r
240                                     <div class="pull-right btn-group"\r
241                                          ng-if="(hasVfModules(vnf.object) && (!(aService.convertedModel.isNewFlow))) && isPermitted">\r
242 \r
243                                         <button type="button" data-tests-id="addVFModuleButton"\r
244                                                 class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
245                                                 aria-haspopup="true" aria-expanded="false">\r
246                                             Add VF-Module<span class="caret"></span>\r
247                                         </button>\r
248                                         <ul class="dropdown-menu" ng-model="vnf">\r
249                                             <a ng-repeat="(vfModuleUuid, vfModule) in aService.convertedModel.vnfs[vnf.object['model-version-id']].vfModules"\r
250                                                data-tests-id="addVFModuleOption-{{vfModule.modelCustomizationName}}"\r
251                                                ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}}</a>\r
252                                             </li>\r
253                                         </ul>\r
254 \r
255                                     </div>\r
256 \r
257                                     <div class="pull-right btn-group"\r
258                                          ng-if="(hasVolumeGroups(vnf.object) && (aService.convertedModel.isNewFlow)) && isPermitted">\r
259                                         <button type="button" data-tests-id="addVolumeGroupButton"\r
260                                                 class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
261                                                 aria-haspopup="true" aria-expanded="false">\r
262                                             Add Volume Group<span class="caret"></span>\r
263                                         </button>\r
264                                         <ul class="dropdown-menu" ng-model="volumeGroup">\r
265                                             <a ng-repeat="(volumeGroupCustomizationUuid, volumeGroup) in aService.convertedModel.vnfs[vnf.object['model-customization-id']].volumeGroups"\r
266                                                data-tests-id="addVolumeGroupOption-{{volumeGroup.modelCustomizationName}}"\r
267                                                ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.modelCustomizationName}}</a>\r
268                                         </ul>\r
269                                     </div>\r
270 \r
271                                     <div class="pull-right btn-group"\r
272                                          ng-if="(hasVolumeGroups(vnf.object) && (!(aService.convertedModel.isNewFlow))) && isPermitted">\r
273 \r
274                                         <button type="button" data-tests-id="addVolumeGroupButton"\r
275                                                 class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
276                                                 aria-haspopup="true" aria-expanded="false">\r
277                                             Add Volume Group<span class="caret"></span>\r
278                                         </button>\r
279                                         <ul class="dropdown-menu" ng-model="vnf">\r
280                                             <a ng-repeat="(volumeGroupUuid, volumeGroup) in aService.convertedModel.vnfs[vnf.object['model-version-id']].volumeGroups"\r
281                                                data-tests-id="addVolumeGroupOption-{{volumeGroup.modelCustomizationName}}"\r
282                                                ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.modelCustomizationName}}</a>\r
283                                             </li>\r
284                                         </ul>\r
285 \r
286                                     </div>\r
287 \r
288                                     <!-- VID-374/378 - switching-off feature <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="getStatusOfVnf(aService.instance, vnf)" style="margin-right: 8px;">\r
289                                         <span class="glyphicon glyphicon-exclamation-sign"></span>\r
290                                     </a>  -->\r
291                                     <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
292                                        ng-click="describeVnf(aService.instance, vnf)" style="margin-right: 8px;">\r
293                                         <span class="glyphicon glyphicon-info-sign vnf-info"></span>\r
294                                     </a>\r
295                                 </div>\r
296                                 <ol ui-tree-nodes="" ng-model="vnf.instanceGroups" ng-class="{hidden: collapsed}">\r
297                                     <li ng-repeat="instanceGroup in vnf.instanceGroups" ui-tree-node>\r
298                                         <div ui-tree-handle class="tree-node tree-node-content"\r
299                                              ng-class="'instanceGroupTreeNode'">\r
300                                             INSTANCE-GROUP: {{instanceGroup.name}} | TYPE: Instance-Group\r
301                                         </div>\r
302 \r
303                                     </li>\r
304                                 </ol>\r
305 \r
306                                 <ol ui-tree-nodes="" ng-model="vnf.vfModules" ng-class="{hidden: collapsed}">\r
307                                     <li ng-repeat="vfModule in vnf.vfModules" ui-tree-node>\r
308                                         <div ui-tree-handle class="tree-node tree-node-content"\r
309                                              ng-class="'vfModuleTreeNode-' + vfModule.nodeStatus.toLowerCase()">\r
310                                             <a class="btn btn-success btn-xs"\r
311                                                ng-if="(vfModule.volumeGroups && vfModule.volumeGroups.length > 0)"\r
312                                                data-nodrag ng-click="this.toggle()">\r
313                                                 <span class="glyphicon"\r
314                                                       ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
315                                             </a>\r
316                                             VFMODULE: {{vfModule.name}} | TYPE: {{vfModule.nodeType}} | ORCH STATUS:\r
317                                             {{vfModule.nodeStatus}}\r
318                                             <!--  -->\r
319                                             <a class="pull-right btn btn-danger btn-xs" ng-if="isPermitted"\r
320                                                data-tests-id="deleteVFModuleButton-{{vfModule.name}}" data-nodrag\r
321                                                ng-click="deleteVfModule(aService.instance, vfModule, vnf)">\r
322                                                 <span class="glyphicon glyphicon-remove"></span>\r
323                                             </a>\r
324                                             <div class="pull-right btn-group">\r
325                                                 <!--   <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
326                                                     Attach Volume Group<span class="caret"></span>\r
327                                                   </button>\r
328                                                   <ul class="dropdown-menu" ng-model="vnf.volumeGroups">\r
329                                                     <li ng-repeat="volumeGroup in vnf.availableVolumeGroups">\r
330                                                         <a ng-click="attachVolumeGroupInstance(vfModule, volumeGroup)">{{volumeGroup.name}}</a>\r
331                                                     </li>\r
332                                                   </ul> -->\r
333                                             </div>\r
334                                             <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
335                                                ng-click="describeVfModule(aService.instance, vfModule, vnf)"\r
336                                                style="margin-right: 8px;">\r
337                                                 <span class="glyphicon glyphicon-info-sign vfmodule-info"></span>\r
338                                             </a>\r
339                                             <div class="resume"\r
340                                                  ng-if="isPermitted && isResumeShown(vfModule.nodeStatus)">\r
341                                                 <a data-tests-id="resumeVFModuleButton-{{vfModule.name}}"\r
342                                                    class="pull-right btn btn-success btn-xs button-margin"\r
343                                                    ng-click="resume(aService.instance, vfModule, vnf)">\r
344                                                     Resume\r
345                                                 </a>\r
346                                             </div>\r
347 \r
348                                         </div>\r
349                                         <ol ui-tree-nodes="" ng-model="vfModule.volumeGroups"\r
350                                             ng-class="{hidden: collapsed}">\r
351                                             <li ng-repeat="volumeGroup in vfModule.volumeGroups" ui-tree-node>\r
352                                                 <div ui-tree-handle class="tree-node tree-node-content">\r
353                                                     VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}}\r
354                                                     | ORCH STATUS: {{volumeGroup.nodeStatus}}\r
355                                                     <!-- <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVolumeGroup(aService.instance, vnf, vfModule, volumeGroup)">\r
356                                                         <span class="glyphicon glyphicon-remove"></span>\r
357                                                     </a> -->\r
358                                                     <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
359                                                        ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)"\r
360                                                        style="margin-right: 8px;">\r
361                                                         <span class="glyphicon glyphicon-info-sign"></span>\r
362                                                     </a>\r
363                                                 </div>\r
364                                             </li>\r
365                                         </ol>\r
366                                     </li>\r
367                                 </ol>\r
368                                 <ol ui-tree-nodes="" ng-model="vnf.availableVolumeGroups"\r
369                                     ng-class="{hidden: collapsed}">\r
370                                     <li ng-repeat="volumeGroup in vnf.availableVolumeGroups" ui-tree-node>\r
371                                         <div ui-tree-handle class="tree-node tree-node-content">\r
372                                             VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}} | ORCH\r
373                                             STATUS: {{volumeGroup.nodeStatus}}\r
374                                             <a class="pull-right btn btn-danger btn-xs" ng-if="isPermitted"\r
375                                                data-tests-id="deleteVNFVolumeGroupButton" data-nodrag\r
376                                                ng-click="deleteVnfVolumeGroup(aService.instance, vnf, volumeGroup)">\r
377                                                 <span class="glyphicon glyphicon-remove"></span>\r
378                                             </a>\r
379                                             <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
380                                                ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)"\r
381                                                style="margin-right: 8px;">\r
382                                                 <span class="glyphicon glyphicon-info-sign volume-group-info"></span>\r
383                                             </a>\r
384                                         </div>\r
385                                     </li>\r
386                                 </ol>\r
387 \r
388                                 <ol ui-tree-nodes="" ng-model="vnf.networks"\r
389                                     ng-class="{hidden: collapsed}">\r
390                                     <li ng-repeat="network in vnf.networks" ui-tree-node>\r
391                                         <div ui-tree-handle class="tree-node tree-node-content">\r
392                                             NETWORK: {{network.name}} | TYPE: {{network.nodeType}} | ORCH\r
393                                             STATUS: {{network.nodeStatus}}\r
394                                         </div>\r
395                                         <ol ui-tree-nodes="" ng-model="network.vlans" ng-class="{hidden: collapsed}">\r
396                                             <li ng-repeat="vlan in network.vlans" ui-tree-node>\r
397                                                 <div ui-tree-handle class="tree-node tree-node-content"\r
398                                                      ng-class="'vlansTreeNode'">\r
399                                                     VLAN: {{vlan.vlanIdOuter}} | TYPE: VLAN\r
400                                                 </div>\r
401 \r
402                                             </li>\r
403                                         </ol>\r
404                                     </li>\r
405                                 </ol>\r
406                             </li>\r
407                         </ol>\r
408 \r
409                         <ol ui-tree-nodes="" ng-model="aService.instance.networks" ng-class="{hidden: collapsed}">\r
410                             <li ng-repeat="network in aService.instance.networks" ui-tree-node>\r
411                                 <div ui-tree-handle class="tree-node tree-node-content">\r
412                                     NETWORK: {{network.name}} | TYPE: {{network.nodeType}} | ORCH STATUS:\r
413                                     {{network.nodeStatus}}\r
414 \r
415                                     <a class="pull-right btn btn-danger btn-xs" ng-if="!isMacro() && isPermitted"\r
416                                        data-tests-id="deleteNetworkButton" data-nodrag\r
417                                        ng-click="deleteNetwork(aService.instance, network)">\r
418                                         <span class="glyphicon glyphicon-remove"></span>\r
419                                     </a>\r
420                                     <!--  <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteNetwork(aService.instance, network)">\r
421                                        <span class="glyphicon glyphicon-remove"></span>\r
422                                    </a>-->\r
423                                     <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
424                                        ng-click="describeNetwork(aService.instance, network)"\r
425                                        style="margin-right: 8px;">\r
426                                         <span class="glyphicon glyphicon-info-sign network-info"></span>\r
427                                     </a>\r
428                                 </div>\r
429 \r
430                                 <ol ui-tree-nodes="" ng-model="network.vlans" ng-class="{hidden: collapsed}">\r
431                                     <li ng-repeat="vlan in network.vlans" ui-tree-node>\r
432                                         <div ui-tree-handle class="tree-node tree-node-content"\r
433                                              ng-class="'vlansTreeNode'">\r
434                                             VLAN: {{vlan.vlanIdOuter}} | TYPE: VLAN\r
435                                         </div>\r
436 \r
437                                     </li>\r
438                                 </ol>\r
439                             </li>\r
440                         </ol>\r
441 \r
442                         <ol ui-tree-nodes="" ng-model="aService.instance.configurations" ng-class="{hidden: collapsed}">\r
443                             <li ng-repeat="configuration in aService.instance.configurations" ui-tree-node>\r
444                                 <div ui-tree-handle class="tree-node tree-node-content">\r
445                                     <a class="btn btn-success btn-xs"\r
446                                        ng-if="(configuration.ports && configuration.ports.length > 0)" data-nodrag\r
447                                        ng-click="this.toggle()">\r
448                                         <span class="glyphicon"\r
449                                               ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
450                                     </a>\r
451                                     CONFIGURATION: {{configuration.name}} | TYPE: {{configuration.nodeType}} | ORCH\r
452                                     STATUS: {{configuration.nodeStatus}}\r
453 \r
454                                     <a class="pull-right btn btn-danger btn-xs"\r
455                                        ng-if="!isMacro() && isPermitted && configuration.nodeStatus !== STATUS_CONSTANTS.AAI_ACTIVE"\r
456                                        ng-disabled="!isConfigurationDataAvailiable(configuration)"\r
457                                        data-tests-id="deleteConfigurationButton-{{configuration.name}}"\r
458                                        data-nodrag\r
459                                        ng-click="deleteConfiguration(aService, configuration)">\r
460                                         <span class="glyphicon glyphicon-remove"></span>\r
461                                     </a>\r
462 \r
463 \r
464                                     <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
465                                        ng-click="toggleConfigurationStatus(aService, configuration)"\r
466                                        ng-if="isPermitted && allowConfigurationActions(configuration)"\r
467                                        ng-disabled="!isConfigurationDataAvailiable(configuration)"\r
468                                        data-tests-id="activateDeactivateButton-{{configuration.name}}">\r
469                                         {{configuration.nodeStatus === STATUS_CONSTANTS.AAI_ACTIVE ? "Deactivate" :\r
470                                         "Activate"}}\r
471                                     </a>\r
472                                 </div>\r
473                                 <ol ui-tree-nodes="" ng-model="configuration.ports" ng-class="{hidden: collapsed}">\r
474                                     <li ng-repeat="port in configuration.ports" ui-tree-node>\r
475                                         <div ui-tree-handle class="tree-node tree-node-content">\r
476                                             PORT: {{port.portName}} | ORCH STATUS: {{port.portStatus}}\r
477 \r
478                                             <button type="button" data-tests-id="enableDisableButton-{{configuration.name}}-{{port.portName}}"\r
479                                                     class="pull-right btn btn-primary btn-xs"\r
480                                                     ng-if="configuration.nodeStatus == STATUS_CONSTANTS.AAI_ACTIVE"\r
481                                                     ng-disabled="!isConfigurationDataAvailiable(configuration)"\r
482                                                     ng-click="togglePortStatus(aService, configuration, port)">\r
483                                                 {{port.portStatus === STATUS_CONSTANTS.AAI_ENABLED ? "Disable" :\r
484                                                 "Enable"}}\r
485                                             </button>\r
486                                         </div>\r
487                                     </li>\r
488                                 </ol>\r
489                             </li>\r
490                         </ol>\r
491 \r
492                         <ol id="pnfs-tree" ui-tree-nodes="" ng-model="pnfs"\r
493                             ng-class="{hidden: collapsed || pnf.length === 0}">\r
494                             <li ng-repeat="pnf in pnfs" ui-tree-node>\r
495                                 <div ui-tree-handle class="tree-node tree-node-content">\r
496                                     PNF: {{pnf}}\r
497                                     <a ng-if="isMacro()===false" class="dissociate-pnf pull-right btn btn-primary btn-xs" data-nodrag\r
498                                        ng-click="dissociatePnf(pnf)" style="margin-right: 8px;">\r
499                                         <span>Dissociate</span>\r
500                                     </a>\r
501                                 </div>\r
502                             </li>\r
503                         </ol>\r
504                     </div>\r
505                 </li>\r
506             </ol>\r
507         </div>\r
508     </div>\r
509 </div>\r