Img and Icon introduced, used in NodeTile

library/Businessprocess/Html/Icon.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace Icinga\Module\Businessprocess\Html;
+
+class Icon extends BaseElement
+{
+    protected $tag = 'i';
+
+    protected function __construct()
+    {
+    }
+
+    /**
+     * @param string $name
+     * @param array $attributes
+     *
+     * @return static
+     */
+    public static function create($name, array $attributes = null)
+    {
+        $icon = new static();
+        $icon->setAttributes($attributes);
+        $icon->attributes()->add('class', array('icon', 'icon-' . $name));
+        return $icon;
+    }
+}

library/Businessprocess/Html/Img.php

@@ -0,0 +1,72 @@
+<?php
+
+namespace Icinga\Module\Businessprocess\Html;
+
+use Icinga\Module\Businessprocess\Web\Url;
+use Icinga\Web\Url as WebUrl;
+
+class Img extends BaseElement
+{
+    protected $tag = 'img';
+
+    /** @var Url */
+    protected $url;
+
+    protected $defaultAttributes = array('alt' => '');
+
+    protected function __construct()
+    {
+    }
+
+    /**
+     * @param Url|string $url
+     * @param array $urlParams
+     * @param array $attributes
+     *
+     * @return static
+     */
+    public static function create($url, $urlParams = null, array $attributes = null)
+    {
+        $img = new static();
+        $img->setAttributes($attributes);
+        $img->attributes()->registerCallbackFor('src', array($img, 'getSrcAttribute'));
+        $img->setUrl($url, $urlParams);
+        return $img;
+    }
+
+    public function setUrl($url, $urlParams)
+    {
+        if ($url instanceof WebUrl) { // Hint: Url is also a WebUrl
+            if ($urlParams !== null) {
+                $url->addParams($urlParams);
+            }
+
+            $this->url = $url;
+        } else {
+            if ($urlParams === null) {
+                $this->url = Url::fromPath($url);
+            } else {
+                $this->url = Url::fromPath($url, $urlParams);
+            }
+        }
+
+        $this->url->getParams();
+    }
+
+    /**
+     * @return Attribute
+     */
+    public function getSrcAttribute()
+    {
+        return new Attribute('src', $this->getUrl()->getAbsoluteUrl('&'));
+    }
+
+    /**
+     * @return Url
+     */
+    public function getUrl()
+    {
+        // TODO: What if null? #?
+        return $this->url;
+    }
+}

library/Businessprocess/Renderer/TileRenderer/NodeTile.php

@@ -3,17 +3,28 @@
 namespace Icinga\Module\Businessprocess\Renderer\TileRenderer;
 
 use Icinga\Module\Businessprocess\BpNode;
+use Icinga\Module\Businessprocess\HostNode;
 use Icinga\Module\Businessprocess\Html\BaseElement;
+use Icinga\Module\Businessprocess\Html\HtmlString;
+use Icinga\Module\Businessprocess\Html\Icon;
 use Icinga\Module\Businessprocess\Html\Link;
 use Icinga\Module\Businessprocess\ImportedNode;
 use Icinga\Module\Businessprocess\MonitoredNode;
 use Icinga\Module\Businessprocess\Node;
 use Icinga\Module\Businessprocess\Renderer\TileRenderer;
+use Icinga\Module\Businessprocess\ServiceNode;
 
 class NodeTile extends BaseElement
 {
     protected $tag = 'div';
 
+    /**
+     * NodeTile constructor.
+     * @param TileRenderer $renderer
+     * @param $name
+     * @param Node $node
+     * @param null $path
+     */
     public function __construct(TileRenderer $renderer, $name, Node $node, $path = null)
     {
         $attributes = $this->attributes();
@@ -43,7 +54,21 @@ class NodeTile extends BaseElement
             }
         }
 
-        $link = Link::create($node->getAlias(), $url);
+        if ($node instanceof ServiceNode) {
+            $link = Link::create(
+                Icon::create('service'),
+                $url
+            )->addContent($node->getHostname())
+                ->addContent(HtmlString::create('<br />'))
+                ->addContent($node->getServiceDescription());
+        } elseif ($node instanceof HostNode) {
+                $link = Link::create(
+                    Icon::create('host'),
+                    $url
+                )->addContent($node->getHostname());
+        } else {
+            $link = Link::create($node->getAlias(), $url);
+        }
 
         $this->add($link);
         if ($node instanceof BpNode) {

public/css/module.less

@@ -388,6 +388,7 @@ table.bp {
 
 .tiles > div > a {
     text-decoration: none;
+    font-size: 0.5em;
     color: inherit;
     vertical-align: middle;
     text-align: center;
@@ -396,8 +397,17 @@ table.bp {
     font-weight: bold;
     word-wrap: break-word;
     width: 100%;
-    height: 6em;
+    height: 12em;
     box-sizing: border-box;
+    &:focus {
+        outline: none;
+        text-decoration: underline;
+    }
+    i {
+        float: left;
+        font-size: 2.5em;
+        margin-top: -0.1em;
+    }
 }
 
 .tiles > div > a:hover {
@@ -459,10 +469,6 @@ table.bp {
     }
 }
 
-.tiles > .monitored-node a {
-    font-size: 0.8em;
-}
-
 .tiles .missing a {
     pointer-events: none;
     cursor: default;
@@ -571,14 +577,20 @@ table.bp {
 }
 .breadcrumb li:last-child a {
     padding-right: 1em;
-    pointer-events: none;
     cursor: default;
 }
+.breadcrumb li:last-child a:hover {
 
-.breadcrumb li a:hover, .breadcrumb li a:focus { background: @text-color; color: white; }
-.breadcrumb li a:hover:after, .breadcrumb li a:focus:after { border-left-color: @text-color; }
+}
 
-/** END of breadcrumg **/
+.breadcrumb li:not(:last-child) a:hover { background: @text-color; color: white; }
+.breadcrumb li:not(:last-child) a:hover:after { border-left-color: @text-color; }
+
+.breadcrumb li a:focus {
+    text-decoration: underline;
+}
+
+/** END of breadcrumb **/
 
 
 ul.error {