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

new design for no alerts in alert-list, fixes #9721

Browse Source
This commit is contained in:
Patrick O'Carroll 2017-11-01 09:44:51 +01:00
parent fec37f22b8
commit 5a26fc252e
3 changed files with 72 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,62 +1,58 @@
<div class="panel-alert-list" style="{{ctrl.contentHeight}}"> <div class="panel-alert-list" style="{{ctrl.contentHeight}}">
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'"> <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-show="!ctrl.currentAlerts.length"> <div class="no-alert" ng-style="{'height': + ctrl.panelHeight + 'px'}" ng-show="!ctrl.currentAlerts.length">
<div class="alert-list card-item card-item--alert"> <p class="alert-list-title">
<div class="alert-list-body"> No alerts in selected interval
<div class="alert-list-main"> </p>
<p class="alert-list-title"> </div>
No alerts in selected interval <li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
</p> <div class="alert-list card-item card-item--alert">
</div> <div class="alert-list-body">
</div> <div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}">
</div> <i class="{{alert.stateModel.iconClass}}"></i>
</li> </div>
<li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts"> <div class="alert-list-main">
<div class="alert-list card-item card-item--alert"> <p class="alert-list-title">
<div class="alert-list-body"> <a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
<div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}"> {{alert.name}}
<i class="{{alert.stateModel.iconClass}}"></i> </a>
</div> </p>
<div class="alert-list-main"> <p class="alert-list-text">
<p class="alert-list-title"> <span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
<a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert"> for {{alert.newStateDateAgo}}
{{alert.name}} </p>
</a> </div>
</p> </div>
<p class="alert-list-text"> </div>
<span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span> </li>
for {{alert.newStateDateAgo}} </ol>
</p> </section>
</div>
</div>
</div>
</li>
</ol>
</section>
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'changes'"> <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"> <li class="card-item-wrapper" ng-repeat="al in ctrl.alertHistory">
<div class="alert-list card-item card-item--alert"> <div class="alert-list card-item card-item--alert">
<div class="alert-list-body"> <div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}"> <div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}">
<i class="{{al.stateModel.iconClass}}"></i> <i class="{{al.stateModel.iconClass}}"></i>
</div> </div>
<div class="alert-list-main"> <div class="alert-list-main">
<p class="alert-list-title">{{al.alertName}}</p> <p class="alert-list-title">{{al.alertName}}</p>
<div class="alert-list-text"> <div class="alert-list-text">
<span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span> <span class="alert-list-state {{al.stateModel.stateClass}}">{{al.stateModel.text}}</span>
<span class="alert-list-info alert-list-info-left">{{al.info}}</span> <span class="alert-list-info alert-list-info-left">{{al.info}}</span>
</div> </div>
</div> </div>
</div> </div>
<div class="alert-list-footer"> <div class="alert-list-footer">
<span class="alert-list-text">{{al.time}}</span> <span class="alert-list-text">{{al.time}}</span>
<span class="alert-list-text"><!--Img Link--></span> <span class="alert-list-text">
</div> <!--Img Link-->
</div> </span>
</li> </div>
</ol> </div>
</section> </li>
</ol>
</section>
</div> </div>

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

@ -3,7 +3,7 @@
import _ from 'lodash'; import _ from 'lodash';
import moment from 'moment'; import moment from 'moment';
import alertDef from '../../../features/alerting/alert_def'; 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'; import * as dateMath from 'app/core/utils/datemath';
@ -11,16 +11,17 @@ class AlertListPanel extends PanelCtrl {
static templateUrl = 'module.html'; static templateUrl = 'module.html';
showOptions = [ showOptions = [
{text: 'Current state', value: 'current'}, { text: 'Current state', value: 'current' },
{text: 'Recent state changes', value: 'changes'} { text: 'Recent state changes', value: 'changes' }
]; ];
sortOrderOptions = [ sortOrderOptions = [
{text: 'Alphabetical (asc)', value: 1}, { text: 'Alphabetical (asc)', value: 1 },
{text: 'Alphabetical (desc)', value: 2}, { text: 'Alphabetical (desc)', value: 2 },
{text: 'Importance', value: 3}, { text: 'Importance', value: 3 },
]; ];
panelHeight: any;
contentHeight: string; contentHeight: string;
stateFilter: any = {}; stateFilter: any = {};
currentAlerts: any = []; currentAlerts: any = [];
@ -40,7 +41,7 @@ class AlertListPanel extends PanelCtrl {
_.defaults(this.panel, this.panelDefaults); _.defaults(this.panel, this.panelDefaults);
this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); 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)); this.events.on('refresh', this.onRender.bind(this));
for (let key in this.panel.stateFilter) { for (let key in this.panel.stateFilter) {
@ -53,7 +54,7 @@ class AlertListPanel extends PanelCtrl {
return _.sortBy(alerts, a => { return alertDef.alertStateSortScore[a.state]; }); 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) { if (this.panel.sortOrder === 2) {
result.reverse(); result.reverse();
} }
@ -75,6 +76,7 @@ class AlertListPanel extends PanelCtrl {
} }
onRender() { onRender() {
this.panelHeight = this.height - 30;
this.contentHeight = "max-height: " + this.height + "px;"; this.contentHeight = "max-height: " + this.height + "px;";
if (this.panel.show === 'current') { if (this.panel.show === 'current') {
this.getCurrentAlertState(); this.getCurrentAlertState();

7
public/sass/pages/_alerting.scss
View File

@ -132,6 +132,13 @@
} }
} }
.no-alert {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
@keyframes alerting-panel { @keyframes alerting-panel {
100% { 100% {
opacity: 1; opacity: 1;