Skip to content

Commit

Permalink
Fix SerialConsole display bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@pcbailey
pcbailey committed Jun 27, 2021
1 parent 449d8d9 commit 492214c
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 97 deletions.
2 changes: 1 addition & 1 deletion frontend/packages/kubevirt-plugin/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"@console/shared": "0.0.0-fixed",
"@console/topology": "0.0.0-fixed",
"@console/dev-console": "0.0.0-fixed",
"@patternfly/react-console": "4.3.2",
"@patternfly/react-console": "4.10.0",
"unique-names-generator": "4.3.1"
},
"consolePlugin": {
Expand Down
116 changes: 49 additions & 67 deletions ...kages/kubevirt-plugin/src/components/vms/vm-console/connectors/SerialConsoleConnector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const { debug, info, error } = console;

const onResize = (rows, cols) => {
debug(
'UI has been resized, pass this info to backend. [',
'UI has been resized. Pass this info to backend. [',
rows,
', ',
cols,
Expand All @@ -30,107 +30,89 @@ interface WebSocket {
const SerialConsoleConnector: React.FC<SerialConsoleConnectorProps> = ({ vmi }) => {
const { host, path } = getSerialConsoleConnectionDetails(vmi);
const [status, setStatus] = React.useState(LOADING);
const [passKeys, setPassKeys] = React.useState(false);
const [ws, setWS] = React.useState<WebSocket>();
const childSerialconsole = React.useRef(null);

const onBackendDisconnected = React.useCallback(
(event?: any) => {
debug('Backend has disconnected');
if (childSerialconsole.current) {
childSerialconsole.current.onConnectionClosed('Reason for disconnect provided by backend.');
}

if (event) {
info('Serial console connection closed, reason: ', event.reason);
}

ws && ws.destroy && ws.destroy();

setPassKeys(false);
setStatus(DISCONNECTED); // will close the terminal window
},
[ws],
);
const terminalRef = React.useRef(null);
const socket = React.useRef<WebSocket>(null);

const onBackendDisconnected = React.useCallback((event?: any) => {
debug('Backend has disconnected');
if (terminalRef.current) {
terminalRef.current.onConnectionClosed('Reason for disconnect provided by backend.');
}

if (event?.reason) {
info('Serial console connection closed, reason: ', event.reason);
}

socket?.current?.destroy();
setStatus(DISCONNECTED); // will close the terminal window
}, []);

const setConnected = React.useCallback(() => {
setStatus(CONNECTED);
setPassKeys(true);
}, [setStatus, setPassKeys]);
}, [setStatus]);

const onDataFromBackend = React.useCallback((data) => {
// plain.kubevirt.io is binary and single-channel protocol
debug('Backend sent data, pass them to the UI component. [', data, ']');
if (childSerialconsole.current) {
debug('Backend sent data, pass it to the UI component. [', data, ']');

if (terminalRef.current) {
const reader = new FileReader();
reader.addEventListener('loadend', (e) => {
// Blob to text transformation ...
const target = (e.target || e.srcElement) as any;
const text = target.result;
childSerialconsole.current.onDataReceived(text);
terminalRef.current.onDataReceived(text);
});
reader.readAsText(data);
}
}, []);

const onConnect = React.useCallback(() => {
debug('SerialConsoleConnector.onConnect(), status = ', status, ', passKeys = ', passKeys);
if (ws) {
ws.destroy();
debug('SerialConsoleConnector.onConnect(), status = ', status);

if (socket.current) {
socket.current.destroy();
setStatus(LOADING);
}

const options = {
const websocketOptions = {
host,
path,
reconnect: false,
jsonParse: false,
subprotocols: ['plain.kubevirt.io'],
};

setWS(
new WSFactory(`${getName(vmi)}-serial`, options)
.onmessage(onDataFromBackend)
.onopen(setConnected)
.onclose(onBackendDisconnected)
.onerror((event) => {
error('WS error received: ', event);
}),
socket.current = new WSFactory(`${getName(vmi)}-serial`, websocketOptions)
.onmessage(onDataFromBackend)
.onopen(setConnected)
.onclose(onBackendDisconnected)
.onerror((event) => {
error('WebSocket error received: ', event);
});
}, [status, host, path, vmi, onDataFromBackend, setConnected, onBackendDisconnected]);

const onData = React.useCallback((data) => {
debug(
'UI terminal component produced data, i.e. a key was pressed, pass it to backend. [',
data,
']',
);
}, [
status,
passKeys,
ws,
host,
path,
vmi,
onDataFromBackend,
setConnected,
onBackendDisconnected,
]);

const onData = React.useCallback(
(data) => {
debug(
'UI terminal component produced data, i.e. a key was pressed, pass it to backend. [',
data,
']',
);
// data are resent back from backend so _will_ pass through onDataFromBackend
ws && ws.send(new Blob([data]));
},
[ws],
);
// data is resent back from backend so _will_ pass through onDataFromBackend
socket?.current?.send(new Blob([data]));
}, []);

return (
<SerialConsole
fontFamily="monospace"
fontSize={12}
id="serial-console"
onConnect={onConnect}
onData={onData}
onDisconnect={onBackendDisconnected}
onResize={onResize}
onData={onData}
id="serial-console"
ref={terminalRef}
status={status}
ref={childSerialconsole}
/>
);
};
Expand Down
58 changes: 29 additions & 29 deletions frontend/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1770,10 +1770,10 @@
resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.108.2.tgz#b6686b9865fd5d4233a15bdf04cc53bded5a8ccc"
integrity sha512-z0VB+1CXcH+eoClYQABwapX5FURSvm1nPr6asLWwg/Z4Wuxs0RjZpC6Gb+KRm8nGQwSAcMKZY1jLfPqVnznQnw==

"@patternfly/patternfly@4.87.3":
version "4.87.3"
resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.87.3.tgz#eb2e9b22aa8f6f106580e7451bf204a06cb9949e"
integrity sha512-hDNMPa7B1zKD8LWFZO4SS5hC/N+yvuci2sAn8HJd+EIbAvbMAUkRsyZ0/XO3BG3RVtpSlgq7q8x1pAHC/FTFuA==
"@patternfly/patternfly@4.115.2":
version "4.115.2"
resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.115.2.tgz#200111d52fe07d1380371530304bad9edf45de51"
integrity sha512-7hbJ4pRmj+rlXclD2F/UwceO6fS+9flGsgHc4eUc7NyTN2GXl6PLcqrjE2CtiKEPV90+KwsGQGJXZj8bz9HweA==

"@patternfly/react-catalog-view-extension@4.11.42":
version "4.11.42"
Expand Down Expand Up @@ -1812,14 +1812,14 @@
victory-voronoi-container "^35.4.4"
victory-zoom-container "^35.4.4"

"@patternfly/react-console@4.3.2":
version "4.3.2"
resolved "https://registry.yarnpkg.com/@patternfly/react-console/-/react-console-4.3.2.tgz#7ed8be06442aac78afb9f1e6cad70033947360de"
integrity sha512-QAvgzSrRQiW+7h1GYEsRe4QTJnooTSTGHWex+a3JDE90MWFgwrCA1+FIjNR0uRFomi13WTaCLRt2K2wROmci0Q==
"@patternfly/react-console@4.10.0":
version "4.10.0"
resolved "https://registry.yarnpkg.com/@patternfly/react-console/-/react-console-4.10.0.tgz#a88397c631b94702035103ebe25fe904aeac05db"
integrity sha512-rr0+lS8ftvjpvnBzyzRNEUIQSmnePpQA7Dm4Am25f0415wMrPbbB6RLYPdP+bU75Wd6ElmtY2oC16c4rAYibZQ==
dependencies:
"@novnc/novnc" "^1.2.0"
"@patternfly/patternfly" "4.87.3"
"@patternfly/react-core" "^4.97.2"
"@patternfly/patternfly" "4.115.2"
"@patternfly/react-core" "^4.135.0"
"@spice-project/spice-html5" "^0.2.1"
"@types/file-saver" "^2.0.1"
file-saver "^1.3.8"
Expand All @@ -1840,14 +1840,14 @@
tippy.js "5.1.2"
tslib "1.13.0"

"@patternfly/react-core@^4.97.2":
version "4.97.2"
resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.97.2.tgz#a389f6984d03ed730506fa3cdccb1355f37b04fc"
integrity sha512-Xl/l/+OjWVtWnbb9Kw//1bn+6KEM9aOc1nk+Vm6D8wlbuuz+RAFBc0rZjPWuq00YYnVA+sExESe0W2d3wdn/SQ==
"@patternfly/react-core@^4.135.0":
version "4.135.0"
resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.135.0.tgz#b64ad4da10a8814926e28fad727bc7690cd60e66"
integrity sha512-DZcONUGOR7Znd6BsUJ4L+KrrnIpyjUvh3JNcYiHW3loytxShCGcx+a04QjOOcZm+MtFhkgs/t51yiC5IP12abA==
dependencies:
"@patternfly/react-icons" "^4.9.2"
"@patternfly/react-styles" "^4.8.2"
"@patternfly/react-tokens" "^4.10.2"
"@patternfly/react-icons" "^4.11.0"
"@patternfly/react-styles" "^4.11.0"
"@patternfly/react-tokens" "^4.12.0"
focus-trap "6.2.2"
react-dropzone "9.0.0"
tippy.js "5.1.2"
Expand All @@ -1858,20 +1858,20 @@
resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.10.11.tgz#9bed483fc37c8b795b3fb98c17ede00eef775857"
integrity sha512-Qyxwvghb9HZB2do3UVw4EzJSvqWaw/AEw6mFzqshZiIm2oPrL4NkvavwDt5WRicz5sbyWTZluB4grOj33PEpww==

"@patternfly/react-icons@^4.9.2":
version "4.9.2"
resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.9.2.tgz#dcb2efa9727de97d5aa5d6be47a75daee49addb8"
integrity sha512-3PY81A9mj9YyUpznSWhcWMKHRyGWNgZ1IDYqbMva7Q8wgd0fjsiTJ+5zAp4YQLo1mA8KwYX9v5s37hK8XiTbAA==
"@patternfly/react-icons@^4.11.0":
version "4.11.0"
resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.11.0.tgz#26790eeff22dc3204aa8cd094470f0a2f915634a"
integrity sha512-WsIX34bO9rhVRmPG0jlV3GoFGfYgPC64TscNV0lxQosiVRnYIA6Z3nBSArtJsxo5Yn6c63glIefC/YTy6D/ZYg==

"@patternfly/react-styles@^4.10.11":
version "4.10.11"
resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.10.11.tgz#6bda5673a71037c0fb9be7e11a117ed8cfea6ce0"
integrity sha512-M+NhTtAXreJzMAV2Z1P2pbnKpRYnWbB5iZ6mxB0tkxxG+KyZ0/se8M5rUepLOE/n7BMq8IiOjPJ9zu/vpWj0gA==

"@patternfly/react-styles@^4.8.2":
version "4.8.2"
resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.8.2.tgz#4796a77b658541d75d616e2e2a00fc5d7ec42bc7"
integrity sha512-JLVZTUYa8LIyASLvfiAgByLgNcg+OPkuXSh8Za5KdjqrBaNVQ3Wlul+oWQGwlGjbq7KSiyDg1oWemxOuLJH1VQ==
"@patternfly/react-styles@^4.11.0":
version "4.11.0"
resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.11.0.tgz#0068dcb18e1343242f93fa6024dcc077acd57fb9"
integrity sha512-4eIqTwGI4mjt9DMqX6hnan4eRS+3LUWNaneTEJdmk+flKxtAE/O/OmQHvH4GetDnlSbyfATcA0VFbVtR0aRJAg==

"@patternfly/react-table@4.27.24":
version "4.27.24"
Expand All @@ -1890,10 +1890,10 @@
resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.11.12.tgz#0d4d88ec768cbf5c4b46e75dc8673ba97448823c"
integrity sha512-PTEc2CQa/BqcDcUwT0V02l+ZoJa+bheLlh9R5g1+JQ6vlqH31gk0dpHmj6goEcSDLkbvMJgr3kNZdJsP1VdBMg==

"@patternfly/react-tokens@^4.10.2":
version "4.10.2"
resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.10.2.tgz#fd0054379ac81c8490b901b5b8fb408263ce91fe"
integrity sha512-/G1MENPxVY7X9UUuieO79yfjJ3g6KjBUBsBQVKOQplCxuvcRCF1MpmQKAxfg9Yb804MbPY+IVzVD3c4u9S3Iww==
"@patternfly/react-tokens@^4.12.0":
version "4.12.0"
resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.12.0.tgz#2973c7f08a2f35997a0054bbf3c886b3c5c68822"
integrity sha512-Oj+GxqTtx0Yu9IDCTibZLQnpcKp58JneNKEFQkJ29WJydhPG4j6oFFElkK+ub+Ft/f9B1Ky1SsfR9eabo6IykQ==

"@patternfly/react-topology@4.8.72":
version "4.8.72"
Expand Down

0 comments on commit 492214c

Please sign in to comment.