mirror of https://github.com/grafana/grafana
Torkel Ödegaard
10 years ago
parent
cca37caf33
commit
b170b6ec8b
@ -0,0 +1,183 @@ |
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import _ from 'lodash'; |
||||
import $ from 'jquery'; |
||||
import coreModule from 'app/core/core_module'; |
||||
|
||||
var template = ` |
||||
<div class="tight-form-func-controls"> |
||||
<span class="pointer fa fa-remove" ng-click="removeActionInternal()"></span> |
||||
</div> |
||||
|
||||
<a ng-click="toggleControls()" class="query-part-name">{{part.def.type}}</a> |
||||
<span>(</span><span class="query-part-parameters"></span><span>)</span> |
||||
`;
|
||||
|
||||
/** @ngInject */ |
||||
export function queryPartEditorDirective($compile, templateSrv) { |
||||
|
||||
var paramTemplate = '<input type="text" style="display:none"' + |
||||
' class="input-mini tight-form-func-param"></input>'; |
||||
return { |
||||
restrict: 'E', |
||||
template: template, |
||||
scope: { |
||||
part: "=", |
||||
removeAction: "&", |
||||
partUpdated: "&", |
||||
getOptions: "&", |
||||
}, |
||||
link: function postLink($scope, elem) { |
||||
var part = $scope.part; |
||||
var partDef = part.def; |
||||
var $paramsContainer = elem.find('.query-part-parameters'); |
||||
var $controlsContainer = elem.find('.tight-form-func-controls'); |
||||
|
||||
function clickFuncParam(paramIndex) { |
||||
/*jshint validthis:true */ |
||||
var $link = $(this); |
||||
var $input = $link.next(); |
||||
|
||||
$input.val(part.params[paramIndex]); |
||||
$input.css('width', ($link.width() + 16) + 'px'); |
||||
|
||||
$link.hide(); |
||||
$input.show(); |
||||
$input.focus(); |
||||
$input.select(); |
||||
|
||||
var typeahead = $input.data('typeahead'); |
||||
if (typeahead) { |
||||
$input.val(''); |
||||
typeahead.lookup(); |
||||
} |
||||
} |
||||
|
||||
function inputBlur(paramIndex) { |
||||
/*jshint validthis:true */ |
||||
var $input = $(this); |
||||
var $link = $input.prev(); |
||||
var newValue = $input.val(); |
||||
|
||||
if (newValue !== '' || part.def.params[paramIndex].optional) { |
||||
$link.html(templateSrv.highlightVariablesAsHtml(newValue)); |
||||
|
||||
part.updateParam($input.val(), paramIndex); |
||||
$scope.$apply($scope.partUpdated); |
||||
} |
||||
|
||||
$input.hide(); |
||||
$link.show(); |
||||
} |
||||
|
||||
function inputKeyPress(paramIndex, e) { |
||||
/*jshint validthis:true */ |
||||
if (e.which === 13) { |
||||
inputBlur.call(this, paramIndex); |
||||
} |
||||
} |
||||
|
||||
function inputKeyDown() { |
||||
/*jshint validthis:true */ |
||||
this.style.width = (3 + this.value.length) * 8 + 'px'; |
||||
} |
||||
|
||||
function addTypeahead($input, param, paramIndex) { |
||||
if (!param.options && !param.dynamicLookup) { |
||||
return; |
||||
} |
||||
|
||||
var typeaheadSource = function (query, callback) { |
||||
if (param.options) { return param.options; } |
||||
|
||||
$scope.$apply(function() { |
||||
$scope.getOptions().then(function(result) { |
||||
var dynamicOptions = _.map(result, function(op) { return op.value; }); |
||||
callback(dynamicOptions); |
||||
}); |
||||
}); |
||||
}; |
||||
|
||||
$input.attr('data-provide', 'typeahead'); |
||||
var options = param.options; |
||||
if (param.type === 'int') { |
||||
options = _.map(options, function(val) { return val.toString(); }); |
||||
} |
||||
|
||||
$input.typeahead({ |
||||
source: typeaheadSource, |
||||
minLength: 0, |
||||
items: 1000, |
||||
updater: function (value) { |
||||
setTimeout(function() { |
||||
inputBlur.call($input[0], paramIndex); |
||||
}, 0); |
||||
return value; |
||||
} |
||||
}); |
||||
|
||||
var typeahead = $input.data('typeahead'); |
||||
typeahead.lookup = function () { |
||||
this.query = this.$element.val() || ''; |
||||
var items = this.source(this.query, $.proxy(this.process, this)); |
||||
return items ? this.process(items) : items; |
||||
}; |
||||
} |
||||
|
||||
$scope.toggleControls = function() { |
||||
var targetDiv = elem.closest('.tight-form'); |
||||
|
||||
if (elem.hasClass('show-function-controls')) { |
||||
elem.removeClass('show-function-controls'); |
||||
targetDiv.removeClass('has-open-function'); |
||||
$controlsContainer.hide(); |
||||
return; |
||||
} |
||||
|
||||
elem.addClass('show-function-controls'); |
||||
targetDiv.addClass('has-open-function'); |
||||
$controlsContainer.show(); |
||||
}; |
||||
|
||||
$scope.removeActionInternal = function() { |
||||
$scope.toggleControls(); |
||||
$scope.removeAction(); |
||||
}; |
||||
|
||||
function addElementsAndCompile() { |
||||
_.each(partDef.params, function(param, index) { |
||||
if (param.optional && part.params.length <= index) { |
||||
return; |
||||
} |
||||
|
||||
if (index > 0) { |
||||
$('<span>, </span>').appendTo($paramsContainer); |
||||
} |
||||
|
||||
var paramValue = templateSrv.highlightVariablesAsHtml(part.params[index]); |
||||
var $paramLink = $('<a class="graphite-func-param-link pointer">' + paramValue + '</a>'); |
||||
var $input = $(paramTemplate); |
||||
|
||||
$paramLink.appendTo($paramsContainer); |
||||
$input.appendTo($paramsContainer); |
||||
|
||||
$input.blur(_.partial(inputBlur, index)); |
||||
$input.keyup(inputKeyDown); |
||||
$input.keypress(_.partial(inputKeyPress, index)); |
||||
$paramLink.click(_.partial(clickFuncParam, index)); |
||||
|
||||
addTypeahead($input, param, index); |
||||
}); |
||||
} |
||||
|
||||
function relink() { |
||||
$paramsContainer.empty(); |
||||
addElementsAndCompile(); |
||||
} |
||||
|
||||
relink(); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
coreModule.directive('queryPartEditor', queryPartEditorDirective); |
||||
@ -1,5 +0,0 @@ |
||||
<div class="tight-form-func-controls"> |
||||
<span class="pointer fa fa-remove" ng-click="removeActionInternal()" ></span> |
||||
</div> |
||||
|
||||
<a ng-click="toggleControls()" class="query-part-name">{{part.def.type}}</a><span>(</span><span class="query-part-parameters"></span><span>)</span> |
||||
@ -1,178 +0,0 @@ |
||||
define([ |
||||
'angular', |
||||
'lodash', |
||||
'jquery', |
||||
], |
||||
function (angular, _, $) { |
||||
'use strict'; |
||||
|
||||
angular |
||||
.module('grafana.directives') |
||||
.directive('influxQueryPartEditor', function($compile, templateSrv) { |
||||
|
||||
var paramTemplate = '<input type="text" style="display:none"' + |
||||
' class="input-mini tight-form-func-param"></input>'; |
||||
return { |
||||
restrict: 'E', |
||||
templateUrl: 'public/app/plugins/datasource/influxdb/partials/query_part.html', |
||||
scope: { |
||||
part: "=", |
||||
removeAction: "&", |
||||
partUpdated: "&", |
||||
getOptions: "&", |
||||
}, |
||||
link: function postLink($scope, elem) { |
||||
var part = $scope.part; |
||||
var partDef = part.def; |
||||
var $paramsContainer = elem.find('.query-part-parameters'); |
||||
var $controlsContainer = elem.find('.tight-form-func-controls'); |
||||
|
||||
function clickFuncParam(paramIndex) { |
||||
/*jshint validthis:true */ |
||||
var $link = $(this); |
||||
var $input = $link.next(); |
||||
|
||||
$input.val(part.params[paramIndex]); |
||||
$input.css('width', ($link.width() + 16) + 'px'); |
||||
|
||||
$link.hide(); |
||||
$input.show(); |
||||
$input.focus(); |
||||
$input.select(); |
||||
|
||||
var typeahead = $input.data('typeahead'); |
||||
if (typeahead) { |
||||
$input.val(''); |
||||
typeahead.lookup(); |
||||
} |
||||
} |
||||
|
||||
function inputBlur(paramIndex) { |
||||
/*jshint validthis:true */ |
||||
var $input = $(this); |
||||
var $link = $input.prev(); |
||||
var newValue = $input.val(); |
||||
|
||||
if (newValue !== '' || part.def.params[paramIndex].optional) { |
||||
$link.html(templateSrv.highlightVariablesAsHtml(newValue)); |
||||
|
||||
part.updateParam($input.val(), paramIndex); |
||||
$scope.$apply($scope.partUpdated); |
||||
} |
||||
|
||||
$input.hide(); |
||||
$link.show(); |
||||
} |
||||
|
||||
function inputKeyPress(paramIndex, e) { |
||||
/*jshint validthis:true */ |
||||
if(e.which === 13) { |
||||
inputBlur.call(this, paramIndex); |
||||
} |
||||
} |
||||
|
||||
function inputKeyDown() { |
||||
/*jshint validthis:true */ |
||||
this.style.width = (3 + this.value.length) * 8 + 'px'; |
||||
} |
||||
|
||||
function addTypeahead($input, param, paramIndex) { |
||||
if (!param.options && !param.dynamicLookup) { |
||||
return; |
||||
} |
||||
|
||||
var typeaheadSource = function (query, callback) { |
||||
if (param.options) { return param.options; } |
||||
|
||||
$scope.$apply(function() { |
||||
$scope.getOptions().then(function(result) { |
||||
var dynamicOptions = _.map(result, function(op) { return op.value; }); |
||||
callback(dynamicOptions); |
||||
}); |
||||
}); |
||||
}; |
||||
|
||||
$input.attr('data-provide', 'typeahead'); |
||||
var options = param.options; |
||||
if (param.type === 'int') { |
||||
options = _.map(options, function(val) { return val.toString(); }); |
||||
} |
||||
|
||||
$input.typeahead({ |
||||
source: typeaheadSource, |
||||
minLength: 0, |
||||
items: 1000, |
||||
updater: function (value) { |
||||
setTimeout(function() { |
||||
inputBlur.call($input[0], paramIndex); |
||||
}, 0); |
||||
return value; |
||||
} |
||||
}); |
||||
|
||||
var typeahead = $input.data('typeahead'); |
||||
typeahead.lookup = function () { |
||||
this.query = this.$element.val() || ''; |
||||
var items = this.source(this.query, $.proxy(this.process, this)); |
||||
return items ? this.process(items) : items; |
||||
}; |
||||
} |
||||
|
||||
$scope.toggleControls = function() { |
||||
var targetDiv = elem.closest('.tight-form'); |
||||
|
||||
if (elem.hasClass('show-function-controls')) { |
||||
elem.removeClass('show-function-controls'); |
||||
targetDiv.removeClass('has-open-function'); |
||||
$controlsContainer.hide(); |
||||
return; |
||||
} |
||||
|
||||
elem.addClass('show-function-controls'); |
||||
targetDiv.addClass('has-open-function'); |
||||
$controlsContainer.show(); |
||||
}; |
||||
|
||||
$scope.removeActionInternal = function() { |
||||
$scope.toggleControls(); |
||||
$scope.removeAction(); |
||||
}; |
||||
|
||||
function addElementsAndCompile() { |
||||
_.each(partDef.params, function(param, index) { |
||||
if (param.optional && part.params.length <= index) { |
||||
return; |
||||
} |
||||
|
||||
if (index > 0) { |
||||
$('<span>, </span>').appendTo($paramsContainer); |
||||
} |
||||
|
||||
var paramValue = templateSrv.highlightVariablesAsHtml(part.params[index]); |
||||
var $paramLink = $('<a class="graphite-func-param-link pointer">' + paramValue + '</a>'); |
||||
var $input = $(paramTemplate); |
||||
|
||||
$paramLink.appendTo($paramsContainer); |
||||
$input.appendTo($paramsContainer); |
||||
|
||||
$input.blur(_.partial(inputBlur, index)); |
||||
$input.keyup(inputKeyDown); |
||||
$input.keypress(_.partial(inputKeyPress, index)); |
||||
$paramLink.click(_.partial(clickFuncParam, index)); |
||||
|
||||
addTypeahead($input, param, index); |
||||
}); |
||||
} |
||||
|
||||
function relink() { |
||||
$paramsContainer.empty(); |
||||
addElementsAndCompile(); |
||||
} |
||||
|
||||
relink(); |
||||
} |
||||
}; |
||||
|
||||
}); |
||||
|
||||
}); |
||||
Loading…
Reference in new issue