org.onap migration
[vid.git] / vid-app-common / src / main / webapp / app / vid / scripts / view-models / instantiate.htm
index e4bb67f..0740c07 100755 (executable)
 \r
 <div ng-controller="InstantiationController">\r
 \r
-    <div popup-window class="popupContents" ngx-show="{{popup.isVisible}}"\r
-               ng-cloak>\r
+       <div popup-window class="popupContents" ngx-show="{{popup.isVisible}}"\r
+                ng-cloak>\r
                <div ng-include="'app/vid/scripts/view-models/creationDialog.htm'"></div>\r
-               <div ng-include="'app/vid/scripts/view-models/deletionDialog.htm'"></div>\r
+               <div ng-include="'app/vid/scripts/view-models/deleteResumeDialog.htm'"></div>\r
                <div ng-include="'app/vid/scripts/view-models/detailsDialog.htm'"></div>\r
                <div ng-include="'app/vid/scripts/view-models/statusDialog.htm'"></div>\r
-       </div> \r
+       </div>\r
        <div ng-controller="aaiSubscriberController" ng-init="getComponentList() ">\r
-       <div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">\r
+               <div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">\r
                        <img src="app/vid/images/spinner.gif"></img>\r
                        <label>Status:</label><span class="status">{{status}}</span>\r
-       </div>\r
-       \r
-       <div ng-if="errorMsg != null"><font color='red'>{{errorMsg}}<pre>{{errorDetails | json}}</pre></font></div>\r
-       \r
-                       <h1 class="heading1" style="margin-top: 20px;">View/Edit Service Instance</h1>\r
-                       <a class="btn btn-primary btn-xs pull-right" ng-click="reloadRoute();" ><span class="glyphicon glyphicon-refresh"></span></a>\r
-               \r
+               </div>\r
+\r
+               <div ng-if="errorMsg != null"><font color='red'>{{errorMsg}}<pre>{{errorDetails | json}}</pre></font></div>\r
+\r
+               <h1 class="heading1" style="margin-top: 20px;">{{isPermitted ? "View/Edit" : "View"}} Service Instance</h1>\r
+               <a class="btn btn-primary btn-xs pull-right" ng-click="reloadRoute();" ><span class="glyphicon glyphicon-refresh"></span></a>\r
+\r
                <br>\r
 \r
                <center>\r
@@ -47,7 +47,7 @@
                                                {{service.instance.subscriberName}}</th>\r
                                        <th style="text-align: center" width="34%">SERVICE TYPE:\r
                                                {{service.instance.serviceType}}</th>\r
-                                       <th style="text-align: center" width="33%">SERVICE INSTANCE\r
+                                       <th data-tests-id="service-instanceId-th-id" style="text-align: center" width="33%">SERVICE INSTANCE\r
                                                ID: {{service.instance.serviceInstanceId}}</th>\r
                                <tr>\r
                                <tr>\r
                        </table>\r
 \r
                </center>\r
