sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Attempting to solve a weird console loading issue by making into class component; doesn't fix but like the class better for this. 

Loading the console, switching to file manager, and then switching back is needed to load the data the first time. After that every 2nd load of the console will load the data (and even send the data to the websocket as the daemon is reporting.)
This commit is contained in:
Dane Everitt 2019-06-29 18:28:23 -07:00
parent 6b42296865
commit 16e6f3f45f
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
4 changed files with 125 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -19,6 +19,7 @@
"react": "^16.8.6", "react": "^16.8.6",
"react-dom": "^16.8.6", "react-dom": "^16.8.6",
"react-hot-loader": "^4.9.0", "react-hot-loader": "^4.9.0",
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1", "react-router-dom": "^5.0.1",
"react-transition-group": "^4.1.0", "react-transition-group": "^4.1.0",
"socket.io-client": "^2.2.0", "socket.io-client": "^2.2.0",
@ -42,6 +43,7 @@
"@types/query-string": "^6.3.0", "@types/query-string": "^6.3.0",
"@types/react": "^16.8.19", "@types/react": "^16.8.19",
"@types/react-dom": "^16.8.4", "@types/react-dom": "^16.8.4",
"@types/react-redux": "^7.1.1",
"@types/react-router-dom": "^4.3.3", "@types/react-router-dom": "^4.3.3",
"@types/react-transition-group": "^2.9.2", "@types/react-transition-group": "^2.9.2",
"@types/webpack-env": "^1.13.6", "@types/webpack-env": "^1.13.6",

25
resources/scripts/components/App.tsx
View File

