Refine box styles

This commit is contained in:
Johannes Meyer 2014-03-07 13:15:26 +01:00
parent 6be6cabb9f
commit 25979f44e3
6 changed files with 91 additions and 42 deletions

View File

@ -4,11 +4,20 @@
use Icinga\Module\Monitoring\Controller as MonitoringController;
use Icinga\Module\Monitoring\DataView\StatusSummary;
use Icinga\Web\Url;
class Monitoring_TacticalController extends MonitoringController
{
public function indexAction()
{
$this->getTabs()->add(
'tactical_overview',
array(
'title' => 'Tactical Overview',
'url' => Url::fromPath('monitoring/tactical')
)
)->activate('tactical_overview');
$this->view->statusSummary = StatusSummary::fromRequest(
$this->_request,
array(

View File

@ -1,7 +1,8 @@
<?php if (!$this->compact): ?>
<div class="controls">
<?= $this->tabs ?>
</div>
<?php endif ?>
<div class="content">
<div class="boxview" data-base-target="col2">
<?php foreach ($groupData as $groupName => $groupInfo): ?>

View File

@ -1,21 +1,26 @@
<div class="box monitoringfeatures">
<h2><?= $this->translate('Monitoring Features'); ?></h2>
<div class="box contents">
<?php if ($this->statusSummary->hosts_without_flap_detection || $this->statusSummary->services_without_flap_detection ||
$this->statusSummary->hosts_flapping || $this->statusSummary->services_flapping): ?>
<div class="box-separator feature-highlight"><?= $this->translate('Flap detection'); ?></div>
<?php else: ?>
<div class="box-separator"><?= $this->translate('Flap detection'); ?></div>
<?php endif ?>
<table>
<tbody>
<tr>
<td>
<?php if ($this->statusSummary->hosts_without_flap_detection): ?>
<div class="box entry feature_disabled">
<div class="box entry">
<a href="<?= $this->href(
'monitoring/list/hosts',
array('host_flap_detection_enabled' => 0)
); ?>">
); ?>" class="feature-highlight">
<?= sprintf('%d hosts disabled', $this->statusSummary->hosts_without_flap_detection); ?>
</a>
<?php else: ?>
<div class="box entry feature_enabled">
<div class="box entry">
<a href="<?= $this->href(
'monitoring/list/hosts',
array('host_flap_detection_enabled' => 1)
@ -27,7 +32,7 @@
<a href="<?= $this->href(
'monitoring/list/hosts',
array('host_is_flapping' => 1)
); ?>" style="color: red;">
); ?>" class="feature-highlight">
<?= sprintf('%d hosts flapping', $this->statusSummary->hosts_flapping); ?>
</a>
<?php endif ?>
@ -35,15 +40,15 @@
</td>
<td>
<?php if ($this->statusSummary->services_without_flap_detection): ?>
<div class="box entry feature_disabled">
<div class="box entry">
<a href="<?= $this->href(
'monitoring/list/services',
array('service_flap_detection_enabled' => 0)
); ?>">
); ?>" class="feature-highlight">
<?= sprintf('%d services disabled', $this->statusSummary->services_without_flap_detection); ?>
</a>
<?php else: ?>
<div class="box entry feature_enabled">
<div class="box entry">
<a href="<?= $this->href(
'monitoring/list/services',
array('service_flap_detection_enabled' => 1)
@ -55,7 +60,7 @@
<a href="<?= $this->href(
'monitoring/list/services',
array('service_is_flapping' => 1)
); ?>" style="color: red;">
); ?>" class="feature-highlight">
<?= sprintf('%d services flapping', $this->statusSummary->services_flapping); ?>
</a>
<?php endif ?>
@ -64,21 +69,25 @@
</tr>
</tbody>
</table>
<?php if ($this->statusSummary->hosts_not_triggering_notifications || $this->statusSummary->services_not_triggering_notifications): ?>
<div class="box-separator feature-highlight"><?= $this->translate('Notifications'); ?></div>
<?php else: ?>
<div class="box-separator"><?= $this->translate('Notifications'); ?></div>
<?php endif ?>
<table>
<tbody>
<tr>
<td>
<?php if ($this->statusSummary->hosts_not_triggering_notifications): ?>
<div class="box entry feature_disabled">
<div class="box entry ">
<a href="<?= $this->href(
'monitoring/list/hosts',
array('host_notifications_enabled' => 0)
); ?>">
); ?>" class="feature-highlight">
<?= sprintf('%d hosts disabled', $this->statusSummary->hosts_not_triggering_notifications); ?>
</a>
<?php else: ?>
<div class="box entry feature_enabled">
<div class="box entry ">
<a href="<?= $this->href(
'monitoring/list/hosts',
array('host_notifications_enabled' => 1)
@ -90,15 +99,15 @@
</td>
<td>
<?php if ($this->statusSummary->services_not_triggering_notifications): ?>
<div class="box entry feature_disabled">
<div class="box entry">
<a href="<?= $this->href(
'monitoring/list/services',
array('service_notifications_enabled' => 0)
); ?>">
); ?>" class="feature-highlight">
<?= sprintf('%d services disabled', $this->statusSummary->services_not_triggering_notifications); ?>
</a>
<?php else: ?>
<div class="box entry feature_enabled">
<div class="box entry">
<a href="<?= $this->href(
'monitoring/list/services',
array('service_notifications_enabled' => 1)
@ -111,21 +120,25 @@
</tr>
</tbody>
</table>
<?php if ($this->statusSummary->hosts_not_processing_event_handlers || $this->statusSummary->services_not_processing_event_handlers): ?>
<div class="box-separator feature-highlight"><?= $this->translate('Event handlers'); ?></div>
<?php else: ?>
<div class="box-separator"><?= $this->translate('Event handlers'); ?></div>
<?php endif ?>
<table>
<tbody>
<tr>
<td>
<?php if ($this->statusSummary->hosts_not_processing_event_handlers): ?>
<div class="box entry feature_disabled">
<div class="box entry">
<a href="<?= $this->href(
'monitoring/list/hosts',
array('host_event_handler_enabled' => 0)
); ?>">
); ?>" class="feature-highlight">
<?= sprintf('%d hosts disabled', $this->statusSummary->hosts_not_processing_event_handlers); ?>
</a>
<?php else: ?>
<div class="box entry feature_enabled">
<div class="box entry">
<a href="<?= $this->href(
'monitoring/list/hosts',
array('host_event_handler_enabled' => 1)
@ -137,15 +150,15 @@
</td>
<td>
<?php if ($this->statusSummary->services_not_processing_event_handlers): ?>
<div class="box entry feature_disabled">
<div class="box entry">
<a href="<?= $this->href(
'monitoring/list/services',
array('service_event_handler_enabled' => 0)
); ?>">
); ?>" class="feature-highlight">
<?= sprintf('%d services disabled', $this->statusSummary->services_not_processing_event_handlers); ?>
</a>
<?php else: ?>
<div class="box entry feature_enabled">
<div class="box entry">
<a href="<?= $this->href(
'monitoring/list/services',
array('service_event_handler_enabled' => 1)

