Show filesystem overview in disk usage
This commit is contained in:
Johannes Zellner
@@ -1,170 +1,20 @@
|
||||
<script setup>
|
||||
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { Button } from '@cloudron/pankow';
|
||||
import { prettyDecimalSize, prettyDate } from '@cloudron/pankow/utils';
|
||||
import { TASK_TYPES } from '../constants.js';
|
||||
import Section from './Section.vue';
|
||||
import SystemModel from '../models/SystemModel.js';
|
||||
import AppsModel from '../models/AppsModel.js';
|
||||
import VolumesModel from '../models/VolumesModel.js';
|
||||
import TasksModel from '../models/TasksModel.js';
|
||||
import DiskUsageItem from './DiskUsageItem.vue';
|
||||
|
||||
const systemModel = SystemModel.create();
|
||||
const appsModel = AppsModel.create();
|
||||
const volumesModel = VolumesModel.create();
|
||||
const tasksModel = TasksModel.create();
|
||||
|
||||
const busy = ref(false);
|
||||
const lastUpdated = ref(0);
|
||||
const disks = ref([]);
|
||||
const ready = ref(false);
|
||||
|
||||
async function updateTaskStatus(id) {
|
||||
const [error, result] = await tasksModel.get(id);
|
||||
if (error) return setTimeout(updateTaskStatus.bind(null, id), 5000);
|
||||
|
||||
if (!result.active) return busy.value = false;
|
||||
busy.value = true;
|
||||
|
||||
setTimeout(updateTaskStatus.bind(null, id), 2000);
|
||||
}
|
||||
|
||||
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++];
|
||||
}
|
||||
|
||||
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.diskUsage();
|
||||
if (error) return console.error(error);
|
||||
|
||||
lastUpdated.value = result.ts;
|
||||
|
||||
// [ { filesystem, type, size, used, available, capacity, mountpoint }]
|
||||
disks.value = Object.keys(result.filesystems).map(k => result.filesystems[k]); // convert object to array...
|
||||
|
||||
disks.value.forEach(disk => {
|
||||
let usageOther = disk.used;
|
||||
|
||||
resetColors(disk.contents.length);
|
||||
|
||||
// if this disk is a volume amend it and remove it from contents
|
||||
disk.contents.forEach(function (content) { if (content.path === disk.mountpoint) disk.volume = volumesById[content.id]; });
|
||||
disk.contents = disk.contents.filter(function (content) { return content.path !== disk.mountpoint; });
|
||||
|
||||
// only show old backups if the size is significant
|
||||
disk.contents = disk.contents.filter(function (content) { return content.id !== 'cloudron-backup-default' || content.usage > 1024*1024*1024; });
|
||||
|
||||
disk.contents.forEach(function (content) {
|
||||
content.color = getNextColor();
|
||||
|
||||
if (content.type === 'app') {
|
||||
content.app = appsById[content.id];
|
||||
if (!content.app) content.uninstalled = true;
|
||||
else content.label = content.app.label || content.app.fqdn;
|
||||
} else if (content.type === 'volume') {
|
||||
content.volume = volumesById[content.id];
|
||||
content.label = content.volume ? content.volume.name : 'Removed volume';
|
||||
}
|
||||
|
||||
// ensure a label for ui
|
||||
content.label = content.label || content.id;
|
||||
|
||||
usageOther -= content.usage;
|
||||
});
|
||||
|
||||
disk.contents.sort((x, y) => { return y.usage - x.usage; }); // sort by usage
|
||||
|
||||
if (disks.value[0] === disk) { // the root mount point is the first disk. keep this 'contains' in the end
|
||||
disk.contents.push({
|
||||
type: 'standard',
|
||||
label: 'Everything else (Ubuntu, etc)',
|
||||
id: 'other',
|
||||
color: '#555555',
|
||||
usage: usageOther
|
||||
});
|
||||
} else {
|
||||
disk.contents.push({
|
||||
type: 'standard',
|
||||
label: 'Used',
|
||||
id: 'other',
|
||||
color: '#555555',
|
||||
usage: usageOther
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
const filesystems = ref([]);
|
||||
|
||||
onMounted(async () => {
|
||||
const [error, result] = await tasksModel.getLatestByType(TASK_TYPES.TASK_UPDATE_DISK_USAGE);
|
||||
if (!error && result.active) {
|
||||
busy.value = true;
|
||||
updateTaskStatus(result.id);
|
||||
}
|
||||
|
||||
await refresh();
|
||||
const [error, result] = await systemModel.filesystems();
|
||||
if (error) return console.error(error);
|
||||
|
||||
filesystems.value = Object.values(result);
|
||||
ready.value = true;
|
||||
});
|
||||
|
||||
@@ -172,45 +22,24 @@ onMounted(async () => {
|
||||
|
||||
<template>
|
||||
<Section :title="$t('system.diskUsage.title')">
|
||||
<template #header-buttons>
|
||||
<span class="small" style="margin: auto; margin-right: 10px" v-show="!busy && lastUpdated">Last updated: {{ prettyDate(lastUpdated) }}</span>
|
||||
<Button tool @click="onRescan()" v-if="ready" :disabled="busy" :loading="busy" icon="fa-solid fa-sync-alt" />
|
||||
</template>
|
||||
|
||||
<div v-for="(disk, index) in disks" :key="disk.filesystem">
|
||||
<hr style="margin: 5px 0px;" v-show="index !== 0"/>
|
||||
<div>
|
||||
<div style="display: flex; align-items: baseline; justify-content: space-between;">
|
||||
<h3 class="no-wrap" style="font-size: 20px;" v-html="$t('system.diskUsage.mountedAt', { filesystem: disk.filesystem, mountpoint: disk.mountpoint })"></h3>
|
||||
<div class="text-muted" style="white-space:nowrap;" v-if="disk.available && disk.size" v-html="$t('system.diskUsage.usedInfo', { used: prettyDecimalSize(disk.used), size: prettyDecimalSize(disk.size) })"></div>
|
||||
<div class="text-muted" style="white-space:nowrap;" v-else>{{ $t('system.diskUsage.notAvailableYet') }}</div>
|
||||
</div>
|
||||
<div class="usage-bar">
|
||||
<div class="usage-bar-section" v-for="content in disk.contents" :key="content" :style="{ width: `${content.usage / disk.size * 100}%`, backgroundColor: content.color }" v-tooltip="`${content.label} ${prettyDecimalSize(content.usage)}`"></div>
|
||||
<div class="usage-bar-section-remaining">{{ prettyDecimalSize(disk.available) }}</div>
|
||||
</div>
|
||||
<div class="text-right text-muted" style="margin-top: 10px;" v-show="disk.speed !== -1">{{ $t('system.diskUsage.diskSpeed', { speed: disk.speed }) }}</div>
|
||||
<p v-if="disk.volume" v-html="$t('system.diskUsage.volumeContent', { name: disk.volume.name })"></p>
|
||||
<p v-else>{{ $t('system.diskUsage.diskContent') }}:</p>
|
||||
<div v-for="content in disk.contents" :key="content.id" class="disk-content">
|
||||
<span class="color-indicator" :style="{ backgroundColor: content.color }"> </span>
|
||||
<span v-show="content.type === 'cloudron-backup-default'">{{ content.path }} (Old Backups)</span>
|
||||
<span v-show="content.type === 'standard'">{{ content.label }}</span>
|
||||
<span v-show="content.type === 'swap'">{{ content.label }}</span>
|
||||
<span v-show="content.type === 'app'">
|
||||
<a v-if="content.app" :href="`/#/app/${content.app.id}/storage`">{{ content.label }}</a>
|
||||
<span v-else>{{ $t('system.diskUsage.uninstalledApp') }}</span>
|
||||
</span>
|
||||
<span v-show="content.type === 'volume'"><a href="/#/volumes">{{ content.label }}</a></span>
|
||||
<small class="disk-content-size">{{ prettyDecimalSize(content.usage) }}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filesystems-grid">
|
||||
<DiskUsageItem v-for="filesystem in filesystems" :key="filesystem.filesystem" :filesystem="filesystem" />
|
||||
</div>
|
||||
</Section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.filesystems-grid {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: 300ms;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.usage-bar {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
@@ -0,0 +1,220 @@
|
||||
<script setup>
|
||||
|
||||
import { prettyBinarySize, prettyDecimalSize } from '@cloudron/pankow/utils';
|
||||
|
||||
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);
|
||||
|
||||
// if (!result.active) return busy.value = false;
|
||||
// busy.value = true;
|
||||
|
||||
// setTimeout(updateTaskStatus.bind(null, id), 2000);
|
||||
// }
|
||||
|
||||
// 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++];
|
||||
// }
|
||||
|
||||
// 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.diskUsage();
|
||||
// if (error) return console.error(error);
|
||||
|
||||
// lastUpdated.value = result.ts;
|
||||
|
||||
// // [ { filesystem, type, size, used, available, capacity, mountpoint }]
|
||||
// disks.value = Object.keys(result.filesystems).map(k => result.filesystems[k]); // convert object to array...
|
||||
|
||||
// disks.value.forEach(disk => {
|
||||
// let usageOther = disk.used;
|
||||
|
||||
// resetColors(disk.contents.length);
|
||||
|
||||
// // if this disk is a volume amend it and remove it from contents
|
||||
// disk.contents.forEach(function (content) { if (content.path === disk.mountpoint) disk.volume = volumesById[content.id]; });
|
||||
// disk.contents = disk.contents.filter(function (content) { return content.path !== disk.mountpoint; });
|
||||
|
||||
// // only show old backups if the size is significant
|
||||
// disk.contents = disk.contents.filter(function (content) { return content.id !== 'cloudron-backup-default' || content.usage > 1024*1024*1024; });
|
||||
|
||||
// disk.contents.forEach(function (content) {
|
||||
// content.color = getNextColor();
|
||||
|
||||
// if (content.type === 'app') {
|
||||
// content.app = appsById[content.id];
|
||||
// if (!content.app) content.uninstalled = true;
|
||||
// else content.label = content.app.label || content.app.fqdn;
|
||||
// } else if (content.type === 'volume') {
|
||||
// content.volume = volumesById[content.id];
|
||||
// content.label = content.volume ? content.volume.name : 'Removed volume';
|
||||
// }
|
||||
|
||||
// // ensure a label for ui
|
||||
// content.label = content.label || content.id;
|
||||
|
||||
// usageOther -= content.usage;
|
||||
// });
|
||||
|
||||
// disk.contents.sort((x, y) => { return y.usage - x.usage; }); // sort by usage
|
||||
|
||||
// if (disks.value[0] === disk) { // the root mount point is the first disk. keep this 'contains' in the end
|
||||
// disk.contents.push({
|
||||
// type: 'standard',
|
||||
// label: 'Everything else (Ubuntu, etc)',
|
||||
// id: 'other',
|
||||
// color: '#555555',
|
||||
// usage: usageOther
|
||||
// });
|
||||
// } else {
|
||||
// disk.contents.push({
|
||||
// type: 'standard',
|
||||
// label: 'Used',
|
||||
// id: 'other',
|
||||
// color: '#555555',
|
||||
// usage: usageOther
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="disk-item">
|
||||
<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-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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.disk-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
margin: 10px;
|
||||
max-width: 620px;
|
||||
padding: 10px 16px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background-color: var(--card-background);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.disk-item:focus,
|
||||
.disk-item:hover {
|
||||
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
||||
background-color: var(--pankow-color-background-hover) !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.disk-item > div {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.disk-item-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.usage-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.disk-size {
|
||||
background-color: white;
|
||||
border-radius: calc(var(--pankow-border-radius) / 1.5);
|
||||
}
|
||||
|
||||
.disk-used {
|
||||
background-color: var(--pankow-color-primary);
|
||||
transition: width 250ms;
|
||||
white-space: nowrap;
|
||||
border-radius: calc(var(--pankow-border-radius) / 1.5);
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user