Skip to content

N
nexpie-grafana-theme
Commit 9b6571fa by bergquist
Options

template: dont allow template variables to begin with '__' 

closes #7678
parent 3ef077c1
Showing with 205 additions and 182 deletions
public/app/features/templating/editor_ctrl.ts
...@@ -10,6 +10,7 @@ export class VariableEditorCtrl { ...@@ -10,6 +10,7 @@ export class VariableEditorCtrl {
constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) { constructor(private $scope, private datasourceSrv, private variableSrv, templateSrv) {
$scope.variableTypes = variableTypes; $scope.variableTypes = variableTypes;
$scope.ctrl = {}; $scope.ctrl = {};
$scope.namePattern = /^((?!__).)*$/;
$scope.refreshOptions = [ $scope.refreshOptions = [
{value: 0, text: "Never"}, {value: 0, text: "Never"},
......
public/app/features/templating/partials/editor.html
<div ng-controller="VariableEditorCtrl" ng-init="init()"> <div ng-controller="VariableEditorCtrl" ng-init="init()">
<div class="tabbed-view-header"> <div class="tabbed-view-header">
<h2 class="tabbed-view-title"> <h2 class="tabbed-view-title">
Templating Templating
</h2> </h2>
<ul class="gf-tabs"> <ul class="gf-tabs">
<li class="gf-tabs-item" > <li class="gf-tabs-item" >
<a class="gf-tabs-link" ng-click="mode = 'list';" ng-class="{active: mode === 'list'}"> <a class="gf-tabs-link" ng-click="mode = 'list';" ng-class="{active: mode === 'list'}">
Variables Variables
</a> </a>
</li> </li>
<li class="gf-tabs-item" ng-show="mode === 'edit'"> <li class="gf-tabs-item" ng-show="mode === 'edit'">
<a class="gf-tabs-link" ng-class="{active: mode === 'edit'}"> <a class="gf-tabs-link" ng-class="{active: mode === 'edit'}">
Edit Edit
</a> </a>
</li> </li>
<li class="gf-tabs-item" ng-show="mode === 'new'"> <li class="gf-tabs-item" ng-show="mode === 'new'">
<span class="active gf-tabs-link">New</span> <span class="active gf-tabs-link">New</span>
</li> </li>
</ul> </ul>
<button class="tabbed-view-close-btn" ng-click="dismiss();"> <button class="tabbed-view-close-btn" ng-click="dismiss();">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</button> </button>
</div> </div>
<div class="tabbed-view-body"> <div class="tabbed-view-body">
<div ng-if="mode === 'list'"> <div ng-if="mode === 'list'">
<div ng-if="variables.length === 0"> <div ng-if="variables.length === 0">
<em>No template variables defined</em> <em>No template variables defined</em>
</div> </div>
<table class="grafana-options-table"> <table class="grafana-options-table">
<tr ng-repeat="variable in variables"> <tr ng-repeat="variable in variables">
<td style="width: 1%"> <td style="width: 1%">
<span class="template-variable"> <span class="template-variable">
${{variable.name}} ${{variable.name}}
</span> </span>
</td> </td>
<td class="max-width" style="max-width: 200px;"> <td class="max-width" style="max-width: 200px;">
{{variable.query}} {{variable.query}}
</td> </td>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td> <td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td> <td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
<td style="width: 1%"> <td style="width: 1%">
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini"> <a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
Duplicate Duplicate
</a> </a>
</td> </td>
<td style="width: 1%"> <td style="width: 1%">
<a ng-click="edit(variable)" class="btn btn-inverse btn-mini"> <a ng-click="edit(variable)" class="btn btn-inverse btn-mini">
<i class="fa fa-edit"></i> <i class="fa fa-edit"></i>
Edit Edit
</a> </a>
</td> </td>
<td style="width: 1%"> <td style="width: 1%">
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini"> <a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</a> </a>
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
<div class="gf-form" ng-show="mode === 'list'"> <div class="gf-form" ng-show="mode === 'list'">
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a> <a type="button" class="btn gf-form-button btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i>&nbsp;&nbsp;New</a>
</div> </div>
</div> </div>
<form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form"> <form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">
<h5 class="section-heading">Variable</h5> <h5 class="section-heading">Variable</h5>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form" ng-show="ctrl.form.name.$error.pattern">
<div class="gf-form max-width-19"> <span class="gf-form-error">Template names cannot begin with '__' that's reserved for Grafanas global variables</span>
<span class="gf-form-label width-6">Name</span> </div>
<input type="text" class="gf-form-input" placeholder="name" ng-model='current.name' required></input> <div class="gf-form-inline">
</div> <div class="gf-form max-width-19">
<div class="gf-form max-width-19"> <span class="gf-form-label width-6">Name</span>
<span class="gf-form-label width-6"> <input type="text" class="gf-form-input" name="name" placeholder="name" ng-model='current.name' required ng-pattern="namePattern"></input>
</div>
<div class="gf-form max-width-19">
<span class="gf-form-label width-6">
Type Type
<info-popover mode="right-normal"> <info-popover mode="right-normal">
{{variableTypes[current.type].description}} {{variableTypes[current.type].description}}
</info-popover> </info-popover>
</span> </span>
<div class="gf-form-select-wrapper max-width-17"> <div class="gf-form-select-wrapper max-width-17">
<select class="gf-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) 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> </div>
</div> </div>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form max-width-19"> <div class="gf-form max-width-19">
<span class="gf-form-label width-6">Label</span> <span class="gf-form-label width-6">Label</span>
<input type="text" class="gf-form-input" ng-model='current.label' placeholder="optional display name"></input> <input type="text" class="gf-form-input" ng-model='current.label' placeholder="optional display name"></input>
</div> </div>
<div class="gf-form max-width-19"> <div class="gf-form max-width-19">
<span class="gf-form-label width-6">Hide</span> <span class="gf-form-label width-6">Hide</span>
<div class="gf-form-select-wrapper max-width-15"> <div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="current.hide" ng-options="f.value as f.text for f in hideOptions"></select> <select class="gf-form-input" ng-model="current.hide" ng-options="f.value as f.text for f in hideOptions"></select>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div ng-if="current.type === 'interval'" class="gf-form-group"> <div ng-if="current.type === 'interval'" class="gf-form-group">
<h5 class="section-heading">Interval Options</h5> <h5 class="section-heading">Interval Options</h5>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-9">Values</span> <span class="gf-form-label width-9">Values</span>
<input type="text" class="gf-form-input" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()" required></input> <input type="text" class="gf-form-input" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()" required></input>
</div> </div>
<div class="gf-form-inline"> <div class="gf-form-inline">
<gf-form-switch class="gf-form" label="Auto Option" label-class="width-9" checked="current.auto" on-change="runQuery()"> <gf-form-switch class="gf-form" label="Auto Option" label-class="width-9" checked="current.auto" on-change="runQuery()">
</gf-form-switch> </gf-form-switch>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-9" ng-show="current.auto"> <span class="gf-form-label width-9" ng-show="current.auto">
Step count <tip>How many times should the current time range be divided to calculate the value</tip> Step count <tip>How many times should the current time range be divided to calculate the value</tip>
</span> </span>
<div class="gf-form-select-wrapper max-width-10" ng-show="current.auto"> <div class="gf-form-select-wrapper max-width-10" ng-show="current.auto">
<select class="gf-form-input" ng-model="current.auto_count" ng-options="f for f in [2,3,4,5,10,20,30,40,50,100,200,300,400,500]" ng-change="runQuery()"></select> <select class="gf-form-input" ng-model="current.auto_count" ng-options="f for f in [2,3,4,5,10,20,30,40,50,100,200,300,400,500]" ng-change="runQuery()"></select>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label" ng-show="current.auto"> <span class="gf-form-label" ng-show="current.auto">
Min interval <tip>The calculated value will not go below this threshold</tip> Min interval <tip>The calculated value will not go below this threshold</tip>
</span> </span>
<input type="text" class="gf-form-input max-width-10" ng-show="current.auto" ng-model="current.auto_min" ng-change="runQuery()" placeholder="10s"></input> <input type="text" class="gf-form-input max-width-10" ng-show="current.auto" ng-model="current.auto_min" ng-change="runQuery()" placeholder="10s"></input>
</div> </div>
</div> </div>
</div> </div>
<div ng-if="current.type === 'custom'" class="gf-form-group"> <div ng-if="current.type === 'custom'" class="gf-form-group">
<h5 class="section-heading">Custom Options</h5> <h5 class="section-heading">Custom Options</h5>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-14">Values separated by comma</span> <span class="gf-form-label width-14">Values separated by comma</span>
<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue" required></input> <input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue" required></input>
</div> </div>
</div> </div>
<div ng-if="current.type === 'constant'" class="gf-form-group"> <div ng-if="current.type === 'constant'" class="gf-form-group">
<h5 class="section-heading">Constant options</h5> <h5 class="section-heading">Constant options</h5>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label">Value</span> <span class="gf-form-label">Value</span>
<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="your metric prefix"></input> <input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="your metric prefix"></input>
</div> </div>
</div> </div>
<div ng-if="current.type === 'query'" class="gf-form-group"> <div ng-if="current.type === 'query'" class="gf-form-group">
<h5 class="section-heading">Query Options</h5> <h5 class="section-heading">Query Options</h5>
<div class="gf-form-inline"> <div class="gf-form-inline">
...@@ -170,8 +173,8 @@ ...@@ -170,8 +173,8 @@
<select class="gf-form-input" ng-model="current.refresh" ng-options="f.value as f.text for f in refreshOptions"></select> <select class="gf-form-input" ng-model="current.refresh" ng-options="f.value as f.text for f in refreshOptions"></select>
</div> </div>
</div> </div>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-7">Query</span> <span class="gf-form-label width-7">Query</span>
<input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()" required></input> <input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()" required></input>
</div> </div>
...@@ -184,26 +187,26 @@ ...@@ -184,26 +187,26 @@
</span> </span>
<input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input> <input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</div> </div>
<div class="gf-form max-width-21"> <div class="gf-form max-width-21">
<span class="gf-form-label width-7"> <span class="gf-form-label width-7">
Sort Sort
<info-popover mode="right-normal"> <info-popover mode="right-normal">
How to sort the values of this variable. How to sort the values of this variable.
</info-popover> </info-popover>
</span> </span>
<div class="gf-form-select-wrapper max-width-14"> <div class="gf-form-select-wrapper max-width-14">
<select class="gf-form-input" ng-model="current.sort" ng-options="f.value as f.text for f in sortOptions" ng-change="runQuery()"></select> <select class="gf-form-input" ng-model="current.sort" ng-options="f.value as f.text for f in sortOptions" ng-change="runQuery()"></select>
</div> </div>
</div> </div>
</div> </div>
<div ng-show="current.type === 'datasource'" class="gf-form-group"> <div ng-show="current.type === 'datasource'" class="gf-form-group">
<h5 class="section-heading">Data source options</h5> <h5 class="section-heading">Data source options</h5>
<div class="gf-form"> <div class="gf-form">
<label class="gf-form-label width-12">Type</label> <label class="gf-form-label width-12">Type</label>
<div class="gf-form-select-wrapper max-width-18"> <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> <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>
...@@ -222,18 +225,18 @@ ...@@ -222,18 +225,18 @@
</div> </div>
</div> </div>
<div ng-if="current.type === 'adhoc'" class="gf-form-group"> <div ng-if="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"> <div class="gf-form max-width-21">
<span class="gf-form-label width-8">Data source</span> <span class="gf-form-label width-8">Data source</span>
<div class="gf-form-select-wrapper max-width-14"> <div class="gf-form-select-wrapper max-width-14">
<select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required ng-change="validate()"></select> <select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required ng-change="validate()"></select>
</div> </div>
</div> </div>
</div> </div>
<div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti"> <div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
<h5 class="section-heading">Selection Options</h5> <h5 class="section-heading">Selection Options</h5>
<div class="section"> <div class="section">
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Multi-value" label="Multi-value"
...@@ -257,37 +260,37 @@ ...@@ -257,37 +260,37 @@
<div class="gf-form-group" ng-if="current.type === 'query'"> <div class="gf-form-group" ng-if="current.type === 'query'">
<h5>Value groups/tags (Experimental feature)</h5> <h5>Value groups/tags (Experimental feature)</h5>
<gf-form-switch class="gf-form" label="Enabled" label-class="width-10" checked="current.useTags" on-change="runQuery()"> <gf-form-switch class="gf-form" label="Enabled" label-class="width-10" checked="current.useTags" on-change="runQuery()">
</gf-form-switch> </gf-form-switch>
<div class="gf-form last" ng-if="current.useTags"> <div class="gf-form last" ng-if="current.useTags">
<span class="gf-form-label width-10">Tags query</span> <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> <input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
</div> </div>
<div class="gf-form" ng-if="current.useTags"> <div class="gf-form" ng-if="current.useTags">
<li class="gf-form-label width-10">Tag values query</li> <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> <input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
</div> </div>
</div> </div>
<div class="gf-form-group" ng-show="current.options.length"> <div class="gf-form-group" ng-show="current.options.length">
<h5>Preview of values (shows max 20)</h5> <h5>Preview of values (shows max 20)</h5>
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form" ng-repeat="option in current.options | limitTo: 20"> <div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
<span class="gf-form-label">{{option.text}}</span> <span class="gf-form-label">{{option.text}}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="alert alert-info gf-form-group" ng-if="infoText"> <div class="alert alert-info gf-form-group" ng-if="infoText">
{{infoText}} {{infoText}}
</div> </div>
<div class="gf-form-button-row p-y-0"> <div class="gf-form-button-row p-y-0">
<button type="submit" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button> <button type="submit" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
<button type="submit" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button> <button type="submit" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
public/sass/components/_gf-form.scss
...@@ -66,6 +66,25 @@ $gf-form-margin: 0.25rem; ...@@ -66,6 +66,25 @@ $gf-form-margin: 0.25rem;
} }
} }
.gf-form-error {
padding: $input-padding-y $input-padding-x;
margin-right: $gf-form-margin;
flex-shrink: 0;
background-color: $input-label-bg;
display: block;
font-size: $font-size-sm;
margin-right: $gf-form-margin;
border: $input-btn-border-width solid $red;
@include border-radius($label-border-radius-sm);
&--grow {
flex-grow: 1;
min-height: 2.60rem;
}
}
.gf-form-checkbox { .gf-form-checkbox {
flex-shrink: 0; flex-shrink: 0;
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
......
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