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(alerting): start on new ui

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-06-09 10:13:34 +02:00
parent a66027830b
commit 071c16b73c
4 changed files with 202 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.floo
View File

@ -1,4 +1,3 @@
{ {
"url": "https://floobits.com/raintank/grafana" "url": "https://floobits.com/raintank/grafana"
} }

145
alerting_model.json Normal file
View File

@ -0,0 +1,145 @@
{
"alert": {
"name": "Majority servers down",
"frequency": 60,
"notify": ["group1", "group2"],
"expressions": [
{
"left": [
{
"type": "query",
"refId": "A",
"timeRange": {"from": "5m", "to": "now-1m"},
},
{
"type": "function",
"name": "max"
}
],
"operator": ">",
"right": [
{
"type": "constant",
"value": 100
}
],
"level": 2,
}
]
},
"alert": {
"name": "Majority servers down take2",
"frequency": 60,
"notify": ["group1", "group2"],
"expressions": [
{
"left": [
{
"type": "query",
"refId": "A",
"timeRange": {"from": "5m", "to": "now-1m"},
},
{
"type": "function",
"name": "max"
}
],
"operator": ">",
"right": [
{
"type": "query",
"refId": "A",
"timeRange": {"from": "now-1d-5m", "to": "now-1d"},
},
{
"type": "function",
"name": "max"
}
],
"level": 2,
}
]
},
"alert": {
"name": "CPU usage last 5min above 90%",
"frequency": 60,
"expressions": [
{
"expr": "query(#A, 5m, now, avg)",
"operator": ">",
"critLevel": 90,
}
]
},
"alert": {
"name": "Series count above 10",
"frequency": "1m",
"expressions": [
{
"expr": "query(#A, 5m, now, avg) | countSeries()",
"operator": ">",
"critLevel": 10,
}
]
},
"alert": {
"name": "Disk Free Zero in 3 days",
"frequency": "1d",
"expressions": [
{
"expr": "query(#A, 1d, now, trend(3d))",
"operator": ">",
"critLevel": 0,
}
]
},
"alert": {
"name": "Server requests is zero for more than 10min",
"frequency": "1d",
"expressions": [
{
"expr": "query(#A, 10m, now, sum)",
"operator": "=",
"critLevel": 0,
}
]
},
"alert": {
"name": "Timeouts should not be more than 0.1% of requests",
"frequency": "1d",
"expressions": [
{
"expr": "query(#A, 10m, now, sum) | subtract | query(#B, 10m, now, sum)",
"operator": ">",
"critLevel": 0,
}
]
},
"alert": {
"name": "CPU usage last 5min changed by more than 20% compared to last 24hours",
"frequency": "1m",
"value": "query(#A, 5m, now, avg)",
"operator": "percent change",
"threshold": "query(#A, 1d, now, avg)",
},
"alert": {
"name": "CPU higher than 90%",
"frequency": "1m",
"valueExpr": "query(#A, 5m, now, avg)",
"evalType": "greater than",
"critLevel": 20,
"warnLevel": 10,
},
"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",
"evalExpr": "query(#A, 1d, now, avg)",
"critLevel": 20,
"warnLevel": 10,
},
}

13
public/app/plugins/panel/graph/alert_tab_ctrl.ts
View File

