From e18b6557bda8188a757a915aa5a5c5dee2254abd Mon Sep 17 00:00:00 2001 From: Carlos Crespo Date: Tue, 10 Dec 2024 16:41:16 +0100 Subject: [PATCH 1/2] Fix Logs stream minimap after changes to use @emotion --- .../logging/log_minimap/log_minimap.tsx | 218 +++++++++--------- 1 file changed, 106 insertions(+), 112 deletions(-) diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx index fcd57e98b07d..72aa0c4f558c 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx @@ -5,7 +5,6 @@ * 2.0. */ -import styled from '@emotion/styled'; import { LogEntriesSummaryBucket, LogEntriesSummaryHighlightsBucket, @@ -14,6 +13,9 @@ import { import { scaleLinear } from 'd3-scale'; import moment from 'moment'; import * as React from 'react'; +import { css } from '@emotion/react'; +import { useEuiTheme } from '@elastic/eui'; +import { useState } from 'react'; import { DensityChart } from './density_chart'; import { HighlightedInterval } from './highlighted_interval'; import { SearchMarkers } from './search_markers'; @@ -37,11 +39,6 @@ interface LogMinimapProps { width: number; } -interface LogMinimapState { - target: number | null; - timeCursorY: number; -} - // Wide enough to fit "September" const TIMERULER_WIDTH = 50; @@ -51,133 +48,130 @@ function calculateYScale(start: number | null, end: number | null, height: numbe .range([0, height]); } -export class LogMinimap extends React.Component { - constructor(props: LogMinimapProps) { - super(props); - this.state = { - timeCursorY: 0, - target: props.target, - }; - } - - public handleClick: React.MouseEventHandler = (event) => { +export const LogMinimap = ({ + start, + end, + className, + height, + highlightedInterval, + jumpToTarget, + summaryBuckets, + summaryHighlightBuckets, + width, + target, +}: LogMinimapProps) => { + const [timeCursorY, setTimeCursorY] = useState(0); + const theme = useEuiTheme(); + + const handleClick: React.MouseEventHandler = (event) => { const minimapTop = event.currentTarget.getBoundingClientRect().top; const clickedYPosition = event.clientY - minimapTop; - const clickedTime = Math.floor(this.getYScale().invert(clickedYPosition)); + const clickedTime = Math.floor(getYScale().invert(clickedYPosition)); - this.props.jumpToTarget({ + jumpToTarget({ tiebreaker: 0, time: moment(clickedTime).toISOString(), }); }; - public getYScale = () => { - const { start, end, height } = this.props; + const getYScale = () => { return calculateYScale(start, end, height); }; - public getPositionOfTime = (time: number) => { - return this.getYScale()(time) ?? 0; + const getPositionOfTime = (time: number) => { + return getYScale()(time) ?? 0; }; - private updateTimeCursor: React.MouseEventHandler = (event) => { + const updateTimeCursor: React.MouseEventHandler = (event) => { const svgPosition = event.currentTarget.getBoundingClientRect(); - const timeCursorY = event.clientY - svgPosition.top; - this.setState({ timeCursorY }); + setTimeCursorY(event.clientY - svgPosition.top); }; - public render() { - const { - start, - end, - className, - height, - highlightedInterval, - jumpToTarget, - summaryBuckets, - summaryHighlightBuckets, - width, - } = this.props; - const { timeCursorY, target } = this.state; - const [minTime, maxTime] = calculateYScale(start, end, height).domain(); - const tickCount = height ? Math.floor(height / 50) : 12; - - return ( - + + - - + + - - - - - - - {highlightedInterval ? ( - - ) : null} - - - ); - } -} -const MinimapBorder = styled.line` - stroke: ${(props) => props.theme.euiTheme.colors.mediumShade}; - stroke-width: 1px; -`; - -const TimeCursor = styled.line` - pointer-events: none; - stroke-width: 1px; - stroke: ${(props) => - props.theme.colorMode === 'DARK' - ? props.theme.euiTheme.colors.darkestShade - : props.theme.euiTheme.colors.darkShade}; -`; - -const MinimapWrapper = styled.svg` - cursor: pointer; - fill: ${(props) => props.theme.euiTheme.colors.emptyShade}; - & ${TimeCursor} { - visibility: hidden; - } - &:hover ${TimeCursor} { - visibility: visible; - } -`; + + + + {highlightedInterval ? ( + + ) : null} + + + ); +}; From 5706db03a46b34493a1df4f621ef78f03b81362c Mon Sep 17 00:00:00 2001 From: Carlos Crespo Date: Thu, 12 Dec 2024 14:11:02 +0100 Subject: [PATCH 2/2] keep fidelity with refactored class component --- .../components/logging/log_minimap/log_minimap.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx index 72aa0c4f558c..821b9bb8f9eb 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx @@ -15,7 +15,7 @@ import moment from 'moment'; import * as React from 'react'; import { css } from '@emotion/react'; import { useEuiTheme } from '@elastic/eui'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { DensityChart } from './density_chart'; import { HighlightedInterval } from './highlighted_interval'; import { SearchMarkers } from './search_markers'; @@ -58,11 +58,16 @@ export const LogMinimap = ({ summaryBuckets, summaryHighlightBuckets, width, - target, + target: initialTarget, }: LogMinimapProps) => { const [timeCursorY, setTimeCursorY] = useState(0); + const [target, setTarget] = useState(initialTarget); const theme = useEuiTheme(); + useEffect(() => { + setTarget(initialTarget); + }, [initialTarget]); + const handleClick: React.MouseEventHandler = (event) => { const minimapTop = event.currentTarget.getBoundingClientRect().top; const clickedYPosition = event.clientY - minimapTop;