github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Logs UI] Add a time cursor to the log minimap (#39538) (#40773)

Browse source 
* Add a time cursor to the log minimap

* Fix type checking
This commit is contained in:
Zacqary Adam Xeper 2019-07-10 11:58:49 -05:00 • committed by GitHub
parent 96c5901fe0
commit c1c66b03e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 39 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

42
x-pack/legacy/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx
View file

@ -31,7 +31,15 @@ interface LogMinimapProps {
width: number;
}
export class LogMinimap extends React.Component<LogMinimapProps> {
interface LogMinimapState {
timeCursorY: number;
}
export class LogMinimap extends React.Component<LogMinimapProps, LogMinimapState> {
public readonly state = {
timeCursorY: 0,
};
public handleClick: React.MouseEventHandler<SVGSVGElement> = event => {
const svgPosition = event.currentTarget.getBoundingClientRect();
const clickedYPosition = event.clientY - svgPosition.top;
@ -61,6 +69,13 @@ export class LogMinimap extends React.Component<LogMinimapProps> {
return ((time - minTime) * height) / intervalSize;
};
private updateTimeCursor: React.MouseEventHandler<SVGSVGElement> = event => {
const svgPosition = event.currentTarget.getBoundingClientRect();
const timeCursorY = event.clientY - svgPosition.top;
this.setState({ timeCursorY });
};
public render() {
const {
className,
@ -72,16 +87,19 @@ export class LogMinimap extends React.Component<LogMinimapProps> {
width,
} = this.props;
const { timeCursorY } = this.state;
const [minTime, maxTime] = this.getYScale().domain();
return (
<svg
<MinimapWrapper
className={className}
height={height}
preserveAspectRatio="none"
viewBox={`0 0 ${width} ${height}`}
width={width}
onClick={this.handleClick}
onMouseMove={this.updateTimeCursor}
>
<MinimapBackground x={width / 2} y="0" width={width / 2} height={height} />
<DensityChart
@ -101,6 +119,7 @@ export class LogMinimap extends React.Component<LogMinimapProps> {
width={width}
/>
) : null}
<TimeCursor x1={0} x2={width} y1={timeCursorY} y2={timeCursorY} />
{/* <g transform={`translate(${width * 0.5}, 0)`}>
<SearchMarkers
buckets={searchSummaryBuckets || []}
@ -111,7 +130,7 @@ export class LogMinimap extends React.Component<LogMinimapProps> {
jumpToTarget={jumpToTarget}
/>
</g> */}
</svg>
</MinimapWrapper>
);
}
}
@ -124,3 +143,20 @@ const MinimapBorder = euiStyled.line`
stroke: ${props => props.theme.eui.euiColorMediumShade};
stroke-width: 1px;
`;
const TimeCursor = euiStyled.line`
stroke-width: 1px;
stroke: ${props =>
props.theme.darkMode
? props.theme.eui.euiColorDarkestShade
: props.theme.eui.euiColorDarkShade};
`;
const MinimapWrapper = euiStyled.svg`
& ${TimeCursor} {
visibility: hidden;
}
&:hover ${TimeCursor} {
visibility: visible;
}
`;