@ -6,6 +6,7 @@ import { store } from '@/state';
import DashboardRouter from '@/routers/DashboardRouter'; import DashboardRouter from '@/routers/DashboardRouter';
import ServerRouter from '@/routers/ServerRouter'; import ServerRouter from '@/routers/ServerRouter';
import AuthenticationRouter from '@/routers/AuthenticationRouter'; import AuthenticationRouter from '@/routers/AuthenticationRouter';
import { Provider } from 'react-redux';
interface WindowWithUser extends Window { interface WindowWithUser extends Window {
PterodactylUser?: { PterodactylUser?: {
@ -37,17 +38,19 @@ const App = () => {
return ( return (
<StoreProvider store={store}> <StoreProvider store={store}>
<Router basename={'/'}> <Provider store={store}>
<div className={'mx-auto w-auto'}> <Router basename={'/'}>
<BrowserRouter basename={'/'}> <div className={'mx-auto w-auto'}>
<Switch> <BrowserRouter basename={'/'}>
<Route path="/server/:id" component={ServerRouter}/> <Switch>
<Route path="/auth" component={AuthenticationRouter}/> <Route path="/server/:id" component={ServerRouter}/>
<Route path="/" component={DashboardRouter}/> <Route path="/auth" component={AuthenticationRouter}/>
</Switch> <Route path="/" component={DashboardRouter}/>
</BrowserRouter> </Switch>
</div> </BrowserRouter>
</Router> </div>
</Router>
</Provider>
</StoreProvider> </StoreProvider>
); );
}; };

126
resources/scripts/components/server/Console.tsx
View File

@ -1,9 +1,10 @@
import React, { createRef, useEffect, useRef } from 'react'; import React, { createRef } from 'react';
import { Terminal } from 'xterm'; import { Terminal } from 'xterm';
import * as TerminalFit from 'xterm/lib/addons/fit/fit'; import * as TerminalFit from 'xterm/lib/addons/fit/fit';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { State, useStoreState } from 'easy-peasy';
import { ApplicationState } from '@/state/types'; import { ApplicationState } from '@/state/types';
import { connect } from 'react-redux';
import { Websocket } from '@/plugins/Websocket';
const theme = { const theme = {
background: 'transparent', background: 'transparent',
@ -26,11 +27,14 @@ const theme = {
brightWhite: '#ffffff', brightWhite: '#ffffff',
}; };
export default () => { interface Props {
const { instance, connected } = useStoreState((state: State<ApplicationState>) => state.server.socket); connected: boolean;
instance: Websocket | null;
}
const ref = createRef<HTMLDivElement>(); class Console extends React.PureComponent<Readonly<Props>> {
const terminal = useRef(new Terminal({ ref = createRef<HTMLDivElement>();
terminal = new Terminal({
disableStdin: true, disableStdin: true,
cursorStyle: 'underline', cursorStyle: 'underline',
allowTransparency: true, allowTransparency: true,
@ -38,55 +42,79 @@ export default () => {
fontFamily: 'Menlo, Monaco, Consolas, monospace', fontFamily: 'Menlo, Monaco, Consolas, monospace',
rows: 30, rows: 30,
theme: theme, theme: theme,
}));
const handleServerLog = (lines: string[]) => lines.forEach(data => {
return data.split(/\n/g).forEach(line => terminal.current.writeln(line + '\u001b[0m'));
}); });
const handleConsoleOutput = (line: string) => terminal.current.writeln(line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m'); componentDidMount () {
if (this.ref.current) {
this.terminal.open(this.ref.current);
this.terminal.clear();
useEffect(() => { // @see https://github.com/xtermjs/xterm.js/issues/2265
ref.current && terminal.current.open(ref.current); // @see https://github.com/xtermjs/xterm.js/issues/2230
TerminalFit.fit(this.terminal);
// @see https://github.com/xtermjs/xterm.js/issues/2265
// @see https://github.com/xtermjs/xterm.js/issues/2230
TerminalFit.fit(terminal.current);
}, []);
useEffect(() => {
if (connected && instance) {
instance.addListener('server log', handleServerLog);
instance.addListener('console output', handleConsoleOutput);
instance.send('send logs');
} }
}, [connected]);
useEffect(() => () => { if (this.props.connected && this.props.instance) {
if (instance) { this.listenForEvents();
instance.removeListener('server log', handleServerLog);
instance.removeListener('console output', handleConsoleOutput);
} }
}, []); }
return ( componentDidUpdate (prevProps: Readonly<Readonly<Props>>) {
<div className={'text-xs font-mono relative'}> if (!prevProps.connected && this.props.connected) {
<SpinnerOverlay visible={!connected} large={true}/> this.listenForEvents();
<div }
className={'rounded-t p-2 bg-black overflow-scroll w-full'} }
style={{
minHeight: '16rem', componentWillUnmount () {
maxHeight: '64rem', if (this.props.instance) {
}} this.props.instance.removeListener('server log', this.handleServerLog);
> this.props.instance.removeListener('server log', this.handleConsoleOutput);
<div id={'terminal'} ref={ref}/> }
</div> }
<div className={'rounded-b bg-neutral-900 text-neutral-100 flex'}>
<div className={'flex-no-shrink p-2 font-bold'}>$</div> listenForEvents () {
<div className={'w-full'}> const instance = this.props.instance!;
<input type={'text'} className={'bg-transparent text-neutral-100 p-2 pl-0 w-full'}/>
instance.addListener('server log', this.handleServerLog);
instance.addListener('console output', this.handleConsoleOutput);
instance.send('send logs');
}
handleServerLog = (lines: string[]) => lines.forEach(data => {
return data.split(/\n/g).forEach(line => this.terminal.writeln(line + '\u001b[0m'));
});
handleConsoleOutput = (line: string) => this.terminal.writeln(
line.replace(/(?:\r\n|\r|\n)$/im, '') + '\u001b[0m'
);
render () {
return (
<div className={'text-xs font-mono relative'}>
<SpinnerOverlay visible={!this.props.connected} large={true}/>
<div
className={'rounded-t p-2 bg-black overflow-scroll w-full'}
style={{
minHeight: '16rem',
maxHeight: '64rem',
}}
>
<div id={'terminal'} ref={this.ref}/>
</div>
<div className={'rounded-b bg-neutral-900 text-neutral-100 flex'}>
<div className={'flex-no-shrink p-2 font-bold'}>$</div>
<div className={'w-full'}>
<input type={'text'} className={'bg-transparent text-neutral-100 p-2 pl-0 w-full'}/>
</div>
</div> </div>
</div> </div>
</div> );
); }
}; }
export default connect(
(state: ApplicationState) => ({
connected: state.server.socket.connected,
instance: state.server.socket.instance,
}),
)(Console);

37
yarn.lock
View File

@ -605,7 +605,7 @@
"@babel/plugin-transform-react-jsx-self" "^7.0.0" "@babel/plugin-transform-react-jsx-self" "^7.0.0"
"@babel/plugin-transform-react-jsx-source" "^7.0.0" "@babel/plugin-transform-react-jsx-source" "^7.0.0"
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0": "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5":
version "7.4.5" version "7.4.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
dependencies: dependencies:
@ -778,6 +778,13 @@
version "4.7.2" version "4.7.2"
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220" resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.2.tgz#0e670ea254d559241b6eeb3894f8754991e73220"
"@types/hoist-non-react-statics@^3.3.0":
version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
dependencies:
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
"@types/lodash@^4.14.119": "@types/lodash@^4.14.119":
version "4.14.119" version "4.14.119"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.119.tgz#be847e5f4bc3e35e46d041c394ead8b603ad8b39"
@ -798,6 +805,15 @@
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
"@types/react-redux@^7.1.1":
version "7.1.1"
resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.1.tgz#eb01e89cf71cad77df9f442b819d5db692b997cb"
dependencies:
"@types/hoist-non-react-statics" "^3.3.0"
"@types/react" "*"
hoist-non-react-statics "^3.3.0"
redux "^4.0.0"
"@types/react-router-dom@^4.3.3": "@types/react-router-dom@^4.3.3":
version "4.3.3" version "4.3.3"
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.3.tgz#7837e3e9fefbc84a8f6c8a51dca004f4e83e94e3" resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.3.tgz#7837e3e9fefbc84a8f6c8a51dca004f4e83e94e3"
@ -3966,7 +3982,7 @@ interpret@^1.1.0:
version "1.1.0" version "1.1.0"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
invariant@^2.2.0, invariant@^2.2.2: invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4:
version "2.2.4" version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
dependencies: dependencies:
@ -6094,7 +6110,7 @@ promise@^7.1.1:
dependencies: dependencies:
asap "~2.0.3" asap "~2.0.3"
prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2: prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2" version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
dependencies: dependencies:
@ -6272,7 +6288,7 @@ react-hot-loader@^4.9.0:
shallowequal "^1.0.2" shallowequal "^1.0.2"
source-map "^0.7.3" source-map "^0.7.3"
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
version "16.8.6" version "16.8.6"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
@ -6280,6 +6296,17 @@ react-lifecycles-compat@^3.0.4:
version "3.0.4" version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
react-redux@^7.1.0:
version "7.1.0"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.0.tgz#72af7cf490a74acdc516ea9c1dd80e25af9ea0b2"
dependencies:
"@babel/runtime" "^7.4.5"
hoist-non-react-statics "^3.3.0"
invariant "^2.2.4"
loose-envify "^1.4.0"
prop-types "^15.7.2"
react-is "^16.8.6"
react-router-dom@^5.0.1: react-router-dom@^5.0.1:
version "5.0.1" version "5.0.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be"
@ -6408,7 +6435,7 @@ redux-thunk@^2.3.0:
version "2.3.0" version "2.3.0"
resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622" resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
redux@^4.0.1: redux@^4.0.0, redux@^4.0.1:
version "4.0.1" version "4.0.1"
resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5" resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5"
dependencies: dependencies: