Refactor hostgroup overview style

This commit is contained in:
Johannes Meyer 2014-03-06 10:28:52 +01:00 committed by Thomas Gelf
parent b61a732eaa
commit bd7ce10efc
3 changed files with 312 additions and 288 deletions

View File

@ -377,21 +377,16 @@ class Monitoring_ListController extends MonitoringController
'hostgroup',
'hosts_up',
'hosts_unreachable',
'hosts_unreachable_handled',
'hosts_unreachable_unhandled',
'hosts_down',
'hosts_down_handled',
'hosts_down_unhandled',
'hosts_pending',
'services_ok',
'services_unknown',
'services_unknown_handled',
'services_unknown_unhandled',
'services_critical',
'services_critical_handled',
'services_critical_unhandled',
'services_warning',
'services_warning_handled',
'services_warning_unhandled',
'services_pending'
)

View File

@ -1,183 +1,231 @@
<?php if (! $this->compact): ?>
<?php if (!$this->compact): ?>
<div class="controls">
<?= $this->tabs ?>
<?= $this->tabs ?>
</div>
<?php endif ?>
<div class="content">
<div class="summary" data-base-target="col2">
<div class="boxview" data-base-target="col2">
<?php foreach($hostgroups as $h): ?>
<span class="state">
<table><tr><td>
<strong><a href="<?= $this->href(
'monitoring/list/services',
array('hostgroup' => $h->hostgroup))
?>"><?= $h->hostgroup; ?></a></strong>
<?php if ($h->hosts_up): ?>
<!-- Hosts UP -->
<span class="state up">
<a href="<?= $this->href(
'monitoring/list/hosts',
array('host_state' => 0, 'hostgroup' => $h->hostgroup)
) ?>" title="Hosts Up"><?= $h->hosts_up ?> Hosts UP</a>
</span>
<!-- End of hosts UP -->
<?php endif ?>
<div class="box hostgroup">
<a href="<?= $this->href('monitoring/list/services', array('hostgroup' => $h->hostgroup)); ?>">
<h2><?= $h->hostgroup; ?></h2>
</a>
<div class="box contents">
<table>
<thead>
<tr>
<th>Hosts</th>
<th>Services</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<?php if ($h->hosts_down): ?>
<!-- Hosts DOWN -->
<span class="state down">
<a href="<?= $this->href(
'monitoring/list/hosts',
array('host_state' => 1, 'hostgroup' => $h->hostgroup)
) ?>" title="Hosts Up"><?= $h->hosts_down ?> Hosts DOWN: </a>
<!-- Hosts DOWN -->
<div class="box entry state_down <?= $h->hosts_down_unhandled ? '' : 'handled'; ?>">
<a href="<?= $this->href(
'monitoring/list/hosts',
array(
'host_state' => 1,
'hostgroup' => $h->hostgroup
)
); ?>" title="Hosts DOWN">
<?= $h->hosts_down ?> DOWN
</a>
<?php if ($h->hosts_down_unhandled): ?>
<a href="<?= $this->href(
'monitoring/list/hosts',
array(
'host_state' => 1,
'host_unhandled' => 1,
'hostgroup' => $h->hostgroup
)
) ?>" title="Hosts Down Unhandled"><?= $h->hosts_down_unhandled ?> Unhandled</a>
<a href="<?= $this->href(
'monitoring/list/hosts',
array(
'host_state' => 1,
'host_unhandled' => 1,
'hostgroup' => $h->hostgroup
)
); ?>" title="Hosts DOWN Unhandled">
<?= $h->hosts_down_unhandled ?> Unhandled
</a>
<?php endif ?>
</span>
<?php if ($h->hosts_down_handled): ?>
<span class="state down handled">
<a href="<?= $this->href(
'monitoring/list/hosts',
array(
'host_state' => 1,
'host_handled' => 1,
'hostgroup' => $h->hostgroup
)
) ?>" title="Hosts Down Handled"><?= $h->hosts_down_handled ?></a>
</span>
</div>
<!-- End of Hosts DOWN -->
<?php endif ?>
<!-- End of hosts DOWN -->
<?php if ($h->hosts_unreachable): ?>
<!-- Hosts UNREACHABLE -->
<div class="box entry state_unreachable <?= $h->hosts_unreachable_unhandled ? '' : 'handled'; ?>">
<a href="<?= $this->href(
'monitoring/list/hosts',
array(
'host_state' => 2,
'hostgroup' => $h->hostgroup
)
); ?>" title="Hosts UNREACHABLE">
<?= $h->hosts_unreachable ?> UNREACHABLE
</a>
<?php if ($h->hosts_unreachable_unhandled): ?>
<a href="<?= $this->href(
'monitoring/list/hosts',
array(
'host_state' => 2,
'host_unhandled' => 1,
'hostgroup' => $h->hostgroup
)
); ?>" title="Hosts UNREACHABLE Unhandled">
<?= $h->hosts_unreachable_unhandled ?> Unhandled
</a>
<?php endif ?>
</div>
<!-- End of Hosts UNREACHABLE -->
<?php endif ?>
<?php if ($h->hosts_up): ?>
<!-- Hosts UP -->
<div class="box entry state_up">
<a href="<?= $this->href(
'monitoring/list/hosts',
array(
'host_state' => 0,
'hostgroup' => $h->hostgroup
)
); ?>" title="Hosts UP">
<?= $h->hosts_up ?> UP
</a>
</div>
<!-- End of Hosts UP -->
<?php endif ?>
<?php if ($h->hosts_pending): ?>
<!-- Hosts PENDING -->
<span class="state pending">
<a href="<?= $this->href(
'monitoring/list/hosts',
array('host_state' => 99)
) ?>" title="Hosts Pending"><?= $h->hosts_pending ?> pending</a>
</span>
<!-- End of hosts PENDING -->
<!-- Hosts PENDING -->
<div class="box entry state_pending">
<a href="<?= $this->href(
'monitoring/list/hosts',
array(
'host_state' => 99,
'hostgroup' => $h->hostgroup
)
); ?>" title="Hosts PENDING">
<?= $h->hosts_pending ?> PENDING
</a>
</div>
<!-- End of Hosts PENDING -->
<?php endif ?>
</td><td>
Services
<?php if ($h->services_ok): ?>
<!-- Services OK -->
<span class="state ok">
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 0,
'hostgroup' => $h->hostgroup)
) ?>" title="Services Ok"><?= $h->services_ok ?> OK</a>
</span>
<!-- End of services OK -->
<?php endif ?>
</td>
<td>
<?php if ($h->services_critical): ?>
<!-- Services CRITICAL -->
<span class="state critical">
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 2,
'hostgroup' => $h->hostgroup,
'sort' => 'service_severity'
)) ?>" title="Services Critical"><?= $h->services_critical ?> CRITICAL: </a>
<!-- Services CRITICAL -->
<div class="box entry state_critical <?= $h->services_critical_unhandled ? '' : 'handled'; ?>">
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 2,
'hostgroup' => $h->hostgroup,
'sort' => 'service_severity'
)
); ?>" title="Services CRITICAL">
<?= $h->services_critical ?> CRITICAL
</a>
<?php if ($h->services_critical_unhandled): ?>
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 2,
'service_unhandled' => 1,
'hostgroup' => $h->hostgroup,
'sort' => 'service_severity'
)
) ?>" title="Services Critical Unhandled"><?= $h->services_critical_unhandled ?> Unhandled</a>
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 2,
'service_unhandled' => 1,
'hostgroup' => $h->hostgroup,
'sort' => 'service_severity'
)
); ?>" title="Services CRITICAL Unhandled">
<?= $h->services_critical_unhandled ?> Unhandled
</a>
<?php endif ?>
<?php if ($h->services_critical_handled): ?>
<span class="state critical handled">
<a href="<?= $this->href('monitoring/list/services', array('service_state' => 2, 'service_handled' => 1, 'hostgroup' => $h->hostgroup)); ?>" title="Services Critical Handled">
<?= $h->services_critical_handled ?> Handled
</a>
</span>
</div>
<!-- End of Services CRITICAL -->
<?php endif ?>
</span>
<!-- End of services CRITICAL -->
<?php endif ?>
<?php if ($h->services_warning): ?>
<!-- Services WARNING -->
<span class="state warning">
<a href="<?= $this->href('monitoring/list/services', array('service_state' => 1, 'hostgroup' => $h->hostgroup)); ?>" title="Services Warning">
<?= $h->services_warning ?> WARNING: </a>
<!-- Services WARNING -->
<div class="box entry state_warning <?= $h->services_warning_unhandled ? '' : 'handled'; ?>">
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 1,
'hostgroup' => $h->hostgroup
)
); ?>" title="Services WARNING">
<?= $h->services_warning ?> WARNING
</a>
<?php if ($h->services_warning_unhandled): ?>
<a href="<?= $this->href('monitoring/list/services', array('service_state' => 1, 'service_unhandled' => 1, 'hostgroup' => $h->hostgroup)); ?>" title="Services Warning Unhandled">
<?= $h->services_warning_unhandled ?> Unhandled</a>
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 1,
'service_unhandled' => 1,
'hostgroup' => $h->hostgroup
)
); ?>" title="Services WARNING Unhandled">
<?= $h->services_warning_unhandled ?> Unhandled
</a>
<?php endif ?>
<?php if ($h->services_warning_handled): ?>
<span class="state warning handled">
<a href="<?= $this->href('monitoring/list/services', array('service_state' => 1, 'service_handled' => 1, 'hostgroup' => $h->hostgroup)); ?>" title="Services Warning Handled">
<?= $h->services_warning_handled ?> Handled
</a>
</span>
</div>
<!-- End of Services WARNING -->
<?php endif ?>
</span>
<!-- End of WARNING services -->
<?php endif ?>
<?php if ($h->services_unknown): ?>
<!-- Services UNKNOWN -->
<span class="state unknown">
<a href="<?= $this->href(
'monitoring/list/services',
array('service_state' => 3, 'hostgroup' => $h->hostgroup)
) ?>" title="Services Unknown"><?= $h->services_unknown ?> UNKNOWN: </a>
<!-- Services UNKNOWN -->
<div class="box entry state_unknown">
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 3,
'hostgroup' => $h->hostgroup
)
); ?>" title="Services UNKNOWN">
<?= $h->services_unknown ?> UNKNOWN
</a>
<?php if ($h->services_unknown_unhandled): ?>
<a href="<?= $this->href('monitoring/list/services', array('service_state' => 3, 'service_unhandled' => 1, 'hostgroup' => $h->hostgroup)); ?>" title="Services Unknown Unhandled">
<?= $h->services_unknown_unhandled ?> Unhandled</a>
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 3,
'service_unhandled' => 1,
'hostgroup' => $h->hostgroup
)
); ?>" title="Services UNKNOWN Unhandled">
<?= $h->services_unknown_unhandled ?> Unhandled
</a>
<?php endif ?>
<?php if ($h->services_unknown_handled): ?>
<span class="state unknown handled">
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 3,
'service_handled' => 1,
'hostgroup' => $h->hostgroup
)
) ?>" title="Services Unknown Handled"><?= $h->services_unknown_handled ?> Handled</a>
</span>
</div>
<!-- End of Services UNKNOWN -->
<?php endif ?>
</span>
<!-- End of UNKNOWN services -->
<?php if ($h->services_ok): ?>
<!-- Services OK -->
<div class="box entry state_ok">
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 0,
'hostgroup' => $h->hostgroup
)
); ?>" title="Services OK">
<?= $h->services_ok ?> OK
</a>
</div>
<!-- End of Services OK -->
<?php endif ?>
<?php if ($h->services_pending): ?>
<span class="state pending">
<a href="<?= $this->href(
'monitoring/list/services',
array('service_state' => 99, 'hostgroup' => $h->hostgroup)
) ?>" title="Services Pending"><?= $h->services_pending ?></a>
</span>
<!-- Services PENDING -->
<div class="box entry state_pending">
<a href="<?= $this->href(
'monitoring/list/services',
array(
'service_state' => 99,
'hostgroup' => $h->hostgroup
)
); ?>" title="Services PENDING">
<?= $h->services_pending ?> PENDING
</a>
</div>
<!-- End of Services PENDING -->
<?php endif ?>
</td></tr></table>
</span><!-- end of services -->
<?php endforeach; ?>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<?php endforeach ?>
</div>
</div>