-       \r
-       <div ui-tree data-drag-enabled="false" data-nodrop-enabled="true" style="margin: 30px">\r
-               \r
-               <ol ui-tree-nodes="" ng-model="service"  >\r
-                       <li ng-repeat="aService in [service]" ui-tree-node>\r
-                               <div ui-tree-handle class="tree-node tree-node-content">\r
-                                       <a class="btn btn-success btn-xs" ng-if="(aService.instance.vnfs && aService.instance.vnfs.length > 0) || (aService.instance.networks && aService.instance.networks.length > 0)" data-nodrag ng-click="this.toggle()">\r
-                                               <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
-                                       </a>\r
-                                       SERVICE INSTANCE: {{aService.instance.name}}\r
-                                       <a ng-if="((isMacro()) || ( ( isObjectEmpty(aService.instance.vnfs) && isObjectEmpty(aService.instance.networks) ) ))" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteService(aService.instance);">\r
-                                               <span class="glyphicon glyphicon-remove"></span>\r
-                                       </a>\r
-                                       <div class="pull-right btn-group" ng-if="aService.convertedModel.vnfs && (!(isObjectEmpty(aService.convertedModel.vnfs))) && (!(aService.convertedModel.isNewFlow))">\r
-                                         <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
-                                               Add VNF<span class="caret"></span>\r
-                                         </button>\r
-                                         <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs">\r
-                                           <a role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs" ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}}</a>\r
-                                               \r
-                                         </ul>\r
-                                       </div>\r
-                                       <div class="pull-right btn-group" ng-if="aService.convertedModel.vnfs && (!(isObjectEmpty(aService.convertedModel.vnfs))) && (aService.convertedModel.isNewFlow)">\r
-                                         <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
-                                               Add VNF<span class="caret"></span>\r
-                                         </button>\r
-                                         <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs">\r
-                                           <li role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs">\r
-                                               <a ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}} {{vnf.nfType}} {{vnf.nfRole}} {{vnf.nfFunction}} {{vnf.nfCode}}</a>\r
-                                           </li>\r
-                                         </ul>\r
-                                       </div>\r
-                                        <!--  <div class="pull-right btn-group" ng-if="aService.model.networks && !equals(aService.model.networks, {})">-->\r
-                                        <div class="pull-right btn-group" ng-if="aService.convertedModel.networks && (!(isObjectEmpty(aService.convertedModel.networks)))">\r
-                                        <!--<div class="pull-right btn-group" ng-if="aService.model.networks">-->\r
-                                         <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
-                                               Add Network<span class="caret"></span>\r
-                                         </button>\r
-                                         <ul class="dropdown-menu" ng-model="aService.convertedModel.networks">\r
-                                           <li ng-repeat="(networkUuid, network) in aService.convertedModel.networks">\r
-                                               <a ng-click="addNetworkInstance(network, aService.instance.vnfs)">{{network.modelCustomizationName}}</a>\r
-                                           </li>\r
-                                         </ul>\r
+\r
+               <div ui-tree data-drag-enabled="false" data-nodrop-enabled="true" style="margin: 30px">\r
+\r
+                       <ol ui-tree-nodes="" ng-model="service"  >\r
+                               <li ng-repeat="aService in [service]" ui-tree-node>\r
+                                       <div ui-tree-handle class="tree-node tree-node-content">\r
+                                               <a class="btn btn-success btn-xs" 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)" data-nodrag ng-click="this.toggle()">\r
+                                                       <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
+                                               </a>\r
+                                               SERVICE INSTANCE: {{aService.instance.name}} | ORCH STATUS: {{serviceOrchestrationStatus}}\r
+                                               <a ng-if="((isMacro()) ||  (isObjectEmpty(aService.instance.vnfs) && isObjectEmpty(aService.instance.networks) && isObjectEmpty(aService.instance.pnfs))) && isPermitted" data-tests-id="deleteServiceButton" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteService(aService.instance);">\r
+                                                       <span class="glyphicon glyphicon-remove"></span>\r
+                                               </a>\r
+                                               <div class="pull-right btn-group" ng-if="(aService.convertedModel.vnfs||aService.convertedModel.vnfs) &&(!isObjectEmpty(aService.convertedModel.pnfs)||!isObjectEmpty(aService.convertedModel.pnfs))  && !aService.convertedModel.isNewFlow && isPermitted">\r
+                                                       <button type="button" data-tests-id="addVNFButton" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
+                                                               Add node instance<span class="caret"></span>\r
+                                                       </button>\r
+                                                       <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs">\r
+                                                               <a role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs" data-tests-id="addVNFOption-{{vnf.modelCustomizationName}}" ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}}</a>\r
+\r
+                                                       </ul>\r
+                                               </div>\r
+                                               <div class="pull-right btn-group" ng-if="aService.convertedModel.vnfs && !isObjectEmpty(aService.convertedModel.vnfs) && aService.convertedModel.isNewFlow && isPermitted">\r
+                                                       <button type="button" data-tests-id="addVNFButton" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
+                                                               Add node instance<span class="caret"></span>\r
+                                                       </button>\r
+                                                       <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs" data-tests-id="addVnfsDropdown">\r
+                                                               <li role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs">\r
+                                                                       <a data-tests-id="addVNFOption-{{vnf.modelCustomizationName}}" ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}} {{vnf.nfType}} {{vnf.nfRole}} {{vnf.nfFunction}} {{vnf.nfCode}}</a>\r
+                                                               </li>\r
+                                                       </ul>\r
+                                               </div>\r
+                                               <!--  <div class="pull-right btn-group" ng-if="aService.model.networks && !equals(aService.model.networks, {})">-->\r
+                                               <div class="pull-right btn-group" ng-if="aService.convertedModel.networks && (!(isObjectEmpty(aService.convertedModel.networks))) && isPermitted">\r
+                                                       <!--<div class="pull-right btn-group" ng-if="aService.model.networks">-->\r
+                                                       <button type="button" data-tests-id="addNetworkButton" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
+                                                               Add Network<span class="caret"></span>\r
+                                                       </button>\r
+                                                       <ul class="dropdown-menu" ng-model="aService.convertedModel.networks">\r
+                                                               <li ng-repeat="(networkUuid, network) in aService.convertedModel.networks">\r
+                                                                       <a data-tests-id="addNetworkOption-{{network.modelCustomizationName}}" ng-click="addNetworkInstance(network, aService.instance.vnfs)">{{network.modelCustomizationName}}</a>\r
+                                                               </li>\r
+                                                       </ul>\r
+                                               </div>\r
+                                               <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeService(aService.instance)" style="margin-right: 8px;">\r
+                                                       <span class="glyphicon glyphicon-info-sign"></span>\r
+                                               </a>\r
+                                               <a data-tests-id="deactivateButton" ng-disabled="!isActivateDeactivateEnabled('deactivate')" class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="deactivateMSOInstance()" style="margin-right: 8px;">\r
+                                                       Deactivate\r
+                                               </a>\r
+                                               <a data-tests-id="activateButton" ng-disabled="!isActivateDeactivateEnabled('activate')" class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="activateMSOInstance()" style="margin-right: 8px;">\r
+                                                       Activate\r
+                                               </a>\r
                                        </div>\r
