mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
new design for no alerts in alert-list, fixes #9721
This commit is contained in:
Patrick O'Carroll
parent
fec37f22b8
commit
5a26fc252e
@ -1,62 +1,58 @@
|
||||
<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>
|
||||
<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>
|
||||
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
|
||||
<ol class="card-list">
|
||||
<div class="no-alert" ng-style="{'height': + ctrl.panelHeight + 'px'}" ng-show="!ctrl.currentAlerts.length">
|
||||
<p class="alert-list-title">
|
||||
No alerts in selected interval
|
||||
</p>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}">
|
||||
<i class="{{al.stateModel.iconClass}}"></i>
|
||||
</div>
|
||||
<div class="alert-list-main">
|
||||
<p class="alert-list-title">{{al.alertName}}</p>
|
||||
<div class="alert-list-text">
|
||||
<span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
|
||||
<span class="alert-list-info alert-list-info-left">{{al.info}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-list-footer">
|
||||
<span class="alert-list-text">{{al.time}}</span>
|
||||
<span class="alert-list-text"><!--Img Link--></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
<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">
|
||||
<div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}">
|
||||
<i class="{{al.stateModel.iconClass}}"></i>
|
||||
</div>
|
||||
<div class="alert-list-main">
|
||||
<p class="alert-list-title">{{al.alertName}}</p>
|
||||
<div class="alert-list-text">
|
||||
<span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
|
||||
<span class="alert-list-info alert-list-info-left">{{al.info}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alert-list-footer">
|
||||
<span class="alert-list-text">{{al.time}}</span>
|
||||
<span class="alert-list-text">
|
||||
<!--Img Link-->
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -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,16 +11,17 @@ 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 },
|
||||
];
|
||||
|
||||
panelHeight: any;
|
||||
contentHeight: string;
|
||||
stateFilter: any = {};
|
||||
currentAlerts: any = [];
|
||||
@ -40,7 +41,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('render', this.onRender.bind(this));
|
||||
this.events.on('refresh', this.onRender.bind(this));
|
||||
|
||||
for (let key in this.panel.stateFilter) {
|
||||
@ -53,7 +54,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();
|
||||
}
|
||||
@ -75,6 +76,7 @@ class AlertListPanel extends PanelCtrl {
|
||||
}
|
||||
|
||||
onRender() {
|
||||
this.panelHeight = this.height - 30;
|
||||
this.contentHeight = "max-height: " + this.height + "px;";
|
||||
if (this.panel.show === 'current') {
|
||||
this.getCurrentAlertState();
|
||||
|
||||
@ -132,6 +132,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.no-alert {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@keyframes alerting-panel {
|
||||
100% {
|
||||
opacity: 1;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user