Skip to content

N
nexpie-grafana-theme
Commit 945b5ee3 by Torkel Ödegaard
Options

feat(templating): progress on variable system refactoring, #6048

parent 8a796c5b
Showing with 118 additions and 82 deletions
public/app/features/templating/all.ts
import './templateSrv';
import './editorCtrl';
import './editor_ctrl';
import {VariableSrv} from './variable_srv';
import {IntervalVariable} from './interval_variable';
......
public/app/features/templating/constant_variable.ts
......@@ -11,9 +11,9 @@ export class ConstantVariable implements Variable {
defaults = {
type: 'constant',
name: '',
query: '',
hide: 2,
refresh: 0,
label: '',
query: '',
};
/** @ngInject */
......@@ -33,6 +33,7 @@ export class ConstantVariable implements Variable {
updateOptions() {
this.options = [{text: this.query.trim(), value: this.query.trim()}];
this.setValue(this.options[0]);
return Promise.resolve();
}
dependsOn(variable) {
......
public/app/features/templating/custom_variable.ts
......@@ -2,23 +2,41 @@
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
import {Variable} from './variable';
import {Variable, assignModelProperties} from './variable';
import {VariableSrv, variableConstructorMap} from './variable_srv';
export class CustomVariable implements Variable {
query: string;
options: any;
includeAll: boolean;
multi: boolean;
defaults = {
type: 'custom',
name: '',
label: '',
hide: 0,
options: [],
current: {text: '', value: ''},
query: '',
includeAll: false,
multi: false,
};
/** @ngInject */
constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
_.extend(this, model);
assignModelProperties(this, model, this.defaults);
}
setValue(option) {
this.variableSrv.setOptionAsCurrent(this, option);
}
getModel() {
assignModelProperties(this.model, this, this.defaults);
return this.model;
}
updateOptions() {
// extract options in comma separated string
this.options = _.map(this.query.split(/[,]+/), function(text) {
......@@ -28,6 +46,8 @@ export class CustomVariable implements Variable {
if (this.includeAll) {
this.addAllOption();
}
return Promise.resolve();
}
addAllOption() {
......
public/app/features/templating/datasource_variable.ts
......@@ -2,7 +2,7 @@
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
import {Variable} from './variable';
import {Variable, assignModelProperties} from './variable';
import {VariableSrv, variableConstructorMap} from './variable_srv';
export class DatasourceVariable implements Variable {
......@@ -10,9 +10,25 @@ export class DatasourceVariable implements Variable {
query: string;
options: any;
defaults = {
type: 'datasource',
name: '',
hide: 0,
label: '',
current: {text: '', value: ''}
regex: '',
options: [],
query: '',
};
/** @ngInject */
constructor(private model, private datasourceSrv, private variableSrv) {
_.extend(this, model);
assignModelProperties(this, model, this.defaults);
}
getModel() {
assignModelProperties(this.model, this, this.defaults);
return this.model;
}
setValue(option) {
......
public/app/features/templating/editorCtrl.js → public/app/features/templating/editor_ctrl.ts
define([
'angular',
'lodash',
],
function (angular, _) {
'use strict';
var module = angular.module('grafana.controllers');
module.controller('TemplateEditorCtrl', function($scope, datasourceSrv, variableSrv) {
var replacementDefaults = {
type: 'query',
datasource: null,
refresh: 0,
sort: 0,
name: '',
hide: 0,
options: [],
includeAll: false,
multi: false,
};
///<reference path="../../headers/common.d.ts" />
import angular from 'angular';
import _ from 'lodash';
import $ from 'jquery';
import kbn from 'app/core/utils/kbn';
import coreModule from 'app/core/core_module';
import appEvents from 'app/core/app_events';
export class VariableEditorCtrl {
/** @ngInject */
constructor(private $scope, private datasourceSrv, private variableSrv) {
$scope.variableTypes = [
{value: "query", text: "Query"},
{value: "adhoc", text: "Ad hoc filters"},
......@@ -53,15 +43,13 @@ function (angular, _) {
$scope.init = function() {
$scope.mode = 'list';
$scope.datasourceTypes = {};
$scope.datasources = _.filter(datasourceSrv.getMetricSources(), function(ds) {
$scope.datasourceTypes[ds.meta.id] = {text: ds.meta.name, value: ds.meta.id};
return !ds.meta.builtIn && ds.value !== null;
});
$scope.datasourceTypes = _.map($scope.datasourceTypes, function(value) {
return value;
});
$scope.datasourceTypes = _($scope.datasources).uniqBy('meta.id').map(function(ds) {
return {text: ds.meta.name, value: ds.meta.id};
}).value();
$scope.variables = variableSrv.variables;
$scope.reset();
......@@ -71,17 +59,6 @@ function (angular, _) {
$scope.reset();
}
});
$scope.$watch('current.datasource', function(val) {
if ($scope.mode === 'new') {
datasourceSrv.get(val).then(function(ds) {
if (ds.meta.defaultMatchFormat) {
$scope.current.allFormat = ds.meta.defaultMatchFormat;
$scope.current.multiFormat = ds.meta.defaultMatchFormat;
}
});
}
});
};
$scope.add = function() {
......@@ -123,17 +100,11 @@ function (angular, _) {
$scope.current = variable;
$scope.currentIsNew = false;
$scope.mode = 'edit';
$scope.current.sort = $scope.current.sort || replacementDefaults.sort;
if ($scope.current.datasource === void 0) {
$scope.current.datasource = null;
$scope.current.type = 'query';
$scope.current.allFormat = 'glob';
}
};
$scope.duplicate = function(variable) {
$scope.current = angular.copy(variable);
var clone = _.cloneDeep(variable.getModel());
$scope.current = variableSrv.createVariableFromModel(clone);
$scope.variables.push($scope.current);
$scope.current.name = 'copy_of_'+variable.name;
$scope.updateSubmenuVisibility();
......@@ -150,7 +121,7 @@ function (angular, _) {
$scope.reset = function() {
$scope.currentIsNew = true;
$scope.current = angular.copy(replacementDefaults);
$scope.current = variableSrv.createVariableFromModel({type: 'query'});
};
$scope.showSelectionOptions = function() {
......@@ -165,27 +136,38 @@ function (angular, _) {
return false;
};
$scope.typeChanged = function () {
if ($scope.current.type === 'interval') {
$scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d';
$scope.current.refresh = 0;
}
$scope.typeChanged = function() {
var old = $scope.current;
$scope.current = variableSrv.createVariableFromModel({type: $scope.current.type});
$scope.current.name = old.name;
$scope.current.hide = old.hide;
$scope.current.label = old.label;
if ($scope.current.type === 'query') {
$scope.current.query = '';
var oldIndex = _.indexOf(this.variables, old);
if (oldIndex !== -1) {
this.variables[oldIndex] = $scope.current;
}
if ($scope.current.type === 'constant') {
$scope.current.query = '';
$scope.current.refresh = 0;
$scope.current.hide = 2;
}
if ($scope.current.type === 'datasource') {
$scope.current.query = $scope.datasourceTypes[0].value;
$scope.current.regex = '';
$scope.current.refresh = 1;
}
// if ($scope.current.type === 'interval') {
// $scope.current.query = '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d';
// $scope.current.refresh = 0;
// }
//
// if ($scope.current.type === 'query') {
// $scope.current.query = '';
// }
//
// if ($scope.current.type === 'constant') {
// $scope.current.query = '';
// $scope.current.refresh = 0;
// $scope.current.hide = 2;
// }
//
// if ($scope.current.type === 'datasource') {
// $scope.current.query = $scope.datasourceTypes[0].value;
// $scope.current.regex = '';
// $scope.current.refresh = 1;
// }
};
$scope.removeVariable = function(variable) {
......@@ -194,6 +176,8 @@ function (angular, _) {
$scope.updateSubmenuVisibility();
};
});
}
}
coreModule.controller('VariableEditorCtrl', VariableEditorCtrl);
});
public/app/features/templating/interval_variable.ts
......@@ -2,7 +2,7 @@
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
import {Variable} from './variable';
import {Variable, assignModelProperties} from './variable';
import {VariableSrv, variableConstructorMap} from './variable_srv';
export class IntervalVariable implements Variable {
......@@ -12,9 +12,27 @@ export class IntervalVariable implements Variable {
auto: boolean;
query: string;
defaults = {
type: 'interval',
name: '',
hide: 0,
label: '',
options: [],
current: {text: '', value: ''},
query: '1m,10m,30m,1h,6h,12h,1d,7d,14d,30d',
auto: false,
auto_min: '10s',
auto_count: 30,
};
/** @ngInject */
constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
_.extend(this, model);
assignModelProperties(this, model, this.defaults);
}
getModel() {
assignModelProperties(this.model, this, this.defaults);
return this.model;
}
setValue(option) {
......
public/app/features/templating/partials/editor.html
<div ng-controller="TemplateEditorCtrl" ng-init="init()">
<div ng-controller="VariableEditorCtrl" ng-init="init()">
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
Templating
......
public/app/features/templating/query_variable.ts
......@@ -26,7 +26,7 @@ export class QueryVariable implements Variable {
type: 'query',
query: '',
regex: '',
sort: 1,
sort: 0,
datasource: null,
refresh: 0,
hide: 0,
......
public/app/features/templating/specs/query_variable_specs.ts
......@@ -10,7 +10,7 @@ describe('QueryVariable', function() {
var variable = new QueryVariable({}, null, null, null, null);
expect(variable.datasource).to.be(null);
expect(variable.refresh).to.be(0);
expect(variable.sort).to.be(1);
expect(variable.sort).to.be(0);
expect(variable.name).to.be('');
expect(variable.hide).to.be(0);
expect(variable.options.length).to.be(0);
......
public/app/features/templating/variable_srv.ts
......@@ -2,10 +2,7 @@
import angular from 'angular';
import _ from 'lodash';
import $ from 'jquery';
import kbn from 'app/core/utils/kbn';
import coreModule from 'app/core/core_module';
import appEvents from 'app/core/app_events';
import {Variable} from './variable';
export var variableConstructorMap: any = {};
......
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