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

fix(ui): fix dashboard widget scroll position on change

Browse source
This commit is contained in:
sylenien 2022-06-23 18:01:18 +02:00
parent 68b8cc3586
commit 6114254671
2 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/app/components/Dashboard/components/DashboardMetricSelection/DashboardMetricSelection.tsx
View file

@ -36,6 +36,7 @@ function DashboardMetricSelection(props: IProps) {
const [activeCategory, setActiveCategory] = React.useState<any>();
const [selectAllCheck, setSelectAllCheck] = React.useState(false);
const selectedWidgetIds = useObserver(() => dashboardStore.selectedWidgets.map((widget: any) => widget.metricId));
const scrollContainer = React.useRef<HTMLDivElement>(null);
useEffect(() => {
dashboardStore?.fetchTemplates(true).then((categories) => {
@ -43,6 +44,12 @@ function DashboardMetricSelection(props: IProps) {
});
}, []);
useEffect(() => {
if (scrollContainer.current) {
scrollContainer.current.scrollTop = 0;
}
}, [activeCategory, scrollContainer.current]);
const handleWidgetCategoryClick = (category: any) => {
setActiveCategory(category);
setSelectAllCheck(false);
@ -100,6 +107,7 @@ function DashboardMetricSelection(props: IProps) {
<div
className="grid grid-cols-4 gap-4 -mx-4 px-4 pb-40 items-start py-1"
style={{ maxHeight: "calc(100vh - 170px)", overflowY: 'auto' }}
ref={scrollContainer}
>
{activeCategory && activeCategory.widgets.map((widget: any) => (
<WidgetWrapper

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

@ -5,7 +5,7 @@ import { useDrag, useDrop } from 'react-dnd';
import WidgetChart from '../WidgetChart';
import { useObserver } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
import { withRouter } from 'react-router-dom';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import { withSiteId, dashboardMetricDetails } from 'App/routes';
import TemplateOverlay from './TemplateOverlay';
import AlertButton from './AlertButton';
@ -26,7 +26,7 @@ interface Props {
onClick?: () => void;
isWidget?: boolean;
}
function WidgetWrapper(props: Props) {
function WidgetWrapper(props: Props & RouteComponentProps) {
const { dashboardStore } = useStore();
const { isWidget = false, active = false, index = 0, moveListItem = null, isPreview = false, isTemplate = false, dashboardId, siteId } = props;
const widget: any = useObserver(() => props.widget);