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

<div ng-controller="VariableEditorCtrl" ng-init="init()">
  <div class="page-action-bar">
    <h3 class="dashboard-settings__header">
      <a ng-click="setMode('list')" aria-label="Variable editor Header link">Variables</a>
      <span ng-show="mode === 'new'"
        ><i class="fa fa-fw fa-chevron-right" aria-label="Variable editor Header mode New"></i> New</span
      >
      <span ng-show="mode === 'edit'"
        ><i class="fa fa-fw fa-chevron-right" aria-label="Variable editor Header mode Edit"></i> Edit</span
      >
    </h3>

    <div class="page-action-bar__spacer"></div>
    <a
      type="button"
      class="btn btn-primary"
      ng-click="setMode('new');"
      ng-if="variables.length > 0"
      ng-hide="mode === 'edit' || mode === 'new'"
      aria-label="Variable editor New variable button"
    >
      New
    </a>
  </div>

  <div ng-if="mode === 'list'">
    <div ng-if="variables.length === 0">
      <empty-list-cta
        on-click="setNewMode"
        title="emptyListCta.title"
        infoBox="emptyListCta.infoBox"
        infoBoxTitle="emptyListCta.infoBoxTitle"
        buttonTitle="emptyListCta.buttonTitle"
        buttonIcon="emptyListCta.buttonIcon"
      />
    </div>

    <div ng-if="variables.length">
      <table class="filter-table filter-table--hover" aria-label="Variable editor Table">
        <thead>
          <tr>
            <th>Variable</th>
            <th>Definition</th>
            <th colspan="5"></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="variable in variables">
            <td style="width: 1%">
              <span
                ng-click="edit(variable)"
                class="pointer template-variable"
                aria-label="Variable editor Table Name field"
              >
                ${{ variable.name }}
              </span>
            </td>
            <td
              style="max-width: 200px;"
              ng-click="edit(variable)"
              class="pointer max-width"
              aria-label="Variable editor Table Definition field"
            >
              {{ variable.definition ? variable.definition : variable.query }}
            </td>
            <td style="width: 1%">
              <i
                ng-click="_.move(variables,$index,$index-1)"
                ng-hide="$first"
                class="pointer fa fa-arrow-up"
                aria-label="Variable editor Table ArrowUp button"
              ></i>
            </td>
            <td style="width: 1%">
              <i
                ng-click="_.move(variables,$index,$index+1)"
                ng-hide="$last"
                class="pointer fa fa-arrow-down"
                aria-label="Variable editor Table ArrowDown button"
              ></i>
            </td>
            <td style="width: 1%">
              <a
                ng-click="duplicate(variable)"
                class="btn btn-inverse btn-small"
                aria-label="Variable editor Table Duplicate button"
              >
                Duplicate
              </a>
            </td>
            <td style="width: 1%">
              <a
                ng-click="removeVariable(variable)"
                class="btn btn-danger btn-small"
                aria-label="Variable editor Table Remove button"
              >
                <i class="fa fa-remove"></i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form" aria-label="Variable editor Form">
    <h5 class="section-heading">General</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"
            aria-label="Variable editor Form Name field"
          />
        </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()"
              aria-label="Variable editor Form Type select"
            ></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 Grafana's 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"
            aria-label="Variable editor Form Label field"
          />
        </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"
              aria-label="Variable editor Form Hide select"
            ></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"
          ng-model="current.query"
          placeholder="1m,10m,1h,6h,1d,7d"
          ng-model-onblur
          ng-change="runQuery()"
          required
          aria-label="Variable editor Form Interval Query field"
        />
      </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()"
          aria-label="Variable editor Form Interval AutoOption switch"
        >
        </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()"
              aria-label="Variable editor Form Interval AutoCount select"
            ></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"
            aria-label="Variable editor Form Interval AutoMin field"
          />
        </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, escaped\,value"
          required
          aria-label="Variable editor Form Custom Query field"
        />
      </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"
          aria-label="Variable editor Form Constant Query field"
        />
      </div>
    </div>

    <div ng-if="current.type === 'textbox'" class="gf-form-group">
      <h5 class="section-heading">Text options</h5>
      <div class="gf-form">
        <span class="gf-form-label">Default value</span>
        <input
          type="text"
          class="gf-form-input"
          ng-model="current.query"
          ng-blur="runQuery()"
          placeholder="default value, if any"
          aria-label="Variable editor Form TextBox Query field"
        />
      </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-10">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"
              ng-change="datasourceChanged()"
              required
              aria-label="Variable editor Form Query DataSource select"
            >
              <option value="" ng-if="false"></option>
            </select>
          </div>
        </div>

        <div class="gf-form max-width-22">
          <span class="gf-form-label width-10">
            Refresh
            <info-popover mode="right-normal">
              When to update the values of this variable.
            </info-popover>
          </span>
          <div class="gf-form-select-wrapper width-15">
            <select
              class="gf-form-input"
              ng-model="current.refresh"
              ng-options="f.value as f.text for f in refreshOptions"
              aria-label="Variable editor Form Query Refresh select"
            ></select>
          </div>
        </div>
      </div>

      <rebuild-on-change property="currentDatasource">
        <variable-query-editor-loader> </variable-query-editor-loader>
      </rebuild-on-change>

      <div class="gf-form">
        <span class="gf-form-label width-10">
          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()"
          aria-label="Variable editor Form Query RegEx field"
        />
      </div>
      <div class="gf-form max-width-21">
        <span class="gf-form-label width-10">
          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()"
            aria-label="Variable editor Form Query Sort select"
          ></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()"
            aria-label="Variable editor Form DataSource Query field"
          ></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()"
          aria-label="Variable editor Form DataSource RegEx field"
        />
      </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()"
            aria-label="Variable editor Form AdHoc DataSource select"
          >
            <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()"
          aria-label="Variable editor Form Multi switch"
        >
        </gf-form-switch>
        <gf-form-switch
          class="gf-form"
          label="Include All option"
          label-class="width-10"
          checked="current.includeAll"
          on-change="runQuery()"
          aria-label="Variable editor Form IncludeAll switch"
        >
        </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"
          aria-label="Variable editor Form IncludeAll field"
        />
      </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()"
        aria-label="Variable editor Form Query UseTags switch"
      >
      </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
          aria-label="Variable editor Form Query TagsQuery field"
        />
      </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
          aria-label="Variable editor Form Query TagsValuesQuery field"
        />
      </div>
    </div>

    <div class="gf-form-group" ng-show="current.options.length">
      <h5>Preview of values</h5>
      <div class="gf-form-inline">
        <div class="gf-form" ng-repeat="option in current.options | limitTo: optionsLimit">
          <span class="gf-form-label" aria-label="Variable editor Preview of Values option">{{ option.text }}</span>
        </div>
        <div class="gf-form" ng-if="current.options.length > optionsLimit">
          <a
            class="gf-form-label btn-secondary"
            ng-click="showMoreOptions()"
            aria-label="Variable editor Preview of Values Show More link"
          >
            Show more
          </a>
        </div>
      </div>
    </div>

    <div class="alert alert-info gf-form-group" ng-if="infoText" aria-label="Variable editor Form Alert">
      {{ infoText }}
    </div>

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