misc_pterodactyl-panel/resources/scripts/routers/ServerRouter.tsx

203 lines
11 KiB
TypeScript
Raw Normal View History

2020-12-16 23:55:44 +00:00
import TransferListener from '@/components/server/TransferListener';
import React, { useEffect, useState } from 'react';
import { NavLink, Route, RouteComponentProps, Switch } from 'react-router-dom';
import NavigationBar from '@/components/NavigationBar';
import ServerConsole from '@/components/server/ServerConsole';
import TransitionRouter from '@/TransitionRouter';
import WebsocketHandler from '@/components/server/WebsocketHandler';
import { ServerContext } from '@/state/server';
import DatabasesContainer from '@/components/server/databases/DatabasesContainer';
2019-07-28 03:23:44 +00:00
import FileManagerContainer from '@/components/server/files/FileManagerContainer';
import { CSSTransition } from 'react-transition-group';
2019-10-19 22:31:02 +00:00
import FileEditContainer from '@/components/server/files/FileEditContainer';
2019-12-07 23:58:37 +00:00
import SettingsContainer from '@/components/server/settings/SettingsContainer';
2020-02-08 23:23:08 +00:00
import ScheduleContainer from '@/components/server/schedules/ScheduleContainer';
2020-03-18 06:33:53 +00:00
import ScheduleEditContainer from '@/components/server/schedules/ScheduleEditContainer';
import UsersContainer from '@/components/server/users/UsersContainer';
import Can from '@/components/elements/Can';
import BackupContainer from '@/components/server/backups/BackupContainer';
import Spinner from '@/components/elements/Spinner';
2021-01-31 02:01:32 +00:00
import ScreenBlock, { NotFound, ServerError } from '@/components/elements/ScreenBlock';
import { httpErrorToHuman } from '@/api/http';
import { useStoreState } from 'easy-peasy';
import SubNavigation from '@/components/elements/SubNavigation';
import NetworkContainer from '@/components/server/network/NetworkContainer';
2020-07-30 05:02:00 +00:00
import InstallListener from '@/components/server/InstallListener';
import StartupContainer from '@/components/server/startup/StartupContainer';
import ErrorBoundary from '@/components/elements/ErrorBoundary';
2020-11-02 05:14:02 +00:00
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
import RequireServerPermission from '@/hoc/RequireServerPermission';
2021-01-31 02:01:32 +00:00
import ServerInstallSvg from '@/assets/images/server_installing.svg';
import ServerRestoreSvg from '@/assets/images/server_restore.svg';
import ServerErrorSvg from '@/assets/images/server_error.svg';
2021-01-31 02:01:32 +00:00
const ConflictStateRenderer = () => {
const status = ServerContext.useStoreState(state => state.server.data?.status || null);
const isTransferring = ServerContext.useStoreState(state => state.server.data?.isTransferring || false);
return (
status === 'installing' || status === 'install_failed' ?
<ScreenBlock
title={'Running Installer'}
image={ServerInstallSvg}
message={'Your server should be ready soon, please try again in a few minutes.'}
/>
:
status === 'suspended' ?
<ScreenBlock
title={'Server Suspended'}
image={ServerErrorSvg}
message={'This server is suspended and cannot be accessed.'}
/>
:
<ScreenBlock
title={isTransferring ? 'Transferring' : 'Restoring from Backup'}
image={ServerRestoreSvg}
message={isTransferring ? 'Your server is being transfered to a new node, please check back later.' : 'Your server is currently being restored from a backup, please check back in a few minutes.'}
/>
2021-01-31 02:01:32 +00:00
);
};
const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {
const rootAdmin = useStoreState(state => state.user.data!.rootAdmin);
const [ error, setError ] = useState('');
const id = ServerContext.useStoreState(state => state.server.data?.id);
const uuid = ServerContext.useStoreState(state => state.server.data?.uuid);
2021-01-31 02:01:32 +00:00
const inConflictState = ServerContext.useStoreState(state => state.server.inConflictState);
const serverId = ServerContext.useStoreState(state => state.server.data?.internalId);
const getServer = ServerContext.useStoreActions(actions => actions.server.getServer);
const clearServerState = ServerContext.useStoreActions(actions => actions.clearServerState);
useEffect(() => () => {
clearServerState();
}, []);
useEffect(() => {
setError('');
getServer(match.params.id)
.catch(error => {
2021-01-31 02:01:32 +00:00
console.error(error);
setError(httpErrorToHuman(error));
});
return () => {
clearServerState();
};
}, [ match.params.id ]);
return (
2020-04-10 17:11:15 +00:00
<React.Fragment key={'server-router'}>
<NavigationBar/>
{(!uuid || !id) ?
error ?
<ServerError message={error}/>
:
<Spinner size={'large'} centered/>
:
<>
<CSSTransition timeout={150} classNames={'fade'} appear in>
<SubNavigation>
<div>
<NavLink to={`${match.url}`} exact>Console</NavLink>
<Can action={'file.*'}>
<NavLink to={`${match.url}/files`}>File Manager</NavLink>
</Can>
<Can action={'database.*'}>
<NavLink to={`${match.url}/databases`}>Databases</NavLink>
</Can>
<Can action={'schedule.*'}>
<NavLink to={`${match.url}/schedules`}>Schedules</NavLink>
</Can>
<Can action={'user.*'}>
<NavLink to={`${match.url}/users`}>Users</NavLink>
</Can>
<Can action={'backup.*'}>
<NavLink to={`${match.url}/backups`}>Backups</NavLink>
</Can>
<Can action={'allocation.*'}>
<NavLink to={`${match.url}/network`}>Network</NavLink>
</Can>
<Can action={'startup.*'}>
<NavLink to={`${match.url}/startup`}>Startup</NavLink>
</Can>
2020-07-05 01:30:50 +00:00
<Can action={[ 'settings.*', 'file.sftp' ]} matchAny>
<NavLink to={`${match.url}/settings`}>Settings</NavLink>
</Can>
2020-11-02 05:14:02 +00:00
{rootAdmin &&
<a href={'/admin/servers/view/' + serverId} rel="noreferrer" target={'_blank'}>
<FontAwesomeIcon icon={faExternalLinkAlt}/>
</a>
2020-11-02 05:14:02 +00:00
}
</div>
</SubNavigation>
</CSSTransition>
2020-07-30 05:02:00 +00:00
<InstallListener/>
2020-12-16 23:55:44 +00:00
<TransferListener/>
2020-07-30 05:02:00 +00:00
<WebsocketHandler/>
2021-01-31 02:01:32 +00:00
{(inConflictState && (!rootAdmin || (rootAdmin && !location.pathname.endsWith(`/server/${id}`)))) ?
<ConflictStateRenderer/>
:
<ErrorBoundary>
<TransitionRouter>
<Switch location={location}>
<Route path={`${match.path}`} component={ServerConsole} exact/>
<Route path={`${match.path}/files`} exact>
<RequireServerPermission permissions={'file.*'}>
2021-01-31 02:01:32 +00:00
<FileManagerContainer/>
</RequireServerPermission>
</Route>
<Route path={`${match.path}/files/:action(edit|new)`} exact>
<Spinner.Suspense>
2021-01-31 02:01:32 +00:00
<FileEditContainer/>
</Spinner.Suspense>
</Route>
<Route path={`${match.path}/databases`} exact>
<RequireServerPermission permissions={'database.*'}>
2021-01-31 02:01:32 +00:00
<DatabasesContainer/>
</RequireServerPermission>
</Route>
<Route path={`${match.path}/schedules`} exact>
<RequireServerPermission permissions={'schedule.*'}>
2021-01-31 02:01:32 +00:00
<ScheduleContainer/>
</RequireServerPermission>
</Route>
<Route path={`${match.path}/schedules/:id`} exact>
<ScheduleEditContainer/>
</Route>
<Route path={`${match.path}/users`} exact>
<RequireServerPermission permissions={'user.*'}>
2021-01-31 02:01:32 +00:00
<UsersContainer/>
</RequireServerPermission>
</Route>
<Route path={`${match.path}/backups`} exact>
<RequireServerPermission permissions={'backup.*'}>
2021-01-31 02:01:32 +00:00
<BackupContainer/>
</RequireServerPermission>
</Route>
<Route path={`${match.path}/network`} exact>
<RequireServerPermission permissions={'allocation.*'}>
2021-01-31 02:01:32 +00:00
<NetworkContainer/>
</RequireServerPermission>
</Route>
<Route path={`${match.path}/startup`} component={StartupContainer} exact/>
<Route path={`${match.path}/settings`} component={SettingsContainer} exact/>
<Route path={'*'} component={NotFound}/>
</Switch>
</TransitionRouter>
</ErrorBoundary>
}
</>
}
</React.Fragment>
);
};
export default (props: RouteComponentProps<any>) => (
<ServerContext.Provider>
<ServerRouter {...props}/>
</ServerContext.Provider>
);