From 13566968346c43a4f15bb60342db826131e15fb1 Mon Sep 17 00:00:00 2001 From: Daniel Kesselberg Date: Sat, 8 Aug 2026 20:00:27 +0200 Subject: [PATCH 1/2] feat: surface key numbers as stat tiles Replace the chart legends and the loose stat paragraphs with tiles, add a resource usage overview beside the system table, give both tables row dividers and move the temperature section down the page. Assisted-by: ClaudeCode:claude-opus-5 Signed-off-by: Daniel Kesselberg --- src/components/CpuChartSection.vue | 41 +++++--- src/components/DiskSection.vue | 23 ++--- src/components/MemoryChartSection.vue | 86 ++++++++-------- src/components/NetworkSection.vue | 19 ++-- src/components/ResourceOverviewSection.vue | 110 +++++++++++++++++++++ src/components/StatTile.vue | 48 +++++++++ src/components/SystemSection.vue | 8 -- src/components/ThermalSection.vue | 14 ++- src/composables/useLiveData.ts | 9 +- src/main.css | 32 +++--- src/views/SettingsAdmin.vue | 24 +++-- 11 files changed, 296 insertions(+), 118 deletions(-) create mode 100644 src/components/ResourceOverviewSection.vue create mode 100644 src/components/StatTile.vue diff --git a/src/components/CpuChartSection.vue b/src/components/CpuChartSection.vue index 57c00f00..c5fa9c21 100644 --- a/src/components/CpuChartSection.vue +++ b/src/components/CpuChartSection.vue @@ -4,15 +4,25 @@ --> + + diff --git a/src/components/StatTile.vue b/src/components/StatTile.vue new file mode 100644 index 00000000..d2d8ae2e --- /dev/null +++ b/src/components/StatTile.vue @@ -0,0 +1,48 @@ + + + + + + diff --git a/src/components/SystemSection.vue b/src/components/SystemSection.vue index 8945560c..5fc0be46 100644 --- a/src/components/SystemSection.vue +++ b/src/components/SystemSection.vue @@ -19,12 +19,6 @@ {{ t('serverinfo', '{name} ({threads} threads)', { name: cpu.name, threads: cpu.threads }) }} - - {{ t('serverinfo', 'Memory:') }} - - {{ formatMegabytes(memTotal) }} - - {{ t('serverinfo', 'Server time:') }} {{ servertime }} @@ -42,13 +36,11 @@ import { t } from '@nextcloud/l10n' import Monitor from 'vue-material-design-icons/Monitor.vue' import SectionHeading from './SectionHeading.vue' -import { formatMegabytes } from '../utils.ts' defineProps<{ hostname: string osname: string cpu: { name: string, threads: number } - memTotal: number servertime: string uptime: string }>() diff --git a/src/components/ThermalSection.vue b/src/components/ThermalSection.vue index d79e5a92..ed321cc7 100644 --- a/src/components/ThermalSection.vue +++ b/src/components/ThermalSection.vue @@ -4,12 +4,12 @@ -->