Skip to content

N
nexpie-grafana-theme
Commit f18de7e6 by Torkel Ödegaard
Options

Merge branch 'alertList-no-alerts'

parents 72783785 cd95f5bc
Showing with 59 additions and 55 deletions
public/app/plugins/panel/alertlist/editor.html
......@@ -4,22 +4,22 @@
<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.onRefresh()"></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" ng-change="ctrl.onRender()" />
<input type="text" class="gf-form-input max-width-15" ng-model="ctrl.panel.limit" ng-change="ctrl.onRefresh()" />
</div>
<div class="gf-form" ng-show="ctrl.panel.show === 'current'">
<span class="gf-form-label width-8">Sort order</span>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="ctrl.panel.sortOrder" ng-options="f.value as f.text for f in ctrl.sortOrderOptions" ng-change="ctrl.onRender()"></select>
<select class="gf-form-input" ng-model="ctrl.panel.sortOrder" ng-options="f.value as f.text for f in ctrl.sortOrderOptions" ng-change="ctrl.onRefresh()"></select>
</div>
</div>
<gf-form-switch class="gf-form" label="Alerts from this dashboard" label-class="width-18" checked="ctrl.panel.onlyAlertsOnDashboard" on-change="ctrl.updateStateFilter()"></gf-form-switch>
</div>
<div class="section gf-form-group">
<div class="section gf-form-group" ng-show="ctrl.panel.show === 'current'">
<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>
......
public/app/plugins/panel/alertlist/module.html
<div class="panel-alert-list" style="{{ctrl.contentHeight}}">
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
<ol class="card-list">
<li class="card-item-wrapper" ng-show="!ctrl.currentAlerts.length">
<div class="alert-list card-item card-item--alert">
<div class="alert-list-body">
<div class="alert-list-main">
<p class="alert-list-title">
No alerts in selected interval
</p>
</div>
</div>
</div>
</li>
<div class="panel-alert-list" ng-style="{height: ctrl.height + 'px'}">
<div class="panel-alert-list__no-alerts" ng-show="ctrl.noAlertsMessage">
{{ctrl.noAlertsMessage}}
</div>
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
<div class="alert-list card-item card-item--alert">
<div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}">
<i class="{{alert.stateModel.iconClass}}"></i>
</div>
<div class="alert-list-main">
<p class="alert-list-title">
<a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
{{alert.name}}
</a>
</p>
<p class="alert-list-text">
<span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
for {{alert.newStateDateAgo}}
</p>
</div>
</div>
</div>
</li>
</ol>
</section>
<div class="alert-list card-item card-item--alert">
<div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}">
<i class="{{alert.stateModel.iconClass}}"></i>
</div>
<div class="alert-list-main">
<p class="alert-list-title">
<a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
{{alert.name}}
</a>
</p>
<p class="alert-list-text">
<span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
for {{alert.newStateDateAgo}}
</p>
</div>
</div>
</div>
</li>
</ol>
</section>
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'">
<ol class ="card-list">
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'">
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="al in ctrl.alertHistory">
<div class="alert-list card-item card-item--alert">
<div class="alert-list-body">
......@@ -53,7 +46,9 @@
</div>
<div class="alert-list-footer">
<span class="alert-list-text">{{al.time}}</span>
<span class="alert-list-text"><!--Img Link--></span>
<span class="alert-list-text">
<!--Img Link-->
</span>
</div>
</div>
</li>
......
public/app/plugins/panel/alertlist/module.ts
......@@ -3,7 +3,7 @@
import _ from 'lodash';
import moment from 'moment';
import alertDef from '../../../features/alerting/alert_def';
import {PanelCtrl} from 'app/plugins/sdk';
import { PanelCtrl } from 'app/plugins/sdk';
import * as dateMath from 'app/core/utils/datemath';
......@@ -11,20 +11,20 @@ class AlertListPanel extends PanelCtrl {
static templateUrl = 'module.html';
showOptions = [
{text: 'Current state', value: 'current'},
{text: 'Recent state changes', value: 'changes'}
{ text: 'Current state', value: 'current' },
{ text: 'Recent state changes', value: 'changes' }
];
sortOrderOptions = [
{text: 'Alphabetical (asc)', value: 1},
{text: 'Alphabetical (desc)', value: 2},
{text: 'Importance', value: 3},
{ text: 'Alphabetical (asc)', value: 1 },
{ text: 'Alphabetical (desc)', value: 2 },
{ text: 'Importance', value: 3 },
];
contentHeight: string;
stateFilter: any = {};
currentAlerts: any = [];
alertHistory: any = [];
noAlertsMessage: string;
// Set and populate defaults
panelDefaults = {
show: 'current',
......@@ -40,8 +40,7 @@ class AlertListPanel extends PanelCtrl {
_.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));
this.events.on('refresh', this.onRefresh.bind(this));
for (let key in this.panel.stateFilter) {
this.stateFilter[this.panel.stateFilter[key]] = true;
......@@ -53,7 +52,7 @@ class AlertListPanel extends PanelCtrl {
return _.sortBy(alerts, a => { return alertDef.alertStateSortScore[a.state]; });
}
var result = _.sortBy(alerts, a => { return a.name.toLowerCase();});
var result = _.sortBy(alerts, a => { return a.name.toLowerCase(); });
if (this.panel.sortOrder === 2) {
result.reverse();
}
......@@ -71,11 +70,10 @@ class AlertListPanel extends PanelCtrl {
}
this.panel.stateFilter = result;
this.onRender();
this.onRefresh();
}
onRender() {
this.contentHeight = "max-height: " + this.height + "px;";
onRefresh() {
if (this.panel.show === 'current') {
this.getCurrentAlertState();
}
......@@ -107,6 +105,7 @@ class AlertListPanel extends PanelCtrl {
al.info = alertDef.getAlertAnnotationInfo(al);
return al;
});
this.noAlertsMessage = this.alertHistory.length === 0 ? 'No alerts in current time range' : '';
});
}
......@@ -126,6 +125,7 @@ class AlertListPanel extends PanelCtrl {
al.newStateDateAgo = moment(al.newStateDate).locale('en').fromNow(true);
return al;
}));
this.noAlertsMessage = this.currentAlerts.length === 0 ? 'No alerts' : '';
});
}
......
public/sass/components/_panel_alertlist.scss
.panel-alert-list {
overflow-y: auto;
}
.panel-alert-list__no-alerts {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: calc(100% - 30px);
}
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