-                                       <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeService(aService.instance)" style="margin-right: 8px;">\r
-                                               <span class="glyphicon glyphicon-info-sign"></span>\r
-                                       </a>\r
-                               </div>\r
-                               <ol ui-tree-nodes="" ng-model="aService.instance.vnfs" ng-class="{hidden: collapsed}">\r
-                                       <li ng-repeat="vnf in aService.instance.vnfs" ui-tree-node>\r
-                                               <div ui-tree-handle class="tree-node tree-node-content">\r
-                                                       <a class="btn btn-success btn-xs" ng-if="(vnf.vfModules && vnf.vfModules.length > 0) || (vnf.volumeGroups && vnf.volumeGroups.length > 0)" data-nodrag ng-click="this.toggle()">\r
-                                                               <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
-                                                       </a>\r
-                                                       VNF: {{vnf.name}} | TYPE: {{vnf.nodeType}} | ORCH STATUS: {{vnf.nodeStatus}}\r
-                                                       <a ng-if="(vnf.vfModules.length == 0) && (vnf.volumeGroups.length == 0)" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVnf(aService.instance, vnf)">\r
-                                                               <span class="glyphicon glyphicon-remove"></span>\r
-                                                       </a>\r
-                                                       <!--  <div class="pull-right btn-group" ng-if="aService.convertedModel.vnfs[vnf.object['model-invariant-id']][vnf.object['model-version-id']].vfModules">-->\r
-                                                       <div class="pull-right btn-group" ng-if="(hasVfModules(vnf.object) && (aService.convertedModel.isNewFlow))">\r
-                                                               \r
-                                                         <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
-                                                               Add VF-Module<span class="caret"></span>\r
-                                                         </button>\r
-                                                         <ul class="dropdown-menu" ng-model="vfModule" >\r
-                                                           <a ng-repeat="(vfModuleCustomizationUuid, vfModule) in aService.convertedModel.vnfs[vnf.object['model-customization-id']].vfModules" ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}} </a>\r
-                                                         </ul>\r
-                                                       </div>\r
-                                               \r
-                                                       \r
-                                                       <div class="pull-right btn-group" ng-if="(hasVfModules(vnf.object) && (!(aService.convertedModel.isNewFlow)))">\r
-                                                               \r
-                                                         <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
-                                                               Add VF-Module<span class="caret"></span>\r
-                                                         </button>\r
-                                                         <ul class="dropdown-menu" ng-model="vnf">\r
-                                                           <a ng-repeat="(vfModuleUuid, vfModule) in aService.convertedModel.vnfs[vnf.object['model-version-id']].vfModules" ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}}</a>\r
-                                                           </li>\r
-                                                         </ul>\r
-                                                               \r
+                                       <ol ui-tree-nodes="" ng-model="aService.instance.vnfs" ng-class="{hidden: collapsed}">\r
+                                               <li ng-repeat="vnf in aService.instance.vnfs" ui-tree-node>\r
+                                                       <div ui-tree-handle class="tree-node tree-node-content">\r
+                                                               <a class="btn btn-success btn-xs" ng-if="(vnf.vfModules && vnf.vfModules.length > 0) || (vnf.volumeGroups && vnf.volumeGroups.length > 0)" data-nodrag ng-click="this.toggle()">\r
+                                                                       <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
+                                                               </a>\r
+                                                               VNF: {{vnf.name}} | TYPE: {{vnf.nodeType}} | ORCH STATUS: {{vnf.nodeStatus}}\r
+\r
+                                                               <a ng-if="(vnf.vfModules.length == 0) && (vnf.volumeGroups.length == 0) && isPermitted" data-tests-id="deleteVNFButton" class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVnf(aService.instance, vnf)">\r
+                                                                       <span class="glyphicon glyphicon-remove"></span>\r
+                                                               </a>\r
+                                                               <!--  <div class="pull-right btn-group" ng-if="aService.convertedModel.vnfs[vnf.object['model-invariant-id']][vnf.object['model-version-id']].vfModules">-->\r
+                                                               <div class="pull-right btn-group" ng-if="(hasVfModules(vnf.object) && (aService.convertedModel.isNewFlow)) && isPermitted">\r
+\r
+                                                                       <button type="button" data-tests-id="addVFModuleButton" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
+                                                                               Add VF-Module<span class="caret"></span>\r
+                                                                       </button>\r
+                                                                       <ul class="dropdown-menu" ng-model="vfModule" >\r
+                                                                               <a ng-repeat="(vfModuleCustomizationUuid, vfModule) in aService.convertedModel.vnfs[vnf.object['model-customization-id']].vfModules" data-tests-id="addVFModuleOption-{{vfModule.modelCustomizationName}}" ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}} </a>\r
+                                                                       </ul>\r
+                                                               </div>\r
+\r
+\r
+                                                               <div class="pull-right btn-group" ng-if="(hasVfModules(vnf.object) && (!(aService.convertedModel.isNewFlow))) && isPermitted">\r
+\r
+                                                                       <button type="button" data-tests-id="addVFModuleButton" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
+                                                                               Add VF-Module<span class="caret"></span>\r
+                                                                       </button>\r
+                                                                       <ul class="dropdown-menu" ng-model="vnf">\r
+                                                                               <a ng-repeat="(vfModuleUuid, vfModule) in aService.convertedModel.vnfs[vnf.object['model-version-id']].vfModules" data-tests-id="addVFModuleOption-{{vfModule.modelCustomizationName}}" ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}}</a>\r
+                                                                               </li>\r
+                                                                       </ul>\r
+\r
+                                                               </div>\r
+\r
+                                                               <div class="pull-right btn-group" ng-if="(hasVolumeGroups(vnf.object) && (aService.convertedModel.isNewFlow)) && isPermitted">\r
+                                                                       <button type="button" data-tests-id="addVolumeGroupButton" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
+                                                                               Add Volume Group<span class="caret"></span>\r
+                                                                       </button>\r
+                                                                       <ul class="dropdown-menu" ng-model="volumeGroup" >\r
+                                                                               <a ng-repeat="(volumeGroupCustomizationUuid, volumeGroup) in aService.convertedModel.vnfs[vnf.object['model-customization-id']].volumeGroups" data-tests-id="addVolumeGroupOption-{{volumeGroup.modelCustomizationName}}" ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.modelCustomizationName}}</a>\r
+                                                                       </ul>\r
+                                                               </div>\r
+\r
+                                                               <div class="pull-right btn-group" ng-if="(hasVolumeGroups(vnf.object) && (!(aService.convertedModel.isNewFlow))) && isPermitted">\r
+\r
+                                                                       <button type="button" data-tests-id="addVolumeGroupButton" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
+                                                                               Add Volume Group<span class="caret"></span>\r
+                                                                       </button>\r
+                                                                       <ul class="dropdown-menu" ng-model="vnf">\r
+                                                                               <a ng-repeat="(volumeGroupUuid, volumeGroup) in aService.convertedModel.vnfs[vnf.object['model-version-id']].volumeGroups" data-tests-id="addVolumeGroupOption-{{volumeGroup.modelCustomizationName}}" ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.modelCustomizationName}}</a>\r
+                                                                               </li>\r
+                                                                       </ul>\r
+\r
+                                                               </div>\r
+\r
+                                                               <!-- 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
+                                    <span class="glyphicon glyphicon-exclamation-sign"></span>\r
+                                </a>  -->\r
+                                                               <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVnf(aService.instance, vnf)" style="margin-right: 8px;">\r
+                                                                       <span class="glyphicon glyphicon-info-sign"></span>\r
+                                                               </a>\r
                                                        </div>\r
