diff --git a/ambari-metrics-grafana/ambari-metrics/query_ctrl.js b/ambari-metrics-grafana/ambari-metrics/query_ctrl.js
index 77f420d..b466167 100644
--- a/ambari-metrics-grafana/ambari-metrics/query_ctrl.js
+++ b/ambari-metrics-grafana/ambari-metrics/query_ctrl.js
@@ -31,7 +31,7 @@
 })();
 exports.__esModule = true;
 ///<reference path="../../../headers/common.d.ts" />
-var angular_1 = require("angular");
+require("angular");
 var lodash_1 = require("lodash");
 var sdk_1 = require("app/plugins/sdk");
 var AmbariMetricsQueryCtrl = /** @class */ (function (_super) {
@@ -39,75 +39,6 @@
     /** @ngInject **/
     function AmbariMetricsQueryCtrl($scope, $injector) {
         var _this = _super.call(this, $scope, $injector) || this;
-        _this.targetBlur = function () {
-            this.target.errors = this.validateTarget(this.target);
-            // this does not work so good
-            if (!lodash_1["default"].isEqual(this.oldTarget, this.target) && lodash_1["default"].isEmpty(this.target.errors)) {
-                this.oldTarget = angular_1["default"].copy(this.target);
-                this.get_data();
-            }
-        };
-        _this.getTextValues = function (metricFindResult) {
-            return lodash_1["default"].map(metricFindResult, function (value) { return value.text; });
-        };
-        _this.suggestApps = function (query, callback) {
-            this.datasource.suggestApps(query)
-                .then(this.getTextValues)
-                .then(callback);
-        };
-        _this.suggestClusters = function (query, callback) {
-            this.datasource.suggestClusters(this.target.app)
-                .then(this.getTextValues)
-                .then(callback);
-        };
-        _this.suggestHosts = function (query, callback) {
-            this.datasource.suggestHosts(this.target.app, this.target.cluster)
-                .then(this.getTextValues)
-                .then(callback);
-        };
-        _this.suggestMetrics = function (query, callback) {
-            this.datasource.suggestMetrics(query, this.target.app)
-                .then(this.getTextValues)
-                .then(callback);
-        };
-        _this.suggestTagKeys = function (query, callback) {
-            this.datasource.metricFindQuery('tag_names(' + this.target.metric + ')')
-                .then(this.getTextValues)
-                .then(callback);
-        };
-        _this.suggestTagValues = function (query, callback) {
-            this.datasource.metricFindQuery('tag_values(' + this.target.metric + ',' + this.target.currentTagKey + ')')
-                .then(this.getTextValues)
-                .then(callback);
-        };
-        _this.addTag = function () {
-            if (!this.addTagMode) {
-                this.addTagMode = true;
-                return;
-            }
-            if (!this.target.tags) {
-                this.target.tags = {};
-            }
-            this.target.errors = this.validateTarget(this.target);
-            if (!this.target.errors.tags) {
-                this.target.tags[this.target.currentTagKey] = this.target.currentTagValue;
-                this.target.currentTagKey = '';
-                this.target.currentTagValue = '';
-                this.targetBlur();
-            }
-            this.addTagMode = false;
-        };
-        _this.removeTag = function (key) {
-            delete this.target.tags[key];
-            this.targetBlur();
-        };
-        _this.validateTarget = function (target) {
-            var errs = {};
-            if (target.tags && lodash_1["default"].has(target.tags, target.currentTagKey)) {
-                errs.tags = "Duplicate tag key '" + target.currentTagKey + "'.";
-            }
-            return errs;
-        };
         _this.errors = _this.validateTarget(_this.target);
         _this.aggregators = ['none', 'avg', 'sum', 'min', 'max'];
         _this.precisions = ['default', 'seconds', 'minutes', 'hours', 'days'];
@@ -144,8 +75,81 @@
         _this.datasource.getAggregators().then(function (aggs) {
             this.aggregators = aggs;
         });
+        _this.suggestApps = function (query, callback) {
+            _this.datasource.suggestApps(query)
+                .then(_this.getTextValues)
+                .then(callback);
+        };
+        _this.suggestClusters = function (query, callback) {
+            _this.datasource.suggestClusters(_this.target.app)
+                .then(_this.getTextValues)
+                .then(callback);
+        };
+        _this.suggestHosts = function (query, callback) {
+            _this.datasource.suggestHosts(_this.target.app, _this.target.cluster)
+                .then(_this.getTextValues)
+                .then(callback);
+        };
+        _this.suggestMetrics = function (query, callback) {
+            _this.datasource.suggestMetrics(query, _this.target.app)
+                .then(_this.getTextValues)
+                .then(callback);
+        };
+        _this.suggestTagKeys = function (query, callback) {
+            _this.datasource.metricFindQuery('tag_names(' + _this.target.metric + ')')
+                .then(_this.getTextValues)
+                .then(callback);
+        };
+        _this.suggestTagValues = function (query, callback) {
+            _this.datasource.metricFindQuery('tag_values(' + _this.target.metric + ',' + _this.target.currentTagKey + ')')
+                .then(_this.getTextValues)
+                .then(callback);
+        };
+        _this.getTextValues = function (metricFindResult) {
+            return metricFindResult.map(function (value) { return value.text; });
+        };
         return _this;
     }
+    AmbariMetricsQueryCtrl.prototype.targetBlur = function () {
+        this.target.errors = this.validateTarget(this.target);
+        this.refresh();
+    };
+    ;
+    AmbariMetricsQueryCtrl.prototype.addTag = function () {
+        if (!this.addTagMode) {
+            this.addTagMode = true;
+            return;
+        }
+        if (!this.target.tags) {
+            this.target.tags = {};
+        }
+        this.target.errors = this.validateTarget(this.target);
+        if (!this.target.errors.tags) {
+            this.target.tags[this.target.currentTagKey] = this.target.currentTagValue;
+            this.target.currentTagKey = '';
+            this.target.currentTagValue = '';
+            this.targetBlur();
+        }
+        this.addTagMode = false;
+    };
+    ;
+    AmbariMetricsQueryCtrl.prototype.removeTag = function (key) {
+        delete this.target.tags[key];
+        this.targetBlur();
+    };
+    ;
+    AmbariMetricsQueryCtrl.prototype.getCollapsedText = function () {
+        var text = this.target.metric + ' on ' + this.target.app;
+        return text;
+    };
+    ;
+    AmbariMetricsQueryCtrl.prototype.validateTarget = function (target) {
+        var errs = {};
+        if (target.tags && lodash_1["default"].has(target.tags, target.currentTagKey)) {
+            errs.tags = "Duplicate tag key '" + target.currentTagKey + "'.";
+        }
+        return errs;
+    };
     AmbariMetricsQueryCtrl.templateUrl = 'partials/query.editor.html';
     return AmbariMetricsQueryCtrl;
 }(sdk_1.QueryCtrl));
