openreplay/frontend/app/components/Dashboard/NewDashboard.tsx
2024-07-03 11:08:12 +02:00

39 lines
1.4 KiB
TypeScript

import React, { useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { useStore } from 'App/mstore';
import { withRouter, RouteComponentProps } from 'react-router-dom';
import { Loader } from 'UI';
import DashboardRouter from './components/DashboardRouter';
import withPermissions from 'HOCs/withPermissions';
interface RouterProps {
siteId: string;
dashboardId: string;
metricId: string;
}
function NewDashboard(props: RouteComponentProps<RouterProps>) {
const { history, match: { params: { siteId, dashboardId } } } = props;
const { dashboardStore } = useStore();
const loading = dashboardStore.isLoading;
const isMetricDetails = history.location.pathname.includes('/metrics/') || history.location.pathname.includes('/metric/');
const isDashboardDetails = history.location.pathname.includes('/dashboard/');
const isAlertsDetails = history.location.pathname.includes('/alert/');
const shouldHideMenu = isMetricDetails || isDashboardDetails || isAlertsDetails;
useEffect(() => {
dashboardStore.fetchList().then((resp) => {
if (parseInt(dashboardId) > 0) {
dashboardStore.selectDashboardById(dashboardId);
}
});
}, [siteId]);
return (
<Loader loading={loading} className='mt-12'>
<DashboardRouter />
</Loader>
);
}
export default withRouter(withPermissions(['METRICS'])(observer(NewDashboard)));