query.editor.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <query-editor-row query-ctrl="ctrl" can-collapse="true" has-text-edit-mode="false">
  2. <div class="gf-form-inline">
  3. <div class="gf-form gf-form--grow">
  4. <code-editor content="ctrl.target.expr" datasource="ctrl.datasource" on-change="ctrl.refreshMetricData()" get-completer="ctrl.getCompleter()"
  5. data-mode="prometheus" code-editor-focus="ctrl.isLastQuery">
  6. </code-editor>
  7. </div>
  8. </div>
  9. <div class="gf-form-inline">
  10. <div class="gf-form">
  11. <label class="gf-form-label">Legend</label>
  12. <input type="text" class="gf-form-input gf-form-input--has-help-icon" ng-model="ctrl.target.legendFormat" spellcheck='false' placeholder="legend format"
  13. data-min-length=0 data-items=1000 ng-model-onblur ng-change="ctrl.refreshMetricData()">
  14. </input>
  15. <info-popover mode="right-absolute">
  16. Controls the name of the time series, using name or pattern. For example
  17. <span ng-non-bindable>{{hostname}}</span> will be replaced with label value for the label hostname.
  18. </info-popover>
  19. </div>
  20. <div class="gf-form">
  21. <label class="gf-form-label width-6">Min step</label>
  22. <input type="text" class="gf-form-input width-8 gf-form-input--has-help-icon" ng-model="ctrl.target.interval" data-placement="right" spellcheck='false'
  23. placeholder="{{ctrl.panelCtrl.interval}}" data-min-length=0 data-items=100 ng-model-onblur ng-change="ctrl.refreshMetricData()"
  24. />
  25. <info-popover mode="right-absolute">
  26. Leave blank for auto handling based on time range and panel width. Note that the actual dates used in the query will be adjusted
  27. to a multiple of the interval step.
  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" ng-options="r.factor as r.label for r in ctrl.resolutions"
  34. ng-change="ctrl.refreshMetricData()">
  35. </select>
  36. </div>
  37. </div>
  38. <div class="gf-form gf-form--grow">
  39. <label class="gf-form-label width-5">Format</label>
  40. <div class="gf-form-select-wrapper width-8">
  41. <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"
  42. ng-change="ctrl.refresh()"></select>
  43. </div>
  44. <gf-form-switch class="gf-form" label="Instant" label-class="width-5" checked="ctrl.target.instant" on-change="ctrl.refresh()">
  45. </gf-form-switch>
  46. <label class="gf-form-label gf-form-label--grow">
  47. <a href="{{ctrl.linkToPrometheus}}" target="_blank" bs-tooltip="'Link to Graph in Prometheus'">
  48. <i class="fa fa-share-square-o"></i>
  49. </a>
  50. </label>
  51. </div>
  52. </div>
  53. </query-editor-row>