wip

pkg/api/alerting.go

@@ -29,12 +29,16 @@ func ValidateOrgAlert(c *middleware.Context) {
 func GetAlerts(c *middleware.Context) Response {
 	query := models.GetAlertsQuery{
 		OrgId:       c.OrgId,
-		State:       c.QueryStrings("state"),
 		DashboardId: c.QueryInt64("dashboardId"),
 		PanelId:     c.QueryInt64("panelId"),
 		Limit:       c.QueryInt64("limit"),
 	}
 
+	states := c.QueryStrings("state")
+	if len(states) > 0 {
+		query.State = states
+	}
+
 	if err := bus.Dispatch(&query); err != nil {
 		return ApiError(500, "List alerts failed", err)
 	}

public/app/plugins/panel/alertlist/editor.html

@@ -11,26 +11,22 @@
       <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">
+    <h5 class="section-heading">State filter</h5>
+    <gf-form-switch class="gf-form" label="Ok" label-class="width-10" checked="ctrl.stateFilter['ok']" on-change="ctrl.updateStateFilter()"></gf-form-switch>
+    <gf-form-switch class="gf-form" label="Paused" label-class="width-10" checked="ctrl.stateFilter['paused']" on-change="ctrl.updateStateFilter()"></gf-form-switch>
+    <gf-form-switch class="gf-form" label="No data" label-class="width-10" checked="ctrl.stateFilter['no_data']" on-change="ctrl.updateStateFilter()"></gf-form-switch>
+    <gf-form-switch class="gf-form" label="Execution error" label-class="width-10" checked="ctrl.stateFilter['execution_error']" on-change="ctrl.updateStateFilter()"></gf-form-switch>
+    <gf-form-switch class="gf-form" label="Alerting" label-class="width-10" checked="ctrl.stateFilter['alerting']" on-change="ctrl.updateStateFilter()"></gf-form-switch>
+  </div>
+
   <div class="section gf-form-group" ng-if="ctrl.panel.show == 'changes'">
-    <h5 class="section-heading">Search options</h5>
+    <!-- <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>
+    <!-- <h5 class="section-heading">Current state</h5> -->
   </div>
 </div>

public/app/plugins/panel/alertlist/module.ts

@@ -4,9 +4,11 @@ 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';
 
+import * as rangeUtil from 'app/core/utils/rangeutil';
+import * as dateMath from 'app/core/utils/datemath';
+
 class AlertListPanel extends PanelCtrl {
   static templateUrl = 'module.html';
 
@@ -15,25 +17,41 @@ class AlertListPanel extends PanelCtrl {
     {text: 'Recent statechanges', value: 'changes'}
   ];
 
-  alertStates = [ 'all', 'ok', 'alerting', 'paused', 'no_data', 'execution_error' ];
+  stateFilter: any = {};
-
   currentAlerts: any = [];
   alertHistory: any = [];
   // Set and populate defaults
   panelDefaults = {
     show: 'current',
     limit: 10,
-    stateFilter: 'all'
+    stateFilter: []
   };
 
   /** @ngInject */
-  constructor($scope, $injector, private $location, private backendSrv) {
+  constructor($scope, $injector, private $location, private backendSrv, private timeSrv, private templateSrv) {
     super($scope, $injector);
     _.defaults(this.panel, this.panelDefaults);
 
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
     this.events.on('render',  this.onRender.bind(this));
     this.events.on('refresh', this.onRender.bind(this));
+
+    for (let key in this.panel.stateFilter) {
+      this.stateFilter[this.panel.stateFilter[key]] = true;
+    }
+  }
+
+  updateStateFilter() {
+    var result = [];
+
+    for (let key in this.stateFilter) {
+      if (this.stateFilter[key]) {
+        result.push(key);
+      }
+    }
+
+    this.panel.stateFilter = result;
+    this.onRender();
   }
 
   onRender() {
@@ -50,22 +68,27 @@ class AlertListPanel extends PanelCtrl {
     var params: any = {
       limit: this.panel.limit,
       type: 'alert',
+      newState: this.panel.stateFilter
     };
 
-    if (this.panel.stateFilter !== "all") {
+    //date.unix();i
-      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();
+    this.panel.since = '12h';
-      params.from = dateMath.parseDateMath("1m", t.from, false);
+    if (this.panel.since) {
+      var range = this.timeSrv.timeRange();
+
+      //var timeShiftInterpolated = this.panel.since;
+      var timeShiftInterpolated = this.templateSrv.replace(this.panel.since, this.panel.scopedVars);
+      var timeShiftInfo = rangeUtil.describeTextRange(timeShiftInterpolated);
+      var timeShift = '-' + timeShiftInterpolated;
+      //params.from = dateMath.parseDateMath(timeShift, range.from, false).unix() * 1000;
+      params.from = dateMath.parseDateMath(timeShift, moment((new Date()).getTime()), true).unix() * 1000;
+      //params.to = dateMath.parseDateMath(timeShift, range.to, true).unix() * 1000;
+      params.to = (new Date()).getTime();
     }
-    */
+
+
+    console.log(params.from, params.to);
     this.backendSrv.get(`/api/annotations`, params)
       .then(res => {
         this.alertHistory = _.map(res, al => {
@@ -78,7 +101,11 @@ class AlertListPanel extends PanelCtrl {
   }
 
   getCurrentAlertState() {
-    this.backendSrv.get(`/api/alerts`)
+    var params: any = {
+      state: this.panel.stateFilter
+    };
+
+    this.backendSrv.get(`/api/alerts`, params)
       .then(res => {
         this.currentAlerts = _.map(res, al => {
           al.stateModel = alertDef.getStateDisplayModel(al.state);