RepoMirrors
/
alertmanager
mirror of https://github.com/prometheus/alertmanager
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

More readable styling

This commit is contained in:
Fabian Reinartz 2015-11-09 12:33:14 +01:00
parent 5b3621948b
commit 09bcb8c71a
3 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ui/app/css/main.css
View File

@ -38,16 +38,16 @@ header #logo {
padding: 2.5em; padding: 2.5em;
} }
.alert-group {
margin-bottom: 24px;
}
#silence-create { #silence-create {
background: #fff; background: #fff;
width: 100%; width: 100%;
min-width: 400px; min-width: 400px;
} }
.alert-group {
margin-bottom: 5px;
}
.silence .labels, .alert-item .labels { .silence .labels, .alert-item .labels {
cursor: pointer; cursor: pointer;
} }
@ -55,6 +55,11 @@ header #logo {
width: 75%; width: 75%;
} }
.alert-group-header {
border-bottom: 1px solid #fff;
background: #bfbfbf;
padding: .8em;
}
.silence .delete-button, .alert-item .silence-button { .silence .delete-button, .alert-item .silence-button {
opacity: 0.2; opacity: 0.2;
@ -63,7 +68,11 @@ header #logo {
opacity: 1.0; opacity: 1.0;
} }
.silence .overview, .alert-item .overview { .alert-item .overview {
background: #f0f0f0;
padding: .8em;
}
.silence .overview {
background: #bfbfbf; background: #bfbfbf;
padding: .8em; padding: .8em;
} }
@ -133,12 +142,8 @@ header #logo {
.silence-alert { .silence-alert {
background: #f0f0f0; background: #f0f0f0;
} border-top: 1px solid #fff;
.alert-group-header {
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
background: #f0f0f0;
padding: .5em .6em;
} }
input.collapse[type=checkbox] { input.collapse[type=checkbox] {

2
ui/app/partials/alert.html
View File

@ -2,7 +2,7 @@
<div class="overview group"> <div class="overview group">
<div class="labels left" ng-click="toggleDetails()"> <div class="labels left" ng-click="toggleDetails()">
<span ng-repeat="(name, value) in alert.labels | orderBy:name"> <span ng-repeat="(name, value) in alert.labels | orderBy:name">
<span ng-hide="group[name]" class="lbl {{ name == 'alertname' ? 'lbl-highlight' : '' }}"> <span ng-hide="group[name]" class="lbl {{ name == 'alertname' ? 'lbl-highlight' : 'lbl-outline' }}">
{{ name }} = '{{ value }}' {{ name }} = '{{ value }}'
</span> </span>
</span> </span>

6
ui/app/partials/alerts.html
View File

@ -5,15 +5,15 @@
</div> </div>
<div id="alert-groups" ng-controller="AlertsCtrl"> <div id="alert-groups" ng-controller="AlertsCtrl">
<div ng-repeat="group in groups"> <div class="alert-group" ng-repeat="group in groups">
<div class="alert-group-header group"> <div class="alert-group-header group">
<span ng-repeat="(ln, lv) in group.labels" class="lbl {{ ln == 'alertname' ? 'lbl-highlight' : 'lbl-outline' }}"> <span ng-repeat="(ln, lv) in group.labels" class="lbl {{ ln == 'alertname' ? 'lbl-highlight' : '' }}">
{{ ln }} = '{{ lv }}' {{ ln }} = '{{ lv }}'
</span> </span>
</div> </div>
<div ng-repeat="g in group.groups"> <div ng-repeat="g in group.groups">
<div ng-show="destinations.indexOf(g.routeOpts.sendTo) >= 0" class="alert-group" ng-show"g.alerts"> <div ng-show="destinations.indexOf(g.routeOpts.sendTo) >= 0" ng-show"g.alerts">
<div ng-repeat="a in g.alerts"> <div ng-repeat="a in g.alerts">
<alert class="list-item" alert="a" group="group.labels"></alert> <alert class="list-item" alert="a" group="group.labels"></alert>
</div> </div>