Merge pull request #11501 from grafana/metric-segment-to-ts

migrated metric_segment to ts

public/app/core/directives/metric_segment.js → public/app/core/directives/metric_segment.ts

-define([
-  'lodash',
-  'jquery',
-  '../core_module',
-],
-function (_, $, coreModule) {
-  'use strict';
-
-  coreModule.default.directive('metricSegment', function($compile, $sce) {
-    var inputTemplate = '<input type="text" data-provide="typeahead" ' +
+import _ from 'lodash';
+import $ from 'jquery';
+import coreModule from '../core_module';
+
+/** @ngInject */
+export function metricSegment($compile, $sce) {
+  let inputTemplate =
+    '<input type="text" data-provide="typeahead" ' +
     ' class="gf-form-input input-medium"' +
     ' spellcheck="false" style="display:none"></input>';
 
-    var linkTemplate = '<a class="gf-form-label" ng-class="segment.cssClass" ' +
+  let linkTemplate =
+    '<a class="gf-form-label" ng-class="segment.cssClass" ' +
     'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
 
-    var selectTemplate = '<a class="gf-form-input gf-form-input--dropdown" ng-class="segment.cssClass" ' +
+  let selectTemplate =
+    '<a class="gf-form-input gf-form-input--dropdown" ng-class="segment.cssClass" ' +
     'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
 
   return {
     scope: {
-        segment: "=",
-        getOptions: "&",
-        onChange: "&",
-        debounce: "@",
+      segment: '=',
+      getOptions: '&',
+      onChange: '&',
+      debounce: '@',
     },
     link: function($scope, elem) {
-        var $input = $(inputTemplate);
-        var segment = $scope.segment;
-        var $button = $(segment.selectMode ? selectTemplate : linkTemplate);
-        var options = null;
-        var cancelBlur = null;
-        var linkMode = true;
-        var debounceLookup = $scope.debounce;
+      let $input = $(inputTemplate);
+      let segment = $scope.segment;
+      let $button = $(segment.selectMode ? selectTemplate : linkTemplate);
+      let options = null;
+      let cancelBlur = null;
+      let linkMode = true;
+      let debounceLookup = $scope.debounce;
 
       $input.appendTo(elem);
       $button.appendTo(elem);
@@ -44,7 +44,7 @@ function (_, $, coreModule) {
         value = _.unescape(value);
 
         $scope.$apply(function() {
-            var selected = _.find($scope.altSegments, {value: value});
+          let selected = _.find($scope.altSegments, { value: value });
           if (selected) {
             segment.value = selected.value;
             segment.html = selected.html || selected.value;
@@ -54,8 +54,7 @@ function (_, $, coreModule) {
             if (selected.type) {
               segment.type = selected.type;
             }
-            }
-            else if (segment.custom !== 'false') {
+          } else if (segment.custom !== 'false') {
             segment.value = value;
             segment.html = $sce.trustAsHtml(value);
             segment.expandable = true;
@@ -67,7 +66,9 @@ function (_, $, coreModule) {
       };
 
       $scope.switchToLink = function(fromClick) {
-          if (linkMode && !fromClick) { return; }
+        if (linkMode && !fromClick) {
+          return;
+        }
 
         clearTimeout(cancelBlur);
         cancelBlur = null;
@@ -117,28 +118,38 @@ function (_, $, coreModule) {
       };
 
       $scope.matcher = function(item) {
-          var str = this.query;
-          if (str[0] === '/') { str = str.substring(1); }
-          if (str[str.length - 1] === '/') { str = str.substring(0, str.length-1); }
+        let str = this.query;
+        if (str[0] === '/') {
+          str = str.substring(1);
+        }
+        if (str[str.length - 1] === '/') {
+          str = str.substring(0, str.length - 1);
+        }
         try {
           return item.toLowerCase().match(str.toLowerCase());
-          } catch(e) {
+        } catch (e) {
           return false;
         }
       };
 
       $input.attr('data-provide', 'typeahead');
-        $input.typeahead({ source: $scope.source, minLength: 0, items: 10000, updater: $scope.updater, matcher: $scope.matcher });
+      $input.typeahead({
+        source: $scope.source,
+        minLength: 0,
+        items: 10000,
+        updater: $scope.updater,
+        matcher: $scope.matcher,
+      });
 
-        var typeahead = $input.data('typeahead');
-        typeahead.lookup = function () {
+      let typeahead = $input.data('typeahead');
+      typeahead.lookup = function() {
         this.query = this.$element.val() || '';
-          var items = this.source(this.query, $.proxy(this.process, this));
+        let items = this.source(this.query, $.proxy(this.process, this));
         return items ? this.process(items) : items;
       };
 
       if (debounceLookup) {
-          typeahead.lookup = _.debounce(typeahead.lookup, 500, {leading: true});
+        typeahead.lookup = _.debounce(typeahead.lookup, 500, { leading: true });
       }
 
       $button.keydown(function(evt) {
@@ -150,7 +161,7 @@ function (_, $, coreModule) {
 
       $button.click(function() {
         options = null;
-          $input.css('width', (Math.max($button.width(), 80) + 16) + 'px');
+        $input.css('width', Math.max($button.width(), 80) + 16 + 'px');
 
         $button.hide();
         $input.show();
@@ -158,7 +169,7 @@ function (_, $, coreModule) {
 
         linkMode = false;
 
-          var typeahead = $input.data('typeahead');
+        let typeahead = $input.data('typeahead');
         if (typeahead) {
           $input.val('');
           typeahead.lookup();
@@ -168,27 +179,29 @@ function (_, $, coreModule) {
       $input.blur($scope.inputBlur);
 
       $compile(elem.contents())($scope);
-      }
+    },
   };
-  });
+}
 
-  coreModule.default.directive('metricSegmentModel', function(uiSegmentSrv, $q) {
+/** @ngInject */
+export function metricSegmentModel(uiSegmentSrv, $q) {
   return {
-      template: '<metric-segment segment="segment" get-options="getOptionsInternal()" on-change="onSegmentChange()"></metric-segment>',
+    template:
+      '<metric-segment segment="segment" get-options="getOptionsInternal()" on-change="onSegmentChange()"></metric-segment>',
     restrict: 'E',
     scope: {
-        property: "=",
-        options: "=",
-        getOptions: "&",
-        onChange: "&",
+      property: '=',
+      options: '=',
+      getOptions: '&',
+      onChange: '&',
     },
     link: {
       pre: function postLink($scope, elem, attrs) {
-          var cachedOptions;
+        let cachedOptions;
 
         $scope.valueToSegment = function(value) {
-            var option = _.find($scope.options, {value: value});
-            var segment = {
+          let option = _.find($scope.options, { value: value });
+          let segment = {
             cssClass: attrs.cssClass,
             custom: attrs.custom,
             value: option ? option.text : value,
@@ -201,9 +214,11 @@ function (_, $, coreModule) {
         $scope.getOptionsInternal = function() {
           if ($scope.options) {
             cachedOptions = $scope.options;
-              return $q.when(_.map($scope.options, function(option) {
-                return {value: option.text};
-              }));
+            return $q.when(
+              _.map($scope.options, function(option) {
+                return { value: option.text };
+              })
+            );
           } else {
             return $scope.getOptions().then(function(options) {
               cachedOptions = options;
@@ -211,7 +226,7 @@ function (_, $, coreModule) {
                 if (option.html) {
                   return option;
                 }
-                  return {value: option.text};
+                return { value: option.text };
               });
             });
           }
@@ -219,7 +234,7 @@ function (_, $, coreModule) {
 
         $scope.onSegmentChange = function() {
           if (cachedOptions) {
-              var option = _.find(cachedOptions, {text: $scope.segment.value});
+            let option = _.find(cachedOptions, { text: $scope.segment.value });
             if (option && option.value !== $scope.property) {
               $scope.property = option.value;
             } else if (attrs.custom !== 'false') {
@@ -239,8 +254,10 @@ function (_, $, coreModule) {
         };
 
         $scope.segment = $scope.valueToSegment($scope.property);
-        }
-      }
+      },
+    },
   };
-  });
-});
+}
+
+coreModule.directive('metricSegment', metricSegment);
+coreModule.directive('metricSegmentModel', metricSegmentModel);