Handle long item names

Author: raviks789

configuration.php

@@ -62,3 +62,4 @@
 $this->provideJsFile('vendor/Sortable.js');
 $this->provideJsFile('behavior/sortable.js');
 $this->provideJsFile('vendor/jquery.fn.sortable.js');
+$this->provideCssFile('mixins.less');

library/Businessprocess/Renderer/Breadcrumb.php

@@ -7,6 +7,7 @@
 use Icinga\Module\Businessprocess\Web\Url;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\Html;
+use ipl\Html\HtmlElement;
 use ipl\Web\Widget\Icon;
 
 class Breadcrumb extends BaseHtmlElement
@@ -42,7 +43,11 @@ public static function create(Renderer $renderer)
             )
         ));
         $breadcrumb->add(Html::tag('li')->add(
-            Html::tag('a', ['href' => $bpUrl], $bp->getTitle())
+            Html::tag(
+                'a',
+                ['href' => $bpUrl],
+                HtmlElement::create('span', ['class' => 'text', 'title' => $bp->getTitle()], $bp->getTitle())
+            )
         ));
         $path = $renderer->getCurrentPath();
 

library/Businessprocess/Renderer/TileRenderer/NodeTile.php

@@ -11,6 +11,7 @@
 use Icinga\Web\Url;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\Html;
+use ipl\Html\HtmlElement;
 use ipl\Web\Widget\Icon;
 use ipl\Web\Widget\StateBall;
 
@@ -87,6 +88,14 @@ public function render()
         if (! $node instanceof ImportedNode || $node->getBpConfig()->hasNode($node->getName())) {
             $link = $this->getMainNodeLink();
             if ($renderer->isBreadcrumb()) {
+                $link->setContent(
+                    HtmlElement::create(
+                        'span',
+                        ['class' => ['text', 'process-title'], 'title' => $link->getContent()],
+                        $link->getContent()
+                    )
+                );
+
                 $state = strtolower($node->getStateName());
                 if ($node->isHandled()) {
                     $state = $state . ' handled';

library/Businessprocess/Web/Component/BpDashboardTile.php

@@ -22,8 +22,8 @@ public function __construct(BpConfig $bp, $title, $description, $icon, $url, $ur
             'div',
             ['class' => 'bp-link', 'data-base-target' => '_main'],
             (new Link(new Icon($icon), Url::fromPath($url, $urlParams ?: []), $attributes))
-                ->add(Html::tag('span', ['class' => 'header'], $title))
-                ->add($description)
+                ->add(Html::tag('span', ['class' => ['header', 'text']], $title))
+                ->add(Html::tag('span', ['class' => 'text', 'title' => $description], $description))
         ));
 
         $tiles = Html::tag('div', ['class' => 'bp-root-tiles']);

library/Businessprocess/Web/Component/Dashboard.php

@@ -11,7 +11,9 @@
 use Icinga\Module\Businessprocess\State\MonitoringState;
 use Icinga\Module\Businessprocess\Storage\Storage;
 use ipl\Html\BaseHtmlElement;
+use ipl\Html\FormattedString;
 use ipl\Html\Html;
+use ipl\Html\HtmlElement;
 
 class Dashboard extends BaseHtmlElement
 {

public/css/mixins.less

@@ -0,0 +1,10 @@
+.line-clamp(@numOfLines: 2) when (@numOfLines > 0) {
+  display: -webkit-box;
+  -webkit-line-clamp: @numOfLines;
+  -webkit-box-orient: vertical;
+}
+
+.text-ellipsis() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

public/css/module.less

@@ -344,6 +344,10 @@ ul.broken-files {
         }
 
         .bp-link {
+            .text {
+                .line-clamp(2);
+            }
+
             > a {
                 text-decoration: none;
                 color: @gray;
@@ -354,6 +358,14 @@ ul.broken-files {
 
                 > span.header {
                     color: @text-color;
+
+                    .header-id {
+                        display: block;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        max-width: 100%;
+                    }
                 }
             }
         }
@@ -450,7 +462,8 @@ td > a > .state-badges {
 .tiles > div {
     color: @text-color-on-icinga-blue;
     width: 12em;
-    display: inline-block;
+    display: flex;
+    flex-direction: column;
     float: left;
     vertical-align: top;
     margin-right: 0.2em;
@@ -464,11 +477,8 @@ td > a > .state-badges {
     }
 
     .state-badges {
-        position: absolute;
-        bottom: 0;
-        right: 0;
+        text-align: end;
         margin: 0.5em;
-        text-align: center;
         font-size: 0.5em;
     }
 
@@ -483,13 +493,14 @@ td > a > .state-badges {
 
     > a,
     .missing-node-msg {
-        display: block;
         text-decoration: none;
         font-size: 0.7em;
         text-align: center;
-        padding: 1em 1em 0;
+        padding: 0 1em;
         font-weight: bold;
         word-wrap: break-word;
+        .text-ellipsis();
+        .line-clamp(2);
     }
 
     .missing-node-msg {
@@ -639,6 +650,7 @@ td > a > .state-badges {
     color: @icinga-blue;
     margin: 0;
     font-size: 1.2em;
+    max-width: 10em;
     text-decoration: none;
     padding-left: 2em;
     line-height: 2.5em;
@@ -742,6 +754,22 @@ td > a > .state-badges {
     text-decoration: underline;
 }
 
+.text {
+    display: block;
+    .text-ellipsis();
+}
+
+.breadcrumb li a {
+    .process-title {
+        margin-top: -2.5em;
+        margin-left: 1.2em;
+    }
+
+    .text {
+        .line-clamp(1);
+    }
+}
+
 #layout.twocols, #layout.layout-minimal, div.compact {
     .breadcrumb {
         font-size: 0.833em;
@@ -750,6 +778,18 @@ td > a > .state-badges {
 
 /** END of breadcrumb **/
 
+.tiles .process-node {
+    justify-content: space-between;
+}
+
+.tiles .monitored-node {
+    padding-bottom: 1.5em;
+
+    > a {
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+}
 
 ul.error, ul.warning {
     padding: 0;