Show disk usage content name delivered from the backend
This commit is contained in:
Johannes Zellner
@@ -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>
|
||||
|
||||
+11
-11
@@ -114,9 +114,9 @@ async function getFilesystems() {
|
||||
}
|
||||
|
||||
const standardPaths = [
|
||||
{ type: 'standard', id: 'platformdata', path: paths.PLATFORM_DATA_DIR },
|
||||
{ type: 'standard', id: 'boxdata', path: paths.BOX_DATA_DIR },
|
||||
{ type: 'standard', id: 'maildata', path: paths.MAIL_DATA_DIR },
|
||||
{ type: 'standard', id: 'platformdata', name: 'Platform Data', path: paths.PLATFORM_DATA_DIR },
|
||||
{ type: 'standard', id: 'boxdata', name: 'Box Data', path: paths.BOX_DATA_DIR },
|
||||
{ type: 'standard', id: 'maildata', name: 'Mail Data', path: paths.MAIL_DATA_DIR },
|
||||
];
|
||||
|
||||
for (const stdPath of standardPaths) {
|
||||
@@ -130,7 +130,7 @@ async function getFilesystems() {
|
||||
if (backupSite.provider === 'filesystem') {
|
||||
const [, dfResult] = await safe(df.file(backupSite.config.backupDir));
|
||||
const filesystem = dfResult?.filesystem || rootDisk.filesystem;
|
||||
if (filesystems[filesystem]) filesystems[filesystem].contents.push({ type: 'cloudron-backup', id: backupSite.id, path: backupSite.config.backupDir });
|
||||
if (filesystems[filesystem]) filesystems[filesystem].contents.push({ type: 'cloudron-backup', id: backupSite.id, name: backupSite.name, path: backupSite.config.backupDir });
|
||||
}
|
||||
|
||||
}
|
||||
@@ -140,7 +140,7 @@ async function getFilesystems() {
|
||||
if (!siteForDefault) {
|
||||
const [, dfResult] = await safe(df.file(paths.DEFAULT_BACKUP_DIR));
|
||||
const filesystem = dfResult?.filesystem || rootDisk.filesystem;
|
||||
if (filesystems[filesystem]) filesystems[filesystem].contents.push({ type: 'cloudron-backup-default', id: 'cloudron-backup-default', path: paths.DEFAULT_BACKUP_DIR });
|
||||
if (filesystems[filesystem]) filesystems[filesystem].contents.push({ type: 'cloudron-backup-default', id: 'cloudron-backup-default', name: 'Cloudron Default Backup', path: paths.DEFAULT_BACKUP_DIR });
|
||||
}
|
||||
|
||||
const [dockerError, dockerInfo] = await safe(docker.info());
|
||||
@@ -148,15 +148,15 @@ async function getFilesystems() {
|
||||
const [, dfResult] = await safe(df.file(dockerInfo.DockerRootDir));
|
||||
const filesystem = dfResult?.filesystem || rootDisk.filesystem;
|
||||
if (filesystems[filesystem]) {
|
||||
filesystems[filesystem].contents.push({ type: 'standard', id: 'docker', path: dockerInfo.DockerRootDir });
|
||||
filesystems[filesystem].contents.push({ type: 'standard', id: 'docker-volumes', path: dockerInfo.DockerRootDir });
|
||||
filesystems[filesystem].contents.push({ type: 'standard', id: 'docker', name: 'Docker', path: dockerInfo.DockerRootDir });
|
||||
filesystems[filesystem].contents.push({ type: 'standard', id: 'docker-volumes', name: 'Docker Volumes', path: dockerInfo.DockerRootDir });
|
||||
}
|
||||
}
|
||||
|
||||
for (const volume of await volumes.list()) {
|
||||
const [, dfResult] = await safe(df.file(volume.hostPath));
|
||||
const filesystem = dfResult?.filesystem || rootDisk.filesystem;
|
||||
if (filesystems[filesystem]) filesystems[filesystem].contents.push({ type: 'volume', id: volume.id, path: volume.hostPath });
|
||||
if (filesystems[filesystem]) filesystems[filesystem].contents.push({ type: 'volume', id: volume.id, name: volume.name, path: volume.hostPath });
|
||||
}
|
||||
|
||||
for (const app of await apps.list()) {
|
||||
@@ -166,7 +166,7 @@ async function getFilesystems() {
|
||||
if (dataDir === null) continue;
|
||||
const [, dfResult] = await safe(df.file(dataDir));
|
||||
const filesystem = dfResult?.filesystem || rootDisk.filesystem;
|
||||
if (filesystems[filesystem]) filesystems[filesystem].contents.push({ type: 'app', id: app.id, path: dataDir });
|
||||
if (filesystems[filesystem]) filesystems[filesystem].contents.push({ type: 'app', id: app.id, name: app.label || app.fqdn, path: dataDir });
|
||||
}
|
||||
|
||||
const swaps = await getSwaps();
|
||||
@@ -175,7 +175,7 @@ async function getFilesystems() {
|
||||
if (swap.type !== 'file') continue;
|
||||
|
||||
const [, dfResult] = await safe(df.file(swap.name));
|
||||
filesystems[dfResult?.filesystem || rootDisk.filesystem].contents.push({ type: 'swap', id: swap.name, path: swap.name });
|
||||
filesystems[dfResult?.filesystem || rootDisk.filesystem].contents.push({ type: 'swap', id: swap.name, name: swap.name, path: swap.name });
|
||||
}
|
||||
|
||||
return Object.values(filesystems);
|
||||
@@ -262,7 +262,7 @@ class FilesystemUsageTask extends AsyncTask {
|
||||
this.emitData({ content });
|
||||
}
|
||||
|
||||
if (mountpoint === '/') this.emitData({ content: { type: 'standard', id: 'os', usage: used-usage }});
|
||||
if (mountpoint === '/') this.emitData({ content: { type: 'standard', id: 'os', name: 'Ubuntu', usage: used - usage }});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user