grafana/public/app/features/templating/partials/editor.html

<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 max-width-19">
						<span class="gf-form-label width-7">Name</span>
						<input type="text" class="gf-form-input max-width-12" 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">
							<select class="gf-form-input width-7" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
						</div>
					</div>
					<div class="gf-form max-width-19">
						<span class="gf-form-label width-7" ng-show="current.type === 'query'">Data source</span>
						<div class="gf-form-select-wrapper max-width-12" ng-show="current.type === 'query'">
							<select class="gf-form-input" 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 max-width-19">
						<span class="gf-form-label width-7">Label</span>
						<input type="text" class="gf-form-input max-width-12" ng-model='current.label' placeholder="optional display name"></input>
					</div>
					<div class="gf-form">
						<span class="gf-form-label width-4">Hide</span>
            <div class="gf-form-select-wrapper">
							<select class="gf-form-input width-7" ng-model="current.hide" ng-options="f.value as f.text for f in hideOptions"></select>
						</div>
					</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="gf-form-input max-width-14" ng-model="current.refresh" ng-options="f.value as f.text for f in refreshOptions"></select>
					<tip>When to update the values of this variable, will slow down dashboard load / time change</tip>
				</div>
			</div>

			<div class="section gf-form-group" >
				<h5 class="section-heading">Selection Options</h5>
        <gf-form-switch class="gf-form"
                        label="Multi-value"
                        label-class="width-10"
                        tooltip="Enables multiple values to be selected at the same time"
                        checked="current.multi"
                        on-change="runQuery()">
        </gf-form-switch>
        <gf-form-switch class="gf-form"
                        label="Include All option"
                        label-class="width-10"
                        checked="current.includeAll"
                        on-change="runQuery()">
        </gf-form-switch>

				<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>