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

<query-editor-row query-ctrl="ctrl" has-text-edit-mode="false">
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-9">Metric Type</span>
      <gf-form-dropdown model="ctrl.target.metricType" get-options="ctrl.getMetricTypes($query)" class="min-width-20" disabled
        type="text" allow-custom="true" lookup-text="true" css-class="min-width-12" on-change="ctrl.onMetricTypeChange()"></gf-form-dropdown>
    </div>
    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label query-keyword width-9">Filter</span>
      <div class="gf-form" ng-repeat="segment in ctrl.filterSegments.filterSegments">
        <metric-segment segment="segment" get-options="ctrl.getFilters(segment, $index)" on-change="ctrl.filterSegmentUpdated(segment, $index)"></metric-segment>
      </div>
    </div>
    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label query-keyword width-9">Group By</span>
      <div class="gf-form" ng-repeat="segment in ctrl.groupBySegments">
        <metric-segment segment="segment" get-options="ctrl.getGroupBys(segment, $index)" on-change="ctrl.groupByChanged(segment, $index)"></metric-segment>
      </div>
    </div>
    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label query-keyword width-9">Aggregation</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select class="gf-form-input width-12" ng-model="ctrl.target.aggregation.crossSeriesReducer" ng-options="f.value as f.text for f in ctrl.stackdriverConstants.aggOptions"
          ng-change="ctrl.refresh()"></select>
      </div>
    </div>
    <div class="gf-form gf-form--grow">
      <label class="gf-form-label gf-form-label--grow">
        <a ng-click="ctrl.target.showAggregationOptions = !ctrl.target.showAggregationOptions">
          <i class="fa fa-caret-down" ng-show="ctrl.target.showAggregationOptions"></i>
          <i class="fa fa-caret-right" ng-hide="ctrl.target.showAggregationOptions"></i>
          Advanced Options
        </a>
      </label>
    </div>
  </div>
  <div class="gf-form-group" ng-if="ctrl.target.showAggregationOptions">
    <div class="gf-form offset-width-9">
      <label class="gf-form-label query-keyword width-12">Aligner</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select class="gf-form-input width-14" ng-model="ctrl.target.aggregation.perSeriesAligner" ng-options="f.value as f.text for f in ctrl.stackdriverConstants.alignOptions"
          ng-change="ctrl.refresh()"></select>
      </div>

      <div class="gf-form gf-form--grow">
        <div class="gf-form-label gf-form-label--grow"></div>
      </div>
    </div>
    <div class="gf-form offset-width-9">
      <label class="gf-form-label query-keyword width-12">Alignment Period</label>
      <div class="gf-form-select-wrapper gf-form-select-wrapper--caret-indent">
        <select class="gf-form-input width-14" ng-model="ctrl.target.aggregation.alignmentPeriod" ng-options="f.value as f.text for f in ctrl.stackdriverConstants.alignmentPeriods"
          ng-change="ctrl.refresh()"></select>
      </div>

      <div class="gf-form gf-form--grow">
        <div class="gf-form-label gf-form-label--grow"></div>
      </div>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label query-keyword width-9">Alias By</span>
      <input type="text" class="gf-form-input width-30" ng-model="ctrl.target.aliasBy" />
    </div>
    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-9">Project</span>
      <input class="gf-form-input" disabled type="text" ng-model='ctrl.target.project.name' get-options="ctrl.getProjects()" css-class="min-width-12"
      />
    </div>
    <div class="gf-form">
      <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
        Show Help
        <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
        <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
      </label>
    </div>
    <div class="gf-form" ng-show="ctrl.lastQueryMeta">
      <label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuery = !ctrl.showLastQuery">
        Raw Query
        <i class="fa fa-caret-down" ng-show="ctrl.showLastQuery"></i>
        <i class="fa fa-caret-right" ng-hide="ctrl.showLastQuery"></i>
      </label>
    </div>
    <div class="gf-form gf-form--grow">
      <div class="gf-form-label gf-form-label--grow"></div>
    </div>
  </div>

  <div class="gf-form" ng-show="ctrl.showLastQuery">
    <pre class="gf-form-pre">{{ctrl.lastQueryMeta.rawQueryString}}</pre>
  </div>
  <div class="gf-form" ng-show="ctrl.showHelp">
    <pre class="gf-form-pre alert alert-info"><h6>Alias Patterns</h6>
  Format the legend keys any way you want by using alias patterns.

  Example: <code ng-non-bindable>{{metric.name}} - {{metric.label.instance_name}}</code>
  Result: cpu/usage_time - server1-europe-west-1

  Patterns:
  <code ng-non-bindable>{{metric.type}}</code> = metric type e.g. compute.googleapis.com/instance/cpu/usage_time
  <code ng-non-bindable>{{metric.name}}</code> = name part of metric e.g. cpu/usage_time
  <code ng-non-bindable>{{metric.category}}</code> = category part of metric e.g. instance
  <code ng-non-bindable>{{metric.service}}</code> = service part of metric e.g. compute

  <code ng-non-bindable>{{metric.label.label_name}}</code> = Metric label metadata e.g. metric.label.instance_name
  <code ng-non-bindable>{{resource.label.label_name}}</code> = Resource label metadata e.g. resource.label.zone
    </pre>
  </div>
  <div class="gf-form" ng-show="ctrl.lastQueryError">
    <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
  </div>
</query-editor-row>