Timeline: Visualize future rotations

- Introduce class FutureEntry

Author: sukhwinder33445

library/Notifications/Widget/TimeGrid/BaseGrid.php

@@ -7,6 +7,7 @@
 use DateInterval;
 use DateTime;
 use Generator;
+use Icinga\Module\Notifications\Widget\Timeline\FutureEntry;
 use ipl\Html\Attributes;
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\HtmlElement;
@@ -421,6 +422,20 @@ final protected function yieldFixedEntries(Traversable $entries): Generator
             }
 
             $rowStart = $position + $rowStartModifier;
+
+            if ($entry instanceof FutureEntry) {
+                $gridArea = $this->getGridArea(
+                    $rowStart,
+                    $rowStart + 1,
+                    1,
+                    $gridBorderAt + 1
+                );
+
+                yield $gridArea => $entry;
+
+                continue;
+            }
+
             if ($rowStart > $lastRow) {
                 $lastRow = $rowStart;
             }

library/Notifications/Widget/Timeline.php

@@ -14,6 +14,7 @@
 use Icinga\Module\Notifications\Widget\TimeGrid\Timescale;
 use Icinga\Module\Notifications\Widget\TimeGrid\Util;
 use Icinga\Module\Notifications\Widget\Timeline\Entry;
+use Icinga\Module\Notifications\Widget\Timeline\FutureEntry;
 use Icinga\Module\Notifications\Widget\Timeline\MinimalGrid;
 use Icinga\Module\Notifications\Widget\Timeline\Rotation;
 use IntlDateFormatter;
@@ -173,7 +174,9 @@ public function getEntries(): Traversable
 
         $occupiedCells = [];
         foreach ($rotations as $rotation) {
+            $entryFound = false;
             foreach ($rotation->fetchTimeperiodEntries($this->start, $this->getGrid()->getGridEnd()) as $entry) {
+                $entryFound = true;
                 if (! $this->minimalLayout) {
                     $entry->setPosition($maxPriority - $rotation->getPriority());
 
@@ -182,6 +185,10 @@ public function getEntries(): Traversable
 
                 $occupiedCells += $getDesiredCells($entry);
             }
+
+            if (! $entryFound && ! $this->minimalLayout) {
+                yield (new FutureEntry())->setPosition($maxPriority - $rotation->getPriority());
+            }
         }
 
         $entryToCellsMap = new SplObjectStorage();

library/Notifications/Widget/Timeline/FutureEntry.php

@@ -0,0 +1,50 @@
+<?php
+
+/* Icinga Notifications Web | (c) 2025 Icinga GmbH | GPLv2 */
+
+namespace Icinga\Module\Notifications\Widget\Timeline;
+
+use Icinga\Module\Notifications\Widget\TimeGrid\Entry;
+use ipl\Html\Attributes;
+use ipl\Html\BaseHtmlElement;
+use ipl\Html\HtmlElement;
+use ipl\Web\Widget\Icon;
+
+/**
+ * FutureEntry
+ *
+ * Visualize a future entry of the rotation
+ *
+ * @extends Entry<0>
+ */
+class FutureEntry extends Entry
+{
+    public function __construct()
+    {
+        parent::__construct(0);
+
+        $this->setContinuationType(Entry::TO_NEXT_GRID);
+    }
+
+    public function getColor(int $transparency): string
+    {
+        //  --base-disabled (#d0d3da) -> hsl(222, 12%, 84%) + transparency
+        return sprintf('~"hsl(222 12%% 84%% / %d%%)"', $transparency);
+    }
+
+    protected function assembleContainer(BaseHtmlElement $container): void
+    {
+        $futureBadge = new HtmlElement(
+            'div',
+            new Attributes([
+                'title' => $this->translate('Rotation starts in the future'),
+                $container->getAttributes()->get('class')
+            ]),
+            new Icon('angle-right')
+        );
+
+        $container
+            ->setAttribute('class', 'future-entry') // override the default class
+            ->addHtml($futureBadge);
+    }
+}

public/css/timeline.less

@@ -48,19 +48,55 @@
       }
     }
 
-    .overlay .entry {
-      margin-top: 1em;
-      margin-bottom: 1em;
-      z-index: 2; // overlap the .clock .time-hand
+    .overlay {
+      .entry {
+        margin-top: 1em;
+        margin-bottom: 1em;
+        z-index: 2; // overlap the .clock .time-hand
+
+        .title {
+          height: 100%;
+          flex-wrap: nowrap;
+          align-items: baseline;
+          padding: .15em .5em;
+
+          .name {
+            .text-ellipsis();
+          }
+        }
+      }
 
-      .title {
-        height: 100%;
-        flex-wrap: nowrap;
-        align-items: baseline;
-        padding: .15em .5em;
+      .future-entry {
+        display: flex;
+        justify-content: end;
 
-        .name {
-          .text-ellipsis();
+        .entry {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          position: relative;
+          padding-left: 6px; // 2px before + 1px border + 2px after + 1px border
+
+          width: 3em;
+          flex-shrink: 0;
+
+          &:before,
+          &:after {
+            content: '';
+            display: block;
+            position: absolute;
+            border: 1px solid var(--entry-border-color);
+            border-right: transparent;
+            height: ~"calc(100% + 2px)"; // border top and bottom
+            width: 100%;
+            left: 2px;
+            .rounded-corners(0.25em);
+          }
+
+          &:after {
+            left: 5px; // 2px before + 1px border + 2px after
+          }
         }
       }
     }