Skip to content

N
nexpie-grafana-theme
Commit 35bc4e46 by Patrick O'Carroll
Options

migrated metric_segment to ts

parent 166778b3
Showing with 73 additions and 58 deletions
public/app/core/directives/metric_segment.js → public/app/core/directives/metric_segment.ts
define([ import _ from 'lodash';
'lodash', import $ from 'jquery';
'jquery', import coreModule from '../core_module';
'../core_module',
], export function metricSegment($compile, $sce) {
function (_, $, coreModule) { let inputTemplate =
'use strict'; '<input type="text" data-provide="typeahead" ' +
coreModule.default.directive('metricSegment', function($compile, $sce) {
var inputTemplate = '<input type="text" data-provide="typeahead" ' +
' class="gf-form-input input-medium"' + ' class="gf-form-input input-medium"' +
' spellcheck="false" style="display:none"></input>'; ' 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>'; '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>'; 'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
return { return {
scope: { scope: {
segment: "=", segment: '=',
getOptions: "&", getOptions: '&',
onChange: "&", onChange: '&',
debounce: "@", debounce: '@',
}, },
link: function($scope, elem) { link: function($scope, elem) {
var $input = $(inputTemplate); let $input = $(inputTemplate);
var segment = $scope.segment; let segment = $scope.segment;
var $button = $(segment.selectMode ? selectTemplate : linkTemplate); let $button = $(segment.selectMode ? selectTemplate : linkTemplate);
var options = null; let options = null;
var cancelBlur = null; let cancelBlur = null;
var linkMode = true; let linkMode = true;
var debounceLookup = $scope.debounce; let debounceLookup = $scope.debounce;
$input.appendTo(elem); $input.appendTo(elem);
$button.appendTo(elem); $button.appendTo(elem);
...@@ -44,7 +43,7 @@ function (_, $, coreModule) { ...@@ -44,7 +43,7 @@ function (_, $, coreModule) {
value = _.unescape(value); value = _.unescape(value);
$scope.$apply(function() { $scope.$apply(function() {
var selected = _.find($scope.altSegments, {value: value}); let selected = _.find($scope.altSegments, { value: value });
if (selected) { if (selected) {
segment.value = selected.value; segment.value = selected.value;
segment.html = selected.html || selected.value; segment.html = selected.html || selected.value;
...@@ -54,8 +53,7 @@ function (_, $, coreModule) { ...@@ -54,8 +53,7 @@ function (_, $, coreModule) {
if (selected.type) { if (selected.type) {
segment.type = selected.type; segment.type = selected.type;
} }
} } else if (segment.custom !== 'false') {
else if (segment.custom !== 'false') {
segment.value = value; segment.value = value;
segment.html = $sce.trustAsHtml(value); segment.html = $sce.trustAsHtml(value);
segment.expandable = true; segment.expandable = true;
...@@ -67,7 +65,9 @@ function (_, $, coreModule) { ...@@ -67,7 +65,9 @@ function (_, $, coreModule) {
}; };
$scope.switchToLink = function(fromClick) { $scope.switchToLink = function(fromClick) {
if (linkMode && !fromClick) { return; } if (linkMode && !fromClick) {
return;
}
clearTimeout(cancelBlur); clearTimeout(cancelBlur);
cancelBlur = null; cancelBlur = null;
...@@ -117,28 +117,38 @@ function (_, $, coreModule) { ...@@ -117,28 +117,38 @@ function (_, $, coreModule) {
}; };
$scope.matcher = function(item) { $scope.matcher = function(item) {
var str = this.query; let str = this.query;
if (str[0] === '/') { str = str.substring(1); } if (str[0] === '/') {
if (str[str.length - 1] === '/') { str = str.substring(0, str.length-1); } str = str.substring(1);
}
if (str[str.length - 1] === '/') {
str = str.substring(0, str.length - 1);
}
try { try {
return item.toLowerCase().match(str.toLowerCase()); return item.toLowerCase().match(str.toLowerCase());
} catch(e) { } catch (e) {
return false; return false;
} }
}; };
$input.attr('data-provide', 'typeahead'); $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'); let typeahead = $input.data('typeahead');
typeahead.lookup = function () { typeahead.lookup = function() {
this.query = this.$element.val() || ''; 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; return items ? this.process(items) : items;
}; };
if (debounceLookup) { if (debounceLookup) {
typeahead.lookup = _.debounce(typeahead.lookup, 500, {leading: true}); typeahead.lookup = _.debounce(typeahead.lookup, 500, { leading: true });
} }
$button.keydown(function(evt) { $button.keydown(function(evt) {
...@@ -150,7 +160,7 @@ function (_, $, coreModule) { ...@@ -150,7 +160,7 @@ function (_, $, coreModule) {
$button.click(function() { $button.click(function() {
options = null; options = null;
$input.css('width', (Math.max($button.width(), 80) + 16) + 'px'); $input.css('width', Math.max($button.width(), 80) + 16 + 'px');
$button.hide(); $button.hide();
$input.show(); $input.show();
...@@ -158,7 +168,7 @@ function (_, $, coreModule) { ...@@ -158,7 +168,7 @@ function (_, $, coreModule) {
linkMode = false; linkMode = false;
var typeahead = $input.data('typeahead'); let typeahead = $input.data('typeahead');
if (typeahead) { if (typeahead) {
$input.val(''); $input.val('');
typeahead.lookup(); typeahead.lookup();
...@@ -168,27 +178,28 @@ function (_, $, coreModule) { ...@@ -168,27 +178,28 @@ function (_, $, coreModule) {
$input.blur($scope.inputBlur); $input.blur($scope.inputBlur);
$compile(elem.contents())($scope); $compile(elem.contents())($scope);
} },
}; };
}); }
coreModule.default.directive('metricSegmentModel', function(uiSegmentSrv, $q) { export function metricSegmentModel(uiSegmentSrv, $q) {
return { 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', restrict: 'E',
scope: { scope: {
property: "=", property: '=',
options: "=", options: '=',
getOptions: "&", getOptions: '&',
onChange: "&", onChange: '&',
}, },
link: { link: {
pre: function postLink($scope, elem, attrs) { pre: function postLink($scope, elem, attrs) {
var cachedOptions; let cachedOptions;
$scope.valueToSegment = function(value) { $scope.valueToSegment = function(value) {
var option = _.find($scope.options, {value: value}); let option = _.find($scope.options, { value: value });
var segment = { let segment = {
cssClass: attrs.cssClass, cssClass: attrs.cssClass,
custom: attrs.custom, custom: attrs.custom,
value: option ? option.text : value, value: option ? option.text : value,
...@@ -201,9 +212,11 @@ function (_, $, coreModule) { ...@@ -201,9 +212,11 @@ function (_, $, coreModule) {
$scope.getOptionsInternal = function() { $scope.getOptionsInternal = function() {
if ($scope.options) { if ($scope.options) {
cachedOptions = $scope.options; cachedOptions = $scope.options;
return $q.when(_.map($scope.options, function(option) { return $q.when(
return {value: option.text}; _.map($scope.options, function(option) {
})); return { value: option.text };
})
);
} else { } else {
return $scope.getOptions().then(function(options) { return $scope.getOptions().then(function(options) {
cachedOptions = options; cachedOptions = options;
...@@ -211,7 +224,7 @@ function (_, $, coreModule) { ...@@ -211,7 +224,7 @@ function (_, $, coreModule) {
if (option.html) { if (option.html) {
return option; return option;
} }
return {value: option.text}; return { value: option.text };
}); });
}); });
} }
...@@ -219,7 +232,7 @@ function (_, $, coreModule) { ...@@ -219,7 +232,7 @@ function (_, $, coreModule) {
$scope.onSegmentChange = function() { $scope.onSegmentChange = function() {
if (cachedOptions) { if (cachedOptions) {
var option = _.find(cachedOptions, {text: $scope.segment.value}); let option = _.find(cachedOptions, { text: $scope.segment.value });
if (option && option.value !== $scope.property) { if (option && option.value !== $scope.property) {
$scope.property = option.value; $scope.property = option.value;
} else if (attrs.custom !== 'false') { } else if (attrs.custom !== 'false') {
...@@ -239,8 +252,10 @@ function (_, $, coreModule) { ...@@ -239,8 +252,10 @@ function (_, $, coreModule) {
}; };
$scope.segment = $scope.valueToSegment($scope.property); $scope.segment = $scope.valueToSegment($scope.property);
} },
} },
}; };
}); }
});
coreModule.directive('metricSegment', metricSegment);
coreModule.directive('metricSegmentModel', metricSegmentModel);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment