forked from containers/podman-desktop
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ContainerDetailsTtyTerminal.svelte
112 lines (95 loc) · 2.8 KB
/
ContainerDetailsTtyTerminal.svelte
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
<script lang="ts">
import type { ContainerInfoUI } from './ContainerInfoUI';
import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings';
import { router } from 'tinro';
import { onDestroy, onMount } from 'svelte';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import 'xterm/css/xterm.css';
import { getPanelDetailColor } from '../color/color';
import EmptyScreen from '../ui/EmptyScreen.svelte';
import NoLogIcon from '../ui/NoLogIcon.svelte';
export let container: ContainerInfoUI;
export let screenReaderMode = false;
let terminalXtermDiv: HTMLDivElement;
let attachContainerTerminal: Terminal;
let currentRouterPath: string;
let closed = false;
// update current route scheme
router.subscribe(route => {
currentRouterPath = route.path;
});
// update terminal when receiving data
function receiveDataCallback(data: Buffer) {
attachContainerTerminal.write(data.toString());
}
function receiveEndCallback() {
closed = true;
}
// call exec command
async function attachToContainer() {
if (container.state !== 'RUNNING') {
return;
}
// attach to the container
const callbackId = await window.attachContainer(
container.engineId,
container.id,
receiveDataCallback,
() => {},
receiveEndCallback,
);
// pass data from xterm to container
attachContainerTerminal?.onData(data => {
window.attachContainerSend(callbackId, data);
});
}
// refresh
async function refreshTerminal() {
// missing element, return
if (!terminalXtermDiv) {
return;
}
// grab font size
const fontSize = await window.getConfigurationValue<number>(
TerminalSettings.SectionName + '.' + TerminalSettings.FontSize,
);
const lineHeight = await window.getConfigurationValue<number>(
TerminalSettings.SectionName + '.' + TerminalSettings.LineHeight,
);
attachContainerTerminal = new Terminal({
fontSize,
lineHeight,
screenReaderMode,
theme: {
background: getPanelDetailColor(),
},
});
const fitAddon = new FitAddon();
attachContainerTerminal.loadAddon(fitAddon);
attachContainerTerminal.open(terminalXtermDiv);
// call fit addon each time we resize the window
window.addEventListener('resize', () => {
if (currentRouterPath === `/containers/${container.id}/tty-terminal`) {
fitAddon.fit();
}
});
fitAddon.fit();
}
onMount(async () => {
await refreshTerminal();
await attachToContainer();
});
onDestroy(() => {});
</script>
<div class="h-full" bind:this="{terminalXtermDiv}" class:hidden="{container.state !== 'RUNNING'}"></div>
<EmptyScreen
hidden="{!closed && !(container.state === 'RUNNING')}"
icon="{NoLogIcon}"
title="No TTY"
message="Tty has stopped" />
<EmptyScreen
hidden="{container.state === 'RUNNING'}"
icon="{NoLogIcon}"
title="No TTY"
message="Container is not running" />