Split state badges in two rows

Author: jrauh01

library/Cube/CubeRenderer/HostStatusCubeRenderer.php

@@ -90,6 +90,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']));
@@ -98,6 +112,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

@@ -102,6 +102,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']));
@@ -110,6 +124,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

@@ -164,7 +164,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;
@@ -283,7 +283,7 @@ div.cube {
   }
 
   .state-badge {
-    font-size: 2em;
+    font-size: 1.6em;
 
     &.handled {
       &.state-down {
@@ -307,10 +307,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

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