apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
The open and composable observability and data visualization platform. Visualize metrics, logs, and traces from multiple sources like Prometheus, Loki, Elasticsearch, InfluxDB, Postgres and many more.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3628 Commits
6009 Branches
596 Tags
1.8 GiB
 
 
 
 
 
 
Tag: Branch: Tree: f41c314329
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'f41c314329'
${ noResults }
grafana/public/app/features/templating/partials/editor.html

251 lines
8.9 KiB
Raw Blame History

<div ng-controller="TemplateEditorCtrl" ng-init="init()">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-code"></i>
Templating
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}">
</div>
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="gf-box-body">
<div ng-if="editor.index == 0">
<div class="editor-row row">
<div class="span8">
<div ng-if="variables.length === 0">
<em>No template variables defined</em>
</div>
<table class="grafana-options-table">
<tr ng-repeat="variable in variables">
<td style="width: 1%">
<span class="template-variable">
${{variable.name}}
</span>
</td>
<td class="max-width" style="max-width: 200px;">
{{variable.query}}
</td>
<td style="width: 1%">
<a ng-click="edit(variable)" class="btn btn-inverse btn-small">
<i class="fa fa-edit"></i>
Edit
</a>
</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%">
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="editor-row">
<div class="tight-form-section">
<h5>Variable</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Name
</li>
<li>
<input type="text" class="input-large tight-form-input" placeholder="apps.servers.*" ng-model='current.name'></input>
</li>
<li class="tight-form-item">
Type
</li>
<li>
<select class="input-small tight-form-input" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
</li>
<li class="tight-form-item" ng-show="current.type === 'query'">
Data source
</li>
<li ng-show="current.type === 'query'">
<select class="input input-medium tight-form-input last" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row">
<div class="tight-form-section">
<h5>Value Options</h5>
<div ng-show="current.type === 'interval'">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 160px">
Values
</li>
<li>
<input type="text" style="width: 345px" class="input-xxlarge tight-form-input last" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 160px">
<editor-checkbox text="Include auto interval" model="current.auto" change="runQuery()"></editor-checkbox>
</li>
<li class="tight-form-item" ng-show="current.auto">
Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip>
</li>
<li>
<select class="input-mini tight-form-input last" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div ng-show="current.type === 'custom'">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 180px">
Values seperated by comma
</li>
<li>
<input type="text" class="input tight-form-input last" style="width: 325px;" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div ng-show="current.type === 'query'">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Query
</li>
<li>
<input type="text" style="width: 588px" class="input-xxlarge tight-form-input last" placeholder="name" ng-model='current.query' placeholder="apps.servers.*" ng-model-onblur ng-change="runQuery()"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
Regex
<tip>Optional, if you want to extract part of a series name or metric node segment</tip>
</li>
<li>
<input type="text" style="width: 588px" class="input tight-form-input last" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px;">
<editor-checkbox text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
</li>
<li ng-show="current.includeAll">
<input type="text" class="input-xlarge tight-form-input" style="width:364px" ng-model='current.options[0].value'></input>
</li>
<li class="tight-form-item" ng-show="current.includeAll">
All format
</li>
<li ng-show="current.includeAll">
<select class="input-medium tight-form-input last" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item last">
<editor-checkbox text="Refresh on load" model="current.refresh"></editor-checkbox>
<tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time</tip>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="editor-row">
<div class="tight-form-section" ng-hide="current.type === 'interval'">
<h5>Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item last" style="width: 100px;">
<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
</li>
<li class="tight-form-item" ng-show="current.multi">
Multi format
</li>
<li ng-show="current.multi">
<select class="input-small tight-form-input last" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values']"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="tight-form-section">
<h5>Display options</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
Variable Label
</li>
<li>
<input type="text" class="input-medium tight-form-input" ng-model='current.label' placeholder=""></input>
</li>
<li class="tight-form-item last">
<editor-checkbox text="Hide label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row">
<div class="tight-form-section">
<h5>Preview of values (shows max 20)</h5>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" ng-repeat="option in current.options | limitTo: 20">
{{option.text}}
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div class="editor-row" style="margin-top: 20px">
<button type="button" class="btn btn-success" ng-show="editor.index === 2" ng-click="update();">Update</button>
<button type="button" class="btn btn-success" ng-show="editor.index === 1" ng-click="add();">Add</button>
</div>
</div>
</div>