jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Port webterminal to composition api and do not clear backlog on reconnect

Browse Source
This commit is contained in:
Johannes Zellner
2025-04-18 14:59:13 +02:00
parent 024d057e03
commit 8d7175875a
1 changed files with 262 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

515
dashboard/src/components/Terminal.vue
View File

@@ -1,5 +1,10 @@
<script>
<script setup>
import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, useTemplateRef, onMounted } from 'vue';
import { fetcher, Button, ButtonGroup, Dialog, FileUploader, InputDialog, MainLayout, TopBar } from 'pankow';
import '@xterm/xterm/css/xterm.css';
import { Terminal } from '@xterm/xterm';
@@ -9,268 +14,272 @@ import { API_ORIGIN, ISTATES, RSTATES, HSTATES } from '../constants.js';
import AppsModel from '../models/AppsModel.js';
import { createDirectoryModel } from '../models/DirectoryModel.js';
export default {
name: 'Terminal',
components: {
Button,
ButtonGroup,
Dialog,
FileUploader,
InputDialog,
MainLayout,
TopBar
},
data() {
return {
accessToken: localStorage.token,
appsModel: null,
directoryModel: null,
fatalError: false,
busyRestart: false,
connected: false,
addons: {},
showFilemanager: false,
schedulerTasks: [],
manifestVersion: '',
schedulerMenuModel: [],
id: '',
name: '',
link: '',
socket: null,
terminal: null,
downloadFileDownloadUrl: ''
};
},
methods: {
onFatalError(errorMessage) {
this.fatalError = errorMessage;
this.$refs.fatalErrorDialog.open();
},
// generic dialog focus handler TODO move to pankow and reuse in filemanger
onDialogShow(focusElementId) {
setTimeout(() => document.getElementById(focusElementId).focus(), 0);
},
async onDownload() {
this.downloadFileDownloadUrl = '';
let directoryModel = null;
const appsModel = AppsModel.create();
const accessToken = localStorage.token;
let socket = null;
let terminal = null;
const downloadFileName = await this.$refs.inputDialog.prompt({
message: this.$t('terminal.downloadAction'),
value: '',
confirmStyle: 'success',
confirmLabel: this.$t('terminal.download.download'),
rejectLabel: this.$t('main.dialog.cancel'),
modal: false
});
const fatalError = ref(false);
const busyRestart = ref(false);
const connected = ref(false);
const addons = ref({});
const showFilemanager = ref(false);
const manifestVersion = ref('');
const schedulerMenuModel = ref([]);
const id = ref('');
const name = ref('');
const link = ref('');
const downloadFileDownloadUrl = ref('');
if (!downloadFileName) return;
const fatalErrorDialog = useTemplateRef('fatalErrorDialog');
const inputDialog = useTemplateRef('inputDialog');
const fileUploader = useTemplateRef('fileUploader');
const schedulerMenu = useTemplateRef('schedulerMenu');
try {
await fetcher.head(`${API_ORIGIN}/api/v1/apps/${this.id}/download`, {
file: downloadFileName,
access_token: this.accessToken
});
} catch (error) {
if (error.status === 404) console.error('The requested file does not exist.');
else console.error('Failed', error);
function onFatalError(errorMessage) {
fatalError.value = errorMessage;
fatalErrorDialog.value.open();
}
return;
}
async function onDownload() {
downloadFileDownloadUrl.value = '';
this.downloadFileDownloadUrl = `${API_ORIGIN}/api/v1/apps/${this.id}/download?file=${encodeURIComponent(downloadFileName)}&access_token=${this.accessToken}`;
const downloadFileName = await inputDialog.value.prompt({
message: t('terminal.downloadAction'),
value: '',
confirmStyle: 'success',
confirmLabel: t('terminal.download.download'),
rejectLabel: t('main.dialog.cancel'),
modal: false
});
// we have to click the link to make the browser do the download
// don't know how to prevent the browsers
this.$nextTick(() => {
document.getElementById('fileDownloadLink').click();
});
},
onUpload() {
this.$refs.fileUploader.onUploadFile('/');
},
async uploadHandler(targetDir, file, progressHandler) {
await this.directoryModel.upload(targetDir, file, progressHandler);
},
usesAddon(addon) {
return !!Object.keys(this.addons).find(function (a) { return a === addon; });
},
terminalInject(addon, command) {
if (!this.socket) return;
if (!downloadFileName) return;
let cmd = '';
if (addon === 'mysql') {
if (this.manifestVersion === 1) {
cmd = 'mysql --user=${MYSQL_USERNAME} --password=${MYSQL_PASSWORD} --host=${MYSQL_HOST} ${MYSQL_DATABASE}';
} else {
cmd = 'mysql --user=${CLOUDRON_MYSQL_USERNAME} --password=${CLOUDRON_MYSQL_PASSWORD} --host=${CLOUDRON_MYSQL_HOST} ${CLOUDRON_MYSQL_DATABASE}';
}
} else if (addon === 'postgresql') {
if (this.manifestVersion === 1) {
cmd = 'PGPASSWORD=${POSTGRESQL_PASSWORD} psql -h ${POSTGRESQL_HOST} -p ${POSTGRESQL_PORT} -U ${POSTGRESQL_USERNAME} -d ${POSTGRESQL_DATABASE}';
} else {
cmd = 'PGPASSWORD=${CLOUDRON_POSTGRESQL_PASSWORD} psql -h ${CLOUDRON_POSTGRESQL_HOST} -p ${CLOUDRON_POSTGRESQL_PORT} -U ${CLOUDRON_POSTGRESQL_USERNAME} -d ${CLOUDRON_POSTGRESQL_DATABASE}';
}
} else if (addon === 'mongodb') {
if (this.manifestVersion === 1) {
cmd = 'mongo -u "${MONGODB_USERNAME}" -p "${MONGODB_PASSWORD}" ${MONGODB_HOST}:${MONGODB_PORT}/${MONGODB_DATABASE}';
} else {
cmd = 'mongosh -u "${CLOUDRON_MONGODB_USERNAME}" -p "${CLOUDRON_MONGODB_PASSWORD}" ${CLOUDRON_MONGODB_HOST}:${CLOUDRON_MONGODB_PORT}/${CLOUDRON_MONGODB_DATABASE}';
}
} else if (addon === 'redis') {
if (this.manifestVersion === 1) {
cmd = 'redis-cli -h "${REDIS_HOST}" -p "${REDIS_PORT}" -a "${REDIS_PASSWORD}"';
} else if (this.addons['redis'].noPassword) {
cmd = 'redis-cli -h "${CLOUDRON_REDIS_HOST}" -p "${CLOUDRON_REDIS_PORT}"';
} else {
cmd = 'redis-cli -h "${CLOUDRON_REDIS_HOST}" -p "${CLOUDRON_REDIS_PORT}" -a "${CLOUDRON_REDIS_PASSWORD}" --no-auth-warning';
}
} else if (addon === 'scheduler' && command) {
cmd = command;
}
if (!cmd) return;
cmd += ' ';
this.socket.send(cmd);
this.terminal.focus();
},
onSchedulerMenu(event) {
this.$refs.schedulerMenu.toggle(event);
},
async onRestartApp() {
const confirmed = await this.$refs.inputDialog.confirm({
message: this.$t('filemanager.toolbar.restartApp') + '?',
confirmStyle: 'danger',
confirmLabel: this.$t('main.dialog.yes'),
rejectLabel: this.$t('main.dialog.no')
});
if (!confirmed) return;
this.busyRestart = true;
const [error] = await this.appsModel.restart(this.id);
if (error) return console.error(error);
this.busyRestart = false;
},
async connect(retry = false) {
document.getElementsByClassName('pankow-main-layout-body')[0].innerHTML = '';
let execId;
try {
const result = await fetcher.post(`${API_ORIGIN}/api/v1/apps/${this.id}/exec`, { cmd: [ '/bin/bash' ], tty: true, lang: 'C.UTF-8' }, { access_token: this.accessToken });
execId = result.body.id;
} catch (error) {
console.error('Cannot create socket.', error);
return setTimeout(() => this.connect(true), 1000);
}
this.terminal = new Terminal();
this.terminal.open(document.getElementsByClassName('pankow-main-layout-body')[0]);
if (retry) this.terminal.writeln('Reconnecting...');
else this.terminal.writeln('Connecting...');
const fitAddon = new FitAddon();
this.terminal.loadAddon(fitAddon);
fitAddon.fit();
// Let the browser handle paste
this.terminal.attachCustomKeyEventHandler(function (e) {
if (e.key === 'V' && (e.ctrlKey || e.metaKey)) return false;
});
// websocket cannot use relative urls
const url = `${API_ORIGIN.replace('https', 'wss')}/api/v1/apps/${this.id}/exec/${execId}/startws?tty=true&rows=${this.terminal.rows}&columns=${this.terminal.cols}&access_token=${this.accessToken}`;
this.socket = new WebSocket(url);
this.terminal.loadAddon(new AttachAddon(this.socket));
this.socket.addEventListener('open', (event) => {
this.connected = true;
});
this.socket.addEventListener('close', (event) => {
this.connected = false;
console.log('Socket closed. Reconnecting...');
return setTimeout(() => this.connect(true), 1000);
});
this.socket.addEventListener('error', (error) => {
this.connected = false;
console.log('Socket error. Reconnecting...', error);
return setTimeout(() => this.connect(true), 1000);
});
this.terminal.focus();
}
},
async mounted() {
if (!localStorage.token) {
console.error('Set localStorage.token');
return;
}
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get('id');
if (!id) {
console.error('No app id specified');
return;
}
this.id = id;
this.name = id;
this.appsModel = AppsModel.create();
this.directoryModel = createDirectoryModel(API_ORIGIN, this.accessToken, `apps/${id}`);
const [error, app] = await this.appsModel.get(this.id);
if (error) {
console.error(`Failed to get app info for ${this.id}:`, error);
return this.onFatalError(`Unknown app ${this.id}. Cannot continue.`);
}
this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
this.link = (app.installationState !== ISTATES.INSTALLED || app.health !== HSTATES.HEALTHY || app.runState === RSTATES.STOPPED) ? '' : `https://${app.fqdn}`;
this.addons = app.manifest.addons;
this.manifestVersion = app.manifest.manifestVersion;
this.showFilemanager = !!app.manifest.addons.localstorage;
this.schedulerMenuModel = !app.manifest.addons.scheduler ? [] : Object.keys(app.manifest.addons.scheduler).map((k) => {
return {
label: k,
action: () => this.terminalInject('scheduler', app.manifest.addons.scheduler[k].command)
};
try {
await fetcher.head(`${API_ORIGIN}/api/v1/apps/${id.value}/download`, {
file: downloadFileName,
access_token: accessToken
});
} catch (error) {
if (error.status === 404) console.error('The requested file does not exist.');
else console.error('Failed', error);
window.document.title = `Terminal - ${this.name}`;
window.addEventListener('beforeunload', function (e) {
e.stopPropagation();
e.preventDefault();
return false;
}, true );
window.addEventListener('keydown', (event) => {
if (event.key === 'C' && (event.ctrlKey || event.metaKey)) { // ctrl shift c
event.preventDefault();
if (!this.terminal) return;
// execCommand('copy') would copy any selection from the page, so do this only if terminal has a selection
if (!this.terminal.getSelection()) return;
document.execCommand('copy');
this.terminal.focus();
}
});
this.connect();
return;
}
};
downloadFileDownloadUrl.value = `${API_ORIGIN}/api/v1/apps/${id.value}/download?file=${encodeURIComponent(downloadFileName)}&access_token=${accessToken}`;
// we have to click the link to make the browser do the download
// don't know how to prevent the browsers
setTimeout(() => {
document.getElementById('fileDownloadLink').click();
}, 100);
}
function onUpload() {
fileUploader.value.onUploadFile('/');
}
async function uploadHandler(targetDir, file, progressHandler) {
await directoryModel.upload(targetDir, file, progressHandler);
}
function usesAddon(addon) {
return !!Object.keys(addons.value).find(function (a) { return a === addon; });
}
function terminalInject(addon, command) {
if (!socket) return;
let cmd = '';
if (addon === 'mysql') {
if (manifestVersion.value === 1) {
cmd = 'mysql --user=${MYSQL_USERNAME} --password=${MYSQL_PASSWORD} --host=${MYSQL_HOST} ${MYSQL_DATABASE}';
} else {
cmd = 'mysql --user=${CLOUDRON_MYSQL_USERNAME} --password=${CLOUDRON_MYSQL_PASSWORD} --host=${CLOUDRON_MYSQL_HOST} ${CLOUDRON_MYSQL_DATABASE}';
}
} else if (addon === 'postgresql') {
if (manifestVersion.value === 1) {
cmd = 'PGPASSWORD=${POSTGRESQL_PASSWORD} psql -h ${POSTGRESQL_HOST} -p ${POSTGRESQL_PORT} -U ${POSTGRESQL_USERNAME} -d ${POSTGRESQL_DATABASE}';
} else {
cmd = 'PGPASSWORD=${CLOUDRON_POSTGRESQL_PASSWORD} psql -h ${CLOUDRON_POSTGRESQL_HOST} -p ${CLOUDRON_POSTGRESQL_PORT} -U ${CLOUDRON_POSTGRESQL_USERNAME} -d ${CLOUDRON_POSTGRESQL_DATABASE}';
}
} else if (addon === 'mongodb') {
if (manifestVersion.value === 1) {
cmd = 'mongo -u "${MONGODB_USERNAME}" -p "${MONGODB_PASSWORD}" ${MONGODB_HOST}:${MONGODB_PORT}/${MONGODB_DATABASE}';
} else {
cmd = 'mongosh -u "${CLOUDRON_MONGODB_USERNAME}" -p "${CLOUDRON_MONGODB_PASSWORD}" ${CLOUDRON_MONGODB_HOST}:${CLOUDRON_MONGODB_PORT}/${CLOUDRON_MONGODB_DATABASE}';
}
} else if (addon === 'redis') {
if (manifestVersion.value === 1) {
cmd = 'redis-cli -h "${REDIS_HOST}" -p "${REDIS_PORT}" -a "${REDIS_PASSWORD}"';
} else if (addons.value['redis'].noPassword) {
cmd = 'redis-cli -h "${CLOUDRON_REDIS_HOST}" -p "${CLOUDRON_REDIS_PORT}"';
} else {
cmd = 'redis-cli -h "${CLOUDRON_REDIS_HOST}" -p "${CLOUDRON_REDIS_PORT}" -a "${CLOUDRON_REDIS_PASSWORD}" --no-auth-warning';
}
} else if (addon === 'scheduler' && command) {
cmd = command;
}
if (!cmd) return;
cmd += ' ';
socket.send(cmd);
terminal.focus();
}
function onSchedulerMenu(event) {
schedulerMenu.value.toggle(event);
}
async function onRestartApp() {
const confirmed = await inputDialog.value.confirm({
message: t('filemanager.toolbar.restartApp') + '?',
confirmStyle: 'danger',
confirmLabel: t('main.dialog.yes'),
rejectLabel: t('main.dialog.no')
});
if (!confirmed) return;
busyRestart.value = true;
const [error] = await appsModel.restart(id.value);
if (error) return console.error(error);
busyRestart.value = false;
}
let fitAddon = null;
let attachAddon = null;
let connectingTimeout = null;
async function connect(retry = false) {
clearTimeout(connectingTimeout);
let execId;
try {
const result = await fetcher.post(`${API_ORIGIN}/api/v1/apps/${id.value}/exec`, { cmd: [ '/bin/bash' ], tty: true, lang: 'C.UTF-8' }, { access_token: accessToken });
execId = result.body.id;
} catch (error) {
console.error('Cannot create socket.', error);
connectingTimeout = setTimeout(() => connect(true), 1000);
return;
}
if (retry) terminal.writeln('\nReconnecting...');
else terminal.writeln('\nConnecting...');
fitAddon.fit();
// websocket cannot use relative urls
const url = `${API_ORIGIN.replace('https', 'wss')}/api/v1/apps/${id.value}/exec/${execId}/startws?tty=true&rows=${terminal.rows}&columns=${terminal.cols}&access_token=${accessToken}`;
socket = new WebSocket(url);
if (attachAddon) attachAddon.dispose();
attachAddon = new AttachAddon(socket);
terminal.loadAddon(attachAddon);
// eslint-disable-next-line no-unused-vars
socket.addEventListener('open', (event) => {
connected.value = true;
clearTimeout(connectingTimeout);
});
// eslint-disable-next-line no-unused-vars
socket.addEventListener('close', (event) => {
connected.value = false;
console.log('Socket closed. Reconnecting...');
connectingTimeout = setTimeout(() => connect(true), 1000);
});
socket.addEventListener('error', (error) => {
connected.value = false;
console.log('Socket error. Reconnecting...', error);
connectingTimeout = setTimeout(() => connect(true), 1000);
});
terminal.focus();
}
onMounted(async () => {
if (!localStorage.token) {
console.error('Set localStorage.token');
return;
}
const urlParams = new URLSearchParams(window.location.search);
id.value = urlParams.get('id');
if (!id.value) {
console.error('No app id specified');
return;
}
name.value = id.value;
directoryModel = createDirectoryModel(API_ORIGIN, accessToken, `apps/${id.value}`);
const [error, app] = await appsModel.get(id.value);
if (error) {
console.error(`Failed to get app info for ${id.value}:`, error);
return onFatalError(`Unknown app ${id.value}. Cannot continue.`);
}
name.value = `${app.label || app.fqdn} (${app.manifest.title})`;
link.value = (app.installationState !== ISTATES.INSTALLED || app.health !== HSTATES.HEALTHY || app.runState === RSTATES.STOPPED) ? '' : `https://${app.fqdn}`;
addons.value = app.manifest.addons;
manifestVersion.value = app.manifest.manifestVersion;
showFilemanager.value = !!app.manifest.addons.localstorage;
schedulerMenuModel.value = !app.manifest.addons.scheduler ? [] : Object.keys(app.manifest.addons.scheduler).map((k) => {
return {
label: k,
action: () => terminalInject('scheduler', app.manifest.addons.scheduler[k].command)
};
});
window.document.title = `Terminal - ${name.value}`;
window.addEventListener('beforeunload', function (e) {
e.stopPropagation();
e.preventDefault();
return false;
}, true );
window.addEventListener('keydown', (event) => {
if (event.key === 'C' && (event.ctrlKey || event.metaKey)) { // ctrl shift c
event.preventDefault();
if (!terminal) return;
// execCommand('copy') would copy any selection from the page, so do this only if terminal has a selection
if (!terminal.getSelection()) return;
document.execCommand('copy');
terminal.focus();
}
});
terminal = new Terminal();
terminal.open(document.getElementsByClassName('pankow-main-layout-body')[0]);
// Let the browser handle paste
terminal.attachCustomKeyEventHandler(function (e) {
if (e.key === 'V' && (e.ctrlKey || e.metaKey)) return false;
});
fitAddon = new FitAddon();
terminal.loadAddon(fitAddon);
fitAddon.fit();
connect();
});
</script>