Update UI for downtime states

refs #10
Icinga · Oct 11, 2017 · ed160b8 · ed160b8
1 parent bf59324
commit ed160b8
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 6 deletions.
diff --git a/application/views/helpers/Badges.php b/application/views/helpers/Badges.php
@@ -18,14 +18,17 @@ protected function prettyTitle($identifier)
         return trim($s);
     }
 
-    public function badges(TLVStatus $status, $problemsOnly = true)
+    public function badges(TLVStatus $status, $problemsOnly = true, $showTotal = false)
     {
         $htm = '';
 
         $values = false;
         $htm .= '<div class="badges">';
         foreach ($status->getProperties() as $key => $value) {
-            if ($problemsOnly === true && ($key === 'total' || $key === 'ok')) {
+            if (
+                $problemsOnly === true && ($key === 'ok' || $key === 'downtime_active')
+                || ($key === 'total' && $showTotal !== true)
+            ) {
                 continue;
             }
             if ($value !== null && $value > 0) {

diff --git a/application/views/helpers/Tree.php b/application/views/helpers/Tree.php
@@ -86,12 +86,12 @@ public function tree(TLVTreeNode $node, $classes = array(), $level = 0)
             $htm .= $this->view->icon($icon) . ' ';
             $htm .= $this->view->qlink($title, $url);
             $htm .= $htmExtra;
-            $htm .= ' ' . $this->view->badges($status);
+            $htm .= ' ' . $this->view->badges($status, false);
             $htm .= '</div>';
         } else {
             $htm .= "<div class=\"tlv-tree-node tlv-status-section collapsible $statusClass $cssClasses\" title=\"$title\">";
             $htm .= '<div class="tlv-tree-title">';
-            $htm .= $this->view->badges($status, $level === 0 ? false : true);
+            $htm .= $this->view->badges($status, false, $level === 0 ? true : false);
             $htm .= '<i class="icon icon-bycss collapse-handle"></i> ';
             $htm .= $this->view->qlink($title, $url);
             $htm .= $htmExtra;

diff --git a/application/views/scripts/show/index.phtml b/application/views/scripts/show/index.phtml
@@ -14,7 +14,7 @@ if (! $this->compact):
             <?= $this->translate('Last update') ?>
             <?= $this->timeAgo($tree->getFetchTime()) ?>
         </div>
-        <?= $this->badges($tree->getStatus(), false) ?>
+        <?= $this->badges($tree->getStatus(), false, true) ?>
         <h1><?= $view->getMeta('name') ?></h1>
         <?= $this->partial('show/actions.phtml', $this) ?>
     </div>

diff --git a/application/views/scripts/show/tree.phtml b/application/views/scripts/show/tree.phtml
@@ -16,7 +16,7 @@ if (! $this->compact):
             <?= $this->translate('Last update') ?>
             <?= $this->timeAgo($tree->getFetchTime()) ?>
         </div>
-        <?= $this->badges($tree->getStatus(), false) ?>
+        <?= $this->badges($tree->getStatus(), false, true) ?>
         <h1><?= $view->getMeta('name') ?></h1>
         <?= $this->partial('show/actions.phtml', $this) ?>
     </div>

diff --git a/public/css/module.less b/public/css/module.less
@@ -57,6 +57,10 @@
 @tlv-color-unknown-handled-fg: #57326d;
 @tlv-color-ok-bg: @colorOk;
 @tlv-color-ok-fg: white;
+@tlv-color-downtime-bg: @colorOk;
+@tlv-color-downtime-fg: #333;
+@tlv-color-downtime-handled-bg: @colorOk;
+@tlv-color-downtime-handled-fg: #ffff00;
 @tlv-color-pending-bg: @colorPending;
 @tlv-color-pending-fg: #32486d;
 @tlv-color-missing-bg: #ccc;
@@ -91,6 +95,14 @@
     background-color: @tlv-color-ok-bg;
     color: @tlv-color-ok-fg;
   }
+  &.downtime.active {
+    background-color: @tlv-color-downtime-bg;
+    color: @tlv-color-downtime-fg;
+  }
+  &.downtime.handled {
+    background-color: @tlv-color-downtime-handled-bg;
+    color: @tlv-color-downtime-handled-fg;
+  }
   &.pending {
     background-color: @tlv-color-pending-bg;
     color: @tlv-color-pending-fg;