query.editor.html 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <query-editor-row query-ctrl="ctrl" has-text-edit-mode="true">
  2. <div ng-if="ctrl.target.rawQuery">
  3. <div class="gf-form-inline">
  4. <div class="gf-form gf-form--grow">
  5. <code-editor content="ctrl.target.rawSql" datasource="ctrl.datasource" on-change="ctrl.panelCtrl.refresh()" data-mode="sql">
  6. </code-editor>
  7. </div>
  8. </div>
  9. </div>
  10. <div ng-if="!ctrl.target.rawQuery">
  11. <div class="gf-form-inline">
  12. <div class="gf-form">
  13. <label class="gf-form-label query-keyword width-7">FROM</label>
  14. <metric-segment segment="ctrl.schemaSegment" get-options="ctrl.getSchemaSegments()" on-change="ctrl.schemaChanged()"></metric-segment>
  15. <metric-segment segment="ctrl.tableSegment" get-options="ctrl.getTableSegments()" on-change="ctrl.tableChanged()"></metric-segment>
  16. </div>
  17. </div>
  18. </div>
  19. <div class="gf-form-inline">
  20. <div class="gf-form">
  21. <label class="gf-form-label query-keyword">Format as</label>
  22. <div class="gf-form-select-wrapper">
  23. <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>
  24. </div>
  25. </div>
  26. <div class="gf-form">
  27. <label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
  28. Show Help
  29. <i class="fa fa-caret-down" ng-show="ctrl.showHelp"></i>
  30. <i class="fa fa-caret-right" ng-hide="ctrl.showHelp"></i>
  31. </label>
  32. </div>
  33. <div class="gf-form" ng-show="ctrl.lastQueryMeta">
  34. <label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
  35. Generated SQL
  36. <i class="fa fa-caret-down" ng-show="ctrl.showLastQuerySQL"></i>
  37. <i class="fa fa-caret-right" ng-hide="ctrl.showLastQuerySQL"></i>
  38. </label>
  39. </div>
  40. <div class="gf-form gf-form--grow">
  41. <div class="gf-form-label gf-form-label--grow"></div>
  42. </div>
  43. </div>
  44. <div class="gf-form" ng-show="ctrl.showLastQuerySQL">
  45. <pre class="gf-form-pre">{{ctrl.lastQueryMeta.sql}}</pre>
  46. </div>
  47. <div class="gf-form" ng-show="ctrl.showHelp">
  48. <pre class="gf-form-pre alert alert-info">Time series:
  49. - return column named <i>time</i> (UTC in seconds or timestamp)
  50. - return column(s) with numeric datatype as values
  51. - (Optional: return column named <i>metric</i> to represent the series name. If no column named metric is found the column name of the value column is used as series name)
  52. Table:
  53. - return any set of columns
  54. Macros:
  55. - $__time(column) -&gt; column as "time"
  56. - $__timeEpoch -&gt; extract(epoch from column) as "time"
  57. - $__timeFilter(column) -&gt; extract(epoch from column) BETWEEN 1492750877 AND 1492750877
  58. - $__unixEpochFilter(column) -&gt; column &gt; 1492750877 AND column &lt; 1492750877
  59. - $__timeGroup(column,'5m') -&gt; (extract(epoch from column)/300)::bigint*300 AS time
  60. Example of group by and order by with $__timeGroup:
  61. SELECT
  62. $__timeGroup(date_time_col, '1h'),
  63. sum(value) as value
  64. FROM yourtable
  65. GROUP BY time
  66. ORDER BY time
  67. Or build your own conditionals using these macros which just return the values:
  68. - $__timeFrom() -&gt; to_timestamp(1492750877)
  69. - $__timeTo() -&gt; to_timestamp(1492750877)
  70. - $__unixEpochFrom() -&gt; 1492750877
  71. - $__unixEpochTo() -&gt; 1492750877
  72. </pre>
  73. </div>
  74. </div>
  75. <div class="gf-form" ng-show="ctrl.lastQueryError">
  76. <pre class="gf-form-pre alert alert-error">{{ctrl.lastQueryError}}</pre>
  77. </div>
  78. </query-editor-row>