Merge branch 'develop' into feature/react-admin
This commit is contained in:
commit
01c03b6b77
19 changed files with 614 additions and 274 deletions
|
@ -1,9 +1,10 @@
|
|||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { ITerminalOptions, Terminal } from 'xterm';
|
||||
import { Terminal, ITerminalOptions } from 'xterm';
|
||||
import { FitAddon } from 'xterm-addon-fit';
|
||||
import { SearchAddon } from 'xterm-addon-search';
|
||||
import { SearchBarAddon } from 'xterm-addon-search-bar';
|
||||
import { WebLinksAddon } from 'xterm-addon-web-links';
|
||||
import { ScrollDownHelperAddon } from '@/plugins/XtermScrollDownHelperAddon';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import styled from 'styled-components/macro';
|
||||
|
@ -73,6 +74,7 @@ export default () => {
|
|||
const searchAddon = new SearchAddon();
|
||||
const searchBar = new SearchBarAddon({ searchAddon });
|
||||
const webLinksAddon = new WebLinksAddon();
|
||||
const scrollDownHelperAddon = new ScrollDownHelperAddon();
|
||||
const { connected, instance } = ServerContext.useStoreState(state => state.socket);
|
||||
const [ canSendCommands ] = usePermissions([ 'control.console' ]);
|
||||
const serverId = ServerContext.useStoreState(state => state.server.data!.id);
|
||||
|
@ -140,6 +142,7 @@ export default () => {
|
|||
terminal.loadAddon(searchAddon);
|
||||
terminal.loadAddon(searchBar);
|
||||
terminal.loadAddon(webLinksAddon);
|
||||
terminal.loadAddon(scrollDownHelperAddon);
|
||||
|
||||
terminal.open(ref.current);
|
||||
fitAddon.fit();
|
||||
|
@ -201,7 +204,7 @@ export default () => {
|
|||
|
||||
return (
|
||||
<div css={tw`text-xs font-mono relative`}>
|
||||
<SpinnerOverlay visible={!connected} size={'large'}/>
|
||||
<SpinnerOverlay visible={!connected} size={'large'} />
|
||||
<div
|
||||
css={[
|
||||
tw`rounded-t p-2 bg-black w-full`,
|
||||
|
@ -209,21 +212,21 @@ export default () => {
|
|||
]}
|
||||
style={{ minHeight: '16rem' }}
|
||||
>
|
||||
<TerminalDiv id={'terminal'} ref={ref}/>
|
||||
<TerminalDiv id={'terminal'} ref={ref} />
|
||||
</div>
|
||||
{canSendCommands &&
|
||||
<div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex items-baseline`}>
|
||||
<div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
|
||||
<div css={tw`w-full`}>
|
||||
<CommandInput
|
||||
type={'text'}
|
||||
placeholder={'Type a command...'}
|
||||
aria-label={'Console command input.'}
|
||||
disabled={!instance || !connected}
|
||||
onKeyDown={handleCommandKeyDown}
|
||||
/>
|
||||
<div css={tw`rounded-b bg-neutral-900 text-neutral-100 flex items-baseline`}>
|
||||
<div css={tw`flex-shrink-0 p-2 font-bold`}>$</div>
|
||||
<div css={tw`w-full`}>
|
||||
<CommandInput
|
||||
type={'text'}
|
||||
placeholder={'Type a command...'}
|
||||
aria-label={'Console command input.'}
|
||||
disabled={!instance || !connected}
|
||||
onKeyDown={handleCommandKeyDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue