Alexey Velikiy
6 years ago
committed by
GitHub
9 changed files with 6 additions and 462 deletions
@ -1,237 +0,0 @@
|
||||
import 'jquery'; |
||||
import _ from 'lodash'; |
||||
|
||||
export class ThresholdManager { |
||||
plot: any; |
||||
placeholder: any; |
||||
height: any; |
||||
thresholds: any; |
||||
needsCleanup: boolean; |
||||
hasSecondYAxis: any; |
||||
|
||||
constructor(private panelCtrl) {} |
||||
|
||||
getHandleHtml(handleIndex, model, valueStr) { |
||||
var stateClass = model.colorMode; |
||||
if (model.colorMode === 'custom') { |
||||
stateClass = 'critical'; |
||||
} |
||||
|
||||
return ` |
||||
<div class="alert-handle-wrapper alert-handle-wrapper--T${handleIndex}"> |
||||
<div class="alert-handle-line alert-handle-line--${stateClass}"> |
||||
</div> |
||||
<div class="alert-handle" data-handle-index="${handleIndex}"> |
||||
<i class="icon-gf icon-gf-${stateClass} alert-state-${stateClass}"></i> |
||||
<span class="alert-handle-value">${valueStr}<i class="alert-handle-grip"></i></span> |
||||
</div> |
||||
</div>`;
|
||||
} |
||||
|
||||
initDragging(evt) { |
||||
var handleElem = $(evt.currentTarget).parents('.alert-handle-wrapper'); |
||||
var handleIndex = $(evt.currentTarget).data('handleIndex'); |
||||
|
||||
var lastY = null; |
||||
var posTop; |
||||
var plot = this.plot; |
||||
var panelCtrl = this.panelCtrl; |
||||
var model = this.thresholds[handleIndex]; |
||||
|
||||
function dragging(evt) { |
||||
if (lastY === null) { |
||||
lastY = evt.clientY; |
||||
} else { |
||||
var diff = evt.clientY - lastY; |
||||
posTop = posTop + diff; |
||||
lastY = evt.clientY; |
||||
handleElem.css({ top: posTop + diff }); |
||||
} |
||||
} |
||||
|
||||
function stopped() { |
||||
// calculate graph level
|
||||
var graphValue = plot.c2p({ left: 0, top: posTop }).y; |
||||
graphValue = parseInt(graphValue.toFixed(0)); |
||||
model.value = graphValue; |
||||
|
||||
handleElem.off('mousemove', dragging); |
||||
handleElem.off('mouseup', dragging); |
||||
handleElem.off('mouseleave', dragging); |
||||
|
||||
// trigger digest and render
|
||||
panelCtrl.$scope.$apply(function() { |
||||
panelCtrl.render(); |
||||
panelCtrl.events.emit('threshold-changed', { |
||||
threshold: model, |
||||
handleIndex: handleIndex, |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
lastY = null; |
||||
posTop = handleElem.position().top; |
||||
|
||||
handleElem.on('mousemove', dragging); |
||||
handleElem.on('mouseup', stopped); |
||||
handleElem.on('mouseleave', stopped); |
||||
} |
||||
|
||||
cleanUp() { |
||||
this.placeholder.find('.alert-handle-wrapper').remove(); |
||||
this.needsCleanup = false; |
||||
} |
||||
|
||||
renderHandle(handleIndex, defaultHandleTopPos) { |
||||
var model = this.thresholds[handleIndex]; |
||||
var value = model.value; |
||||
var valueStr = value; |
||||
var handleTopPos = 0; |
||||
|
||||
// handle no value
|
||||
if (!_.isNumber(value)) { |
||||
valueStr = ''; |
||||
handleTopPos = defaultHandleTopPos; |
||||
} else { |
||||
var valueCanvasPos = this.plot.p2c({ x: 0, y: value }); |
||||
handleTopPos = Math.round(Math.min(Math.max(valueCanvasPos.top, 0), this.height) - 6); |
||||
} |
||||
|
||||
var handleElem = $(this.getHandleHtml(handleIndex, model, valueStr)); |
||||
this.placeholder.append(handleElem); |
||||
|
||||
handleElem.toggleClass('alert-handle-wrapper--no-value', valueStr === ''); |
||||
handleElem.css({ top: handleTopPos }); |
||||
} |
||||
|
||||
shouldDrawHandles() { |
||||
return !this.hasSecondYAxis && this.panelCtrl.editingThresholds && this.panelCtrl.panel.thresholds.length > 0; |
||||
} |
||||
|
||||
prepare(elem, data) { |
||||
this.hasSecondYAxis = false; |
||||
for (var i = 0; i < data.length; i++) { |
||||
if (data[i].yaxis > 1) { |
||||
this.hasSecondYAxis = true; |
||||
break; |
||||
} |
||||
} |
||||
|
||||
if (this.shouldDrawHandles()) { |
||||
var thresholdMargin = this.panelCtrl.panel.thresholds.length > 1 ? '220px' : '110px'; |
||||
elem.css('margin-right', thresholdMargin); |
||||
} else if (this.needsCleanup) { |
||||
elem.css('margin-right', '0'); |
||||
} |
||||
} |
||||
|
||||
draw(plot) { |
||||
this.thresholds = this.panelCtrl.panel.thresholds; |
||||
this.plot = plot; |
||||
this.placeholder = plot.getPlaceholder(); |
||||
|
||||
if (this.needsCleanup) { |
||||
this.cleanUp(); |
||||
} |
||||
|
||||
if (!this.shouldDrawHandles()) { |
||||
return; |
||||
} |
||||
|
||||
this.height = plot.height(); |
||||
|
||||
if (this.thresholds.length > 0) { |
||||
this.renderHandle(0, 10); |
||||
} |
||||
if (this.thresholds.length > 1) { |
||||
this.renderHandle(1, this.height - 30); |
||||
} |
||||
|
||||
this.placeholder.off('mousedown', '.alert-handle'); |
||||
this.placeholder.on('mousedown', '.alert-handle', this.initDragging.bind(this)); |
||||
this.needsCleanup = true; |
||||
} |
||||
|
||||
addFlotOptions(options, panel) { |
||||
if (!panel.thresholds || panel.thresholds.length === 0) { |
||||
return; |
||||
} |
||||
|
||||
var gtLimit = Infinity; |
||||
var ltLimit = -Infinity; |
||||
var i, threshold, other; |
||||
|
||||
for (i = 0; i < panel.thresholds.length; i++) { |
||||
threshold = panel.thresholds[i]; |
||||
if (!_.isNumber(threshold.value)) { |
||||
continue; |
||||
} |
||||
|
||||
var limit; |
||||
switch (threshold.op) { |
||||
case 'gt': { |
||||
limit = gtLimit; |
||||
// if next threshold is less then op and greater value, then use that as limit
|
||||
if (panel.thresholds.length > i + 1) { |
||||
other = panel.thresholds[i + 1]; |
||||
if (other.value > threshold.value) { |
||||
limit = other.value; |
||||
ltLimit = limit; |
||||
} |
||||
} |
||||
break; |
||||
} |
||||
case 'lt': { |
||||
limit = ltLimit; |
||||
// if next threshold is less then op and greater value, then use that as limit
|
||||
if (panel.thresholds.length > i + 1) { |
||||
other = panel.thresholds[i + 1]; |
||||
if (other.value < threshold.value) { |
||||
limit = other.value; |
||||
gtLimit = limit; |
||||
} |
||||
} |
||||
break; |
||||
} |
||||
} |
||||
|
||||
var fillColor, lineColor; |
||||
switch (threshold.colorMode) { |
||||
case 'critical': { |
||||
fillColor = 'rgba(234, 112, 112, 0.12)'; |
||||
lineColor = 'rgba(237, 46, 24, 0.60)'; |
||||
break; |
||||
} |
||||
case 'warning': { |
||||
fillColor = 'rgba(235, 138, 14, 0.12)'; |
||||
lineColor = 'rgba(247, 149, 32, 0.60)'; |
||||
break; |
||||
} |
||||
case 'ok': { |
||||
fillColor = 'rgba(11, 237, 50, 0.090)'; |
||||
lineColor = 'rgba(6,163,69, 0.60)'; |
||||
break; |
||||
} |
||||
case 'custom': { |
||||
fillColor = threshold.fillColor; |
||||
lineColor = threshold.lineColor; |
||||
break; |
||||
} |
||||
} |
||||
|
||||
// fill
|
||||
if (threshold.fill) { |
||||
options.grid.markings.push({ |
||||
yaxis: { from: threshold.value, to: limit }, |
||||
color: fillColor, |
||||
}); |
||||
} |
||||
if (threshold.line) { |
||||
options.grid.markings.push({ |
||||
yaxis: { from: threshold.value, to: threshold.value }, |
||||
color: lineColor, |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,142 +0,0 @@
|
||||
|
||||
import coreModule from 'grafana/app/core/core_module'; |
||||
|
||||
export class ThresholdFormCtrl { |
||||
panelCtrl: any; |
||||
panel: any; |
||||
disabled: boolean; |
||||
|
||||
/** @ngInject */ |
||||
constructor($scope) { |
||||
this.panel = this.panelCtrl.panel; |
||||
|
||||
if (this.panel.alert) { |
||||
this.disabled = true; |
||||
} |
||||
|
||||
var unbindDestroy = $scope.$on('$destroy', () => { |
||||
this.panelCtrl.editingThresholds = false; |
||||
this.panelCtrl.render(); |
||||
unbindDestroy(); |
||||
}); |
||||
|
||||
this.panelCtrl.editingThresholds = true; |
||||
} |
||||
|
||||
addThreshold() { |
||||
this.panel.thresholds.push({ |
||||
value: undefined, |
||||
colorMode: 'critical', |
||||
op: 'gt', |
||||
fill: true, |
||||
line: true, |
||||
}); |
||||
this.panelCtrl.render(); |
||||
} |
||||
|
||||
removeThreshold(index) { |
||||
this.panel.thresholds.splice(index, 1); |
||||
this.panelCtrl.render(); |
||||
} |
||||
|
||||
render() { |
||||
this.panelCtrl.render(); |
||||
} |
||||
|
||||
onFillColorChange(index) { |
||||
return newColor => { |
||||
this.panel.thresholds[index].fillColor = newColor; |
||||
this.render(); |
||||
}; |
||||
} |
||||
|
||||
onLineColorChange(index) { |
||||
return newColor => { |
||||
this.panel.thresholds[index].lineColor = newColor; |
||||
this.render(); |
||||
}; |
||||
} |
||||
} |
||||
|
||||
var template = ` |
||||
<div class="gf-form-group"> |
||||
<h5>Thresholds</h5> |
||||
<p class="muted" ng-show="ctrl.disabled"> |
||||
Visual thresholds options <strong>disabled.</strong> |
||||
Visit the Alert tab update your thresholds. <br> |
||||
To re-enable thresholds, the alert rule must be deleted from this panel. |
||||
</p> |
||||
<div ng-class="{'thresholds-form-disabled': ctrl.disabled}"> |
||||
<div class="gf-form-inline" ng-repeat="threshold in ctrl.panel.thresholds"> |
||||
<div class="gf-form"> |
||||
<label class="gf-form-label">T{{$index+1}}</label> |
||||
</div> |
||||
|
||||
<div class="gf-form"> |
||||
<div class="gf-form-select-wrapper"> |
||||
<select class="gf-form-input" ng-model="threshold.op" |
||||
ng-options="f for f in ['gt', 'lt']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled"></select> |
||||
</div> |
||||
<input type="number" ng-model="threshold.value" class="gf-form-input width-8" |
||||
ng-change="ctrl.render()" placeholder="value" ng-disabled="ctrl.disabled"> |
||||
</div> |
||||
|
||||
<div class="gf-form"> |
||||
<label class="gf-form-label">Color</label> |
||||
<div class="gf-form-select-wrapper"> |
||||
<select class="gf-form-input" ng-model="threshold.colorMode" |
||||
ng-options="f for f in ['custom', 'critical', 'warning', 'ok']" ng-change="ctrl.render()" ng-disabled="ctrl.disabled"> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
|
||||
<gf-form-switch class="gf-form" label="Fill" checked="threshold.fill" |
||||
on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch> |
||||
|
||||
<div class="gf-form" ng-if="threshold.fill && threshold.colorMode === 'custom'"> |
||||
<label class="gf-form-label">Fill color</label> |
||||
<span class="gf-form-label"> |
||||
<color-picker color="threshold.fillColor" onChange="ctrl.onFillColorChange($index)"></color-picker> |
||||
</span> |
||||
</div> |
||||
|
||||
<gf-form-switch class="gf-form" label="Line" checked="threshold.line" |
||||
on-change="ctrl.render()" ng-disabled="ctrl.disabled"></gf-form-switch> |
||||
|
||||
<div class="gf-form" ng-if="threshold.line && threshold.colorMode === 'custom'"> |
||||
<label class="gf-form-label">Line color</label> |
||||
<span class="gf-form-label"> |
||||
<color-picker color="threshold.lineColor" onChange="ctrl.onLineColorChange($index)"></color-picker> |
||||
</span> |
||||
</div> |
||||
|
||||
<div class="gf-form"> |
||||
<label class="gf-form-label"> |
||||
<a class="pointer" ng-click="ctrl.removeThreshold($index)" ng-disabled="ctrl.disabled"> |
||||
<i class="fa fa-trash"></i> |
||||
</a> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="gf-form-button-row"> |
||||
<button class="btn btn-inverse" ng-click="ctrl.addThreshold()" ng-disabled="ctrl.disabled"> |
||||
<i class="fa fa-plus"></i> Add Threshold |
||||
</button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`;
|
||||
|
||||
coreModule.directive('hasticGraphThresholdForm', function() { |
||||
return { |
||||
restrict: 'E', |
||||
template: template, |
||||
controller: ThresholdFormCtrl, |
||||
bindToController: true, |
||||
controllerAs: 'ctrl', |
||||
scope: { |
||||
panelCtrl: '=', |
||||
}, |
||||
}; |
||||
}); |
||||
Loading…
Reference in new issue