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
import React from 'react';
import { Tooltip } from 'react-tippy';
function TemplateOverlay() {
return (
<div>
<Tooltip
title="Click to select"
trigger="mouseenter"
hideOnClick={true}
delay={300}
>
<div className="absolute inset-0 cursor-pointer z-10" />
</Tooltip>
</div>
<div className="absolute inset-0 cursor-pointer z-10" />
);
}
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 WidgetIcon from './WidgetIcon';
import AlertButton from './AlertButton';
import { Tooltip } from 'react-tippy';
interface Props {
className?: string;
@ -77,57 +78,78 @@ function WidgetWrapper(props: Props) {
const dragDropRef: any = dragRef(dropRef(ref))
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
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>
{isWidget && (
<div className="flex items-center" id="no-print">
{!isPredefined && (
<>
<AlertButton seriesId={widget.series[0] && widget.series[0].seriesId} />
<div className='mx-2'/>
</>
)}
{/* @ts-ignore */}
<Tooltip
title="Click to select"
hideOnClick={true}
position="top"
delay={300}
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 && (
<ItemMenu
items={[
{
text: widget.metricType === 'predefined' ? 'Cannot edit system generated metrics' : 'Edit',
onClick: onChartClick,
disabled: widget.metricType === 'predefined',
},
{
text: 'Hide',
onClick: onDelete
},
]}
/>
{!isTemplate && (
<ItemMenu
items={[
{
text: widget.metricType === 'predefined' ? 'Cannot edit system generated metrics' : 'Edit',
onClick: onChartClick,
disabled: widget.metricType === 'predefined',
},
{
text: 'Hide',
onClick: onDelete
},
]}
/>
)}
</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>
{/* <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);