Commit 356f7b9d by Torkel Ödegaard

feat(plugins): good progress on converting query editors, graphite's query ctrl…

feat(plugins): good progress on converting query editors, graphite's query ctrl is now working as is unit tests
parent 822c8f15
...@@ -28,12 +28,12 @@ function rebuildOnChange($compile) { ...@@ -28,12 +28,12 @@ function rebuildOnChange($compile) {
return { return {
transclude: true, transclude: true,
priority: 600, priority: 600,
restrict: 'A', restrict: 'E',
link: function(scope, elem, attrs, ctrl, transclude) { link: function(scope, elem, attrs, ctrl, transclude) {
var childScope, previousElements; var childScope, previousElements;
var uncompiledHtml; var uncompiledHtml;
scope.$watch(attrs.rebuildOnChange, function rebuildOnChangeAction(value) { scope.$watch(attrs.property, function rebuildOnChangeAction(value) {
if (childScope) { if (childScope) {
childScope.$destroy(); childScope.$destroy();
...@@ -41,7 +41,7 @@ function rebuildOnChange($compile) { ...@@ -41,7 +41,7 @@ function rebuildOnChange($compile) {
elem.empty(); elem.empty();
} }
if (value) { if (value || attrs.ignoreNull) {
if (!childScope) { if (!childScope) {
transclude(function(clone, newScope) { transclude(function(clone, newScope) {
childScope = newScope; childScope = newScope;
......
...@@ -41,10 +41,10 @@ ...@@ -41,10 +41,10 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div rebuild-on-change="datasourceMeta.id"> <rebuild-on-change property="datasourceMeta.id">
<plugin-component type="datasource-config-view"> <plugin-component type="datasource-config-view">
</plugin-component> </plugin-component>
</div> </rebuild-on-change>
<div ng-if="testing" style="margin-top: 25px"> <div ng-if="testing" style="margin-top: 25px">
<h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5> <h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
......
<div class="editor-row"> <div class="editor-row">
<div class="tight-form-container"> <div class="tight-form-container">
<rebuild-on-change property="ctrl.panel.datasource" ignore-null="true">
<plugin-component type="metrics-query-editor" ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}"> <plugin-component type="metrics-query-editor" ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
</plugin-component> </plugin-component>
</rebuild-on-change>
</div> </div>
<div style="margin: 20px 0 0 0"> <div style="margin: 20px 0 0 0">
......
...@@ -22,6 +22,7 @@ function (angular, _, $, gfunc) { ...@@ -22,6 +22,7 @@ function (angular, _, $, gfunc) {
link: function($scope, elem) { link: function($scope, elem) {
var categories = gfunc.getCategories(); var categories = gfunc.getCategories();
var allFunctions = getAllFunctionNames(categories); var allFunctions = getAllFunctionNames(categories);
var ctrl = $scope.ctrl;
$scope.functionMenu = createFunctionDropDownMenu(categories); $scope.functionMenu = createFunctionDropDownMenu(categories);
...@@ -48,7 +49,7 @@ function (angular, _, $, gfunc) { ...@@ -48,7 +49,7 @@ function (angular, _, $, gfunc) {
} }
$scope.$apply(function() { $scope.$apply(function() {
$scope.addFunction(funcDef); ctrl.addFunction(funcDef);
}); });
$input.trigger('blur'); $input.trigger('blur');
......
...@@ -27,6 +27,7 @@ function (angular, _, $) { ...@@ -27,6 +27,7 @@ function (angular, _, $) {
link: function postLink($scope, elem) { link: function postLink($scope, elem) {
var $funcLink = $(funcSpanTemplate); var $funcLink = $(funcSpanTemplate);
var $funcControls = $(funcControlsTemplate); var $funcControls = $(funcControlsTemplate);
var ctrl = $scope.ctrl;
var func = $scope.func; var func = $scope.func;
var funcDef = func.def; var funcDef = func.def;
var scheduledRelink = false; var scheduledRelink = false;
...@@ -79,12 +80,14 @@ function (angular, _, $) { ...@@ -79,12 +80,14 @@ function (angular, _, $) {
func.updateParam($input.val(), paramIndex); func.updateParam($input.val(), paramIndex);
scheduledRelinkIfNeeded(); scheduledRelinkIfNeeded();
$scope.$apply($scope.targetChanged); $scope.$apply(function() {
} ctrl.targetChanged();
});
$input.hide(); $input.hide();
$link.show(); $link.show();
} }
}
function inputKeyPress(paramIndex, e) { function inputKeyPress(paramIndex, e) {
/*jshint validthis:true */ /*jshint validthis:true */
...@@ -198,7 +201,7 @@ function (angular, _, $) { ...@@ -198,7 +201,7 @@ function (angular, _, $) {
if ($target.hasClass('fa-remove')) { if ($target.hasClass('fa-remove')) {
toggleFuncControls(); toggleFuncControls();
$scope.$apply(function() { $scope.$apply(function() {
$scope.removeFunction($scope.func); ctrl.removeFunction($scope.func);
}); });
return; return;
} }
...@@ -206,7 +209,7 @@ function (angular, _, $) { ...@@ -206,7 +209,7 @@ function (angular, _, $) {
if ($target.hasClass('fa-arrow-left')) { if ($target.hasClass('fa-arrow-left')) {
$scope.$apply(function() { $scope.$apply(function() {
_.move($scope.functions, $scope.$index, $scope.$index - 1); _.move($scope.functions, $scope.$index, $scope.$index - 1);
$scope.targetChanged(); ctrl.targetChanged();
}); });
return; return;
} }
...@@ -214,7 +217,7 @@ function (angular, _, $) { ...@@ -214,7 +217,7 @@ function (angular, _, $) {
if ($target.hasClass('fa-arrow-right')) { if ($target.hasClass('fa-arrow-right')) {
$scope.$apply(function() { $scope.$apply(function() {
_.move($scope.functions, $scope.$index, $scope.$index + 1); _.move($scope.functions, $scope.$index, $scope.$index + 1);
$scope.targetChanged(); ctrl.targetChanged();
}); });
return; return;
} }
......
///<reference path="../../../headers/common.d.ts" /> ///<reference path="../../../headers/common.d.ts" />
import './add_graphite_func'; import './add_graphite_func';
import './func_editor';
import angular from 'angular'; import angular from 'angular';
import _ from 'lodash'; import _ from 'lodash';
......
...@@ -9,14 +9,14 @@ ...@@ -9,14 +9,14 @@
<i class="fa fa-bars"></i> <i class="fa fa-bars"></i>
</a> </a>
<ul class="dropdown-menu pull-right" role="menu"> <ul class="dropdown-menu pull-right" role="menu">
<li role="menuitem"><a tabindex="1" ng-click="ctrl.duplicateDataQuery(target)">Duplicate</a></li> <li role="menuitem"><a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a></li>
<li role="menuitem"><a tabindex="1" ng-click="ctrl.moveDataQuery(-1)">Move up</a></li> <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a></li>
<li role="menuitem"><a tabindex="1" ng-click="ctrl.moveDataQuery(1)">Move down</a></li> <li role="menuitem"><a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a></li>
</ul> </ul>
</div> </div>
</li> </li>
<li class="tight-form-item last"> <li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="ctrl.removeDataQuery(ctrl.target)"> <a class="pointer" tabindex="1" ng-click="ctrl.removeQuery()">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</a> </a>
</li> </li>
......
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