thresholds_form.html 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <div class="gf-form-group">
  2. <h5>Thresholds</h5>
  3. <p class="muted" ng-show="ctrl.disabled">
  4. Visual thresholds options <strong>disabled.</strong>
  5. Visit the Alert tab update your thresholds. <br>
  6. To re-enable thresholds, the alert rule must be deleted from this panel.
  7. </p>
  8. <div ng-class="{'thresholds-form-disabled': ctrl.disabled}">
  9. <div class="gf-form-inline" ng-repeat="threshold in ctrl.panel.thresholds">
  10. <div class="gf-form">
  11. <label class="gf-form-label">T{{$index+1}}</label>
  12. </div>
  13. <div class="gf-form">
  14. <div class="gf-form-select-wrapper">
  15. <select class="gf-form-input" ng-model="threshold.op"
  16. ng-options="f for f in ['gt', 'lt']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled"></select>
  17. </div>
  18. <input type="number" ng-model="threshold.value" class="gf-form-input width-8"
  19. ng-change="ctrl.render()" placeholder="value" ng-disabled="ctrl.disabled">
  20. </div>
  21. <div class="gf-form">
  22. <label class="gf-form-label">Color</label>
  23. <div class="gf-form-select-wrapper">
  24. <select class="gf-form-input" ng-model="threshold.colorMode"
  25. ng-options="f for f in ['custom', 'critical', 'warning', 'ok']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled">
  26. </select>
  27. </div>
  28. </div>
  29. <gf-form-switch class="gf-form" label="Fill" checked="threshold.fill"
  30. on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch>
  31. <div class="gf-form" ng-if="threshold.fill && threshold.colorMode === 'custom'">
  32. <label class="gf-form-label">Fill color</label>
  33. <span class="gf-form-label">
  34. <color-picker color="threshold.fillColor" onChange="ctrl.onFillColorChange($index)"></color-picker>
  35. </span>
  36. </div>
  37. <gf-form-switch class="gf-form" label="Line" checked="threshold.line"
  38. on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch>
  39. <div class="gf-form" ng-if="threshold.line && threshold.colorMode === 'custom'">
  40. <label class="gf-form-label">Line color</label>
  41. <span class="gf-form-label">
  42. <color-picker color="threshold.lineColor" onChange="ctrl.onLineColorChange($index)"></color-picker>
  43. </span>
  44. </div>
  45. <div class="gf-form">
  46. <label class="gf-form-label">Y-Axis</label>
  47. <div class="gf-form-select-wrapper">
  48. <select class="gf-form-input" ng-model="threshold.yaxis"
  49. ng-init="threshold.yaxis = threshold.yaxis === 'left' || threshold.yaxis === 'right' ? threshold.yaxis : 'left'"
  50. ng-options="f for f in ['left', 'right']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled">
  51. </select>
  52. </div>
  53. </div>
  54. <div class="gf-form">
  55. <label class="gf-form-label">
  56. <a class="pointer" ng-click="ctrl.removeThreshold($index)" ng-disabled="ctrl.disabled">
  57. <i class="fa fa-trash"></i>
  58. </a>
  59. </label>
  60. </div>
  61. </div>
  62. <div class="gf-form-button-row">
  63. <button class="btn btn-inverse" ng-click="ctrl.addThreshold()" ng-disabled="ctrl.disabled">
  64. <i class="fa fa-plus"></i>&nbsp;Add Threshold
  65. </button>
  66. </div>
  67. </div>
  68. </div>