feat: dashboard layout is updated from widgets (#1207)

This commit is contained in:
palash-signoz 2022-05-26 15:09:59 +05:30 committed by GitHub
parent 642c6c5920
commit d863c2781a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -74,24 +74,31 @@ function GridGraph(): JSX.Element {
};
});
}
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 />;
},
}));
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]);
useEffect(() => {
@ -217,6 +224,8 @@ function GridGraph(): JSX.Element {
return <Spinner height="40vh" size="large" tip="Loading..." />;
}
console.log({ layouts });
return (
<>
{saveLayout && (
@ -255,7 +264,7 @@ function GridGraph(): JSX.Element {
<CardContainer
isQueryType={isQueryType}
isDarkMode={isDarkMode}
key={rest.i}
key={rest.i + JSON.stringify(widget)}
data-grid={rest}
>
<Card isDarkMode={isDarkMode} isQueryType={isQueryType}>