@ -9,8 +9,9 @@ export class AlertTabCtrl {
panelCtrl: any; panelCtrl: any;
alerting: any; alerting: any;
metricTargets = [{ refId: '- select query -' } ]; metricTargets = [{ refId: '- select query -' } ];
operators = ['>', '<', '<=', '>=']; evalFuncs = ['Greater Then', 'Percent Change'];
aggregators = ['avg', 'sum', 'min', 'max', 'median']; aggregators = ['avg', 'sum', 'min', 'max', 'median'];
rule: any;
defaultValues = { defaultValues = {
aggregator: 'avg', aggregator: 'avg',
@ -18,16 +19,22 @@ export class AlertTabCtrl {
queryRange: 3600, queryRange: 3600,
warnOperator: '>', warnOperator: '>',
critOperator: '>', critOperator: '>',
queryRef: '- select query -' queryRef: '- select query -',
valueExpr: 'query(#A, 5m, now, avg)',
evalFunc: 'Greater Then',
evalExpr: '',
critLevel: 20,
warnLevel: 10,
}; };
/** @ngInject */ /** @ngInject */
constructor($scope, private $timeout) { constructor($scope, private $timeout) {
$scope.alertTab = this; //HACK ATTACK!
this.panelCtrl = $scope.ctrl; this.panelCtrl = $scope.ctrl;
this.panel = this.panelCtrl.panel; this.panel = this.panelCtrl.panel;
$scope.ctrl = this;
_.defaults(this.panel.alerting, this.defaultValues); _.defaults(this.panel.alerting, this.defaultValues);
this.rule = this.panel.alerting;
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.panel.alerting.name = this.panel.alerting.name || defaultName;

96
public/app/plugins/panel/graph/partials/tab_alerting.html
View File

@ -1,61 +1,55 @@
<div class="editor-row"> <div class="editor-row">
<div class="gf-form-group section" > <div class="gf-form-group section" >
<h5 class="section-heading">Query</h5> <h5 class="section-heading">Alert Rule</h5>
<div class="gf-form" style="margin-bottom: 2rem"> <div class="gf-form-inline">
<span class="gf-form-label width-9">Query to watch</span> <div class="gf-form">
<div class="gf-form-select-wrapper max-width-12"> <span class="gf-form-label">Value</span>
<select class="gf-form-input" <input class="gf-form-input width-15" type="text" ng-model="ctrl.rule.valueExpr" ng-change="ctrl.thresholdsUpdated()"></input>
ng-model="ctrl.panel.alerting.queryRef"
ng-options="target.refId as target.refId for target in alertTab.metricTargets"></select>
</div> </div>
</div> <div class="gf-form">
<div class="gf-form-select-wrapper max-width-10">
<h5 class="section-heading">Thresholds</h5> <select class="gf-form-input" ng-model="ctrl.rule.evalFunc" ng-options="oper as oper for oper in ctrl.evalFuncs"></select>
<div class="gf-form"> </div>
<span class="gf-form-label width-9">
<i class="icon-gf icon-gf-warn alert-icon-warn"></i>
Warn level
</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input" ng-model="ctrl.panel.alerting.warnOperator" ng-options="oper as oper for oper in alertTab.operators"></select>
</div> </div>
<input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input> <div class="gf-form">
</div> <span class="gf-form-label">
<div class="gf-form"> <i class="icon-gf icon-gf-warn alert-icon-warn"></i>
<span class="gf-form-label width-9"> Warn
<i class="icon-gf icon-gf-critical alert-icon-critical"></i> </span>
Critical level <input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
</span> </div>
<div class="gf-form-select-wrapper max-width-10"> <div class="gf-form">
<select class="gf-form-input" ng-model="ctrl.panel.alerting.critOperator" ng-options="oper as oper for oper in alertTab.operators"></select> <span class="gf-form-label">
<i class="icon-gf icon-gf-warn alert-icon-critical"></i>
Critcal
</span>
<input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.warnLevel" ng-change="alertTab.thresholdsUpdated()"></input>
</div> </div>
<input class="gf-form-input max-width-7" type="number" ng-model="ctrl.panel.alerting.critLevel" ng-change="alertTab.thresholdsUpdated()"></input>
</div>
</div>
<div class="gf-form-group section">
<h5 class="section-heading">Aggregation settings</h5>
<div class="gf-form">
<span class="gf-form-label width-12">Aggregation method</span>
<div class="gf-form-select-wrapper max-width-10">
<select class="gf-form-input"
ng-model="ctrl.panel.alerting.aggregator"
ng-options="oper as oper for oper in alertTab.aggregators"></select>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-12">Query range (seconds)</span>
<input class="gf-form-input max-width-10" type="number"
ng-model="ctrl.panel.alerting.queryRange" placeholder="3600"></input>
</div>
<div class="gf-form">
<span class="gf-form-label width-12">Frequency (seconds)</span>
<input class="gf-form-input max-width-10" type="number"
ng-model="ctrl.panel.alerting.frequency" placeholder="60"></input>
</div> </div>
</div> </div>
</div>
<!-- <div class="gf&#45;form"> -->
<!-- <span class="gf&#45;form&#45;label width&#45;12">Aggregation method</span> -->
<!-- <div class="gf&#45;form&#45;select&#45;wrapper max&#45;width&#45;10"> -->
<!-- <select class="gf&#45;form&#45;input" -->
<!-- ng&#45;model="ctrl.panel.alerting.aggregator" -->
<!-- ng&#45;options="oper as oper for oper in alertTab.aggregators"></select> -->
<!-- </div> -->
<!-- </div> -->
<!-- -->
<!-- <div class="gf&#45;form"> -->
<!-- <span class="gf&#45;form&#45;label width&#45;12">Query range (seconds)</span> -->
<!-- <input class="gf&#45;form&#45;input max&#45;width&#45;10" type="number" -->
<!-- ng&#45;model="ctrl.panel.alerting.queryRange" placeholder="3600"></input> -->
<!-- </div> -->
<!-- -->
<!-- <div class="gf&#45;form"> -->
<!-- <span class="gf&#45;form&#45;label width&#45;12">Frequency (seconds)</span> -->
<!-- <input class="gf&#45;form&#45;input max&#45;width&#45;10" type="number" -->
<!-- ng&#45;model="ctrl.panel.alerting.frequency" placeholder="60"></input> -->
<!-- </div> -->
<!-- </div> -->
<div>
<div class="gf-form-group section"> <div class="gf-form-group section">
<h5 class="section-heading">Alert info</h5> <h5 class="section-heading">Alert info</h5>
<div class="gf-form"> <div class="gf-form">