Split state badges into two rows

Display unhandled and handled state badges on separate rows so the cube stays
readable when many states are present. Adjust CSS grid layout accordingly.

Author: jrauh01

library/Cube/CubeRenderer/HostStatusCubeRenderer.php

@@ -91,6 +91,20 @@ protected function createIcingaDbCubeBadges(object $parts, object $facts): HtmlD
         $filter = $this->getBadgeFilter($facts);
         $mainBadge = $this->getMainBadge($parts);
 
+        $partsBottom = new stdClass();
+        $bottomKeys = [
+            'hosts_unreachable_unhandled',
+            'hosts_unreachable_handled',
+            'hosts_pending'
+        ];
+
+        foreach ($bottomKeys as $key) {
+            if (property_exists($parts, $key)) {
+                $partsBottom->$key = $parts->$key;
+                unset($parts->$key);
+            }
+        }
+
         $main = (new HostStateBadges($mainBadge))
             ->setBaseFilter($filter)
             ->addAttributes(new Attributes(['data-base-target' => '_next']));
@@ -99,6 +113,9 @@ protected function createIcingaDbCubeBadges(object $parts, object $facts): HtmlD
             'span',
             new Attributes(['class' => 'others']),
             (new HostStateBadges($parts))
+                ->setBaseFilter($filter)
+                ->addAttributes(new Attributes(['data-base-target' => '_next'])),
+            (new HostStateBadges($partsBottom))
                 ->setBaseFilter($filter)
                 ->addAttributes(new Attributes(['data-base-target' => '_next']))
         );

library/Cube/CubeRenderer/ServiceStatusCubeRenderer.php

@@ -103,6 +103,20 @@ protected function createIcingaDbCubeBadges(object $parts, object $facts): HtmlD
         $filter = $this->getBadgeFilter($facts);
         $mainBadge = $this->getMainBadge($parts);
 
+        $partsBottom = new stdClass();
+        $bottomKeys = [
+            'services_unknown_unhandled',
+            'services_unknown_handled',
+            'services_pending'
+        ];
+
+        foreach ($bottomKeys as $key) {
+            if (property_exists($parts, $key)) {
+                $partsBottom->$key = $parts->$key;
+                unset($parts->$key);
+            }
+        }
+
         $main = (new ServiceStateBadges($mainBadge))
             ->setBaseFilter($filter)
             ->addAttributes(new Attributes(['data-base-target' => '_next']));
@@ -111,6 +125,9 @@ protected function createIcingaDbCubeBadges(object $parts, object $facts): HtmlD
             'span',
             new Attributes(['class' => 'others']),
             (new ServiceStateBadges($parts))
+                ->setBaseFilter($filter)
+                ->addAttributes(new Attributes(['data-base-target' => '_next'])),
+            (new ServiceStateBadges($partsBottom))
                 ->setBaseFilter($filter)
                 ->addAttributes(new Attributes(['data-base-target' => '_next']))
         );

public/css/module.less

@@ -165,7 +165,7 @@ div.cube {
       display: flex;
       text-align: center;
       color: @text-color-on-icinga-blue;
-      margin-bottom: 1em;
+      margin-bottom: 0.5em;
 
       > a:first-child {
         flex: 1;
@@ -284,7 +284,7 @@ div.cube {
   }
 
   .state-badge {
-    font-size: 2em;
+    font-size: 1.6em;
 
     &.handled {
       &.state-down {
@@ -308,10 +308,11 @@ div.cube {
   .others {
     display: flex;
     justify-content: center;
+    align-items: center;
+    flex-direction: column;
 
     span {
-      margin-top: 0.8em;
-      font-size: 1em;
+      font-size: 0.9em;
       &:not(.state-badge) {
         margin-left: 0.2em;
       }

public/css/state-badges.less

@@ -3,7 +3,8 @@
 
 .state-badges {
   padding: 0;
-  margin: 0;
+  margin: 0.1em 0;
+  min-height: 2em;
 
   ul {
     padding: 0;