import { useMemo, useContext } from 'react'; import { Outlet, useNavigate, useLocation, Navigate } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { makeStyles, Theme, createStyles } from '@material-ui/core'; import GlobalEffect from '@/components/layout/GlobalEffect'; import Header from '@/components/layout/Header'; import NavMenu from '@/components/menu/NavMenu'; import { NavMenuItem } from '@/components/menu/Types'; import icons from '@/components/icons/Icons'; import { authContext, rootContext, prometheusContext, dataContext, } from '@/context'; import Overview from '@/pages/overview/Overview'; const useStyles = makeStyles((theme: Theme) => createStyles({ root: { minHeight: '100vh', backgroundColor: '#f5f5f5', }, content: { display: 'flex', '& .active': { '& path': { fill: theme.palette.attuGrey.dark, }, }, '& .normal': { '& path': { fill: theme.palette.primary.main, }, }, }, body: { flex: 1, display: 'flex', flexDirection: 'column', height: '100vh', overflowY: 'scroll', }, }) ); function Index() { const navigate = useNavigate(); const { isAuth, isManaged } = useContext(authContext); const { isPrometheusReady } = useContext(prometheusContext); const { database } = useContext(dataContext); const { versionInfo } = useContext(rootContext); const { t: navTrans } = useTranslation('nav'); const classes = useStyles(); const location = useLocation(); const isIndex = location.pathname === '/'; const defaultActive = useMemo(() => { if (location.pathname.includes('databases')) { return navTrans('database'); } if (location.pathname.includes('db-admin')) { return navTrans('dbAdmin'); } if (location.pathname.includes('search')) { return navTrans('search'); } if (location.pathname.includes('system')) { return navTrans('system'); } if (location.pathname.includes('users') || location.pathname.includes('roles')) { return navTrans('user'); } return navTrans('overview'); }, [location, navTrans]); const menuItems: NavMenuItem[] = [ { icon: icons.navOverview, label: navTrans('overview'), onClick: () => navigate('/'), }, { icon: icons.database, label: navTrans('database'), onClick: () => navigate(`/databases/${database}`), }, { icon: icons.navSearch, label: navTrans('search'), onClick: () => navigate('/search'), iconActiveClass: 'normal', iconNormalClass: 'active', }, ]; if (!isManaged) { menuItems.push( { icon: icons.navPerson, label: navTrans('user'), onClick: () => navigate('/users'), }, { icon: icons.navSystem, label: navTrans('system'), onClick: () => isPrometheusReady ? navigate('/system_healthy') : navigate('/system'), iconActiveClass: 'normal', iconNormalClass: 'active', }, { icon: icons.settings, label: navTrans('dbAdmin'), onClick: () => navigate('/db-admin'), } ); } // check if is connected if (!isAuth) { return ; } return ( <>
{isIndex ? : }
); } export default Index;