mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add log viewer to dashboard

Browse source
This commit is contained in:
Niels van Velzen 2025-02-20 22:19:36 +01:00
parent 07ffab2ed1
commit e741bd5e0a
5 changed files with 153 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/apps/dashboard/features/logs/api/useServerLog.ts Normal file
View file

@ -0,0 +1,35 @@
import { Api } from '@jellyfin/sdk';
import { getSystemApi } from '@jellyfin/sdk/lib/utils/api/system-api';
import { useQuery } from '@tanstack/react-query';
import { useApi } from 'hooks/useApi';
import type { AxiosRequestConfig } from 'axios';
const fetchServerLog = async (
api?: Api,
name?: string,
options?: AxiosRequestConfig
) => {
if (!api) {
console.error('[useServerLog] No API instance available');
return;
}
if (!name) {
console.error('[useServerLog] Name is required');
return;
}
const response = await getSystemApi(api).getLogFile({ name }, options);
// FIXME: TypeScript SDK thinks it is returning a File but in reality it is a string
return response.data as never as string;
};
export const useServerLog = (name: string) => {
const { api } = useApi();
return useQuery({
queryKey: ['ServerLog', name],
queryFn: ({ signal }) => fetchServerLog(api, name, { signal }),
enabled: !!api
});
};

20
src/apps/dashboard/features/logs/components/LogItemList.tsx
View file

@ -2,28 +2,15 @@ import React, { FunctionComponent } from 'react';
import type { LogFile } from '@jellyfin/sdk/lib/generated-client/models/log-file';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemButton from '@mui/material/ListItemButton';
import ListItemText from '@mui/material/ListItemText';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import { useApi } from 'hooks/useApi';
import datetime from 'scripts/datetime';
import ListItemLink from 'components/ListItemLink';
type LogItemProps = {
logs: LogFile[];
};
const LogItemList: FunctionComponent<LogItemProps> = ({ logs }: LogItemProps) => {
const { api } = useApi();
const getLogFileUrl = (logFile: LogFile) => {
if (!api) return '';
return api.getUri('/System/Logs/Log', {
name: logFile.Name,
api_key: api.accessToken
});
};
const getDate = (logFile: LogFile) => {
const date = datetime.parseISO8601Date(logFile.DateModified, true);
return datetime.toLocaleDateString(date) + ' ' + datetime.getDisplayTime(date);
@ -34,15 +21,14 @@ const LogItemList: FunctionComponent<LogItemProps> = ({ logs }: LogItemProps) =>
{logs.map(log => {
return (
<ListItem key={log.Name} disablePadding>
<ListItemButton href={getLogFileUrl(log)} target='_blank'>
<ListItemLink to={`/dashboard/logs/${log.Name}`}>
<ListItemText
primary={log.Name}
primaryTypographyProps={{ variant: 'h3' }}
secondary={getDate(log)}
secondaryTypographyProps={{ variant: 'body1' }}
/>
<OpenInNewIcon />
</ListItemButton>
</ListItemLink>
</ListItem>
);
})}