View File

@ -1,4 +1,9 @@
<div class="content">
<?php if (!$this->compact): ?>
<div class="controls">
<?= $this->tabs ?>
</div>
<?php endif ?>
<div class="content tactical">
<div class="boxview" data-base-target="col2">
<?= $this->render('tactical/components/problem_hosts.phtml'); ?>
<?= $this->render('tactical/components/ok_hosts.phtml'); ?>

View File

@ -50,10 +50,3 @@
@colorInvalid: #999;
@colorUnreachable: #dd66ff;
@colorUnreachableHandled: #ee99ff;
@colorActiveCheck: #44bb77;
@colorPassiveCheck: #44ccaa;
@colorDisabledCheck: #cccccc;
@colorEnabled: #44bb77;
@colorDisabled: #cccccc;
@colorFlapping: #16c3cc;

View File

@ -237,8 +237,8 @@ a.critical {
/* Box caption */
.boxview div.box h2 {
margin-top: 0;
margin-bottom: 0.4em;
margin-top: 0.2em;
margin-bottom: 0.6em;
color: white;
font-weight: bold;
@ -246,7 +246,7 @@ a.critical {
.boxview div.box h3 {
margin-top: 0;
margin-bottom: 0.4em;
margin-bottom: 0.6em;
font-size: 0.8em;
color: #eee;
@ -254,7 +254,7 @@ a.critical {
/* Box body of contents */
.boxview div.box.contents {
background: #eee;
background: #fbfbfb;
border-radius: 0.4em;
-moz-border-radius: 0.4em;
}
@ -279,12 +279,17 @@ a.critical {
}
.boxview div.box-separator {
border-style: solid;
border-color: #555;
font-size: 0.8em;
padding: 0.4em 0 0.4em;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 0;
border-right-width: 0;
font-weight: bold;
letter-spacing: 0.1em;
border-style: solid;
border-color: #555;
background-color: #bbb;
}
@ -321,28 +326,30 @@ a.critical {
/* Monitoring box element styles */
/* Host- and Servicegroup element styles */
div.box.entry.state_up, div.box.entry.state_ok {
border-left: 0.5em solid @colorOk;
border-left: 1em solid @colorOk;
}
div.box.entry.state_pending {
border-left: 0.5em solid @colorPending;
border-left: 1em solid @colorPending;
}
div.box.entry.state_down, div.box.entry.state_critical {
border-left: 0.5em solid @colorCritical;
border-left: 1em solid @colorCritical;
background-color: @colorCritical;
color: white;
}
div.box.entry.state_warning {
border-left: 0.5em solid @colorWarning;
border-left: 1em solid @colorWarning;
background-color: @colorWarning;
color: white;
}
div.box.entry.state_unreachable, div.box.entry.state_unknown {
border-left: 0.5em solid @colorUnknown;
border-left: 1em solid @colorUnknown;
background-color: @colorUnknown;
color: white;
}
@ -352,6 +359,27 @@ div.box.entry.handled {
color: inherit;
}
/* Tactical overview element styles */
div.tactical div.box {
min-height: 15em;
}
div.box.monitoringfeatures div.box-separator {
color: white;
background-color: @colorOk;
}
div.box.monitoringfeatures div.feature-highlight {
background-color: @colorCritical;
}
div.box.monitoringfeatures a.feature-highlight {
font-weight: bold;
}
/* Contactgroup element styles */
div.box.contactgroup {
width: 18em;
}
@ -367,7 +395,7 @@ div.box.contactgroup div.box.entry img {
margin: 0.4em;
float: left;
border: 2px solid white;
border: 2px solid LightGrey;
}
div.box.contactgroup div.box.entry a {