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(alertlistpanel): support state filter

Browse Source 
ref #5981
This commit is contained in:
bergquist
2016-09-14 08:36:44 +02:00
parent b49a642ca5
commit d0f9623037
10 changed files with 81 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/app/plugins/panel/alertlist/editor.html
View File

@@ -4,9 +4,33 @@
<div class="gf-form">
<span class="gf-form-label width-8">Show</span>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="ctrl.panel.show" ng-options="f.value as f.text for f in ctrl.showOptions" ng-change="ctrl.onRender()"></select>
<select class="gf-form-input" ng-model="ctrl.panel.show" ng-options="f.value as f.text for f in ctrl.showOptions" ng-change="ctrl.onRender()"></select>
</div>
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Max items</span>
<input type="text" class="gf-form-input max-width-15" ng-model="ctrl.panel.limit" />
</div>
<div class="gf-form">
<span class="gf-form-label width-8">With state</span>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="ctrl.panel.stateFilter" ng-options="f as f for f in ctrl.alertStates" ng-change="ctrl.onRender()"></select>
</div>
</div>
</div>
<div class="section gf-form-group" ng-if="ctrl.panel.show == 'changes'">
<h5 class="section-heading">Search options</h5>
<div class="gf-form">
<span class="gf-form-label width-8">Timerange from</span>
<input type="text" placeholder="6h" class="gf-form-input max-width-4" ng-model="ctrl.panel.since" />
</div>
<div class="gf-form">
<gf-form-switch class="gf-form" label="Setting" label-class="width-8" checked="ctrl.panel.setting" on-change="ctrl.render()"></gf-form-switch>
</div>
</div>
<div class="section gf-form-group" ng-if="ctrl.panel.show == 'current'">
<h5 class="section-heading">Current state</h5>
</div>
</div>

22
public/app/plugins/panel/alertlist/module.html
View File

@@ -1,19 +1,11 @@
<div class="panel-alert-list">
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
<ol class="card-list" >
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
<div class="card-item card-item--alert">
<div class="card-item-header">
<div class="card-item-type">
<a class="card-item-cog" href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert" bs-tooltip="'Edit alert rule'">
<i class="icon-gf icon-gf-settings"></i>
</a>
</div>
</div>
<div class="card-item-body">
<div class="card-item-details">
<div class="card-item-name">
<div class="card-item-notice">
<a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
{{alert.name}}
</a>
@@ -34,22 +26,22 @@
</ol>
</section>
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'">
<ol class="card-list" >
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="al in ctrl.alertHistory">
<div class="card-item card-item--alert">
<div class="card-item-header">
<div class="card-item-sub-name">{{al.time}}</div>
</div>
<div class="card-item-body">
<div class="card-item-details">
<div class="card-item-notice">{{al.title}}</div>
<div class="card-item-sub-name">
<span class="alert-list-item-state {{al.stateModel.stateClass}}">
<i class="{{al.stateModel.iconClass}}"></i>
{{al.stateModel.text}}
</span> {{al.metrics}}
</div>
<div class="card-item-sub-name">
{{al.time}}
</div>
</div>
</div>
</div>

36
public/app/plugins/panel/alertlist/module.ts
View File

@@ -4,6 +4,7 @@ import _ from 'lodash';
import moment from 'moment';
import alertDef from '../../../features/alerting/alert_def';
import config from 'app/core/config';
//import * as dateMath from 'app/core/utils/datemath';
import {PanelCtrl} from 'app/plugins/sdk';
class AlertListPanel extends PanelCtrl {
@@ -11,14 +12,18 @@ class AlertListPanel extends PanelCtrl {
showOptions = [
{text: 'Current state', value: 'current'},
{text: 'State changes', value: 'changes'},
{text: 'Recent statechanges', value: 'changes'}
];
alertStates = [ 'all', 'ok', 'alerting', 'paused', 'no_data', 'execution_error' ];
currentAlerts: any = [];
alertHistory: any = [];
// Set and populate defaults
panelDefaults = {
show: 'current'
show: 'current',
limit: 10,
stateFilter: 'all'
};
/** @ngInject */
@@ -37,15 +42,34 @@ class AlertListPanel extends PanelCtrl {
}
if (this.panel.show === 'changes') {
this.getAlertHistory();
this.getStateChanges();
}
}
getAlertHistory() {
this.backendSrv.get(`/api/alert-history?dashboardId=32&panelId=1`)
getStateChanges() {
var params: any = {
limit: this.panel.limit,
type: 'alert',
};
if (this.panel.stateFilter !== "all") {
params.newState = this.panel.stateFilter;
}
/*
var since = this.panel.since;
if (since !== undefined && since !== "" && since !== null) {
var t = this.dashboard.time;
var now = (new Date()).getTime();
params.to = t.to;
//this.range = this.timeSrv.timeRange();
params.from = dateMath.parseDateMath("1m", t.from, false);
}
*/
this.backendSrv.get(`/api/annotations`, params)
.then(res => {
this.alertHistory = _.map(res, al => {
al.time = moment(al.timestamp).format('MMM D, YYYY HH:mm:ss');
al.time = moment(al.time).format('MMM D, YYYY HH:mm:ss');
al.stateModel = alertDef.getStateDisplayModel(al.newState);
al.metrics = alertDef.joinEvalMatches(al.data, ', ');
return al;