Row editing and adding new panel is now a lot quicker and easier with the new row menu (Issue #475)

CHANGELOG.md

@@ -13,9 +13,14 @@
 - Partial support for url encoded metrics when using Graphite datasource (PR #327) - thx @axe-felix
 - Improvement to InfluxDB query editor and function/value column selection (Issue #473)
 - Initial support for filtering (templated queries) for InfluxDB (PR #375) - thx @mavimo
+- Row editing and adding new panel is now a lot quicker and easier with the new
+  row menu (Issue #475)
 
 #### Changes
 - Graphite panel is now renamed graph (Existing dashboards will still work)
+- Add panel icon and Row edit button is replaced by the Row edit menu (Issue #475)
+- New graphs now have a default empty query
+- Add Row button now creates a row with default height of 250px (no longer opens dashboard settings modal)
 
 #### Fixes
 - Filter option loading when having muliple nested filters now works better.

src/app/controllers/dash.js

@@ -89,6 +89,12 @@ function (angular, $, config, _) {
       dash.rows.push(row);
     };
 
+    $scope.add_row_default = function() {
+      $scope.reset_row();
+      $scope.row.title = 'New row';
+      $scope.add_row(dashboard.current, $scope.row);
+    };
+
     $scope.reset_row = function() {
       $scope.row = {
         title: '',

src/app/controllers/graphiteTarget.js

@@ -13,6 +13,8 @@ function (angular, _, config, gfunc, Parser) {
   module.controller('GraphiteTargetCtrl', function($scope) {
 
     $scope.init = function() {
+      $scope.target.target = $scope.target.target || '';
+
       parseTarget();
     };
 

src/app/controllers/row.js

@@ -53,10 +53,56 @@ function (angular, app, _) {
       $scope.$broadcast('render');
     };
 
-    $scope.add_panel = function(row,panel) {
+    $scope.add_panel = function(panel) {
+      var rowSpan = $scope.rowSpan($scope.row);
+      var panelCount = $scope.row.panels.length;
+      var space = (12 - rowSpan) - panel.span;
+
+      // try to make room of there is no space left
+      if (space <= 0) {
+        if (panelCount === 1) {
+          $scope.row.panels[0].span = 6;
+          panel.span = 6;
+        }
+        else if (panelCount === 2) {
+          $scope.row.panels[0].span = 4;
+          $scope.row.panels[1].span = 4;
+          panel.span = 4;
+        }
+      }
+
       $scope.row.panels.push(panel);
     };
 
+    $scope.delete_row = function() {
+      if (confirm("Are you sure you want to delete this row?")) {
+        $scope.dashboard.current.rows = _.without($scope.dashboard.current.rows, $scope.row);
+      }
+    };
+
+    $scope.move_row = function(direction) {
+      var rowsList = $scope.dashboard.current.rows;
+      var rowIndex = _.indexOf(rowsList, $scope.row);
+      var newIndex = rowIndex + direction;
+      if (newIndex >= 0 && newIndex <= (rowsList.length - 1)) {
+        _.move(rowsList, rowIndex, rowIndex + direction);
+      }
+    };
+
+    $scope.add_panel_default = function(type) {
+      $scope.reset_panel(type);
+      $scope.add_panel($scope.panel);
+
+      $timeout(function() {
+        $scope.$broadcast('render');
+      });
+    };
+
+    $scope.set_height = function(height) {
+      $scope.row.height = height;
+      $scope.$broadcast('render');
+    };
+
     $scope.remove_panel_from_row = function(row, panel) {
       if (confirm('Are you sure you want to remove this ' + panel.type + ' panel?')) {
         row.panels = _.without(row.panels,panel);

src/app/panels/graph/module.js

@@ -210,6 +210,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
       $scope.datasources = datasourceSrv.listOptions();
       $scope.setDatasource($scope.panel.datasource);
+
+      if ($scope.panel.targets.length === 0) {
+        $scope.panel.targets.push({});
+      }
     };
 
     $scope.setDatasource = function(datasource) {

src/app/partials/dashboard.html

@@ -23,26 +23,59 @@
                 <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)" ng-show="row.collapsable">
-                <i bs-tooltip="'Expand row'" data-placement="right" ng-show="row.editable" class="icon-caret-left pointer" ></i>
+                <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)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span>
             </div>
-
+            <div class="row-open" ng-show="!row.collapse">
-            <div style="text-align:center" class="row-open" ng-show="!row.collapse">
               <div ng-show="row.collapsable" class='row-tab bgPrimary' ng-click="toggle_row(row)">
-                <i bs-tooltip="'Collapse row'" data-placement="right"  class="icon-caret-right" ></i>
+                <span class="row-tab-button">
-                <br>
+                  <i class="icon-caret-right" ></i>
+                </span>
               </div>
-              <div config-modal="app/partials/roweditor.html" class='row-tab bgWarning' ng-show="row.editable">
+              <div class='row-tab bgSuccess dropdown' ng-show="row.editable">
-                <i bs-tooltip="'Configure row'" data-placement="right"  class="icon-cog pointer"></i>
+                <span class="row-tab-button dropdown-toggle" data-toggle="dropdown">
-                <br>
+                  <i class="icon-th-list"></i>
-              </div>
+                </span>
-              <div ng-show="rowSpan(row) > 12" class='row-tab bgDanger'>
+                <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
-                <i bs-tooltip="'Total span > 12. This row may format poorly'" data-placement="right" class="icon-warning-sign"></i>
+                  <li class="dropdown-submenu">
-                <br>
+                    <a href="#">Add Panel</a>
+                    <ul class="dropdown-menu">
+                      <li><a ng-click="add_panel_default('graph')">Graph</li></a>
+                      <li><a ng-click="add_panel_default('text')">Text</li></a>
+                    </ul>
+                  </li>
+                  <li class="dropdown-submenu">
+                    <a href="#">Set height</a>
+                    <ul class="dropdown-menu">
+                      <li><a ng-click="set_height('100px')">100 px</li></a>
+                      <li><a ng-click="set_height('150px')">150 px</li></a>
+                      <li><a ng-click="set_height('200px')">200 px</li></a>
+                      <li><a ng-click="set_height('250px')">250 px</li></a>
+                      <li><a ng-click="set_height('300px')">300 px</li></a>
+                      <li><a ng-click="set_height('350px')">350 px</li></a>
+                      <li><a ng-click="set_height('450px')">450 px</li></a>
+                      <li><a ng-click="set_height('500px')">500 px</li></a>
+                      <li><a ng-click="set_height('600px')">600 px</li></a>
+                      <li><a ng-click="set_height('700px')">700 px</li></a>
+                    </ul>
+                  </li>
+                  <li class="dropdown-submenu">
+                    <a href="#">Move</a>
+                    <ul class="dropdown-menu">
+                      <li><a ng-click="move_row(-1)">Up</li></a>
+                      <li><a ng-click="move_row(1)">Down</li></a>
+                    </ul>
+                  </li>
+                  <li>
+                    <a config-modal="app/partials/roweditor.html">Row editor</a>
+                  </li>
+                  <li>
+                    <a ng-click="delete_row()">Delete row</a>
+                  </li>
+                </ul>
               </div>
             </div>
-
           </div>
 
           <div style="padding-top:0px" ng-if="!row.collapse">
@@ -58,10 +91,6 @@
             <div ng-show="rowSpan(row) < 10 && dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
             </div>
 
-            <span config-modal="app/partials/roweditor.html" ng-show="!dashboard.panelDragging && !dashboard.current.hideControls">
-              <i ng-hide="rowSpan(row) >= 10" class="pointer icon-plus-sign" ng-click="editor.index = 2" bs-tooltip="'Add a panel to this row'" data-placement="right"></i>
-            </span>
-
             <div class="clearfix"></div>
             </div>
           </div>
@@ -70,8 +99,8 @@
 
       <div ng-show='dashboard.current.editable && dashboard.current.panel_hints' class="row-fluid add-row-panel-hint">
         <div class="span12" style="text-align:right;">
-          <span style="margin-left: 0px;" class="pointer btn btn-mini" config-modal="app/partials/dasheditor.html">
+          <span style="margin-right: 10px;" ng-click="add_row_default()" class="pointer btn btn-info btn-mini">
-            <span ng-click="editor.index = 1"><i class="icon-plus-sign"></i> ADD A ROW</span>
+            <span><i class="icon-plus-sign"></i> ADD A ROW</span>
           </span>
         </div>
       </div>

src/app/partials/dasheditor.html

@@ -64,7 +64,7 @@
       <div class="span4">
         <h4>Add Row</h4>
         <label class="small">Title</label>
-        <input type="text" class="input-medium" ng-model='row.title' placeholder="New row"></input>
+        <input type="text" class="input-normal" ng-model='row.title' placeholder="New row"></input>
         <label class="small">Height</label>
         <input type="text" class="input-mini" ng-model='row.height'></input>
       </div>

src/app/partials/roweditor.html

@@ -61,6 +61,6 @@
 </div>
 <div class="modal-footer">
   <button ng-show="editor.index == 1" ng-click="editor.index = 2;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
-  <button ng-show="panel.type && editor.index == 2" ng-click="add_panel(row,panel); reset_panel(); editor.index = 1;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
+  <button ng-show="panel.type && editor.index == 2" ng-click="add_panel(panel); reset_panel(); editor.index = 1;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
   <button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
 </div>

src/app/services/graphite/graphiteDatasource.js

@@ -173,7 +173,7 @@ function (angular, _, $, config, kbn, moment) {
 
         if (key === "targets") {
           _.each(value, function (value) {
-            if (!value.hide) {
+            if (value.target && !value.hide) {
               var targetValue = filterSrv.applyTemplateToTarget(value.target);
               clean_options.push("target=" + encodeURIComponent(targetValue));
             }

src/css/less/overrides.less

@@ -204,12 +204,21 @@ form input.ng-invalid {
 }
 
 .row-tab {
+  .dropdown-menu-right {
+    top: 0;
+    left: 33px;
+  }
+}
+
+.row-tab-button {
   padding: 0px;
   cursor: pointer;
+  vertical-align: middle;
   width: 30px;
   height: 30px;
+  text-align: center;
+  display: inline-block;
   line-height: 30px;
-  vertical-align: middle;
 }
 
 .row-button {