Skip to content

N
nexpie-grafana-theme
Commit 48cbeb96 by Torkel Ödegaard
Options

feat(alerting): updated rule model and UI

parent fdf051ad
Showing with 91 additions and 68 deletions
public/app/plugins/panel/graph/alert_tab_ctrl.ts
...@@ -15,7 +15,6 @@ var alertQueryDef = new QueryPartDef({ ...@@ -15,7 +15,6 @@ var alertQueryDef = new QueryPartDef({
{name: "queryRefId", type: 'string', options: ['#A', '#B', '#C', '#D']}, {name: "queryRefId", type: 'string', options: ['#A', '#B', '#C', '#D']},
{name: "from", type: "string", options: ['1s', '10s', '1m', '5m', '10m', '15m', '1h']}, {name: "from", type: "string", options: ['1s', '10s', '1m', '5m', '10m', '15m', '1h']},
{name: "to", type: "string", options: ['now']}, {name: "to", type: "string", options: ['now']},
{name: "aggregation", type: "select", options: ['sum', 'avg', 'min', 'max', 'last']},
], ],
defaultParams: ['#A', '5m', 'now', 'avg'] defaultParams: ['#A', '5m', 'now', 'avg']
}); });
...@@ -25,46 +24,44 @@ export class AlertTabCtrl { ...@@ -25,46 +24,44 @@ export class AlertTabCtrl {
panelCtrl: any; panelCtrl: any;
alerting: any; alerting: any;
metricTargets = [{ refId: '- select query -' } ]; metricTargets = [{ refId: '- select query -' } ];
evalFuncs = [ transforms = [
{ {
text: 'Static Threshold', text: 'Aggregation',
value: 'static', type: 'aggregation',
}, },
{ {
text: 'Percent Change Compared To', text: 'Linear Forecast',
value: 'percent_change', type: 'forecast',
secondParam: "query",
}, },
{ {
text: 'Forcast', text: 'Percent Change',
value: 'forcast', type: 'percent_change',
secondParam: "duration", },
} {
text: 'Query diff',
type: 'query_diff',
},
]; ];
aggregators = ['avg', 'sum', 'min', 'max', 'median']; aggregators = ['avg', 'sum', 'min', 'max', 'last'];
rule: any; rule: any;
valueQuery: any; query: any;
evalQuery: any; queryParams: any;
secondParam: any; transformDef: any;
trasnformQuery: any;
defaultValues = { defaultValues = {
frequency: 10, frequency: 10,
warning: { op: '>', level: 10 }, warning: { op: '>', level: undefined },
critical: { op: '>', level: 20 }, critical: { op: '>', level: undefined },
function: 'static', query: {
valueQuery: { refId: 'A',
queryRefId: 'A',
from: '5m', from: '5m',
to: 'now', to: 'now',
agg: 'avg',
}, },
evalQuery: { transform: {
queryRefId: 'A', type: 'aggregation',
from: '5m', method: 'avg',
to: 'now',
agg: 'avg',
}, },
evalStringParam1: '',
}; };
/** @ngInject */ /** @ngInject */
...@@ -73,53 +70,77 @@ export class AlertTabCtrl { ...@@ -73,53 +70,77 @@ export class AlertTabCtrl {
this.panel = this.panelCtrl.panel; this.panel = this.panelCtrl.panel;
$scope.ctrl = this; $scope.ctrl = this;
_.defaults(this.panel.alerting, this.defaultValues); this.metricTargets = this.panel.targets.map(val => val);
this.rule = this.panel.alerting; this.rule = this.panel.alerting = this.panel.alerting || {};
this.valueQuery = new QueryPart(this.rule.valueQuery, alertQueryDef); // set defaults
this.evalQuery = new QueryPart(this.rule.evalQuery, alertQueryDef); _.defaults(this.rule, this.defaultValues);
var defaultName = (this.panelCtrl.dashboard.title + ' ' + this.panel.title + ' alert'); var defaultName = (this.panelCtrl.dashboard.title + ' ' + this.panel.title + ' alert');
this.panel.alerting.name = this.panel.alerting.name || defaultName; this.rule.name = this.rule.name || defaultName;
this.panel.alerting.description = this.panel.alerting.description || defaultName; this.rule.description = this.rule.description || defaultName;
this.rule.queryRef = this.panel.alerting.queryRef || this.metricTargets[0].refId;
this.panel.targets.map(target => {
this.metricTargets.push(target); // great temp working model
}); this.queryParams = {
params: [
this.panel.alerting.queryRef = this.panel.alerting.queryRef || this.metricTargets[0].refId; this.rule.query.refId,
this.rule.query.from,
this.rule.query.to
]
};
// init the query part components model
this.query = new QueryPart(this.queryParams, alertQueryDef);
this.convertThresholdsToAlertThresholds(); this.convertThresholdsToAlertThresholds();
this.evalFuncChanged(); this.transformDef = _.findWhere(this.transforms, {type: this.rule.transform.type});
}
queryUpdated() {
this.rule.query = {
refId: this.query.params[0],
from: this.query.params[1],
to: this.query.params[2],
};
} }
evalFuncChanged() { transformChanged() {
var evalFuncDef = _.findWhere(this.evalFuncs, { value: this.rule.evalFunc }); // clear model
console.log(evalFuncDef); this.rule.transform = {type: this.rule.transform.type};
this.secondParam = evalFuncDef.secondParam; this.transformDef = _.findWhere(this.transforms, {type: this.rule.transform.type});
switch (this.rule.transform.type) {
case 'aggregation': {
this.rule.transform.method = 'avg';
break;
}
case "forecast": {
this.rule.transform.timespan = '7d';
break;
}
}
} }
convertThresholdsToAlertThresholds() { convertThresholdsToAlertThresholds() {
if (this.panel.grid if (this.panel.grid
&& this.panel.grid.threshold1 && this.panel.grid.threshold1
&& this.panel.alerting.warnLevel === undefined && this.rule.warnLevel === undefined
) { ) {
this.panel.alerting.warnOperator = '>'; this.rule.warning.op = '>';
this.panel.alerting.warnLevel = this.panel.grid.threshold1; this.rule.warning.level = this.panel.grid.threshold1;
} }
if (this.panel.grid if (this.panel.grid
&& this.panel.grid.threshold2 && this.panel.grid.threshold2
&& this.panel.alerting.critLevel === undefined && this.rule.critical.level === undefined
) { ) {
this.panel.alerting.critOperator = '>'; this.rule.critical.op = '>';
this.panel.alerting.critLevel = this.panel.grid.threshold2; this.rule.critical.level = this.panel.grid.threshold2;
} }
} }
markAsDeleted() { markAsDeleted() {
if (this.panel.alerting) { this.panel.alerting = this.defaultValues;
this.panel.alerting = this.defaultValues;
}
} }
thresholdsUpdated() { thresholdsUpdated() {
......
public/app/plugins/panel/graph/partials/tab_alerting.html
...@@ -6,32 +6,34 @@ ...@@ -6,32 +6,34 @@
<query-part-editor <query-part-editor
class="gf-form-label query-part" class="gf-form-label query-part"
part="ctrl.valueQuery" part="ctrl.query"
part-updated="ctrl.valueQueryUpdated()"> part-updated="ctrl.queryUpdated()">
</query-part-editor> </query-part-editor>
</div> </div>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label">Evaluate Against</span> <span class="gf-form-label">Transform using</span>
<div class="gf-form-select-wrapper"> <div class="gf-form-select-wrapper">
<select class="gf-form-input" <select class="gf-form-input"
ng-model="ctrl.rule.evalFunc" ng-model="ctrl.rule.transform.type"
ng-options="f.value as f.text for f in ctrl.evalFuncs" ng-options="f.type as f.text for f in ctrl.transforms"
ng-change="ctrl.evalFuncChanged()" ng-change="ctrl.transformChanged()"
> >
</select> </select>
</div> </div>
</div> </div>
<div class="gf-form" ng-if="ctrl.secondParam === 'query'"> <div class="gf-form" ng-if="ctrl.transformDef.type === 'aggregation'">
<query-part-editor <span class="gf-form-label">Method</span>
class="gf-form-label query-part" <div class="gf-form-select-wrapper">
part="ctrl.evalQuery" <select class="gf-form-input"
part-updated="ctrl.evalQueryUpdated()"> ng-model="ctrl.rule.transform.method"
</query-part-editor> ng-options="f for f in ctrl.aggregators">
</select>
</div>
</div> </div>
<div class="gf-form" ng-if="ctrl.secondParam === 'duration'"> <div class="gf-form" ng-if="ctrl.transformDef.type === 'forecast'">
<span class="gf-form-label">Duration</span> <span class="gf-form-label">Timespan</span>
<input class="gf-form-input max-width-7" type="text" ng-model="ctrl.rule.evalStringParam1" ng-change="ctrl.ruleUpdated()"></input> <input class="gf-form-input max-width-7" type="text" ng-model="ctrl.rule.transform.timespan" ng-change="ctrl.ruleUpdated()"></input>
</div> </div>
</div> </div>
</div> </div>
......
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