IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-30 20:54:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-09-19 18:32:09 +02:00
parent 9d6ecc6361
commit 7a6fb70026
9 changed files with 109 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/app/features/templating/constant_variable.ts
View File

@ -1,8 +1,8 @@
///<reference path="../../headers/common.d.ts" />
import _ from 'lodash';
import {Variable, assignModelProperties} from './variable';
import {VariableSrv, variableConstructorMap} from './variable_srv';
import {Variable, assignModelProperties, variableTypes} from './variable';
import {VariableSrv} from './variable_srv';
export class ConstantVariable implements Variable {
query: string;
@ -45,4 +45,8 @@ export class ConstantVariable implements Variable {
}
}
variableConstructorMap['constant'] = ConstantVariable;
variableTypes['constant'] = {
name: 'Constant',
ctor: ConstantVariable,
description: 'Define a hidden constant variable, useful for metric prefixes in dashboards you want to share' ,
};

15
public/app/features/templating/custom_variable.ts
View File

@ -2,8 +2,8 @@
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
import {Variable, assignModelProperties} from './variable';
import {VariableSrv, variableConstructorMap} from './variable_srv';
import {Variable, assignModelProperties, variableTypes} from './variable';
import {VariableSrv} from './variable_srv';
export class CustomVariable implements Variable {
query: string;
@ -23,9 +23,7 @@ export class CustomVariable implements Variable {
multi: false,
};
supportsMulti = true;
/** @ngInject */
/** @ngInject **/
constructor(private model, private timeSrv, private templateSrv, private variableSrv) {
assignModelProperties(this, model, this.defaults);
}
@ -65,4 +63,9 @@ export class CustomVariable implements Variable {
}
}
variableConstructorMap['custom'] = CustomVariable;
variableTypes['custom'] = {
name: 'Custom',
ctor: CustomVariable,
description: 'Define variable values manually' ,
supportsMulti: true,
};

10
public/app/features/templating/datasource_variable.ts
View File

@ -2,8 +2,8 @@
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
import {Variable, assignModelProperties} from './variable';
import {VariableSrv, variableConstructorMap} from './variable_srv';
import {Variable, assignModelProperties, variableTypes} from './variable';
import {VariableSrv} from './variable_srv';
export class DatasourceVariable implements Variable {
regex: any;
@ -75,4 +75,8 @@ export class DatasourceVariable implements Variable {
}
}
variableConstructorMap['datasource'] = DatasourceVariable;
variableTypes['datasource'] = {
name: 'Datasource',
ctor: DatasourceVariable,
description: 'Enabled you to dynamically switch the datasource for multiple panels',
};

14
public/app/features/templating/editor_ctrl.ts
View File

