122 lines
3.9 KiB
TypeScript
122 lines
3.9 KiB
TypeScript
import { lazyLoad, query } from '@/routers/helpers'
|
|
import { Route } from '@/routers/router'
|
|
import { lazy, useContext, useEffect } from 'react'
|
|
import { Translation, useTranslation } from 'react-i18next'
|
|
import { Navigate, Outlet } from 'react-router-dom'
|
|
|
|
import getAddresses from '@/api/admin/addressPools/addresses/getAddresses'
|
|
import getAddressPool from '@/api/admin/addressPools/getAddressPool'
|
|
import { getKey as getPoolKey } from '@/api/admin/addressPools/useAddressPoolSWR'
|
|
import { getKey as getAddressesKey } from '@/api/admin/addressPools/useAddressesSWR'
|
|
|
|
import { NavigationBarContext } from '@/components/elements/navigation/NavigationBar'
|
|
|
|
export const routes: Route[] = [
|
|
{
|
|
path: 'ipam',
|
|
handle: {
|
|
crumb: () => ({
|
|
to: '/admin/ipam',
|
|
element: (
|
|
<Translation ns={'strings'}>{t => t('ipam')}</Translation>
|
|
),
|
|
}),
|
|
},
|
|
children: [
|
|
{
|
|
index: true,
|
|
element: lazyLoad(
|
|
lazy(() => import('@/components/admin/ipam/IpamContainer'))
|
|
),
|
|
},
|
|
{
|
|
path: ':poolId',
|
|
loader: ({ params }) =>
|
|
query(getPoolKey(parseInt(params.poolId!)), () =>
|
|
getAddressPool(parseInt(params.poolId!))
|
|
),
|
|
element: lazyLoad(lazy(() => import('./AdminIpamRouter'))),
|
|
handle: {
|
|
crumb: data => ({
|
|
to: `/admin/ipam/${data.poolId}`,
|
|
element: data.name,
|
|
}),
|
|
},
|
|
children: [
|
|
{
|
|
index: true,
|
|
element: <Navigate to={'./addresses'} replace />,
|
|
},
|
|
{
|
|
path: 'addresses',
|
|
loader: ({ params }) => {
|
|
const id = parseInt(params.poolId!)
|
|
const page = params.page ? parseInt(params.page) : 1
|
|
|
|
return query(getAddressesKey(id, page, ''), () =>
|
|
getAddresses(id, {
|
|
page,
|
|
query: '',
|
|
include: ['server'],
|
|
})
|
|
)
|
|
},
|
|
element: lazyLoad(
|
|
lazy(
|
|
() =>
|
|
import(
|
|
'@/components/admin/ipam/addresses/AddressesContainer'
|
|
)
|
|
)
|
|
),
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
]
|
|
|
|
const AdminIpamRouter = () => {
|
|
const { setRoutes, setBreadcrumb } = useContext(NavigationBarContext)
|
|
const { t: tStrings } = useTranslation('strings')
|
|
|
|
const navRoutes = [
|
|
{
|
|
name: tStrings('overview'),
|
|
path: '/admin',
|
|
end: true,
|
|
},
|
|
{
|
|
name: tStrings('location_other'),
|
|
path: '/admin/locations',
|
|
},
|
|
{
|
|
name: tStrings('node_other'),
|
|
path: '/admin/nodes',
|
|
},
|
|
{
|
|
name: tStrings('server_other'),
|
|
path: '/admin/servers',
|
|
},
|
|
{
|
|
name: tStrings('ipam'),
|
|
path: '/admin/ipam',
|
|
},
|
|
{
|
|
name: tStrings('user_other'),
|
|
path: '/admin/users',
|
|
},
|
|
{
|
|
name: tStrings('token_other'),
|
|
path: '/admin/tokens',
|
|
},
|
|
]
|
|
|
|
useEffect(() => {
|
|
setRoutes(navRoutes)
|
|
}, [])
|
|
|
|
return <Outlet />
|
|
}
|
|
|
|
export default AdminIpamRouter
|