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

Move terminal.html to dashboard

Browse Source
This commit is contained in:
Johannes Zellner
2024-10-04 21:04:08 +02:00
parent bc4e6ab1de
commit 9d7f12952d
10 changed files with 50 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dashboard/src/components/LogsViewer.vue
View File

@@ -12,7 +12,7 @@
<Button :href="downloadUrl" target="_blank" icon="fa-solid fa-download">{{ $t('logs.download') }}</Button>
<Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" v-show="showRestart" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
<Button :href="'/frontend/terminal.html?id=' + id" target="_blank" v-show="showTerminal" secondary tool icon="fa-solid fa-terminal" :title="$t('terminal.title')" />
<Button :href="'/terminal.html?id=' + id" target="_blank" v-show="showTerminal" secondary tool icon="fa-solid fa-terminal" :title="$t('terminal.title')" />
<Button :href="'/frontend/filemanager.html#/home/app/' + id" target="_blank" v-show="showFilemanager" secondary tool icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
</template>
</TopBar>

352
dashboard/src/components/Terminal.vue Normal file
View File

@@ -0,0 +1,352 @@
<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>
<span class="title">{{ name }}</span>
</template>
<template #right>
<!-- Scheduler/cron tasks -->
<Button success :menu="schedulerMenuModel" v-show="usesAddon('scheduler')" @click="onSchedulerMenu">{{ $t('terminal.scheduler') }}</Button>
<!-- addon actions -->
<Button success @click="terminalInject('mysql')" v-show="usesAddon('mysql')" :disabled="!connected">MySQL</Button>
<Button success @click="terminalInject('postgresql')" v-show="usesAddon('postgresql')" :disabled="!connected">Postgres</Button>
<Button success @click="terminalInject('mongodb')" v-show="usesAddon('mongodb')" :disabled="!connected">MongoDB</Button>
<Button success @click="terminalInject('redis')" v-show="usesAddon('redis')" :disabled="!connected">Redis</Button>
<!-- 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>
<Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary tool :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
<Button v-show="showFilemanager" :href="'/frontend/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')" />
</template>
</TopBar>
</template>
<template #body>
<!-- terminal will be injected here -->
</template>
<template #footer>
<FileUploader
ref="fileUploader"
:upload-handler="uploadHandler"
:tr="$t"
/>
</template>
</MainLayout>
</template>
<script>
import { fetcher, Button, 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 { create } from '../models/AppModel.js';
import { createDirectoryModel } from '../models/DirectoryModel.js';
const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
export default {
name: 'Terminal',
components: {
Button,
Dialog,
FileUploader,
InputDialog,
MainLayout,
TopBar
},
data() {
return {
accessToken: localStorage.token,
appModel: null,
directoryModel: null,
fatalError: false,
busyRestart: false,
connected: false,
addons: {},
showFilemanager: false,
schedulerTasks: [],
manifestVersion: '',
schedulerMenuModel: [],
id: '',
name: '',
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 = '';
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
});
if (!downloadFileName) return;
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);
return;
}
this.downloadFileDownloadUrl = `${API_ORIGIN}/api/v1/apps/${this.id}/download?file=${encodeURIComponent(downloadFileName)}&access_token=${this.accessToken}`;
// 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;
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() {
this.busyRestart = true;
await this.appModel.restart();
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.appModel = create(API_ORIGIN, this.accessToken, this.id);
this.directoryModel = createDirectoryModel(API_ORIGIN, this.accessToken, `apps/${id}`);
try {
const app = await this.appModel.get();
this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
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)
};
});
} catch (e) {
console.error(`Failed to get app info for ${this.id}:`, e);
return this.onFatalError(`Unknown app ${this.id}. Cannot continue.`);
}
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();
}
};
</script>
<style>
body {
background-color: black;
overflow: hidden;
}
.title {
font-size: 20px;
}
.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>

207
dashboard/src/models/DirectoryModel.js Normal file
View File

