add button to trigger evaluation of tag queries

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

@@ -10,7 +10,7 @@
         <label class="gf-form-label width-6 query-keyword">Series</label>
         <label class="gf-form-label width-6 query-keyword">Series</label>
       </div>
       </div>
 
 
-      <div ng-repeat="tag in ctrl.queryModel.tags" class="gf-form">
+      <div ng-if="ctrl.queryModel.seriesByTagUsed" ng-repeat="tag in ctrl.queryModel.tags" class="gf-form">
         <gf-form-dropdown
         <gf-form-dropdown
           model="tag.key"
           model="tag.key"
           lookup-text="false"
           lookup-text="false"
@@ -44,13 +44,22 @@
         <label class="gf-form-label query-keyword" ng-if="ctrl.showDelimiter($index)">AND</label>
         <label class="gf-form-label query-keyword" ng-if="ctrl.showDelimiter($index)">AND</label>
       </div>
       </div>
 
 
-      <div ng-repeat="segment in ctrl.segments" role="menuitem" class="gf-form">
+      <div ng-if="ctrl.queryModel.seriesByTagUsed" ng-repeat="segment in ctrl.addTagSegments" role="menuitem" class="gf-form">
+        <metric-segment segment="segment" get-options="ctrl.getTagsAsSegments()" on-change="ctrl.addNewTag(segment)" />
+      </div>
+
+      <div ng-if="!ctrl.queryModel.seriesByTagUsed" ng-repeat="segment in ctrl.segments" role="menuitem" class="gf-form">
         <metric-segment segment="segment" get-options="ctrl.getAltSegments($index)" on-change="ctrl.segmentValueChanged(segment, $index)" />
         <metric-segment segment="segment" get-options="ctrl.getAltSegments($index)" on-change="ctrl.segmentValueChanged(segment, $index)" />
       </div>
       </div>
 
 
-      <div ng-if="ctrl.queryModel.seriesByTagUsed" ng-repeat="segment in ctrl.addTagSegments" role="menuitem" class="gf-form">
-        <metric-segment segment="segment" get-options="ctrl.getTagsAsSegments()" on-change="ctrl.addNewTag(segment)" />
+      <div ng-if="ctrl.paused" class="gf-form">
+        <a ng-click="ctrl.unpause()" class="gf-form-label query-part"><i class="fa fa-play"></i></a>
+      </div>
+      <!--
+      <div ng-if="!ctrl.paused" class="gf-form">
+        <a ng-click="ctrl.pause()" class="gf-form-label query-part"><i class="fa fa-pause"></i></a>
       </div>
       </div>
+      -->
 
 
       <div class="gf-form gf-form--grow">
       <div class="gf-form gf-form--grow">
         <div class="gf-form-label gf-form-label--grow"></div>
         <div class="gf-form-label gf-form-label--grow"></div>

public/app/plugins/datasource/graphite/query_ctrl.ts

@@ -17,11 +17,13 @@ export class GraphiteQueryCtrl extends QueryCtrl {
   addTagSegments: any[];
   addTagSegments: any[];
   removeTagValue: string;
   removeTagValue: string;
   supportsTags: boolean;
   supportsTags: boolean;
+  paused: boolean;
 
 
   /** @ngInject **/
   /** @ngInject **/
   constructor($scope, $injector, private uiSegmentSrv, private templateSrv) {
   constructor($scope, $injector, private uiSegmentSrv, private templateSrv) {
     super($scope, $injector);
     super($scope, $injector);
     this.supportsTags = this.datasource.supportsTags;
     this.supportsTags = this.datasource.supportsTags;
+    this.paused = false;
 
 
     if (this.target) {
     if (this.target) {
       this.target.target = this.target.target || '';
       this.target.target = this.target.target || '';
@@ -191,6 +193,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
 
 
     if (segment.type === 'tag') {
     if (segment.type === 'tag') {
       let tag = removeTagPrefix(segment.value);
       let tag = removeTagPrefix(segment.value);
+      this.pause();
       this.addSeriesByTagFunc(tag);
       this.addSeriesByTagFunc(tag);
       return;
       return;
     }
     }
@@ -235,7 +238,7 @@ export class GraphiteQueryCtrl extends QueryCtrl {
     var oldTarget = this.queryModel.target.target;
     var oldTarget = this.queryModel.target.target;
     this.updateModelTarget();
     this.updateModelTarget();
 
 
-    if (this.queryModel.target !== oldTarget) {
+    if (this.queryModel.target !== oldTarget && !this.paused) {
       this.panelCtrl.refresh();
       this.panelCtrl.refresh();
     }
     }
   }
   }
@@ -372,6 +375,15 @@ export class GraphiteQueryCtrl extends QueryCtrl {
   showDelimiter(index) {
   showDelimiter(index) {
     return index !== this.queryModel.tags.length - 1;
     return index !== this.queryModel.tags.length - 1;
   }
   }
+
+  pause() {
+    this.paused = true;
+  }
+
+  unpause() {
+    this.paused = false;
+    this.panelCtrl.refresh();
+  }
 }
 }
 
 
 function mapToDropdownOptions(results) {
 function mapToDropdownOptions(results) {