From 86485cb8ef06d25bf87f51b9cfdac04581c0a5f3 Mon Sep 17 00:00:00 2001 From: Johannes Meyer <johannes.meyer@netways.de> Date: Thu, 20 Nov 2014 12:44:46 +0100 Subject: [PATCH] Re-design host- and servicegroupsummary --- .../views/scripts/list/hostgroups.phtml | 53 ++----- .../views/scripts/list/servicegroups.phtml | 53 ++----- public/css/icinga/monitoring-colors.less | 134 ++++++++---------- 3 files changed, 83 insertions(+), 157 deletions(-) diff --git a/modules/monitoring/application/views/scripts/list/hostgroups.phtml b/modules/monitoring/application/views/scripts/list/hostgroups.phtml index 246de7f1f..2b8ad6c4f 100644 --- a/modules/monitoring/application/views/scripts/list/hostgroups.phtml +++ b/modules/monitoring/application/views/scripts/list/hostgroups.phtml @@ -21,46 +21,46 @@ ?> <table class="groupview" data-base-target="_next"> <thead> - <th style="text-align: left;"><?= $this->translate('Last Problem'); ?></th> - <th style="text-align: left;"><?= $this->translate('Host Group'); ?></th> + <th><?= $this->translate('Last Problem'); ?></th> + <th><?= $this->translate('Host Group'); ?></th> <th><?= $this->translate('Total Services'); ?></th> - <th colspan="5"><?= $this->translate('Service States'); ?></th> + <th><?= $this->translate('Service States'); ?></th> </thead> <tbody> <?php foreach ($hostgroups as $h): ?> <tr href="<?= $this->href('monitoring/list/services', array('hostgroup' => $h->hostgroup)); ?>"> <?php if ($h->services_critical_last_state_change_unhandled): ?> - <td class="state change critical"> + <td class="state change critical unhandled"> <strong><?= $this->translate('CRITICAL'); ?></strong> <br> <?= $this->prefixedTimeSince($h->services_critical_last_state_change_unhandled); ?> </td> <?php elseif ($h->services_unknown_last_state_change_unhandled): ?> - <td class="state change unknown"> + <td class="state change unknown unhandled"> <strong><?= $this->translate('UNKNOWN'); ?></strong> <br> <?= $this->prefixedTimeSince($h->services_unknown_last_state_change_unhandled); ?> </td> <?php elseif ($h->services_warning_last_state_change_unhandled): ?> - <td class="state change warning"> + <td class="state change warning unhandled"> <strong><?= $this->translate('WARNING'); ?></strong> <br> <?= $this->prefixedTimeSince($h->services_warning_last_state_change_unhandled); ?> </td> <?php elseif ($h->services_critical_last_state_change_handled): ?> - <td class="state change critical handled"> + <td class="state change critical"> <strong><?= $this->translate('CRITICAL'); ?></strong> <br> <?= $this->prefixedTimeSince($h->services_critical_last_state_change_handled); ?> </td> <?php elseif ($h->services_unknown_last_state_change_handled): ?> - <td class="state change unknown handled"> + <td class="state change unknown"> <strong><?= $this->translate('UNKNOWN'); ?></strong> <br> <?= $this->prefixedTimeSince($h->services_unknown_last_state_change_handled); ?> </td> <?php elseif ($h->services_warning_last_state_change_handled): ?> - <td class="state change warning handled"> + <td class="state change warning"> <strong><?= $this->translate('WARNING'); ?></strong> <br> <?= $this->prefixedTimeSince($h->services_warning_last_state_change_handled); ?> @@ -78,12 +78,12 @@ <?= $this->prefixedTimeSince($h->services_pending_last_state_change); ?> </td> <?php endif ?> - <td> + <td class="groupname"> <a href="<?= $this->href('monitoring/list/services', array('hostgroup' => $h->hostgroup)); ?>"> <?= $h->hostgroup; ?> </a> </td> - <td class="services-total"> + <td class="total"> <?= $h->services_total; ?> </td> <td class="state"> @@ -100,13 +100,7 @@ <?= $h->services_ok; ?> </a> </span> - <?php else: ?> - <span class="no-state"> - - - </span> <?php endif ?> - </td> - <td class="state"> <?php if ($h->services_critical_unhandled): ?> <span class="state critical"> <a href="<?= $this->href( @@ -141,13 +135,6 @@ <?php if ($h->services_critical_unhandled): ?> </span> <?php endif ?> - <?php if (! $h->services_critical_unhandled && !$h->services_critical_handled): ?> - <span class="no-state"> - - - </span> - <?php endif ?> - </td> - <td class="state"> <?php if ($h->services_unknown_unhandled): ?> <span class="state unknown"> <a href="<?= $this->href( @@ -182,13 +169,6 @@ <?php if ($h->services_unknown_unhandled): ?> </span> <?php endif ?> - <?php if (! $h->services_unknown_unhandled && !$h->services_unknown_handled): ?> - <span class="no-state"> - - - </span> - <?php endif ?> - </td> - <td class="state"> <?php if ($h->services_warning_unhandled): ?> <span class="state warning"> <a href="<?= $this->href( @@ -223,13 +203,6 @@ <?php if ($h->services_warning_unhandled): ?> </span> <?php endif ?> - <?php if (! $h->services_warning_unhandled && !$h->services_warning_handled): ?> - <span class="no-state"> - - - </span> - <?php endif ?> - </td> - <td class="state"> <?php if ($h->services_pending): ?> <span class="state pending"> <a href="<?= $this->href( @@ -243,10 +216,6 @@ <?= $h->services_pending; ?> </a> </span> - <?php else: ?> - <span class="no-state"> - - - </span> <?php endif ?> </td> </tr> diff --git a/modules/monitoring/application/views/scripts/list/servicegroups.phtml b/modules/monitoring/application/views/scripts/list/servicegroups.phtml index 02bb00593..b7898de05 100644 --- a/modules/monitoring/application/views/scripts/list/servicegroups.phtml +++ b/modules/monitoring/application/views/scripts/list/servicegroups.phtml @@ -21,46 +21,46 @@ ?> <table class="groupview" data-base-target="_next"> <thead> - <th style="text-align: left;"><?= $this->translate('Last Problem'); ?></th> - <th style="text-align: left;"><?= $this->translate('Service Group'); ?></th> + <th><?= $this->translate('Last Problem'); ?></th> + <th><?= $this->translate('Service Group'); ?></th> <th><?= $this->translate('Total Services'); ?></th> - <th colspan="5"><?= $this->translate('Service States'); ?></th> + <th><?= $this->translate('Service States'); ?></th> </thead> <tbody> <?php foreach ($servicegroups as $s): ?> <tr href="<?= $this->href('monitoring/list/services', array('servicegroup' => $s->servicegroup)); ?>"> <?php if ($s->services_critical_last_state_change_unhandled): ?> - <td class="state change critical"> + <td class="state change critical unhandled"> <strong><?= $this->translate('CRITICAL'); ?></strong> <br> <?= $this->prefixedTimeSince($s->services_critical_last_state_change_unhandled); ?> </td> <?php elseif ($s->services_unknown_last_state_change_unhandled): ?> - <td class="state change unknown"> + <td class="state change unknown unhandled"> <strong><?= $this->translate('UNKNOWN'); ?></strong> <br> <?= $this->prefixedTimeSince($s->services_unknown_last_state_change_unhandled); ?> </td> <?php elseif ($s->services_warning_last_state_change_unhandled): ?> - <td class="state change warning"> + <td class="state change warning unhandled"> <strong><?= $this->translate('WARNING'); ?></strong> <br> <?= $this->prefixedTimeSince($s->services_warning_last_state_change_unhandled); ?> </td> <?php elseif ($s->services_critical_last_state_change_handled): ?> - <td class="state change critical handled"> + <td class="state change critical"> <strong><?= $this->translate('CRITICAL'); ?></strong> <br> <?= $this->prefixedTimeSince($s->services_critical_last_state_change_handled); ?> </td> <?php elseif ($s->services_unknown_last_state_change_handled): ?> - <td class="state change unknown handled"> + <td class="state change unknown"> <strong><?= $this->translate('UNKNOWN'); ?></strong> <br> <?= $this->prefixedTimeSince($s->services_unknown_last_state_change_handled); ?> </td> <?php elseif ($s->services_warning_last_state_change_handled): ?> - <td class="state change warning handled"> + <td class="state change warning"> <strong><?= $this->translate('WARNING'); ?></strong> <br> <?= $this->prefixedTimeSince($s->services_warning_last_state_change_handled); ?> @@ -78,12 +78,12 @@ <?= $this->prefixedTimeSince($s->services_pending_last_state_change); ?> </td> <?php endif ?> - <td> + <td class="groupname"> <a href="<?= $this->href('monitoring/list/services', array('servicegroup' => $s->servicegroup)); ?>"> <?= $s->servicegroup; ?> </a> </td> - <td class="services-total"> + <td class="total"> <?= $s->services_total; ?> </td> <td class="state"> @@ -100,13 +100,7 @@ <?= $s->services_ok; ?> </a> </span> - <?php else: ?> - <span class="no-state"> - - - </span> <?php endif ?> - </td> - <td class="state"> <?php if ($s->services_critical_unhandled): ?> <span class="state critical"> <a href="<?= $this->href( @@ -141,13 +135,6 @@ <?php if ($s->services_critical_unhandled): ?> </span> <?php endif ?> - <?php if (! $s->services_critical_unhandled && !$s->services_critical_handled): ?> - <span class="no-state"> - - - </span> - <?php endif ?> - </td> - <td class="state"> <?php if ($s->services_unknown_unhandled): ?> <span class="state unknown"> <a href="<?= $this->href( @@ -182,13 +169,6 @@ <?php if ($s->services_unknown_unhandled): ?> </span> <?php endif ?> - <?php if (! $s->services_unknown_unhandled && !$s->services_unknown_handled): ?> - <span class="no-state"> - - - </span> - <?php endif ?> - </td> - <td class="state"> <?php if ($s->services_warning_unhandled): ?> <span class="state warning"> <a href="<?= $this->href( @@ -223,13 +203,6 @@ <?php if ($s->services_warning_unhandled): ?> </span> <?php endif ?> - <?php if (! $s->services_warning_unhandled && !$s->services_warning_handled): ?> - <span class="no-state"> - - - </span> - <?php endif ?> - </td> - <td class="state"> <?php if ($s->services_pending): ?> <span class="state pending"> <a href="<?= $this->href( @@ -243,10 +216,6 @@ <?= $s->services_pending; ?> </a> </span> - <?php else: ?> - <span class="no-state"> - - - </span> <?php endif ?> </td> </tr> diff --git a/public/css/icinga/monitoring-colors.less b/public/css/icinga/monitoring-colors.less index f705b7844..52154c24e 100644 --- a/public/css/icinga/monitoring-colors.less +++ b/public/css/icinga/monitoring-colors.less @@ -829,18 +829,18 @@ table.groupview { border-collapse: separate; border-spacing: 0.1em; - thead th { + th { font-size: 0.9em; + text-align: left; + white-space: nowrap; } - tbody { - tr { - &:hover { - color: #333; - } + td { + &.groupname { + width: 60%; a { - color: #333; + color: inherit; text-decoration: none; &:hover { @@ -849,19 +849,19 @@ table.groupview { } } - td.services-total { + &.total { width: 10%; - text-align: center; } - td.state { - width: 10%; - color: white; - text-align: center; + &.state { + width: 20%; + white-space: nowrap; &.change { width: 10%; - white-space: nowrap; + text-align: center; + border-left-width: 1.5em; + border-left-style: solid; padding: 0.3em 0.5em 0.3em 0.5em; strong { @@ -871,70 +871,58 @@ table.groupview { span.timesince { font-size: 0.8em; } - } + + &.ok { + border-color: @colorOk; + } - &.ok { - color: #333; - border-left-style: solid; - border-left-width: 1.5em; - border-color: @colorOk; - } + &.pending { + border-color: @colorPending; + } - &.pending { - color: #333; - border-left-style: solid; - border-left-width: 1.5em; - border-color: @colorPending; - } - - &.warning { - background-color: @colorWarning; - - &.handled { - background-color: inherit; - color: #333; - border-left-style: solid; - border-left-width: 1.5em; + &.warning { border-color: @colorWarningHandled; - } - } - &.unknown { - background-color: @colorUnknown; - - &.handled { - color: #333; - background-color: inherit; - border-left-style: solid; - border-left-width: 1.5em; - border-color: @colorUnknownHandled; - } - } - - &.critical { - background-color: @colorCritical; - - &.handled { - color: #333; - background-color: inherit; - border-left-style: solid; - border-left-width: 1.5em; - border-color: @colorCriticalHandled; - } - } - - span { - &.no-state { - color: #333; - } - - &.state { - &.handled { - margin-right: 2px; - } - - a { + &.unhandled { color: white; + border-left-width: 0; + background-color: @colorWarning; + } + } + + &.unknown { + border-color: @colorUnknownHandled; + + &.unhandled { + color: white; + border-left-width: 0; + background-color: @colorUnknown; + } + } + + &.critical { + border-color: @colorCriticalHandled; + + &.unhandled { + color: white; + border-left-width: 0; + background-color: @colorCritical; + } + } + } + + span.state { + &.handled { + margin-right: 2px; + } + + a { + font-size: 0.9em; + color: white; + text-decoration: none; + + &:hover { + text-decoration: underline; } } }