UI Feature flagging support

Change-Id: Ic2151dab6306c42364483e9064c01bab3dd7378b
Issue-ID: VID-208
Signed-off-by: Sonsino, Ofir (os0695) <os0695@intl.att.com>

8 files changed, 531 insertions, 336 deletions

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/change-management.html b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/change-management.html
index 65c8ec713..4f7cc3c02 100644
--- a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/change-management.html
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/change-management.html
@@ -1,3 +1,4 @@
+<script src="../controller/change-management.controller.js"></script>
 <link rel="stylesheet" type="text/css" href="app/vid/styles/change-management.css" />
 <link rel="stylesheet" type="text/css" href="app/vid/styles/change-management-icons.css" />
 <div class="changes-management">
@@ -46,20 +47,29 @@
                             </thead>
                             <tbody ng-show="!collapseInProgress">
 
-                                <tr  data-tests-id="active-table-cm-row" ng-repeat="changeManagement in vm.changeManagements | changeManagementsByStatuses:{statuses: ['FAILED', 'IN_PROGRESS', 'PENDING']}">
-                                    <th scope="row">{{changeManagement.instanceReferences.vnfInstanceName || 'No-Instance-Name'}}</th>
+                                <tr  data-tests-id="active-table-cm-row" ng-repeat="changeManagement in vm.changeManagements | changeManagementsByStatuses:{statuses: ['COMPLETE'], notContains: true}">
+                                    <th scope="row">{{
+                                        changeManagement.vnfNameFromScheduler ||
+                                        changeManagement.instanceReferences.vnfInstanceId ||
+                                        'No-Instance-Name'
+                                        }}</th>
                                     <td>{{changeManagement.requestScope}}</td>
                                     <td>{{changeManagement.requestType}}</td>
                                     <td>{{changeManagement.startTime}}</td>
-                                    <td class="centered" ng-if="changeManagement.requestStatus.requestState == 'FAILED'"><span class="icon-x" ng-click="vm.openFailedModal({details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
-                                    <td class="centered" ng-if="changeManagement.requestStatus.requestState == 'IN_PROGRESS'"><span class="icon-process" ng-click="vm.openInProgressModal({details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
-                                    <td class="centered" ng-if="changeManagement.requestStatus.requestState == 'PENDING'"><span class="icon-alert" ng-click="vm.openAlertModal({details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
+                                    <td class="centered" ng-if="changeManagement.requestStatus.requestState.toUpperCase() === 'FAILED'"><span class="icon-x" ng-click="vm.openFailedModal($event, {details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
+                                    <td class="centered" ng-if="changeManagement.requestStatus.requestState.toUpperCase() === 'IN_PROGRESS'"><span class="icon-process" ng-click="vm.openInProgressModal($event, {details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
+                                    <td class="centered"
+                                        ng-if="['PENDING_MANUAL_TASK','PENDING'].indexOf(changeManagement.requestStatus.requestState.toUpperCase()) !== -1"
+                                    ><span class="icon-alert" ng-click="vm.openAlertModal($event, {details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
+                                    <td class="centered"
+                                        ng-if="['FAILED','IN_PROGRESS','PENDING_MANUAL_TASK','PENDING'].indexOf(changeManagement.requestStatus.requestState.toUpperCase()) == -1"
+                                    ><span class="icon-alert" ng-click="vm.openFailedModal($event, {requestState: changeManagement.requestStatus.requestState, details: changeManagement.requestStatus.statusMessage, job: changeManagement})"></span></td>
                                 </tr>
                             </tbody>
                         </table>
                         </div>
                         <div class="table-wrapper">
-                        <table ng-if="vm.hasScheduler" class="table table-bordered"  data-tests-id="pending-table-cm" id="pending-table">
+                        <table class="table table-bordered"  data-tests-id="pending-table-cm" id="pending-table">
                             <thead ng-click="collapsePending=!collapsePending">
                             <tr class="table-headline-row">
                                 <th class="col-md-6">
@@ -96,8 +106,12 @@
                                     <td>{{changeManagement.scheduleRequest.domainData[1].value}}</td>
                                     <td>{{changeManagement.scheduleRequest.createDateTime }}</td><!--| date:"MM/dd/yyyy HH:mm:ss"-->
                                     <td>{{changeManagement.scheduleRequest.status}}</td>
