KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(server,web): system config for admin (#959)

Browse Source 
* feat: add admin config module for user configured config, uses it for ffmpeg

* feat: add api endpoint to retrieve admin config settings and values

* feat: add settings panel to admin page on web (wip)

* feat: add api endpoint to update the admin config

* chore: re-generate openapi spec after rebase

* refactor: move from admin config to system config naming

* chore: move away from UseGuards to new @Authenticated decorator

* style: dark mode styling for lists and fix conflicting colors

* wip: 2 column design, no edit button

* refactor: system config

* chore: generate open api

* chore: rm broken test

* chore: cleanup types

* refactor: config module names

Co-authored-by: Zack Pollard <zackpollard@ymail.com>
Co-authored-by: Zack Pollard <zack.pollard@moonpig.com>
This commit is contained in:
Jason Rasmussen
2022-11-14 23:39:32 -05:00
committed by GitHub
parent d3c35ec9c5
commit b5d75e2016
52 changed files with 2062 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/api/api.ts
View File

@@ -8,6 +8,7 @@ import {
JobApi,
OAuthApi,
ServerInfoApi,
SystemConfigApi,
UserApi
} from './open-api';
@@ -20,6 +21,7 @@ class ImmichApi {
public deviceInfoApi: DeviceInfoApi;
public serverInfoApi: ServerInfoApi;
public jobApi: JobApi;
public systemConfigApi: SystemConfigApi;
private config = new Configuration({ basePath: '/api' });
@@ -32,6 +34,7 @@ class ImmichApi {
this.deviceInfoApi = new DeviceInfoApi(this.config);
this.serverInfoApi = new ServerInfoApi(this.config);
this.jobApi = new JobApi(this.config);
this.systemConfigApi = new SystemConfigApi(this.config);
}
public setAccessToken(accessToken: string) {

228
web/src/api/open-api/api.ts
View File

@@ -1407,6 +1407,67 @@ export interface SmartInfoResponseDto {
* @enum {string}
*/
export const SystemConfigKey = {
Crf: 'ffmpeg_crf',
Preset: 'ffmpeg_preset',
TargetVideoCodec: 'ffmpeg_target_video_codec',
TargetAudioCodec: 'ffmpeg_target_audio_codec',
TargetScaling: 'ffmpeg_target_scaling'
} as const;
export type SystemConfigKey = typeof SystemConfigKey[keyof typeof SystemConfigKey];
/**
*
* @export
* @interface SystemConfigResponseDto
*/
export interface SystemConfigResponseDto {
/**
*
* @type {Array<SystemConfigResponseItem>}
* @memberof SystemConfigResponseDto
*/
'config': Array<SystemConfigResponseItem>;
}
/**
*
* @export
* @interface SystemConfigResponseItem
*/
export interface SystemConfigResponseItem {
/**
*
* @type {string}
* @memberof SystemConfigResponseItem
*/
'name': string;
/**
*
* @type {SystemConfigKey}
* @memberof SystemConfigResponseItem
*/
'key': SystemConfigKey;
/**
*
* @type {string}
* @memberof SystemConfigResponseItem
*/
'value': string;
/**
*
* @type {string}
* @memberof SystemConfigResponseItem
*/
'defaultValue': string;
}
/**
*
* @export
* @enum {string}
*/
export const ThumbnailFormat = {
Jpeg: 'JPEG',
Webp: 'WEBP'
@@ -4946,6 +5007,173 @@ export class ServerInfoApi extends BaseAPI {
}
/**
* SystemConfigApi - axios parameter creator
* @export
*/
export const SystemConfigApiAxiosParamCreator = function (configuration?: Configuration) {
return {
/**
*
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
getConfig: async (options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
const localVarPath = `/system-config`;
// 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;
// authentication bearer required
// http bearer authentication required
await setBearerAuthToObject(localVarHeaderParameter, configuration)
setSearchParams(localVarUrlObj, localVarQueryParameter);
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
return {
url: toPathString(localVarUrlObj),
options: localVarRequestOptions,
};
},
/**
*
* @param {object} body
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
updateConfig: async (body: object, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
// verify required parameter 'body' is not null or undefined
assertParamExists('updateConfig', 'body', body)
const localVarPath = `/system-config`;
// 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: 'PUT', ...baseOptions, ...options};
const localVarHeaderParameter = {} as any;
const localVarQueryParameter = {} as any;
// authentication bearer required
// http bearer authentication required
await setBearerAuthToObject(localVarHeaderParameter, configuration)
localVarHeaderParameter['Content-Type'] = 'application/json';
setSearchParams(localVarUrlObj, localVarQueryParameter);
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
localVarRequestOptions.data = serializeDataIfNeeded(body, localVarRequestOptions, configuration)
return {
url: toPathString(localVarUrlObj),
options: localVarRequestOptions,
};
},
}
};
/**
* SystemConfigApi - functional programming interface
* @export
*/
export const SystemConfigApiFp = function(configuration?: Configuration) {
const localVarAxiosParamCreator = SystemConfigApiAxiosParamCreator(configuration)
return {
/**
*
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async getConfig(options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SystemConfigResponseDto>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.getConfig(options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
/**
*
* @param {object} body
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
async updateConfig(body: object, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<SystemConfigResponseDto>> {
const localVarAxiosArgs = await localVarAxiosParamCreator.updateConfig(body, options);
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
},
}
};
/**
* SystemConfigApi - factory interface
* @export
*/
export const SystemConfigApiFactory = function (configuration?: Configuration, basePath?: string, axios?: AxiosInstance) {
const localVarFp = SystemConfigApiFp(configuration)
return {
/**
*
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
getConfig(options?: any): AxiosPromise<SystemConfigResponseDto> {
return localVarFp.getConfig(options).then((request) => request(axios, basePath));
},
/**
*
* @param {object} body
* @param {*} [options] Override http request option.
* @throws {RequiredError}
*/
updateConfig(body: object, options?: any): AxiosPromise<SystemConfigResponseDto> {
return localVarFp.updateConfig(body, options).then((request) => request(axios, basePath));
},
};
};
/**
* SystemConfigApi - object-oriented interface
* @export
* @class SystemConfigApi
* @extends {BaseAPI}
*/
export class SystemConfigApi extends BaseAPI {
/**
*
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof SystemConfigApi
*/
public getConfig(options?: AxiosRequestConfig) {
return SystemConfigApiFp(this.configuration).getConfig(options).then((request) => request(this.axios, this.basePath));
}
/**
*
* @param {object} body
* @param {*} [options] Override http request option.
* @throws {RequiredError}
* @memberof SystemConfigApi
*/
public updateConfig(body: object, options?: AxiosRequestConfig) {
return SystemConfigApiFp(this.configuration).updateConfig(body, options).then((request) => request(this.axios, this.basePath));
}
}
/**
* UserApi - axios parameter creator
* @export

2
web/src/app.css
View File

@@ -59,7 +59,7 @@ input:focus-visible {
@layer utilities {
.immich-form-input {
@apply bg-slate-100 p-2 rounded-md dark:text-immich-dark-bg focus:border-immich-primary text-sm;
@apply bg-slate-100 p-2 rounded-md dark:text-immich-dark-bg focus:border-immich-primary text-sm dark:bg-gray-600 dark:text-immich-dark-fg;
}
.immich-form-label {

97
web/src/lib/components/admin-page/settings/settings-panel.svelte Normal file
View File

@@ -0,0 +1,97 @@
<script lang="ts">
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import {
notificationController,
NotificationType
} from '$lib/components/shared-components/notification/notification';
import { api, SystemConfigResponseItem } from '@api';
import { onMount } from 'svelte';
let isSaving = false;
let items: Array<SystemConfigResponseItem & { originalValue: string }> = [];
const refreshConfig = async () => {
const { data: systemConfig } = await api.systemConfigApi.getConfig();
items = systemConfig.config.map((item) => ({ ...item, originalValue: item.value }));
};
onMount(() => refreshConfig());
const handleSave = async () => {
try {
isSaving = true;
const updates = items
.filter((item) => item.value !== item.originalValue)
.map(({ key, value }) => ({ key, value: value || null }));
if (updates.length > 0) {
await api.systemConfigApi.updateConfig({ config: updates });
refreshConfig();
}
notificationController.show({
message: `Saved settings`,
type: NotificationType.Info
});
} catch (e) {
console.error('Error [updateSystemConfig]', e);
notificationController.show({
message: `Unable to save changes.`,
type: NotificationType.Error
});
} finally {
isSaving = false;
}
};
</script>
<section>
<table class="text-left my-4 w-full">
<thead
class="border rounded-md mb-4 bg-gray-50 flex text-immich-primary h-12 dark:bg-immich-dark-gray dark:text-immich-dark-primary dark:border-immich-dark-gray"
>
<tr class="flex w-full place-items-center">
<th class="text-center w-1/2 font-medium text-sm">Setting</th>
<th class="text-center w-1/2 font-medium text-sm">Value</th>
</tr>
</thead>
<tbody class="rounded-md block border dark:border-immich-dark-gray">
{#each items as item, i}
<tr
class={`text-center flex place-items-center w-full h-[80px] dark:text-immich-dark-fg ${
i % 2 == 0 ? 'bg-slate-50 dark:bg-[#181818]' : 'bg-immich-bg dark:bg-immich-dark-bg'
}`}
>
<td class="text-sm px-4 w-1/2 text-ellipsis">
{item.name}
</td>
<td class="text-sm px-4 w-1/2 text-ellipsis">
<input
style="text-align: center"
class="immich-form-input"
id={item.key}
disabled={isSaving}
name={item.key}
type="text"
bind:value={item.value}
placeholder={item.defaultValue + ''}
/>
</td>
</tr>
{/each}
</tbody>
</table>
<div class="flex justify-end">
<button
on:click={handleSave}
class="px-6 py-3 text-sm bg-immich-primary dark:bg-immich-dark-primary font-medium rounded-2xl hover:bg-immich-primary/50 transition-all hover:cursor-pointer disabled:cursor-not-allowed shadow-sm text-immich-bg dark:text-immich-dark-gray"
disabled={isSaving}
>
{#if isSaving}
<LoadingSpinner />
{:else}
Save
{/if}
</button>
</div>
</section>

6
web/src/routes/admin/+page.server.ts
View File

@@ -12,8 +12,6 @@ export const load: PageServerLoad = async ({ parent }) => {
}
const { data: allUsers } = await serverApi.userApi.getAllUsers(false);
return {
user: user,
allUsers: allUsers
};
return { user, allUsers };
};

14
web/src/routes/admin/+page.svelte
View File

@@ -4,6 +4,7 @@
import { AdminSideBarSelection } from '$lib/models/admin-sidebar-selection';
import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
import Sync from 'svelte-material-icons/Sync.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';
@@ -16,6 +17,7 @@
import type { PageData } from './$types';
import { api, ServerStatsResponseDto, UserResponseDto } from '@api';
import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
import SettingsPanel from '$lib/components/admin-page/settings/settings-panel.svelte';
import ServerStatsPanel from '$lib/components/admin-page/server-stats/server-stats-panel.svelte';
import RestoreDialoge from '$lib/components/admin-page/restore-dialoge.svelte';
@@ -190,11 +192,18 @@
/>
<SideBarButton
title="Jobs"
logo={Cog}
logo={Sync}
actionType={AdminSideBarSelection.JOBS}
isSelected={selectedAction === AdminSideBarSelection.JOBS}
on:selected={onButtonClicked}
/>
<SideBarButton
title="Settings"
logo={Cog}
actionType={AdminSideBarSelection.SETTINGS}
isSelected={selectedAction === AdminSideBarSelection.SETTINGS}
on:selected={onButtonClicked}
/>
<SideBarButton
title="Server Stats"
logo={Server}
@@ -228,6 +237,9 @@
{#if selectedAction === AdminSideBarSelection.JOBS}
<JobsPanel />
{/if}
{#if selectedAction === AdminSideBarSelection.SETTINGS}
<SettingsPanel />
{/if}
{#if selectedAction === AdminSideBarSelection.STATS && serverStat}
<ServerStatsPanel stats={serverStat} allUsers={data.allUsers} />
{/if}