jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): fix tooltip behavior on a metric widget

Browse source
This commit is contained in:
sylenien 2022-05-17 13:10:41 +02:00 • committed by Delirium
parent 30add0fd3c
commit 14ef2cba26
2 changed files with 67 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/app/components/Dashboard/components/WidgetWrapper/TemplateOverlay.tsx
View file

@ -1,20 +1,10 @@
//@ts-nocheck //@ts-nocheck
import React from 'react'; import React from 'react';
import { Tooltip } from 'react-tippy';
function TemplateOverlay() { function TemplateOverlay() {
return ( return (
<div> <div className="absolute inset-0 cursor-pointer z-10" />
<Tooltip
title="Click to select"
trigger="mouseenter"
hideOnClick={true}
delay={300}
>
<div className="absolute inset-0 cursor-pointer z-10" />
</Tooltip>
</div>
); );
} }
export default TemplateOverlay; export default TemplateOverlay;

108
frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx
View file

@ -12,6 +12,7 @@ import { withSiteId, dashboardMetricDetails } from 'App/routes';
import TemplateOverlay from './TemplateOverlay'; import TemplateOverlay from './TemplateOverlay';
import WidgetIcon from './WidgetIcon'; import WidgetIcon from './WidgetIcon';
import AlertButton from './AlertButton'; import AlertButton from './AlertButton';
import { Tooltip } from 'react-tippy';
interface Props { interface Props {
className?: string; className?: string;
@ -77,57 +78,78 @@ function WidgetWrapper(props: Props) {
const dragDropRef: any = dragRef(dropRef(ref)) const dragDropRef: any = dragRef(dropRef(ref))
return useObserver(() => ( return useObserver(() => (
<div
className={cn("relative rounded bg-white border", 'col-span-' + widget.config.col, { "cursor-pointer" : isTemplate })}
style={{
userSelect: 'none',
opacity: isDragging ? 0.5 : 1,
borderColor: (canDrop && isOver) || active ? '#394EFF' : (isPreview ? 'transparent' : '#EEEEEE'),
}}
ref={dragDropRef}
onClick={props.onClick ? props.onClick : () => {}}
id={`widget-${widget.widgetId}`}
>
{isTemplate && <TemplateOverlay />}
<div <div
className={cn("p-3 flex items-center justify-between", { "cursor-move" : !isTemplate })} className={
cn(
"relative rounded bg-white border",
'col-span-' + widget.config.col,
{ "cursor-pointer" : isTemplate }
)
}
style={{
userSelect: 'none',
opacity: isDragging ? 0.5 : 1,
borderColor: (canDrop && isOver) || active ? '#394EFF' : (isPreview ? 'transparent' : '#EEEEEE'),
}}
ref={dragDropRef}
onClick={props.onClick ? props.onClick : () => {}}
id={`widget-${widget.widgetId}`}
> >
<div className="capitalize w-full font-medium">{widget.name}</div> {/* @ts-ignore */}
{isWidget && ( <Tooltip
<div className="flex items-center" id="no-print"> title="Click to select"
{!isPredefined && ( hideOnClick={true}
<> position="top"
<AlertButton seriesId={widget.series[0] && widget.series[0].seriesId} /> delay={300}
<div className='mx-2'/> followCursor
</> disabled={!isTemplate}
)} boundary="viewport"
flip={["top"]}
transitionFlip={false}
>
{isTemplate && <TemplateOverlay />}
<div
className={cn("p-3 flex items-center justify-between", { "cursor-move" : !isTemplate })}
>
<div className="capitalize w-full font-medium">{widget.name}</div>
{isWidget && (
<div className="flex items-center" id="no-print">
{!isPredefined && (
<>
<AlertButton seriesId={widget.series[0] && widget.series[0].seriesId} />
<div className='mx-2'/>
</>
)}
{!isTemplate && ( {!isTemplate && (
<ItemMenu <ItemMenu
items={[ items={[
{ {
text: widget.metricType === 'predefined' ? 'Cannot edit system generated metrics' : 'Edit', text: widget.metricType === 'predefined' ? 'Cannot edit system generated metrics' : 'Edit',
onClick: onChartClick, onClick: onChartClick,
disabled: widget.metricType === 'predefined', disabled: widget.metricType === 'predefined',
}, },
{ {
text: 'Hide', text: 'Hide',
onClick: onDelete onClick: onDelete
}, },
]} ]}
/> />
)}
</div>
)} )}
</div> </div>
)}
{/* <LazyLoad height={!isTemplate ? 300 : 10} offset={!isTemplate ? 100 : 10} > */}
<div className="px-4" onClick={onChartClick}>
<WidgetChart metric={widget} isWidget={isWidget} />
</div>
{/* </LazyLoad> */}
</Tooltip>
</div> </div>
{/* <LazyLoad height={!isTemplate ? 300 : 10} offset={!isTemplate ? 100 : 10} > */}
<div className="px-4" onClick={onChartClick}>
<WidgetChart metric={widget} isWidget={isWidget} />
</div>
{/* </LazyLoad> */}
</div>
)); ));
} }
export default withRouter(WidgetWrapper); export default withRouter(WidgetWrapper);