query.editor.html 2.6 KB

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