-                                    <td class="centered"><span class="cancel-action" ng-class="{'icon-pending':changeManagement.scheduleRequest.status!=='Deleted', 'icon-deleted': changeManagement.scheduleRequest.status=='Deleted'}"
-                                                                ng-click="vm.openPendingModal($event, changeManagement)"></span></td>
+                                    <td class="centered"><span class="cancel-action"
+                                                               ng-class="{'icon-pending':changeManagement.scheduleRequest.status!=='Deleted', 'icon-deleted': changeManagement.scheduleRequest.status=='Deleted'}"
+                                                               ng-click="vm.openPendingModal($event, changeManagement)"
+                                                               ng-show="vm.isChangeManagementDeleted(changeManagement)"
+                                                               data-tests-id="icon-status-{{changeManagement.scheduleRequest.scheduleId}}"></span>
+                                    </td>
                                 </tr>
                             </tbody>
                         </table>
@@ -127,7 +141,11 @@
                                 <th></th>
                             </tr>
                             <tr ng-repeat="changeManagement in vm.changeManagements | changeManagementsByStatuses:{statuses: ['COMPLETE']}">
-                                <th scope="row">{{changeManagement.instanceReferences.vnfInstanceName || 'No-Instance-Name'}}</th>
+                                <th scope="row">{{
+                                    changeManagement.vnfNameFromScheduler ||
+                                    changeManagement.instanceReferences.vnfInstanceId ||
+                                    'No-Instance-Name'
+                                    }}</th>
                                 <td>{{changeManagement.requestScope}}</td>
                                 <td>{{changeManagement.requestType}}</td>
                                 <td>{{changeManagement.startTime}}</td>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm
index ca13ca2b7..75f6b68af 100755
--- a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/creationDialog.htm
@@ -1,40 +1,42 @@
-<div ng-controller="creationDialogController">

-

+<div  ng-controller="creationDialogController">

 	<div ng-show="isDialogVisible">

-		<div class="titleLine">

-			<img src="app/vid/images/spinner.gif"

-				ngx-visible="{{isSpinnerVisible}}"></img>

-			<h3 data-tests-id="create-modal-title">Create {{componentName}} -- {{createType}}</h3>

-		</div>

-

-		<div class="error" ng-show="isErrorVisible">

-			<img src="app/vid/images/error.png"></img>{{error}}

-		</div>

+		<iframe class="popup" scrolling="no" ng-if="!shouldShowOldPopup()" id="iframe_callback"  ng-src={{url}}></iframe>

+		<div ng-if="shouldShowOldPopup()">

+			<div class="titleLine">

+				<img src="app/vid/images/spinner.gif"

+					ngx-visible="{{isSpinnerVisible}}"></img>

+				<h3 data-tests-id="create-modal-title">Create {{componentName}} -- {{createType}}</h3>

+			</div>

 

-		<div ngx-visible="{{isDataVisible}}">

-			<parameter-block control="summaryControl"></parameter-block>

-			<h4>

-				User Provided Data (<img class="requiredIndicator"

-					src="app/vid/images/asterisk.png" height='10' width='10'></img> indicates required field)

-			</h4>

-			<parameter-block control="userProvidedControl"

-				callback="userParameterChanged(id);" editable></parameter-block>

-			<div class="prompt">

-				<p>

-					Enter Data and <span>Confirm</span> to<br />Create <span>{{componentName}}</span>

-				</p>

-				<p>

-					<span>Cancel</span> to Return to Previous Page.<br />Data entered

-					will be lost

-				</p>

+			<div class="error" ng-show="isErrorVisible">

+				<img src="app/vid/images/error.png"></img>{{error}}

 			</div>

 

-		</div>

-		<div class="buttonRow">

-			<button data-tests-id="confirmButton" ngx-enabled="{{isConfirmEnabled}}" att-button size="small"

-				ng-click="confirm();">Confirm</button>

-			<button type="button" data-tests-id="cancelButton" ng-click="cancel();" att-button

-				btn-type="primary" size="small">Cancel</button>

+			<div ngx-visible="{{isDataVisible}}">

+				<parameter-block control="summaryControl"></parameter-block>

+				<h4>

+					User Provided Data (<img class="requiredIndicator"

+						src="app/vid/images/asterisk.png" height='10' width='10'></img> indicates required field)

+				</h4>

+				<parameter-block control="userProvidedControl"

+					callback="userParameterChanged(id);" editable></parameter-block>

+				<div class="prompt">

+					<p>

+						Enter Data and <span>Confirm</span> to<br />Create <span>{{componentName}}</span>

+					</p>

+					<p>

+						<span>Cancel</span> to Return to Previous Page.<br />Data entered

+						will be lost

+					</p>

+				</div>

+

+			</div>

+			<div class="buttonRow">

+				<button data-tests-id="confirmButton" ngx-enabled="{{isConfirmEnabled}}" att-button size="small"

+					ng-click="confirm();">Confirm</button>

+				<button type="button" data-tests-id="cancelButton" ng-click="cancel();" att-button

+					btn-type="primary" size="small">Cancel</button>