@@ -0,0 +1,207 @@
import { fetcher } from 'pankow';
import { sanitize } from 'pankow/utils';
const BASE_URL = import.meta.env.BASE_URL || '/';
export function createDirectoryModel(origin, accessToken, api) {
const ownersModel = [{
uid: 0,
label: 'root'
}, {
uid: 33,
label: 'www-data'
}, {
uid: 808,
label: 'yellowtent'
}, {
uid: 1000,
label: 'cloudron'
}, {
uid: 1001,
label: 'git'
}];
return {
name: 'DirectoryModel',
ownersModel,
buildFilePath(filePath, fileName) {
// remove leading and trailing slashes
while (filePath.startsWith('/')) filePath = filePath.slice(1);
while (filePath.endsWith('/')) filePath = filePath.slice(0, -1);
return encodeURIComponent(`${filePath}${filePath ? '/' : ''}${fileName}`);
},
async listFiles(path) {
let error, result;
try {
result = await fetcher.get(`${origin}/api/v1/${api}/files/${path}`, { access_token: accessToken });
} catch (e) {
error = e;
}
if (error || result.status !== 200) {
if (error.status === 404) return [];
console.error('Failed to list files', error || result.status);
return [];
}
// this prepares the entries to be compatible with all components
result.body.entries.forEach(item => {
item.id = item.fileName;
item.name = item.fileName;
item.folderPath = path;
item.modified = new Date(item.mtime);
item.type = item.isDirectory ? 'directory' : 'file',
item.icon = `${BASE_URL}mime-types/${item.mimeType === 'inode/symlink' ? 'none' : item.mimeType.split('/').join('-')}.svg`;
// if we have an image, attach previewUrl
if (item.mimeType.indexOf('image/') === 0) {
item.previewUrl = `${origin}/api/v1/${api}/files/${encodeURIComponent(path + '/' + item.fileName)}?access_token=${accessToken}`;
} else {
item.previewUrl = '';
}
item.owner = item.uid;
if (ownersModel.find((m) => m.uid === item.uid)) item.owner = ownersModel.find((m) => m.uid === item.uid).label;
});
return result.body.entries;
},
upload(targetDir, file, progressHandler) {
// file may contain a file name or a file path + file name
const relativefilePath = (file.webkitRelativePath ? file.webkitRelativePath : file.name);
const xhr = new XMLHttpRequest();
const req = new Promise(function (resolve, reject) {
xhr.addEventListener('load', () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject({
status: xhr.status,
statusText: xhr.statusText
});
}
});
xhr.addEventListener('error', () => {
reject({
status: xhr.status,
statusText: xhr.statusText
});
});
xhr.upload.addEventListener('progress', (event) => {
if (event.loaded) progressHandler({ direction: 'upload', loaded: event.loaded});
});
xhr.open('POST', `${origin}/api/v1/${api}/files/${encodeURIComponent(sanitize(targetDir + '/' + relativefilePath))}?access_token=${accessToken}&overwrite=true`);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.send(file);
});
// attach for upstream xhr.abort()
req.xhr = xhr;
return req;
},
async newFile(filePath) {
await this.save(filePath, '');
},
async newFolder(folderPath) {
await fetcher.post(`${origin}/api/v1/${api}/files/${folderPath}`, { directory: true }, { access_token: accessToken });
},
async remove(filePath) {
await fetcher.del(`${origin}/api/v1/${api}/files/${filePath}`, { access_token: accessToken });
},
async rename(fromFilePath, toFilePath, overwrite = false) {
await fetcher.put(`${origin}/api/v1/${api}/files/${fromFilePath}`, { action: 'rename', newFilePath: sanitize(toFilePath), overwrite }, { access_token: accessToken });
},
async copy(fromFilePath, toFilePath) {
await fetcher.put(`${origin}/api/v1/${api}/files/${fromFilePath}`, { action: 'copy', newFilePath: sanitize(toFilePath) }, { access_token: accessToken });
},
async chown(filePath, uid) {
await fetcher.put(`${origin}/api/v1/${api}/files/${filePath}`, { action: 'chown', uid: uid, recursive: true }, { access_token: accessToken });
},
async extract(path) {
await fetcher.put(`${origin}/api/v1/${api}/files/${path}`, { action: 'extract' }, { access_token: accessToken });
},
async download(path) {
window.open(`${origin}/api/v1/${api}/files/${path}?download=true&access_token=${accessToken}`);
},
async save(filePath, content) {
const file = new File([content], 'file');
const req = new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject({
status: xhr.status,
statusText: xhr.statusText
});
}
});
xhr.addEventListener('error', () => {
reject({
status: xhr.status,
statusText: xhr.statusText
});
});
xhr.open('POST', `${origin}/api/v1/${api}/files/${filePath}?access_token=${accessToken}&overwrite=true`);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.setRequestHeader('Content-Length', file.size);
xhr.send(file);
});
await req;
},
async getFile(path) {
let result;
try {
result = await fetch(`${origin}/api/v1/${api}/files/${path}?access_token=${accessToken}`);
} catch (error) {
console.error('Failed to get file', error);
return null;
}
const text = await result.text();
return text;
},
async paste(targetDir, action, files) {
// this will not overwrite but tries to find a new unique name to past to
for (const f in files) {
let done = false;
let targetPath = targetDir + '/' + files[f].name;
while (!done) {
try {
if (action === 'cut') await this.rename(this.buildFilePath(files[f].folderPath, files[f].name), targetPath);
if (action === 'copy') await this.copy(this.buildFilePath(files[f].folderPath, files[f].name), targetPath);
done = true;
} catch (error) {
if (error.status === 409) {
targetPath += '-copy';
} else {
throw error;
}
}
}
}
},
getFileUrl(path) {
return `${origin}/api/v1/${api}/files/${path}?access_token=${accessToken}`;
}
};
}
export default {
createDirectoryModel
};

16
dashboard/src/terminal.js Normal file
View File

@@ -0,0 +1,16 @@
import { createApp } from 'vue';
import './style.css';
import '@fontsource/noto-sans';
import i18n from './i18n.js';
import Terminal from './components/Terminal.vue';
(async function init() {
const app = createApp(Terminal);
app.use(await i18n());
app.mount('#app');
})();