Health: change UI layout and output ordering

application/controllers/HealthController.php

@@ -3,7 +3,6 @@
 namespace Icinga\Module\Director\Controllers;
 
 use dipl\Html\Html;
-use dipl\Html\Icon;
 use Icinga\Module\Director\Web\Widget\HealthCheckPluginOutput;
 use Icinga\Module\Director\Health;
 use Icinga\Module\Director\Web\Controller\ActionController;
@@ -12,6 +11,7 @@ class HealthController extends ActionController
 {
     public function indexAction()
     {
+        $this->setAutorefreshInterval(10);
         $this->tabs()->add('main', [
             'label' => $this->translate('Overview'),
             'url' => 'director'
@@ -20,7 +20,7 @@ class HealthController extends ActionController
             'url' => 'director/health'
         ])->activate('health');
 
-        $this->addTitle($this->translate('Director Health'));
+        $this->setTitle($this->translate('Director Health'));
         $health = new Health();
         $health->setDbResourceName($this->getDbResourceName());
         $output = new HealthCheckPluginOutput($health);

library/Director/Health.php

@@ -58,10 +58,10 @@ class Health
             return $checks;
         }
 
-        $checks[] = $this->checkSyncRules();
-        $checks[] = $this->checkImportSources();
-        $checks[] = $this->checkDirectorJobs();
         $checks[] = $this->checkDeployments();
+        $checks[] = $this->checkImportSources();
+        $checks[] = $this->checkSyncRules();
+        $checks[] = $this->checkDirectorJobs();
 
         return $checks;
     }

library/Director/Web/Widget/HealthCheckPluginOutput.php

@@ -32,7 +32,7 @@ class HealthCheckPluginOutput extends HtmlDocument
 
         foreach ($checks as $check) {
             $this->add([
-                $title = Html::tag('h2', $check->getName()),
+                $title = Html::tag('h1', $check->getName()),
                 $ul = Html::tag('ul', ['class' => 'health-check-result'])
             ]);
 
@@ -42,17 +42,21 @@ class HealthCheckPluginOutput extends HtmlDocument
                 foreach ($problems as $state => $count) {
                     $badges->add(Html::tag('span', [
                         'class' => ['badge', 'state-' . strtolower($state)],
-                        'title' => $this->translate('Critical Checks'),
+                        'title' => sprintf(
+                            $this->translate('%s: %d'),
+                            $this->translate($state),
+                            $count
+                        ),
                     ], $count));
                 }
                 $title->add($badges);
             }
 
             foreach ($check->getResults() as $result) {
+                $state = $result->getState()->getName();
                 $ul->add(Html::tag('li', [
-                    $this->colorizeState($result->getState()->getName()),
-                    $this->colorizeStates($result->getOutput())
-                ])->setSeparator(' '));
+                    'class' => 'state state-' . strtolower($state)
+                ], $this->highlightNames($result->getOutput()))->setSeparator(' '));
             }
             $this->state->raise($check->getState());
         }
@@ -63,30 +67,22 @@ class HealthCheckPluginOutput extends HtmlDocument
         return $this->state;
     }
 
-    protected function colorizeStates($string)
-    {
-        $string = Html::escape($string);
-        $string = preg_replace_callback(
-            "/'([^']+)'/",
-            [$this, 'highlightNames'],
-            $string
-        );
-
-        $string = preg_replace_callback(
-            '/(OK|WARNING|CRITICAL|UNKNOWN)/',
-            [$this, 'getColorized'],
-            $string
-        );
-
-        return new HtmlString($string);
-    }
-
     protected function colorizeState($state)
     {
         return Html::tag('span', ['class' => 'badge state-' . strtolower($state)], $state);
     }
 
-    protected function highlightNames($match)
+    protected function highlightNames($string)
+    {
+        $string = Html::escape($string);
+        return new HtmlString(preg_replace_callback(
+            "/'([^']+)'/",
+            [$this, 'highlightName'],
+            $string
+        ));
+    }
+
+    protected function highlightName($match)
     {
         return '"' . Html::tag('strong', $match[1]) . '"';
     }

public/css/module.less

@@ -1064,7 +1064,7 @@ form div.hint {
 
 ul.health-check-result {
   list-style-type: none;
-  padding-left: 2em;
+  padding: 0;
   margin-bottom: 2em;
   li {
     line-height: 2em;
@@ -1081,6 +1081,27 @@ ul.health-check-result {
   }
 }
 
+li.state {
+  border-left: 0.5em solid transparent;
+  margin-bottom: 0.5em;
+  padding-left: 1em;
+  &.state-ok {
+    border-color: @color-ok;
+  }
+  &.state-warning {
+    border-color: @color-warning;
+  }
+  &.state-critical {
+    border-color: @color-critical;
+  }
+  &.state-unknown {
+    border-color: @color-unknown;
+  }
+  &.state-pending {
+    border-color: @color-pending;
+  }
+}
+
 span.error {
   color: @colorCritical;