From 73d8153b5991491bce08259d27f03f2c3d33ed22 Mon Sep 17 00:00:00 2001
From: Bernd Erk <bernd.erk@netways.de>
Date: Thu, 1 Oct 2015 08:34:20 +0200
Subject: [PATCH] CSS: col layout overviews and timeline

---
 .../views/scripts/health/info.phtml           |   6 +-
 .../views/scripts/health/stats.phtml          |   4 +-
 .../components/hostservicechecks.phtml        |   2 +-
 .../components/monitoringfeatures.phtml       |   2 +-
 .../tactical/components/ok_hosts.phtml        |   2 +-
 .../tactical/components/problem_hosts.phtml   |   2 +-
 .../views/scripts/tactical/index.phtml        |   2 +-
 .../views/scripts/timeline/index.phtml        |   4 +-
 modules/monitoring/public/css/module.less     | 104 +++++++++++++++++-
 9 files changed, 113 insertions(+), 15 deletions(-)

diff --git a/modules/monitoring/application/views/scripts/health/info.phtml b/modules/monitoring/application/views/scripts/health/info.phtml
index 370b641ce..520cd5f19 100644
--- a/modules/monitoring/application/views/scripts/health/info.phtml
+++ b/modules/monitoring/application/views/scripts/health/info.phtml
@@ -8,9 +8,9 @@ if (! $this->compact): ?>
 </div>
 <?php endif ?>
 
-<div class="content processinfo">
+<div class="content processinfo grid">
     <div class="boxview">
-        <div class="box process">
+        <div class="box process col-1-2">
             <h2><?= $this->translate('Process Info') ?></h2>
             <table class="avp">
                 <tbody>
@@ -75,7 +75,7 @@ if (! $this->compact): ?>
                 </div>
             <?php endif ?>
         </div>
-        <div class="box features">
+        <div class="box features col-1-2">
             <?= $this->toggleFeaturesForm; ?>
         </div>
     </div>
diff --git a/modules/monitoring/application/views/scripts/health/stats.phtml b/modules/monitoring/application/views/scripts/health/stats.phtml
index d77a94150..05e6c9085 100644
--- a/modules/monitoring/application/views/scripts/health/stats.phtml
+++ b/modules/monitoring/application/views/scripts/health/stats.phtml
@@ -8,9 +8,9 @@ if (! $this->compact): ?>
 </div>
 <?php endif ?>
 
-<div class="content stats">
+<div class="content stats grid">
     <div class="boxview">
-        <div class="box stats">
+        <div class="box stats col-1-2">
             <h3><?= $this->unhandledProblems ?> <?= $this->translate('Unhandled Problems:') ?>
                 <span class="badge badge-critical"> <?= $this->unhandledProblems ?> </span>
             </h3>
diff --git a/modules/monitoring/application/views/scripts/tactical/components/hostservicechecks.phtml b/modules/monitoring/application/views/scripts/tactical/components/hostservicechecks.phtml
index af727bc12..e6dc0bea2 100644
--- a/modules/monitoring/application/views/scripts/tactical/components/hostservicechecks.phtml
+++ b/modules/monitoring/application/views/scripts/tactical/components/hostservicechecks.phtml
@@ -1,4 +1,4 @@
-<div class="box hostservicechecks">
+<div class="box hostservicechecks col-1-2">
     <div class="box header">
         <h2><?= $this->translate('Host and Service Checks'); ?></h2>
     </div>
diff --git a/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml b/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml
index 16b565265..eeeec16af 100644
--- a/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml
+++ b/modules/monitoring/application/views/scripts/tactical/components/monitoringfeatures.phtml
@@ -1,4 +1,4 @@
-<div class="box monitoringfeatures">
+<div class="box monitoringfeatures col-1-2">
     <div class="box header">
         <h2><?= $this->translate('Monitoring Features'); ?></h2>
     </div>
diff --git a/modules/monitoring/application/views/scripts/tactical/components/ok_hosts.phtml b/modules/monitoring/application/views/scripts/tactical/components/ok_hosts.phtml
index 7f25b6e5f..ab6961ebb 100644
--- a/modules/monitoring/application/views/scripts/tactical/components/ok_hosts.phtml
+++ b/modules/monitoring/application/views/scripts/tactical/components/ok_hosts.phtml
@@ -8,7 +8,7 @@ $service_problems = (
     $this->statusSummary->services_unknown_unhandled_on_ok_hosts
 );
 ?>
