GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-31 07:02:03 +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>(
(state) => state.dashboards,
);
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
const [saveLayoutState, setSaveLayoutState] = useState<State>({
loading: false,
error: false,
@ -47,6 +47,8 @@ function GridGraph(): JSX.Element {
const isDeleted = useRef(false);
const { role } = useSelector<AppState, AppReducer>((state) => state.app);
const { isDarkMode } = useSelector<AppState, AppReducer>((state) => state.app);
const [saveLayout] = useComponentPermission(['save_layout'], role);
const getPreLayouts: () => LayoutProps[] = useCallback(() => {
@ -74,32 +76,25 @@ function GridGraph(): JSX.Element {
};
});
}
return widgets.map((widget, index) => {
const allLayouts = data?.layout;
const lastLayout = (data?.layout || [])[(allLayouts?.length || 0) - 1];
const currentLayout = (allLayouts || [])[index] || {
h: lastLayout.h,
i: (lastLayout.i + 1).toString(),
w: lastLayout.w,
x: (lastLayout.x % 2) * 6,
y: lastLayout.y,
};
return {
...currentLayout,
Component: (): JSX.Element => (
<Graph
name={widget.id + index}
isDeleted={isDeleted}
widget={widget}
yAxisUnit={widget.yAxisUnit}
/>
),
};
});
}, [widgets, data.layout]);
return data.layout
.filter((_, index) => widgets[index])
.map((e, index) => ({
...e,
Component: (): JSX.Element => {
if (widgets[index]) {
return (
<Graph
name={e.i + index}
isDeleted={isDeleted}
widget={widgets[index]}
yAxisUnit={widgets[index].yAxisUnit}
/>
);
}
return <div />;
},
}));
}, [widgets, data?.layout]);
useEffect(() => {
if (
@ -224,8 +219,6 @@ function GridGraph(): JSX.Element {
return <Spinner height="40vh" size="large" tip="Loading..." />;
}
console.log({ layouts });
return (
<>
{saveLayout && (
@ -264,7 +257,7 @@ function GridGraph(): JSX.Element {
<CardContainer
isQueryType={isQueryType}
isDarkMode={isDarkMode}
key={rest.i + JSON.stringify(widget)}
key={rest.i}
data-grid={rest}
>
<Card isDarkMode={isDarkMode} isQueryType={isQueryType}>