IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(thresholds): lots of progress on thresholds

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-08-11 18:25:41 +02:00
parent 72a67b39f1
commit 89ca15f3a1
8 changed files with 140 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
public/app/features/alerting/alert_tab_ctrl.ts
View File

@@ -76,26 +76,6 @@ export class AlertTabCtrl {
}));
}
evaluatorTypeChanged(evaluator) {
// ensure params array is correct length
switch (evaluator.type) {
case "lt":
case "gt": {
evaluator.params = [evaluator.params[0]];
break;
}
case "within_range":
case "outside_range": {
evaluator.params = [evaluator.params[0], evaluator.params[1]];
break;
}
case "no_value": {
evaluator.params = [];
}
}
this.thresholdUpdated();
}
notificationAdded() {
var model = _.findWhere(this.notifications, {name: this.addNotificationSegment.value});
@@ -200,10 +180,35 @@ export class AlertTabCtrl {
this.initModel();
}
thresholdUpdated() {
if (ThresholdMapper.alertToGraphThresholds(this.panel)) {
this.panelCtrl.render();
evaluatorParamsChanged() {
ThresholdMapper.alertToGraphThresholds(this.panel);
this.panelCtrl.render();
}
severityChanged() {
ThresholdMapper.alertToGraphThresholds(this.panel);
this.panelCtrl.render();
}
evaluatorTypeChanged(evaluator) {
// ensure params array is correct length
switch (evaluator.type) {
case "lt":
case "gt": {
evaluator.params = [evaluator.params[0]];
break;
}
case "within_range":
case "outside_range": {
evaluator.params = [evaluator.params[0], evaluator.params[1]];
break;
}
case "no_value": {
evaluator.params = [];
}
}
this.evaluatorParamsChanged();
}
test() {

6
public/app/features/alerting/partials/alert_tab.html
View File

@@ -34,7 +34,7 @@
<div class="gf-form">
<span class="gf-form-label">Severity</span>
<div class="gf-form-select-wrapper width-13">
<select class="gf-form-input" ng-model="ctrl.alert.severity" ng-options="f.value as f.text for f in ctrl.severityLevels">
<select class="gf-form-input" ng-model="ctrl.alert.severity" ng-options="f.value as f.text for f in ctrl.severityLevels" ng-change="ctrl.severityChanged()">
</select>
</div>
</div>
@@ -59,9 +59,9 @@
</div>
<div class="gf-form">
<metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions" custom="false" css-class="query-keyword" on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
<input class="gf-form-input max-width-7" type="number" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.thresholdUpdated()"></input>
<input class="gf-form-input max-width-7" type="number" ng-hide="conditionModel.evaluator.params.length === 0" ng-model="conditionModel.evaluator.params[0]" ng-change="ctrl.evaluatorParamsChanged()"></input>
<label class="gf-form-label query-keyword" ng-show="conditionModel.evaluator.params.length === 2">TO</label>
<input class="gf-form-input max-width-7" type="number" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.thresholdUpdated()"></input>
<input class="gf-form-input max-width-7" type="number" ng-if="conditionModel.evaluator.params.length === 2" ng-model="conditionModel.evaluator.params[1]" ng-change="ctrl.evaluatorParamsChanged()"></input>
</div>
<div class="gf-form">
<label class="gf-form-label">

18
public/app/plugins/panel/graph/graph.js
View File

@@ -37,7 +37,7 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
var legendSideLastValue = null;
var rootScope = scope.$root;
var panelWidth = 0;
var thresholdControls;
var thresholdControls = new ThresholdControls(ctrl);
rootScope.onAppEvent('setCrosshair', function(event, info) {
// do not need to to this if event is from this panel
@@ -161,9 +161,7 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
rightLabel[0].style.marginTop = (getLabelWidth(panel.yaxes[1].label, rightLabel) / 2) + 'px';
}
if (thresholdControls) {
thresholdControls.draw(plot);
}
thresholdControls.draw(plot);
}
function processOffsetHook(plot, gridMargin) {
@@ -182,17 +180,7 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholds) {
}
// give space to alert editing
if (ctrl.editingThresholds) {
if (!thresholdControls) {
var thresholdMargin = panel.thresholds.length > 1 ? '220px' : '110px';
elem.css('margin-right', thresholdMargin);
thresholdControls = new ThresholdControls(ctrl);
}
} else if (thresholdControls) {
elem.css('margin-right', '0');
thresholdControls.cleanUp();
thresholdControls = null;
}
thresholdControls.prepare(elem);
var stack = panel.stack ? true : null;

2
public/app/plugins/panel/graph/module.ts
View File

@@ -328,7 +328,7 @@ class GraphCtrl extends MetricsPanelCtrl {
}
addThreshold() {
this.panel.thresholds.push({value: undefined, color: "rgba(255,0,0,0.2)"});
this.panel.thresholds.push({value: undefined, colorMode: "critical", op: 'gt', fill: true, line: true});
}
removeThreshold(index) {

81
public/app/plugins/panel/graph/thresholds.ts
View File

@@ -9,26 +9,25 @@ export class ThresholdControls {
placeholder: any;
height: any;
thresholds: any;
needsCleanup: boolean;
constructor(private panelCtrl) {
this.thresholds = this.panelCtrl.panel.thresholds;
}
constructor(private panelCtrl) {}
getHandleInnerHtml(handleName, op, value) {
if (op === '>') { op = '&gt;'; }
if (op === '<') { op = '&lt;'; }
getHandleHtml(handleIndex, model, valueStr) {
var colorClass = 'crit';
if (model.colorMode === 'warning') {
colorClass = 'warn';
}
return `
<div class="alert-handle-line">
return `<div class="alert-handle-wrapper alert-handle-wrapper--T${handleIndex}">
<div class="alert-handle-line alert-handle-line--${colorClass}">
</div>
<div class="alert-handle" data-handle-index="${handleIndex}">
<i class="icon-gf icon-gf-${colorClass} alert-icon-${colorClass}"></i>
<span class="alert-handle-value">${valueStr}</span>
</div>
<div class="alert-handle">
${op} ${value}
</div>`;
}
getFullHandleHtml(handleName, op, value) {
var innerTemplate = this.getHandleInnerHtml(handleName, op, value);
return `<div class="alert-handle-wrapper alert-handle-wrapper--${handleName}">${innerTemplate}</div>`;
}
setupDragging(handleElem, threshold, handleIndex) {
@@ -78,15 +77,18 @@ export class ThresholdControls {
});
}
cleanUp() {
if (this.placeholder) {
this.placeholder.find(".alert-handle-wrapper").remove();
}
initDragging(evt) {
var handleIndex = $(evt.currentTarget).data("handleIndex");
console.log('alert handle index', handleIndex);
}
renderHandle(handleIndex, model, defaultHandleTopPos) {
var handleName = 'T' + (handleIndex+1);
var handleElem = this.placeholder.find(`.alert-handle-wrapper--${handleName}`);
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;
@@ -100,29 +102,48 @@ export class ThresholdControls {
handleTopPos = Math.min(Math.max(valueCanvasPos.top, 0), this.height) - 6;
}
if (handleElem.length === 0) {
handleElem = $(this.getFullHandleHtml(handleName, model.op, valueStr));
this.placeholder.append(handleElem);
this.setupDragging(handleElem, model, handleIndex);
} else {
handleElem.html(this.getHandleInnerHtml(handleName, model.op, valueStr));
}
var handleElem = $(this.getHandleHtml(handleIndex, model, valueStr));
this.placeholder.append(handleElem);
handleElem.toggleClass('alert-handle-wrapper--no-value', valueStr === '');
handleElem.css({top: handleTopPos});
}
prepare(elem) {
if (this.panelCtrl.editingThresholds) {
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 no thresholds or not editing alerts skip rendering handles
if (this.thresholds.length === 0 || !this.panelCtrl.editingThresholds) {
return;
}
this.height = plot.height();
if (this.thresholds.length > 0) {
this.renderHandle(0, this.thresholds[0], 10);
this.renderHandle(0, 10);
}
if (this.thresholds.length > 1) {
this.renderHandle(1, this.thresholds[1], this.height-30);
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;
}
}

10
public/sass/_variables.dark.scss
View File

@@ -90,12 +90,12 @@ $component-active-bg: $brand-primary !default;
// Panel
// -------------------------
$panel-bg: $dark-2;
$panel-border: solid 1px $dark-3;
$panel-border: solid 1px $dark-3;
$divider-border-color: #555;
$divider-border-color: #555;
// Graphite Target Editor
$tight-form-border: #050505;
$tight-form-border: #050505;
$tight-form-bg: $dark-3;
$tight-form-func-bg: #333;
@@ -152,6 +152,9 @@ $btn-link-color: $gray-3;
$iconContainerBackground: $black;
$btn-divider-left: $dark-5;
$btn-divider-right: $dark-1;
// Forms
// -------------------------
$input-bg: $dark-4;
@@ -185,7 +188,6 @@ $dropdownLinkColorActive: $white;
$dropdownLinkBackgroundActive: $dark-4;
$dropdownLinkBackgroundHover: $dark-4;
// COMPONENT VARIABLES
// --------------------------------------------------

5
public/sass/_variables.light.scss
View File

@@ -99,7 +99,7 @@ $component-active-bg: $brand-primary !default;
$panel-bg: $gray-7;
$panel-border: solid 1px $gray-6;
$divider-border-color: $gray-2;
$divider-border-color: $gray-2;
// Graphite Target Editor
$tight-form-border: $gray-4;
@@ -157,6 +157,9 @@ $btn-inverse-text-color: $dark-4;
$btn-link-color: $gray-1;
$btn-divider-left: $dark-5;
$btn-divider-right: $dark-1;
$iconContainerBackground: $white;
// Forms

76
public/sass/components/_panel_graph.scss
View File

@@ -323,25 +323,56 @@
z-index: 10;
position: relative;
float: right;
padding: 0.4rem 0.6rem 0.4rem 0.4rem;
background-color: $btn-inverse-bg;
box-shadow: $search-shadow;
cursor: row-resize;
box-shadow: $card-shadow;
background: $card-background;
cursor: move;
width: 100px;
font-size: $font-size-sm;
box-shadow: 4px 4px 3px 0px $body-bg;
border-radius: 4px;
border-width: 0 1px 1px 0;
border-style: solid;
border-color: $black;
text-align: left;
color: $text-muted;
&:hover {
background-color: $btn-inverse-bg-hl;
}
.icon-gf {
font-size: 17px;
font-size: 14px;
position: relative;
top: 0px;
float: left;
border-right: 1px solid $btn-divider-left;
padding: 0.5rem 0.3rem 0.4rem 0.4rem;
}
}
.alert-handle-value {
border-left: 1px solid $btn-divider-right;
padding: 0.5rem;
line-height: 2rem;
}
&--T1 {
right: -222px;
width: 245px;
.alert-handle-line {
width: 145px;
}
}
&--T0{
right: -105px;
width: 128px;
.alert-handle-line {
width: 28px;
}
}
&--no-value {
.alert-handle-line {
display: none;
}
}
@@ -351,31 +382,12 @@
margin-top: 13px;
z-index: 0;
position: relative;
}
&--T2 {
right: -222px;
width: 238px;
.alert-handle-line {
width: 138px;
background-color: $warn;
&--crit {
background-color: rgba(237, 46, 24, 0.60);
}
}
&--T1{
right: -105px;
width: 123px;
.alert-handle-line {
width: 23px;
background-color: $critical;
}
}
&--no-value {
.alert-handle-line {
display: none;
&--warn {
background-color: rgba(247, 149, 32, 0.60);
}
}
}