b1b21937ed
* ui, tracker, backend: support long animation metrics * ui: fix LAT mapping * ui: change jump button display, longTask time definition * ui: border for rows * ui: refine LAT design * tracker: regenerate messages
40 lines
1 KiB
TypeScript
40 lines
1 KiB
TypeScript
import React from 'react';
|
|
import { Tooltip } from 'UI';
|
|
import { CaretRightOutlined } from '@ant-design/icons';
|
|
import { Button } from 'antd';
|
|
import { shortDurationFromMs } from 'App/date';
|
|
|
|
interface Props {
|
|
onClick: any;
|
|
time?: number;
|
|
tooltip?: string;
|
|
}
|
|
function JumpButton(props: Props) {
|
|
const { tooltip } = props;
|
|
return (
|
|
<div className="absolute right-2 top-0 bottom-0 my-auto flex items-center">
|
|
{props.time ? (
|
|
<div className="block mr-2 text-sm">
|
|
{shortDurationFromMs(props.time)}
|
|
</div>
|
|
) : null}
|
|
<Tooltip title={tooltip} disabled={!tooltip}>
|
|
<Button
|
|
type="default"
|
|
size="small"
|
|
className="hidden group-hover:flex rounded-lg text-xs p-1 py-0 gap-0 h-6"
|
|
iconPosition="end"
|
|
onClick={(e: any) => {
|
|
e.stopPropagation();
|
|
props.onClick();
|
|
}}
|
|
icon={<CaretRightOutlined />}
|
|
>
|
|
JUMP
|
|
</Button>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default JumpButton;
|