Control buttons in graph page are not working

[couloum]

Describe the bug

When I am in the "graph" tab of service, I can see graph(s) with a view defined on 4 hours period. However, none of the buttons to control time period displayed are working.

To Reproduce
Steps to reproduce the behavior:

1. Login to Shinken with WebUI v2.8.1
2. Go inside a service publishing perfdata
3. Click on graph tab
4. Click on any button at the top of the graph (<<, >>, +, -, v)

Expected behavior
The graph should change to display a different time period

Shinken:

• Version of Shinken: 2.4.3
• Version of WebUI module: 2.8.1

Additional context
I checked that all HTTP queries are correctly performed with web inspector => OK
I also checked javascript errors in console. I only see a warning in Firefox (sorry, it's in french):

Cette page utilise la propriété non standard « zoom ». Envisagez d’utiliser calc() dans les valeurs des propriétés pertinentes ou utilisez « transform » avec « transform-origin: 0 0 ». Disk

I have the same behavior in Chrome, but with different error in web inspector:

[DOM] Found 2 elements with non-unique id #bookmarks_menu: (More info: https://goo.gl/9p2vKq)
* <button id=​"bookmarks_menu" class=​"btn btn-ico dropdown-toggle" data-toggle=​"dropdown" aria-expanded=​"false" title data-original-title=​"Bookmarks">​…​</button>​
* <button id=​"bookmarks_menu" class=​"btn btn-ico dropdown-toggle" data-toggle=​"dropdown" aria-expanded=​"false" title data-original-title=​"Bookmarks">​…​</button>​

DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js.map
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.postload.js.map

[maethor]

Hm, this is strange @couloum because I cannot reproduce any of this on my setup. Do you work with graphite or pnp4nagios for graphs?

[couloum]

Hi @maethor ,

I use graphite in v0.9.15. I know it's an old version, but it worked perfectly with webui 2.7.2. Do you think this can be related?

[adhaussy]

Same issue with latest webui2 and ui-graphite2.

When the graph page is loaded, the graph is generated with "from/until" time and graphite format (graphite_time function), which is ok.
But when buttons are clicked, the javascript code that generates the new graph url uses "start/end" time with timestamp, which does not work.

I managed to fix the issue with the following patch.

--- /tmp/_eltdetail_graphs.tpl  2023-06-14 12:36:51.587524135 +0000
+++ modules/webui2/plugins/eltdetail/views/_eltdetail_graphs.tpl        2023-06-14 13:22:08.512381432 +0000
@@ -52,11 +52,22 @@
           $("#graph_images").html( html_graphs );
         });

+        function convertDate(srcdate) {
+          var newdate = new Date(srcdate * 1000);
+          var year = newdate.getFullYear();
+          var month = ("0" + (newdate.getMonth() + 1)).slice(-2);
+          var day = ("0" + (newdate.getDay() + 1)).slice(-2);
+          var hour = newdate.getHours();
+          var min = ("0" + (newdate.getMinutes() + 1)).slice(-2);
+          var time = hour + '%3A' + min + '_' + year + month + day;
+          return time;
+        }
+
         function refreshGraphs() {
           $('#graph_images img').each(function () {
             graphurl = $(this).attr('src');
-            graphurl = graphurl.replace(/start%3D[0-9]+/, 'start%3D'+graphstart);
-            graphurl = graphurl.replace(/end%3D[0-9]+/, 'end%3D'+graphend);
+            graphurl = graphurl.replace(/from%3D[0-9]+%3A[0-9]+_[0-9]+/, 'from%3D' + convertDate(graphstart));
+            graphurl = graphurl.replace(/until%3D[0-9]+%3A[0-9]+_[0-9]+/, 'until%3D' + convertDate(graphend));
             $(this).prop('src', graphurl);
           });
         };