diff --git a/ambari-metrics-grafana/ambari-metrics/query_ctrl.ts b/ambari-metrics-grafana/ambari-metrics/query_ctrl.ts
index 70087b6..cbc8dc0 100644
--- a/ambari-metrics-grafana/ambari-metrics/query_ctrl.ts
+++ b/ambari-metrics-grafana/ambari-metrics/query_ctrl.ts
@@ -18,9 +18,10 @@
 
 ///<reference path="../../../headers/common.d.ts" />
 
-import angular from 'angular';
+import 'angular';
 import _ from 'lodash';
-import {QueryCtrl} from "app/plugins/sdk";
+import kbn from 'app/core/utils/kbn';
+import {QueryCtrl} from 'app/plugins/sdk';
 
 export class AmbariMetricsQueryCtrl extends QueryCtrl {
 
@@ -64,7 +65,7 @@
                 this.target.seriesAggregator = "none";
             }
         };
-        this.$watch('target.app', function (newValue) {
+        $scope.$watch('target.app', function (newValue) {
             if (newValue === '') {
                 this.target.metric = '';
                 this.target.hosts = '';
@@ -78,59 +79,55 @@
         this.datasource.getAggregators().then(function(aggs) {
             this.aggregators = aggs;
         });
+
+        this.suggestApps = (query, callback) => {
+            this.datasource.suggestApps(query)
+                .then(this.getTextValues)
+                .then(callback);
+        };
+
+        this.suggestClusters = (query, callback) => {
+            this.datasource.suggestClusters(this.target.app)
+                .then(this.getTextValues)
+                .then(callback);
+        };
+
+        this.suggestHosts = (query, callback) => {
+            this.datasource.suggestHosts(this.target.app, this.target.cluster)
+                .then(this.getTextValues)
+                .then(callback);
+        };
+
+        this.suggestMetrics = (query, callback) => {
+            this.datasource.suggestMetrics(query, this.target.app)
+                .then(this.getTextValues)
+                .then(callback);
+        };
+
+        this.suggestTagKeys = (query, callback) => {
+            this.datasource.metricFindQuery('tag_names(' + this.target.metric + ')')
+                .then(this.getTextValues)
+                .then(callback);
+        };
+
+        this.suggestTagValues = (query, callback) => {
+            this.datasource.metricFindQuery('tag_values(' + this.target.metric + ',' + this.target.currentTagKey + ')')
+                .then(this.getTextValues)
+                .then(callback);
+        };
+
+        this.getTextValues = (metricFindResult) => {
+            return metricFindResult.map((value) => {return value.text });
+        }
     }
 
-    targetBlur = function() {
+    targetBlur () {
         this.target.errors = this.validateTarget(this.target);
-
-        // this does not work so good
-        if (!_.isEqual(this.oldTarget, this.target) && _.isEmpty(this.target.errors)) {
-            this.oldTarget = angular.copy(this.target);
-            this.get_data();
-        }
+        this.refresh();
     };
+    
 
-    getTextValues = function(metricFindResult) {
-        return _.map(metricFindResult, function(value) { return value.text; });
-    };
-
-    suggestApps = function(query, callback) {
-        this.datasource.suggestApps(query)
-            .then(this.getTextValues)
-            .then(callback);
-    };
-
-    suggestClusters = function(query, callback) {
-        this.datasource.suggestClusters(this.target.app)
-            .then(this.getTextValues)
-            .then(callback);
-    };
-
-    suggestHosts = function(query, callback) {
-        this.datasource.suggestHosts(this.target.app, this.target.cluster)
-            .then(this.getTextValues)
-            .then(callback);
-    };
-
-    suggestMetrics = function(query, callback) {
-        this.datasource.suggestMetrics(query, this.target.app)
-            .then(this.getTextValues)
-            .then(callback);
-    };
-
-    suggestTagKeys = function(query, callback) {
-        this.datasource.metricFindQuery('tag_names(' + this.target.metric + ')')
-            .then(this.getTextValues)
-            .then(callback);
-    };
-
-    suggestTagValues = function(query, callback) {
-        this.datasource.metricFindQuery('tag_values(' + this.target.metric + ',' + this.target.currentTagKey + ')')
-            .then(this.getTextValues)
-            .then(callback);
-    };
-
-    addTag = function() {
+    addTag () {
         if (!this.addTagMode) {
             this.addTagMode = true;
             return;
@@ -152,12 +149,17 @@
         this.addTagMode = false;
     };
 
-    removeTag = function(key) {
+    removeTag (key) {
         delete this.target.tags[key];
         this.targetBlur();
     };
 
-    validateTarget = function(target) {
+    getCollapsedText () {
+        var text = this.target.metric + ' on ' + this.target.app;
+        return text;
+    };
+
+    validateTarget (target) {
         var errs = {};
 
         if (target.tags && _.has(target.tags, target.currentTagKey)) {
@@ -167,3 +169,5 @@
         return errs;
     }
 }
+
+