Skip to content

N
nexpie-grafana-theme
Commit 89ca15f3 by Torkel Ödegaard
Options

feat(thresholds): lots of progress on thresholds

parent 72a67b39
Showing with 130 additions and 99 deletions
public/app/features/alerting/alert_tab_ctrl.ts
......@@ -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() {
......
public/app/features/alerting/partials/alert_tab.html
......@@ -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">
......
public/app/plugins/panel/graph/graph.js
......@@ -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;
......
public/app/plugins/panel/graph/module.ts
......@@ -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) {
......
public/app/plugins/panel/graph/thresholds.ts
......@@ -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 {
});
}
initDragging(evt) {
var handleIndex = $(evt.currentTarget).data("handleIndex");
console.log('alert handle index', handleIndex);
}
cleanUp() {
if (this.placeholder) {
this.placeholder.find(".alert-handle-wrapper").remove();
}
this.placeholder.find(".alert-handle-wrapper").remove();
this.needsCleanup = false;
}
renderHandle(handleIndex, model, defaultHandleTopPos) {
var handleName = 'T' + (handleIndex+1);
var handleElem = this.placeholder.find(`.alert-handle-wrapper--${handleName}`);
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;
}
}
public/sass/_variables.dark.scss
......@@ -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
// --------------------------------------------------
......
public/sass/_variables.light.scss
......@@ -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
......
public/sass/components/_panel_graph.scss
......@@ -323,53 +323,50 @@
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-line {
float: left;
height: 2px;
margin-top: 13px;
z-index: 0;
position: relative;
.alert-handle-value {
border-left: 1px solid $btn-divider-right;
padding: 0.5rem;
line-height: 2rem;
}
&--T2 {
&--T1 {
right: -222px;
width: 238px;
width: 245px;
.alert-handle-line {
width: 138px;
background-color: $warn;
width: 145px;
}
}
&--T1{
&--T0{
right: -105px;
width: 123px;
width: 128px;
.alert-handle-line {
width: 23px;
background-color: $critical;
width: 28px;
}
}
......@@ -378,4 +375,19 @@
display: none;
}
}
.alert-handle-line {
float: left;
height: 2px;
margin-top: 13px;
z-index: 0;
position: relative;
&--crit {
background-color: rgba(237, 46, 24, 0.60);
}
&--warn {
background-color: rgba(247, 149, 32, 0.60);
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment