381 lines
12 KiB
Vue
381 lines
12 KiB
Vue
<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';
|
|
import { AttachAddon } from '@xterm/addon-attach';
|
|
import { FitAddon } from '@xterm/addon-fit';
|
|
import { API_ORIGIN, ISTATES, RSTATES, HSTATES } from '../constants.js';
|
|
import AppsModel from '../models/AppsModel.js';
|
|
import { createDirectoryModel } from '../models/DirectoryModel.js';
|
|
|
|
let directoryModel = null;
|
|
const appsModel = AppsModel.create();
|
|
const accessToken = localStorage.token;
|
|
let socket = null;
|
|
let terminal = null;
|
|
|
|
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('');
|
|
|
|
const fatalErrorDialog = useTemplateRef('fatalErrorDialog');
|
|
const inputDialog = useTemplateRef('inputDialog');
|
|
const fileUploader = useTemplateRef('fileUploader');
|
|
const schedulerMenu = useTemplateRef('schedulerMenu');
|
|
|
|
function onFatalError(errorMessage) {
|
|
fatalError.value = errorMessage;
|
|
fatalErrorDialog.value.open();
|
|
}
|
|
|
|
async function onDownload() {
|
|
downloadFileDownloadUrl.value = '';
|
|
|
|
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
|
|
});
|
|
|
|
if (!downloadFileName) return;
|
|
|
|
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);
|
|
|
|
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>
|
|
|
|
<template>
|
|
<MainLayout :gap="false">
|
|
<template #dialogs>
|
|
<Dialog ref="fatalErrorDialog" modal title="Error">
|
|
<p>{{ fatalError }}</p>
|
|
</Dialog>
|
|
|
|
<InputDialog ref="inputDialog" />
|
|
<a id="fileDownloadLink" :href="downloadFileDownloadUrl" target="_blank"></a>
|
|
</template>
|
|
<template #header>
|
|
<TopBar class="navbar">
|
|
<template #left>
|
|
<a class="title" :href="link" target="_blank">{{ name }}</a>
|
|
</template>
|
|
<template #right>
|
|
<ButtonGroup>
|
|
<!-- Scheduler/cron tasks -->
|
|
<Button success :menu="schedulerMenuModel" v-if="usesAddon('scheduler')" @click="onSchedulerMenu">{{ $t('terminal.scheduler') }}</Button>
|
|
|
|
<!-- addon actions -->
|
|
<Button success @click="terminalInject('mysql')" v-if="usesAddon('mysql')" :disabled="!connected">MySQL</Button>
|
|
<Button success @click="terminalInject('postgresql')" v-if="usesAddon('postgresql')" :disabled="!connected">Postgres</Button>
|
|
<Button success @click="terminalInject('mongodb')" v-if="usesAddon('mongodb')" :disabled="!connected">MongoDB</Button>
|
|
<Button success @click="terminalInject('redis')" v-if="usesAddon('redis')" :disabled="!connected">Redis</Button>
|
|
</ButtonGroup>
|
|
|
|
<ButtonGroup>
|
|
<!-- upload/download actions -->
|
|
<Button style="margin-left: 20px;" :disabled="!connected" @click="onUpload" icon="fa-solid fa-upload">{{ $t('terminal.uploadTo', { path: '/app/data/' }) }}</Button>
|
|
<Button :disabled="!connected" @click="onDownload" icon="fa-solid fa-download">{{ $t('terminal.downloadAction') }}</Button>
|
|
</ButtonGroup>
|
|
|
|
<ButtonGroup>
|
|
<Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
|
|
<Button v-if="showFilemanager" :href="'/filemanager.html#/home/app/' + id" target="_blank" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
|
|
<Button :href="'/logs.html?appId=' + id" target="_blank" secondary tool icon="fa-solid fa-align-left" :title="$t('logs.title')" />
|
|
</ButtonGroup>
|
|
</template>
|
|
</TopBar>
|
|
</template>
|
|
<template #body>
|
|
<!-- terminal will be injected here -->
|
|
</template>
|
|
<template #footer>
|
|
<FileUploader
|
|
ref="fileUploader"
|
|
:upload-handler="uploadHandler"
|
|
:tr="$t"
|
|
/>
|
|
</template>
|
|
</MainLayout>
|
|
</template>
|
|
|
|
<style>
|
|
|
|
body {
|
|
background-color: black !important;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.title {
|
|
font-size: 20px;
|
|
color: var(--pankow-color-text);
|
|
}
|
|
|
|
.pankow-top-bar {
|
|
background-color: black;
|
|
color: white;
|
|
margin-bottom: 0 !important;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<style scoped>
|
|
|
|
.dialog-header {
|
|
font-weight: 600;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.dialog-single-input {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 5px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dialog-single-input-submit {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
</style>
|
|
|