Allow switching between relative and absolute timestamps by BastianLedererIcinga · Pull Request #1322 · Icinga/icingadb-web

BastianLedererIcinga · 2026-01-19T14:33:00Z

resolves #1065

For the views:

Host History
Service History
Notifications
Event Overview

A new control is added that allows to switch between relative and absolute timestamps.

The mode can also be switched by clicking one of timestamps.
Whenever the mode is changed it is added to the url and saved in the user's session and preferences.

For timestamps that are older than one hour absolute time is always displayed, since that aligns with the previous behavior.
Absolute timestamps now always show the time of day, to display the dates a seperate line is added.

To ensure this line is also added when loading more entries the timestamp of the latest entry is added to the load-more url.

The relative timestamps rely on the new implementation in Icinga/ipl-web#350.

Additionally a bug in the Service History is fixed.
The sort parameter was not included in the loadMoreUrl, so descending order was always used when adding new elements.

To allow users to switch between relative and absolute timestamps a new checkbox-control to switch between the two modes is added.

Add a property to EventRenderer and NotificationRenderer that allows to choose whether to use relative or absolute timestamps. assembleExtendedInfo() adds the timestamps of the chosen format.

The given timestamp mode is passed to the Renderer. A sperator is added between entries of different days, to achieve this the last timestamp is added to the LoadMoreURL.

createTimeStampControl() checks url, session and preferences for the preffered timestampMode stores it in a property and creates a TimestampToggle for the selected mode.

Changed controllers use the new TimestampToggle control And the adjusted LoadMoreObjectList

The js switches the timestamps between relative and absolute when the dedicated control or a timestamp itself is clicked. The backend is notified of the changed mode.

timestampAction saves the new preference in the session and to the user's preferences

When saving a changed viewmode all other icingadb prefernces were previously deleted. Since this affects the new timestamp preference prefernces with different names than 'view_modes' will be kept as they are.

Add a sample of a relative timestamps to the timestamp-toggle element. This The digits in this sample are then replaced with the current minutes and seconds when switching to relative time in the frontend.

When inside a dashboad controls are not added so the timestamps themselves also should no longer be highlated and clicking them has no effect.

instead of relying on css classes for selecting the time elements use data-attributes.

Previously when reloading the page the latest-entry parameter would cause problems when adding the day-separatos. Now it is reset alongside the query offset.

Previously Url::setParams() was used to set the name and host.name, since the funtion overwrites all parameters the sort parameter was not included in the loadMoreUrl. Url::setParam() only sets/overwrites the given parameter, the sort parameter is no longer affected and load-more works as expected.

When the icinga.config.timezone is changed the timezone in the dateFromatter must be updated to generate correct relative timestamps.

nilmerg

Please also prevent text selection in case the time tags are interactive, that's common practice for such widgets.

And I had a bug I did't track down yet: After some time or interactions, switching between relative/absolute didn't work anymore. The toggle updated accordingly, but neither pressing the toggle nor the time tags did update the time. A refresh fixes it. But I didn't look at the JS in detail yet, maybe I can easily spot the problem once I do this, so please focus on the other comments first.

nilmerg · 2026-02-04T13:50:32Z

run.php

+
+    $this->addRoute(
+        'icingadb-history-timestamp-preference',
+        new Zend_Controller_Router_Route(
+            'icingadb/history/timestamp-preference',
+            [
+                'module'     => 'icingadb',
+                'controller' => 'history',
+                'action'     => 'timeStamp'
+            ]
+        )
+    );


For the future: If you want to have a dash in the action's name, using camel-case in the PHP declaration is enough: public function timestampPreferenceAction()

nilmerg · 2026-02-04T14:21:46Z

public/css/list/item-list.less

+.controls + .content .history .extended-info,
+.controls + .content .notification .extended-info {


I'd like to point out two things here:

At the moment, the extended info section only includes the time tag in these areas, but just in case that isn't true anymore sometime, the selector needs to change

I didn't look at the JS yet, but I suppose that a very similar attempt to identify related nodes can be found there as well, and this attempt here isn't really reliable

So please change the following:

Style the time tag, not its container

Use a CSS class to identify it as interactive time element (The same class should be used by JS)

In order to register the class in the backend, pass-through the compact flag to the widgets, as that's usually what is responsible for missing controls

nilmerg · 2026-02-04T14:41:48Z

library/Icingadb/Widget/ItemList/LoadMoreObjectList.php

+     *
+     * @return void
+     */
+    protected function assemble(): void


There are already some events to choose from, why not use them? BEFORE_ITEM_ADD seems to be the perfect candidate to me. Note that they were specifically introduced for such a use-case ;)

nilmerg · 2026-02-04T15:32:02Z

public/js/timestamp-mode.js

