Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2026-04-06 01:02:06 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): use ui meter component for storage (#27459)

Browse Source
This commit is contained in:
Mees Frensel 2026-04-03 16:36:22 +02:00 committed by GitHub
parent 8e414e42f3
commit a19b7148e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 40 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
web/src/lib/components/shared-components/side-bar/storage-space.svelte
View File

@ -4,38 +4,18 @@
import { userInteraction } from '$lib/stores/user.svelte';
import { requestServerInfo } from '$lib/utils/auth';
import { getByteUnitString } from '$lib/utils/byte-units';
import { LoadingSpinner } from '@immich/ui';
import { LoadingSpinner, Meter } from '@immich/ui';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
let usageClasses = $state('');
let hasQuota = $derived($user?.quotaSizeInBytes !== null);
let availableBytes = $derived((hasQuota ? $user?.quotaSizeInBytes : userInteraction.serverInfo?.diskSizeRaw) || 0);
let usedBytes = $derived((hasQuota ? $user?.quotaUsageInBytes : userInteraction.serverInfo?.diskUseRaw) || 0);
let usedPercentage = $derived(Math.min(Math.round((usedBytes / availableBytes) * 100), 100));
const onUpdate = () => {
usageClasses = getUsageClass();
};
const getUsageClass = () => {
if (usedPercentage >= 95) {
return 'bg-red-500';
}
if (usedPercentage > 80) {
return 'bg-yellow-500';
}
return 'bg-primary';
};
$effect(() => {
if ($user) {
onUpdate();
}
});
const thresholds = [
{ from: 0.8, className: 'bg-warning' },
{ from: 0.95, className: 'bg-danger' },
];
onMount(async () => {
if (userInteraction.serverInfo && $user) {
@ -46,7 +26,7 @@
</script>
<div
class="storage-status p-4 bg-gray-100 dark:bg-immich-dark-primary/10 ms-4 rounded-lg text-sm min-w-52"
class="p-4 bg-light-100 ms-4 rounded-lg text-sm min-w-52"
title={$t('storage_usage', {
values: {
used: getByteUnitString(usedBytes, $locale, 3),
@ -54,24 +34,23 @@
},
})}
>
<p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
{#if userInteraction.serverInfo}
<p class="text-gray-500 dark:text-gray-300">
{$t('storage_usage', {
<Meter
size="tiny"
class="bg-light-200"
containerClass="gap-2 leading-6"
label={$t('storage')}
valueLabel={$t('storage_usage', {
values: {
used: getByteUnitString(usedBytes, $locale),
available: getByteUnitString(availableBytes, $locale),
},
})}
</p>
<div class="mt-4 h-1.75 w-full rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-1.75 rounded-full {usageClasses}" style="width: {usedPercentage}%"></div>
</div>
value={usedBytes / availableBytes}
{thresholds}
/>
{:else}
<div class="mt-2">
<LoadingSpinner />
</div>
<p class="font-medium text-immich-dark-gray dark:text-white mb-4">{$t('storage')}</p>
<LoadingSpinner />
{/if}
</div>

65
web/src/routes/admin/users/[id]/+layout.svelte
View File

@ -23,6 +23,7 @@
Heading,
Icon,
MenuItemType,
Meter,
Stack,
Text,
} from '@immich/ui';
@ -49,30 +50,21 @@
const { children, data }: Props = $props();
const { user, userPreferences, userStatistics, userSessions } = $derived(data);
const TiB = 1024 ** 4;
const usage = $derived(user.quotaUsageInBytes ?? 0);
let [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(usage, usage > TiB ? 2 : 0));
const usedBytes = $derived(user.quotaUsageInBytes ?? 0);
const availableBytes = $derived(user.quotaSizeInBytes ?? 1);
let usedPercentage = $derived(Math.min(Math.round((usedBytes / availableBytes) * 100), 100));
const availableBytes = $derived(user.quotaSizeInBytes ?? 0);
const TiB = 1024 ** 4;
const [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(usedBytes, usedBytes > TiB ? 2 : 0));
let editedLocale = $derived(findLocale($locale).code);
let createAtDate: Date = $derived(new Date(user.createdAt));
let updatedAtDate: Date = $derived(new Date(user.updatedAt));
let userCreatedAtDateAndTime: string = $derived(createDateFormatter(editedLocale).formatDateTime(createAtDate));
let userUpdatedAtDateAndTime: string = $derived(createDateFormatter(editedLocale).formatDateTime(updatedAtDate));
let createAtDate = $derived(new Date(user.createdAt));
let updatedAtDate = $derived(new Date(user.updatedAt));
let userCreatedAtDateAndTime = $derived(createDateFormatter(editedLocale).formatDateTime(createAtDate));
let userUpdatedAtDateAndTime = $derived(createDateFormatter(editedLocale).formatDateTime(updatedAtDate));
const getUsageClass = () => {
if (usedPercentage >= 95) {
return 'bg-red-500';
}
if (usedPercentage > 80) {
return 'bg-yellow-500';
}
return 'bg-primary';
};
const storageUsageThresholds = [
{ from: 0.8, className: 'bg-warning' },
{ from: 0.95, className: 'bg-danger' },
];
const { ResetPassword, ResetPinCode, Update, Delete, Restore } = $derived(getUserAdminActions($t, user));
@ -170,37 +162,26 @@
<AdminCard icon={mdiChartPieOutline} title={$t('storage_quota')}>
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
<Text>
{$t('storage_usage', {
<Meter
size="small"
class="bg-gray-200 dark:bg-gray-700"
containerClass="p-4 gap-4 bg-gray-100 dark:bg-gray-800 rounded-lg leading-6"
label={$t('storage')}
valueLabel={$t('storage_usage', {
values: {
used: getByteUnitString(usedBytes, $locale, 3),
available: getByteUnitString(availableBytes, $locale, 3),
used: getByteUnitString(usedBytes, $locale, 2),
available: getByteUnitString(availableBytes, $locale, 2),
},
})}
</Text>
value={usedBytes / availableBytes}
thresholds={storageUsageThresholds}
/>
{:else}
<Text class="flex items-center gap-1">
<Icon icon={mdiCheckCircle} size="1.25rem" class="text-success" />
{$t('unlimited')}
</Text>
{/if}
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
<div
class="storage-status p-4 mt-4 bg-gray-100 dark:bg-immich-dark-primary/10 rounded-lg text-sm w-full"
title={$t('storage_usage', {
values: {
used: getByteUnitString(usedBytes, $locale, 3),
available: getByteUnitString(availableBytes, $locale, 3),
},
})}
>
<p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
<div class="mt-4 h-1.75 w-full rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-1.75 rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
</div>
</div>
{/if}
</AdminCard>
<AdminCard icon={mdiDevices} title={$t('authorized_devices')}>