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

<query-editor-row query-ctrl="ctrl" has-text-edit-mode="true">

  <div ng-if="ctrl.target.rawQuery">
    <div class="gf-form-inline">
      <div class="gf-form gf-form--grow">
        <code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sql">
        </code-editor>
      </div>
    </div>
  </div>

  <div ng-if="!ctrl.target.rawQuery">
    <div class="gf-form-inline">
      <div class="gf-form">
        <label class="gf-form-label query-keyword width-6">FROM</label>
        <metric-segment segment="ctrl.tableSegment" get-options="ctrl.getTableSegments()" on-change="ctrl.tableChanged()"></metric-segment>

        <label class="gf-form-label query-keyword width-7">Time column</label>
        <metric-segment segment="ctrl.timeColumnSegment" get-options="ctrl.getTimeColumnSegments()" on-change="ctrl.timeColumnChanged()"></metric-segment>

        <label class="gf-form-label query-keyword width-9">
          Metric column
          <info-popover mode="right-normal">Column to be used as metric name for the value column.</info-popover>
        </label>
        <metric-segment segment="ctrl.metricColumnSegment" get-options="ctrl.getMetricColumnSegments()" on-change="ctrl.metricColumnChanged()"></metric-segment>
      </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" ng-repeat="selectParts in ctrl.selectParts">
      <div class="gf-form">
        <label class="gf-form-label query-keyword width-6">
          <span ng-show="$index === 0">SELECT</span>&nbsp;
        </label>
      </div>

      <div class="gf-form" ng-repeat="part in selectParts">
        <sql-part-editor class="gf-form-label sql-part" part="part" handle-event="ctrl.handleSelectPartEvent(selectParts, part, $event)">
        </sql-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 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-6">WHERE</label>
      </div>

      <div class="gf-form" ng-repeat="part in ctrl.whereParts">
        <sql-part-editor class="gf-form-label sql-part" part="part" handle-event="ctrl.handleWherePartEvent(ctrl.whereParts, part, $event, $index)">
        </sql-part-editor>
      </div>

      <div class="gf-form">
        <metric-segment segment="ctrl.whereAdd" get-options="ctrl.getWhereOptions()" on-change="ctrl.addWhereAction(part, $index)"></metric-segment>
      </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-6">
          <span>GROUP BY</span>
        </label>

        <sql-part-editor  ng-repeat="part in ctrl.groupParts"
                            part="part" class="gf-form-label sql-part"
                            handle-event="ctrl.handleGroupPartEvent(part, $index, $event)">
        </sql-part-editor>
      </div>

      <div class="gf-form">
        <metric-segment segment="ctrl.groupAdd" get-options="ctrl.getGroupOptions()" on-change="ctrl.addGroupAction(part, $index)"></metric-segment>
      </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">
      <label class="gf-form-label query-keyword">Format as</label>
      <div class="gf-form-select-wrapper">
        <select class="gf-form-input gf-size-auto" ng-model="ctrl.target.format" ng-options="f.value as f.text for f in ctrl.formats" ng-change="ctrl.refresh()"></select>
      </div>
    </div>
    <div class="gf-form">
      <label class="gf-form-label query-keyword" ng-click="ctrl.toggleEditorMode()">
        <span ng-show="ctrl.target.rawQuery">Query Builder</span>
        <span ng-hide="ctrl.target.rawQuery">Edit SQL</span>
      </label>
    </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.showLastQuerySQL = !ctrl.showLastQuerySQL">
        Generated SQL
        <i class="fa fa-caret-down" ng-show="ctrl.showLastQuerySQL"></i>
        <i class="fa fa-caret-right" ng-hide="ctrl.showLastQuerySQL"></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.showLastQuerySQL">
    <pre class="gf-form-pre">{{ctrl.lastQueryMeta.sql}}</pre>
  </div>

  <div class="gf-form"  ng-show="ctrl.showHelp">
    <pre class="gf-form-pre alert alert-info">Time series:
- return column named <i>time</i> (UTC in seconds or timestamp)
- return column(s) with numeric datatype as values
Optional: 
  - return column named <i>metric</i> to represent the series name. 
  - If multiple value columns are returned the metric column is used as prefix. 
  - If no column named metric is found the column name of the value column is used as series name

Table:
- return any set of columns

Macros:
- $__time(column) -&gt; column as "time"
- $__timeEpoch -&gt; extract(epoch from column) as "time"
- $__timeFilter(column) -&gt; column BETWEEN '2017-04-21T05:01:17Z' AND '2017-04-21T05:01:17Z'
- $__unixEpochFilter(column) -&gt;  column &gt;= 1492750877 AND column &lt;= 1492750877
- $__timeGroup(column,'5m') -&gt; (extract(epoch from column)/300)::bigint*300 AS time

Example of group by and order by with $__timeGroup:
SELECT
  $__timeGroup(date_time_col, '1h'),
  sum(value) as value
FROM yourtable
GROUP BY time
ORDER BY time

Or build your own conditionals using these macros which just return the values:
- $__timeFrom() -&gt;  '2017-04-21T05:01:17Z'
- $__timeTo() -&gt;  '2017-04-21T05:01:17Z'
- $__unixEpochFrom() -&gt;  1492750877
- $__unixEpochTo() -&gt;  1492750877
    </pre>
  </div>

  </div>

  <div class="gf-form" ng-show="ctrl.lastQueryError">
    <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
  </div>

</query-editor-row>