From 5a26fc252e2fc1a5b7ac234c1b56c25a6ae51cb5 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 1 Nov 2017 09:44:51 +0100 Subject: [PATCH] new design for no alerts in alert-list, fixes #9721 --- .../app/plugins/panel/alertlist/module.html | 114 +++++++++--------- public/app/plugins/panel/alertlist/module.ts | 18 +-- public/sass/pages/_alerting.scss | 7 ++ 3 files changed, 72 insertions(+), 67 deletions(-) diff --git a/public/app/plugins/panel/alertlist/module.html b/public/app/plugins/panel/alertlist/module.html index 0a3ff4fabb4..9860426cbc3 100644 --- a/public/app/plugins/panel/alertlist/module.html +++ b/public/app/plugins/panel/alertlist/module.html @@ -1,62 +1,58 @@
-
-
    -
  1. -
    -
    -
    -

    - No alerts in selected interval -

    -
    -
    -
    -
    2. -
  2. -
    -
    -
    - -
    -
    -

    - - {{alert.name}} - -

    -

    - {{alert.stateModel.text}} - for {{alert.newStateDateAgo}} -

    -
    -
    -
    -
    3. -
-
+
+
    +
    +

    + No alerts in selected interval +

    +
    +
  1. +
    +
    +
    + +
    +
    +

    + + {{alert.name}} + +

    +

    + {{alert.stateModel.text}} + for {{alert.newStateDateAgo}} +

    +
    +
    +
    +
    2. +
+
-
-
    -
  1. -
    -
    -
    - -
    -
    -

    {{al.alertName}}

    -
    - {{al.stateModel.text}} - {{al.info}} -
    -
    -
    -
    - {{al.time}} - -
    -
    -
    2. -
-
+
+
    +
  1. +
    +
    +
    + +
    +
    +

    {{al.alertName}}

    +
    + {{al.stateModel.text}} + {{al.info}} +
    +
    +
    +
    + {{al.time}} + + + +
    +
    +
    2. +
+
diff --git a/public/app/plugins/panel/alertlist/module.ts b/public/app/plugins/panel/alertlist/module.ts index d0b6ddc3db7..1109bda5677 100644 --- a/public/app/plugins/panel/alertlist/module.ts +++ b/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,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(); diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss index 6db3470f3ea..efbfab286d0 100644 --- a/public/sass/pages/_alerting.scss +++ b/public/sass/pages/_alerting.scss @@ -132,6 +132,13 @@ } } +.no-alert { + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} + @keyframes alerting-panel { 100% { opacity: 1;