grafana/public/app/features/templating/partials/editor.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 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="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']"></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" ng-if="current.type === 'query'">
				<div class="tight-form-section">
					<h5>Value groups/tags (Experimental feature)</h5>
					<div class="tight-form" 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="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>