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

frontend: remove primevue from terminal

Browse Source
This commit is contained in:
Johannes Zellner
2024-05-02 15:05:04 +02:00
parent 310a8c1c63
commit 11aeccc822
2 changed files with 39 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
frontend/src/components/Terminal.vue
View File

@@ -1,24 +1,12 @@
<template>
<MainLayout :gap="false">
<template #dialogs>
<Dialog v-model:visible="fatalError" modal header="Error" :closable="false" :closeOnEscape="false">
<Dialog ref="fatalErrorDialog" modal title="Error">
<p>{{ fatalError }}</p>
</Dialog>
<Dialog v-model:visible="downloadFileDialog.visible" modal :style="{ width: '50vw' }" @show="onDialogShow('downloadFileDialogNameInput')">
<template #header>
<label class="dialog-header" for="downloadFileDialogNameInput">{{ $t('terminal.downloadAction') }}</label>
</template>
<template #default>
<form @submit="onDownloadFileDialogSubmit" @submit.prevent>
<p :v-show="downloadFileDialog.error">{{ downloadFileDialog.error }}</p>
<label for="downloadFileDialogNameInput">{{ $t('terminal.download.filePath') }}</label>
<InputText class="dialog-single-input" :class="{ 'p-invalid': downloadFileDialog.error }" id="downloadFileDialogNameInput" v-model="downloadFileDialog.name" :disabled="downloadFileDialog.busy" required/>
<Button class="dialog-single-input-submit" type="submit" :label="$t('terminal.download.download')" :loading="downloadFileDialog.busy" :disabled="downloadFileDialog.busy || !downloadFileDialog.name"/>
</form>
<a id="fileDownloadLink" :href="downloadFileDialog.downloadUrl" target="_blank"></a>
</template>
</Dialog>
<InputDialog ref="inputDialog" />
<a id="fileDownloadLink" :href="downloadFileDownloadUrl" target="_blank"></a>
</template>
<template #header>
<TopBar class="navbar">
@@ -27,22 +15,21 @@
</template>
<template #right>
<!-- Scheduler/cron tasks -->
<Button severity="success" :label="$t('terminal.scheduler')" v-show="usesAddon('scheduler')" icon="pi pi-angle-down" iconPos="right" @click="onSchedulerMenu" aria-haspopup="true" aria-controls="schedulerMenu" style="margin-right: 5px" />
<Menu ref="schedulerMenu" id="schedulerMenu" :model="schedulerMenuModel" :popup="true" />
<Button success :menu="schedulerMenuModel" v-show="usesAddon('scheduler')" @click="onSchedulerMenu">{{ $t('terminal.scheduler') }}</Button>
<!-- addon actions -->
<Button severity="success" style="margin-right: 5px;" @click="terminalInject('mysql')" v-show="usesAddon('mysql')" :disabled="!connected" label="MySQL"/>
<Button severity="success" style="margin-right: 5px;" @click="terminalInject('postgresql')" v-show="usesAddon('postgresql')" :disabled="!connected" label="Postgres"/>
<Button severity="success" style="margin-right: 5px;" @click="terminalInject('mongodb')" v-show="usesAddon('mongodb')" :disabled="!connected" label="MongoDB"/>
<Button severity="success" style="margin-right: 5px;" @click="terminalInject('redis')" v-show="usesAddon('redis')" :disabled="!connected" label="Redis"/>
<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 severity="primary" style="margin-right: 5px;" :disabled="!connected" @click="onUpload" icon="pi pi-upload" :label="$t('terminal.uploadToTmp')"/>
<Button severity="primary" style="margin-right: 5px;" :disabled="!connected" @click="onDownload" icon="pi pi-download" :label="$t('terminal.downloadAction')"/>
<Button style="margin-left: 20px;" :disabled="!connected" @click="onUpload" icon="fa-solid fa-upload">{{ $t('terminal.uploadToTmp') }}</Button>
<Button :disabled="!connected" @click="onDownload" icon="fa-solid fa-download">{{ $t('terminal.downloadAction') }}</Button>
<Button style="margin-right: 5px;" severity="secondary" type="button" v-tooltip.bottom="$t('filemanager.toolbar.restartApp')" icon="pi pi-sync" @click="onRestartApp" :loading="busyRestart"/>
<a style="margin-right: 5px;" :href="'/frontend/filemanager.html#/home/app/' + id" target="_blank"><Button severity="secondary" type="button" icon="pi pi-folder" v-tooltip.bottom="$t('filemanager.title')" /></a>
<a :href="'/frontend/logs.html?appId=' + id" target="_blank"><Button severity="secondary" icon="pi pi-align-left" v-tooltip.bottom="$t('logs.title')"/></a>
<Button style="margin-left: 20px;" :title="$t('filemanager.toolbar.restartApp')" secondary :loading="busyRestart" icon="fa-solid fa-arrows-rotate" @click="onRestartApp"/>
<Button :href="'/frontend/filemanager.html#/home/app/' + id" target="_blank" secondary icon="fa-solid fa-folder" :title="$t('filemanager.title')" />
<Button :href="'/frontend/logs.html?appId=' + id" target="_blank" secondary icon="fa-solid fa-align-left" :title="$t('logs.title')" />
</template>
</TopBar>
</template>
@@ -63,13 +50,7 @@
import superagent from 'superagent';
import Button from 'primevue/button';
import Dialog from 'primevue/dialog';
import InputText from 'primevue/inputtext';
import Menu from 'primevue/menu';
import ProgressSpinner from 'primevue/progressspinner';
import { TopBar, MainLayout, FileUploader } from 'pankow';
import { Button, Dialog, FileUploader, InputDialog, MainLayout, TopBar } from 'pankow';
import '@xterm/xterm/css/xterm.css';
import { Terminal } from '@xterm/xterm';
@@ -86,10 +67,8 @@ export default {
Button,
Dialog,
FileUploader,
InputText,
InputDialog,
MainLayout,
Menu,
ProgressSpinner,
TopBar
},
data() {
@@ -108,51 +87,50 @@ export default {
name: '',
socket: null,
terminal: null,
downloadFileDialog: {
busy: false,
name: '',
error: '',
downloadUrl: '',
visible: false,
}
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);
},
onDownload() {
this.downloadFileDialog.busy = false;
this.downloadFileDialog.name = '';
this.downloadFileDialog.error = '';
this.downloadFileDialog.downloadUrl = '';
this.downloadFileDialog.visible = true;
},
async onDownloadFileDialogSubmit() {
this.downloadFileDialog.busy = true;
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 {
const result = await superagent.head(`${this.apiOrigin}/api/v1/apps/${this.id}/download`).query({
file: this.downloadFileDialog.name,
file: downloadFileName,
access_token: this.accessToken
});
} catch (error) {
this.downloadFileDialog.busy = false;
if (error.status === 404) this.downloadFileDialog.error = 'The requested file does not exist.';
if (error.status === 404) console.error('The requested file does not exist.');
else console.error('Failed', error);
return;
}
this.downloadFileDialog.downloadUrl = `${this.apiOrigin}/api/v1/apps/${this.id}/download?file=${encodeURIComponent(this.downloadFileDialog.name)}&access_token=${this.accessToken}`;
this.downloadFileDownloadUrl = `${this.apiOrigin}/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();
this.downloadFileDialog.visible = false;
});
},
onUpload() {
@@ -247,11 +225,6 @@ export default {
this.terminal.loadAddon(new AttachAddon(this.socket));
// Let the browser handle paste
// this.terminal.attachCustomKeyEventHandler((event) => {
// if (event.key === 'V' && (event.ctrlKey || event.metaKey)) return false;
// });
this.socket.addEventListener('open', (event) => {
this.connected = true;
});
@@ -298,14 +271,13 @@ export default {
this.schedulerMenuModel = !app.manifest.addons.scheduler ? [] : Object.keys(app.manifest.addons.scheduler).map((k) => {
return {
label: () => k,
command: () => this.terminalInject('scheduler', app.manifest.addons.scheduler[k].command)
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);
this.fatalError = `Unknown app ${this.id}. Cannot continue.`;
return;
return this.onFatalError(`Unknown app ${this.id}. Cannot continue.`);
}
window.document.title = `Terminal - ${this.name}`;