From 09e32b63f84daa765116d6c1836c0919f273296a Mon Sep 17 00:00:00 2001
From: Bernd Erk <bernd.erk@netways.de>
Date: Tue, 29 Sep 2015 14:23:32 +0200
Subject: [PATCH] CSS and Parts: Tactical Overview redesin

---
 .../components/monitoringfeatures.phtml       |  12 +-
 .../servicestatesummarybyhoststate.phtml      |  12 +-
 modules/monitoring/public/css/module.less     | 113 ++++++++++++++++--
 3 files changed, 117 insertions(+), 20 deletions(-)

diff --git a/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml b/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml
index c3a16ae2a..16b565265 100644
--- a/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml
+++ b/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml
@@ -5,9 +5,9 @@
     <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>
+        <div class="box-separator badge feature-highlight"><?= $this->translate('Flap Detection'); ?></div>
 <?php else: ?>
-        <div class="box-separator"><?= $this->translate('Flap Detection'); ?></div>
+        <div class="box-separator badge"><?= $this->translate('Flap Detection'); ?></div>
 <?php endif ?>
         <table>
             <tbody>
@@ -126,9 +126,9 @@
             </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>
+        <div class="box-separator badge feature-highlight"><?= $this->translate('Notifications'); ?></div>
 <?php else: ?>
-        <div class="box-separator"><?= $this->translate('Notifications'); ?></div>
+        <div class="box-separator badge"><?= $this->translate('Notifications'); ?></div>
 <?php endif ?>
         <table>
             <tbody>
@@ -205,9 +205,9 @@
             </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>
+        <div class="box-separator badge feature-highlight"><?= $this->translate('Event Handlers'); ?></div>
 <?php else: ?>
-        <div class="box-separator"><?= $this->translate('Event Handlers'); ?></div>
+        <div class="box-separator badge"><?= $this->translate('Event Handlers'); ?></div>
 <?php endif ?>
         <table>
             <tbody>
diff --git a/modules/monitoring/application/views/scripts/tactical/components/parts/servicestatesummarybyhoststate.phtml b/modules/monitoring/application/views/scripts/tactical/components/parts/servicestatesummarybyhoststate.phtml
index af88ae441..1b5f70532 100644
--- a/modules/monitoring/application/views/scripts/tactical/components/parts/servicestatesummarybyhoststate.phtml
+++ b/modules/monitoring/application/views/scripts/tactical/components/parts/servicestatesummarybyhoststate.phtml
@@ -4,7 +4,7 @@ use Icinga\Module\Monitoring\Object\Service;
 
 ?>
 <?php if ($services_critical_handled || $services_critical_unhandled): ?>
-<div class="box entry state_<?= Service::getStateText(2); ?> <?= $services_critical_unhandled ? '' : 'handled'; ?>">
+<div class="box badge entry state-<?= Service::getStateText(2); ?> <?= $services_critical_unhandled ? '' : 'handled'; ?>">
 <?php if ($services_critical_unhandled): ?>
     <?= $this->qlink(
         $services_critical_unhandled . ' ' . Service::getStateText(2, true),
@@ -103,7 +103,7 @@ use Icinga\Module\Monitoring\Object\Service;
 </div>
 <?php endif ?>
 <?php if ($services_warning_handled || $services_warning_unhandled): ?>
-<div class="box entry state_<?= Service::getStateText(1); ?> <?= $services_warning_unhandled ? '' : 'handled'; ?>">
+<div class="box badge entry state-<?= Service::getStateText(1); ?> <?= $services_warning_unhandled ? '' : 'handled'; ?>">
 <?php if ($services_warning_unhandled): ?>
     <?= $this->qlink(
         $services_warning_unhandled . ' ' . Service::getStateText(1, true),
@@ -202,7 +202,7 @@ use Icinga\Module\Monitoring\Object\Service;
 </div>
 <?php endif ?>
 <?php if ($services_unknown_handled || $services_unknown_unhandled): ?>
-<div class="box entry state_<?= Service::getStateText(3); ?> <?= $services_unknown_unhandled ? '' : 'handled'; ?>">
+<div class="box badge entry state-<?= Service::getStateText(3); ?> <?= $services_unknown_unhandled ? '' : 'handled'; ?>">
 <?php if ($services_unknown_unhandled): ?>
     <?= $this->qlink(
         $services_unknown_unhandled . ' ' . Service::getStateText(3, true),
@@ -301,7 +301,7 @@ use Icinga\Module\Monitoring\Object\Service;
 </div>
 <?php endif ?>
 <?php if ($services_ok): ?>
-<div class="box entry state_<?= Service::getStateText(0); ?>">
+<div class="box badge entry state-<?= Service::getStateText(0); ?>">
     <?= $this->qlink(
         $services_ok . ' ' . Service::getStateText(0, true),
         'monitoring/list/services',
@@ -348,7 +348,7 @@ use Icinga\Module\Monitoring\Object\Service;
 </div>
 <?php endif ?>
 <?php if ($services_pending): ?>
-<div class="box entry state_<?= Service::getStateText(99); ?>">
+<div class="box badge entry state-<?= Service::getStateText(99); ?>">
     <?= $this->qlink(
         $services_pending . ' ' . Service::getStateText(99, true),
         'monitoring/list/services',
@@ -393,4 +393,4 @@ use Icinga\Module\Monitoring\Object\Service;
     ); ?>
 <?php endif ?>
 </div>
-<?php endif ?>
\ No newline at end of file
+<?php endif ?>
diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index 93702a385..d686cdd73 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -1,13 +1,110 @@
 /*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
 
-/* Badges */
-.state-badges {
-  > ul > li {
-    padding-right: 5px;
-    &:last-child {
-      padding-right: 0;
-    }
-  }
+/* Generic box element */
+
+.boxview a {
+  text-decoration: none;
+}
+
+.boxview > div.box {
+  text-align: center;
+  vertical-align: top;
+  display: inline-block; 
+  padding: 20px;
+  margin: 0.5em;
+}
+
+
+/* Box body of contents */
+
+.boxview div.box.contents {
+  padding-top: 20px;
+}
+
+.boxview div.box.contents table {
+  width: 100%;
+}
+
+.boxview div.box.contents td {
+  vertical-align: top;
+}
+
+/* Box entry */
+
+/* Any line of a box entry */
+.boxview div.box.entry a {
+  display: block;
+  color: inherit;
+}
+
+.boxview  div.box.badge {
+  border-radius: 3px;
+  margin: 5px;
+  padding: 5px;
+}
+
+.boxview div.box.entry a:hover {
+}
+
+/* First line of a box entry */
+.boxview div.box.entry a:first-child {
+}
+
+/* End of generic box element */
+
+/* Tactical overview element styles */
+
+.tactical > .boxview > div.box {
+  min-height: 30em;
+  min-width: 30em;
+}
+
+.tactical div.box.header {
+  min-height: 5em;
+  border-bottom:1px solid @gray-lighter;
+}
+
+div.box.contents.zero {
+}
+
+div.box.ok_hosts.state_up {
+  border: 2px solid @color-ok;
+  border-top: 15px solid @color-ok;
+}
+
+div.box.problem_hosts.state_down {
+  border: 2px solid @color-critical;
+  border-top: 15px solid @color-critical;
+}
+
+div.box.ok_hosts div.box.entry, div.box.problem_hosts div.box.entry {
+  min-width: 11.1em;
+}
+
+div.box.monitoringfeatures {
+  border: 2px solid @gray;
+  border-top: 15px solid @gray;
+}
+
+div.box.monitoringfeatures div.box-separator {
+  color: white;
+  background-color: @color-ok;
+}
+
+div.box.monitoringfeatures div.feature-highlight {
+  background-color: @color-critical;
+}
+
+div.box.monitoringfeatures a.feature-highlight {
+}
+
+div.box.hostservicechecks {
+  border: 2px solid @gray;
+  border-top: 15px solid @gray;
+}
+
+div.box.hostservicechecks th {
+  padding-bottom: 20px;
 }
 
 //p.pluginoutput {