apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

Browse Source
pull/6108/head
Torkel Ödegaard 9 years ago
parent 9d6ecc6361
commit 7a6fb70026
9 changed files with 109 additions and 112 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      public/app/features/templating/constant_variable.ts
  2. 15
      public/app/features/templating/custom_variable.ts
  3. 10
      public/app/features/templating/datasource_variable.ts
  4. 14
      public/app/features/templating/editor_ctrl.ts
  5. 10
      public/app/features/templating/interval_variable.ts
  6. 142
      public/app/features/templating/partials/editor.html
  7. 13
      public/app/features/templating/query_variable.ts
  8. 1
      public/app/features/templating/variable.ts
  9. 6
      public/app/features/templating/variable_srv.ts

10
public/app/features/templating/constant_variable.ts
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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;
}

Write Preview
Loading…
Cancel
Save