Dashboard: Row option to display row title even when the row is visible, Closes #578

CHANGELOG.md

+# 1.8.0 (unreleased)
+
+**New features and improvements**
+
+- [Issue #578](https://github.com/grafana/grafana/issues/578). Dashboard: Row option to display row title even when the row is visible
+
+**Tech**
+- Upgraded from angularjs 1.1.5 to 1.3 beta 17;
+- Switch from underscore to lodash
+- helpers to easily unit test angularjs controllers and services
+- Test coverage through coveralls
+
 # 1.7.0 (2014-08-11)
 
 **Fixes**

src/app/controllers/row.js

@@ -33,11 +33,8 @@ function (angular, app, _) {
     };
 
     $scope.rowSpan = function(row) {
-      var panels = _.filter(row.panels, function(p) {
-        return $scope.isPanel(p);
-      });
-      return _.reduce(_.pluck(panels,'span'), function(p,v) {
-        return p+v;
+      return _.reduce(row.panels, function(p,v) {
+        return p + v.span;
       },0);
     };
 

src/app/partials/dashboard.html

@@ -31,13 +31,15 @@
           <div class="row-control">
             <div class="row-control-inner" style="padding:0px;margin:0px;position:relative;">
               <div class="row-close" ng-show="row.collapse" data-placement="bottom" >
-                <span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
-                  <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
-                </span>
-                <span class="row-button bgPrimary" ng-click="toggle_row(row)">
-                  <i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
-                </span>
-                <span class="row-button row-text" ng-click="toggle_row(row)">{{row.title || 'Row '+$index}}</span>
+								<div class="row-close-buttons">
+									<span class="row-button bgWarning" config-modal="app/partials/roweditor.html" class="pointer">
+										<i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
+									</span>
+									<span class="row-button bgPrimary" ng-click="toggle_row(row)">
+										<i bs-tooltip="'Expand row'" data-placement="right" class="icon-caret-left pointer" ></i>
+									</span>
+								</div>
+                <span class="row-text pointer" ng-click="toggle_row(row)" ng-bind="row.title"></span>
               </div>
               <div class="row-open" ng-show="!row.collapse">
                 <div class='row-tab bgPrimary' ng-click="toggle_row(row)">
@@ -92,6 +94,8 @@
             </div>
 
             <div style="padding-top:0px" ng-if="!row.collapse">
+							<div class="row-text pointer" ng-click="toggle_row(row)" ng-if="row.showTitle" ng-bind="row.title">
+							</div>
 
               <!-- Panels -->
               <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':(panel.span/1.2)*10+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.$$panelDragging}">

src/app/partials/roweditor.html

@@ -17,9 +17,9 @@
       <label class="small"> Editable </label><input type="checkbox" ng-model="row.editable" ng-checked="row.editable" />
     </div>
     <div class="editor-option">
-      <label class="small"> Collapsable </label><input type="checkbox" ng-model="row.collapsable" ng-checked="row.collapsable" />
+      <label class="small"> Show title </label><input type="checkbox" ng-model="row.showTitle" ng-checked="row.showTitle" />
     </div>
-  </div>
+	</div>
   <div class="row-fluid" ng-if="editor.index == 1">
     <div class="span12">
       <h4>Panels</h4>

src/css/less/overrides.less

@@ -235,9 +235,9 @@ form input.ng-invalid {
 
 .row-button {
   width: 30px;
-  text-align: center;
   float: left;
   cursor: pointer;
+  line-height: 31px;
 }
 
 .row-text {
@@ -245,15 +245,20 @@ form input.ng-invalid {
   text-transform: uppercase;
   font-weight: bold;
   font-size: 0.9em;
-  margin: 0px 10px;
+  text-align: center;
+  line-height: 31px;
 }
 
 .row-close {
   padding: 0px;
   margin: 0px;
-  min-height: 30px !important;
-  line-height: 30px;
   background: @grafanaPanelBackground;
+  text-align: center;
+}
+
+.row-close-buttons {
+  position: absolute;
+  left: 0;
 }
 
 .row-open {