feat(influxdb): more work onnew influxdb editor

public/app/plugins/datasource/influxdb/influx_query.ts

@@ -6,9 +6,19 @@ import queryPart = require('./query_part');
 
 declare var InfluxQueryBuilder: any;
 
+class InfluxSelectModel {
+  modelParts: any[];
+  persistedParts: any[];
+
+  constructor(persistedParts: any[]) {
+    this.persistedParts = persistedParts;
+    this.modelParts = _.map(persistedParts, queryPart.create);
+  }
+}
+
 class InfluxQuery {
   target: any;
-  selectParts: any[];
+  selectModels: any[];
   groupByParts: any;
   queryBuilder: any;
 
@@ -29,10 +39,8 @@ class InfluxQuery {
   }
 
   updateSelectParts() {
-    this.selectParts = _.map(this.target.select, function(parts: any) {
-      return _.map(parts, function(part: any) {
-        return queryPart.create(part);
-      });
+    this.selectModels = _.map(this.target.select, function(parts: any) {
+      return new InfluxSelectModel(parts);
     });
   }
 
@@ -41,6 +49,18 @@ class InfluxQuery {
     this.updateSelectParts();
   }
 
+  removeSelectPart(selectModel, part) {
+    var partIndex = _.indexOf(selectModel.modelParts, part);
+    selectModel.persistedParts.splice(partIndex, 1);
+    this.updateSelectParts();
+  }
+
+  addSelectPart(selectModel, name) {
+    var partModel = queryPart.create({name: name});
+    selectModel.persistedParts.push(partModel.part);
+    selectModel.modelParts.push(partModel);
+  }
+
   addSelect() {
     this.target.select.push([
       {name: 'mean', params: ['value']},
@@ -92,8 +112,8 @@ class InfluxQuery {
 
     var query = 'SELECT ';
     var i, y;
-    for (i = 0; i < this.selectParts.length; i++) {
-      let parts = this.selectParts[i];
+    for (i = 0; i < this.selectModels.length; i++) {
+      let parts = this.selectModels[i].modelParts;
       var selectText = "";
       for (y = 0; y < parts.length; y++) {
         let part = parts[y];

public/app/plugins/datasource/influxdb/partials/query.editor.html

@@ -65,15 +65,15 @@
 
 	<div ng-hide="target.rawQuery">
 
-		<div class="tight-form" ng-repeat="parts in queryModel.selectParts">
+		<div class="tight-form" ng-repeat="selectModel in queryModel.selectModels">
 			<ul class="tight-form-list">
 				<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
 					<span ng-show="$index === 0">SELECT</span>
 				</li>
-				<li ng-repeat="part in parts">
-					<influx-query-part-editor part="part" class="tight-form-item tight-form-func"></influx-query-part-editor>
+				<li ng-repeat="part in selectModel.modelParts">
+					<influx-query-part-editor part="part" class="tight-form-item tight-form-func" remove-action="removeSelectPart(selectModel, part)" part-updated="selectPartUpdated(selectModel, part)"></influx-query-part-editor>
 				</li>
-				<li class="dropdown" dropdown-typeahead="selectMenu" dropdown-typeahead-on-select="selectMenuAction(parts, $item, $subItem)">
+				<li class="dropdown" dropdown-typeahead="selectMenu" dropdown-typeahead-on-select="selectMenuAction(selectModel, $item, $subItem)">
 				</li>
 			</ul>
 			<div class="clearfix"></div>

public/app/plugins/datasource/influxdb/partials/query_part.html

@@ -1,6 +1,6 @@
 <div class="tight-form-func-controls">
 	<span class="pointer fa fa-question-circle"></span>
-	<span class="pointer fa fa-remove" ></span>
+	<span class="pointer fa fa-remove" ng-click="removeAction()" ></span>
 </div>
 
 <a ng-click="toggleControls()">{{part.def.name}}</a><span>(</span><span class="query-part-parameters"></span><span>)</span>

public/app/plugins/datasource/influxdb/query_ctrl.js

@@ -62,8 +62,18 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
       }, []);
     };
 
-    $scope.selectMenuAction = function(selectParts, cat, subitem) {
-      selectParts.push(queryPart.create({name: subitem.value }));
+    $scope.selectMenuAction = function(selectModel, cat, subitem) {
+      $scope.queryModel.addSelectPart(selectModel, subitem.value);
+      $scope.get_data();
+    };
+
+    $scope.removeSelectPart = function(selectModel, part) {
+      $scope.queryModel.removeSelectPart(selectModel, part);
+      $scope.get_data();
+    };
+
+    $scope.selectPartUpdated = function() {
+      $scope.get_data();
     };
 
     $scope.fixTagSegments = function() {
@@ -75,27 +85,9 @@ function (angular, _, InfluxQueryBuilder, InfluxQuery, queryPart) {
       }
     };
 
-    $scope.addGroupBy = function() {
-      $scope.target.groupBy.push({type: 'tag', key: "select tag"});
-    };
-
-    $scope.removeGroupBy = function(index) {
-      $scope.target.groupBy.splice(index, 1);
-      $scope.get_data();
-    };
-
-    $scope.addSelect = function() {
-      $scope.queryModel.addSelect();
-    };
-
-    $scope.removeSelect = function(index) {
-      $scope.queryModel.removeSelect(index);
-      $scope.get_data();
-    };
-
     $scope.measurementChanged = function() {
       $scope.target.measurement = $scope.measurementSegment.value;
-      $scope.$parent.get_data();
+      $scope.get_data();
     };
 
     $scope.getFields = function() {

public/app/plugins/datasource/influxdb/query_part.ts

@@ -135,7 +135,8 @@ class QueryPart {
       throw {message: 'Could not find query part ' + part.name};
     }
 
-    this.params = part.params || _.clone(this.def.defaultParams);
+    part.params = part.params || _.clone(this.def.defaultParams);
+    this.params = part.params;
     this.updateText();
   }
 

public/app/plugins/datasource/influxdb/query_part_editor.js

@@ -17,7 +17,8 @@ function (angular, _, $) {
         templateUrl: 'app/plugins/datasource/influxdb/partials/query_part.html',
         scope: {
           part: "=",
-          deleteAction: "&",
+          removeAction: "&",
+          partUpdated: "&",
         },
         link: function postLink($scope, elem) {
           var part = $scope.part;
@@ -55,7 +56,7 @@ function (angular, _, $) {
               $link.html(templateSrv.highlightVariablesAsHtml(newValue));
 
               part.updateParam($input.val(), paramIndex);
-              $scope.$apply($scope.targetChanged);
+              $scope.$apply($scope.partUpdated);
             }
 
             $input.hide();