+			</div>

 		</div>

 	</div>

 

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/detailsDialog.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/detailsDialog.htm
index 0e72e772c..7aebfd383 100755
--- a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/detailsDialog.htm
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/detailsDialog.htm
@@ -38,10 +38,10 @@
 

 	<h4>Instantiation Transactions</h4>

 

-	<pre class="log">{{log}}</pre>

+	<pre data-tests-id="detailsLog" class="log">{{log}}</pre>

 

 	<div class="buttonRow">

-		<button type="button" ng-click="close();" att-button

+			<button type="button" ng-click="close();" att-button data-tests-id="detailsCloseBtn"

 			btn-type="primary" size="small">Close</button>

 	</div>

 

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/iframe.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/iframe.htm
new file mode 100644
index 000000000..a708af999
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/iframe.htm
@@ -0,0 +1 @@
+<iframe ng-src="{{url}}"></iframe>
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/iframeDialog.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/iframeDialog.htm
new file mode 100644
index 000000000..3b2da52f7
--- /dev/null
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/iframeDialog.htm
@@ -0,0 +1,6 @@
+<div  ng-controller="iframeDialogController">
+	<div ng-if="isDialogVisible">
+		<iframe class="popup iframeDialog" scrolling="no" id="iframe_callback"  ng-src={{url}}></iframe>
+	</div>
+	<div ng-include="'app/vid/scripts/view-models/msoCommit.htm'"></div>
+</div>
\ No newline at end of file
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/instantiate.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/instantiate.htm
index 0740c07ef..64f713251 100755
--- a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/instantiate.htm
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/instantiate.htm
@@ -18,7 +18,7 @@
   ============LICENSE_END=========================================================

   -->

 

-<div ng-controller="InstantiationController">

+<div>

 

 	<div popup-window class="popupContents" ngx-show="{{popup.isVisible}}"

 		 ng-cloak>

@@ -26,6 +26,7 @@
 		<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]">

@@ -33,272 +34,441 @@
 			<label>Status:</label><span class="status">{{status}}</span>

 		</div>

 

-		<div ng-if="errorMsg != null"><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>

-

-		<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 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);">

-							<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"></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 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>

-					</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"></span>

-								</a>

-							</div>

-							<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">

-										<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"></span>

-										</a>

-										<div class="resume" ng-if="isPermitted&&(vfModule.nodeStatus==resumeStatus)">

-											<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"></span>

-										</a>

-									</div>

-								</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"></span>

-								</a>

-							</div>

