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 @@
</ul>
</label>
</div>
</div>
<div class="gf-form-group">
......@@ -147,23 +146,19 @@
<section class="card-section card-list-layout-list">
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="ah in ctrl.alertHistory">
<div class="card-item card-item--alert">
<div class="card-item-header">
<div class="card-item-type">
</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}}">
<div class="alert-list card-item card-item--alert">
<div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state {{ah.stateModel.stateClass}}">
<i class="{{ah.stateModel.iconClass}}"></i>
{{ah.stateModel.text}}
</span> {{ah.time}}
</div>
<div class="card-item-sub-name">
{{ah.info}}
<div class="alert-list-main alert-list-text">
<span class="alert-list-state {{ah.stateModel.stateClass}}">{{ah.stateModel.text}}</span>
<span class="alert-list-info">{{ah.info}}</span>
</div>
</div>
<div class="alert-list-footer alert-list-text">
<span>{{ah.time}}</span>
<span><!--Img Link--></span>
</div>
</div>
</li>
......
public/app/plugins/panel/alertlist/module.html
......@@ -2,23 +2,21 @@
<section class="card-section card-list-layout-list" ng-if="ctrl.panel.show === 'current'">
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="alert in ctrl.currentAlerts">
<div class="card-item card-item--alert">
<div class="card-item-body">
<div class="card-item-details">
<div class="card-item-notice">
<div class="alert-list card-item card-item--alert">
<div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state {{alert.stateModel.stateClass}}">
<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">
{{alert.name}}
</a>
</div>
<div class="card-item-sub-name">
<span class="alert-list-item-state {{alert.stateModel.stateClass}}">
<i class="{{alert.stateModel.iconClass}}"></i>
{{alert.stateModel.text}}
</span> for {{alert.newStateDateAgo}}
</div>
<div class="small muted" ng-show="alert.executionError">
{{alert.executionError}}
</div>
</p>
<p class="alert-list-text">
<span class="alert-list-state {{alert.stateModel.stateClass}}">{{alert.stateModel.text}}</span>
for {{alert.newStateDateAgo}}
</p>
</div>
</div>
</div>
......@@ -27,22 +25,24 @@
</section>
<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">
<div class="card-item card-item--alert">
<div class="card-item-header">
<div class="card-item-sub-name">{{al.time}}</div>
</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}}">
<div class="alert-list card-item card-item--alert">
<div class="alert-list-body">
<div class="alert-list-icon alert-list-item-state {{al.stateModel.stateClass}}">
<i class="{{al.stateModel.iconClass}}"></i>
{{al.stateModel.text}}
</span> {{al.info}}
</div>
<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 class="alert-list-footer">
<span class="alert-list-text">{{al.time}}</span>
<span class="alert-list-text"><!--Img Link--></span>
</div>
</div>
</li>
......
public/sass/pages/_alerting.scss
......@@ -30,15 +30,67 @@
// 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;
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-alert-icon:before {
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