-<div class="box ok_hosts state_<?= $this->statusSummary->hosts_up ? 'up' : 'pending'; ?>">
+<div class="box ok_hosts state_<?= $this->statusSummary->hosts_up ? 'up' : 'pending'; ?> col-1-2">
     <div class="box header">
     <?php if ($this->statusSummary->hosts_up): ?>
         <h2><?= $this->qlink(
diff --git a/modules/monitoring/application/views/scripts/tactical/components/problem_hosts.phtml b/modules/monitoring/application/views/scripts/tactical/components/problem_hosts.phtml
index faeb98668..f06170c7a 100644
--- a/modules/monitoring/application/views/scripts/tactical/components/problem_hosts.phtml
+++ b/modules/monitoring/application/views/scripts/tactical/components/problem_hosts.phtml
@@ -3,7 +3,7 @@
     if (!$this->statusSummary->hosts_down_unhandled && !$this->statusSummary->hosts_unreachable_unhandled) {
         echo ' handled';
     }
-?>">
+?> col-1-2">
     <div class="box header">
     <?php if ($this->statusSummary->hosts_down): ?>
         <h2><?= $this->qlink(
diff --git a/modules/monitoring/application/views/scripts/tactical/index.phtml b/modules/monitoring/application/views/scripts/tactical/index.phtml
index 3882b27b3..b23872960 100644
--- a/modules/monitoring/application/views/scripts/tactical/index.phtml
+++ b/modules/monitoring/application/views/scripts/tactical/index.phtml
@@ -3,7 +3,7 @@
     <?= $this->tabs ?>
 </div>
 <?php endif ?>
-<div class="content tactical">
+<div class="content tactical grid">
     <div class="boxview" data-base-target="_next">
 <?php if ($this->statusSummary->hosts_down || $this->statusSummary->hosts_unreachable): ?>
         <?= $this->render('tactical/components/problem_hosts.phtml'); ?>
diff --git a/modules/monitoring/application/views/scripts/timeline/index.phtml b/modules/monitoring/application/views/scripts/timeline/index.phtml
index 56312828d..891a7f2b5 100644
--- a/modules/monitoring/application/views/scripts/timeline/index.phtml
+++ b/modules/monitoring/application/views/scripts/timeline/index.phtml
@@ -8,10 +8,10 @@ $firstRow = ! $beingExtended;
 if (! $beingExtended && !$this->compact): ?>
 <div class="controls">
     <?= $this->tabs; ?>
-    <div style="float: right;" class="dontprint">
+    <div class="dontprint">
         <?= $intervalBox; ?>
     </div>
-    <div style="margin: 1em;" class="timeline-legend">
+    <div class="timeline-legend">
         <h2><?= $this->translate('Legend'); ?></h2>
 <?php foreach ($groupInfo as $labelAndColor): ?>
         <span style="background-color: <?= $labelAndColor['color']; ?>;">
diff --git a/modules/monitoring/public/css/module.less b/modules/monitoring/public/css/module.less
index 967c71ab2..5cb12946c 100644
--- a/modules/monitoring/public/css/module.less
+++ b/modules/monitoring/public/css/module.less
@@ -23,7 +23,6 @@
   vertical-align: top;
   display: inline-block;
   padding: 20px;
-  margin: 0.5em;
 }
 
 
@@ -67,7 +66,6 @@
 
 .tactical > .boxview > div.box {
   min-height: 30em;
-  min-width: 30em;
 }
 
 .tactical div.box.header {
@@ -206,7 +204,6 @@ div.box.stats {
 
 .stats > .boxview > div.box {
   min-height: 30em;
-  width:95%;
 }
 
 .stats > .avp > tbody {
@@ -232,6 +229,107 @@ div.box.stats {
   padding-bottom: 15px;
 }
 
+/* Monitoring timeline styles */
+
+div.timeline-legend {
+  padding: 0.5em;
+  margin-top: 2em;
+  border: 1px solid @gray-lighter;
+  border-left: 15px solid @gray;
+
+  h2 {
+    margin: 0;
+    margin-left: 0.5em;
+    line-height: 1.1em;
+  }
+
+  & > span {
+    display: inline-block;
+    padding: 0.5em;
+    margin: 0.5em;
+
+    span {
+      white-space: nowrap;
+      min-width: 25px;
+      font-family: tahoma, verdana, sans-serif;
+      font-weight: @font-weight-bold;
+      font-size: 11px;
+      text-align: center;
+      color: @text-color-inverted;
+      padding-left: 5px;
+      padding-right: 5px;
+      padding-top: 2px;
+      padding-bottom: 2px;
+    }
+  }
+}
+
+div.timeline {
+  div.timeframe {
+    height: 7em;
+    margin-bottom: 1em;
+    clear: left;
+
+    span {
+      width: 8em;
+      margin-top: 2.3em;
+      margin-right: 1.5em;
+      display: block;
+      float: left;
+      text-align: center;
+
+      a {
+        font-weight: bold;
+        text-decoration: none;
+        white-space: nowrap;
+
+        &:hover {
+          text-decoration: underline;
+
+        }
+      }
+    }
+
+    div.circle-box {
+      height: 100%;
+      margin-right: 0.5em;
+      position: relative;
+      float: left;
+
+      div.outer-circle {
+        position: absolute;
+        top: 50%;
+
+        &.extrapolated {
+          border-width: 2px;
+          border-style: dotted;
+          border-radius: 100%;
+        }
+
+        a.inner-circle {
+          display: block;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          border-radius: 100%;
+        }
+      }
+    }
+  }
+
+  hr {
+    border: 0;
+    height: 1px;
+    background-image: linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
+    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
+    background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
+    background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
+    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
+  }
+}
+
+/* End of monitoring timeline styles */
+
 
 //p.pluginoutput {
 //  width: 100%;