[8.15] [Infra] Fix date picker with relative date range (#187739) (#187883)

# Backport

This will backport the following commits from `main` to `8.15`:
- [[Infra] Fix date picker with relative date range
(#187739)](https://github.com/elastic/kibana/pull/187739)

<!--- Backport version: 8.9.8 -->

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

<!--BACKPORT [{"author":{"name":"Carlos
Crespo","email":"crespocarlos@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-07-09T15:59:17Z","message":"[Infra]
Fix date picker with relative date range (#187739)\n\nfixes
[187735](https://github.com/elastic/kibana/issues/187735)\r\n\r\n##
Summary\r\n\r\nThis PR fixes a problem with the Anomaly Detection
component's date\r\npicker when dealing with relative
dates\r\n\r\n\r\nc3b036df-e73c-48d5-a27a-6ed75ffbc76a\r\n\r\n\r\n\r\n###
How to test\r\n\r\nThe easiest way is to connect to an oblt cluster and
create an ML job \r\n\r\n- Navigate to `Infrastructure`\r\n- Click on
`Anomaly Detection` menu at the top of the page and create a\r\nML job
for hosts\r\n- Follow the same steps from the screen recordings
above.","sha":"7c5cf9c76e35925cba7e3bd57cc01d1fffae81a4","branchLabelMapping":{"^v8.16.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services","v8.16.0"],"number":187739,"url":"https://github.com/elastic/kibana/pull/187739","mergeCommit":{"message":"[Infra]
Fix date picker with relative date range (#187739)\n\nfixes
[187735](https://github.com/elastic/kibana/issues/187735)\r\n\r\n##
Summary\r\n\r\nThis PR fixes a problem with the Anomaly Detection
component's date\r\npicker when dealing with relative
dates\r\n\r\n\r\nc3b036df-e73c-48d5-a27a-6ed75ffbc76a\r\n\r\n\r\n\r\n###
How to test\r\n\r\nThe easiest way is to connect to an oblt cluster and
create an ML job \r\n\r\n- Navigate to `Infrastructure`\r\n- Click on
`Anomaly Detection` menu at the top of the page and create a\r\nML job
for hosts\r\n- Follow the same steps from the screen recordings
above.","sha":"7c5cf9c76e35925cba7e3bd57cc01d1fffae81a4"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.16.0","labelRegex":"^v8.16.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/187739","number":187739,"mergeCommit":{"message":"[Infra]
Fix date picker with relative date range (#187739)\n\nfixes
[187735](https://github.com/elastic/kibana/issues/187735)\r\n\r\n##
Summary\r\n\r\nThis PR fixes a problem with the Anomaly Detection
component's date\r\npicker when dealing with relative
dates\r\n\r\n\r\nc3b036df-e73c-48d5-a27a-6ed75ffbc76a\r\n\r\n\r\n\r\n###
How to test\r\n\r\nThe easiest way is to connect to an oblt cluster and
create an ML job \r\n\r\n- Navigate to `Infrastructure`\r\n- Click on
`Anomaly Detection` menu at the top of the page and create a\r\nML job
for hosts\r\n- Follow the same steps from the screen recordings
above.","sha":"7c5cf9c76e35925cba7e3bd57cc01d1fffae81a4"}}]}]
BACKPORT-->
This commit is contained in:
Carlos Crespo 2024-07-10 11:56:36 +02:00 committed by GitHub
parent e9f1ada196
commit ae018efb52
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -221,9 +221,9 @@ export const AnomaliesTable = ({
}: Props) => {
const [search, setSearch] = useState('');
const trackMetric = useUiTracker({ app: 'infra_metrics' });
const [timeRange, setTimeRange] = useState<{ start: number; end: number }>({
start: datemathToEpochMillis(dateRange.from) || 0,
end: datemathToEpochMillis(dateRange.to, 'up') || 0,
const [timeRange, setTimeRange] = useState<{ start: string; end: string }>({
start: dateRange.from,
end: dateRange.to,
});
const { sorting, setSorting } = useSorting<MetricsHostsAnomaly>({
field: 'startTime',
@ -256,8 +256,8 @@ export const AnomaliesTable = ({
({ isInvalid, start: startChange, end: endChange }: OnTimeChangeProps) => {
if (!isInvalid) {
setTimeRange({
start: datemathToEpochMillis(startChange)!,
end: datemathToEpochMillis(endChange, 'up')!,
start: startChange,
end: endChange,
});
}
},
@ -265,14 +265,17 @@ export const AnomaliesTable = ({
);
const getTimeRange = useCallback(() => {
if (hideDatePicker) {
return {
start: datemathToEpochMillis(dateRange.from) || 0,
end: datemathToEpochMillis(dateRange.to, 'up') || 0,
};
} else {
return timeRange;
}
const { start, end } = hideDatePicker
? {
start: dateRange.from,
end: dateRange.to,
}
: timeRange;
return {
start: datemathToEpochMillis(start) || 0,
end: datemathToEpochMillis(end, 'up') || 0,
};
}, [dateRange.from, dateRange.to, hideDatePicker, timeRange]);
const anomalyParams = useMemo(() => {
@ -483,8 +486,8 @@ export const AnomaliesTable = ({
{!hideDatePicker && (
<EuiFlexItem grow={false}>
<EuiSuperDatePicker
start={dateRange.from}
end={dateRange.to}
start={timeRange.start}
end={timeRange.end}
showUpdateButton={false}
onTimeChange={onTimeChange}
width="full"