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

176 lines
6 KiB
TypeScript
Raw Normal View History

import React, { useEffect, useMemo, useRef } from 'react';
import { ITerminalOptions, Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import { SearchAddon } from 'xterm-addon-search';
import { SearchBarAddon } from 'xterm-addon-search-bar';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
2019-09-06 06:05:24 +00:00
import { ServerContext } from '@/state/server';
2020-07-03 21:19:05 +00:00
import styled from 'styled-components/macro';
import { usePermissions } from '@/plugins/usePermissions';
2020-10-17 20:54:34 +00:00
import tw, { theme as th } from 'twin.macro';
import 'xterm/css/xterm.css';
import useEventListener from '@/plugins/useEventListener';
import { debounce } from 'debounce';
const theme = {
2020-10-17 20:54:34 +00:00
background: th`colors.black`.toString(),
cursor: 'transparent',
2020-10-17 20:54:34 +00:00
black: th`colors.black`.toString(),
red: '#E54B4B',
green: '#9ECE58',
yellow: '#FAED70',
blue: '#396FE2',
magenta: '#BB80B3',
cyan: '#2DDAFD',
white: '#d0d0d0',
brightBlack: 'rgba(255, 255, 255, 0.2)',
brightRed: '#FF5370',
brightGreen: '#C3E88D',
brightYellow: '#FFCB6B',
brightBlue: '#82AAFF',
brightMagenta: '#C792EA',
brightCyan: '#89DDFF',
brightWhite: '#ffffff',
selection: '#FAF089',
};
const terminalProps: ITerminalOptions = {
2019-09-06 06:05:24 +00:00
disableStdin: true,
cursorStyle: 'underline',
allowTransparency: true,
fontSize: 12,
fontFamily: 'Menlo, Monaco, Consolas, monospace',
rows: 30,
theme: theme,
};
2019-12-22 22:33:08 +00:00
const TerminalDiv = styled.div`
&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-thumb {
${tw`bg-neutral-900`};
}
`;
2019-09-06 06:05:24 +00:00
export default () => {
2020-01-18 23:26:15 +00:00
const TERMINAL_PRELUDE = '\u001b[1m\u001b[33mcontainer@pterodactyl~ \u001b[0m';
const ref = useRef<HTMLDivElement>(null);
const terminal = useMemo(() => new Terminal({ ...terminalProps }), []);
const fitAddon = new FitAddon();
const searchAddon = new SearchAddon();
2020-10-15 20:41:11 +00:00
const searchBar = new SearchBarAddon({ searchAddon });
2019-12-07 20:13:46 +00:00
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
const [ canSendCommands ] = usePermissions([ 'control.console' ]);
2020-01-18 23:26:15 +00:00
const handleConsoleOutput = (line: string, prelude = false) => terminal.writeln(
(prelude ? TERMINAL_PRELUDE : '') + line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m',
2019-09-06 06:05:24 +00:00
);
2019-09-28 20:09:47 +00:00
const handleDaemonErrorOutput = (line: string) => terminal.writeln(
2020-01-18 23:26:15 +00:00
TERMINAL_PRELUDE + '\u001b[1m\u001b[41m' + line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m',
2019-09-28 20:09:47 +00:00
);
const handlePowerChangeEvent = (state: string) => terminal.writeln(
2020-01-18 23:26:15 +00:00
TERMINAL_PRELUDE + 'Server marked as ' + state + '...\u001b[0m',
);
2019-09-18 05:54:23 +00:00
const handleCommandKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key !== 'Enter' || (e.key === 'Enter' && e.currentTarget.value.length < 1)) {
return;
}
instance && instance.send('send command', e.currentTarget.value);
e.currentTarget.value = '';
};
2019-09-06 06:05:24 +00:00
useEffect(() => {
if (connected && ref.current && !terminal.element) {
terminal.open(ref.current);
terminal.loadAddon(fitAddon);
terminal.loadAddon(searchAddon);
2020-10-15 20:41:11 +00:00
terminal.loadAddon(searchBar);
fitAddon.fit();
// Add support for capturing keys
terminal.attachCustomKeyEventHandler((e: KeyboardEvent) => {
// Ctrl + C ( Copy )
2020-10-14 15:38:59 +00:00
if (e.ctrlKey && e.key === 'c') {
document.execCommand('copy');
return false;
}
2020-10-14 15:38:59 +00:00
if (e.ctrlKey && e.key === 'f') {
2020-10-15 20:41:11 +00:00
searchBar.show();
return false;
}
if (e.key === 'Escape') {
2020-10-15 20:41:11 +00:00
searchBar.hidden();
}
return true;
});
}
}, [ terminal, connected ]);
const fit = debounce(() => {
fitAddon.fit();
}, 100);
useEventListener('resize', () => fit());
2019-09-06 06:05:24 +00:00
useEffect(() => {
if (connected && instance) {
terminal.clear();
instance.addListener('status', handlePowerChangeEvent);
2019-09-18 05:54:23 +00:00
instance.addListener('console output', handleConsoleOutput);
2020-01-18 23:26:15 +00:00
instance.addListener('install output', handleConsoleOutput);
instance.addListener('daemon message', line => handleConsoleOutput(line, true));
2019-09-28 20:09:47 +00:00
instance.addListener('daemon error', handleDaemonErrorOutput);
2019-09-06 06:05:24 +00:00
instance.send('send logs');
}
2019-09-06 06:05:24 +00:00
return () => {
2019-09-28 20:09:47 +00:00
instance && instance.removeListener('console output', handleConsoleOutput)
2020-01-18 23:26:15 +00:00
.removeListener('install output', handleConsoleOutput)
.removeListener('daemon message', line => handleConsoleOutput(line, true))
.removeListener('daemon error', handleDaemonErrorOutput)
.removeListener('status', handlePowerChangeEvent);
2019-09-06 06:05:24 +00:00
};
2019-12-07 20:13:46 +00:00
// eslint-disable-next-line react-hooks/exhaustive-deps
2019-09-06 06:05:24 +00:00
}, [ connected, instance ]);
2019-09-06 06:05:24 +00:00
return (
<div css={tw`text-xs font-mono relative`}>
2019-09-06 06:05:24 +00:00
<SpinnerOverlay visible={!connected} size={'large'}/>
<div
css={[
tw`rounded-t p-2 bg-black w-full`,
!canSendCommands && tw`rounded-b`,
]}
2019-09-06 06:05:24 +00:00
style={{
minHeight: '16rem',
maxHeight: '32rem',
2019-09-06 06:05:24 +00:00
}}
>
<TerminalDiv id={'terminal'} ref={ref}/>
2019-09-06 06:05:24 +00:00
</div>
{canSendCommands &&
<div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex`}>
<div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
<div css={tw`w-full`}>
2019-09-18 05:54:23 +00:00
<input
type={'text'}
disabled={!instance || !connected}
css={tw`bg-transparent text-neutral-100 p-2 pl-0 w-full`}
2019-09-18 05:54:23 +00:00
onKeyDown={e => handleCommandKeydown(e)}
/>
</div>
</div>
}
2019-09-06 06:05:24 +00:00
</div>
);
};