8facbb9d6e
* change(ui): route refactor * change(ui): new navigation * change(ui): new navigation - icons and other fixes
41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { useObserver } from 'mobx-react-lite';
|
|
import { useStore } from 'App/mstore';
|
|
import { withRouter, RouteComponentProps } from 'react-router-dom';
|
|
import DashboardSideMenu from './components/DashboardSideMenu';
|
|
import { Loader } from 'UI';
|
|
import DashboardRouter from './components/DashboardRouter';
|
|
import cn from 'classnames';
|
|
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 = useObserver(() => 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 useObserver(() => (
|
|
<Loader loading={loading} className='mt-12'>
|
|
<DashboardRouter />
|
|
</Loader>
|
|
));
|
|
}
|
|
|
|
export default withRouter(withPermissions(['METRICS'])(NewDashboard));
|