tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
modules/monitoring/application/controllers/TacticalController.php
View File

@ -4,11 +4,20 @@
use Icinga\Module\Monitoring\Controller as MonitoringController; use Icinga\Module\Monitoring\Controller as MonitoringController;
use Icinga\Module\Monitoring\DataView\StatusSummary; use Icinga\Module\Monitoring\DataView\StatusSummary;
use Icinga\Web\Url;
class Monitoring_TacticalController extends MonitoringController class Monitoring_TacticalController extends MonitoringController
{ {
public function indexAction() 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->view->statusSummary = StatusSummary::fromRequest(
$this->_request, $this->_request,
array( array(

5
modules/monitoring/application/views/scripts/list/contactgroups.phtml
View File

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

53
modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml
View File

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

7
modules/monitoring/application/views/scripts/tactical/index.phtml
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"> <div class="boxview" data-base-target="col2">
<?= $this->render('tactical/components/problem_hosts.phtml'); ?> <?= $this->render('tactical/components/problem_hosts.phtml'); ?>
<?= $this->render('tactical/components/ok_hosts.phtml'); ?> <?= $this->render('tactical/components/ok_hosts.phtml'); ?>

7
public/css/icinga/layout-colors.less
View File

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

52
public/css/icinga/monitoring-colors.less
View File

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