-
Notifications
You must be signed in to change notification settings - Fork 268
/
ProviderConfiguring.svelte
119 lines (102 loc) · 3.4 KB
/
ProviderConfiguring.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
113
114
115
116
117
118
119
<script lang="ts">
import type { CheckStatus, ProviderInfo } from '../../../../main/src/plugin/api/provider-info';
import PreflightChecks from './PreflightChecks.svelte';
import ProviderUpdateButton from './ProviderUpdateButton.svelte';
import { onDestroy, onMount } from 'svelte';
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
import 'xterm/css/xterm.css';
import { TerminalSettings } from '../../../../main/src/plugin/terminal-settings';
import { getPanelDetailColor } from '../color/color';
import { type InitializationContext, InitializationSteps, InitializeAndStartMode } from './ProviderInitUtils';
import Steps from '../ui/Steps.svelte';
import Spinner from '../ui/Spinner.svelte';
import ProviderCard from './ProviderCard.svelte';
export let provider: ProviderInfo;
export let initializationContext: InitializationContext;
let initializeError: string | undefined = undefined;
let preflightChecks: CheckStatus[] = [];
let noErrors = true;
let logsXtermDiv: HTMLDivElement;
let logsTerminal;
// Terminal resize
let resizeObserver: ResizeObserver;
let termFit: FitAddon;
async function refreshTerminal() {
// missing element, return
if (!logsXtermDiv) {
console.log('missing xterm div, exiting...');
return;
}
// grab font size
const fontSize = await window.getConfigurationValue<number>(
TerminalSettings.SectionName + '.' + TerminalSettings.FontSize,
);
const lineHeight = await window.getConfigurationValue<number>(
TerminalSettings.SectionName + '.' + TerminalSettings.LineHeight,
);
logsTerminal = new Terminal({
fontSize,
lineHeight,
disableStdin: true,
theme: {
background: getPanelDetailColor(),
},
convertEol: true,
});
termFit = new FitAddon();
logsTerminal.loadAddon(termFit);
logsTerminal.open(logsXtermDiv);
// disable cursor
logsTerminal.write('\x1b[?25l');
// call fit addon each time we resize the window
window.addEventListener('resize', () => {
termFit.fit();
});
termFit.fit();
}
onMount(async () => {
// Refresh the terminal on initial load
refreshTerminal();
// Resize the terminal each time we change the div size
resizeObserver = new ResizeObserver(() => {
termFit?.fit();
});
// Observe the terminal div
resizeObserver.observe(logsXtermDiv);
});
onDestroy(() => {
// Cleanup the observer on destroy
resizeObserver?.unobserve(logsXtermDiv);
});
</script>
<ProviderCard provider="{provider}">
<svelte:fragment slot="content">
<div>
{#if initializationContext.mode === InitializeAndStartMode}
<Steps steps="{InitializationSteps}" />
{/if}
<div class="flex flex-col text-gray-700" aria-label="Transitioning State">
<div>Initializing</div>
<div class="my-2">
<Spinner />
</div>
</div>
</div>
<div
class=""
style="background-color: {getPanelDetailColor()}; width: 100%; text-align: left; display: {initializeError
? 'block'
: 'none'}"
class:h-full="{noErrors === false}"
class:min-w-full="{noErrors === false}"
bind:this="{logsXtermDiv}">
</div>
{#if provider.updateInfo}
<div class="mt-5 mb-1 w-full flex justify-around">
<ProviderUpdateButton onPreflightChecks="{checks => (preflightChecks = checks)}" provider="{provider}" />
</div>
{/if}
<PreflightChecks preflightChecks="{preflightChecks}" />
</svelte:fragment>
</ProviderCard>