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

Port LogViewer from vue object to composition style

Browse Source
This commit is contained in:
Johannes Zellner
2025-12-12 17:24:44 +01:00
parent 6e011ae70e
commit f09b03338e
1 changed files with 125 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/LogsViewer.vue
+125 -134
View File
@@ -1,153 +1,144 @@
<script>
<script setup>
import { useI18n } from 'vue-i18n';
const i18n = useI18n();
const t = i18n.t;
import { ref, useTemplateRef, onUnmounted, onMounted } from 'vue';
import { Button, InputDialog, TopBar, MainLayout, ButtonGroup } from '@cloudron/pankow';
import LogsModel from '../models/LogsModel.js';
import AppsModel from '../models/AppsModel.js';
export default {
name: 'LogsViewer',
components: {
Button,
ButtonGroup,
InputDialog,
MainLayout,
TopBar
},
data() {
return {
accessToken: localStorage.token,
logsModel: null,
appsModel: null,
busyRestart: false,
showRestart: false,
showFilemanager: false,
showTerminal: false,
id: '',
name: '',
type: '',
downloadUrl: '',
logLines: []
};
},
methods: {
onClear() {
while (this.$refs.linesContainer.firstChild) this.$refs.linesContainer.removeChild(this.$refs.linesContainer.firstChild);
},
onDownload() {
this.logsModel.download();
},
async onRestartApp() {
if (this.type !== 'app') return;
const linesContainer = useTemplateRef('linesContainer');
const inputDialog = useTemplateRef('inputDialog');
const confirmed = await this.$refs.inputDialog.confirm({
message: this.$t('filemanager.toolbar.restartApp') + '?',
confirmLabel: this.$t('main.action.restart'),
confirmStyle: 'danger',
rejectLabel: this.$t('main.dialog.cancel'),
rejectStyle: 'secondary',
});
let logsModel = null;
const appsModel = AppsModel.create();
let refreshInterval = 0;
if (!confirmed) return;
const busyRestart = ref(false);
const showRestart = ref(false);
const showFilemanager = ref(false);
const showTerminal = ref(false);
const id = ref('');
const name = ref('');
const type = ref('');
const downloadUrl = ref('');
this.busyRestart = true;
function onClear() {
while (linesContainer.value.firstChild) linesContainer.value.removeChild(linesContainer.value.firstChild);
}
const [error] = await this.appsModel.restart(this.id);
if (error) return console.error(error);
async function onRestartApp() {
if (type.value !== 'app') return;
this.busyRestart = false;
}
},
async mounted() {
if (!localStorage.token) {
console.error('Set localStorage.token');
return;
}
const confirmed = await inputDialog.value.confirm({
message: t('filemanager.toolbar.restartApp') + '?',
confirmLabel: t('main.action.restart'),
confirmStyle: 'danger',
rejectLabel: t('main.dialog.cancel'),
rejectStyle: 'secondary',
});
const urlParams = new URLSearchParams(window.location.search);
const appId = urlParams.get('appId');
const taskId = urlParams.get('taskId');
const crashId = urlParams.get('crashId');
const id = urlParams.get('id');
if (!confirmed) return;
if (appId) {
this.type = 'app';
this.id = appId;
this.name = 'App ' + appId;
} else if (taskId) {
this.type = 'task';
this.id = taskId;
this.name = 'Task ' + taskId;
} else if (crashId) {
this.type = 'crash';
this.id = crashId;
this.name = 'Crash ' + crashId;
} else if (id) {
if (id === 'box') {
this.type = 'platform';
this.id = id;
this.name = 'Box';
} else {
this.type = 'service';
this.id = id;
this.name = 'Service ' + id;
}
} else {
console.error('no supported log type specified');
return;
}
busyRestart.value = true;
this.logsModel = LogsModel.create(this.type, this.id);
const [error] = await appsModel.restart(id.value);
if (error) return console.error(error);
if (this.type === 'app') {
this.appsModel = AppsModel.create();
busyRestart.value = false;
}
const [error, app] = await this.appsModel.get(this.id);
if (error) return console.error(error);
this.name = `${app.label || app.fqdn} (${app.manifest.title})`;
this.showFilemanager = !!app.manifest.addons.localstorage;
this.showTerminal = app.manifest.id !== 'io.cloudron.builtin.appproxy';
this.showRestart = app.manifest.id !== 'io.cloudron.builtin.appproxy';
}
window.document.title = `Logs Viewer - ${this.name}`;
this.downloadUrl = this.logsModel.getDownloadUrl();
const maxLines = 1000;
let lines = 0;
let newLogLines = [];
const tmp = document.getElementsByClassName('pankow-main-layout-body')[0];
this.refreshInterval = setInterval(() => {
newLogLines = newLogLines.slice(-maxLines);
for (const line of newLogLines) {
if (lines < maxLines) ++lines;
else if (this.$refs.linesContainer.firstChild) this.$refs.linesContainer.removeChild(this.$refs.linesContainer.firstChild);
const logLine = document.createElement('div');
logLine.className = 'log-line';
logLine.innerHTML = `<span class="time">${line.time || '[no timestamp]&nbsp;' }</span> <span>${line.html}</span>`;
this.$refs.linesContainer.appendChild(logLine);
const autoScroll = tmp.scrollTop > (tmp.scrollHeight - tmp.clientHeight - 34);
if (autoScroll) setTimeout(() => tmp.scrollTop = tmp.scrollHeight, 1);
}
newLogLines = [];
}, 500);
this.logsModel.stream((time, html) => {
newLogLines.push({ time, html });
}, function (error) {
newLogLines.push({ time: error.time, html: error.html });
});
},
unmounted() {
clearInterval(this.refreshInterval);
onMounted(async () => {
if (!localStorage.token) {
console.error('Set localStorage.token');
return;
}
};
const urlParams = new URLSearchParams(window.location.search);
const appId = urlParams.get('appId');
const taskId = urlParams.get('taskId');
const crashId = urlParams.get('crashId');
const idParam = urlParams.get('id');
if (appId) {
type.value = 'app';
id.value = appId;
name.value = 'App ' + appId;
} else if (taskId) {
type.value = 'task';
id.value = taskId;
name.value = 'Task ' + taskId;
} else if (crashId) {
type.value = 'crash';
id.value = crashId;
name.value = 'Crash ' + crashId;
} else if (idParam) {
if (idParam === 'box') {
type.value = 'platform';
id.value = idParam;
name.value = 'Box';
} else {
type.value = 'service';
id.value = idParam;
name.value = 'Service ' + idParam;
}
} else {
console.error('no supported log type specified');
return;
}
logsModel = LogsModel.create(type.value, id.value);
if (type.value === 'app') {
const [error, app] = await appsModel.get(id.value);
if (error) return console.error(error);
name.value = `${app.label || app.fqdn} (${app.manifest.title})`;
showFilemanager.value = !!app.manifest.addons.localstorage;
showTerminal.value = app.manifest.id !== 'io.cloudron.builtin.appproxy';
showRestart.value = app.manifest.id !== 'io.cloudron.builtin.appproxy';
}
window.document.title = `Logs Viewer - ${name.value}`;
downloadUrl.value = logsModel.getDownloadUrl();
const maxLines = 1000;
let lines = 0;
let newLogLines = [];
const tmp = document.getElementsByClassName('pankow-main-layout-body')[0];
refreshInterval = setInterval(() => {
newLogLines = newLogLines.slice(-maxLines);
for (const line of newLogLines) {
if (lines < maxLines) ++lines;
else if (linesContainer.value.firstChild) linesContainer.value.removeChild(linesContainer.value.firstChild);
const logLine = document.createElement('div');
logLine.className = 'log-line';
logLine.innerHTML = `<span class="time">${line.time || '[no timestamp]&nbsp;' }</span> <span>${line.html}</span>`;
linesContainer.value.appendChild(logLine);
const autoScroll = tmp.scrollTop > (tmp.scrollHeight - tmp.clientHeight - 34);
if (autoScroll) setTimeout(() => tmp.scrollTop = tmp.scrollHeight, 1);
}
newLogLines = [];
}, 500);
logsModel.stream((time, html) => {
newLogLines.push({ time, html });
}, function (error) {
newLogLines.push({ time: error.time, html: error.html });
});
});
onUnmounted(() => {
clearInterval(refreshInterval);
});
</script>