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;
}
}
}