GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 06:55:58 +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

51
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(), <Graph
w: lastLayout.w, name={e.i + index}
x: (lastLayout.x % 2) * 6, isDeleted={isDeleted}
y: lastLayout.y, widget={widgets[index]}
}; yAxisUnit={widgets[index].yAxisUnit}
/>
return { );
...currentLayout, }
Component: (): JSX.Element => ( return <div />;
<Graph },
name={widget.id + index} }));
isDeleted={isDeleted} }, [widgets, data?.layout]);
widget={widget}
yAxisUnit={widget.yAxisUnit}
/>
),
};
});
}, [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 && (