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

<div ng-controller="VariableEditorCtrl" 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>
			<li class="gf-tabs-item" >
        <a class="gf-tabs-link" ng-click="mode = 'help';" ng-class="{active: mode === 'help'}">
          Help
        </a>
      </li>
    </ul>

    <button class="tabbed-view-close-btn" ng-click="dismiss();">
      <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>
        <br /> <br />
			</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 ng-show="mode === 'help'">
			<div class="grafana-info-box col-lg-8">
				<h5>What does templating do?</h5>
				<p>Templating allows for more interactive and dynamic dashboards. Instead of hard-coding things like server, application
				and sensor name in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
				the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
				<br>
				<br>

				Checkout the <a class="external-link" target="_blank" href="http://docs.grafana.org/reference/templating/">Templating documentation</a> for more information.
				</p>
			</div>
		</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>

    <form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">
      <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-6">Name</span>
            <input type="text" class="gf-form-input" name="name" placeholder="name" ng-model='current.name' required ng-pattern="namePattern"></input>
          </div>
          <div class="gf-form max-width-19">
            <span class="gf-form-label width-6">
              Type
              <info-popover mode="right-normal">
                {{variableTypes[current.type].description}}
              </info-popover>
            </span>
            <div class="gf-form-select-wrapper max-width-17">
              <select class="gf-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in variableTypes" ng-change="typeChanged()"></select>
            </div>
          </div>
        </div>

				<div class="gf-form" ng-show="ctrl.form.name.$error.pattern">
          <span class="gf-form-label gf-form-label--error">Template names cannot begin with '__' that's reserved for Grafanas global variables</span>
        </div>

        <div class="gf-form-inline">
          <div class="gf-form max-width-19">
            <span class="gf-form-label width-6">Label</span>
            <input type="text" class="gf-form-input" ng-model='current.label' placeholder="optional display name"></input>
          </div>
          <div class="gf-form max-width-19">
            <span class="gf-form-label width-6">Hide</span>
            <div class="gf-form-select-wrapper max-width-15">
              <select class="gf-form-input" ng-model="current.hide" ng-options="f.value as f.text for f in hideOptions"></select>
            </div>
          </div>
        </div>
      </div>

      <div ng-if="current.type === 'interval'" class="gf-form-group">
        <h5 class="section-heading">Interval Options</h5>

        <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()" required></input>
        </div>

        <div class="gf-form-inline">
          <gf-form-switch class="gf-form" label="Auto Option" label-class="width-9" checked="current.auto" on-change="runQuery()">
          </gf-form-switch>

          <div class="gf-form">
            <span class="gf-form-label width-9" ng-show="current.auto">
              Step count <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 [1,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-if="current.type === 'custom'" class="gf-form-group">
        <h5 class="section-heading">Custom Options</h5>
        <div class="gf-form">
          <span class="gf-form-label width-14">Values separated by comma</span>
          <input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue" required></input>
        </div>
      </div>

      <div ng-if="current.type === 'constant'" class="gf-form-group">
        <h5 class="section-heading">Constant options</h5>
        <div class="gf-form">
          <span class="gf-form-label">Value</span>
          <input type="text" class="gf-form-input" ng-model='current.query' ng-blur="runQuery()" placeholder="your metric prefix"></input>
        </div>
      </div>

      <div ng-if="current.type === 'query'" class="gf-form-group">
        <h5 class="section-heading">Query Options</h5>

        <div class="gf-form-inline">
          <div class="gf-form max-width-21">
            <span class="gf-form-label width-7">Data source</span>
            <div class="gf-form-select-wrapper max-width-14">
              <select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required>
                <option value="" ng-if="false"></option>
              </select>
            </div>
          </div>
          <div class="gf-form max-width-21">
            <span class="gf-form-label width-7">
              Refresh
              <info-popover mode="right-normal">
                When to update the values of this variable.
              </info-popover>
            </span>
            <div class="gf-form-select-wrapper max-width-14">
              <select class="gf-form-input" ng-model="current.refresh" ng-options="f.value as f.text for f in refreshOptions"></select>
            </div>
          </div>
        </div>
        <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()" required></input>
        </div>
        <div class="gf-form">
          <span class="gf-form-label width-7">
            Regex
            <info-popover mode="right-normal">
              Optional, if you want to extract part of a series name or metric node segment.
            </info-popover>
          </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 max-width-21">
          <span class="gf-form-label width-7">
            Sort
            <info-popover mode="right-normal">
              How to sort the values of this variable.
            </info-popover>
          </span>
          <div class="gf-form-select-wrapper max-width-14">
            <select class="gf-form-input" ng-model="current.sort" ng-options="f.value as f.text for f in sortOptions" ng-change="runQuery()"></select>
          </div>
        </div>
      </div>

      <div ng-show="current.type === 'datasource'" class="gf-form-group">
        <h5 class="section-heading">Data source options</h5>

        <div class="gf-form">
          <label class="gf-form-label width-12">Type</label>
          <div class="gf-form-select-wrapper max-width-18">
            <select class="gf-form-input" ng-model="current.query" ng-options="f.value as f.text for f in datasourceTypes" ng-change="runQuery()"></select>
          </div>
        </div>

        <div class="gf-form">
          <label class="gf-form-label width-12">
            Instance name filter
            <info-popover mode="right-normal">
              Regex filter for which data source instances to choose from in
              the variable value dropdown. Leave empty for all.
              <br><br>
              Example: <code>/^prod/</code>

            </info-popover>
          </label>
          <input type="text" class="gf-form-input max-width-18" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
        </div>
      </div>

      <div ng-if="current.type === 'adhoc'" class="gf-form-group">
        <h5 class="section-heading">Options</h5>
        <div class="gf-form max-width-21">
          <span class="gf-form-label width-8">Data source</span>
          <div class="gf-form-select-wrapper max-width-14">
            <select class="gf-form-input" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources" required ng-change="validate()">
              <option value="" ng-if="false"></option>
            </select>
          </div>
        </div>
      </div>

      <div class="section gf-form-group" ng-show="variableTypes[current.type].supportsMulti">
        <h5 class="section-heading">Selection Options</h5>
        <div class="section">
          <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>
        <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>
        <gf-form-switch class="gf-form" label="Enabled" label-class="width-10" checked="current.useTags" on-change="runQuery()">
        </gf-form-switch>
        <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" ng-show="current.options.length">
        <h5>Preview of values (shows max 20)</h5>
        <div class="gf-form-inline">
          <div class="gf-form" ng-repeat="option in current.options | limitTo: 20">
            <span class="gf-form-label">{{option.text}}</span>
          </div>
        </div>
      </div>

      <div class="alert alert-info gf-form-group" ng-if="infoText">
        {{infoText}}
      </div>

      <div class="gf-form-button-row p-y-0">
        <button type="submit" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
        <button type="submit" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
      </div>

    </form>
  </div>
</div>