misc_pterodactyl-panel/resources/scripts/components/server/ServerConsole.tsx

69 lines
3.1 KiB
TypeScript
Raw Normal View History

import React, { lazy, memo } from 'react';
import { ServerContext } from '@/state/server';
import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
import Can from '@/components/elements/Can';
import ContentContainer from '@/components/elements/ContentContainer';
import tw from 'twin.macro';
2020-08-26 04:39:00 +00:00
import ServerContentBlock from '@/components/elements/ServerContentBlock';
import ServerDetailsBlock from '@/components/server/ServerDetailsBlock';
import isEqual from 'react-fast-compare';
import PowerControls from '@/components/server/PowerControls';
import { EulaModalFeature } from '@feature/index';
export type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
2019-09-28 20:29:49 +00:00
2019-10-12 22:29:45 +00:00
const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console'));
const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs'));
const ServerConsole = () => {
2020-08-26 04:39:00 +00:00
const isInstalling = ServerContext.useStoreState(state => state.server.data!.isInstalling);
const isTransferring = ServerContext.useStoreState(state => state.server.data!.isTransferring);
// @ts-ignore
const eggFeatures: string[] = ServerContext.useStoreState(state => state.server.data!.eggFeatures, isEqual);
return (
<ServerContentBlock title={'Console'} css={tw`flex flex-wrap`}>
<div css={tw`w-full lg:w-1/4`}>
<ServerDetailsBlock/>
{isInstalling ?
<div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
<ContentContainer>
<p css={tw`text-sm text-yellow-900`}>
This server is currently running its installation process and most actions are
unavailable.
</p>
</ContentContainer>
</div>
:
isTransferring ?
<div css={tw`mt-4 rounded bg-yellow-500 p-3`}>
<ContentContainer>
<p css={tw`text-sm text-yellow-900`}>
This server is currently being transferred to another node and all actions
are unavailable.
</p>
</ContentContainer>
</div>
:
<Can action={[ 'control.start', 'control.stop', 'control.restart' ]} matchAny>
<PowerControls/>
</Can>
}
</div>
<div css={tw`w-full lg:w-3/4 mt-4 lg:mt-0 lg:pl-4`}>
<SuspenseSpinner>
<ChunkedConsole/>
2019-12-07 19:11:40 +00:00
<ChunkedStatGraphs/>
</SuspenseSpinner>
{eggFeatures.includes('eula') &&
<React.Suspense fallback={null}>
<EulaModalFeature/>
</React.Suspense>
}
</div>
2020-08-26 04:39:00 +00:00
</ServerContentBlock>
);
};
export default memo(ServerConsole, isEqual);