@ -1,24 +1,14 @@
///<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';
import {variableTypes} from './variable';
export class VariableEditorCtrl {
/** @ngInject */
constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) {
$scope.variableTypes = [
{value: "query", text: "Query"},
{value: "adhoc", text: "Ad hoc filters"},
{value: "interval", text: "Interval"},
{value: "datasource", text: "Data source"},
{value: "custom", text: "Custom"},
{value: "constant", text: "Constant"},
];
$scope.variableTypes = variableTypes;
$scope.refreshOptions = [
{value: 0, text: "Never"},

10
public/app/features/templating/interval_variable.ts
View File

@ -2,8 +2,8 @@
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
import {Variable, assignModelProperties} from './variable';
import {VariableSrv, variableConstructorMap} from './variable_srv';
import {Variable, assignModelProperties, variableTypes} from './variable';
import {VariableSrv} from './variable_srv';
export class IntervalVariable implements Variable {
auto_count: number;
@ -77,4 +77,8 @@ export class IntervalVariable implements Variable {
}
}
variableConstructorMap['interval'] = IntervalVariable;
variableTypes['interval'] = {
name: 'Interval',
ctor: IntervalVariable,
description: 'Define a timespan interval (ex 1m, 1h, 1d)',
};

142
public/app/features/templating/partials/editor.html
View File

@ -82,21 +82,11 @@
<span class="gf-form-label width-6">
Type
<info-popover mode="right-normal">
<dl>
<dt>Query</dt>
<dd>Variable values are fetched from a metric names query to a data source</dd>
<dt>Interval</dt>
<dd>Timespan variable type</dd>
<dt>Datasource</dt>
<dd>Dynamically switch data sources using this type of variable</dd>
<dt>Custom</dt>
<dd>Define variable values manually</dd>
</dl>
<a href="http://docs.grafana.org/reference/templating" target="_blank">Templating docs</a>
{{variableTypes[current.type].description}}
</info-popover>
</span>
<div class="gf-form-select-wrapper max-width-17">
<select class="gf-form-input" ng-model="current.type" ng-options="f.value as f.text for f in variableTypes" ng-change="typeChanged()"></select>
<select class="gf-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in variableTypes" ng-change="typeChanged()"></select>
</div>
</div>
</div>
@ -215,26 +205,26 @@
<label class="gf-form-label width-12">Type</label>
<div class="gf-form-select-wrapper max-width-18">
<select class="gf-form-input" ng-model="current.query" ng-options="f.value as f.text for f in datasourceTypes" ng-change="runQuery()"></select>
</div>
</div>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-12">
Instance name filter
<info-popover mode="right-normal">
Regex filter for which data source instances to choose from in
the variable value dropdown. Leave empty for all.
<br><br>
Example: <code>/^prod/</code>
<div class="gf-form">
<label class="gf-form-label width-12">
Instance name filter
<info-popover mode="right-normal">
Regex filter for which data source instances to choose from in
the variable value dropdown. Leave empty for all.
<br><br>
Example: <code>/^prod/</code>
</info-popover>
</label>
<input type="text" class="gf-form-input max-width-18" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</div>
</div>
</info-popover>
</label>
<input type="text" class="gf-form-input max-width-18" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</div>
</div>
<div ng-show="current.type === 'adhoc'" class="gf-form-group">
<h5 class="section-heading">Options</h5>
<h5 class="section-heading">Options</h5>
<div class="gf-form max-width-21">
<span class="gf-form-label width-8">Data source</span>
@ -242,58 +232,58 @@
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
</div>
</div>
</div>
<div class="section gf-form-group" ng-show="current.supportsMulti">
<h5 class="section-heading">Selection Options</h5>
<div class="section">
<gf-form-switch class="gf-form"
label="Multi-value"
label-class="width-10"
tooltip="Enables multiple values to be selected at the same time"
checked="current.multi"
on-change="runQuery()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="Include All option"
label-class="width-10"
checked="current.includeAll"
on-change="runQuery()">
</gf-form-switch>
</div>
<div class="gf-form" ng-if="current.includeAll">
<span class="gf-form-label width-10">Custom all value</span>
<input type="text" class="gf-form-input max-width-15" ng-model='current.allValue' placeholder="blank = auto"></input>
</div>
</div>
<div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
<h5 class="section-heading">Selection Options</h5>
<div class="section">
<gf-form-switch class="gf-form"
label="Multi-value"
label-class="width-10"
tooltip="Enables multiple values to be selected at the same time"
checked="current.multi"
on-change="runQuery()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="Include All option"
label-class="width-10"
checked="current.includeAll"
on-change="runQuery()">
</gf-form-switch>
</div>
<div class="gf-form" ng-if="current.includeAll">
<span class="gf-form-label width-10">Custom all value</span>
<input type="text" class="gf-form-input max-width-15" ng-model='current.allValue' placeholder="blank = auto"></input>
</div>
</div>
<div class="gf-form-group" ng-if="current.type === 'query'">
<h5>Value groups/tags (Experimental feature)</h5>
<div class="gf-form">
<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
</div>
<div class="gf-form last" ng-if="current.useTags">
<span class="gf-form-label width-10">Tags query</span>
<input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
</div>
<div class="gf-form" ng-if="current.useTags">
<li class="gf-form-label width-10">Tag values query</li>
<input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
</div>
</div>
<div class="gf-form-group" ng-if="current.type === 'query'">
<h5>Value groups/tags (Experimental feature)</h5>
<div class="gf-form">
<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
</div>
<div class="gf-form last" ng-if="current.useTags">
<span class="gf-form-label width-10">Tags query</span>
<input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
</div>
<div class="gf-form" ng-if="current.useTags">
<li class="gf-form-label width-10">Tag values query</li>
<input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
</div>
</div>
<div class="gf-form-group">
<h5>Preview of values (shows max 20)</h5>
<div class="gf-form-inline">
<div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
<span class="gf-form-label">{{option.text}}</span>
</div>
</div>
</div>
</div>
<div class="gf-form-group">
<h5>Preview of values (shows max 20)</h5>
<div class="gf-form-inline">
<div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
<span class="gf-form-label">{{option.text}}</span>
</div>
</div>
</div>
</div>
<div class="gf-form-button-row p-y-0">
<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
<div class="gf-form-button-row p-y-0">
<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
</div>
</div>

13
public/app/features/templating/query_variable.ts
View File

@ -2,8 +2,8 @@
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
import {Variable, containsVariable, assignModelProperties} from './variable';
import {VariableSrv, variableConstructorMap} from './variable_srv';
import {Variable, containsVariable, assignModelProperties, variableTypes} from './variable';
import {VariableSrv} from './variable_srv';
function getNoneOption() {
return { text: 'None', value: '', isNone: true };
@ -37,8 +37,6 @@ export class QueryVariable implements Variable {
current: {text: '', value: ''},
};
supportsMulti = true;
constructor(private model, private datasourceSrv, private templateSrv, private variableSrv, private $q) {
// copy model properties to this instance
assignModelProperties(this, model, this.defaults);
@ -151,4 +149,9 @@ export class QueryVariable implements Variable {
}
}
variableConstructorMap['query'] = QueryVariable;
variableTypes['query'] = {
name: 'Query',
ctor: QueryVariable,
description: 'Variable values are fetched from a datasource query',
supportsMulti: true,
};

1
public/app/features/templating/variable.ts
View File

@ -11,6 +11,7 @@ export interface Variable {
getModel();
}
export var variableTypes = {};
export function assignModelProperties(target, source, defaults) {
_.forEach(defaults, function(value, key) {

6
public/app/features/templating/variable_srv.ts
View File

@ -3,9 +3,7 @@
import angular from 'angular';
import _ from 'lodash';
import coreModule from 'app/core/core_module';
import {Variable} from './variable';
export var variableConstructorMap: any = {};
import {Variable, variableTypes} from './variable';
export class VariableSrv {
dashboard: any;
@ -85,7 +83,7 @@ export class VariableSrv {
}
createVariableFromModel(model) {
var ctor = variableConstructorMap[model.type];
var ctor = variableTypes[model.type].ctor;
if (!ctor) {
throw "Unable to find variable constructor for " + model.type;
}