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

Add detailed disk usage view on click

Browse Source
This commit is contained in:
Johannes Zellner
2025-07-17 19:27:09 +02:00
parent 149af003d4
commit 585885e6a2
2 changed files with 136 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/DiskUsageItem.vue
+132 -71
View File
@@ -1,73 +1,57 @@
<script setup>
import { prettyBinarySize, prettyDecimalSize } from '@cloudron/pankow/utils';
import { prettyDecimalSize } from '@cloudron/pankow/utils';
import SystemModel from '../models/SystemModel.js';
const systemModel = SystemModel.create();
const props = defineProps({
filesystem: Object
});
// async function updateTaskStatus(id) {
// const [error, result] = await tasksModel.get(id);
// if (error) return setTimeout(updateTaskStatus.bind(null, id), 5000);
// https://stackoverflow.com/questions/1484506/random-color-generator
function rainbow(numOfSteps, step) {
// This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
// Adam Cole, 2011-Sept-14
// HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
var r, g, b;
var h = step / numOfSteps;
var i = ~~(h * 6);
var f = h * 6 - i;
var q = 1 - f;
switch(i % 6){
case 0: r = 1; g = f; b = 0; break;
case 1: r = q; g = 1; b = 0; break;
case 2: r = 0; g = 1; b = f; break;
case 3: r = 0; g = q; b = 1; break;
case 4: r = f; g = 0; b = 1; break;
case 5: r = 1; g = 0; b = q; break;
}
var c = '#' + ('00' + (~ ~(r * 255)).toString(16)).slice(-2) + ('00' + (~ ~(g * 255)).toString(16)).slice(-2) + ('00' + (~ ~(b * 255)).toString(16)).slice(-2);
return (c);
}
// if (!result.active) return busy.value = false;
// busy.value = true;
// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
// setTimeout(updateTaskStatus.bind(null, id), 2000);
// }
let colorIndex = 0;
let colors = [];
function resetColors(n) {
colorIndex = 0;
colors = [];
for (let i = 0; i < n; i++) colors.push(rainbow(n, i));
shuffle(colors);
}
// async function onRescan() {
// busy.value = true;
// const [error, result] = await systemModel.rescanDiskUsage();
// if (error) return console.error(error);
// updateTaskStatus(result);
// }
// // https://stackoverflow.com/questions/1484506/random-color-generator
// function rainbow(numOfSteps, step) {
// // This function generates vibrant, "evenly spaced" colours (i.e. no clustering). This is ideal for creating easily distinguishable vibrant markers in Google Maps and other apps.
// // Adam Cole, 2011-Sept-14
// // HSV to RBG adapted from: http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript
// var r, g, b;
// var h = step / numOfSteps;
// var i = ~~(h * 6);
// var f = h * 6 - i;
// var q = 1 - f;
// switch(i % 6){
// case 0: r = 1; g = f; b = 0; break;
// case 1: r = q; g = 1; b = 0; break;
// case 2: r = 0; g = 1; b = f; break;
// case 3: r = 0; g = q; b = 1; break;
// case 4: r = f; g = 0; b = 1; break;
// case 5: r = 1; g = 0; b = q; break;
// }
// var c = '#' + ('00' + (~ ~(r * 255)).toString(16)).slice(-2) + ('00' + (~ ~(g * 255)).toString(16)).slice(-2) + ('00' + (~ ~(b * 255)).toString(16)).slice(-2);
// return (c);
// }
// // https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array
// function shuffle(a) {
// for (let i = a.length - 1; i > 0; i--) {
// const j = Math.floor(Math.random() * (i + 1));
// [a[i], a[j]] = [a[j], a[i]];
// }
// return a;
// }
// let colorIndex = 0;
// let colors = [];
// function resetColors(n) {
// colorIndex = 0;
// colors = [];
// for (let i = 0; i < n; i++) colors.push(rainbow(n, i));
// shuffle(colors);
// }
// function getNextColor() {
// return colors[colorIndex++];
// }
function getNextColor() {
return colors[colorIndex++];
}
// async function refresh() {
// let [error, result] = await appsModel.list();
@@ -142,26 +126,76 @@ const props = defineProps({
// });
// }
import { ref } from 'vue';
const isExpanded = ref(false);
const percent = ref(0);
const contents = ref([]);
const speed = ref(-1);
async function onExpand() {
if (isExpanded.value) return;
resetColors(50);
isExpanded.value = true;
const [error, eventSource] = await systemModel.filesystemUsage(props.filesystem.filesystem);
if (error) return console.error(error);
eventSource.addEventListener('message', function (message) {
const payload = JSON.parse(message.data);
if (payload.type === 'done') {
percent.value = 100;
eventSource.close();
} else if (payload.type === 'progress') {
percent.value = payload.percent;
} else {
if (payload.speed) speed.value = payload.speed;
else if (payload.content) {
payload.content.color = getNextColor();
contents.value.push(payload.content);
}
else console.error('Unkown data', payload);
}
});
eventSource.addEventListener('error', function (error) {
console.log('error: errored', error);
eventSource.close();
});
}
</script>
<template>
<div class="disk-item">
<div class="disk-item" :style="{ cursor: isExpanded ? null : 'pointer' }" @click="onExpand()">
<div class="disk-item-title">{{ filesystem.mountpoint }}</div>
<div>{{ filesystem.type }}</div>
<div class="usage-label">
<div>{{ prettyDecimalSize(filesystem.size) }} total</div>
<div>{{ prettyDecimalSize(filesystem.available) }} available</div>
</div>
<div class="disk-size">
<div class="disk-size" v-if="!isExpanded">
<div class="disk-used" :style="{ width: parseInt(filesystem.capacity*100) + '%' }"></div>
</div>
<div v-if="false">
<div>Contains:</div>
<div v-for="content in filesystem.contents" :key="content.id">
<div>{{ content.type }}</div>
<div>{{ content.id }}</div>
<div>{{ content.path }}</div>
<div class="disk-size" v-else-if="percent < 100">
<div class="disk-used disk-used-busy"></div>
</div>
<div class="disk-size" v-else>
<div class="disk-used" v-for="content in contents" :key="content.id" :style="{ 'background-color': content.color, width: 100*content.usage/filesystem.size + '%' }"></div>
</div>
<div v-if="isExpanded">
<div v-if="percent < 100" style="text-align: center;">Calculating disk usage... {{ percent }}%</div>
<div v-else>
<table style="width: 100%">
<tr v-for="content in contents" :key="content.id">
<td><div class="content-color-indicator" :style="{ backgroundColor: content.color }"></div></td>
<td>{{ content.id }}</td>
<td style="text-align: right">{{ prettyDecimalSize(content.usage) }}</td>
</tr>
</table>
</div>
</div>
</div>
@@ -180,7 +214,6 @@ const props = defineProps({
overflow: hidden;
border-radius: 10px;
background-color: var(--card-background);
cursor: pointer;
}
.disk-item:focus,
@@ -205,16 +238,44 @@ const props = defineProps({
}
.disk-size {
display: flex;
position: relative;
background-color: white;
border-radius: calc(var(--pankow-border-radius) / 1.5);
height: 6px;
overflow: hidden;
}
.disk-used {
display: inline-block;
background-color: var(--pankow-color-primary);
transition: width 250ms;
white-space: nowrap;
border-radius: calc(var(--pankow-border-radius) / 1.5);
height: 6px;
}
.disk-used-busy::after {
content: '';
width: 90%;
height: 100%;
background: var(--pankow-color-primary);
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
animation: pankow-progress-bar-indeterminate-animation 1.5s ease-in-out infinite;
border-radius: calc(var(--pankow-border-radius) / 1.5);
}
.content-legend-item {
display: flex;
align-items: center;
}
.content-color-indicator {
display: inline-block;
height: 16px;
width: 16px;
margin-right: 6px;
}
</style>