feat(web) add asset count stats on admin page (#843)

2025-10-29 17:40:28 +00:00 · 2022-10-23 16:54:54 -05:00
parent 2c189d5c78
commit a6eea4d096
40 changed files with 1156 additions and 90 deletions
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -1157,6 +1157,49 @@ export interface ServerPingResponse {
     */
    'res': string;
 }
+/**
+ * 
+ * @export
+ * @interface ServerStatsResponseDto
+ */
+export interface ServerStatsResponseDto {
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerStatsResponseDto
+     */
+    'photos': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerStatsResponseDto
+     */
+    'videos': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerStatsResponseDto
+     */
+    'objects': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof ServerStatsResponseDto
+     */
+    'usageRaw': number;
+    /**
+     * 
+     * @type {string}
+     * @memberof ServerStatsResponseDto
+     */
+    'usage': string;
+    /**
+     * 
+     * @type {Array<UsageByUserDto>}
+     * @memberof ServerStatsResponseDto
+     */
+    'usageByUser': Array<UsageByUserDto>;
+}
 /**
 * 
 * @export
@@ -1365,6 +1408,49 @@ export interface UpdateUserDto {
     */
    'profileImagePath'?: string;
 }
+/**
+ * 
+ * @export
+ * @interface UsageByUserDto
+ */
+export interface UsageByUserDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof UsageByUserDto
+     */
+    'userId': string;
+    /**
+     * 
+     * @type {number}
+     * @memberof UsageByUserDto
+     */
+    'objects': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof UsageByUserDto
+     */
+    'videos': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof UsageByUserDto
+     */
+    'photos': number;
+    /**
+     * 
+     * @type {number}
+     * @memberof UsageByUserDto
+     */
+    'usageRaw': number;
+    /**
+     * 
+     * @type {string}
+     * @memberof UsageByUserDto
+     */
+    'usage': string;
+}
 /**
 * 
 * @export
@@ -4132,6 +4218,35 @@ export const ServerInfoApiAxiosParamCreator = function (configuration?: Configur


    
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getStats: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            const localVarPath = `/server-info/stats`;
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+
+    
            setSearchParams(localVarUrlObj, localVarQueryParameter);
            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
@@ -4198,6 +4313,15 @@ export const ServerInfoApiFp = function(configuration?: Configuration) {
            const localVarAxiosArgs = await localVarAxiosParamCreator.getServerVersion(options);
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async getStats(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<ServerStatsResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.getStats(options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
        /**
         * 
         * @param {*} [options] Override http request option.
@@ -4233,6 +4357,14 @@ export const ServerInfoApiFactory = function (configuration?: Configuration, bas
        getServerVersion(options?: any): AxiosPromise<ServerVersionReponseDto> {
            return localVarFp.getServerVersion(options).then((request) => request(axios, basePath));
        },
+        /**
+         * 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        getStats(options?: any): AxiosPromise<ServerStatsResponseDto> {
+            return localVarFp.getStats(options).then((request) => request(axios, basePath));
+        },
        /**
         * 
         * @param {*} [options] Override http request option.
@@ -4271,6 +4403,16 @@ export class ServerInfoApi extends BaseAPI {
        return ServerInfoApiFp(this.configuration).getServerVersion(options).then((request) => request(this.axios, this.basePath));
    }

+    /**
+     * 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof ServerInfoApi
+     */
+    public getStats(options?: AxiosRequestConfig) {
+        return ServerInfoApiFp(this.configuration).getStats(options).then((request) => request(this.axios, this.basePath));
+    }
+
    /**
     * 
     * @param {*} [options] Override http request option.
--- a/web/src/lib/components/admin-page/server-stats.svelte
+++ b/web/src/lib/components/admin-page/server-stats.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { ServerStatsResponseDto, UserResponseDto } from '@api';
+	export let stats: ServerStatsResponseDto;
+	export let allUsers: Array<UserResponseDto>;
+
+	const getFullName = (userId: string) => {
+		let name = 'Admin'; // since we do not have admin user in allUsers
+		allUsers.forEach((user) => {
+			if (user.id === userId) name = `${user.firstName} ${user.lastName}`;
+		});
+		return name;
+	};
+</script>
+
+<div class="flex flex-col gap-6">
+	<div class="border p-6 rounded-2xl bg-white text-center">
+		<h1 class="font-medium text-immich-primary">Server Usage</h1>
+		<div class="flex flex-row gap-6 mt-4 font-medium">
+			<p class="grow">Photos: {stats.photos}</p>
+			<p class="grow">Videos: {stats.videos}</p>
+			<p class="grow">Objects: {stats.objects}</p>
+			<p class="grow">Size: {stats.usage}</p>
+		</div>
+	</div>
+
+	<div class="border p-6 rounded-2xl bg-white">
+		<h1 class="font-medium text-immich-primary">Usage by User</h1>
+		<table class="text-left w-full mt-4">
+			<!-- table header -->
+			<thead class="border rounded-md mb-2 bg-gray-50 flex text-immich-primary w-full h-12">
+				<tr class="flex w-full place-items-center">
+					<th class="text-center w-1/5 font-medium text-sm">User</th>
+					<th class="text-center w-1/5 font-medium text-sm">Photos</th>
+					<th class="text-center w-1/5 font-medium text-sm">Videos</th>
+					<th class="text-center w-1/5 font-medium text-sm">Objects</th>
+					<th class="text-center w-1/5 font-medium text-sm">Size</th>
+				</tr>
+			</thead>
+			<tbody class="overflow-y-auto rounded-md w-full max-h-[320px] block border">
+				{#each stats.usageByUser as user}
+					<tr class="text-center flex place-items-center w-full h-[40px]">
+						<td class="text-sm px-2 w-1/5 text-ellipsis">{getFullName(user.userId)}</td>
+						<td class="text-sm px-2 w-1/5 text-ellipsis">{user.photos}</td>
+						<td class="text-sm px-2 w-1/5 text-ellipsis">{user.videos}</td>
+						<td class="text-sm px-2 w-1/5 text-ellipsis">{user.objects}</td>
+						<td class="text-sm px-2 w-1/5 text-ellipsis">{user.usage}</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+</div>
--- a/web/src/lib/models/admin-sidebar-selection.ts
+++ b/web/src/lib/models/admin-sidebar-selection.ts
@@ -1,7 +1,8 @@
 export enum AdminSideBarSelection {
 	USER_MANAGEMENT = 'User management',
 	JOBS = 'Jobs',
-	SETTINGS = 'Settings'
+	SETTINGS = 'Settings',
+	STATS = 'Server Stats'
 }

 export enum AppSideBarSelection {
--- a/web/src/routes/admin/+page.server.ts
+++ b/web/src/routes/admin/+page.server.ts
@@ -12,8 +12,10 @@ export const load: PageServerLoad = async ({ parent }) => {
 	}

 	const { data: allUsers } = await serverApi.userApi.getAllUsers(false);
+	const { data: stats } = await serverApi.serverInfoApi.getStats();
 	return {
 		user: user,
-		allUsers: allUsers
+		allUsers: allUsers,
+		stats: stats
 	};
 };
--- a/web/src/routes/admin/+page.svelte
+++ b/web/src/routes/admin/+page.svelte
@@ -5,6 +5,7 @@
 	import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
 	import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
 	import Cog from 'svelte-material-icons/Cog.svelte';
+	import Server from 'svelte-material-icons/Server.svelte';
 	import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
 	import UserManagement from '$lib/components/admin-page/user-management.svelte';
 	import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
@@ -14,6 +15,7 @@
 	import type { PageData } from './$types';
 	import { api, UserResponseDto } from '@api';
 	import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
+	import ServerStats from '$lib/components/admin-page/server-stats.svelte';

 	let selectedAction: AdminSideBarSelection = AdminSideBarSelection.USER_MANAGEMENT;

@@ -121,6 +123,13 @@
 			isSelected={selectedAction === AdminSideBarSelection.JOBS}
 			on:selected={onButtonClicked}
 		/>
+		<SideBarButton
+			title="Server Stats"
+			logo={Server}
+			actionType={AdminSideBarSelection.STATS}
+			isSelected={selectedAction === AdminSideBarSelection.STATS}
+			on:selected={onButtonClicked}
+		/>

 		<div class="mb-6 mt-auto">
 			<StatusBox />
@@ -144,6 +153,9 @@
 				{#if selectedAction === AdminSideBarSelection.JOBS}
 					<JobsPanel />
 				{/if}
+				{#if selectedAction === AdminSideBarSelection.STATS}
+					<ServerStats stats={data.stats} allUsers={data.allUsers} />
+				{/if}
 			</section>
 		</section>
 	</section>