query.editor.html 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <query-editor-row query-ctrl="ctrl" can-collapse="false">
  2. <div class="gf-form-inline">
  3. <div class="gf-form gf-form--grow">
  4. <label class="gf-form-label width-8">Query</label>
  5. <input type="text" class="gf-form-input" ng-model="ctrl.target.expr" spellcheck='false' placeholder="query expression" data-min-length=0 data-items=100 ng-model-onblur ng-change="ctrl.refreshMetricData()">
  6. </div>
  7. <div class="gf-form max-width-22">
  8. <label class="gf-form-label">Metric lookup</label>
  9. <input type="text" class="gf-form-input" ng-model="ctrl.target.metric" spellcheck='false' bs-typeahead="ctrl.suggestMetrics" placeholder="metric name" data-min-length=0 data-items=100>
  10. </div>
  11. </div>
  12. <div class="gf-form-inline">
  13. <div class="gf-form max-width-26">
  14. <label class="gf-form-label width-8">Legend format</label>
  15. <input type="text" class="gf-form-input" ng-model="ctrl.target.legendFormat"
  16. spellcheck='false' placeholder="legend format" data-min-length=0 data-items=1000
  17. ng-model-onblur ng-change="ctrl.refreshMetricData()">
  18. </input>
  19. </div>
  20. <div class="gf-form">
  21. <label class="gf-form-label width-5">Step</label>
  22. <input type="text" class="gf-form-input max-width-5" ng-model="ctrl.target.interval"
  23. data-placement="right"
  24. spellcheck='false'
  25. placeholder="{{ctrl.panelCtrl.interval}}"
  26. data-min-length=0 data-items=100
  27. ng-model-onblur
  28. ng-change="ctrl.refreshMetricData()"/>
  29. <info-popover mode="right-absolute">
  30. Leave blank for auto handling based on time range and panel width
  31. </info-popover>
  32. </div>
  33. <div class="gf-form">
  34. <label class="gf-form-label">Resolution</label>
  35. <div class="gf-form-select-wrapper max-width-15">
  36. <select ng-model="ctrl.target.intervalFactor" class="gf-form-input"
  37. ng-options="r.factor as r.label for r in ctrl.resolutions"
  38. ng-change="ctrl.refreshMetricData()">
  39. </select>
  40. </div>
  41. <label class="gf-form-label">Format as</label>
  42. <div class="gf-form-select-wrapper">
  43. <select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
  44. </div>
  45. <label class="gf-form-label">
  46. <a href="{{ctrl.linkToPrometheus}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
  47. <i class="fa fa-share-square-o"></i>
  48. </a>
  49. </label>
  50. </div>
  51. <div class="gf-form gf-form--grow">
  52. <div class="gf-form-label gf-form-label--grow"></div>
  53. </div>
  54. </div>
  55. </query-editor-row>