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 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 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 \r
  45         <br>\r
  46 \r
  47         <center>\r
  48             <table att-table border="1" ng-model="service">\r
  49                 <tr>\r
  50                     <th style="text-align: center" width="33%">SUBSCRIBER:\r
  51                         {{service.instance.subscriberName}}\r
  52                     </th>\r
  53                     <th style="text-align: center" width="34%">SERVICE TYPE:\r
  54                         {{service.instance.serviceType}}\r
  55                     </th>\r
  56                     <th data-tests-id="service-instanceId-th-id" style="text-align: center" width="33%">SERVICE INSTANCE\r
  57                         ID: {{service.instance.serviceInstanceId}}\r
  58                     </th>\r
  59                 <tr>\r
  60                 <tr>\r
  61                     <td colspan='3' style="text-align: center">Service Instance\r
  62                         Name: {{service.instance.name || "Not defined"}}\r
  63                     </td>\r
  64                 <tr>\r
  65             </table>\r
  66 \r
  67         </center>\r
  68 \r
  69         <div ui-tree data-drag-enabled="false" data-nodrop-enabled="true" style="margin: 30px">\r
  70 \r
  71             <ol ui-tree-nodes="" ng-model="service">\r
  72                 <li ng-repeat="aService in [service]" ui-tree-node>\r
  73 \r
  74                     <div ng-if="isCR && collectionResource != null">\r
  75                         <div ui-tree-handle class="tree-node tree-node-content">\r
  76                             <a class="btn btn-success btn-xs" data-nodrag ng-click="this.toggle()">\r
  77                                 <span class="glyphicon"\r
  78                                       ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
  79                             </a>\r
  80                             SERVICE INSTANCE: {{aService.instance.name}} | ORCH STATUS: {{serviceOrchestrationStatus}}\r
  81                             <a ng-if="isPermitted" data-tests-id="deleteServiceButton"\r
  82                                class="pull-right btn btn-danger btn-xs" data-nodrag\r
  83                                ng-click="deleteService(aService.instance);">\r
  84                                 <span class="glyphicon glyphicon-remove"></span>\r
  85                             </a>\r
  86 \r
  87                             <a class="pull-right btn btn-primary btn-xs" data-tests-id="infoServiceButton" data-nodrag\r
  88                                ng-click="describeService(aService.instance)" style="margin-right: 8px;">\r
  89                                 <span class="glyphicon glyphicon-info-sign service-info"></span>\r
  90                             </a>\r
  91                         </div>\r
  92                         <ol ui-tree-nodes="" ng-model="collections" ng-class="{hidden: collapsed}">\r
  93                             <li ng-repeat="collection in collections" ui-tree-node>\r
  94                                 <div ui-tree-handle class="tree-node tree-node-content" data-tests-id="collectionDiv">\r
  95                                     <a class="btn btn-success btn-xs" data-nodrag ng-click="this.toggle()">\r
  96                                         <span class="glyphicon"\r
  97                                               ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
  98                                     </a>\r
  99                                     COLLECTION: {{collection["collection-name"]}} | TYPE:\r
 100                                     {{collection["collection-type"]}}\r
 101                                 </div>\r
 102                                 <ol ui-tree-nodes="" ng-model="networks" ng-class="{hidden: collapsed}">\r
 103                                     <li ng-repeat="network in networks" ui-tree-node>\r
 104                                         <div ui-tree-handle class="tree-node tree-node-content"\r
 105                                              data-tests-id="collectionNetworkDiv">\r
 106                                             NETWORK INSTANCE GROUP: {{network["network-id"]}} | ROLE:\r
 107                                             {{network["network-role"]}} | TYPE: {{network["network-type"]}} | # OF\r
 108                                             NETWORKS: {{collectionResource.networks.length}}\r
 109                                         </div>\r
 110                                     </li>\r
 111                                 </ol>\r
 112                             </li>\r
 113                         </ol>\r
 114                     </div>\r
 115                     <div ng-if="!isCR">\r
 116                         <div ui-tree-handle class="tree-node tree-node-content">\r
 117                             <a class="btn btn-success btn-xs"\r
 118                                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
 119                                data-nodrag ng-click="this.toggle()">\r
 120                                 <span class="glyphicon"\r
 121                                       ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
 122                             </a>\r
 123                             SERVICE INSTANCE: {{aService.instance.name}} | ORCH STATUS: {{serviceOrchestrationStatus}}\r
 124                             <a ng-if="((isMacro()) ||  (isObjectEmpty(aService.instance.vnfs) && isObjectEmpty(aService.instance.networks) && isObjectEmpty(aService.instance.pnfs))) && isPermitted"\r
 125                                data-tests-id="deleteServiceButton" class="pull-right btn btn-danger btn-xs" data-nodrag\r
 126                                ng-click="deleteService(aService.instance, serviceOrchestrationStatus);">\r
 127                                 <span class="glyphicon glyphicon-remove"></span>\r
 128                             </a>\r
 129                             <div class="pull-right btn-group"\r
 130                                  ng-if="(aService.convertedModel.vnfs||aService.convertedModel.vnfs) &&(!isObjectEmpty(aService.convertedModel.pnfs)||!isObjectEmpty(aService.convertedModel.pnfs))  && !aService.convertedModel.isNewFlow && isPermitted">\r
 131                                 <button type="button" data-tests-id="addVNFButton"\r
 132                                         class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
 133                                         aria-haspopup="true" aria-expanded="false">\r
 134                                     Add node instance<span class="caret"></span>\r
 135                                 </button>\r
 136                                 <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs">\r
 137                                     <a role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs"\r
 138                                        data-tests-id="addVNFOption-{{vnf.modelCustomizationName}}"\r
 139                                        ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}}</a>\r
 140 \r
 141                                 </ul>\r
 142                             </div>\r
 143                             <div class="pull-right btn-group"\r
 144                                  ng-if="aService.convertedModel.vnfs && !isObjectEmpty(aService.convertedModel.vnfs) && aService.convertedModel.isNewFlow && isPermitted">\r
 145                                 <button type="button" data-tests-id="addVNFButton"\r
 146                                         class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
 147                                         aria-haspopup="true" aria-expanded="false">\r
 148                                     Add node instance<span class="caret"></span>\r
 149                                 </button>\r
 150                                 <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs"\r
 151                                     data-tests-id="addVnfsDropdown">\r
 152                                     <li role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs">\r
 153                                         <a data-tests-id="addVNFOption-{{vnf.modelCustomizationName}}"\r
 154                                            ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}}\r
 155                                             {{vnf.nfType}} {{vnf.nfRole}} {{vnf.nfFunction}} {{vnf.nfCode}}</a>\r
 156                                     </li>\r
 157                                 </ul>\r
 158                             </div>\r
 159                             <!--  <div class="pull-right btn-group" ng-if="aService.model.networks && !equals(aService.model.networks, {})">-->\r
 160                             <div class="pull-right btn-group"\r
 161                                  ng-if="aService.convertedModel.networks && (!(isObjectEmpty(aService.convertedModel.networks))) && isPermitted">\r
 162                                 <!--<div class="pull-right btn-group" ng-if="aService.model.networks">-->\r
 163                                 <button type="button" data-tests-id="addNetworkButton"\r
 164                                         class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
 165                                         aria-haspopup="true" aria-expanded="false">\r
 166                                     Add Network<span class="caret"></span>\r
 167                                 </button>\r
 168                                 <ul class="dropdown-menu" ng-model="aService.convertedModel.networks">\r
 169                                     <li ng-repeat="(networkUuid, network) in aService.convertedModel.networks">\r
 170                                         <a data-tests-id="addNetworkOption-{{network.modelCustomizationName}}"\r
 171                                            ng-click="addNetworkInstance(network, aService.instance.vnfs)">{{network.modelCustomizationName}}</a>\r
 172                                     </li>\r
 173                                 </ul>\r
 174                             </div>\r
 175                             <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
 176                                ng-click="describeService(aService.instance)" style="margin-right: 8px;">\r
 177                                 <span class="glyphicon glyphicon-info-sign service-info"></span>\r
 178                             </a>\r
 179                             <a data-tests-id="deactivateButton" ng-disabled="!isActivateDeactivateEnabled('deactivate')"\r
 180                                class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="deactivateMSOInstance()"\r
 181                                style="margin-right: 8px;">\r
 182                                 Deactivate\r
 183                             </a>\r
 184                             <a data-tests-id="activateButton" ng-disabled="!isActivateDeactivateEnabled('activate')"\r
 185                                class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="activateMSOInstance()"\r
 186                                style="margin-right: 8px;">\r
 187                                 Activate\r
 188                             </a>\r
 189                             <a data-tests-id="showAssignmentsButton" ng-disabled="!isShowAssignmentsEnabled()"\r
 190                                class="pull-right btn btn-primary btn-xs" data-nodrag style="margin-right: 8px;"\r
 191                                target="_blank" ng-href="{{showAssignmentsSDNC()}}">\r
 192                                 Show Assignments\r
 193                             </a>\r
 194                             <a data-tests-id="verifyServiceButton" ng-if="isShowVerifyService()" ng-disabled="!isEnableVerifyService()"\r
 195                                class="pull-right btn btn-primary btn-xs" data-nodrag style="margin-right: 8px;"\r
 196                                target="_blank" ng-click="activateVerifyService()">\r
 197                                 Verify Service\r
 198                             </a>\r
 199                         </div>\r
 200                         <ol ui-tree-nodes="" ng-model="aService.instance.vnfs" ng-class="{hidden: collapsed}">\r
 201                             <li ng-repeat="vnf in aService.instance.vnfs" ui-tree-node>\r
 202                                 <div ui-tree-handle class="tree-node tree-node-content">\r
 203                                     <a class="btn btn-success btn-xs"\r
 204                                        ng-if="(vnf.vfModules && vnf.vfModules.length > 0) || (vnf.volumeGroups && vnf.volumeGroups.length > 0)"\r
 205                                        data-nodrag ng-click="this.toggle()">\r
 206                                         <span class="glyphicon"\r
 207                                               ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
 208                                     </a>\r
 209                                     VNF: {{vnf.name}} | TYPE: {{vnf.nodeType}} | ORCH STATUS: {{vnf.nodeStatus}}\r
 210 \r
 211                                     <a ng-if="(vnf.vfModules.length == 0) && (vnf.volumeGroups.length == 0) && isPermitted"\r
 212                                        data-tests-id="deleteVNFButton" class="pull-right btn btn-danger btn-xs"\r
 213                                        data-nodrag ng-click="deleteVnf(aService.instance, vnf)">\r
 214                                         <span class="glyphicon glyphicon-remove"></span>\r
 215                                     </a>\r
 216                                     <!--  <div class="pull-right btn-group" ng-if="aService.convertedModel.vnfs[vnf.object['model-invariant-id']][vnf.object['model-version-id']].vfModules">-->\r
 217                                     <div class="pull-right btn-group"\r
 218                                          ng-if="(hasVfModules(vnf.object) && (aService.convertedModel.isNewFlow)) && isPermitted">\r
 219 \r
 220                                         <button type="button" data-tests-id="addVFModuleButton"\r
 221                                                 class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
 222                                                 aria-haspopup="true" aria-expanded="false">\r
 223                                             Add VF-Module<span class="caret"></span>\r
 224                                         </button>\r
 225                                         <ul class="dropdown-menu" ng-model="vfModule">\r
 226                                             <a ng-repeat="(vfModuleCustomizationUuid, vfModule) in aService.convertedModel.vnfs[vnf.object['model-customization-id']].vfModules"\r
 227                                                data-tests-id="addVFModuleOption-{{vfModule.modelCustomizationName}}"\r
 228                                                ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}} </a>\r
 229                                         </ul>\r
 230                                     </div>\r
 231 \r
 232 \r
 233                                     <div class="pull-right btn-group"\r
 234                                          ng-if="(hasVfModules(vnf.object) && (!(aService.convertedModel.isNewFlow))) && isPermitted">\r
 235 \r
 236                                         <button type="button" data-tests-id="addVFModuleButton"\r
 237                                                 class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
 238                                                 aria-haspopup="true" aria-expanded="false">\r
 239                                             Add VF-Module<span class="caret"></span>\r
 240                                         </button>\r
 241                                         <ul class="dropdown-menu" ng-model="vnf">\r
 242                                             <a ng-repeat="(vfModuleUuid, vfModule) in aService.convertedModel.vnfs[vnf.object['model-version-id']].vfModules"\r
 243                                                data-tests-id="addVFModuleOption-{{vfModule.modelCustomizationName}}"\r
 244                                                ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}}</a>\r
 245                                             </li>\r
 246                                         </ul>\r
 247 \r
 248                                     </div>\r
 249 \r
 250                                     <div class="pull-right btn-group"\r
 251                                          ng-if="(hasVolumeGroups(vnf.object) && (aService.convertedModel.isNewFlow)) && isPermitted">\r
 252                                         <button type="button" data-tests-id="addVolumeGroupButton"\r
 253                                                 class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
 254                                                 aria-haspopup="true" aria-expanded="false">\r
 255                                             Add Volume Group<span class="caret"></span>\r
 256                                         </button>\r
 257                                         <ul class="dropdown-menu" ng-model="volumeGroup">\r
 258                                             <a ng-repeat="(volumeGroupCustomizationUuid, volumeGroup) in aService.convertedModel.vnfs[vnf.object['model-customization-id']].volumeGroups"\r
 259                                                data-tests-id="addVolumeGroupOption-{{volumeGroup.modelCustomizationName}}"\r
 260                                                ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.modelCustomizationName}}</a>\r
 261                                         </ul>\r
 262                                     </div>\r
 263 \r
 264                                     <div class="pull-right btn-group"\r
 265                                          ng-if="(hasVolumeGroups(vnf.object) && (!(aService.convertedModel.isNewFlow))) && isPermitted">\r
 266 \r
 267                                         <button type="button" data-tests-id="addVolumeGroupButton"\r
 268                                                 class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
 269                                                 aria-haspopup="true" aria-expanded="false">\r
 270                                             Add Volume Group<span class="caret"></span>\r
 271                                         </button>\r
 272                                         <ul class="dropdown-menu" ng-model="vnf">\r
 273                                             <a ng-repeat="(volumeGroupUuid, volumeGroup) in aService.convertedModel.vnfs[vnf.object['model-version-id']].volumeGroups"\r
 274                                                data-tests-id="addVolumeGroupOption-{{volumeGroup.modelCustomizationName}}"\r
 275                                                ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.modelCustomizationName}}</a>\r
 276                                             </li>\r
 277                                         </ul>\r
 278 \r
 279                                     </div>\r
 280 \r
 281                                     <!-- 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
 282                                         <span class="glyphicon glyphicon-exclamation-sign"></span>\r
 283                                     </a>  -->\r
 284                                     <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
 285                                        ng-click="describeVnf(aService.instance, vnf)" style="margin-right: 8px;">\r
 286                                         <span class="glyphicon glyphicon-info-sign vnf-info"></span>\r
 287                                     </a>\r
 288                                 </div>\r
 289                                 <ol ui-tree-nodes="" ng-model="vnf.instanceGroups" ng-class="{hidden: collapsed}">\r
 290                                     <li ng-repeat="instanceGroup in vnf.instanceGroups" ui-tree-node>\r
 291                                         <div ui-tree-handle class="tree-node tree-node-content"\r
 292                                              ng-class="'instanceGroupTreeNode'">\r
 293                                             INSTANCE-GROUP: {{instanceGroup.name}} | TYPE: Instance-Group\r
 294                                         </div>\r
 295 \r
 296                                     </li>\r
 297                                 </ol>\r
 298 \r
 299                                 <ol ui-tree-nodes="" ng-model="vnf.vfModules" ng-class="{hidden: collapsed}">\r
 300                                     <li ng-repeat="vfModule in vnf.vfModules" ui-tree-node>\r
 301                                         <div ui-tree-handle class="tree-node tree-node-content"\r
 302                                              ng-class="'vfModuleTreeNode-' + vfModule.nodeStatus.toLowerCase()">\r
 303                                             <a class="btn btn-success btn-xs"\r
 304                                                ng-if="(vfModule.volumeGroups && vfModule.volumeGroups.length > 0)"\r
 305                                                data-nodrag ng-click="this.toggle()">\r
 306                                                 <span class="glyphicon"\r
 307                                                       ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
 308                                             </a>\r
 309                                             VFMODULE: {{vfModule.name}} | TYPE: {{vfModule.nodeType}} | ORCH STATUS:\r
 310                                             {{vfModule.nodeStatus}}\r
 311                                             <!--  -->\r
 312                                             <a class="pull-right btn btn-danger btn-xs" ng-if="isPermitted"\r
 313                                                data-tests-id="deleteVFModuleButton-{{vfModule.name}}" data-nodrag\r
 314                                                ng-click="deleteVfModule(aService.instance, vfModule, vnf)">\r
 315                                                 <span class="glyphicon glyphicon-remove"></span>\r
 316                                             </a>\r
 317                                             <div class="pull-right btn-group">\r
 318                                                 <!--   <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
 319                                                     Attach Volume Group<span class="caret"></span>\r
 320                                                   </button>\r
 321                                                   <ul class="dropdown-menu" ng-model="vnf.volumeGroups">\r
 322                                                     <li ng-repeat="volumeGroup in vnf.availableVolumeGroups">\r
 323                                                         <a ng-click="attachVolumeGroupInstance(vfModule, volumeGroup)">{{volumeGroup.name}}</a>\r
 324                                                     </li>\r
 325                                                   </ul> -->\r
 326                                             </div>\r
 327                                             <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
 328                                                ng-click="describeVfModule(aService.instance, vfModule, vnf)"\r
 329                                                style="margin-right: 8px;">\r
 330                                                 <span class="glyphicon glyphicon-info-sign vfmodule-info"></span>\r
 331                                             </a>\r
 332                                             <div class="resume"\r
 333                                                  ng-if="isPermitted && isResumeShown(vfModule.nodeStatus)">\r
 334                                                 <a data-tests-id="resumeVFModuleButton-{{vfModule.name}}"\r
 335                                                    class="pull-right btn btn-success btn-xs button-margin"\r
 336                                                    ng-click="resume(aService.instance, vfModule, vnf)">\r
 337                                                     Resume\r
 338                                                 </a>\r
 339                                             </div>\r
 340 \r
 341                                         </div>\r
 342                                         <ol ui-tree-nodes="" ng-model="vfModule.volumeGroups"\r
 343                                             ng-class="{hidden: collapsed}">\r
 344                                             <li ng-repeat="volumeGroup in vfModule.volumeGroups" ui-tree-node>\r
 345                                                 <div ui-tree-handle class="tree-node tree-node-content">\r
 346                                                     VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}}\r
 347                                                     | ORCH STATUS: {{volumeGroup.nodeStatus}}\r
 348                                                     <!-- <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVolumeGroup(aService.instance, vnf, vfModule, volumeGroup)">\r
 349                                                         <span class="glyphicon glyphicon-remove"></span>\r
 350                                                     </a> -->\r
 351                                                     <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
 352                                                        ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)"\r
 353                                                        style="margin-right: 8px;">\r
 354                                                         <span class="glyphicon glyphicon-info-sign"></span>\r
 355                                                     </a>\r
 356                                                 </div>\r
 357                                             </li>\r
 358                                         </ol>\r
 359                                     </li>\r
 360                                 </ol>\r
 361                                 <ol ui-tree-nodes="" ng-model="vnf.availableVolumeGroups"\r
 362                                     ng-class="{hidden: collapsed}">\r
 363                                     <li ng-repeat="volumeGroup in vnf.availableVolumeGroups" ui-tree-node>\r
 364                                         <div ui-tree-handle class="tree-node tree-node-content">\r
 365                                             VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}} | ORCH\r
 366                                             STATUS: {{volumeGroup.nodeStatus}}\r
 367                                             <a class="pull-right btn btn-danger btn-xs" ng-if="isPermitted"\r
 368                                                data-tests-id="deleteVNFVolumeGroupButton" data-nodrag\r
 369                                                ng-click="deleteVnfVolumeGroup(aService.instance, vnf, volumeGroup)">\r
 370                                                 <span class="glyphicon glyphicon-remove"></span>\r
 371                                             </a>\r
 372                                             <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
 373                                                ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)"\r
 374                                                style="margin-right: 8px;">\r
 375                                                 <span class="glyphicon glyphicon-info-sign volume-group-info"></span>\r
 376                                             </a>\r
 377                                         </div>\r
 378                                     </li>\r
 379                                 </ol>\r
 380                             </li>\r
 381                         </ol>\r
 382 \r
 383                         <ol ui-tree-nodes="" ng-model="aService.instance.networks" ng-class="{hidden: collapsed}">\r
 384                             <li ng-repeat="network in aService.instance.networks" ui-tree-node>\r
 385                                 <div ui-tree-handle class="tree-node tree-node-content">\r
 386                                     NETWORK: {{network.name}} | TYPE: {{network.nodeType}} | ORCH STATUS:\r
 387                                     {{network.nodeStatus}}\r
 388 \r
 389                                     <a class="pull-right btn btn-danger btn-xs" ng-if="!isMacro() && isPermitted"\r
 390                                        data-tests-id="deleteNetworkButton" data-nodrag\r
 391                                        ng-click="deleteNetwork(aService.instance, network)">\r
 392                                         <span class="glyphicon glyphicon-remove"></span>\r
 393                                     </a>\r
 394                                     <!--  <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteNetwork(aService.instance, network)">\r
 395                                        <span class="glyphicon glyphicon-remove"></span>\r
 396                                    </a>-->\r
 397                                     <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
 398                                        ng-click="describeNetwork(aService.instance, network)"\r
 399                                        style="margin-right: 8px;">\r
 400                                         <span class="glyphicon glyphicon-info-sign network-info"></span>\r
 401                                     </a>\r
 402                                 </div>\r
 403                             </li>\r
 404                         </ol>\r
 405 \r
 406                         <ol ui-tree-nodes="" ng-model="aService.instance.configurations" ng-class="{hidden: collapsed}">\r
 407                             <li ng-repeat="configuration in aService.instance.configurations" ui-tree-node>\r
 408                                 <div ui-tree-handle class="tree-node tree-node-content">\r
 409                                     <a class="btn btn-success btn-xs"\r
 410                                        ng-if="(configuration.ports && configuration.ports.length > 0)" data-nodrag\r
 411                                        ng-click="this.toggle()">\r
 412                                         <span class="glyphicon"\r
 413                                               ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
 414                                     </a>\r
 415                                     CONFIGURATION: {{configuration.name}} | TYPE: {{configuration.nodeType}} | ORCH\r
 416                                     STATUS: {{configuration.nodeStatus}}\r
 417 \r
 418                                     <a class="pull-right btn btn-danger btn-xs"\r
 419                                        ng-if="!isMacro() && isPermitted && configuration.nodeStatus !== STATUS_CONSTANTS.AAI_ACTIVE"\r
 420                                        ng-disabled="!isConfigurationDataAvailiable(configuration)"\r
 421                                        data-tests-id="deleteConfigurationButton"\r
 422                                        data-nodrag\r
 423                                        ng-click="deleteConfiguration(aService, configuration)">\r
 424                                         <span class="glyphicon glyphicon-remove"></span>\r
 425                                     </a>\r
 426 \r
 427 \r
 428                                     <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
 429                                        ng-click="toggleConfigurationStatus(aService, configuration)"\r
 430                                        ng-if="isPermitted && allowConfigurationActions"\r
 431                                        ng-disabled="!isConfigurationDataAvailiable(configuration)"\r
 432                                        data-tests-id="activateDeactivateButton">\r
 433                                         {{configuration.nodeStatus === STATUS_CONSTANTS.AAI_ACTIVE ? "Deactivate" :\r
 434                                         "Activate"}}\r
 435                                     </a>\r
 436                                 </div>\r
 437                                 <ol ui-tree-nodes="" ng-model="configuration.ports" ng-class="{hidden: collapsed}">\r
 438                                     <li ng-repeat="port in configuration.ports" ui-tree-node>\r
 439                                         <div ui-tree-handle class="tree-node tree-node-content">\r
 440                                             PORT: {{port.portName}} | ORCH STATUS: {{port.portStatus}}\r
 441 \r
 442                                             <button type="button" data-tests-id="enableDisableButton"\r
 443                                                     class="pull-right btn btn-primary btn-xs"\r
 444                                                     ng-if="configuration.nodeStatus == STATUS_CONSTANTS.AAI_ACTIVE"\r
 445                                                     ng-disabled="!isConfigurationDataAvailiable(configuration)"\r
 446                                                     ng-click="togglePortStatus(aService, configuration, port)">\r
 447                                                 {{port.portStatus === STATUS_CONSTANTS.AAI_ENABLED ? "Disable" :\r
 448                                                 "Enable"}}\r
 449                                             </button>\r
 450                                         </div>\r
 451                                     </li>\r
 452                                 </ol>\r
 453                             </li>\r
 454                         </ol>\r
 455 \r
 456                         <ol id="pnfs-tree" ui-tree-nodes="" ng-model="pnfs"\r
 457                             ng-class="{hidden: collapsed || pnf.length === 0}">\r
 458                             <li ng-repeat="pnf in pnfs" ui-tree-node>\r
 459                                 <div ui-tree-handle class="tree-node tree-node-content">\r
 460                                     PNF: {{pnf}}\r
 461 \r
 462                                     <a class="dissociate-pnf pull-right btn btn-primary btn-xs" data-nodrag\r
 463                                        ng-click="dissociatePnf(pnf)" style="margin-right: 8px;">\r
 464                                         <span>Dissociate</span>\r
 465                                     </a>\r
 466                                 </div>\r
 467                             </li>\r
 468                         </ol>\r
 469                     </div>\r
 470                 </li>\r
 471             </ol>\r
 472         </div>\r
 473     </div>\r
 474 </div>\r