MetricEditors: Ability to reorder metric queries in metrics tag, Closes #716, Closes #856

'

-/* global _ */
-
-/*
- * Complex scripted dashboard
- * This script generates a dashboard object that Grafana can load. It also takes a number of user
- * supplied URL parameters (int ARGS variable)
- *
- * Return a dashboard object, or a function
- *
- * For async scripts, return a function, this function must take a single callback function as argument,
- * call this callback function with the dashboard object (look at scripted_async.js for an example)
- */
-
-'use strict';
-
-// accessable variables in this scope
-var window, document, ARGS, $, jQuery, moment, kbn, services, _;
-
-// default datasource
-var datasource = services.datasourceSrv.default;
-// get datasource used for saving dashboards
-var dashboardDB = services.datasourceSrv.getGrafanaDB();
-
-var targets = [];
-
-function getTargets(path) {
-  return datasource.metricFindQuery(path + '.*').then(function(result) {
-    if (!result) {
-      return null;
-    }
-
-    if (targets.length === 10) {
-      return null;
-    }
-
-    var promises = _.map(result, function(metric) {
-      if (metric.expandable) {
-        return getTargets(path + "." + metric.text);
-      }
-      else {
-        targets.push(path + '.' + metric.text);
-      }
-      return null;
-    });
-
-    return services.$q.when(promises);
-  });
-}
-
-function createDashboard(target, index) {
-  // Intialize a skeleton with nothing but a rows array and service object
-  var dashboard = { rows : [] };
-  dashboard.title = 'Scripted dash ' + index;
-  dashboard.time = {
-    from: "now-6h",
-    to: "now"
-  };
-
-  dashboard.rows.push({
-    title: 'Chart',
-    height: '300px',
-    panels: [
-    {
-      title: 'Events',
-      type: 'graph',
-      span: 12,
-      targets: [ {target: target} ]
-    }
-  ]
-  });
-
-}
-
-return function(callback)  {
-
-  getTargets('apps').then(function(results) {
-    console.log('targets: ', targets);
-    _.each(targets, function(target, index) {
-      var dashboard = createDashboard(target);
-    });
-  });
-
-};
-

CHANGELOG.md

@@ -12,6 +12,7 @@
 - [Issue #938](https://github.com/grafana/grafana/issues/938). Panel: Plugin panels now reside outside of app/panels directory
 - [Issue #952](https://github.com/grafana/grafana/issues/952). Help: Shortcut "?" to open help modal with list of all shortcuts
 - [Issue #991](https://github.com/grafana/grafana/issues/991). ScriptedDashboard: datasource services are now available in scripted dashboards, you can query datasource for metric keys, generate dashboards, and even save them in a scripted dashboard (see scripted_gen_and_save.js for example)
+- [Issue #716](https://github.com/grafana/grafana/issues/716). MetricsEditors: Ability to reorder metric queries
 
 **OpenTSDB**
 - [Issue #930](https://github.com/grafana/grafana/issues/930). OpenTSDB: Adding counter max and counter reset value to open tsdb query editor, thx @rsimiciuc

src/app/controllers/graphiteTarget.js

@@ -275,6 +275,10 @@ function (angular, _, config, gfunc, Parser) {
       }
     };
 
+    $scope.moveMetricQuery = function(fromIndex, toIndex) {
+      _.move($scope.panel.targets, fromIndex, toIndex);
+    };
+
     $scope.duplicate = function() {
       var clone = angular.copy($scope.target);
       $scope.panel.targets.push(clone);

src/app/controllers/influxTargetCtrl.js

 define([
-  'angular'
+  'angular',
+  'lodash'
 ],
-function (angular) {
+function (angular, _) {
   'use strict';
 
   var module = angular.module('grafana.controllers');
@@ -96,6 +97,10 @@ function (angular) {
       }
     };
 
+    $scope.moveMetricQuery = function(fromIndex, toIndex) {
+      _.move($scope.panel.targets, fromIndex, toIndex);
+    };
+
     $scope.duplicate = function() {
       var clone = angular.copy($scope.target);
       $scope.panel.targets.push(clone);

src/app/partials/graphite/editor.html

@@ -30,6 +30,19 @@
                   ng-click="duplicate()">
                 Duplicate
               </a>
+            </li>
+						<li role="menuitem">
+              <a  tabindex="1"
+                  ng-click="moveMetricQuery($index, $index-1)">
+                Move up
+              </a>
+            </li>
+						<li role="menuitem">
+							<a  tabindex="1"
+                  ng-click="moveMetricQuery($index, $index+1)">
+                Move down
+              </a>
+            </li>
           </ul>
         </li>
         <li>

src/app/partials/influxdb/editor.html

@@ -16,11 +16,11 @@
               <i class="icon icon-cog"></i>
             </a>
 						<ul class="dropdown-menu pull-right" role="menu">
-              <li role="menuitem">
-                <a tabindex="1" ng-click="duplicate()">Duplicate</a>
-                <a tabindex="2" ng-click="showQuery()" ng-hide="target.rawQuery">Raw query mode</a>
-                <a tabindex="2" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</a>
-              </li>
+							<li role="menuitem"><a tabindex="1" ng-click="duplicate()">Duplicate</a></li>
+							<li role="menuitem"><a tabindex="1" ng-click="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
+							<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</a></li>
+							<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up </a></li>
+							<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
 						</ul>
 					</li>
 					<li>