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

fix: layout is updated

Browse Source
This commit is contained in:
Palash gupta 2022-05-27 07:03:12 +05:30
parent 38c0bcf4ea
commit 51e0972219
No known key found for this signature in database
GPG Key ID: 8FD05AE6F9150AD6
1 changed files with 23 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
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 && (
@ -264,7 +257,7 @@ function GridGraph(): JSX.Element {
<CardContainer <CardContainer
isQueryType={isQueryType} isQueryType={isQueryType}
isDarkMode={isDarkMode} isDarkMode={isDarkMode}
key={rest.i + JSON.stringify(widget)} key={rest.i}
data-grid={rest} data-grid={rest}
> >
<Card isDarkMode={isDarkMode} isQueryType={isQueryType}> <Card isDarkMode={isDarkMode} isQueryType={isQueryType}>