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

Show disk usage content name delivered from the backend

Browse Source
This commit is contained in:
Johannes Zellner
2025-10-15 11:51:39 +02:00
parent f9ee088592
commit eb7d7a2d1b
2 changed files with 14 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
dashboard/src/components/DiskUsageItem.vue
View File

@@ -3,12 +3,8 @@
import { ref, onUnmounted } from 'vue';
import { Button, ProgressBar } from '@cloudron/pankow';
import { prettyDecimalSize } from '@cloudron/pankow/utils';
import AppsModel from '../models/AppsModel.js';
import VolumesModel from '../models/VolumesModel.js';
import SystemModel from '../models/SystemModel.js';
const appsModel = AppsModel.create();
const volumesModel = VolumesModel.create();
const systemModel = SystemModel.create();
const props = defineProps({
@@ -41,19 +37,7 @@ const highlight = ref(null);
let eventSource = null;
async function refresh() {
let [error, result] = await appsModel.list();
if (error) return console.error(error);
const appsById = {};
result.forEach(a => { appsById[a.id] = a; });
[error, result] = await volumesModel.list();
if (error) return console.error(error);
const volumesById = {};
result.forEach(v => { volumesById[v.id] = v; });
[error, result] = await systemModel.filesystemUsage(props.filesystem.filesystem);
const [error, result] = await systemModel.filesystemUsage(props.filesystem.filesystem);
if (error) return console.error(error);
contents.value = [];
@@ -89,16 +73,6 @@ async function refresh() {
if (payload.speed) {
speed.value = payload.speed;
} else if (payload.content) {
if (payload.content.type === 'app') {
payload.content.app = appsById[payload.content.id];
if (!payload.content.app) payload.content.uninstalled = true;
else payload.content.label = payload.content.app.label || payload.content.app.fqdn;
} else if (payload.content.type === 'volume') {
payload.content.volume = volumesById[payload.content.id];
payload.content.label = payload.content.volume ? `Volume ${payload.content.volume.name}` : 'Removed volume';
} else {
payload.content.label = payload.content.id;
}
contents.value.push(payload.content);
} else {
console.error('Unkown data', payload);
@@ -139,7 +113,7 @@ onUnmounted(() => {
<div v-if="isExpanded" @mouseout="highlight = null">
<ProgressBar v-if="percent < 100" mode="indeterminate" :show-label="false"/>
<div v-else class="disk-size" style="overflow: visible;">
<div class="disk-used" v-for="content in contents" :key="content.id" v-tooltip="content.id" @mouseover="highlight = content.id" :style="{ 'background-color': content.color, width: 100*content.usage/filesystem.size + '%' }" :class="{ highlight: highlight === content.id }"></div>
<div class="disk-used" v-for="content in contents" :key="content.id" v-tooltip="content.name" @mouseover="highlight = content.id" :style="{ 'background-color': content.color, width: 100*content.usage/filesystem.size + '%' }" :class="{ highlight: highlight === content.id }"></div>
</div>
<div v-if="percent < 100" style="text-align: center; margin-top: 10px;">Calculating speed and disk usage ... {{ parseInt(percent) }}%</div>
@@ -147,7 +121,7 @@ onUnmounted(() => {
<table style="width: 100%;table-layout: fixed">
<tr v-for="content in contents" :key="content.id" @mouseover="highlight = content.id" :class="{ highlight: highlight === content.id }">
<td style="width: 20px"><div class="content-color-indicator" :style="{ backgroundColor: content.color }"></div></td>
<td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ content.label }}</td>
<td style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ content.name }}</td>
<td style="text-align: right; white-space: nowrap;">{{ prettyDecimalSize(content.usage) }}</td>
</tr>
</table>