[8.7] [Logs UI] Set Logs stream time ruler according to set timezone (#152934) (#153568)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[Logs UI] Set Logs stream time ruler according to set timezone
(#152934)](https://github.com/elastic/kibana/pull/152934)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Marco Antonio
Ghiani","email":"marcoantonio.ghiani01@gmail.com"},"sourceCommit":{"committedDate":"2023-03-23T15:48:54Z","message":"[Logs
UI] Set Logs stream time ruler according to set timezone (#152934)\n\n##
📓 Summary\r\n\r\nCloses #94267 \r\n\r\nThis change fixes the current
mismatch between the TimeRuler bar on the\r\nLog Stream feature and the
set timezone in the advanced option.\r\n\r\nI didn't find a more elegant
way to implement it (dates and time zones\r\nare always tricky), so any
better approach is welcome!\r\n\r\nThe current solution consists
of:\r\nIn order to get the correct timestamp for a custom timezone\r\n1.
Start from the current start/end timestamp\r\n2. Get the current
timezone offset in milliseconds (positive or\r\nnegative)\r\n3. Get the
UTC offset in milliseconds (positive or negative)\r\n4. Sum the
previously retrieved elements all together.\r\n\r\nThis guarantees the
timestamp we return is related to the timezone set\r\nglobally in
moment-js.\r\n\r\n### Example\r\n**Timezone:** US/Eastern ==> -300mins
UTC offset\r\n**Local position:** GMT+1(Madrid) -60mins timezone
offset\r\n\r\nCurrent timestamp + (-300 * 60000) + (-60 * 60000) =
timestamp for\r\nUS/Eastern\r\n\r\n## 🧪 Testing\r\n\r\n- Navigate to
`Stack Management` -> `Advanced Settings` -> Search `time\r\nzone`\r\n-
Set the timezone to any preferred location\r\n- Navigate to
`Observability` -> `Logs` -> `Stream`\r\n- Verify the logs entries
timestamp and the TimeRuler range are in
sync\r\n\r\n---------\r\n\r\nCo-authored-by: Marco Antonio Ghiani
<marcoantonio.ghiani@elastic.co>","sha":"68f743982ec2ea95838e0bcdab5c3a2683d8ba18","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","Feature:Logs
UI","Team:Infra Monitoring
UI","release_note:skip","backport:prev-minor","v8.8.0"],"number":152934,"url":"https://github.com/elastic/kibana/pull/152934","mergeCommit":{"message":"[Logs
UI] Set Logs stream time ruler according to set timezone (#152934)\n\n##
📓 Summary\r\n\r\nCloses #94267 \r\n\r\nThis change fixes the current
mismatch between the TimeRuler bar on the\r\nLog Stream feature and the
set timezone in the advanced option.\r\n\r\nI didn't find a more elegant
way to implement it (dates and time zones\r\nare always tricky), so any
better approach is welcome!\r\n\r\nThe current solution consists
of:\r\nIn order to get the correct timestamp for a custom timezone\r\n1.
Start from the current start/end timestamp\r\n2. Get the current
timezone offset in milliseconds (positive or\r\nnegative)\r\n3. Get the
UTC offset in milliseconds (positive or negative)\r\n4. Sum the
previously retrieved elements all together.\r\n\r\nThis guarantees the
timestamp we return is related to the timezone set\r\nglobally in
moment-js.\r\n\r\n### Example\r\n**Timezone:** US/Eastern ==> -300mins
UTC offset\r\n**Local position:** GMT+1(Madrid) -60mins timezone
offset\r\n\r\nCurrent timestamp + (-300 * 60000) + (-60 * 60000) =
timestamp for\r\nUS/Eastern\r\n\r\n## 🧪 Testing\r\n\r\n- Navigate to
`Stack Management` -> `Advanced Settings` -> Search `time\r\nzone`\r\n-
Set the timezone to any preferred location\r\n- Navigate to
`Observability` -> `Logs` -> `Stream`\r\n- Verify the logs entries
timestamp and the TimeRuler range are in
sync\r\n\r\n---------\r\n\r\nCo-authored-by: Marco Antonio Ghiani
<marcoantonio.ghiani@elastic.co>","sha":"68f743982ec2ea95838e0bcdab5c3a2683d8ba18"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/152934","number":152934,"mergeCommit":{"message":"[Logs
UI] Set Logs stream time ruler according to set timezone (#152934)\n\n##
📓 Summary\r\n\r\nCloses #94267 \r\n\r\nThis change fixes the current
mismatch between the TimeRuler bar on the\r\nLog Stream feature and the
set timezone in the advanced option.\r\n\r\nI didn't find a more elegant
way to implement it (dates and time zones\r\nare always tricky), so any
better approach is welcome!\r\n\r\nThe current solution consists
of:\r\nIn order to get the correct timestamp for a custom timezone\r\n1.
Start from the current start/end timestamp\r\n2. Get the current
timezone offset in milliseconds (positive or\r\nnegative)\r\n3. Get the
UTC offset in milliseconds (positive or negative)\r\n4. Sum the
previously retrieved elements all together.\r\n\r\nThis guarantees the
timestamp we return is related to the timezone set\r\nglobally in
moment-js.\r\n\r\n### Example\r\n**Timezone:** US/Eastern ==> -300mins
UTC offset\r\n**Local position:** GMT+1(Madrid) -60mins timezone
offset\r\n\r\nCurrent timestamp + (-300 * 60000) + (-60 * 60000) =
timestamp for\r\nUS/Eastern\r\n\r\n## 🧪 Testing\r\n\r\n- Navigate to
`Stack Management` -> `Advanced Settings` -> Search `time\r\nzone`\r\n-
Set the timezone to any preferred location\r\n- Navigate to
`Observability` -> `Logs` -> `Stream`\r\n- Verify the logs entries
timestamp and the TimeRuler range are in
sync\r\n\r\n---------\r\n\r\nCo-authored-by: Marco Antonio Ghiani
<marcoantonio.ghiani@elastic.co>","sha":"68f743982ec2ea95838e0bcdab5c3a2683d8ba18"}}]}]
BACKPORT-->

Co-authored-by: Marco Antonio Ghiani <marcoantonio.ghiani01@gmail.com>

x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx

@@ -9,6 +9,7 @@ import { scaleTime } from 'd3-scale';
 import * as React from 'react';
 
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import { useKibanaTimeZoneSetting } from '../../../hooks/use_kibana_time_zone_setting';
 import { getTimeLabelFormat } from './time_label_formatter';
 
 interface TimeRulerProps {
@@ -19,11 +20,24 @@ interface TimeRulerProps {
   width: number;
 }
 
+const useZonedDate = (timestamp: number) => {
+  const timeZone = useKibanaTimeZoneSetting();
+
+  const options = timeZone !== 'local' ? { timeZone } : undefined;
+  return new Date(new Date(timestamp).toLocaleString('en-US', options));
+};
+
 export const TimeRuler: React.FC<TimeRulerProps> = ({ end, height, start, tickCount, width }) => {
-  const yScale = scaleTime().domain([start, end]).range([0, height]);
+  const startWithOffset = useZonedDate(start);
+  const endWithOffset = useZonedDate(end);
+
+  const yScale = scaleTime().domain([startWithOffset, endWithOffset]).range([0, height]);
 
   const ticks = yScale.ticks(tickCount);
-  const formatTick = yScale.tickFormat(tickCount, getTimeLabelFormat(start, end));
+  const formatTick = yScale.tickFormat(
+    tickCount,
+    getTimeLabelFormat(startWithOffset.getTime(), endWithOffset.getTime())
+  );
 
   return (
     <g>