+            let body = {};
+            body[url.split('?')[0].replace(/^(\/icingaweb2\/)/,"")] = preference;
+            fetch(location.origin + icinga.config.baseUrl + '/icingadb/history/timestamp-preference', {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify(body)
+            });


The toggle is part of a form, at the moment needlessly. I suggest to actually submit it, instead of using the fetch api here. This solves two things:

It's not safe to assume that every Icinga Web installation uses /icingaweb2 as root

The HistoryController (or rather its route) should not be required for others to work

Please to the following:

Submit the toggle's form here instead

Adjust Controller::createTimestampControl() to update the session/preferences

Just exit the process when done, you don't wait for the response here anyway

BastianLedererIcinga added 2 commits January 16, 2026 10:04

Add TimestampToggle Control

897f677

To allow users to switch between relative and absolute timestamps a new checkbox-control to switch between the two modes is added.

Support rendering of relative and absolute timestamps

f038317

Add a property to EventRenderer and NotificationRenderer that allows to choose whether to use relative or absolute timestamps. assembleExtendedInfo() adds the timestamps of the chosen format.

cla-bot bot added the cla/signed CLA is signed by all contributors of a PR label Jan 19, 2026

BastianLedererIcinga marked this pull request as draft January 19, 2026 14:38

BastianLedererIcinga self-assigned this Jan 19, 2026

BastianLedererIcinga force-pushed the feature/history-view-timestamps branch from 04b643d to 6f5fc61 Compare January 20, 2026 14:49

BastianLedererIcinga added 11 commits January 21, 2026 08:56

Add date-separators and timestampMode to LoadMoreObjectList

88fadcb

The given timestamp mode is passed to the Renderer. A sperator is added between entries of different days, to achieve this the last timestamp is added to the LoadMoreURL.

Add createTimestampControl() in Controller

f3dc0cf

createTimeStampControl() checks url, session and preferences for the preffered timestampMode stores it in a property and creates a TimestampToggle for the selected mode.

Update controllers that should support relative and absolute timestamps

8e58750

Changed controllers use the new TimestampToggle control And the adjusted LoadMoreObjectList

Add js and css for absolute and relative timestamps

5c9dbb3

The js switches the timestamps between relative and absolute when the dedicated control or a timestamp itself is clicked. The backend is notified of the changed mode.

Add timestampAction to save current timestamp preference

c6f4640

timestampAction saves the new preference in the session and to the user's preferences

Adjust saving of view modes

d57b261

When saving a changed viewmode all other icingadb prefernces were previously deleted. Since this affects the new timestamp preference prefernces with different names than 'view_modes' will be kept as they are.

Use translated relative timestamps in the frontend

beb4449

Add a sample of a relative timestamps to the timestamp-toggle element. This The digits in this sample are then replaced with the current minutes and seconds when switching to relative time in the frontend.

Remove timestamp hint and control in dashboards

e2dc9ac

When inside a dashboad controls are not added so the timestamps themselves also should no longer be highlated and clicking them has no effect.

Use data attributes instead of css classes

5a6f11d

instead of relying on css classes for selecting the time elements use data-attributes.

Fix reloading behavior of day-separators

70ebd09

Previously when reloading the page the latest-entry parameter would cause problems when adding the day-separatos. Now it is reset alongside the query offset.

BastianLedererIcinga force-pushed the feature/history-view-timestamps branch from 6f5fc61 to 72f5b88 Compare January 21, 2026 09:28

Update timezone of dateFormatter when necessary

a566ad9

When the icinga.config.timezone is changed the timezone in the dateFromatter must be updated to generate correct relative timestamps.

BastianLedererIcinga marked this pull request as ready for review January 22, 2026 14:44

BastianLedererIcinga requested a review from nilmerg January 22, 2026 14:45

nilmerg requested changes Feb 4, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

Allow switching between relative and absolute timestamps#1322

Allow switching between relative and absolute timestamps#1322
BastianLedererIcinga wants to merge 14 commits intomainfrom
feature/history-view-timestamps

BastianLedererIcinga commented Jan 19, 2026 •

edited

Loading

Uh oh!

nilmerg left a comment

Uh oh!

nilmerg Feb 4, 2026

Uh oh!

nilmerg Feb 4, 2026

Uh oh!

nilmerg Feb 4, 2026

Uh oh!

nilmerg Feb 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		.controls + .content .history .extended-info,
		.controls + .content .notification .extended-info {

Comments

Conversation

BastianLedererIcinga commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nilmerg left a comment

Choose a reason for hiding this comment

Uh oh!

nilmerg Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

nilmerg Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

nilmerg Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

nilmerg Feb 4, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

BastianLedererIcinga commented Jan 19, 2026 •

edited

Loading