query.editor.html 2.7 KB

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