bug: Fix misc issues with Dispo UI

Change-Id: I215ee35bf05a1e1cda6b8a9f59c88eb901f51631

6 files changed, 305 insertions, 66 deletions

diff --git a/plugins/org.eclipse.osee.web.ui/src/dispo/css/user.css b/plugins/org.eclipse.osee.web.ui/src/dispo/css/user.css
index 2c8c97baf90..66336a6c6d2 100644
--- a/plugins/org.eclipse.osee.web.ui/src/dispo/css/user.css
+++ b/plugins/org.eclipse.osee.web.ui/src/dispo/css/user.css
@@ -33,7 +33,7 @@
 }
 
 #annotationsGrid {
-	    margin-top: 20px;
+	    margin-top: 35px;
 		background-color: lightslategray;
 }
 
@@ -42,13 +42,27 @@
 }
 
 #itemSelectedBar {
-    height: 25px;
+    height: 40px;
     width: 100%;
     position: fixed;
     background-color: lightcyan;
     border-bottom: 3px solid Black;
 }
 
+#itemSelectedText {
+    overflow: auto;
+    height: 100%;
+    display: inline-block;
+}
+
+#itemSelectedFailureText {
+    margin-top: 6px;
+    margin-bottom: 6px;
+    overflow: auto;
+    height: 100%;
+    display: inline-block;
+}
+
 
 #compareText {
 	width: 110px;
