Handle long item names

Icinga · Aug 11, 2022 · dcc1a5f · dcc1a5f
1 parent ce812c0
commit dcc1a5f
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 5 deletions.
diff --git a/library/Businessprocess/Renderer/Breadcrumb.php b/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;
 
 class Breadcrumb extends BaseHtmlElement
 {
@@ -41,7 +42,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();
 

diff --git a/library/Businessprocess/Renderer/TileRenderer/NodeTile.php b/library/Businessprocess/Renderer/TileRenderer/NodeTile.php
@@ -13,6 +13,7 @@
 use Icinga\Web\Url;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\Html;
+use ipl\Html\HtmlElement;
 use ipl\Web\Widget\StateBall;
 
 class NodeTile extends BaseHtmlElement
@@ -182,7 +183,11 @@ protected function getMainNodeLink()
         if ($node instanceof MonitoredNode) {
             $link = Html::tag('a', ['href' => $url, 'data-base-target' => '_next'], $node->getAlias());
         } else {
-            $link = Html::tag('a', ['href' => $url], $node->getAlias());
+            $link = Html::tag(
+                'a',
+                ['href' => $url],
+                HtmlElement::create('span', ['class' => 'text', 'title' => $node->getAlias()], $node->getAlias())
+            );
         }
 
         return $link;

diff --git a/library/Businessprocess/Web/Component/BpDashboardTile.php b/library/Businessprocess/Web/Component/BpDashboardTile.php
@@ -25,7 +25,7 @@ public function __construct(BpConfig $bp, $title, $description, $icon, $url, $ur
             ['class' => 'bp-link', 'data-base-target' => '_main'],
             Html::tag('a', $attributes, Html::tag('i', ['class' => 'icon icon-' . $icon]))
                 ->add(Html::tag('span', ['class' => 'header'], $title))
-                ->add($description)
+                ->add(Html::tag('span', ['class' => 'text', 'title' => $description], $description))
         ));
 
         $tiles = Html::tag('div', ['class' => 'bp-root-tiles']);

diff --git a/library/Businessprocess/Web/Component/Dashboard.php b/library/Businessprocess/Web/Component/Dashboard.php
@@ -9,7 +9,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
 {
@@ -88,9 +90,16 @@ protected function __construct(Auth $auth, Storage $storage)
             $meta = $storage->loadMetadata($name);
             $title = $meta->get('Title');
             if ($title) {
-                $title = sprintf('%s (%s)', $title, $name);
+                $title = FormattedString::create(
+                    '%s %s',
+                    HtmlElement::create('span', ['class' => 'text', 'title' => $title], $title),
+                    HtmlElement::create('span', ['class' => 'header-id', 'title' => $name], '(' . $name . ')')
+                );
             } else {
-                $title = $name;
+                $title = FormattedString::create(
+                    '%s',
+                    HtmlElement::create('span', ['class' => 'text', 'title' => $name], $name)
+                );
             }
 
             $bp = $storage->loadProcess($name);

diff --git a/public/css/module.less b/public/css/module.less
@@ -6,6 +6,13 @@ a:focus {
     }
 }
 
+.text {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
 .action-bar {
     display: flex;
     align-items: center;
@@ -317,6 +324,11 @@ ul.bp {
         }
 
         .bp-link {
+            .text {
+                display: -webkit-box;
+                -webkit-line-clamp: 2;
+                -webkit-box-orient: vertical;
+            }
             > a {
                 text-decoration: none;
                 color: @gray;
@@ -327,6 +339,18 @@ ul.bp {
 
                 > span.header {
                     color: @text-color;
+                    .text {
+                        display: -webkit-box;
+                        -webkit-line-clamp: 2;
+                        -webkit-box-orient: vertical;
+                    }
+                    .header-id {
+                        display: block;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        max-width: 100%;
+                    }
                 }
             }
         }
@@ -599,6 +623,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;
@@ -708,8 +733,21 @@ td > a > .state-badges {
     }
 }
 
+.breadcrumb .process-node {
+    .text {
+        white-space: nowrap;
+        margin-top: -2.5em;
+        margin-left: 1.2em;
+    }
+}
+
 /** END of breadcrumb **/
 
+.tiles .process-node .text {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
 
 ul.error, ul.warning {
     padding: 0;