TreeRenderer: improve layout, add badges

library/Businessprocess/Renderer/TreeRenderer.php

@@ -38,7 +38,13 @@ class TreeRenderer extends Renderer
     public function renderBp(BusinessProcess $bp)
     {
         $html = '';
-        foreach ($bp->getRootNodes() as $name => $node) {
+        if ($this->wantsRootNodes()) {
+            $nodes = $bp->getChildren();
+        } else {
+            $nodes = $this->parent->getChildren();
+        }
+
+        foreach ($nodes as $name => $node) {
             $html .= $this->renderNode($bp, $node);
         }
 
@@ -89,12 +95,15 @@ class TreeRenderer extends Renderer
     }
 
     /**
+     * @param BusinessProcess $bp
      * @param Node $node
+     * @param array $path
+     *
      * @return string
      */
     public function renderNode(BusinessProcess $bp, Node $node, $path = array())
     {
-         $table = Element::create(
+        $table = Element::create(
             'table',
             array(
                 'id' => $this->getId($node, $path),
@@ -132,7 +141,7 @@ class TreeRenderer extends Renderer
         $td = $tr->createElement('td');
         $td->addContent($this->getActionIcons($bp, $node));
 
-        if ($node->hasInfoUrl()) {
+        if ($node instanceof BpNode && $node->hasInfoUrl()) {
             $td->add($this->createInfoAction($node));
         }
 
@@ -142,7 +151,18 @@ class TreeRenderer extends Renderer
 
         $link = $node->getLink();
         $link->addContent($this->getNodeIcons($node));
-        $link->addContent($this->timeSince($node->getLastStateChange()));
+
+        if ($node->hasChildren()) {
+            $link->addContent($this->renderStateBadges($node->getStateSummary()));
+        }
+
+        if ($time = $node->getLastStateChange()) {
+            $since = $this->timeSince($time)->prependContent(
+                sprintf(' (%s ', $node->getStateName())
+            )->addContent(')');
+            $link->addContent($since);
+        }
+
         $td->addContent($link);
 
         foreach ($node->getChildren() as $name => $child) {

public/css/module.less

@@ -22,7 +22,7 @@ table.bp {
     width: 100%;
     margin: 0;
     padding: 0;
-    color: #0a0a0a;
+    color: @text-color;
     border-collapse: collapse;
     border-spacing: 0;
     box-sizing: border-box;
@@ -143,7 +143,7 @@ table.bp .icon {
 table.bp.node {
     td:before {
         font-family: ifont;
-        z-index: 10;
+        z-index: 1;
         font-size: 1.25em;
         position: absolute;
         margin-left: 1.25em;
@@ -177,7 +177,8 @@ table.bp tr, table.bp tbody, table.bp th, table.bp td, table.bp.node td > a, tab
 }
 
 table.bp td > a, table.node.missing td > span {
-    line-height: 2em;
+    height: 2.5em;
+    line-height: 2.5em;
     padding-left: 0.5em;
     display: block;
 }
@@ -210,7 +211,7 @@ table.bp.handled > tbody > tr > th, table.bp.ok > tbody > tr > th {
 /* Operator: upper line */
 table.bp.operator > tbody > tr:first-child > * {
     border-top-width: 1px;
-    border-top-style: dotted;
+    border-top-style: solid;
 }
 
 table.bp.operator.hovered > tbody > tr:first-child > * {
@@ -281,7 +282,7 @@ table.bp {
 
 /* Reduce font size after the 3rd level... */
 table.bp table.bp table.bp table.bp {
-    font-size: 0.9em;
+    font-size: 0.95em;
 }
 
 /* ...and keep it constant afterwards */
@@ -387,6 +388,11 @@ div.knightrider table.bp {
     }
 }
 
+div.bp .badges {
+    display: inline-block;
+    padding-top: 0;
+}
+
 .badge-critical, .badge-down { background: @colorCritical; }
 .badge-unknown, .badge-unreachable { background: @colorUnknown; }
 .badge-warning { background: @colorWarning; }