From 5a26fc252e2fc1a5b7ac234c1b56c25a6ae51cb5 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 1 Nov 2017 09:44:51 +0100 Subject: [PATCH 1/3] 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; From a433698ddf357289c8bf2e4bdf14bb641d003e4a Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 2 Nov 2017 08:44:09 +0100 Subject: [PATCH 2/3] changed class name for no-alerts --- public/app/plugins/panel/alertlist/module.html | 2 +- public/sass/pages/_alerting.scss | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/public/app/plugins/panel/alertlist/module.html b/public/app/plugins/panel/alertlist/module.html index 9860426cbc3..0e3d93d90c8 100644 --- a/public/app/plugins/panel/alertlist/module.html +++ b/public/app/plugins/panel/alertlist/module.html @@ -1,7 +1,7 @@
    -
    +

    No alerts in selected interval

    diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss index efbfab286d0..5ebb88f1346 100644 --- a/public/sass/pages/_alerting.scss +++ b/public/sass/pages/_alerting.scss @@ -91,6 +91,13 @@ align-items: flex-end; } +.alert-list-no-alerts { + display: flex; + align-items: center; + justify-content: center; + width: 100%; +} + .panel-has-alert { .panel-alert-icon:before { content: "\e611"; @@ -132,13 +139,6 @@ } } -.no-alert { - display: flex; - align-items: center; - justify-content: center; - width: 100%; -} - @keyframes alerting-panel { 100% { opacity: 1; From cd95f5bcc20e77353ac28b0860546a60bb37b9b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 3 Nov 2017 10:16:25 +0100 Subject: [PATCH 3/3] refactor: alert list panel fixes and no alerts message, rewrite of PR #9721 --- .../app/plugins/panel/alertlist/editor.html | 8 +-- .../app/plugins/panel/alertlist/module.html | 63 +++++++++---------- public/app/plugins/panel/alertlist/module.ts | 14 ++--- public/sass/components/_panel_alertlist.scss | 9 +++ public/sass/pages/_alerting.scss | 7 --- 5 files changed, 50 insertions(+), 51 deletions(-) diff --git a/public/app/plugins/panel/alertlist/editor.html b/public/app/plugins/panel/alertlist/editor.html index b8cee3b3317..36c989dd72c 100644 --- a/public/app/plugins/panel/alertlist/editor.html +++ b/public/app/plugins/panel/alertlist/editor.html @@ -4,22 +4,22 @@
    Show
    - +
    Max items - +
    Sort order
    - +
    -
    +
    State filter
    diff --git a/public/app/plugins/panel/alertlist/module.html b/public/app/plugins/panel/alertlist/module.html index 0e3d93d90c8..6689ea84e8c 100644 --- a/public/app/plugins/panel/alertlist/module.html +++ b/public/app/plugins/panel/alertlist/module.html @@ -1,12 +1,11 @@ -
    +
    +
    + {{ctrl.noAlertsMessage}} +
    +
      -
      -

      - No alerts in selected interval -

      -
      -
    1. +
    2. @@ -30,29 +29,29 @@
    -
      -
    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 1109bda5677..7aeb99c9918 100644 --- a/public/app/plugins/panel/alertlist/module.ts +++ b/public/app/plugins/panel/alertlist/module.ts @@ -21,11 +21,10 @@ class AlertListPanel extends PanelCtrl { { text: 'Importance', value: 3 }, ]; - panelHeight: any; - contentHeight: string; stateFilter: any = {}; currentAlerts: any = []; alertHistory: any = []; + noAlertsMessage: string; // Set and populate defaults panelDefaults = { show: 'current', @@ -41,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; @@ -72,12 +70,10 @@ class AlertListPanel extends PanelCtrl { } this.panel.stateFilter = result; - this.onRender(); + this.onRefresh(); } - onRender() { - this.panelHeight = this.height - 30; - this.contentHeight = "max-height: " + this.height + "px;"; + onRefresh() { if (this.panel.show === 'current') { this.getCurrentAlertState(); } @@ -109,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' : ''; }); } @@ -128,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' : ''; }); } diff --git a/public/sass/components/_panel_alertlist.scss b/public/sass/components/_panel_alertlist.scss index c8e8354f4d7..f124c0c4b8c 100644 --- a/public/sass/components/_panel_alertlist.scss +++ b/public/sass/components/_panel_alertlist.scss @@ -1,3 +1,12 @@ .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); +} + diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss index 5ebb88f1346..6db3470f3ea 100644 --- a/public/sass/pages/_alerting.scss +++ b/public/sass/pages/_alerting.scss @@ -91,13 +91,6 @@ align-items: flex-end; } -.alert-list-no-alerts { - display: flex; - align-items: center; - justify-content: center; - width: 100%; -} - .panel-has-alert { .panel-alert-icon:before { content: "\e611";