mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
305 lines
10 KiB
HTML
305 lines
10 KiB
HTML
<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 class="tabs">
|
|
<ul class="nav nav-tabs">
|
|
<li ng-class="{active: mode === 'list'}">
|
|
<a ng-click="mode = 'list';">
|
|
Variables
|
|
</a>
|
|
</li>
|
|
|
|
<li ng-class="{active: mode === 'edit'}" ng-show="mode === 'edit'">
|
|
<a>
|
|
{{current.name}}
|
|
</a>
|
|
</li>
|
|
|
|
<li ng-class="{active: mode === 'new'}">
|
|
<a ng-click="mode = 'new';">
|
|
<i class="fa fa-plus"></i>
|
|
New
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</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="mode === 'list'">
|
|
|
|
<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="mode === 'edit' || mode === 'new'">
|
|
<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="name" 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" ng-model='current.query' placeholder="metric name or tags query" 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', 'lucene']"></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-medium tight-form-input last" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values', 'lucene', 'pipe']"></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" ng-if="current.type === 'query'">
|
|
<div class="tight-form-section">
|
|
<h5>Value groups/tags (Experimental feature)</h5>
|
|
<div class="tight-form last" ng-if="current.useTags">
|
|
<ul class="tight-form-list">
|
|
<li class="tight-form-item" style="width: 135px">
|
|
Tags query
|
|
</li>
|
|
<li>
|
|
<input type="text" style="width: 588px" class="input-xxlarge tight-form-input last" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
|
|
</li>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="tight-form" ng-if="current.useTags">
|
|
<ul class="tight-form-list">
|
|
<li class="tight-form-item" style="width: 135px;">
|
|
Tag values query
|
|
</li>
|
|
<li>
|
|
<input type="text" style="width: 588px" class="input tight-form-input last" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
|
|
</li>
|
|
</ul>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div class="tight-form">
|
|
<ul class="tight-form-list">
|
|
<li class="tight-form-item last">
|
|
<editor-checkbox text="Enable" model="current.useTags" 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="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>
|
|
</div>
|
|
|