Skip to content

N
nexpie-grafana-theme
Commit a22dded6 by Torkel Ödegaard
Options

Merge branch 'update-alert-lists' of https://github.com/Ijin08/grafana into… 

Merge branch 'update-alert-lists' of https://github.com/Ijin08/grafana into Ijin08-update-alert-lists
parents 6bc69112 0d5540ca
Showing with 89 additions and 42 deletions
public/app/features/alerting/partials/alert_tab.html
...@@ -77,7 +77,6 @@ ...@@ -77,7 +77,6 @@
</ul> </ul>
</label> </label>
</div> </div>
</div> </div>
<div class="gf-form-group"> <div class="gf-form-group">
...@@ -147,23 +146,19 @@ ...@@ -147,23 +146,19 @@
<section class="card-section card-list-layout-list"> <section class="card-section card-list-layout-list">
<ol class="card-list" > <ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="ah in ctrl.alertHistory"> <li class="card-item-wrapper" ng-repeat="ah in ctrl.alertHistory">
<div class="card-item card-item--alert"> <div class="alert-list card-item card-item--alert">
<div class="card-item-header"> <div class="alert-list-body">
<div class="card-item-type"> <div class="alert-list-icon alert-list-item-state {{ah.stateModel.stateClass}}">
</div>
</div>
<div class="card-item-body">
<div class="card-item-details">
<div class="card-item-sub-name">
<span class="alert-list-item-state {{ah.stateModel.stateClass}}">
<i class="{{ah.stateModel.iconClass}}"></i> <i class="{{ah.stateModel.iconClass}}"></i>
{{ah.stateModel.text}}
</span> {{ah.time}}
</div> </div>
<div class="card-item-sub-name"> <div class="alert-list-main alert-list-text">
{{ah.info}} <span class="alert-list-state {{ah.stateModel.stateClass}}">{{ah.stateModel.text}}</span>
<span class="alert-list-info">{{ah.info}}</span>
</div> </div>
</div> </div>
<div class="alert-list-footer alert-list-text">
<span>{{ah.time}}</span>
<span><!--Img Link--></span>
</div> </div>
</div> </div>
</li> </li>
......
public/app/plugins/panel/alertlist/module.html
...@@ -2,23 +2,21 @@ ...@@ -2,23 +2,21 @@
<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-repeat="alert in ctrl.currentAlerts"> <li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
<div class="card-item card-item--alert"> <div class="alert-list card-item card-item--alert">
<div class="card-item-body"> <div class="alert-list-body">
<div class="card-item-details"> <div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}">
<div class="card-item-notice"> <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"> <a href="dashboard/{{alert.dashboardUri}}?panelId={{alert.panelId}}&fullscreen&edit&tab=alert">
{{alert.name}} {{alert.name}}
</a> </a>
</div> </p>
<div class="card-item-sub-name"> <p class="alert-list-text">
<span class="alert-list-item-state {{alert.stateModel.stateClass}}"> <span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
<i class="{{alert.stateModel.iconClass}}"></i> for {{alert.newStateDateAgo}}
{{alert.stateModel.text}} </p>
</span> for {{alert.newStateDateAgo}}
</div>
<div class="small muted" ng-show="alert.executionError">
{{alert.executionError}}
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -27,22 +25,24 @@ ...@@ -27,22 +25,24 @@
</section> </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="card-item card-item--alert"> <div class="alert-list card-item card-item--alert">
<div class="card-item-header"> <div class="alert-list-body">
<div class="card-item-sub-name">{{al.time}}</div> <div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}">
</div>
<div class="card-item-body">
<div class="card-item-details">
<div class="card-item-notice">{{al.title}}</div>
<div class="card-item-sub-name">
<span class="alert-list-item-state {{al.stateModel.stateClass}}">
<i class="{{al.stateModel.iconClass}}"></i> <i class="{{al.stateModel.iconClass}}"></i>
{{al.stateModel.text}} </div>
</span> {{al.info}} <div class="alert-list-main">
<p class="alert-list-title">{{al.title}}</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> </div>
<div class="alert-list-footer">
<span class="alert-list-text">{{al.time}}</span>
<span class="alert-list-text"><!--Img Link--></span>
</div> </div>
</div> </div>
</li> </li>
......
public/sass/pages/_alerting.scss
...@@ -30,15 +30,67 @@ ...@@ -30,15 +30,67 @@
// Alert List // Alert List
.alert-list-item-state { .alert-list {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.alert-list-icon {
font-weight: bold; font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
.icon-gf, .fa { .icon-gf, .fa {
font-size: 120%; font-size: 200%;
position: relative; position: relative;
top: 2px; 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;
color: $text-color-weak;
}
.alert-list-info {
color: $text-color;
}
.alert-list-info-left {
padding-left: 2rem;
}
.alert-list-footer {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: flex-end;
}
.panel-has-alert { .panel-has-alert {
.panel-alert-icon:before { .panel-alert-icon:before {
content: "\e611"; content: "\e611";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment