mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(alerting): mocking with new alert rule model
This commit is contained in:
parent
c85bb47675
commit
55af988e02
@ -136,10 +136,32 @@
|
||||
"alert": {
|
||||
"name": "CPU usage last 5min changed by more than 20% compared to last 24hours",
|
||||
"frequency": "1m",
|
||||
"valueExpr": "query(#A, 5m, now, avg)",
|
||||
"evalType": "percent change",
|
||||
"expr": "query(#A, 5m, now, avg) percentGreaterThan()",
|
||||
"evalType": "percentscre change",
|
||||
"evalExpr": "query(#A, 1d, now, avg)",
|
||||
"critLevel": 20,
|
||||
"warnLevel": 10,
|
||||
"warnLevel": 10,
|
||||
},
|
||||
"alert": {
|
||||
"name": "CPU usage last 5min changed by more than 20% compared to last 24hours",
|
||||
"frequency": "1m",
|
||||
"valueQuery": "query(#A, 5m, now, avg) ",
|
||||
"evalType": "simple", "// other options are: percent change, trend"
|
||||
"evalQuery": "query(#A, 1d, now, avg)",
|
||||
"comparison": "greater than",
|
||||
"critLevel": 20,
|
||||
"warnLevel": 10,
|
||||
},
|
||||
"alert": {
|
||||
"name": "CPU usage last 5min changed by more than 20% compared to last 24hours",
|
||||
"frequency": "1m",
|
||||
"valueQuery": "query(#A, 5m, now, avg) | Evaluate Against: Static Threshold | >200 Warn | >300 Critical",
|
||||
"valueQuery": "query(#A, 5m, now, avg) | Evaluate Against: Percent Change Compared To | query(#B, 5m, now, avg) | >200 Warn | >300 Critical",
|
||||
"valueQuery": "query(#A, 5m, now, trend) | Evaluate Against: Forcast | 7days | >200 Warn | >300 Critical",
|
||||
"evalType": "simple", "// other options are: percent change, trend"
|
||||
"evalQuery": "query(#A, 1d, now, avg)",
|
||||
"comparison": "greater than",
|
||||
"critLevel": 20,
|
||||
"warnLevel": 10,
|
||||
},
|
||||
}
|
||||
|
@ -1,30 +1,72 @@
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import _ from 'lodash';
|
||||
import $ from 'jquery';
|
||||
import angular from 'angular';
|
||||
|
||||
import {
|
||||
QueryPartDef,
|
||||
QueryPart,
|
||||
} from 'app/core/components/query_part/query_part';
|
||||
|
||||
var alertQueryDef = new QueryPartDef({
|
||||
type: 'query',
|
||||
params: [
|
||||
{name: "queryRefId", type: 'string', options: ['#A', '#B', '#C', '#D']},
|
||||
{name: "from", type: "string", options: ['1s', '10s', '1m', '5m', '10m', '15m', '1h']},
|
||||
{name: "to", type: "string", options: ['now']},
|
||||
{name: "aggregation", type: "select", options: ['sum', 'avg', 'min', 'max', 'last']},
|
||||
],
|
||||
defaultParams: ['#A', '5m', 'now', 'avg']
|
||||
});
|
||||
|
||||
export class AlertTabCtrl {
|
||||
panel: any;
|
||||
panelCtrl: any;
|
||||
alerting: any;
|
||||
metricTargets = [{ refId: '- select query -' } ];
|
||||
evalFuncs = ['Greater Then', 'Percent Change'];
|
||||
evalFuncs = [
|
||||
{
|
||||
text: 'Static Threshold',
|
||||
value: 'static',
|
||||
},
|
||||
{
|
||||
text: 'Percent Change Compared To',
|
||||
value: 'percent_change',
|
||||
secondParam: "query",
|
||||
},
|
||||
{
|
||||
text: 'Forcast',
|
||||
value: 'forcast',
|
||||
secondParam: "duration",
|
||||
}
|
||||
];
|
||||
aggregators = ['avg', 'sum', 'min', 'max', 'median'];
|
||||
rule: any;
|
||||
valueQuery: any;
|
||||
evalQuery: any;
|
||||
secondParam: any;
|
||||
|
||||
defaultValues = {
|
||||
aggregator: 'avg',
|
||||
frequency: 10,
|
||||
queryRange: 3600,
|
||||
warnOperator: '>',
|
||||
critOperator: '>',
|
||||
queryRef: '- select query -',
|
||||
valueExpr: 'query(#A, 5m, now, avg)',
|
||||
evalFunc: 'Greater Then',
|
||||
evalExpr: '',
|
||||
evalFunc: 'static',
|
||||
critLevel: 20,
|
||||
warnLevel: 10,
|
||||
valueQuery: {
|
||||
queryRefId: 'A',
|
||||
from: '5m',
|
||||
to: 'now',
|
||||
agg: 'avg',
|
||||
},
|
||||
evalQuery: {
|
||||
queryRefId: 'A',
|
||||
from: '5m',
|
||||
to: 'now',
|
||||
agg: 'avg',
|
||||
},
|
||||
evalStringParam1: '',
|
||||
};
|
||||
|
||||
/** @ngInject */
|
||||
@ -36,15 +78,24 @@ export class AlertTabCtrl {
|
||||
_.defaults(this.panel.alerting, this.defaultValues);
|
||||
this.rule = this.panel.alerting;
|
||||
|
||||
this.valueQuery = new QueryPart(this.rule.valueQuery, alertQueryDef);
|
||||
this.evalQuery = new QueryPart(this.rule.evalQuery, alertQueryDef);
|
||||
|
||||
var defaultName = (this.panelCtrl.dashboard.title + ' ' + this.panel.title + ' alert');
|
||||
this.panel.alerting.name = this.panel.alerting.name || defaultName;
|
||||
|
||||
this.panel.targets.map(target => {
|
||||
this.metricTargets.push(target);
|
||||
});
|
||||
this.panel.alerting.queryRef = this.panel.alerting.queryRef || this.metricTargets[0].refId;
|
||||
|
||||
this.panel.alerting.queryRef = this.panel.alerting.queryRef || this.metricTargets[0].refId;
|
||||
this.convertThresholdsToAlertThresholds();
|
||||
this.evalFuncChanged();
|
||||
}
|
||||
|
||||
evalFuncChanged() {
|
||||
var evalFuncDef = _.findWhere(this.evalFuncs, {value: this.rule.evalFunc});
|
||||
this.secondParam = evalFuncDef.secondParam;
|
||||
}
|
||||
|
||||
convertThresholdsToAlertThresholds() {
|
||||
|
@ -1,33 +1,67 @@
|
||||
<div class="editor-row">
|
||||
<div class="gf-form-group section" >
|
||||
|
||||
<div class="gf-form-group" >
|
||||
<h5 class="section-heading">Alert Rule</h5>
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label">Value</span>
|
||||
<input class="gf-form-input width-15" type="text" ng-model="ctrl.rule.valueExpr" ng-change="ctrl.thresholdsUpdated()"></input>
|
||||
|
||||
<query-part-editor
|
||||
class="gf-form-label query-part"
|
||||
part="ctrl.valueQuery"
|
||||
part-updated="ctrl.valueQueryUpdated()">
|
||||
</query-part-editor>
|
||||
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<div class="gf-form-select-wrapper max-width-10">
|
||||
<select class="gf-form-input" ng-model="ctrl.rule.evalFunc" ng-options="oper as oper for oper in ctrl.evalFuncs"></select>
|
||||
<span class="gf-form-label">Evaluate Against</span>
|
||||
<div class="gf-form-select-wrapper">
|
||||
<select class="gf-form-input"
|
||||
ng-model="ctrl.rule.evalFunc"
|
||||
ng-options="f.value as f.text for f in ctrl.evalFuncs"
|
||||
ng-change="ctrl.evalFuncChanged()"
|
||||
>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gf-form" ng-if="ctrl.secondParam === 'query'">
|
||||
<query-part-editor
|
||||
class="gf-form-label query-part"
|
||||
part="ctrl.evalQuery"
|
||||
part-updated="ctrl.evalQueryUpdated()">
|
||||
</query-part-editor>
|
||||
</div>
|
||||
<div class="gf-form" ng-if="ctrl.secondParam === 'duration'">
|
||||
<span class="gf-form-label">Duration</span>
|
||||
<input class="gf-form-input max-width-7" type="text" ng-model="ctrl.rule.evalStringParam1" ng-change="ctrl.ruleUpdated()"></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form-group" >
|
||||
<h5 class="section-heading">Levels</h5>
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label">
|
||||
<i class="icon-gf icon-gf-warn alert-icon-warn"></i>
|
||||
Warn
|
||||
Warn if value
|
||||
</span>
|
||||
<input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
|
||||
<span class="gf-form-label">
|
||||
>
|
||||
</span>
|
||||
<input class="gf-form-input max-width-7" type="number" ng-model="ctrl.rule.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
|
||||
</div>
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label">
|
||||
<i class="icon-gf icon-gf-warn alert-icon-critical"></i>
|
||||
Critcal
|
||||
Critcal if value
|
||||
</span>
|
||||
<input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
|
||||
<span class="gf-form-label">
|
||||
>
|
||||
</span>
|
||||
<input class="gf-form-input max-width-7" type="number" ng-model="ctrl.rule.critLevel" ng-change="alertTab.thresholdsUpdated()"></input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="gf-form"> -->
|
||||
<!-- <span class="gf-form-label width-12">Aggregation method</span> -->
|
||||
<!-- <div class="gf-form-select-wrapper max-width-10"> -->
|
||||
|
Loading…
Reference in New Issue
Block a user