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

various filemanager and logs improvements

Browse Source
This commit is contained in:
Johannes Zellner
2023-07-13 15:36:57 +02:00
parent 25328d884f
commit d75c8e2858
4 changed files with 54 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/filemanager.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/logo.png" /> <link rel="icon" href="/api/v1/cloudron/avatar" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>File Manager</title> <title>File Manager</title>
</head> </head>
frontend/src/components/LogsViewer.vue
+18 -11
View File
@@ -8,10 +8,11 @@
<span class="title">{{ name }}</span> <span class="title">{{ name }}</span>
</template> </template>
<template #right> <template #right>
<a class="p-button p-button-primary" style="margin-right: 5px;" :href="'/terminal.html?id=' + id" target="_blank" v-show="type === 'app'"><span class="p-button-icon p-button-icon-left pi pi-desktop"></span> {{ $t('terminal.title') }}</a>
<a class="p-button p-button-primary" style="margin-right: 5px;" :href="'/frontend/filemanager.html#/home/app/' + id" target="_blank" v-show="type === 'app'"><span class="p-button-icon p-button-icon-left pi pi-folder"></span> {{ $t('filemanager.title') }}</a>
<Button type="button" :label="$t('logs.clear')" icon="pi pi-eraser" @click="onClear()" style="margin-right: 5px" /> <Button type="button" :label="$t('logs.clear')" icon="pi pi-eraser" @click="onClear()" style="margin-right: 5px" />
<a class="p-button p-button-primary" :href="downloadUrl" target="_blank"><span class="p-button-icon p-button-icon-left pi pi-download"></span> {{ $t('logs.download') }}</a> <a style="margin-right: 25px;" :href="downloadUrl" target="_blank"><Button :label="$t('logs.download')" icon="pi pi-download" /></a>
<a style="margin-right: 5px;" :href="'/frontend/filemanager.html#/home/app/' + id" target="_blank" v-show="type === 'app'"><Button type="button" severity="secondary" icon="pi pi-folder" :label="$t('filemanager.title')" /></a>
<a style="margin-right: 5px;" :href="'/terminal.html?id=' + id" target="_blank" v-show="type === 'app'"><Button severity="secondary" icon="pi pi-desktop" :label="$t('terminal.title')" /></a>
<Button type="button" :label="$t('filemanager.toolbar.restartApp')" severity="secondary" icon="pi pi-sync" @click="onRestartApp" :loading="busyRestart" v-show="type === 'app'"/>
</template> </template>
</TopBar> </TopBar>
</template> </template>
@@ -54,6 +55,7 @@ export default {
accessToken: localStorage.token, accessToken: localStorage.token,
apiOrigin: API_ORIGIN || '', apiOrigin: API_ORIGIN || '',
logsModel: null, logsModel: null,
busyRestart: false,
id: '', id: '',
name: '', name: '',
type: '', type: '',
@@ -67,6 +69,15 @@ export default {
}, },
onDownload() { onDownload() {
this.logsModel.download(); this.logsModel.download();
},
async onRestartApp() {
if (this.type !== 'app') return;
this.busyRestart = true;
await this.logsModel.restartApp();
this.busyRestart = false;
} }
}, },
async mounted() { async mounted() {
@@ -113,12 +124,14 @@ export default {
if (this.type === 'app') { if (this.type === 'app') {
try { try {
const app = await this.logsModel.getApp(); const app = await this.logsModel.getApp();
this.name = app.fqdn + ' (' + app.manifest.title + ')'; this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
} catch (e) { } catch (e) {
console.error(`Failed to get app info for ${this.id}:`, e); console.error(`Failed to get app info for ${this.id}:`, e);
} }
} }
window.document.title = `Logs Viewer - ${this.name}`;
this.downloadUrl = this.logsModel.getDownloadUrl(); this.downloadUrl = this.logsModel.getDownloadUrl();
this.logsModel.stream((id, time, html) => { this.logsModel.stream((id, time, html) => {
@@ -155,6 +168,7 @@ body {
background-color: black; background-color: black;
color: white; color: white;
margin-bottom: 0 !important; margin-bottom: 0 !important;
padding: 5px 10px;
} }
.log-line { .log-line {
@@ -186,12 +200,5 @@ body {
height: 5px; height: 5px;
} }
a.p-button:hover, a.p-button:focus {
color: white;
text-decoration: none;
background: #0d89ec;
border-color: #0d89ec;
}
</style> </style>
frontend/src/models/LogsModel.js
+30
View File
@@ -2,6 +2,8 @@
import moment from 'moment'; import moment from 'moment';
import superagent from 'superagent'; import superagent from 'superagent';
import { ansiToHtml } from 'anser'; import { ansiToHtml } from 'anser';
import { ISTATES } from '../constants.js';
import { sleep } from 'pankow/utils';
// https://github.com/janl/mustache.js/blob/master/mustache.js#L60 // https://github.com/janl/mustache.js/blob/master/mustache.js#L60
const entityMap = { const entityMap = {
@@ -93,6 +95,34 @@ export function create(origin, accessToken, type, id) {
} }
return result.body; return result.body;
},
async restartApp() {
if (type !== 'app') return;
let error, result;
try {
result = await superagent.post(`${origin}/api/v1/apps/${id}/restart`).query({ access_token: accessToken });
} catch (e) {
error = e;
}
if (error || result.statusCode !== 202) {
console.error(`Failed to restart app ${this.id}`, error || result.statusCode);
return;
}
while(true) {
let result;
try {
result = await superagent.get(`${origin}/api/v1/apps/${id}`).query({ access_token: accessToken });
} catch (e) {
console.error(e);
}
if (result && result.statusCode === 200 && result.body.installationState === ISTATES.INSTALLED) break;
await sleep(2000);
}
} }
}; };
} }
frontend/src/views/Home.vue
+4 -11
View File
@@ -58,8 +58,8 @@
<Menu ref="createMenu" id="create_menu" :model="createMenuModel" :popup="true" /> <Menu ref="createMenu" id="create_menu" :model="createMenuModel" :popup="true" />
<Button type="button" :label="$t('filemanager.toolbar.upload')" icon="pi pi-upload" @click="onUploadMenu" aria-haspopup="true" aria-controls="upload_menu" style="margin-right: 5px" /> <Button type="button" :label="$t('filemanager.toolbar.upload')" icon="pi pi-upload" @click="onUploadMenu" aria-haspopup="true" aria-controls="upload_menu" style="margin-right: 5px" />
<Menu ref="uploadMenu" id="upload_menu" :model="uploadMenuModel" :popup="true" /> <Menu ref="uploadMenu" id="upload_menu" :model="uploadMenuModel" :popup="true" />
<a class="p-button p-button-secondary" style="margin-left: 20px; margin-right: 5px;" :href="'/logs.html?appId=' + resourceId" target="_blank" v-show="resourceType === 'app'"><span class="p-button-icon p-button-icon-left pi pi-align-left"></span> {{ $t('filemanager.toolbar.openLogs') }}</a> <a style="margin-left: 20px; margin-right: 5px;" :href="'/logs.html?appId=' + resourceId" target="_blank" v-show="resourceType === 'app'"><Button severity="secondary" icon="pi pi-align-left" :label="$t('logs.title')" /></a>
<a class="p-button p-button-secondary" style="margin-right: 5px;" :href="'/terminal.html?id=' + resourceId" target="_blank" v-show="resourceType === 'app'"><span class="p-button-icon p-button-icon-left pi pi-desktop"></span> {{ $t('filemanager.toolbar.openTerminal') }}</a> <a style="margin-right: 5px;" :href="'/terminal.html?id=' + resourceId" target="_blank" v-show="resourceType === 'app'"><Button severity="secondary" icon="pi pi-desktop" :label="$t('terminal.title')" /></a>
<Button type="button" :label="$t('filemanager.toolbar.restartApp')" severity="secondary" icon="pi pi-sync" @click="onRestartApp" :loading="busyRestart" v-show="resourceType === 'app'"/> <Button type="button" :label="$t('filemanager.toolbar.restartApp')" severity="secondary" icon="pi pi-sync" @click="onRestartApp" :loading="busyRestart" v-show="resourceType === 'app'"/>
</template> </template>
</TopBar> </TopBar>
@@ -472,7 +472,7 @@ export default {
return; return;
} }
this.title = result.body.label || result.body.fqdn; this.title = `${result.body.label || result.body.fqdn} (${result.body.manifest.title})`;
} else if (type === 'volume') { } else if (type === 'volume') {
let error, result; let error, result;
try { try {
@@ -493,7 +493,7 @@ export default {
return; return;
} }
window.document.title = this.title + ' - File Manager'; window.document.title = `File Manager - ${this.title}`;
this.cwd = sanitize('/' + (cwd ? cwd.join('/') : '/')); this.cwd = sanitize('/' + (cwd ? cwd.join('/') : '/'));
this.resourceType = type; this.resourceType = type;
@@ -553,11 +553,4 @@ export default {
margin-top: 5px; margin-top: 5px;
} }
a.p-button:hover {
text-decoration: none;
background: #0d89ec;
color: #ffffff;
border-color: #0d89ec;
}
</style> </style>