query.editor.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <query-editor-row query-ctrl="ctrl" can-collapse="false">
  2. <div class="gf-form-inline">
  3. <div class="gf-form">
  4. <label class="gf-form-label width-8 query-keyword">Query</label>
  5. <metric-segment segment="ctrl.metricSegment" get-options="ctrl.getMetricOptions()" on-change="ctrl.queryChanged()"></metric-segment>
  6. </div>
  7. <div class="gf-form" ng-repeat="part in ctrl.query.functions">
  8. <query-part-editor class="gf-form-label query-part"
  9. part="part"
  10. remove-action="ctrl.removePart(query.functions, part)"
  11. part-updated="ctrl.partUpdated(query.functions, part)"
  12. get-options="ctrl.getPartOptions(part)">
  13. </query-part-editor>
  14. </div>
  15. <div class="gf-form">
  16. <label class="dropdown"
  17. dropdown-typeahead="ctrl.addQueryPartMenu"
  18. dropdown-typeahead-on-select="ctrl.addQueryPart($item, $subItem)">
  19. </label>
  20. </div>
  21. <div class="gf-form gf-form--grow">
  22. <div class="gf-form-label gf-form-label--grow"></div>
  23. </div>
  24. </div>
  25. <div class="gf-form-inline">
  26. <div class="gf-form max-width-26">
  27. <label class="gf-form-label width-8 query-keyword">Legend format</label>
  28. <input type="text" class="gf-form-input" ng-model="ctrl.target.legendFormat"
  29. spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000
  30. ng-model-onblur ng-change="ctrl.refreshMetricData()">
  31. </input>
  32. </div>
  33. <div class="gf-form">
  34. <label class="gf-form-label width-5">Step</label>
  35. <input type="text" class="gf-form-input max-width-5" ng-model="ctrl.target.interval"
  36. data-placement="right"
  37. spellcheck='false'
  38. placeholder="{{ctrl.panelCtrl.interval}}"
  39. data-min-length=0 data-items=100
  40. ng-model-onblur
  41. ng-change="ctrl.refreshMetricData()"/>
  42. <info-popover mode="right-absolute">
  43. Leave blank for auto handling based on time range and panel width
  44. </info-popover>
  45. </div>
  46. <div class="gf-form">
  47. <label class="gf-form-label">Resolution</label>
  48. <div class="gf-form-select-wrapper max-width-15">
  49. <select ng-model="ctrl.target.intervalFactor" class="gf-form-input"
  50. ng-options="r.factor as r.label for r in ctrl.resolutions"
  51. ng-change="ctrl.refreshMetricData()">
  52. </select>
  53. </div>
  54. <label class="gf-form-label">
  55. <a href="{{ctrl.linkToPrometheus}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
  56. <i class="fa fa-share-square-o"></i>
  57. </a>
  58. </label>
  59. </div>
  60. <div class="gf-form gf-form--grow">
  61. <div class="gf-form-label gf-form-label--grow"></div>
  62. </div>
  63. </div>
  64. </query-editor-row>