energylink/public/app/plugins/datasource/influxdb/partials/query.editor.html

<query-editor-row ctrl="ctrl">

  <div class="gf-form" ng-if="ctrl.collapsed">
    <label class="gf-form-label gf-form-filler pointer" ng-click="ctrl.collapsed = !ctrl.collapsed">
      {{ctrl.target.query}}
    </label>
  </div>

  <div ng-if="!ctrl.collapsed">

    <div class="gf-form" ng-if="ctrl.target.rawQuery">
      <input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>
    </div>

    <div ng-if="!ctrl.target.rawQuery">

      <div class="gf-form-inline">
        <div class="gf-form">
          <label class="gf-form-label query-keyword width-7">FROM</label>

          <metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
          <metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
        </div>

        <div class="gf-form">
          <label class="gf-form-label query-keyword">WHERE</label>

          <div ng-repeat="segment in ctrl.tagSegments">
            <metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
          </div>
        </div>

        <div class="gf-form-filler"></div>
      </div>

      <div class="gf-form-inline" ng-repeat="selectParts in ctrl.queryModel.selectModels">
        <div class="gf-form">
          <label class="gf-form-label query-keyword width-7">
            <span ng-show="$index === 0">SELECT</span>
          </label>
        </div>

        <div class="gf-form" ng-repeat="part in selectParts">
          <influx-query-part-editor
                             class="gf-form-label query-part"
                             part="part"
                             remove-action="ctrl.removeSelectPart(selectParts, part)"
                             part-updated="ctrl.selectPartUpdated(selectParts, part)"
                             get-options="ctrl.getPartOptions(part)">
          </influx-query-part-editor>
        </div>

        <div class="gf-form">
          <label class="dropdown"
                 dropdown-typeahead="ctrl.selectMenu"
                 dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
          </label>
        </div>

        <div class="gf-form-filler"></div>
      </div>

      <div class="gf-form-inline">
        <div class="gf-form">
          <label class="gf-form-label query-keyword width-7">
            <span>GROUP BY</span>
          </label>

          <influx-query-part-editor
                 ng-repeat="part in ctrl.queryModel.groupByParts"
                 part="part"
                 class="gf-form-label query-part"
                 remove-action="ctrl.removeGroupByPart(part, $index)" part-updated="ctrl.refresh();" get-options="ctrl.getPartOptions(part)">
          </influx-query-part-editor>

          <metric-segment segment="ctrl.groupBySegment" get-options="ctrl.getGroupByOptions()" on-change="ctrl.groupByAction(part, $index)"></metric-segment>
        </div>

        <div class="gf-form-filler"></div>
      </div>
    </div>

    <div class="gf-form-inline">
      <div class="gf-form max-width-30">
        <label class="gf-form-label query-keyword width-7">ALIAS BY</label>
        <input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
      </div>
      <div class="gf-form">
        <label class="gf-form-label">Format as</label>
        <div class="gf-form-select-wrapper">
          <select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
        </div>
      </div>
      <div class="gf-form-filler"></div>
    </div>
  </div>

</query-editor-row>