GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 13:55:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1209 from palash-signoz/dashboard-layout-fix

Browse Source 
fix: layout is updated
This commit is contained in:
palash-signoz 2022-05-30 22:31:13 +05:30 committed by GitHub
commit 697fd1d1bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
frontend/src/container/GridGraphLayout/index.tsx
View File

@ -28,7 +28,7 @@ function GridGraph(): JSX.Element {
const { dashboards, loading } = useSelector<AppState, DashboardReducer>( const { dashboards, loading } = useSelector<AppState, DashboardReducer>(
(state) => state.dashboards, (state) => state.dashboards,
); );
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
const [saveLayoutState, setSaveLayoutState] = useState<State>({ const [saveLayoutState, setSaveLayoutState] = useState<State>({
loading: false, loading: false,
error: false, error: false,
@ -47,6 +47,8 @@ function GridGraph(): JSX.Element {
const isDeleted = useRef(false); const isDeleted = useRef(false);
const { role } = useSelector<AppState, AppReducer>((state) => state.app); const { role } = useSelector<AppState, AppReducer>((state) => state.app);
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
const [saveLayout] = useComponentPermission(['save_layout'], role); const [saveLayout] = useComponentPermission(['save_layout'], role);
const getPreLayouts: () => LayoutProps[] = useCallback(() => { const getPreLayouts: () => LayoutProps[] = useCallback(() => {
@ -74,32 +76,25 @@ function GridGraph(): JSX.Element {
}; };
}); });
} }
return data.layout
return widgets.map((widget, index) => { .filter((_, index) => widgets[index])
const allLayouts = data?.layout; .map((e, index) => ({
const lastLayout = (data?.layout || [])[(allLayouts?.length || 0) - 1]; ...e,
Component: (): JSX.Element => {
const currentLayout = (allLayouts || [])[index] || { if (widgets[index]) {
h: lastLayout.h, return (
i: (lastLayout.i + 1).toString(),
w: lastLayout.w,
x: (lastLayout.x % 2) * 6,
y: lastLayout.y,
};
return {
...currentLayout,
Component: (): JSX.Element => (
<Graph <Graph
name={widget.id + index} name={e.i + index}
isDeleted={isDeleted} isDeleted={isDeleted}
widget={widget} widget={widgets[index]}
yAxisUnit={widget.yAxisUnit} yAxisUnit={widgets[index].yAxisUnit}
/> />
), );
}; }
}); return <div />;
}, [widgets, data.layout]); },
}));
}, [widgets, data?.layout]);
useEffect(() => { useEffect(() => {
if ( if (
@ -224,8 +219,6 @@ function GridGraph(): JSX.Element {
return <Spinner height="40vh" size="large" tip="Loading..." />; return <Spinner height="40vh" size="large" tip="Loading..." />;
} }
console.log({ layouts });
return ( return (
<> <>
{saveLayout && ( {saveLayout && (