query.editor.html

<query-editor-row query-ctrl="ctrl" can-collapse="true" >

  <div class="gf-form-inline">  
    <div class="gf-form gf-form--grow">
      <label class="gf-form-label query-keyword width-7">INPUT SQL</label>
      <input type="text" class="gf-form-input" ng-model="ctrl.target.sql" spellcheck='false' placeholder="select count(*) from sys.cpu where ts >= $from and ts < $to interval($interval)" ng-blur="ctrl.panelCtrl.refresh()" data-mode="sql"></input>        
    </div>   
  </div>
  
  <div class="gf-form-inline">
    <div class="gf-form-inline"  ng-hide="ctrl.target.resultFormat === 'table'">
      <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.panelCtrl.refresh()">
      </div>
    </div>    
    <div class="gf-form">
      <label class="gf-form-label query-keyword" ng-click="ctrl.generateSQL()">
        GENERATE SQL
        <i class="fa fa-caret-down" ng-show="ctrl.showGenerateSQL"></i>
        <i class="fa fa-caret-right" ng-hide="ctrl.showGenerateSQL"></i>
      </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>
  
  <div class="gf-form" ng-show="ctrl.showGenerateSQL">
    <pre class="gf-form-pre">{{ctrl.lastGenerateSQL}}</pre>
  </div>

  <div class="gf-form"  ng-show="ctrl.showHelp">
    <pre class="gf-form-pre alert alert-info">Use any SQL that can return Resultset such as:
- [[timestamp1, value1], [timestamp2, value2], ... ]

Macros:
- $from -&gt; start timestamp of panel
- $to -&gt; stop timestamp of panel
- $interval -&gt; interval of panel

Example of SQL:
&nbsp;&nbsp;SELECT count(*)
&nbsp;&nbsp;FROM db.table
&nbsp;&nbsp;WHERE ts > $from and ts < $to
&nbsp;&nbsp;INTERVAL ($interval)
    </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>