jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): webvitals size to 2 col

Browse source
This commit is contained in:
Shekar Siri 2024-07-01 13:20:12 +02:00
parent bfe165692e
commit 69fb477ae1
1 changed files with 56 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx
View file

@ -1,117 +1,70 @@
import React from 'react';
import {useStore} from 'App/mstore';
import { useStore } from 'App/mstore';
import WidgetWrapper from '../WidgetWrapper';
import {NoContent, Loader, Icon} from 'UI';
import {useObserver} from 'mobx-react-lite';
import { NoContent, Loader, Icon } from 'UI';
import { useObserver } from 'mobx-react-lite';
import Widget from 'App/mstore/types/widget';
import MetricTypeList from '../MetricTypeList';
import WidgetWrapperNew from "Components/Dashboard/components/WidgetWrapper/WidgetWrapperNew";
import {Empty} from "antd";
import WidgetWrapperNew from 'Components/Dashboard/components/WidgetWrapper/WidgetWrapperNew';
import { Empty } from 'antd';
interface Props {
siteId: string;
dashboardId: string;
onEditHandler: () => void;
id?: string;
siteId: string;
dashboardId: string;
onEditHandler: () => void;
id?: string;
}
function DashboardWidgetGrid(props: Props) {
const {dashboardId, siteId} = props;
const {dashboardStore} = useStore();
const loading = useObserver(() => dashboardStore.isLoading);
const dashboard = dashboardStore.selectedDashboard;
const list = useObserver(() => dashboard?.widgets);
const smallWidgets: Widget[] = [];
const regularWidgets: Widget[] = [];
const { dashboardId, siteId } = props;
const { dashboardStore } = useStore();
const loading = useObserver(() => dashboardStore.isLoading);
const dashboard = dashboardStore.selectedDashboard;
const list = useObserver(() => dashboard?.widgets);
list?.forEach((item) => {
if (item.config.col === 1) {
smallWidgets.push(item);
} else {
regularWidgets.push(item);
}
});
const smallWidgetsLen = smallWidgets.length;
return useObserver(() => (
// @ts-ignore
list?.length === 0 ? <Empty description="No cards in this dashboard"/> : (
<Loader loading={loading}>
<NoContent
show={list?.length === 0}
icon="no-metrics-chart"
title={
<div className="bg-white rounded-lg">
<div className="border-b p-5">
<div className="text-2xl font-normal">
There are no cards in this dashboard
</div>
<div className="text-base font-normal">
Create a card from any of the below types or pick an existing one from your library.
</div>
</div>
{/*<div className="grid grid-cols-4 p-8 gap-2">*/}
{/* <MetricTypeList dashboardId={parseInt(dashboardId)} siteId={siteId}/>*/}
{/*</div>*/}
</div>
return useObserver(() => (
// @ts-ignore
list?.length === 0 ? <Empty description="No cards in this dashboard" /> : (
<Loader loading={loading}>
<NoContent
show={list?.length === 0}
icon="no-metrics-chart"
title={
<div className="bg-white rounded-lg">
<div className="border-b p-5">
<div className="text-2xl font-normal">
There are no cards in this dashboard
</div>
<div className="text-base font-normal">
Create a card from any of the below types or pick an existing one from your library.
</div>
</div>
</div>
}
>
<div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>
{
list?.map((item: any, index: any) => (
<React.Fragment key={item.widgetId}>
<WidgetWrapperNew
index={index}
widget={item}
moveListItem={(dragIndex: any, hoverIndex: any) =>
dashboard?.swapWidgetPosition(dragIndex, hoverIndex)
}
>
<div className="grid gap-4 grid-cols-4 items-start pb-10" id={props.id}>{smallWidgets.length > 0 ? (
<>
<div className="font-medium text-xl pt-4 flex items-center gap-2 col-span-4">
<Icon name="grid-horizontal" size={26}/>
Web Vitals
</div>
{smallWidgets &&
smallWidgets.map((item: any, index: any) => (
<React.Fragment key={item.widgetId}>
<WidgetWrapperNew
index={index}
widget={item}
moveListItem={(dragIndex: any, hoverIndex: any) =>
dashboard?.swapWidgetPosition(dragIndex, hoverIndex)
} dashboardId={dashboardId}
siteId={siteId}
isWidget={true}
grid="vitals"
/>
</React.Fragment>
))}
</>
) : null}
{smallWidgets.length > 0 && regularWidgets.length > 0 ? (
<div className="font-medium text-xl pt-4 flex items-center gap-2 col-span-4">
<Icon name="grid-horizontal" size={26}/>
All Cards
</div>
) : null}
{regularWidgets &&
regularWidgets.map((item: any, index: any) => (
<React.Fragment key={item.widgetId}>
<WidgetWrapperNew
index={smallWidgetsLen + index}
widget={item}
moveListItem={(dragIndex: any, hoverIndex: any) =>
dashboard?.swapWidgetPosition(dragIndex, hoverIndex)
}
dashboardId={dashboardId}
siteId={siteId}
isWidget={true}
grid="other"
/>
</React.Fragment>
))}
</div>
</NoContent>
</Loader>
)
));
dashboardId={dashboardId}
siteId={siteId}
isWidget={true}
grid="other"
/>
</React.Fragment>
))
}
</div>
</NoContent>
</Loader>
)
));
}
export default DashboardWidgetGrid;