diff --git a/plugins/org.eclipse.osee.web.ui/src/dispo/js/ColumnFactory.js b/plugins/org.eclipse.osee.web.ui/src/dispo/js/ColumnFactory.js
index 01379b9d1bd..936a991061f 100644
--- a/plugins/org.eclipse.osee.web.ui/src/dispo/js/ColumnFactory.js
+++ b/plugins/org.eclipse.osee.web.ui/src/dispo/js/ColumnFactory.js
@@ -3,7 +3,7 @@ app.factory('ColumnFactory', function() {
 	
 	ColumnFactory.getColumns = function(dispoType, width) {
 		var toReturn; 
-        if(window.width < 1000) {
+        if(width < 1000) {
         	if(dispoType = '') {
         		toReturn = smallColumnsTestScript;
         	} else {
@@ -77,7 +77,14 @@ app.factory('ColumnFactory', function() {
         enableCellEdit: false,
         cellTemplate: assigneeCellTmpl,
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
-    }, {
+    }, 
+    {
+        field: 'team',
+        displayName: 'Team',
+        enableCellEdit: false,
+        visible: true,
+        headerCellTemplate: '/dispo/legacy/templates/nameFilterTmpl.html'
+    },{
         field: 'itemNotes',
         displayName: 'Script Notes',
         cellTemplate: cellEditNotes,
@@ -137,37 +144,49 @@ app.factory('ColumnFactory', function() {
 	var wideColumnsTestScript = [{
         field: 'name',
         displayName: 'Name',
-        width: 350,
+        width: '22%',
         cellTemplate: origCellTmpl,
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     }, {
         field: 'status',
         displayName: 'Status',
-        width: 100,
+        width: '10%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     }, {
         field: 'totalPoints',
         displayName: 'Total',
-        width: 100,
+        width: '10%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     }, {
         field: 'failureCount',
         displayName: 'Failure Count',
+        width: '7%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     }, {
         field: 'discrepanciesAsRanges',
         displayName: 'Failed Points',
+        width: '15%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     }, {
         field: 'assignee',
         displayName: 'Assignee',
         enableCellEdit: false,
         cellTemplate: assigneeCellTmpl,
+        width: '12%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
-    }, {
+    }, 
+    {
+        field: 'team',
+        displayName: 'Team',
+        enableCellEdit: false,
+        visible: true,
+        width: '7%',
+        headerCellTemplate: '/dispo/legacy/templates/nameFilterTmpl.html'
+    },{
         field: 'itemNotes',
         displayName: 'Script Notes',
         cellTemplate: cellEditNotes,
+        width: '12%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     },{
         field: 'needsRerun',
@@ -175,7 +194,7 @@ app.factory('ColumnFactory', function() {
         enableCellEdit: false,
         cellTemplate: chkBoxTemplate,
         sortFn: checkboxSorting,
-        width: 70
+        width: '10%',
     },{
         field: 'lastUpdated',
         displayName: 'Last Ran',
@@ -249,7 +268,14 @@ app.factory('ColumnFactory', function() {
         enableCellEdit: false,
         cellTemplate: assigneeCellTmpl,
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
-    }, {
+    },
+    {
+        field: 'team',
+        displayName: 'Team',
+        enableCellEdit: false,
+        visible: true,
+        headerCellTemplate: '/dispo/legacy/templates/nameFilterTmpl.html'
+    },{
         field: 'itemNotes',
         displayName: 'Script Notes',
         cellTemplate: cellEditNotes,
@@ -321,37 +347,49 @@ app.factory('ColumnFactory', function() {
 	var wideColumnsCoverage = [{
         field: 'name',
         displayName: 'Name',
-        width: 350,
+        width: '22%',
         cellTemplate: origCellTmpl,
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     }, {
         field: 'status',
         displayName: 'Status',
-        width: 100,
+        width: '10%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     }, {
         field: 'totalPoints',
         displayName: 'Total',
-        width: 100,
+        width: '10%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     }, {
         field: 'failureCount',
         displayName: 'Failure Count',
+        width: '7%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     }, {
         field: 'discrepanciesAsRanges',
         displayName: 'Failed Points',
+        width: '15%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     }, {
         field: 'assignee',
         displayName: 'Assignee',
         enableCellEdit: false,
         cellTemplate: assigneeCellTmpl,
+        width: '12%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
+    }, 
+    {
+        field: 'team',
+        displayName: 'Team',
+        enableCellEdit: false,
+        visible: true,
+        width: '7%',
+        headerCellTemplate: '/dispo/legacy/templates/nameFilterTmpl.html'
     }, {
         field: 'itemNotes',
         displayName: 'Script Notes',
         cellTemplate: cellEditNotes,
+        width: '10%',
         headerCellTemplate: '/dispo/views/nameFilterTmpl.html'
     },{
         field: 'needsRerun',
@@ -359,7 +397,7 @@ app.factory('ColumnFactory', function() {
         enableCellEdit: false,
         cellTemplate: chkBoxTemplate,
         sortFn: checkboxSorting,
-        width: 70
+        width: '5%',
     },{
         field: 'lastUpdated',
         displayName: 'Last Ran',
diff --git a/plugins/org.eclipse.osee.web.ui/src/dispo/js/adminController.js b/plugins/org.eclipse.osee.web.ui/src/dispo/js/adminController.js
index 695c9e79be1..02f389121c4 100644
--- a/plugins/org.eclipse.osee.web.ui/src/dispo/js/adminController.js
+++ b/plugins/org.eclipse.osee.web.ui/src/dispo/js/adminController.js
@@ -1,14 +1,16 @@
-		app.controller('adminController', ['$scope', '$rootScope', '$modal', 'Program', 'Set', 'Report', 'CopySet', 'CopySetCoverage', 'MultItemEdit',
-		    function($scope, $rootScope,  $modal, Program, Set, Report, CopySet, CopySetCoverage, MultItemEdit) {
+		app.controller('adminController', ['$scope', '$rootScope', '$modal', 'Program', 'Set', 'Report', 'CopySet', 'CopySetCoverage', 'MultiItemEdit',
+		    function($scope, $rootScope,  $modal, Program, Set, Report, CopySet, CopySetCoverage, MultiItemEdit) {
 		        $scope.readOnly = true;
 		        $scope.programSelection = null;
 		        $scope.modalShown = false;
 		        $scope.primarySet = "";
 		        $scope.secondarySet = "";
 		        $scope.sets = {};
-			     $scope.addNew = false;
+			    $scope.addNew = false;
 		        $scope.newProgramName = ""
-		        $scope.isCopying = false;
+		        $scope.selectedItems = [];
+		        $scope.isRunningOperation = false;
+
 
 		        $scope.cachedValue = "";
 
@@ -35,6 +37,7 @@
 		            enableColumnResize: false,
 		            enableRowReordering: true,
 		            multiSelect: false,
+		            selectedItems: $scope.selectedItems,
 		            columnDefs: 'columnDefs' // link to scope variable which we will define dynamically				
 		        }
 		        
@@ -52,61 +55,61 @@
 		        $scope.columnDefs1 = [{
 		            field: "",
 		            displayName: "Import",
-		            width: 70,
+		            width: '9%',
 		            enableCellEdit: false,
 		            cellTemplate: importCellTmpl
 		        }, {
 		        	field: "",
 		        	displayName: "Export",
-		        	width: 70,
+		        	width: '9%',
 		        	cellTemplate: exportCellTmpl
 		        }, {
 		        	field: "",
 		            displayName: "Last Operation",
-		            width: 120,
+		            width: '15%',
 		        	cellTemplate: lastOperationCellTmpl
 		        }, {
 		            field: "name",
 		            displayName: "Name",
-		            width: 140,
+		            width: '20%',
 		            enableCellEdit: false
 		        }, {
 		            field: "importPath",
 		            displayName: "Path",
-		            width: 432,
+		            width: '47%',
 		            enableCellEdit: false
 		        }];
 
 		        $scope.columnDefs2 = [{
 		            field: "",
 		            displayName: "Import",
-		            width: 70,
+		            width: '9%',
 		            enableCellEdit: false,
 		            cellTemplate: importCellTmpl
 		        }, {
 		        	field: "",
 		        	displayName: "Export",
-		        	width: 70,
+		        	width: '9%',
 		        	cellTemplate: exportCellTmpl
 		        },{
 		        	field: "",
 		            displayName: "Last Operation",
-		            width: 120,
+		            width: '15%',
 		        	cellTemplate: lastOperationCellTmpl
 		        }, {
 		            field: "name",
 		            displayName: "Name",
-		            width: 140,
+		            width: '20%',
 		            enableCellEdit: true
 		        }, {
 		            field: "importPath",
 		            displayName: "Path",
-		            width: 375,
+		            width: '42%',
 		            enableCellEdit: true
 		        }, {
 		            field: "delete",
 		            displayName: "Delete",
-		            width: 57,
+		            width: '5%',
 		            cellTemplate: dellCellTmpl
 		        }];
 		        
@@ -209,17 +212,40 @@
 		            }, set);
 		        };
 
-		        $scope.deleteSet = function deleteSet(set) {
-		            Set.delete({
-		                programId: $scope.programSelection,
-		                setId: set.guid
-		            }, function() {
-		                var index = $scope.sets.indexOf(set);
-		                if (index > -1) {
-		                    $scope.sets.splice(index, 1);
-		                }
-		            });
+		        $scope.massAssignTeam = function(setId, team, namesList) {
+		        	$scope.isRunningOperation = true;
+		        	var loadingModal = $scope.showLoadingModal();
+		        	var multiItemEditOp = new MultiItemEdit;
+		        	multiItemEditOp.namesList = namesList;
+		        	multiItemEditOp.team = team;
+		        	multiItemEditOp.setId = setId;
+		        	multiItemEditOp.userName = $rootScope.cachedName;
+		        	
+		        	multiItemEditOp.$save({
+		        		programId: $scope.programSelection      		
+		        	}, function(data) {
+		        		$scope.isRunningOperation = false;
+		        		loadingModal.close();
+		        		$scope.getSetImportDetails($scope.getSetById(setId));
+		        	}, function() {
+		        		$scope.isRunningOperation = false;
+		        		loadingModal.close();
+		        		alert("Oops...Something went wrong");
+		        		// boo
+		        	})
+		        };
+		        
+		        $scope.getSetById = function(setId) {
+		        	for(var i =0; i < $scope.sets.length; i++) {
+		        		if($scope.sets[i].guid == setId) {
+		        			return $scope.sets[i];
+		        		}
+		        	}
+		        	return null;
+		        }
 
+		        $scope.deleteSet = function deleteSet(set) {
+		        	var loadingModal = $scope.openConfirmDeleteModal(set);
 		        }
 		        
 
@@ -269,7 +295,7 @@
 		        };
 		        
 		        $scope.copySet = function(inputs)	 {
-		        	$scope.isCopying = true;
+		        	$scope.isRunningOperation = true;
 		        	var copySetOp = new CopySet;
 		        	copySetOp.annotationParam = inputs.annotationParam;
 		        	copySetOp.categoryParam = inputs.categoryParam;
@@ -283,11 +309,11 @@
 		                sourceProgram: inputs.sourceProgram,
 		                sourceSet: inputs.sourceSet,
 		            }, function(data) {
-		            	$scope.isCopying = false;
+		            	$scope.isRunningOperation = false;
 		            	var reportUrl = data.operationStatus;
 		            	$scope.getSetImportDetails(destinationSet);
 		            }, function(data) {
-		               $scope.isCopying = false;
+		            	$scope.isRunningOperation = false;
 		            	$scope.getSetImportDetails(destinationSet);
 		            });
 		        }
@@ -445,6 +471,52 @@
 		        };
 		        
 		        
+		        // Edit Set Modal
+		        $scope.openMassAssignTeamModal = function() {
+		            var modalInstance = $modal.open({
+		                templateUrl: 'massAssignTeam.html',
+		                controller: MassAssignTeamCtrl,
+		                size: 'lg',
+		                windowClass: 'massAssignTeamModal',
+		                resolve: {
+		                	sets: function() {
+		                		return $scope.sets;
+		                	},
+		                	gridSelectedSetId: function() {
+		                		if($scope.selectedItems.legnth > 0) {
+			                		return $scope.selectedItems[0].guid;
+		                		} else {
+		                			return null;
+		                		}
+		                	}
+		                }
+		            });
+
+		            modalInstance.result.then(function(inputs) {
+		            	$scope.massAssignTeam(inputs.setId, inputs.team, inputs.nameList);
+		            });
+		        }
+
+		        var MassAssignTeamCtrl = function($scope, $modalInstance, gridSelectedSetId, sets) {	
+		        	$scope.setsLocal = sets.slice();
+		            $scope.nameListAsString = "";
+		            $scope.team = "";
+		            $scope.setId = gridSelectedSetId;
+		            
+		            $scope.ok = function() {
+		                var inputs = {};
+		                inputs.nameList = this.nameListAsString.split(",");
+		                inputs.team = this.team;
+		                inputs.setId = this.setId;
+		                
+		                $modalInstance.close(inputs);
+		            };
+
+		            $scope.cancel = function() {
+		                $modalInstance.dismiss('cancel');
+		            };
+		        }
+		        
 		        // Copy Set Modal
 		        $scope.openCopySetModal = function() {
 		            var modalInstance = $modal.open({
@@ -560,6 +632,60 @@
 		                $modalInstance.dismiss('cancel');
 		            };
 		        };
+		        
+		     // Confirm Delete Modal
+		        $scope.openConfirmDeleteModal = function(set) {
+		            var modalInstance = $modal.open({
+		                templateUrl: 'confirmDelete.html',
+		                controller: ConfirmDeleteCtrl,
+		                size: 'sm',
+		                windowClass: 'confirmDeleteModal',
+		                resolve: {
+		                	selectedProgram: function() {
+		                		return $scope.programSelection;
+		                	},
+		                	selectedSet: function() {
+		                		return set;
+		                	}
+		                	
+		                }
+		            });
+
+		            modalInstance.result.then(function(inputs) {
+		            	if(inputs.isConfirmed) {
+					        Set.delete({
+				                programId: inputs.program,
+				                setId: inputs.set.guid
+				            }, function() {
+				                var index = $scope.sets.indexOf(inputs.set);
+				                if (index > -1) {
+				                    $scope.sets.splice(index, 1);
+				                }
+				            });
+		            	}
+		            });
+		        }
+
+		        var ConfirmDeleteCtrl = function($scope, $modalInstance, selectedProgram, selectedSet) {
+		            $scope.text = "";
+		            
+		            $scope.ok = function() {
+		                var inputs = {};
+		                inputs.isConfirmed = false;
+		                inputs.program = selectedProgram;
+		                inputs.set = selectedSet;
+		                
+		                if(this.text.toUpperCase() == "DELETE") {
+		                	inputs.isConfirmed = true;
+		                }
+		                $modalInstance.close(inputs);
+		            };
+
+		            $scope.cancel = function() {
+		                $modalInstance.dismiss('cancel');
+		            };
+		        };
+
 
 		    }
 		]);
\ No newline at end of file
diff --git a/plugins/org.eclipse.osee.web.ui/src/dispo/js/dispoApp.js b/plugins/org.eclipse.osee.web.ui/src/dispo/js/dispoApp.js
index 185b2915536..91db8a24ebc 100644
--- a/plugins/org.eclipse.osee.web.ui/src/dispo/js/dispoApp.js
+++ b/plugins/org.eclipse.osee.web.ui/src/dispo/js/dispoApp.js
@@ -90,6 +90,18 @@ app.provider('CopySet', function() {
     ];
 });
 
+app.provider('MultiItemEdit', function() {
+    this.$get = [
+        '$resource',
+        function($resource) {
+            var MultiItemEdit = $resource(
+                '/dispo/program/:programId/admin/multiItemEdit', {}, {
+                });
+            return MultiItemEdit;
+        }
+    ];
+});
+
 app.provider('CopySetCoverage', function() {
     this.$get = ['$resource',
         function($resource) {
diff --git a/plugins/org.eclipse.osee.web.ui/src/dispo/views/admin.html b/plugins/org.eclipse.osee.web.ui/src/dispo/views/admin.html
index 4d281d3254a..02f16db85bd 100644
--- a/plugins/org.eclipse.osee.web.ui/src/dispo/views/admin.html
+++ b/plugins/org.eclipse.osee.web.ui/src/dispo/views/admin.html
@@ -11,47 +11,52 @@
                 	<u ng-click="toggleAddNew()">Add New</u> <div  ng-show="addNew"><input class="form-control" ng-model="newProgramName" type="text" name="newProgram"><button ng-click="createNewProgram()" class="form-control">Submit</button></div>
                 </div>
             </div>
-            <div class="row" id=reportRow>
-                <div ng-show="sets.length > 0" class="col-sm-10 col-sm-offset-2" id=reportContainer>
-                    <h3>STRS Report</h3>
-                    <h5>Select Primary Set (Demo Set)</h5>
-                    <select class="form-control" ng-model="primarySet" ng-options="obj.guid as obj.name for obj in sets"></select>
-                    <h5>Select Secondary Set (Dryrun Set)</h5>
-                    <select class="form-control" ng-model="secondarySet" ng-options="obj.guid as obj.name for obj in sets"></select>
-                    <button ng-click="generateReport()" class="btn btn-primary active" id=generateReportBtn>Generate Report</button>
-                </div>
-            </div>
+            <div ng-show="sets.length > 0"  class="row" id=reportRow>
             
-            <div class="row" id=mergeAnnotationsRow>
-                <div class="col-sm-10 col-sm-offset-2" id=mergetAnnotationsContainer>
-                    <button ng-disabled="isCopying" ng-click="openCopySetModal()" ng-show="sets.length > 0" class="btn btn-primary active" id=mergetAnnotationsBtn>Merge Annotations</button>
-                </div>
+               <div class="panel panel-default">
+  						<div class="panel-heading">
+   						<h3 class="panel-title">STRS Report</h3>
+  						</div>
+							<div class="panel-body" class="col-sm-10" id=reportContainer>
+	                    <h5>Select Primary Set (Demo Set)</h5>
+	                    <select class="form-control" ng-model="primarySet" ng-options="obj.guid as obj.name for obj in sets"></select>
+	                    <h5>Select Secondary Set (Dryrun Set)</h5>
+	                    <select class="form-control" ng-model="secondarySet" ng-options="obj.guid as obj.name for obj in sets"></select>
+	                    <button ng-click="generateReport()" class="btn btn-primary" id=generateReportBtn>Generate Report</button>
+	                </div>
+	  				</div>
+  				
             </div>
             
-            <div ng-show="false" class="row" id=coverageCopyRow>
-                <div class="col-sm-10 col-sm-offset-2" id=coverageCopyContainer>
-                    <button ng-click="openCopyCoverageModal()" ng-show="sets.length > 0" class="btn btn-primary active" id=coverageCopyRowBtn>Import From Coverage</button>
-                </div>
-            </div>
             
         </div>
-        <div class="col-md-6 col-md-offset-1">
+        <div ng-show="sets.length > 0" class="col-md-6 col-md-offset-1">
             <div class="row">
                 <button ng-disabled="programSelection == null" ng-click="createNewSetModal()" class="btn pull-left">New</button>
                 <button ng-disabled="programSelection == null" ng-click="toggleReadOnly()" class="btn pull-right">Edit</button>
             </div>
             <div class="row">
                 <div style="height: 300px;" class="gridStyle" ng-grid="gridOptions"></div>
+                <div class="panel panel-default">
+                	<div class="panel-heading" id="operationsPanel">
+                		<h3 class="panel-title">Operations</h3>
+  						</div>
+					   <div class="panel-body">
+					    	<div class="btn-group btn-group-md" role="group"">
+                    		<button ng-disabled="isRunningOperation" ng-click="openCopySetModal()" ng-show="sets.length > 0" class="btn btn-primary" id=generateReportBtn>Merge Annotations</button>
+                    		<button ng-disabled="isRunningOperation" ng-click="openMassAssignTeamModal()" ng-show="sets.length > 0" class="btn btn-primary" id=generateReportBtn>Mass Assign Team</button>
+							</div>
+					 	</div>
+					</div>
             </div>
         </div>
     </div>
-    <div class="row">
+    <div ng-show="sets.length > 0" class="row">
     	<div class="col-md-9 col-md-offset-1">
             <div class="row" id="summaryContainer">
                 <div style="height: 400px;" class="gridStyle" ng-grid="summaryGrid"></div>
             </div>
     </div>
- </div>
 
     <!--  definitions for modal forms -->
     <script type="text/ng-template" id="popup.html">
@@ -139,12 +144,56 @@
 
     </script>
 
+    <script type="text/ng-template" id="massAssignTeam.html">
+        <div class="modal-header">
+            <h3 class="modal-title">Mass Assign a Team</h3>
+        </div>
+        <div class="modal-body" overflow: auto;">
+            <div class="form-group">
+					 Select a Set
+                <select class="form-control" ng-model="setId" ng-options="obj.guid as obj.name for obj in setsLocal">
+					 </select>
+            </div>
+            <div class="form-group">
+    				Team:
+					<input class="form-control" ng-model="team"></input>
+					<br>
+					Items (comma seperated name list):
+					<br>
+					<textarea rows=5 style="resize: vertical" class="form-control" ng-model="nameListAsString"></textarea>
+  				</div>
+
+				</div>             
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-primary" ng-click="ok()">OK</button>
+            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
+        </div>
+
+    </script>
+    
    <script type="text/ng-template" id="loadingModal.html">
         <div id="loadingModal" class="alert alert-info">
 				Loading...
         </div>
     </script>   
-    
+
+    <script type="text/ng-template" id="confirmDelete.html">
+        <div class="modal-header">
+            <h3 class="modal-title">Confirm Delete of Set {{ set.name }}</h3>
+        </div>
+        <div class="modal-body" overflow: auto;">
+            <div class="form-group">
+					To Delete Set {{ set.name }} Type "DELETE":
+					<input class="form-group" ng-model="text" placeholder="!"></input> 
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-primary" ng-click="ok()">OK</button>
+            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
+        </div>
+
+    </script>
 </body>
 
 </html>
diff --git a/plugins/org.eclipse.osee.web.ui/src/dispo/views/user.html b/plugins/org.eclipse.osee.web.ui/src/dispo/views/user.html
index f2e2963fd58..1ac525daa52 100644
--- a/plugins/org.eclipse.osee.web.ui/src/dispo/views/user.html
+++ b/plugins/org.eclipse.osee.web.ui/src/dispo/views/user.html
@@ -38,7 +38,7 @@
          </div>
          <div id="bottom-content">
             <div ng-dblclick="getSourceFlie()" id="itemSelectedBar">
-               Item: {{ selectedItem.name || "Select an Item"}} Failures: {{ selectedItem.discrepanciesAsRanges || "None"}}
+               <h4 id="itemSelectedText">Item: {{ selectedItem.name || "Select an Item"}} :: </h4><h6 ng-show="selectedItem" id="itemSelectedFailureText"> Failures: {{ selectedItem.discrepanciesAsRanges || "N/A"}}</h6>
             </div>
             <div id="annotationsGrid">
                <table class="table subTable">