github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-03-22 12:19:24 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix comments

Browse Source
This commit is contained in:
Jonathan Jogenfors
2026-02-25 00:39:58 +01:00
parent 6982987f3f
commit 9663eec7ae
14 changed files with 336 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
mobile/openapi/lib/model/library_stats_response_dto.dart generated
View File

@@ -13,16 +13,12 @@ part of openapi.api;
class LibraryStatsResponseDto {
/// Returns a new [LibraryStatsResponseDto] instance.
LibraryStatsResponseDto({
this.offline = 0,
this.photos = 0,
this.total = 0,
this.usage = 0,
this.videos = 0,
});
/// Number of offline assets
int offline;
/// Number of photos
int photos;
@@ -37,7 +33,6 @@ class LibraryStatsResponseDto {
@override
bool operator ==(Object other) => identical(this, other) || other is LibraryStatsResponseDto &&
other.offline == offline &&
other.photos == photos &&
other.total == total &&
other.usage == usage &&
@@ -46,18 +41,16 @@ class LibraryStatsResponseDto {
@override
int get hashCode =>
// ignore: unnecessary_parenthesis
(offline.hashCode) +
(photos.hashCode) +
(total.hashCode) +
(usage.hashCode) +
(videos.hashCode);
@override
String toString() => 'LibraryStatsResponseDto[offline=$offline, photos=$photos, total=$total, usage=$usage, videos=$videos]';
String toString() => 'LibraryStatsResponseDto[photos=$photos, total=$total, usage=$usage, videos=$videos]';
Map<String, dynamic> toJson() {
final json = <String, dynamic>{};
json[r'offline'] = this.offline;
json[r'photos'] = this.photos;
json[r'total'] = this.total;
json[r'usage'] = this.usage;
@@ -74,7 +67,6 @@ class LibraryStatsResponseDto {
final json = value.cast<String, dynamic>();
return LibraryStatsResponseDto(
offline: mapValueOfType<int>(json, r'offline')!,
photos: mapValueOfType<int>(json, r'photos')!,
total: mapValueOfType<int>(json, r'total')!,
usage: mapValueOfType<int>(json, r'usage')!,
@@ -126,7 +118,6 @@ class LibraryStatsResponseDto {
/// The list of required keys that must be present in a JSON.
static const requiredKeys = <String>{
'offline',
'photos',
'total',
'usage',

6
open-api/immich-openapi-specs.json
View File

@@ -18264,11 +18264,6 @@
},
"LibraryStatsResponseDto": {
"properties": {
"offline": {
"default": 0,
"description": "Number of offline assets",
"type": "integer"
},
"photos": {
"default": 0,
"description": "Number of photos",
@@ -18292,7 +18287,6 @@
}
},
"required": [
"offline",
"photos",
"total",
"usage",

2
open-api/typescript-sdk/src/fetch-client.ts
View File

@@ -1323,8 +1323,6 @@ export type UpdateLibraryDto = {
name?: string;
};
export type LibraryStatsResponseDto = {
/** Number of offline assets */
offline: number;
/** Number of photos */
photos: number;
/** Total number of assets */

3
server/src/dtos/library.dto.ts
View File

@@ -136,9 +136,6 @@ export class LibraryStatsResponseDto {
@ApiProperty({ type: 'integer', description: 'Total number of assets' })
total = 0;
@ApiProperty({ type: 'integer', description: 'Number of offline assets' })
offline = 0;
@ApiProperty({ type: 'integer', format: 'int64', description: 'Storage usage in bytes' })
usage = 0;
}

18
server/src/queries/library.repository.sql
View File

@@ -36,37 +36,27 @@ select
(
"asset"."type" = $1
and "asset"."visibility" != $2
and "asset"."isOffline" = $3
)
) as "photos",
count(*) filter (
where
(
"asset"."type" = $4
and "asset"."visibility" != $5
and "asset"."isOffline" = $6
"asset"."type" = $3
and "asset"."visibility" != $4
)
) as "videos",
count(*) filter (
where
(
"asset"."isOffline" = $7
and "asset"."visibility" != $8
)
) as "offline",
coalesce(sum("asset_exif"."fileSizeInByte"), $9) as "usage"
coalesce(sum("asset_exif"."fileSizeInByte"), $5) as "usage"
from
"library"
inner join "asset" on "asset"."libraryId" = "library"."id"
left join "asset_exif" on "asset_exif"."assetId" = "asset"."id"
where
"library"."id" = $10
"library"."id" = $6
group by
"library"."id"
select
0::int as "photos",
0::int as "videos",
0::int as "offline",
0::int as "usage",
0::int as "total"
from

22
server/src/repositories/library.repository.ts
View File

@@ -79,11 +79,7 @@ export class LibraryRepository {
eb.fn
.countAll<number>()
.filterWhere((eb) =>
eb.and([
eb('asset.type', '=', AssetType.Image),
eb('asset.visibility', '!=', AssetVisibility.Hidden),
eb('asset.isOffline', '=', false),
]),
eb.and([eb('asset.type', '=', AssetType.Image), eb('asset.visibility', '!=', AssetVisibility.Hidden)]),
)
.as('photos'),
)
@@ -91,22 +87,10 @@ export class LibraryRepository {
eb.fn
.countAll<number>()
.filterWhere((eb) =>
eb.and([
eb('asset.type', '=', AssetType.Video),
eb('asset.visibility', '!=', AssetVisibility.Hidden),
eb('asset.isOffline', '=', false),
]),
eb.and([eb('asset.type', '=', AssetType.Video), eb('asset.visibility', '!=', AssetVisibility.Hidden)]),
)
.as('videos'),
)
.select((eb) =>
eb.fn
.countAll<number>()
.filterWhere((eb) =>
eb.and([eb('asset.isOffline', '=', true), eb('asset.visibility', '!=', AssetVisibility.Hidden)]),
)
.as('offline'),
)
.select((eb) => eb.fn.coalesce((eb) => eb.fn.sum('asset_exif.fileSizeInByte'), eb.val(0)).as('usage'))
.groupBy('library.id')
.where('library.id', '=', id)
@@ -119,7 +103,6 @@ export class LibraryRepository {
.selectFrom('library')
.select(zero.as('photos'))
.select(zero.as('videos'))
.select(zero.as('offline'))
.select(zero.as('usage'))
.select(zero.as('total'))
.where('library.id', '=', id)
@@ -129,7 +112,6 @@ export class LibraryRepository {
return {
photos: stats.photos,
videos: stats.videos,
offline: stats.offline,
usage: stats.usage,
total: stats.photos + stats.videos,
};

9
server/src/services/library.service.spec.ts
View File

@@ -681,19 +681,12 @@ describe(LibraryService.name, () => {
it('should return library statistics', async () => {
const library = factory.library();
mocks.library.getStatistics.mockResolvedValue({
photos: 10,
videos: 0,
total: 10,
usage: 1337,
offline: 67,
});
mocks.library.getStatistics.mockResolvedValue({ photos: 10, videos: 0, total: 10, usage: 1337 });
await expect(sut.getStatistics(library.id)).resolves.toEqual({
photos: 10,
videos: 0,
total: 10,
usage: 1337,
offline: 67,
});
expect(mocks.library.getStatistics).toHaveBeenCalledWith(library.id);

69
web/src/lib/components/server-statistics/ServerStatisticsCard.svelte
View File

@@ -1,26 +1,28 @@
<script lang="ts">
import { ByteUnit } from '$lib/utils/byte-units';
import { Icon, LoadingSpinner, Text } from '@immich/ui';
import { Icon, Text } from '@immich/ui';
interface ValueData {
value: number;
unit?: ByteUnit | undefined;
}
interface Props {
icon: string;
title: string;
value?: number;
unit?: ByteUnit | undefined;
valuePromise: Promise<ValueData>;
}
let { icon, title, value = undefined, unit = undefined }: Props = $props();
const zeros = $derived(() => {
if (value === undefined) {
return '';
let { icon, title, valuePromise }: Props = $props();
const zeros = (data?: ValueData) => {
let length = 13;
if (data) {
const valueLength = data.value.toString().length;
length = length - valueLength;
}
const maxLength = 13;
const valueLength = value.toString().length;
const zeroLength = maxLength - valueLength;
return '0'.repeat(zeroLength);
});
return '0'.repeat(length);
};
</script>
<div class="flex h-35 w-full flex-col justify-between rounded-3xl bg-subtle text-primary p-5">
@@ -29,14 +31,35 @@
<Text size="giant" fontWeight="medium">{title}</Text>
</div>
<div class="mx-auto font-mono text-2xl font-medium">
{#if value === undefined}
<LoadingSpinner />
{:else}
<span class="text-gray-300 dark:text-gray-600">{zeros()}</span><span>{value}</span>
{#if unit}
<code class="font-mono text-base font-normal">{unit}</code>
{/if}
{/if}
</div>
{#await valuePromise}
<div class="mx-auto font-mono text-2xl font-medium relative">
<span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros()}</span>
</div>
{:then data}
<div class="mx-auto font-mono text-2xl font-medium relative">
<span class="text-gray-300 dark:text-gray-600">{zeros(data)}</span><span>{data.value}</span>
{#if data.unit}<code class="font-mono text-base font-normal">{data.unit}</code>{/if}
</div>
{:catch _}
<div class="mx-auto font-mono text-2xl font-medium relative">
<span class="text-gray-300 dark:text-gray-600">{zeros()}</span>
</div>
{/await}
</div>
<style>
.shimmer-text {
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 1) 100%);
mask-size: 200% 100%;
animation: shimmer 2.25s infinite linear;
}
@keyframes shimmer {
from {
mask-position: 200% 0;
}
to {
mask-position: -200% 0;
}
}
</style>

187
web/src/lib/components/server-statistics/ServerStatisticsPanel.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import StatsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
import { locale } from '$lib/stores/preferences.store';
import { getBytesWithUnit } from '$lib/utils/byte-units';
import type { ServerStatsResponseDto } from '@immich/sdk';
import type { ServerStatsResponseDto, UserAdminResponseDto } from '@immich/sdk';
import {
Code,
FormatBytes,
@@ -19,10 +19,28 @@
import { t } from 'svelte-i18n';
type Props = {
stats: ServerStatsResponseDto;
statsPromise: Promise<ServerStatsResponseDto>;
users: UserAdminResponseDto[];
};
const { stats }: Props = $props();
const { statsPromise, users }: Props = $props();
const photosPromise = $derived.by(() => statsPromise.then((data) => ({ value: data.photos })));
const videosPromise = $derived.by(() => statsPromise.then((data) => ({ value: data.videos })));
const storagePromise = $derived.by(() =>
statsPromise.then((data) => {
const TiB = 1024 ** 4;
const [value, unit] = getBytesWithUnit(data.usage, data.usage > TiB ? 2 : 0);
return { value, unit };
}),
);
const getStorageUsageWithUnit = (usage: number) => {
const TiB = 1024 ** 4;
return getBytesWithUnit(usage, usage > TiB ? 2 : 0);
};
const zeros = (value: number, maxLength = 13) => {
const valueLength = value.toString().length;
@@ -31,18 +49,25 @@
return '0'.repeat(zeroLength);
};
const TiB = 1024 ** 4;
let [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(stats.usage, stats.usage > TiB ? 2 : 0));
const getUserStatsPromise = (userId: string) => {
return statsPromise.then((stats) => stats.usageByUser.find((userStats) => userStats.userId === userId));
};
</script>
{#snippet placeholder()}
<TableCell class="w-1/4"><span class="skeleton-loader inline-block h-4 w-16"></span></TableCell>
<TableCell class="w-1/4"><span class="skeleton-loader inline-block h-4 w-16"></span></TableCell>
<TableCell class="w-1/4"><span class="skeleton-loader inline-block h-4 w-24"></span></TableCell>
{/snippet}
<div class="flex flex-col gap-5 my-4">
<div>
<Text class="mb-2" fontWeight="medium">{$t('total_usage')}</Text>
<div class="hidden justify-between lg:flex gap-4">
<StatsCard icon={mdiCameraIris} title={$t('photos')} value={stats.photos} />
<StatsCard icon={mdiPlayCircle} title={$t('videos')} value={stats.videos} />
<StatsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
<ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} valuePromise={photosPromise} />
<ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} valuePromise={videosPromise} />
<ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} valuePromise={storagePromise} />
</div>
<div class="mt-5 flex lg:hidden">
@@ -54,7 +79,13 @@
</div>
<div class="relative text-center font-mono text-2xl font-medium">
<span class="text-light-300">{zeros(stats.photos)}</span><span class="text-primary">{stats.photos}</span>
{#await statsPromise}
<span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
{:then stats}
<span class="text-light-300">{zeros(stats.photos)}</span><span class="text-primary">{stats.photos}</span>
{:catch}
<span class="text-gray-300 dark:text-gray-600">{zeros(0)}</span>
{/await}
</div>
</div>
<div class="flex flex-wrap gap-x-12">
@@ -64,7 +95,13 @@
</div>
<div class="relative text-center font-mono text-2xl font-medium">
<span class="text-light-300">{zeros(stats.videos)}</span><span class="text-primary">{stats.videos}</span>
{#await statsPromise}
<span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
{:then stats}
<span class="text-light-300">{zeros(stats.videos)}</span><span class="text-primary">{stats.videos}</span>
{:catch}
<span class="text-gray-300 dark:text-gray-600">{zeros(0)}</span>
{/await}
</div>
</div>
<div class="flex flex-wrap gap-x-5">
@@ -74,11 +111,20 @@
</div>
<div class="relative flex text-center font-mono text-2xl font-medium">
<span class="text-light-300">{zeros(statsUsage)}</span><span class="text-primary">{statsUsage}</span>
{#await statsPromise}
<span class="text-gray-300 dark:text-gray-600 shimmer-text">{zeros(0)}</span>
{:then stats}
{@const storageUsageWithUnit = getStorageUsageWithUnit(stats.usage)}
<span class="text-light-300">{zeros(storageUsageWithUnit[0])}</span><span class="text-primary"
>{storageUsageWithUnit[0]}</span
>
<div class="absolute -end-1.5 -bottom-4">
<Code color="muted" class="text-xs font-light font-mono">{statsUsageUnit}</Code>
</div>
<div class="absolute -end-1.5 -bottom-4">
<Code color="muted" class="text-xs font-light font-mono">{storageUsageWithUnit[1]}</Code>
</div>
{:catch}
<span class="text-gray-300 dark:text-gray-600">{zeros(0)}</span>
{/await}
</div>
</div>
</div>
@@ -95,34 +141,99 @@
<TableHeading class="w-1/4">{$t('usage')}</TableHeading>
</TableHeader>
<TableBody class="block max-h-80 overflow-y-auto">
{#each stats.usageByUser as user (user.userId)}
{#each users as user (user.id)}
<TableRow>
<TableCell class="w-1/4">{user.userName}</TableCell>
<TableCell class="w-1/4">
{user.photos.toLocaleString($locale)} (<FormatBytes bytes={user.usagePhotos} />)</TableCell
>
<TableCell class="w-1/4">
{user.videos.toLocaleString($locale)} (<FormatBytes bytes={user.usageVideos} precision={0} />)</TableCell
>
<TableCell class="w-1/4">
<FormatBytes bytes={user.usage} precision={0} />
{#if user.quotaSizeInBytes !== null}
/ <FormatBytes bytes={user.quotaSizeInBytes} precision={0} />
<TableCell class="w-1/4">{user.name}</TableCell>
{#await getUserStatsPromise(user.id)}
{@render placeholder()}
{:then userStats}
{#if userStats}
<TableCell class="w-1/4">
{userStats.photos.toLocaleString($locale)} (<FormatBytes bytes={userStats.usagePhotos} />)</TableCell
>
<TableCell class="w-1/4">
{userStats.videos.toLocaleString($locale)} (<FormatBytes
bytes={userStats.usageVideos}
precision={0}
/>)</TableCell
>
<TableCell class="w-1/4">
<FormatBytes bytes={userStats.usage} precision={0} />
{#if userStats.quotaSizeInBytes !== null}
/ <FormatBytes bytes={userStats.quotaSizeInBytes} precision={0} />
{/if}
<span class="text-primary">
{#if userStats.quotaSizeInBytes !== null && userStats.quotaSizeInBytes >= 0}
({(userStats.quotaSizeInBytes === 0
? 1
: userStats.usage / userStats.quotaSizeInBytes
).toLocaleString($locale, {
style: 'percent',
maximumFractionDigits: 0,
})})
{:else}
({$t('unlimited')})
{/if}
</span>
</TableCell>
{:else}
{@render placeholder()}
{/if}
<span class="text-primary">
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
({(user.quotaSizeInBytes === 0 ? 1 : user.usage / user.quotaSizeInBytes).toLocaleString($locale, {
style: 'percent',
maximumFractionDigits: 0,
})})
{:else}
({$t('unlimited')})
{/if}
</span>
</TableCell>
{:catch}
{@render placeholder()}
{/await}
</TableRow>
{/each}
</TableBody>
</Table>
</div>
</div>
<style>
.skeleton-loader {
position: relative;
border-radius: 4px;
overflow: hidden;
background-color: rgba(156, 163, 175, 0.35);
}
.skeleton-loader::after {
content: '';
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0)
);
background-size: 200% 100%;
background-position: 200% 0;
animation: skeleton-animation 2000ms infinite;
}
@keyframes skeleton-animation {
from {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
.shimmer-text {
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 1) 100%);
mask-size: 200% 100%;
animation: shimmer 2.25s infinite linear;
}
@keyframes shimmer {
from {
mask-position: 200% 0;
}
to {
mask-position: -200% 0;
}
}
</style>

128
web/src/routes/admin/library-management/(list)/+layout.svelte
View File

@@ -7,13 +7,18 @@
import { getLibrariesActions, getLibraryActions } from '$lib/services/library.service';
import { locale } from '$lib/stores/preferences.store';
import { getBytesWithUnit } from '$lib/utils/byte-units';
import { getLibrary, getLibraryStatistics, type LibraryResponseDto, type LibraryStatsResponseDto } from '@immich/sdk';
import {
getLibrary,
getLibraryStatistics,
type LibraryResponseDto,
type LibraryStatsResponseDto,
type UserAdminResponseDto,
} from '@immich/sdk';
import {
CommandPaletteDefaultProvider,
Container,
ContextMenuButton,
Link,
LoadingSpinner,
MenuItemType,
Table,
TableBody,
@@ -32,37 +37,36 @@
data: LayoutData;
};
let { children, data }: Props = $props();
const props: Props = $props();
let libraries = $state(data.libraries);
let libraries = $state<LibraryResponseDto[]>([]);
let statistics = $state<Record<string, LibraryStatsResponseDto>>({});
let owners = $state(data.owners);
const loadStatistics = async () => {
try {
statistics = await data.statisticsPromise;
} catch (error) {
console.error('Failed to load library statistics:', error);
}
};
let owners = $state<Record<string, UserAdminResponseDto>>({});
$effect(() => {
void loadStatistics();
libraries = [...props.data.libraries];
owners = { ...props.data.owners };
});
const onLibraryCreate = async (library: LibraryResponseDto) => {
await goto(Route.viewLibrary(library));
const onLibraryCreate = (library: LibraryResponseDto) => {
void goto(Route.viewLibrary(library));
};
const onLibraryUpdate = async (library: LibraryResponseDto) => {
const onLibraryUpdate = (library: LibraryResponseDto) => {
const index = libraries.findIndex(({ id }) => id === library.id);
if (index === -1) {
return;
}
libraries[index] = await getLibrary({ id: library.id });
statistics[library.id] = await getLibraryStatistics({ id: library.id });
void Promise.all([getLibrary({ id: library.id }), getLibraryStatistics({ id: library.id })])
.then(([updatedLibrary, updatedStats]) => {
libraries[index] = updatedLibrary;
statistics[library.id] = updatedStats;
})
.catch((error) => {
console.error(`Failed to refresh library after update: ${error}`);
});
};
const onLibraryDelete = ({ id }: { id: string }) => {
@@ -92,7 +96,7 @@
<CommandPaletteDefaultProvider name={$t('library')} actions={[Create, ScanAll]} />
<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]} actions={[ScanAll, Create]}>
<AdminPageLayout breadcrumbs={[{ title: props.data.meta.title }]} actions={[ScanAll, Create]}>
<Container size="large" center class="my-4">
<div class="flex flex-col items-center gap-2" in:fade={{ duration: 500 }}>
{#if libraries.length > 0}
@@ -107,7 +111,6 @@
</TableHeader>
<TableBody>
{#each libraries as library (library.id + library.name)}
{@const stats = statistics[library.id]}
{@const owner = owners[library.id]}
<TableRow>
<TableCell class={classes.column1}>
@@ -116,29 +119,40 @@
<TableCell class={classes.column2}>
<Link href={Route.viewUser(owner)}>{owner.name}</Link>
</TableCell>
<TableCell class={classes.column3}>
{#if stats}
{#await props.data.statisticsPromise}
<TableCell class={classes.column3}>
<span class="skeleton-loader inline-block h-4 w-14"></span>
</TableCell>
<TableCell class={classes.column4}>
<span class="skeleton-loader inline-block h-4 w-14"></span>
</TableCell>
<TableCell class={classes.column5}>
<span class="skeleton-loader inline-block h-4 w-20"></span>
</TableCell>
{:then loadedStats}
{@const stats = statistics[library.id] || loadedStats[library.id]}
<TableCell class={classes.column3}>
{stats.photos.toLocaleString($locale)}
{:else}
<LoadingSpinner />
{/if}
</TableCell>
<TableCell class={classes.column4}>
{#if stats}
</TableCell>
<TableCell class={classes.column4}>
{stats.videos.toLocaleString($locale)}
{:else}
<LoadingSpinner />
{/if}
</TableCell>
<TableCell class={classes.column5}>
{#if stats}
</TableCell>
<TableCell class={classes.column5}>
{@const [diskUsage, diskUsageUnit] = getBytesWithUnit(stats.usage, 0)}
{diskUsage}
{diskUsageUnit}
{:else}
<LoadingSpinner />
{/if}
</TableCell>
</TableCell>
{:catch}
<TableCell class={classes.column3}>
<span class="skeleton-loader inline-block h-4 w-14"></span>
</TableCell>
<TableCell class={classes.column4}>
<span class="skeleton-loader inline-block h-4 w-14"></span>
</TableCell>
<TableCell class={classes.column5}>
<span class="skeleton-loader inline-block h-4 w-20"></span>
</TableCell>
{/await}
<TableCell class={classes.column6}>
<ContextMenuButton color="primary" aria-label={$t('open')} items={getActionsForLibrary(library)} />
</TableCell>
@@ -155,7 +169,41 @@
/>
{/if}
{@render children?.()}
{@render props.children?.()}
</div>
</Container>
</AdminPageLayout>
<style>
.skeleton-loader {
position: relative;
border-radius: 4px;
overflow: hidden;
background-color: rgba(156, 163, 175, 0.35);
}
.skeleton-loader::after {
content: '';
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0)
);
background-size: 200% 100%;
background-position: 200% 0;
animation: skeleton-animation 2000ms infinite;
}
@keyframes skeleton-animation {
from {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
</style>

66
web/src/routes/admin/library-management/[id]/+layout.svelte
View File

@@ -14,19 +14,11 @@
getLibraryExclusionPatternActions,
getLibraryFolderActions,
} from '$lib/services/library.service';
import type { ByteUnit } from '$lib/utils/byte-units';
import { getBytesWithUnit } from '$lib/utils/byte-units';
import type { LibraryResponseDto, LibraryStatsResponseDto } from '@immich/sdk';
import type { LibraryResponseDto } from '@immich/sdk';
import { Code, CommandPaletteDefaultProvider, Container, Heading, modalManager } from '@immich/ui';
import {
mdiCameraIris,
mdiChartPie,
mdiFileDocumentRemoveOutline,
mdiFilterMinusOutline,
mdiFolderOutline,
mdiPlayCircle,
} from '@mdi/js';
import { mdiCameraIris, mdiChartPie, mdiFilterMinusOutline, mdiFolderOutline, mdiPlayCircle } from '@mdi/js';
import type { Snippet } from 'svelte';
import { t } from 'svelte-i18n';
import type { LayoutData } from './$types';
@@ -36,46 +28,32 @@
data: LayoutData;
};
const { children, data }: Props = $props();
let { children, data }: Props = $props();
const statisticsPromise = $derived.by(() => data.statisticsPromise);
let statistics = $state<LibraryStatsResponseDto | undefined>(undefined);
let storageUsage = $state<number | undefined>(undefined);
let unit = $state<ByteUnit | undefined>(undefined);
const photosPromise = $derived.by(() => statisticsPromise.then((stats) => ({ value: stats.photos })));
$effect(() => {
if (statistics) {
const [usage, u] = getBytesWithUnit(statistics.usage);
storageUsage = usage;
unit = u;
} else {
storageUsage = undefined;
unit = undefined;
}
});
const videosPromise = $derived.by(() => statisticsPromise.then((stats) => ({ value: stats.videos })));
const loadStatistics = async () => {
try {
statistics = await data.statisticsPromise;
} catch (error) {
console.error('Failed to load statistics:', error);
}
};
const usagePromise = $derived.by(() =>
statisticsPromise.then((stats) => {
const [value, unit] = getBytesWithUnit(stats.usage);
return { value, unit };
}),
);
$effect(() => {
void loadStatistics();
});
let library = $state(data.library);
let updatedLibrary = $state<LibraryResponseDto | undefined>(undefined);
const library = $derived.by(() => (updatedLibrary?.id === data.library.id ? updatedLibrary : data.library));
const onLibraryUpdate = (newLibrary: LibraryResponseDto) => {
if (newLibrary.id === library.id) {
library = newLibrary;
updatedLibrary = newLibrary;
}
};
const onLibraryDelete = async ({ id }: { id: string }) => {
const onLibraryDelete = ({ id }: { id: string }) => {
if (id === library.id) {
await goto(Route.libraries());
void goto(Route.libraries());
}
};
@@ -94,9 +72,9 @@
<div class="grid gap-4 grid-cols-1 lg:grid-cols-2 w-full">
<Heading tag="h1" size="large" class="col-span-full my-4">{library.name}</Heading>
<div class="flex flex-col lg:flex-row gap-4 col-span-full">
<ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} value={statistics?.photos} />
<ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={statistics?.videos} />
<ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} value={storageUsage} {unit} />
<ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} valuePromise={photosPromise} />
<ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} valuePromise={videosPromise} />
<ServerStatisticsCard icon={mdiChartPie} title={$t('usage')} valuePromise={usagePromise} />
</div>
<AdminCard icon={mdiFolderOutline} title={$t('folders')} headerAction={AddFolder}>
@@ -145,10 +123,6 @@
</tbody>
</table>
</AdminCard>
<div class="flex flex-col lg:flex-row gap-4">
<ServerStatisticsCard icon={mdiFileDocumentRemoveOutline} title={$t('offline')} value={statistics?.offline} />
</div>
</div>
{@render children?.()}
</Container>

20
web/src/routes/admin/server-status/+page.svelte
View File

@@ -2,7 +2,7 @@
import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
import ServerStatisticsPanel from '$lib/components/server-statistics/ServerStatisticsPanel.svelte';
import { getServerStatistics, type ServerStatsResponseDto } from '@immich/sdk';
import { Container, LoadingSpinner } from '@immich/ui';
import { Container } from '@immich/ui';
import { onMount } from 'svelte';
import type { PageData } from './$types';
@@ -14,20 +14,18 @@
let stats = $state<ServerStatsResponseDto | undefined>(undefined);
const loadStatistics = async () => {
try {
stats = await data.statsPromise;
} catch (error) {
console.error('Failed to load server statistics:', error);
const statsPromise = $derived.by(() => {
if (stats) {
return Promise.resolve(stats);
}
};
return data.statsPromise;
});
const updateStatistics = async () => {
stats = await getServerStatistics();
};
onMount(() => {
void loadStatistics();
const interval = setInterval(() => void updateStatistics(), 5000);
return () => clearInterval(interval);
@@ -36,10 +34,6 @@
<AdminPageLayout breadcrumbs={[{ title: data.meta.title }]}>
<Container size="large" center>
{#if stats}
<ServerStatisticsPanel {stats} />
{:else}
<LoadingSpinner />
{/if}
<ServerStatisticsPanel {statsPromise} users={data.users} />
</Container>
</AdminPageLayout>

4
web/src/routes/admin/server-status/+page.ts
View File

@@ -1,15 +1,17 @@
import { authenticate } from '$lib/utils/auth';
import { getFormatter } from '$lib/utils/i18n';
import { getServerStatistics } from '@immich/sdk';
import { getServerStatistics, searchUsersAdmin } from '@immich/sdk';
import type { PageLoad } from './$types';
export const load = (async ({ url }) => {
await authenticate(url, { admin: true });
const statsPromise = getServerStatistics();
const users = await searchUsersAdmin({ withDeleted: false });
const $t = await getFormatter();
return {
statsPromise,
users,
meta: {
title: $t('server_stats'),
},

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

@@ -123,9 +123,21 @@
</div>
<div class="col-span-full">
<div class="flex flex-col lg:flex-row gap-4 w-full">
<ServerStatisticsCard icon={mdiCameraIris} title={$t('photos')} value={userStatistics.images} />
<ServerStatisticsCard icon={mdiPlayCircle} title={$t('videos')} value={userStatistics.videos} />
<ServerStatisticsCard icon={mdiChartPie} title={$t('storage')} value={statsUsage} unit={statsUsageUnit} />
<ServerStatisticsCard
icon={mdiCameraIris}
title={$t('photos')}
valuePromise={Promise.resolve({ value: userStatistics.images })}
/>
<ServerStatisticsCard
icon={mdiPlayCircle}
title={$t('videos')}
valuePromise={Promise.resolve({ value: userStatistics.videos })}
/>
<ServerStatisticsCard
icon={mdiChartPie}
title={$t('storage')}
valuePromise={Promise.resolve({ value: statsUsage, unit: statsUsageUnit })}
/>
</div>
</div>