grafana/src/app/partials/templating_editor.html

<div ng-controller="TemplateEditorCtrl" ng-init="init()"> <div class="dashboard-editor-header">
		<div class="dashboard-editor-title">
			<i class="icon icon-code"></i>
			Templating
		</div>

		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
			<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
			</div>
		</div>

	</div>

	<div class="dashboard-editor-body">

		<div ng-if="editor.index == 0">

			<div class="editor-row row">
				<div class="span8">
					<div ng-if="variables.length === 0">
						<em>No replacements defined</em>
					</div>
					<table class="grafana-options-table">
						<tr ng-repeat="variable in variables">
							<td style="width: 1%">
								[[{{variable.name}}]]
							</td>
							<td class="max-width" style="max-width: 200px;">
								{{variable.query}}
							</td>
							<td style="width: 1%">
								<a ng-click="edit(variable)" class="btn btn-success btn-mini">
									<i class="icon-edit"></i>
									Edit
								</a>
							</td>
							<td style="width: 1%">
								<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
									<i class="icon-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="editor-option">
					<label class="small">Variable name</label>
					<input type="text" class="input-medium" ng-model='current.name' placeholder="name"></input>
				</div>
				<div class="editor-option">
					<label class="small">Type</label>
					<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'time period']" ng-change="typeChanged()"></select>
				</div>
				<div class="editor-option" ng-show="current.type === 'query'">
					<label class="small">Datasource</label>
					<select ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
				</div>
				<div class="editor-option text-center" ng-show="current.type === 'query'">
					<label class="small">Refresh on load <tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time.</tip></label>
					<input type="checkbox" ng-model="current.refresh" ng-checked="refresh">
				</div>
			</div>

			<div ng-show="current.type === 'time period'">
				<div class="editor-option">
					<label class="small">Values</label>
					<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="name"></input>
				</div>
				<div class="editor-option">
					<label class="small">Auto period count <tip>The number you want to divide the time range in</tip></label>
					<select class="input-small" ng-model="current.auto_count" ng-options="f for f in [5,6,7,8,9,10,15,20,30,40,50,70,90,100]"></select>
				</div>
				<p class="small">
					<br>
					<i class="icon-info-sign"></i>
					This special type of template replacement is useful as the auto word will be calculated depending on the time range divided by
					the number of periods you wish.
				</p>
			</div>

			<div ng-show="current.type === 'query'">
				<div class="editor-row">
					<div class="editor-option form-inline">
						<label class="small">Variable values query</label>
						<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
						<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="icon-play"></i></button>
					</div>
				</div>

				<div class="editor-row" style="margin-top: 10px;">
					<div class="editor-option form-inline">
						<label class="small">Regex (optional, if you want to extract part of a series name or metric node segment)</label>
						<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
						<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="icon-play"></i></button>
					</div>
				</div>

				<div class="editor-row" style="margin-top: 10px;">
					<div class="editor-option form-inline">
						<label class="small">Variable values</label>
						<ul>
							<li ng-repeat="option in current.options">
								{{option.text}}
							</li>
						</ul>
					</div>
				</div>
			</div>

		</div>

	</div>

	<div class="dashboard-editor-footer">
		<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 2" ng-click="update();">Update</button>
		<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 1" ng-click="add();">Add</button>
		<button type="button" class="btn btn-success pull-right" ng-click="dismiss();">Close</button>
	</div>
</div>

<!-- <div class="span4"> -->
	<!-- 	<tip class="info&#45;box"> -->
	<!-- 	<i class="icon&#45;question&#45;sign"></i> -->
	<!-- 	The templating feature in Grafana lets easily create and manage templated queries. Templated queries use [[replacement]] syntax -->
	<!-- 	to replace a part of your metric key or query. By using this feature you can make your dashboards more generic. You can for example create -->
	<!-- 	a query replacement for your cluster name or server name. Then use that replacement in your metric queries and change -->
	<!-- 	it globably for all graphs on the dashboard. -->
	<!-- 	<br/><br/> -->
	<!-- 	</tip> -->
	<!-- </div> -->