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