-						</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_INACTIVE" data-tests-id="deleteConfigurationButton" data-nodrag ng-click="deleteConfiguration(aService.instance, 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.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" class="pull-right btn btn-primary btn-xs" ng-if="configuration.nodeStatus == STATUS_CONSTANTS.AAI_ACTIVE" 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 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>

-				</li>

-			</ol>

-		</div>

-	</div>

+        <div 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>

+

+        <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 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 data-tests-id="showAssignmentsButton" ng-disabled="!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>

+                            </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>

+                            </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"

+                                       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"

+                                       ng-disabled="!isConfigurationDataAvailiable(configuration)"

+                                       data-tests-id="activateDeactivateButton">

+                                        {{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"

+                                                    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 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>

diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/previousVersionDialog.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/previousVersionDialog.htm
index 2912c70bc..10cf33967 100644
--- a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/previousVersionDialog.htm
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/previousVersionDialog.htm
@@ -10,7 +10,7 @@
 		<div class="error" ng-show="isTableErrorVisible">
 			<img src="app/vid/images/error.png"></img>{{error}}
 		</div>
-		<table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+		<table att-table table-data="tableData" data-tests-id="Previous-version-pop-up-table" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
 		    <thead  att-table-row type="header">
 				<tr>
 					<th att-table-header key="action">Action</th>
@@ -25,8 +25,8 @@
 		        </tr>
 		    </thead>
 		    <tbody att-table-row type="body" row-repeat="row in tableData">
-		        <tr>
-		        	<td att-table-body ><button type=button ng-click="deployService(row)" att-button btn-type="{{deployButtonType}}" size="small">Deploy</button></td>
+		        <tr data-tests-id="Previous-version-pop-up-uuid-{{row['uuid']}}">
+		        	<td att-table-body ><button type=button data-tests-id="deploy-{{row['uuid']}}" ng-click="deployService(row)" att-button btn-type="{{deployButtonType}}" size="small">Deploy</button></td>
 	            	<td att-table-body ng-bind="row['uuid']"></td>
 	            	<td att-table-body ng-bind="row['invariantUUID']"></td>
 	            	<td att-table-body ng-bind="row['name']"></td>
@@ -41,7 +41,7 @@
 		
 		
 		<div class="buttonRow">
-			<button type="button" ng-click="cancelTable();" att-button
+			<button type="button" id="cancel" ng-click="cancelTable();" att-button
 				btn-type="primary" size="small">Cancel</button>
 		</div>
 	</div>
diff --git a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/serviceModels.htm b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/serviceModels.htm
index 17b87bfd2..446387590 100755
--- a/vid-app-common/src/main/webapp/app/vid/scripts/view-models/serviceModels.htm
+++ b/vid-app-common/src/main/webapp/app/vid/scripts/view-models/serviceModels.htm
@@ -17,7 +17,6 @@
   limitations under the License.

   ============LICENSE_END=========================================================

   -->

-

 <link rel="stylesheet" type="text/css" href="app/vid/styles/serviceModels.css" />

 <div popup-window class="popupContents" ngx-show="{{popup.isTablePopUpVisible}}" ng-cloak>

 	<div ng-include="'app/vid/scripts/view-models/previousVersionDialog.htm'"/>

@@ -42,8 +41,7 @@
 

 	<h1 class="heading1" style="margin-top:20px;">Browse SDC Service Models</h1>

 	<div style="margin-top:30px" ng-init="getServiceModels();">

-		

-		<table att-table table-data="services" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">

+		<table data-tests-id="serviceModelsTable" id="sdcModelsTable" att-table table-data="services" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">

 		    <thead  att-table-row type="header">

 				<tr>

 					<th att-table-header key="action">Action</th>

@@ -58,21 +56,21 @@
 					<th att-table-header key="actions">Action</th>

 		        </tr>

 		    </thead>

-		    <tbody att-table-row type="body" row-repeat="service in services">

-		        <tr>

-		        	<td att-table-body ><button class="deploy-service-class" type=button data-tests-id="deploy-{{service['uuid']}}" ng-click="deployService(service)" att-button btn-type="{{deployButtonType}}" size="small">Deploy</button></td>

-	            	<td att-table-body ng-bind="service['uuid']"></td>

-	            	<td att-table-body ng-bind="service['invariantUUID']"></td>

-	            	<td att-table-body ng-bind="service['name']"></td>

-	            	<td att-table-body ng-bind="service['version']"></td>

-	            	<td att-table-body ng-bind="service['category']"></td>

-	            	<td att-table-body ng-bind="service['distributionStatus']"></td>

-	            	<td att-table-body ng-bind="service['lastUpdaterUserId']"></td>

-	            	<td att-table-body ng-bind="service['toscaModelUrl']"></td>

-					<td att-table-body ng-show="service.hasPreviousVersion"><button type=button ng-click="loadPreviousVersionData(service['invariantUUID'],service['name'],service['version'])" att-button btn-type="primary" size="small">Previous Versions</button></td>

-	            	<td att-table-body ng-show="!service.hasPreviousVersion">&nbsp;</td>

-		        </tr>     

-		    </tbody>	  

+			<tbody att-table-row type="body" row-repeat="service in services">

+				<tr class="sdcServiceModel" data-tests-id="Browse_SDC_Service_Models-uuid-{{service['uuid']}}">

+					<td class="deploy" att-table-body ><button class="deploy-service-class" type=button data-tests-id="deploy-{{service['uuid']}}" ng-click="deployService(service)" att-button btn-type="{{deployButtonType}}" size="small">Deploy</button></td>

+					<td class="uuid" att-table-body ng-bind="service['uuid']"></td>

+					<td class="invariantUUID" att-table-body data-tests-id="Invariant-{{service['invariantUUID']}}" ng-bind="service['invariantUUID']"></td>

+					<td class="name" att-table-body ng-bind="service['name']"></td>

+					<td class="version" att-table-body ng-bind="service['version']"></td>

+					<td class="category" att-table-body ng-bind="service['category']"></td>

+					<td class="distributionStatus" att-table-body ng-bind="service['distributionStatus']"></td>

+					<td class="lastUpdaterUserId" att-table-body ng-bind="service['lastUpdaterUserId']"></td>

+					<td class="toscaModelUrl" att-table-body ng-bind="service['toscaModelUrl']"></td>

+					<td class="PreviousVersion" att-table-body data-tests-id="PreviousVersion-{{service['invariantUUID']}}" ng-show="service.hasPreviousVersion"><button type=button ng-click="loadPreviousVersionData(service['invariantUUID'],service['name'],service['version'])" att-button btn-type="primary" size="small">Previous Versions</button></td>

+					<td class="hasPreviousVersion" att-table-body ng-show="!service.hasPreviousVersion">&nbsp;</td>

+				</tr>

+			</tbody>

 		</table>

 		<table width='100%'>

 			<tr>

@@ -91,7 +89,7 @@
 					</td>

 			</tr>

 		</table>

-		

+

 	</div>

 	</div>