energylink/src/app/features/opentsdb/partials/query.editor.html

<div class="editor-row" style="margin-top: 10px;">

  <div  ng-repeat="target in panel.targets"
        style="margin-bottom: 10px;"
        ng-class="{'tight-form-disabled': target.hide}"
        ng-controller="OpenTSDBQueryCtrl"
        ng-init="init()">

    <div class="tight-form">
			<ul class="tight-form-list pull-right">
				<li class="tight-form-item">
					<div class="dropdown">
						<a  class="pointer dropdown-toggle"
							data-toggle="dropdown"
							tabindex="1">
							<i class="fa fa-bars"></i>
						</a>
						<ul class="dropdown-menu pull-right" role="menu">
							<li role="menuitem">
								<a  tabindex="1"
									ng-click="duplicate()">
									Duplicate
								</a>
							</li>
						</ul>
					</div>
				</li>
				<li class="tight-form-item last">
					<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
            <i class="fa fa-remove"></i>
          </a>
        </li>
      </ul>

      <ul class="tight-form-list">
        <li>
          <a  class="tight-form-item"
              ng-click="target.hide = !target.hide; get_data();"
              role="menuitem">
            <i class="fa fa-eye"></i>
          </a>
        </li>
      </ul>

      <ul class="tight-form-list" role="menu">
				<li class="tight-form-item" style="width: 86px">
					Metric
				</li>
        <li>
          <input type="text"
                 class="input-large tight-form-input"
                 ng-model="target.metric"
                 spellcheck='false'
                 bs-typeahead="suggestMetrics"
                 placeholder="metric name"
                 data-min-length=0 data-items=100
								 ng-model-onblur
                 ng-blur="targetBlur()"
                 >
          <a bs-tooltip="target.errors.metric"
             style="color: rgb(229, 189, 28)"
             ng-show="target.errors.metric">
            <i class="fa fa-warning"></i>
          </a>
        </li>
				<li class="tight-form-item">
          Aggregator
        </li>
        <li>
          <select ng-model="target.aggregator"
                  class="tight-form-input input-small"
                  ng-options="agg for agg in aggregators"
                  ng-change="targetBlur()">
          </select>
          <a bs-tooltip="target.errors.aggregator"
             style="color: rgb(229, 189, 28)"
             ng-show="target.errors.aggregator">
            <i class="fa fa-warning"></i>
          </a>
        </li>

				<li class="tight-form-item">
          Alias:
        </li>
				<li>
					<input type="text"
                 class="tight-form-input input-medium"
                 ng-model="target.alias"
                 spellcheck='false'
                 placeholder="series alias"
                 data-min-length=0 data-items=100
                 ng-blur="targetBlur()"
                 />
        </li>

      </ul>

      <div class="clearfix"></div>
    </div>

    <div class="tight-form">
			<ul class="tight-form-list" role="menu">
				<li class="tight-form-item">
					<i class="fa fa-eye invisible"></i>
				</li>

				<li class="tight-form-item" style="width: 86px">
					Down sample
				</li>

				<li>
          <input type="text"
                 class="input-large tight-form-input"
                 ng-model="target.downsampleInterval"
								 ng-model-onblur
                 ng-change="targetBlur()"
                 placeholder="interval (empty = auto)"
                 >
        </li>

        <li class="tight-form-item">
          Aggregator
        </li>

        <li>
          <select ng-model="target.downsampleAggregator"
                  class="tight-form-input input-small"
                  ng-options="agg for agg in aggregators"
                  ng-change="targetBlur()">
          </select>
        </li>

				<li class="tight-form-item">
					Disable downsampling&nbsp;
					<input class="cr1" id="target.disableDownsampling" type="checkbox"
					ng-model="target.disableDownsampling" ng-checked="target.disableDownsampling" ng-change="targetBlur()">
					<label for="target.disableDownsampling" class="cr1"></label>
				</li>

			</ul>
      <div class="clearfix"></div>
    </div>

		<div class="tight-form">
			<ul class="tight-form-list" role="menu">
				<li class="tight-form-item">
					<i class="fa fa-eye invisible"></i>
				</li>

				<li class="tight-form-item" style="width: 86px">
           Tags
        </li>
        <li ng-repeat="(key, value) in target.tags track by $index" class="tight-form-item">
          {{key}}&nbsp;=&nbsp;{{value}}
          <a ng-click="removeTag(key)">
            <i class="fa fa-remove"></i>
          </a>
        </li>

        <li class="tight-form-item" ng-hide="addTagMode">
          <a ng-click="addTag()">
            <i class="fa fa-plus"></i>
          </a>
        </li>

        <li ng-show="addTagMode">
            <input type="text"
                   class="input-small tight-form-input"
                   spellcheck='false'
                   bs-typeahead="suggestTagKeys"
                   data-min-length=0 data-items=100
                   ng-model="target.currentTagKey"
                   placeholder="key">
            <input type="text"
                   class="input-small tight-form-input"
                   spellcheck='false'
                   bs-typeahead="suggestTagValues"
                   data-min-length=0 data-items=100
                   ng-model="target.currentTagValue"
                   placeholder="value">
            <a ng-click="addTag()">
							add tag
            </a>
            <a bs-tooltip="target.errors.tags"
               style="color: rgb(229, 189, 28)"
               ng-show="target.errors.tags">
              <i class="fa fa-warning"></i>
            </a>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>

		<div class="tight-form">
			<ul class="tight-form-list" role="menu">
				<li class="tight-form-item">
					<i class="fa fa-eye invisible"></i>
				</li>

				<li class="tight-form-item" style="width: 86px">
					Rate&nbsp;
					<input class="cr1" id="target.shouldComputeRate" type="checkbox"
					ng-model="target.shouldComputeRate" ng-checked="target.shouldComputeRate" ng-change="targetBlur()">
					<label for="target.shouldComputeRate" class="cr1"></label>
				</li>

        <li class="tight-form-item" ng-hide="!target.shouldComputeRate">
					Counter&nbsp;
					<input class="cr1" id="target.isCounter" type="checkbox"
					ng-model="target.isCounter" ng-checked="target.isCounter" ng-change="targetBlur()">
					<label for="target.isCounter" class="cr1"></label>
				</li>

				<li class="tight-form-item" ng-hide="!target.isCounter">
          Counter Max:
        </li>

        <li ng-hide="!target.isCounter">
          <input type="text"
                 class="tight-form-input input-small"
                 ng-disabled="!target.shouldComputeRate"
                 ng-model="target.counterMax"
                 spellcheck='false'
                 placeholder="max value"
								 ng-model-onblur
                 ng-blur="targetBlur()"
                 />
        </li>
        <li class="tight-form-item" ng-hide="!target.isCounter">
          Reset Value:
        </li>
        <li ng-hide="!target.isCounter">
          <input type="text"
                 class="tight-form-input input-small"
                 ng-disabled="!target.shouldComputeRate"
                 ng-model="target.counterResetValue"
                 spellcheck='false'
                 placeholder="reset value"
								 ng-model-onblur
                 ng-blur="targetBlur()"
                 />
        </li>
			</ul>

      <div class="clearfix"></div>
    </div>

  </div>
</div>