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.
6458 Commits
5998 Branches
596 Tags
1.8 GiB
 
 
 
 
 
 
Tag: Branch: Tree: ba1e1532ac
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'ba1e1532ac'
${ noResults }
grafana/public/app/features/templating/partials/editor.html

227 lines
9.3 KiB
Raw Blame History

<div ng-controller="TemplateEditorCtrl" ng-init="init()">
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
Templating
</h2>
<ul class="gf-tabs">
<li class="gf-tabs-item" >
<a class="gf-tabs-link" ng-click="mode = 'list';" ng-class="{active: mode === 'list'}">
Variables
</a>
</li>
<li class="gf-tabs-item" ng-show="mode === 'edit'">
<a class="gf-tabs-link" ng-class="{active: mode === 'edit'}">
Edit
</a>
</li>
<li class="gf-tabs-item" ng-show="mode === 'new'">
<span class="active gf-tabs-link">New</span>
</li>
</ul>
<button class="tabbed-view-close-btn" ng-click="dismiss();dashboard.refresh();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="tabbed-view-body">
<div ng-if="mode === 'list'">
<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%"><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="duplicate(variable)" class="btn btn-inverse btn-mini">
Duplicate
</a>
</td>
<td style="width: 1%">
<a ng-click="edit(variable)" class="btn btn-inverse btn-mini">
<i class="fa fa-edit"></i>
Edit
</a>
</td>
<td style="width: 1%">
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
<div class="gf-form" ng-show="mode === 'list'">
<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>
</div>
</div>
<div ng-if="mode === 'edit' || mode === 'new'">
<h5 class="section-heading">Variable</h5>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-7">Name</span>
<input type="text" class="gf-form-input max-width-14" placeholder="name" ng-model='current.name'></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-4">Type</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input max-width-10" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-7" ng-show="current.type === 'query'">Data source</span>
<div class="gf-form-select-wrapper" ng-show="current.type === 'query'">
<select class="gf-form-input max-width-14" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-7">Label</span>
<input type="text" class="gf-form-input max-width-14" ng-model='current.label' placeholder="optional display name"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-4">Hide</span>
<editor-checkbox text="Label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
<editor-checkbox text="Variable" model="current.hideVariable" change="runQuery()"></editor-checkbox>
</div>
</div>
</div>
<h5 class="section-heading">Value Options</h5>
<div ng-show="current.type === 'interval'" class="gf-form-group">
<div class="gf-form">
<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()"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-9">Auto option</span>
<editor-checkbox text="Enable" model="current.auto" change="runQuery()"></editor-checkbox>
</div>
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-9" ng-show="current.auto">
Auto steps <tip>How many times should the current time range be divided to calculate the value</tip>
</span>
<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>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label" ng-show="current.auto">
Min interval <tip>The calculated value will not go below this threshold</tip>
</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>
</div>
</div>
</div>
<div ng-show="current.type === 'custom'" class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-13">Values seperated by comma</span>
<input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</div>
</div>
<div ng-show="current.type === 'query'" class="gf-form-group">
<div class="gf-form">
<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()"></input>
<!-- <info&#45;popover position="bottom center" wide="true"> -->
<!-- Example queries: -->
<!-- <ul> -->
<!-- <li> -->
<!-- <code>SHOW TAG VALUES WITH KEY = "hostname"</code> -->
<!-- </li> -->
<!-- <li> -->
<!-- <code>SHOW TAG VALUES WITH KEY = "hostname"</code> -->
<!-- </li> -->
<!-- <li> -->
<!-- <code>SHOW TAG VALUES WITH KEY = "hostname"</code> -->
<!-- </li> -->
<!-- <li> -->
<!-- <a href="http://docs.grafana.org" target="_blank">Templating docs</a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </info&#45;popover> -->
</div>
<div class="gf-form">
<span class="gf-form-label width-7">
Regex
<tip>Optional, if you want to extract part of a series name or metric node segment</tip>
</span>
<input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Refresh</span>
<select class="input-large tight-form-input" ng-model="current.refresh" ng-options="f for f in ['Never', 'On Dashboard Load', 'On Time Change and Dashboard Load']"></select>
<tip>When to update the values of this template, will slow down dashboard load / time change</tip>
</div>
</div>
<div class="gf-form-group" >
<h5 class="section-heading">Selection Options</h5>
<div class="gf-form">
<span class="gf-form-label width-10">Multi-value</span>
<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
<tip>Enables multiple values to be selected at the same time</tip>
</div>
<div class="gf-form">
<span class="gf-form-label width-10">Include All option</span>
<editor-checkbox class="width-13" text="Enable" model="current.includeAll" change="runQuery()"></editor-checkbox>
</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">
<h5>Preview of values (shows max 20)</h5>
<div class="gf-form">
<span class="gf-form-label" ng-repeat="option in current.options | limitTo: 20">
{{option.text}}
</span>
</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>
<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
</div>
</div>
</div>