When opening a service instance from the instantiation status page, the More Actions...
[vid.git] / vid-app-common / src / main / webapp / app / vid / scripts / view-models / instantiate.htm
index 6399065..8856d18 100755 (executable)
-<!--\r
-  ============LICENSE_START=======================================================\r
-  VID\r
-  ================================================================================\r
-  Copyright (C) 2017 - 2019 AT&T Intellectual Property. All rights reserved.\r
-  ================================================================================\r
-  Licensed under the Apache License, Version 2.0 (the "License");\r
-  you may not use this file except in compliance with the License.\r
-  You may obtain a copy of the License at\r
-  \r
-       http://www.apache.org/licenses/LICENSE-2.0\r
-  \r
-  Unless required by applicable law or agreed to in writing, software\r
-  distributed under the License is distributed on an "AS IS" BASIS,\r
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
-  See the License for the specific language governing permissions and\r
-  limitations under the License.\r
-  ============LICENSE_END=========================================================\r
-  -->\r
-\r
-<div>\r
-\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/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 ng-include="'app/vid/scripts/view-models/iframeDialog.htm'"></div>\r
-    </div>\r
-    <div ng-controller="aaiSubscriberController" ng-init="getComponentList() ">\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 class="error-msg" ng-if="errorMsg != null" style="white-space: pre-line"><font color='red'>{{errorMsg}}\r
-            <pre>{{errorDetails | json}}</pre>\r
-        </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\r
-                class="glyphicon glyphicon-refresh"></span></a>\r
-        <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
-           data-tests-id="show-new-screen" ng-if="allowTransferToNewScreenAndShowButton()"\r
-           ng-click="navigateToNewEditViewScreen()" style="margin-right: 8px;">More actions</a>\r
-        <br>\r
-\r
-        <center>\r
-            <table att-table border="1" ng-model="service">\r
-                <tr>\r
-                    <th style="text-align: center" width="33%">SUBSCRIBER:\r
-                        {{service.instance.subscriberName}}\r
-                    </th>\r
-                    <th style="text-align: center" width="34%">SERVICE TYPE:\r
-                        {{service.instance.serviceType}}\r
-                    </th>\r
-                    <th data-tests-id="service-instanceId-th-id" style="text-align: center" width="33%">SERVICE INSTANCE\r
-                        ID: {{service.instance.serviceInstanceId}}\r
-                    </th>\r
-                <tr>\r
-                <tr>\r
-                    <td colspan='3' style="text-align: center">Service Instance\r
-                        Name: {{service.instance.name || "Not defined"}}\r
-                    </td>\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
-\r
-                    <div ng-if="isCR && collectionResource != null">\r
-                        <div ui-tree-handle class="tree-node tree-node-content">\r
-                            <a class="btn btn-success btn-xs" data-nodrag ng-click="this.toggle()">\r
-                                <span class="glyphicon"\r
-                                      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="isPermitted" data-tests-id="deleteServiceButton"\r
-                               class="pull-right btn btn-danger btn-xs" data-nodrag\r
-                               ng-click="deleteService(aService.instance);">\r
-                                <span class="glyphicon glyphicon-remove"></span>\r
-                            </a>\r
-\r
-                            <a class="pull-right btn btn-primary btn-xs" data-tests-id="infoServiceButton" data-nodrag\r
-                               ng-click="describeService(aService.instance)" style="margin-right: 8px;">\r
-                                <span class="glyphicon glyphicon-info-sign service-info"></span>\r
-                            </a>\r
-                        </div>\r
-                        <ol ui-tree-nodes="" ng-model="collections" ng-class="{hidden: collapsed}">\r
-                            <li ng-repeat="collection in collections" ui-tree-node>\r
-                                <div ui-tree-handle class="tree-node tree-node-content" data-tests-id="collectionDiv">\r
-                                    <a class="btn btn-success btn-xs" data-nodrag ng-click="this.toggle()">\r
-                                        <span class="glyphicon"\r
-                                              ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
-                                    </a>\r
-                                    COLLECTION: {{collection["collection-name"]}} | TYPE:\r
-                                    {{collection["collection-type"]}}\r
-                                </div>\r
-                                <ol ui-tree-nodes="" ng-model="networks" ng-class="{hidden: collapsed}">\r
-                                    <li ng-repeat="network in networks" ui-tree-node>\r
-                                        <div ui-tree-handle class="tree-node tree-node-content"\r
-                                             data-tests-id="collectionNetworkDiv">\r
-                                            NETWORK INSTANCE GROUP: {{network["network-id"]}} | ROLE:\r
-                                            {{network["network-role"]}} | TYPE: {{network["network-type"]}} | # OF\r
-                                            NETWORKS: {{collectionResource.networks.length}}\r
-                                        </div>\r
-                                    </li>\r
-                                </ol>\r
-                            </li>\r
-                        </ol>\r
-                    </div>\r
-                    <div ng-if="!isCR">\r
-                        <div ui-tree-handle class="tree-node tree-node-content">\r
-                            <a class="btn btn-success btn-xs"\r
-                               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
-                               data-nodrag ng-click="this.toggle()">\r
-                                <span class="glyphicon"\r
-                                      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"\r
-                               data-tests-id="deleteServiceButton" class="pull-right btn btn-danger btn-xs" data-nodrag\r
-                               ng-click="deleteService(aService.instance, serviceOrchestrationStatus);">\r
-                                <span class="glyphicon glyphicon-remove"></span>\r
-                            </a>\r
-                            <div class="pull-right btn-group"\r
-                                 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"\r
-                                        class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
-                                        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"\r
-                                       data-tests-id="addVNFOption-{{vnf.modelCustomizationName}}"\r
-                                       ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}}</a>\r
-\r
-                                </ul>\r
-                            </div>\r
-                            <div class="pull-right btn-group"\r
-                                 ng-if="aService.convertedModel.vnfs && !isObjectEmpty(aService.convertedModel.vnfs) && aService.convertedModel.isNewFlow && isPermitted">\r
-                                <button type="button" data-tests-id="addVNFButton"\r
-                                        class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
-                                        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
-                                    data-tests-id="addVnfsDropdown">\r
-                                    <li role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs">\r
-                                        <a data-tests-id="addVNFOption-{{vnf.modelCustomizationName}}"\r
-                                           ng-click="addVnfInstance(vnf, aService.instance.vnfs)">{{vnf.modelCustomizationName}}\r
-                                            {{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"\r
-                                 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"\r
-                                        class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
-                                        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}}"\r
-                                           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\r
-                               ng-click="describeService(aService.instance)" style="margin-right: 8px;">\r
-                                <span class="glyphicon glyphicon-info-sign service-info"></span>\r
-                            </a>\r
-                            <a data-tests-id="deactivateButton" ng-disabled="!isActivateDeactivateEnabled('deactivate')"\r
-                               class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="deactivateMSOInstance()"\r
-                               style="margin-right: 8px;">\r
-                                Deactivate\r
-                            </a>\r
-                            <a ng-if="!isActivateFabricConfiguration()" data-tests-id="activateButton" ng-disabled="!isActivateDeactivateEnabled('activate')"\r
-                               class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="activateMSOInstance()"\r
-                               style="margin-right: 8px;">\r
-                                Activate\r
-                            </a>\r
-                            <a ng-if="isActivateFabricConfiguration()" data-tests-id="activateFabricConfigurationButton" ng-disabled="!allConfigurationsAssigned"\r
-                               class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="activateFabricConfigurationMSO()"\r
-                               style="margin-right: 8px;">\r
-                                Activate Fabric Configuration\r
-                            </a>\r
-                            <a data-tests-id="showAssignmentsButton" ng-if="isShowAssignmentsEnabled()"\r
-                               class="pull-right btn btn-primary btn-xs" data-nodrag style="margin-right: 8px;"\r
-                               target="_blank" ng-href="{{showAssignmentsSDNC()}}">\r
-                                Show Assignments\r
-                            </a>\r
-                            <a data-tests-id="verifyServiceButton" ng-if="isShowVerifyService()" ng-disabled="!isEnableVerifyService()"\r
-                               class="pull-right btn btn-primary btn-xs" data-nodrag style="margin-right: 8px;"\r
-                               target="_blank" ng-click="activateVerifyService()">\r
-                                Verify Service\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"\r
-                                       ng-if="(vnf.vfModules && vnf.vfModules.length > 0) || (vnf.volumeGroups && vnf.volumeGroups.length > 0)"\r
-                                       data-nodrag ng-click="this.toggle()">\r
-                                        <span class="glyphicon"\r
-                                              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"\r
-                                       data-tests-id="deleteVNFButton" class="pull-right btn btn-danger btn-xs"\r
-                                       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"\r
-                                         ng-if="(hasVfModules(vnf.object) && (aService.convertedModel.isNewFlow)) && isPermitted">\r
-\r
-                                        <button type="button" data-tests-id="addVFModuleButton"\r
-                                                class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
-                                                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"\r
-                                               data-tests-id="addVFModuleOption-{{vfModule.modelCustomizationName}}"\r
-                                               ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}} </a>\r
-                                        </ul>\r
-                                    </div>\r
-\r
-\r
-                                    <div class="pull-right btn-group"\r
-                                         ng-if="(hasVfModules(vnf.object) && (!(aService.convertedModel.isNewFlow))) && isPermitted">\r
-\r
-                                        <button type="button" data-tests-id="addVFModuleButton"\r
-                                                class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
-                                                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"\r
-                                               data-tests-id="addVFModuleOption-{{vfModule.modelCustomizationName}}"\r
-                                               ng-click="addVfModuleInstance(vnf, vfModule)">{{vfModule.modelCustomizationName}}</a>\r
-                                            </li>\r
-                                        </ul>\r
-\r
-                                    </div>\r
-\r
-                                    <div class="pull-right btn-group"\r
-                                         ng-if="(hasVolumeGroups(vnf.object) && (aService.convertedModel.isNewFlow)) && isPermitted">\r
-                                        <button type="button" data-tests-id="addVolumeGroupButton"\r
-                                                class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
-                                                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"\r
-                                               data-tests-id="addVolumeGroupOption-{{volumeGroup.modelCustomizationName}}"\r
-                                               ng-click="addVolumeGroupInstance(vnf, volumeGroup)">{{volumeGroup.modelCustomizationName}}</a>\r
-                                        </ul>\r
-                                    </div>\r
-\r
-                                    <div class="pull-right btn-group"\r
-                                         ng-if="(hasVolumeGroups(vnf.object) && (!(aService.convertedModel.isNewFlow))) && isPermitted">\r
-\r
-                                        <button type="button" data-tests-id="addVolumeGroupButton"\r
-                                                class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"\r
-                                                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"\r
-                                               data-tests-id="addVolumeGroupOption-{{volumeGroup.modelCustomizationName}}"\r
-                                               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\r
-                                       ng-click="describeVnf(aService.instance, vnf)" style="margin-right: 8px;">\r
-                                        <span class="glyphicon glyphicon-info-sign vnf-info"></span>\r
-                                    </a>\r
-                                </div>\r
-                                <ol ui-tree-nodes="" ng-model="vnf.instanceGroups" ng-class="{hidden: collapsed}">\r
-                                    <li ng-repeat="instanceGroup in vnf.instanceGroups" ui-tree-node>\r
-                                        <div ui-tree-handle class="tree-node tree-node-content"\r
-                                             ng-class="'instanceGroupTreeNode'">\r
-                                            INSTANCE-GROUP: {{instanceGroup.name}} | TYPE: Instance-Group\r
-                                        </div>\r
-\r
-                                    </li>\r
-                                </ol>\r
-\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
-                                             ng-class="'vfModuleTreeNode-' + vfModule.nodeStatus.toLowerCase()">\r
-                                            <a class="btn btn-success btn-xs"\r
-                                               ng-if="(vfModule.volumeGroups && vfModule.volumeGroups.length > 0)"\r
-                                               data-nodrag ng-click="this.toggle()">\r
-                                                <span class="glyphicon"\r
-                                                      ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
-                                            </a>\r
-                                            VFMODULE: {{vfModule.name}} | TYPE: {{vfModule.nodeType}} | ORCH STATUS:\r
-                                            {{vfModule.nodeStatus}}\r
-                                            <!--  -->\r
-                                            <a class="pull-right btn btn-danger btn-xs" ng-if="isPermitted"\r
-                                               data-tests-id="deleteVFModuleButton-{{vfModule.name}}" data-nodrag\r
-                                               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\r
-                                               ng-click="describeVfModule(aService.instance, vfModule, vnf)"\r
-                                               style="margin-right: 8px;">\r
-                                                <span class="glyphicon glyphicon-info-sign vfmodule-info"></span>\r
-                                            </a>\r
-                                            <div class="resume"\r
-                                                 ng-if="isPermitted && isResumeShown(vfModule.nodeStatus)">\r
-                                                <a data-tests-id="resumeVFModuleButton-{{vfModule.name}}"\r
-                                                   class="pull-right btn btn-success btn-xs button-margin"\r
-                                                   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"\r
-                                            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}}\r
-                                                    | 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\r
-                                                       ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)"\r
-                                                       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"\r
-                                    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\r
-                                            STATUS: {{volumeGroup.nodeStatus}}\r
-                                            <a class="pull-right btn btn-danger btn-xs" ng-if="isPermitted"\r
-                                               data-tests-id="deleteVNFVolumeGroupButton" data-nodrag\r
-                                               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\r
-                                               ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)"\r
-                                               style="margin-right: 8px;">\r
-                                                <span class="glyphicon glyphicon-info-sign volume-group-info"></span>\r
-                                            </a>\r
-                                        </div>\r
-                                    </li>\r
-                                </ol>\r
-\r
-                                <ol ui-tree-nodes="" ng-model="vnf.networks"\r
-                                    ng-class="{hidden: collapsed}">\r
-                                    <li ng-repeat="network in vnf.networks" ui-tree-node>\r
-                                        <div ui-tree-handle class="tree-node tree-node-content">\r
-                                            NETWORK: {{network.name}} | TYPE: {{network.nodeType}} | ORCH\r
-                                            STATUS: {{network.nodeStatus}}\r
-                                        </div>\r
-                                        <ol ui-tree-nodes="" ng-model="network.vlans" ng-class="{hidden: collapsed}">\r
-                                            <li ng-repeat="vlan in network.vlans" ui-tree-node>\r
-                                                <div ui-tree-handle class="tree-node tree-node-content"\r
-                                                     ng-class="'vlansTreeNode'">\r
-                                                    VLAN: {{vlan.vlanIdOuter}} | TYPE: VLAN\r
-                                                </div>\r
-\r
-                                            </li>\r
-                                        </ol>\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:\r
-                                    {{network.nodeStatus}}\r
-\r
-                                    <a class="pull-right btn btn-danger btn-xs" ng-if="!isMacro() && isPermitted"\r
-                                       data-tests-id="deleteNetworkButton" data-nodrag\r
-                                       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\r
-                                       ng-click="describeNetwork(aService.instance, network)"\r
-                                       style="margin-right: 8px;">\r
-                                        <span class="glyphicon glyphicon-info-sign network-info"></span>\r
-                                    </a>\r
-                                </div>\r
-\r
-                                <ol ui-tree-nodes="" ng-model="network.vlans" ng-class="{hidden: collapsed}">\r
-                                    <li ng-repeat="vlan in network.vlans" ui-tree-node>\r
-                                        <div ui-tree-handle class="tree-node tree-node-content"\r
-                                             ng-class="'vlansTreeNode'">\r
-                                            VLAN: {{vlan.vlanIdOuter}} | TYPE: VLAN\r
-                                        </div>\r
-\r
-                                    </li>\r
-                                </ol>\r
-                            </li>\r
-                        </ol>\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"\r
-                                       ng-if="(configuration.ports && configuration.ports.length > 0)" data-nodrag\r
-                                       ng-click="this.toggle()">\r
-                                        <span class="glyphicon"\r
-                                              ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>\r
-                                    </a>\r
-                                    CONFIGURATION: {{configuration.name}} | TYPE: {{configuration.nodeType}} | ORCH\r
-                                    STATUS: {{configuration.nodeStatus}}\r
-\r
-                                    <a class="pull-right btn btn-danger btn-xs"\r
-                                       ng-if="!isMacro() && isPermitted && configuration.nodeStatus !== STATUS_CONSTANTS.AAI_ACTIVE"\r
-                                       ng-disabled="!isConfigurationDataAvailiable(configuration)"\r
-                                       data-tests-id="deleteConfigurationButton-{{configuration.name}}"\r
-                                       data-nodrag\r
-                                       ng-click="deleteConfiguration(aService, configuration)">\r
-                                        <span class="glyphicon glyphicon-remove"></span>\r
-                                    </a>\r
-\r
-\r
-                                    <a class="pull-right btn btn-primary btn-xs" data-nodrag\r
-                                       ng-click="toggleConfigurationStatus(aService, configuration)"\r
-                                       ng-if="isPermitted && allowConfigurationActions(configuration)"\r
-                                       ng-disabled="!isConfigurationDataAvailiable(configuration)"\r
-                                       data-tests-id="activateDeactivateButton-{{configuration.name}}">\r
-                                        {{configuration.nodeStatus === STATUS_CONSTANTS.AAI_ACTIVE ? "Deactivate" :\r
-                                        "Activate"}}\r
-                                    </a>\r
-                                </div>\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" data-tests-id="enableDisableButton-{{configuration.name}}-{{port.portName}}"\r
-                                                    class="pull-right btn btn-primary btn-xs"\r
-                                                    ng-if="configuration.nodeStatus == STATUS_CONSTANTS.AAI_ACTIVE"\r
-                                                    ng-disabled="!isConfigurationDataAvailiable(configuration)"\r
-                                                    ng-click="togglePortStatus(aService, configuration, port)">\r
-                                                {{port.portStatus === STATUS_CONSTANTS.AAI_ENABLED ? "Disable" :\r
-                                                "Enable"}}\r
-                                            </button>\r
-                                        </div>\r
-                                    </li>\r
-                                </ol>\r
-                            </li>\r
-                        </ol>\r
-\r
-                        <ol id="pnfs-tree" ui-tree-nodes="" ng-model="pnfs"\r
-                            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
-                                    <a ng-if="isMacro()===false" class="dissociate-pnf pull-right btn btn-primary btn-xs" data-nodrag\r
-                                       ng-click="dissociatePnf(pnf)" style="margin-right: 8px;">\r
-                                        <span>Dissociate</span>\r
-                                    </a>\r
-                                </div>\r
-                            </li>\r
-                        </ol>\r
-                    </div>\r
-                </li>\r
-            </ol>\r
-        </div>\r
-    </div>\r
-</div>\r
+<!--
+  ============LICENSE_START=======================================================
+  VID
+  ================================================================================
+  Copyright (C) 2017 - 2019 AT&T Intellectual Property. All rights reserved.
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ============LICENSE_END=========================================================
+  -->
+
+<div>
+
+    <div popup-window class="popupContents" ngx-show="{{popup.isVisible}}"
+         ng-cloak>
+        <div ng-include="'app/vid/scripts/view-models/creationDialog.htm'"></div>
+        <div ng-include="'app/vid/scripts/view-models/deleteResumeDialog.htm'"></div>
+        <div ng-include="'app/vid/scripts/view-models/detailsDialog.htm'"></div>
+        <div ng-include="'app/vid/scripts/view-models/statusDialog.htm'"></div>
+        <div ng-include="'app/vid/scripts/view-models/iframeDialog.htm'"></div>
+    </div>
+    <div ng-controller="aaiSubscriberController" ng-init="getComponentList() ">
+        <div class="statusLine" ng-class="{true:'aaiVisible', false:'aaiHidden'}[isSpinnerVisible]">
+            <img src="app/vid/images/spinner.gif"></img>
+            <label>Status:</label><span class="status">{{status}}</span>
+        </div>
+
+        <div class="error-msg" ng-if="errorMsg != null" style="white-space: pre-line"><font color='red'>{{errorMsg}}
+            <pre>{{errorDetails | json}}</pre>
+        </font></div>
+
+        <h1 class="heading1" style="margin-top: 20px;">{{isPermitted ? "View/Edit" : "View"}} Service Instance</h1>
+        <a class="btn btn-primary btn-xs pull-right" ng-click="reloadRoute();"><span
+                class="glyphicon glyphicon-refresh"></span></a>
+        <a class="pull-right btn btn-primary btn-xs" data-nodrag
+           data-tests-id="show-new-screen" ng-if="allowTransferToNewScreenAndShowButton(isPermitted)"
+           ng-click="navigateToNewEditViewScreen()" style="margin-right: 8px;">More actions</a>
+        <br>
+
+        <center>
+            <table att-table border="1" ng-model="service">
+                <tr>
+                    <th style="text-align: center" width="33%">SUBSCRIBER:
+                        {{service.instance.subscriberName}}
+                    </th>
+                    <th style="text-align: center" width="34%">SERVICE TYPE:
+                        {{service.instance.serviceType}}
+                    </th>
+                    <th data-tests-id="service-instanceId-th-id" style="text-align: center" width="33%">SERVICE INSTANCE
+                        ID: {{service.instance.serviceInstanceId}}
+                    </th>
+                <tr>
+                <tr>
+                    <td colspan='3' style="text-align: center">Service Instance
+                        Name: {{service.instance.name || "Not defined"}}
+                    </td>
+                <tr>
+            </table>
+
+        </center>
+
+        <div ui-tree data-drag-enabled="false" data-nodrop-enabled="true" style="margin: 30px">
+
+            <ol ui-tree-nodes="" ng-model="service">
+                <li ng-repeat="aService in [service]" ui-tree-node>
+
+                    <div ng-if="isCR && collectionResource != null">
+                        <div ui-tree-handle class="tree-node tree-node-content">
+                            <a class="btn btn-success btn-xs" data-nodrag ng-click="this.toggle()">
+                                <span class="glyphicon"
+                                      ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+                            </a>
+                            SERVICE INSTANCE: {{aService.instance.name}} | ORCH STATUS: {{serviceOrchestrationStatus}}
+                            <a ng-if="isPermitted" data-tests-id="deleteServiceButton"
+                               class="pull-right btn btn-danger btn-xs" data-nodrag
+                               ng-click="deleteService(aService.instance);">
+                                <span class="glyphicon glyphicon-remove"></span>
+                            </a>
+
+                            <a class="pull-right btn btn-primary btn-xs" data-tests-id="infoServiceButton" data-nodrag
+                               ng-click="describeService(aService.instance)" style="margin-right: 8px;">
+                                <span class="glyphicon glyphicon-info-sign service-info"></span>
+                            </a>
+                        </div>
+                        <ol ui-tree-nodes="" ng-model="collections" ng-class="{hidden: collapsed}">
+                            <li ng-repeat="collection in collections" ui-tree-node>
+                                <div ui-tree-handle class="tree-node tree-node-content" data-tests-id="collectionDiv">
+                                    <a class="btn btn-success btn-xs" data-nodrag ng-click="this.toggle()">
+                                        <span class="glyphicon"
+                                              ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+                                    </a>
+                                    COLLECTION: {{collection["collection-name"]}} | TYPE:
+                                    {{collection["collection-type"]}}
+                                </div>
+                                <ol ui-tree-nodes="" ng-model="networks" ng-class="{hidden: collapsed}">
+                                    <li ng-repeat="network in networks" ui-tree-node>
+                                        <div ui-tree-handle class="tree-node tree-node-content"
+                                             data-tests-id="collectionNetworkDiv">
+                                            NETWORK INSTANCE GROUP: {{network["network-id"]}} | ROLE:
+                                            {{network["network-role"]}} | TYPE: {{network["network-type"]}} | # OF
+                                            NETWORKS: {{collectionResource.networks.length}}
+                                        </div>
+                                    </li>
+                                </ol>
+                            </li>
+                        </ol>
+                    </div>
+                    <div ng-if="!isCR">
+                        <div ui-tree-handle class="tree-node tree-node-content">
+                            <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()">
+                                <span class="glyphicon"
+                                      ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+                            </a>
+                            SERVICE INSTANCE: {{aService.instance.name}} | ORCH STATUS: {{serviceOrchestrationStatus}}
+                            <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, serviceOrchestrationStatus);">
+                                <span class="glyphicon glyphicon-remove"></span>
+                            </a>
+                            <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">
+                                <button type="button" data-tests-id="addVNFButton"
+                                        class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"
+                                        aria-haspopup="true" aria-expanded="false">
+                                    Add node instance<span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs">
+                                    <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>
+
+                                </ul>
+                            </div>
+                            <div class="pull-right btn-group"
+                                 ng-if="aService.convertedModel.vnfs && !isObjectEmpty(aService.convertedModel.vnfs) && aService.convertedModel.isNewFlow && isPermitted">
+                                <button type="button" data-tests-id="addVNFButton"
+                                        class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"
+                                        aria-haspopup="true" aria-expanded="false">
+                                    Add node instance<span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu" ng-model="aService.convertedModel.vnfs"
+                                    data-tests-id="addVnfsDropdown">
+                                    <li role="menuitem" ng-repeat="(vnfUuid, vnf) in aService.convertedModel.vnfs">
+                                        <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>
+                                    </li>
+                                </ul>
+                            </div>
+                            <!--  <div class="pull-right btn-group" ng-if="aService.model.networks && !equals(aService.model.networks, {})">-->
+                            <div class="pull-right btn-group"
+                                 ng-if="aService.convertedModel.networks && (!(isObjectEmpty(aService.convertedModel.networks))) && isPermitted">
+                                <!--<div class="pull-right btn-group" ng-if="aService.model.networks">-->
+                                <button type="button" data-tests-id="addNetworkButton"
+                                        class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"
+                                        aria-haspopup="true" aria-expanded="false">
+                                    Add Network<span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu" ng-model="aService.convertedModel.networks">
+                                    <li ng-repeat="(networkUuid, network) in aService.convertedModel.networks">
+                                        <a data-tests-id="addNetworkOption-{{network.modelCustomizationName}}"
+                                           ng-click="addNetworkInstance(network, aService.instance.vnfs)">{{network.modelCustomizationName}}</a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <a class="pull-right btn btn-primary btn-xs" data-nodrag
+                               ng-click="describeService(aService.instance)" style="margin-right: 8px;">
+                                <span class="glyphicon glyphicon-info-sign service-info"></span>
+                            </a>
+                            <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;">
+                                Deactivate
+                            </a>
+                            <a ng-if="!isActivateFabricConfiguration()" 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;">
+                                Activate
+                            </a>
+                            <a ng-if="isActivateFabricConfiguration()" data-tests-id="activateFabricConfigurationButton" ng-disabled="!allConfigurationsAssigned"
+                               class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="activateFabricConfigurationMSO()"
+                               style="margin-right: 8px;">
+                                Activate Fabric Configuration
+                            </a>
+                            <a data-tests-id="showAssignmentsButton" ng-if="isShowAssignmentsEnabled()"
+                               class="pull-right btn btn-primary btn-xs" data-nodrag style="margin-right: 8px;"
+                               target="_blank" ng-href="{{showAssignmentsSDNC()}}">
+                                Show Assignments
+                            </a>
+                            <a data-tests-id="verifyServiceButton" ng-if="isShowVerifyService()" ng-disabled="!isEnableVerifyService()"
+                               class="pull-right btn btn-primary btn-xs" data-nodrag style="margin-right: 8px;"
+                               target="_blank" ng-click="activateVerifyService()">
+                                Verify Service
+                            </a>
+                        </div>
+                        <ol ui-tree-nodes="" ng-model="aService.instance.vnfs" ng-class="{hidden: collapsed}">
+                            <li ng-repeat="vnf in aService.instance.vnfs" ui-tree-node>
+                                <div ui-tree-handle class="tree-node tree-node-content">
+                                    <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()">
+                                        <span class="glyphicon"
+                                              ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+                                    </a>
+                                    VNF: {{vnf.name}} | TYPE: {{vnf.nodeType}} | ORCH STATUS: {{vnf.nodeStatus}}
+
+                                    <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)">
+                                        <span class="glyphicon glyphicon-remove"></span>
+                                    </a>
+                                    <!--  <div class="pull-right btn-group" ng-if="aService.convertedModel.vnfs[vnf.object['model-invariant-id']][vnf.object['model-version-id']].vfModules">-->
+                                    <div class="pull-right btn-group"
+                                         ng-if="(hasVfModules(vnf.object) && (aService.convertedModel.isNewFlow)) && isPermitted">
+
+                                        <button type="button" data-tests-id="addVFModuleButton"
+                                                class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"
+                                                aria-haspopup="true" aria-expanded="false">
+                                            Add VF-Module<span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu" ng-model="vfModule">
+                                            <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>
+                                        </ul>
+                                    </div>
+
+
+                                    <div class="pull-right btn-group"
+                                         ng-if="(hasVfModules(vnf.object) && (!(aService.convertedModel.isNewFlow))) && isPermitted">
+
+                                        <button type="button" data-tests-id="addVFModuleButton"
+                                                class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"
+                                                aria-haspopup="true" aria-expanded="false">
+                                            Add VF-Module<span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu" ng-model="vnf">
+                                            <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>
+                                            </li>
+                                        </ul>
+
+                                    </div>
+
+                                    <div class="pull-right btn-group"
+                                         ng-if="(hasVolumeGroups(vnf.object) && (aService.convertedModel.isNewFlow)) && isPermitted">
+                                        <button type="button" data-tests-id="addVolumeGroupButton"
+                                                class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"
+                                                aria-haspopup="true" aria-expanded="false">
+                                            Add Volume Group<span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu" ng-model="volumeGroup">
+                                            <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>
+                                        </ul>
+                                    </div>
+
+                                    <div class="pull-right btn-group"
+                                         ng-if="(hasVolumeGroups(vnf.object) && (!(aService.convertedModel.isNewFlow))) && isPermitted">
+
+                                        <button type="button" data-tests-id="addVolumeGroupButton"
+                                                class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"
+                                                aria-haspopup="true" aria-expanded="false">
+                                            Add Volume Group<span class="caret"></span>
+                                        </button>
+                                        <ul class="dropdown-menu" ng-model="vnf">
+                                            <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>
+                                            </li>
+                                        </ul>
+
+                                    </div>
+
+                                    <!-- 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;">
+                                        <span class="glyphicon glyphicon-exclamation-sign"></span>
+                                    </a>  -->
+                                    <a class="pull-right btn btn-primary btn-xs" data-nodrag
+                                       ng-click="describeVnf(aService.instance, vnf)" style="margin-right: 8px;">
+                                        <span class="glyphicon glyphicon-info-sign vnf-info"></span>
+                                    </a>
+                                </div>
+                                <ol ui-tree-nodes="" ng-model="vnf.instanceGroups" ng-class="{hidden: collapsed}">
+                                    <li ng-repeat="instanceGroup in vnf.instanceGroups" ui-tree-node>
+                                        <div ui-tree-handle class="tree-node tree-node-content"
+                                             ng-class="'instanceGroupTreeNode'">
+                                            INSTANCE-GROUP: {{instanceGroup.name}} | TYPE: Instance-Group
+                                        </div>
+
+                                    </li>
+                                </ol>
+
+                                <ol ui-tree-nodes="" ng-model="vnf.vfModules" ng-class="{hidden: collapsed}">
+                                    <li ng-repeat="vfModule in vnf.vfModules" ui-tree-node>
+                                        <div ui-tree-handle class="tree-node tree-node-content"
+                                             ng-class="'vfModuleTreeNode-' + vfModule.nodeStatus.toLowerCase()">
+                                            <a class="btn btn-success btn-xs"
+                                               ng-if="(vfModule.volumeGroups && vfModule.volumeGroups.length > 0)"
+                                               data-nodrag ng-click="this.toggle()">
+                                                <span class="glyphicon"
+                                                      ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+                                            </a>
+                                            VFMODULE: {{vfModule.name}} | TYPE: {{vfModule.nodeType}} | ORCH STATUS:
+                                            {{vfModule.nodeStatus}}
+                                            <!--  -->
+                                            <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)">
+                                                <span class="glyphicon glyphicon-remove"></span>
+                                            </a>
+                                            <div class="pull-right btn-group">
+                                                <!--   <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                                    Attach Volume Group<span class="caret"></span>
+                                                  </button>
+                                                  <ul class="dropdown-menu" ng-model="vnf.volumeGroups">
+                                                    <li ng-repeat="volumeGroup in vnf.availableVolumeGroups">
+                                                        <a ng-click="attachVolumeGroupInstance(vfModule, volumeGroup)">{{volumeGroup.name}}</a>
+                                                    </li>
+                                                  </ul> -->
+                                            </div>
+                                            <a class="pull-right btn btn-primary btn-xs" data-nodrag
+                                               ng-click="describeVfModule(aService.instance, vfModule, vnf)"
+                                               style="margin-right: 8px;">
+                                                <span class="glyphicon glyphicon-info-sign vfmodule-info"></span>
+                                            </a>
+                                            <div class="resume"
+                                                 ng-if="isPermitted && isResumeShown(vfModule.nodeStatus)">
+                                                <a data-tests-id="resumeVFModuleButton-{{vfModule.name}}"
+                                                   class="pull-right btn btn-success btn-xs button-margin"
+                                                   ng-click="resume(aService.instance, vfModule, vnf)">
+                                                    Resume
+                                                </a>
+                                            </div>
+
+                                        </div>
+                                        <ol ui-tree-nodes="" ng-model="vfModule.volumeGroups"
+                                            ng-class="{hidden: collapsed}">
+                                            <li ng-repeat="volumeGroup in vfModule.volumeGroups" ui-tree-node>
+                                                <div ui-tree-handle class="tree-node tree-node-content">
+                                                    VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}}
+                                                    | ORCH STATUS: {{volumeGroup.nodeStatus}}
+                                                    <!-- <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteVolumeGroup(aService.instance, vnf, vfModule, volumeGroup)">
+                                                        <span class="glyphicon glyphicon-remove"></span>
+                                                    </a> -->
+                                                    <a class="pull-right btn btn-primary btn-xs" data-nodrag
+                                                       ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)"
+                                                       style="margin-right: 8px;">
+                                                        <span class="glyphicon glyphicon-info-sign"></span>
+                                                    </a>
+                                                </div>
+                                            </li>
+                                        </ol>
+                                    </li>
+                                </ol>
+                                <ol ui-tree-nodes="" ng-model="vnf.availableVolumeGroups"
+                                    ng-class="{hidden: collapsed}">
+                                    <li ng-repeat="volumeGroup in vnf.availableVolumeGroups" ui-tree-node>
+                                        <div ui-tree-handle class="tree-node tree-node-content">
+                                            VOLUME GROUP: {{volumeGroup.name}} | TYPE: {{volumeGroup.nodeType}} | ORCH
+                                            STATUS: {{volumeGroup.nodeStatus}}
+                                            <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)">
+                                                <span class="glyphicon glyphicon-remove"></span>
+                                            </a>
+                                            <a class="pull-right btn btn-primary btn-xs" data-nodrag
+                                               ng-click="describeVolumeGroup(aService.instance, vnf, volumeGroup)"
+                                               style="margin-right: 8px;">
+                                                <span class="glyphicon glyphicon-info-sign volume-group-info"></span>
+                                            </a>
+                                        </div>
+                                    </li>
+                                </ol>
+
+                                <ol ui-tree-nodes="" ng-model="vnf.networks"
+                                    ng-class="{hidden: collapsed}">
+                                    <li ng-repeat="network in vnf.networks" ui-tree-node>
+                                        <div ui-tree-handle class="tree-node tree-node-content">
+                                            NETWORK: {{network.name}} | TYPE: {{network.nodeType}} | ORCH
+                                            STATUS: {{network.nodeStatus}}
+                                        </div>
+                                        <ol ui-tree-nodes="" ng-model="network.vlans" ng-class="{hidden: collapsed}">
+                                            <li ng-repeat="vlan in network.vlans" ui-tree-node>
+                                                <div ui-tree-handle class="tree-node tree-node-content"
+                                                     ng-class="'vlansTreeNode'">
+                                                    VLAN: {{vlan.vlanIdOuter}} | TYPE: VLAN
+                                                </div>
+
+                                            </li>
+                                        </ol>
+                                    </li>
+                                </ol>
+                            </li>
+                        </ol>
+
+                        <ol ui-tree-nodes="" ng-model="aService.instance.networks" ng-class="{hidden: collapsed}">
+                            <li ng-repeat="network in aService.instance.networks" ui-tree-node>
+                                <div ui-tree-handle class="tree-node tree-node-content">
+                                    NETWORK: {{network.name}} | TYPE: {{network.nodeType}} | ORCH STATUS:
+                                    {{network.nodeStatus}}
+
+                                    <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)">
+                                        <span class="glyphicon glyphicon-remove"></span>
+                                    </a>
+                                    <!--  <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="deleteNetwork(aService.instance, network)">
+                                       <span class="glyphicon glyphicon-remove"></span>
+                                   </a>-->
+                                    <a class="pull-right btn btn-primary btn-xs" data-nodrag
+                                       ng-click="describeNetwork(aService.instance, network)"
+                                       style="margin-right: 8px;">
+                                        <span class="glyphicon glyphicon-info-sign network-info"></span>
+                                    </a>
+                                </div>
+
+                                <ol ui-tree-nodes="" ng-model="network.vlans" ng-class="{hidden: collapsed}">
+                                    <li ng-repeat="vlan in network.vlans" ui-tree-node>
+                                        <div ui-tree-handle class="tree-node tree-node-content"
+                                             ng-class="'vlansTreeNode'">
+                                            VLAN: {{vlan.vlanIdOuter}} | TYPE: VLAN
+                                        </div>
+
+                                    </li>
+                                </ol>
+                            </li>
+                        </ol>
+
+                        <ol ui-tree-nodes="" ng-model="aService.instance.configurations" ng-class="{hidden: collapsed}">
+                            <li ng-repeat="configuration in aService.instance.configurations" ui-tree-node>
+                                <div ui-tree-handle class="tree-node tree-node-content">
+                                    <a class="btn btn-success btn-xs"
+                                       ng-if="(configuration.ports && configuration.ports.length > 0)" data-nodrag
+                                       ng-click="this.toggle()">
+                                        <span class="glyphicon"
+                                              ng-class="{'glyphicon-chevron-right': collapsed,'glyphicon-chevron-down': !collapsed}"></span>
+                                    </a>
+                                    CONFIGURATION: {{configuration.name}} | TYPE: {{configuration.nodeType}} | ORCH
+                                    STATUS: {{configuration.nodeStatus}}
+
+                                    <a class="pull-right btn btn-danger btn-xs"
+                                       ng-if="!isMacro() && isPermitted && configuration.nodeStatus !== STATUS_CONSTANTS.AAI_ACTIVE"
+                                       ng-disabled="!isConfigurationDataAvailiable(configuration)"
+                                       data-tests-id="deleteConfigurationButton-{{configuration.name}}"
+                                       data-nodrag
+                                       ng-click="deleteConfiguration(aService, configuration)">
+                                        <span class="glyphicon glyphicon-remove"></span>
+                                    </a>
+
+
+                                    <a class="pull-right btn btn-primary btn-xs" data-nodrag
+                                       ng-click="toggleConfigurationStatus(aService, configuration)"
+                                       ng-if="isPermitted && allowConfigurationActions(configuration)"
+                                       ng-disabled="!isConfigurationDataAvailiable(configuration)"
+                                       data-tests-id="activateDeactivateButton-{{configuration.name}}">
+                                        {{configuration.nodeStatus === STATUS_CONSTANTS.AAI_ACTIVE ? "Deactivate" :
+                                        "Activate"}}
+                                    </a>
+                                </div>
+                                <ol ui-tree-nodes="" ng-model="configuration.ports" ng-class="{hidden: collapsed}">
+                                    <li ng-repeat="port in configuration.ports" ui-tree-node>
+                                        <div ui-tree-handle class="tree-node tree-node-content">
+                                            PORT: {{port.portName}} | ORCH STATUS: {{port.portStatus}}
+
+                                            <button type="button" data-tests-id="enableDisableButton-{{configuration.name}}-{{port.portName}}"
+                                                    class="pull-right btn btn-primary btn-xs"
+                                                    ng-if="configuration.nodeStatus == STATUS_CONSTANTS.AAI_ACTIVE"
+                                                    ng-disabled="!isConfigurationDataAvailiable(configuration)"
+                                                    ng-click="togglePortStatus(aService, configuration, port)">
+                                                {{port.portStatus === STATUS_CONSTANTS.AAI_ENABLED ? "Disable" :
+                                                "Enable"}}
+                                            </button>
+                                        </div>
+                                    </li>
+                                </ol>
+                            </li>
+                        </ol>
+
+                        <ol id="pnfs-tree" ui-tree-nodes="" ng-model="pnfs"
+                            ng-class="{hidden: collapsed || pnf.length === 0}">
+                            <li ng-repeat="pnf in pnfs" ui-tree-node>
+                                <div ui-tree-handle class="tree-node tree-node-content">
+                                    PNF: {{pnf}}
+                                    <a ng-if="isMacro()===false" class="dissociate-pnf pull-right btn btn-primary btn-xs" data-nodrag
+                                       ng-click="dissociatePnf(pnf)" style="margin-right: 8px;">
+                                        <span>Dissociate</span>
+                                    </a>
+                                </div>
+                            </li>
+                        </ol>
+                    </div>
+                </li>
+            </ol>
+        </div>
+    </div>
+</div>