From 8615912018eda62771e66a0fc1c5be5892012df4 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Wed, 27 Sep 2017 10:38:01 +0200 Subject: [PATCH 1/2] updated css and html for recent state changes for alert lists --- .../features/alerting/partials/alert_tab.html | 57 +++++++++---------- .../app/plugins/panel/alertlist/module.html | 28 ++++----- public/sass/pages/_alerting.scss | 48 +++++++++++++++- 3 files changed, 86 insertions(+), 47 deletions(-) diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html index 2e7956d4a6e..5c053a360e2 100644 --- a/public/app/features/alerting/partials/alert_tab.html +++ b/public/app/features/alerting/partials/alert_tab.html @@ -12,7 +12,7 @@
  • State history
    • -
  • +
  • Delete
    • @@ -41,10 +41,10 @@ WHEN -
    +
    - OF + OF
    @@ -53,8 +53,8 @@
    - - + +
    -
    - If no data or all values are null - SET STATE TO + If no data or all values are null + SET STATE TO
    @@ -91,8 +90,8 @@
    - If execution error or timeout - SET STATE TO + If execution error or timeout + SET STATE TO
    @@ -135,35 +134,31 @@
    -
    +
    State history (last 50 state changes)
    -
    -
    - No state changes recorded -
    +
    +
    + No state changes recorded +
    1. -
      -
      -
      -
      -
      -
      -
      -
      - - - {{ah.stateModel.text}} - {{ah.time}} -
      -
      - {{ah.info}} -
      +
      +
      +
      +
      +
      +

      {{ah.stateModel.text}}

      +

      {{ah.info}}

      +
      +
      +
      +

      {{ah.time}}

      +

      Img Link ->

      2. diff --git a/public/app/plugins/panel/alertlist/module.html b/public/app/plugins/panel/alertlist/module.html index 2c0cb00d2ef..0ae24dac7fe 100644 --- a/public/app/plugins/panel/alertlist/module.html +++ b/public/app/plugins/panel/alertlist/module.html @@ -27,22 +27,22 @@
    -
      +
      1. -
        -
        -
        {{al.time}}
        -
        -
        -
        -
        {{al.title}}
        -
        - - - {{al.stateModel.text}} - {{al.info}} -
        +
        +
        +
        +
        +
        +

        {{al.title}}

        +

        {{al.stateModel.text}}

        +

        {{al.info}}

        +
        +
        +
        +

        {{al.time}}

        +

        Img Link ->

        2. diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss index 2829849bcb8..3f97ef1a73c 100644 --- a/public/sass/pages/_alerting.scss +++ b/public/sass/pages/_alerting.scss @@ -30,15 +30,59 @@ // Alert List -.alert-list-item-state { +.alert-list { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.alert-list-icon { font-weight: bold; + display: flex; + justify-content: center; + align-items: center; .icon-gf, .fa { - font-size: 120%; + font-size: 200%; position: relative; top: 2px; } } +.alert-list-body { + display: flex; +} + +.alert-list-main { + padding: 0 2rem; + display: flex; + flex-direction: column; + justify-content: center; +} + +.alert-list-title { + font-size: $font-size-base; + margin: 0; + font-weight: 600; +} + +.alert-list-state { + font-weight: bold; +} + +.alert-list-text { + font-size: $font-size-sm; + margin: 0; + line-height: 1.5rem; +} + +.alert-list-footer { + display: flex; + justify-content: space-between; + flex-direction: column; + align-items: flex-end; + color: $text-color-weak; +} + .panel-has-alert { .panel-alert-icon:before { content: "\e611"; From 0d5540ca092063aefc58f2da88bc6626591e66b4 Mon Sep 17 00:00:00 2001 From: Patrick O'Carroll Date: Thu, 28 Sep 2017 09:41:33 +0200 Subject: [PATCH 2/2] cleaned up html/sass and added final touches --- .../features/alerting/partials/alert_tab.html | 12 +++--- .../app/plugins/panel/alertlist/module.html | 40 +++++++++---------- public/sass/pages/_alerting.scss | 10 ++++- 3 files changed, 35 insertions(+), 27 deletions(-) diff --git a/public/app/features/alerting/partials/alert_tab.html b/public/app/features/alerting/partials/alert_tab.html index 5c053a360e2..a17e58ea83d 100644 --- a/public/app/features/alerting/partials/alert_tab.html +++ b/public/app/features/alerting/partials/alert_tab.html @@ -151,14 +151,14 @@
        -
        -

        {{ah.stateModel.text}}

        -

        {{ah.info}}

        +
        + {{ah.stateModel.text}} + {{ah.info}}
        -
        -

        {{ah.time}}

        -

        Img Link ->

        +
        + {{ah.time}} +
        diff --git a/public/app/plugins/panel/alertlist/module.html b/public/app/plugins/panel/alertlist/module.html index 0ae24dac7fe..42749bbbecc 100644 --- a/public/app/plugins/panel/alertlist/module.html +++ b/public/app/plugins/panel/alertlist/module.html @@ -2,24 +2,22 @@
        1. -
          -
          -
          -
          - - {{alert.name}} - -
          -
          - +
          +
          +
          - {{alert.stateModel.text}} - for {{alert.newStateDateAgo}}
          -
          - {{alert.executionError}} -
          -
          +
          +

          + + {{alert.name}} + +

          +

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

          +
          2. @@ -36,13 +34,15 @@

    {{al.title}}

    -

    {{al.stateModel.text}}

    -

    {{al.info}}

    +
    + {{al.stateModel.text}} + {{al.info}} +
    -

    {{al.time}}

    -

    Img Link ->

    + {{al.time}} +
    diff --git a/public/sass/pages/_alerting.scss b/public/sass/pages/_alerting.scss index 3f97ef1a73c..6db3470f3ea 100644 --- a/public/sass/pages/_alerting.scss +++ b/public/sass/pages/_alerting.scss @@ -73,6 +73,15 @@ font-size: $font-size-sm; margin: 0; line-height: 1.5rem; + color: $text-color-weak; +} + +.alert-list-info { + color: $text-color; +} + +.alert-list-info-left { + padding-left: 2rem; } .alert-list-footer { @@ -80,7 +89,6 @@ justify-content: space-between; flex-direction: column; align-items: flex-end; - color: $text-color-weak; } .panel-has-alert {