-                               \r
-                                                       <div class="pull-right btn-group" ng-if="(hasVolumeGroups(vnf.object) && (aService.convertedModel.isNewFlow))">\r
-                                                               \r
-                                                         <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
-                                                               Add Volume Group<span class="caret"></span>\r
-                                                         </button>\r
-                                                         <ul class="dropdown-menu" ng-model="volumeGroup" >\r
-                                                           <a ng-repeat="(volumeGroupCustomizationUuid, volumeGroup) in aService.convertedModel.vnfs[vnf.object['model-customization-id']].volumeGroups" ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.modelCustomizationName}}</a>\r
-                                                         </ul>\r
+                                                       <ol ui-tree-nodes="" ng-model="vnf.vfModules" ng-class="{hidden: collapsed}">\r
+                                                               <li ng-repeat="vfModule in vnf.vfModules" ui-tree-node>\r
+                                                                       <div ui-tree-handle class="tree-node tree-node-content">\r
+                                                                               <a class="btn btn-success btn-xs" ng-if="(vfModule.volumeGroups && vfModule.volumeGroups.length > 0)" data-nodrag ng-click="this.toggle()">\r
+                                                                                       <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
+                                                                               </a>\r
+                                                                               VFMODULE: {{vfModule.name}} | TYPE: {{vfModule.nodeType}} | ORCH STATUS: {{vfModule.nodeStatus}}\r
+                                                                               <!--  -->\r
+                                                                               <a class="pull-right btn btn-danger btn-xs" ng-if="isPermitted" data-tests-id="deleteVFModuleButton-{{vfModule.name}}" data-nodrag ng-click="deleteVfModule(aService.instance, vfModule, vnf)">\r
+                                                                                       <span class="glyphicon glyphicon-remove"></span>\r
+                                                                               </a>\r
+                                                                               <div class="pull-right btn-group">\r
+                                                                                       <!--   <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
+                                                Attach Volume Group<span class="caret"></span>\r
+                                              </button>\r
+                                              <ul class="dropdown-menu" ng-model="vnf.volumeGroups">\r
+                                                <li ng-repeat="volumeGroup in vnf.availableVolumeGroups">\r
+                                                    <a ng-click="attachVolumeGroupInstance(vfModule, volumeGroup)">{{volumeGroup.name}}</a>\r
+                                                </li>\r
+                                              </ul> -->\r
+                                                                               </div>\r
+                                                                               <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVfModule(aService.instance, vfModule, vnf)" style="margin-right: 8px;">\r
+                                                                                       <span class="glyphicon glyphicon-info-sign"></span>\r
+                                                                               </a>\r
+                                                                               <div class="resume" ng-if="isPermitted&&(vfModule.nodeStatus==resumeStatus)">\r
+                                                                                       <a data-tests-id="resumeVFModuleButton-{{vfModule.name}}" class="pull-right btn btn-success btn-xs button-margin" ng-click="resume(aService.instance, vfModule, vnf)" >\r
+                                                                                               Resume\r
+                                                                                       </a>\r
+                                                                               </div>\r
+\r
+                                                                       </div>\r
+                                                                       <ol ui-tree-nodes="" ng-model="vfModule.volumeGroups" ng-class="{hidden: collapsed}">\r
+                                                                               <li ng-repeat="volumeGroup in vfModule.volumeGroups" ui-tree-node>\r
+                                                                                       <div ui-tree-handle class="tree-node tree-node-content">\r
+                                                                                               VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}} | ORCH STATUS: {{volumeGroup.nodeStatus}}\r
+                                                                                               <!-- <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVolumeGroup(aService.instance, vnf, vfModule, volumeGroup)">\r
+                                                    <span class="glyphicon glyphicon-remove"></span>\r
+                                                </a> -->\r
+                                                                                               <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)" style="margin-right: 8px;">\r
+                                                                                                       <span class="glyphicon glyphicon-info-sign"></span>\r
+                                                                                               </a>\r
+                                                                                       </div>\r
+                                                                               </li>\r
+                                                                       </ol>\r
+                                                               </li>\r
+                                                       </ol>\r
+                                                       <ol ui-tree-nodes="" ng-model="vnf.availableVolumeGroups" ng-class="{hidden: collapsed}">\r
+                                                               <li ng-repeat="volumeGroup in vnf.availableVolumeGroups" ui-tree-node>\r
+                                                                       <div ui-tree-handle class="tree-node tree-node-content">\r
+                                                                               VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}} | ORCH STATUS: {{volumeGroup.nodeStatus}}\r
+                                                                               <a class="pull-right btn btn-danger btn-xs" ng-if="isPermitted" data-tests-id="deleteVNFVolumeGroupButton" data-nodrag ng-click="deleteVnfVolumeGroup(aService.instance, vnf, volumeGroup)">\r
+                                                                                       <span class="glyphicon glyphicon-remove"></span>\r
+                                                                               </a>\r
+                                                                               <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)" style="margin-right: 8px;">\r
+                                                                                       <span class="glyphicon glyphicon-info-sign"></span>\r
+                                                                               </a>\r
+                                                                       </div>\r
+                                                               </li>\r
+                                                       </ol>\r
+                                               </li>\r
+                                       </ol>\r
+\r
+                                       <ol ui-tree-nodes="" ng-model="aService.instance.networks" ng-class="{hidden: collapsed}">\r
+                                               <li ng-repeat="network in aService.instance.networks" ui-tree-node>\r
+                                                       <div ui-tree-handle class="tree-node tree-node-content">\r
+                                                               NETWORK: {{network.name}} | TYPE: {{network.nodeType}} | ORCH   STATUS: {{network.nodeStatus}}\r
+\r
+                                                               <a class="pull-right btn btn-danger btn-xs" ng-if="!isMacro() && isPermitted" data-tests-id="deleteNetworkButton" data-nodrag ng-click="deleteNetwork(aService.instance, network)">\r
+                                                                       <span class="glyphicon glyphicon-remove"></span>\r
+                                                               </a>\r
+                                                               <!--  <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteNetwork(aService.instance, network)">\r
+                                   <span class="glyphicon glyphicon-remove"></span>\r
+                               </a>-->\r
+                                                               <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeNetwork(aService.instance, network)" style="margin-right: 8px;">\r
+                                                                       <span class="glyphicon glyphicon-info-sign"></span>\r
+                                                               </a>\r
                                                        </div>\r
