thresholds_form.html 3.5 KB

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