View File

@ -271,150 +271,131 @@ a.critical {
}
*/
/* Generic box element */
/* Generic span.state */
span.state {
color: white;
border-radius: 0.5em;
-moz-border-radius: 0.5em;
padding: 0.3em 0.5em 0.3em 0.5em;
margin: 0.2em 0.5em 0.2em 0.5em;
}
/* span.state title element */
span.state caption {
font-size: 125%;
}
/* span.state Subtitle element */
span.state.subtitle {
color: black;
}
span.state.ok, span.state.up {
background-color: @colorOk;
}
span.state.pending {
background-color: @colorPending;
}
span.state.warning {
background-color: @colorWarning;
}
span.state.warning.handled {
background-color: @colorWarningHandled;
}
span.state.critical, span.state.down {
background-color: @colorCritical;
}
span.state.critical.handled, span.state.down.handled {
background-color: @colorCriticalHandled;
}
span.state.unknown, span.state.unreachable {
background-color: @colorUnknown;
}
span.state.unknown.handled, span.state.unreachable.handled {
background-color: @colorUnknownHandled;
}
span.state.invalid {
background-color: @colorInvalid;
}
span.state.check_active {
background-color: @colorActiveCheck;
}
span.state.check_passive {
background-color: @colorPassiveCheck;
}
span.state.check_disabled {
background-color: @colorDisabledCheck;
}
span.state.enabled {
background-color: @colorEnabled;
}
span.state.disabled {
background-color: @colorDisabled;
}
span.state.flapping {
background-color: @colorFlapping;
}
.summary a {
color: white;
.boxview a {
text-decoration: none;
}
.summary {
font-size: 0.85em;
vertical-align: top;
text-align: left;
}
.summary td {
vertical-align: top;
}
.summary > span.state {
border: 1px solid #555;
color: black;
}
.summary strong a {
color: black;
}
.summary span.state.handled a {
color: #333;
}
.summary span.state.disabled > a {
color: #333;
}
.summary span.state.check_disabled > a {
color: #333;
}
.summary span.state {
width: 26em;
vertical-align: top;
.boxview > div.box {
width: 28em;
text-align: center;
vertical-align: top;
display: inline-block;
padding: 0.5em;
margin: 0.5em;
background: #555;
border-radius: 0.5em;
-moz-border-radius: 0.5em;
}
.summary span.state span.state {
width: 12em;
/* Box caption */
.boxview div.box h2 {
margin: 0.5em 0 1em;
color: white;
font-weight: bold;
}
/* Box body of contents */
.boxview div.box.contents {
background: #eee;
border-radius: 0.5em;
-moz-border-radius: 0.5em;
}
.boxview div.box.contents table {
width: 100%;
}
.boxview div.box.contents td {
width: 13em;
vertical-align: top;
}
/* Box separator */
.boxview div.box-separator:first-child {
border-top-width: 0;
border-top-left-radius: 0.5em;
border-top-right-radius: 0.5em;
-moz-border-top-left-radius: 0.5em;
-moz-border-top-right-radius: 0.5em;
}
.boxview div.box-separator {
border-style: solid;
border-color: #555;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 0;
border-right-width: 0;
background-color: #bbb;
}
/* Box entry */
.boxview div.box.entry {
min-height: 3em;
margin: 0.25em;
font-size: 0.9em;
}
.summary span.state span.state span.state {
width: 12em;
}
span.state a {
white-space: nowrap;
color: black;
}
span.state.handled {
color: #333;
/* Any line of a box entry */
.boxview div.box.entry a {
display: block;
color: inherit;
}
span.state a.active {
text-decoration: underline;
.boxview div.box.entry a:hover {
color: #666;
}
/* End of generic span.state */
/* First line of a box entry */
.boxview div.box.entry a:first-child {
font-size: 1.1em;
}
/* End of generic box element */
/* Monitoring box element styles */
div.box.entry.state_up, div.box.entry.state_ok {
border-left: 0.8em solid @colorOk;
}
div.box.entry.state_pending {
border-left: 0.8em solid @colorPending;
}
div.box.entry.state_down, div.box.entry.state_critical {
border-left: 0.8em solid @colorCritical;
background-color: @colorCritical;
color: white;
}
div.box.entry.state_warning {
border-left: 0.8em solid @colorWarning;
background-color: @colorWarning;
color: white;
}
div.box.entry.state_unreachable, div.box.entry.state_unknown {
border-left: 0.8em solid @colorUnknown;
background-color: @colorUnknown;
color: white;
}
div.box.entry.handled {
background-color: transparent;
color: inherit;
}
/* End of monitoring box element styles */
.controls {