energylink/public/app/plugins/datasource/cloudwatch/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="CloudWatchQueryCtrl"
       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>
              <li role="menuitem">
                <a tabindex="1"
                   ng-click="moveMetricQuery($index, $index-1)">
                  Move up
                </a>
              </li>
              <li role="menuitem">
                <a tabindex="1"
                   ng-click="moveMetricQuery($index, $index+1)">
                  Move down
                </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: 100px">
          Namespace
        </li>
        <li>
          <input type="text"
                 class="input-medium tight-form-input"
                 ng-model="target.namespace"
                 spellcheck='false'
                 bs-typeahead="suggestNamespace"
                 placeholder="namespace"
                 data-min-length=0 data-items=100
                 ng-change="refreshMetricData()"
                 >
        </li>
        <li class="tight-form-item">
          Metric
        </li>
        <li>
          <input type="text"
                 class="input-medium tight-form-input"
                 ng-model="target.metricName"
                 spellcheck='false'
                 bs-typeahead="suggestMetrics"
                 placeholder="metric name"
                 data-min-length=0 data-items=100
                 ng-change="refreshMetricData()"
                 >
        </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: 100px">
          Dimensions
        </li>
        <li ng-repeat="(key, value) in target.dimensions track by $index" class="tight-form-item">
          {{key}}&nbsp;=&nbsp;{{value}}
          <a ng-click="removeDimension(key)">
            <i class="fa fa-remove"></i>
          </a>
        </li>

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

        <li ng-show="addDimensionMode">
          <input type="text"
                 class="input-small tight-form-input"
                 spellcheck='false'
                 bs-typeahead="suggestDimensionKeys"
                 data-min-length=0 data-items=100
                 ng-model="target.currentDimensionKey"
                 placeholder="key">
          <input type="text"
                 class="input-small tight-form-input"
                 spellcheck='false'
                 bs-typeahead="suggestDimensionValues"
                 data-min-length=0 data-items=100
                 ng-model="target.currentDimensionValue"
                 placeholder="value">
          <a ng-click="addDimension()">
            add dimension
          </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: 100px">
          Statistics
        </li>
        <li class="tight-form-item">
          Min&nbsp;
          <input class="cr1" id="target.statistics.Minimum" type="checkbox"
                     ng-model="target.statistics.Minimum" ng-checked="target.statistics.Minimum" ng-change="statisticsOptionChanged()">
          <label for="target.statistics.Minimum" class="cr1"></label>
        </li>
        <li class="tight-form-item">
          Max&nbsp;
          <input class="cr1" id="target.statistics.Maximum" type="checkbox"
                     ng-model="target.statistics.Maximum" ng-checked="target.statistics.Maximum" ng-change="statisticsOptionChanged()">
          <label for="target.statistics.Maximum" class="cr1"></label>
        </li>
        <li class="tight-form-item">
          Avg&nbsp;
          <input class="cr1" id="target.statistics.Average" type="checkbox"
                     ng-model="target.statistics.Average" ng-checked="target.statistics.Average" ng-change="statisticsOptionChanged()">
          <label for="target.statistics.Average" class="cr1"></label>
        </li>
        <li class="tight-form-item">
          Sum&nbsp;
          <input class="cr1" id="target.statistics.Sum" type="checkbox"
                   ng-model="target.statistics.Sum" ng-checked="target.statistics.Sum" ng-change="statisticsOptionChanged()">
          <label for="target.statistics.Sum" class="cr1"></label>
        </li>
        <li class="tight-form-item last">
          SampleCount&nbsp;
          <input class="cr1" id="target.statistics.SampleCount" type="checkbox"
                       ng-model="target.statistics.SampleCount" ng-checked="target.statistics.SampleCount" ng-change="statisticsOptionChanged()">
          <label for="target.statistics.SampleCount" 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: 100px">
          Period
        </li>
        <li>
          <input type="text"
                 class="input-mini tight-form-input"
                 ng-model="target.period"
                 data-placement="right"
                 spellcheck='false'
                 placeholder="period"
                 data-min-length=0 data-items=100
                 ng-change="refreshMetricData()"
                 />
          <a bs-tooltip="target.errors.period"
             style="color: rgb(229, 189, 28)"
             ng-show="target.errors.period">
            <i class="fa fa-warning"></i>
          </a>
        </li>
        <li class="tight-form-item">
          Region
        </li>
        <li>
          <input type="text"
                 class="input-medium tight-form-input"
                 ng-model="target.region"
                 spellcheck='false'
                 bs-typeahead="suggestRegion"
                 placeholder="region"
                 data-min-length=0 data-items=100
                 ng-change="refreshMetricData()"
                 >
        </li>
      </ul>

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

  </div>
</div>