-
Notifications
You must be signed in to change notification settings - Fork 13
/
SerialConsole.tsx
146 lines (131 loc) · 3.96 KB
/
SerialConsole.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
import React from 'react';
import { Button, EmptyState, Spinner, EmptyStateFooter } from '@patternfly/react-core';
import { XTerm, XTermProps } from './XTerm';
import { SerialConsoleActions } from './SerialConsoleActions';
import { constants } from '../common/constants';
import { createUseStyles } from 'react-jss';
const { CONNECTED, DISCONNECTED, LOADING } = constants;
const useStyles = createUseStyles({
consoleSerial: {
gridArea: 'main'
}
});
export interface SerialConsoleProps extends XTermProps {
/** Initiate connection to backend. In other words, the calling components manages connection state. */
onConnect: () => void;
/** Close connection to backend */
onDisconnect: () => void;
/** Terminal produced data, like key-press */
onData: (e: string) => void;
/** Terminal title has been changed */
onTitleChanged?: () => void;
/** Connection status; a value from [''connected'; 'disconnected'; 'loading']. Default is 'loading' for a not matching value. */
/** The number of columns to resize to */
cols?: number;
/** The number of rows to resize to */
rows?: number;
fontFamily?: string;
fontSize?: number;
status?: string;
/** Text content rendered inside the Connect button */
textConnect?: string;
/** Text content rendered inside the Disconnect button */
textDisconnect?: string;
/** Text content rendered inside the Reset button */
textReset?: string;
/* Text content rendered inside the EmptyState for when console is disconnnected */
textDisconnected?: string;
/* Text content rendered inside the EmptyState for when console is loading */
textLoading?: string;
/** A reference object to attach to the SerialConsole. */
innerRef?: React.RefObject<any>;
}
const SerialConsoleBase: React.FunctionComponent<SerialConsoleProps> = ({
onConnect,
onDisconnect,
// eslint-disable-next-line @typescript-eslint/no-empty-function
onTitleChanged = () => {},
onData,
cols,
rows,
fontFamily,
fontSize,
status = 'loading',
textConnect = 'Connect',
textDisconnect,
textReset,
textDisconnected = 'Click Connect to open serial console.',
textLoading = 'Loading ...',
innerRef
}) => {
const styles = useStyles();
React.useEffect(() => {
onConnect();
return () => {
onDisconnect();
};
}, [onConnect, onDisconnect]);
const onConnectClick = () => {
onConnect();
focusTerminal();
};
const onDisconnectClick = () => {
onDisconnect();
focusTerminal();
};
const onResetClick = () => {
onDisconnect();
onConnect();
focusTerminal();
};
const focusTerminal = () => {
innerRef && innerRef.current && innerRef.current.focusTerminal();
};
let terminal;
switch (status) {
case CONNECTED:
terminal = (
<XTerm
innerRef={innerRef}
cols={cols}
rows={rows}
fontFamily={fontFamily}
fontSize={fontSize}
onTitleChanged={onTitleChanged}
onData={onData}
/>
);
break;
case DISCONNECTED:
terminal = (
<EmptyState titleText={textDisconnected}>
<EmptyStateFooter>
<Button onClick={onConnectClick}>{textConnect}</Button>
</EmptyStateFooter>
</EmptyState>
);
break;
case LOADING:
default:
terminal = <EmptyState icon={Spinner} titleText={textLoading}></EmptyState>;
break;
}
return (
<>
{status !== DISCONNECTED && (
<SerialConsoleActions
onDisconnect={onDisconnectClick}
onReset={onResetClick}
textDisconnect={textDisconnect}
textReset={textReset}
/>
)}
<div className={styles.consoleSerial}>{terminal}</div>
</>
);
};
SerialConsoleBase.displayName = 'SerialConsoleBase';
export const SerialConsole = React.forwardRef((props: SerialConsoleProps, ref: React.Ref<HTMLDivElement>) => (
<SerialConsoleBase innerRef={ref as React.MutableRefObject<any>} {...props} />
));
SerialConsole.displayName = 'SerialConsole';