-                               \r
-                                                       <div class="pull-right btn-group" ng-if="(hasVolumeGroups(vnf.object) && (!(aService.convertedModel.isNewFlow)))">\r
-                                                               \r
-                                                         <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
-                                                               Add Volume Group<span class="caret"></span>\r
-                                                         </button>\r
-                                                         <ul class="dropdown-menu" ng-model="vnf">\r
-                                                           <a ng-repeat="(volumeGroupUuid, volumeGroup) in aService.convertedModel.vnfs[vnf.object['model-version-id']].volumeGroups" ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.modelCustomizationName}}</a>\r
-                                                           </li>\r
-                                                         </ul>\r
-                                                               \r
+                                               </li>\r
+                                       </ol>\r
+\r
+\r
+                                       <ol ui-tree-nodes="" ng-model="aService.instance.configurations" ng-class="{hidden: collapsed}">\r
+                                               <li ng-repeat="configuration in aService.instance.configurations" ui-tree-node>\r
+                                                       <div ui-tree-handle class="tree-node tree-node-content">\r
+                                                               <a class="btn btn-success btn-xs" ng-if="(configuration.ports && configuration.ports.length > 0)" data-nodrag ng-click="this.toggle()">\r
+                                                                       <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
+                                                               </a>\r
+                                                               CONFIGURATION: {{configuration.name}} | TYPE: {{configuration.nodeType}} | ORCH STATUS: {{configuration.nodeStatus}}\r
+\r
+                                                               <a class="pull-right btn btn-danger btn-xs" ng-if="!isMacro() && isPermitted && configuration.nodeStatus === STATUS_CONSTANTS.AAI_INACTIVE" data-tests-id="deleteConfigurationButton" data-nodrag ng-click="deleteConfiguration(aService.instance, configuration)">\r
+                                                                       <span class="glyphicon glyphicon-remove"></span>\r
+                                                               </a>\r
+\r
+                                                               <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="toggleConfigurationStatus(aService, configuration)" ng-if="isPermitted && allowConfigurationActions">\r
+                                                                       {{configuration.nodeStatus === STATUS_CONSTANTS.AAI_ACTIVE ? "Deactivate" : "Activate"}}\r
+                                                               </a>\r
                                                        </div>\r
-                                                       \r
-                                                   <!-- 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
-                                <span class="glyphicon glyphicon-exclamation-sign"></span>\r
-                            </a>  -->\r
-                                                       <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVnf(aService.instance, vnf)" style="margin-right: 8px;">\r
-                                                               <span class="glyphicon glyphicon-info-sign"></span>\r
-                                                       </a>\r
-                                               </div>\r
-                                               <ol ui-tree-nodes="" ng-model="vnf.vfModules" ng-class="{hidden: collapsed}">\r
-                                                       <li ng-repeat="vfModule in vnf.vfModules" ui-tree-node>\r
-                                                               <div ui-tree-handle class="tree-node tree-node-content">\r
-                                                                       <a class="btn btn-success btn-xs" ng-if="(vfModule.volumeGroups && vfModule.volumeGroups.length > 0)" data-nodrag ng-click="this.toggle()">\r
-                                                                               <span class="glyphicon" ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
-                                                                       </a>\r
-                                                                       VFMODULE: {{vfModule.name}} | TYPE: {{vfModule.nodeType}} | ORCH STATUS: {{vfModule.nodeStatus}}\r
-                                                                       <!--  -->\r
-                                                                       <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVfModule(aService.instance, vfModule, vnf)">\r
-                                                                               <span class="glyphicon glyphicon-remove"></span>\r
-                                                                       </a>\r
-                                                                       <div class="pull-right btn-group">\r
-                                                                       <!--   <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\r
-                                                                               Attach Volume Group<span class="caret"></span>\r
-                                                                         </button> \r
-                                                                         <ul class="dropdown-menu" ng-model="vnf.volumeGroups">\r
-                                                                           <li ng-repeat="volumeGroup in vnf.availableVolumeGroups">\r
-                                                                               <a ng-click="attachVolumeGroupInstance(vfModule, volumeGroup)">{{volumeGroup.name}}</a>\r
-                                                                           </li>\r
-                                                                         </ul> -->\r
+                                                       <ol ui-tree-nodes="" ng-model="configuration.ports" ng-class="{hidden: collapsed}">\r
+                                                               <li ng-repeat="port in configuration.ports" ui-tree-node>\r
+                                                                       <div ui-tree-handle class="tree-node tree-node-content">\r
+                                                                               PORT: {{port.portName}} | ORCH STATUS: {{port.portStatus}}\r
+\r
+                                                                               <button type="button" class="pull-right btn btn-primary btn-xs" ng-if="configuration.nodeStatus == STATUS_CONSTANTS.AAI_ACTIVE" ng-click="togglePortStatus(aService, configuration, port)">\r
+                                                                                       {{port.portStatus === STATUS_CONSTANTS.AAI_ENABLED ? "Disable" : "Enable"}}\r
+                                                                               </button>\r
                                                                        </div>\r
-                                                                       <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVfModule(aService.instance, vfModule, vnf)" style="margin-right: 8px;">\r
-                                                                               <span class="glyphicon glyphicon-info-sign"></span>\r
-                                                                       </a>\r
-                                                               </div>\r
-                                                               <ol ui-tree-nodes="" ng-model="vfModule.volumeGroups" ng-class="{hidden: collapsed}">\r
-                                                                       <li ng-repeat="volumeGroup in vfModule.volumeGroups" ui-tree-node>\r
-                                                                               <div ui-tree-handle class="tree-node tree-node-content">\r
-                                                                                       VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}} | ORCH STATUS: {{volumeGroup.nodeStatus}}\r
-                                                                                       <!-- <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVolumeGroup(aService.instance, vnf, vfModule, volumeGroup)">\r
-                                                                                               <span class="glyphicon glyphicon-remove"></span>\r
-                                                                                       </a> -->\r
-                                                                                       <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)" style="margin-right: 8px;">\r
-                                                                                               <span class="glyphicon glyphicon-info-sign"></span>\r
-                                                                                       </a>\r
-                                                                               </div>\r
-                                                                       </li>\r
-                                                               </ol>\r
-                                                       </li>\r
-                                               </ol>\r
-                                               <ol ui-tree-nodes="" ng-model="vnf.availableVolumeGroups" ng-class="{hidden: collapsed}">\r
-                                                       <li ng-repeat="volumeGroup in vnf.availableVolumeGroups" ui-tree-node>\r
-                                                               <div ui-tree-handle class="tree-node tree-node-content">\r
-                                                                       VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}} | ORCH STATUS: {{volumeGroup.nodeStatus}}\r
-                                                                       <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVnfVolumeGroup(aService.instance, vnf, volumeGroup)">\r
-                                                                               <span class="glyphicon glyphicon-remove"></span>\r
-                                                                       </a>\r
-                                                                       <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)" style="margin-right: 8px;">\r
-                                                                               <span class="glyphicon glyphicon-info-sign"></span>\r
-                                                                       </a>\r
-                                                               </div>\r
-                                                       </li>\r
-                                               </ol>\r
-                                       </li>\r
-                               </ol>\r
-                               <ol ui-tree-nodes="" ng-model="aService.instance.networks" ng-class="{hidden: collapsed}">\r
-                                       <li ng-repeat="network in aService.instance.networks" ui-tree-node>\r
-                                               <div ui-tree-handle class="tree-node tree-node-content">\r
-                                                       NETWORK: {{network.name}} | TYPE: {{network.nodeType}} | ORCH   STATUS: {{network.nodeStatus}}\r
-                                                       \r
-                                                       <a class="pull-right btn btn-danger btn-xs" ng-if="(!isMacro())" data-nodrag ng-click="deleteNetwork(aService.instance, network)">\r
-                                                               <span class="glyphicon glyphicon-remove"></span>\r
-                                                       </a> \r
-                                                        <!--  <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteNetwork(aService.instance, network)">\r
-                                                               <span class="glyphicon glyphicon-remove"></span>\r
-                                                       </a>-->\r
-                                                       <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="describeNetwork(aService.instance, network)" style="margin-right: 8px;">\r
-                                                               <span class="glyphicon glyphicon-info-sign"></span>\r
-                                                       </a>\r
-                                               </div>\r
-                                       </li>\r
-                               </ol>\r
-                       </li>\r
-               </ol>\r
+                                                               </li>\r
+                                                       </ol>\r
+                                               </li>\r
+                                       </ol>\r
+\r
+                                       <ol id="pnfs-tree" ui-tree-nodes="" ng-model="pnfs" ng-class="{hidden: collapsed || pnf.length === 0}">\r
+                                               <li ng-repeat="pnf in pnfs" ui-tree-node>\r
+                                                       <div ui-tree-handle class="tree-node tree-node-content">\r
+                                                               PNF: {{pnf}}\r
+\r
+                                                               <a class="dissociate-pnf pull-right btn btn-primary btn-xs" data-nodrag ng-click="dissociatePnf(pnf)" style="margin-right: 8px;">\r
+                                                                       <span>Dissociate</span>\r
+                                                               </a>\r
+                                                       </div>\r
+                                               </li>\r
+                                       </ol>\r
+                               </li>\r
+                       </ol>\r
                </div>\r
        </div>\r
 </div>\r