From dead29a585340a13f68c8ea96dc43141f58f5f98 Mon Sep 17 00:00:00 2001 From: Wikid82 Date: Thu, 20 Nov 2025 13:18:24 -0500 Subject: [PATCH] feat: enhance Logs page with log filtering, pagination, and download functionality --- frontend/package-lock.json | 43 ++++---- frontend/src/pages/Logs.tsx | 204 +++++++++++++++++------------------- 2 files changed, 115 insertions(+), 132 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e2bba9df..f32ab540 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -11,6 +11,7 @@ "@tanstack/react-query": "^5.90.10", "axios": "^1.13.2", "clsx": "^2.1.1", + "date-fns": "^4.1.0", "lucide-react": "^0.554.0", "react": "^19.2.0", "react-dom": "^19.2.0", @@ -143,7 +144,6 @@ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz", "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -499,7 +499,6 @@ "url": "https://opencollective.com/csstools" } ], - "peer": true, "engines": { "node": ">=18" }, @@ -541,7 +540,6 @@ "url": "https://opencollective.com/csstools" } ], - "peer": true, "engines": { "node": ">=18" } @@ -2046,7 +2044,8 @@ "version": "5.0.4", "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", - "dev": true + "dev": true, + "peer": true }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -2123,7 +2122,6 @@ "integrity": "sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -2134,7 +2132,6 @@ "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "dev": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -2175,7 +2172,6 @@ "integrity": "sha512-lJi3PfxVmo0AkEY93ecfN+r8SofEqZNGByvHAI3GBLrvt1Cw6H5k1IM02nSzu0RfUafr2EvFSw0wAsZgubNplQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.47.0", "@typescript-eslint/types": "8.47.0", @@ -2522,7 +2518,6 @@ "integrity": "sha512-RCqeApCnbwd5IFvxk6OeKMXTvzHU/cVqY8HAW0gWk0yAO6wXwQJMKhDfDtk2ss7JCy9u7RNC3kyazwiaDhBA/g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/utils": "4.0.12", "fflate": "^0.8.2", @@ -2558,7 +2553,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2774,7 +2768,6 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.25", "caniuse-lite": "^1.0.30001754", @@ -2979,6 +2972,15 @@ "node": ">=20" } }, + "node_modules/date-fns": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.4.3", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", @@ -3038,7 +3040,8 @@ "version": "0.5.16", "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", - "dev": true + "dev": true, + "peer": true }, "node_modules/dunder-proto": { "version": "1.0.1", @@ -3200,7 +3203,6 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -4014,7 +4016,6 @@ "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-27.2.0.tgz", "integrity": "sha512-454TI39PeRDW1LgpyLPyURtB4Zx1tklSr6+OFOipsxGUH1WMTvk6C65JQdrj455+DP2uJ1+veBEHTGFKWVLFoA==", "dev": true, - "peer": true, "dependencies": { "@acemir/cssom": "^0.9.23", "@asamuzakjp/dom-selector": "^6.7.4", @@ -4405,6 +4406,7 @@ "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, + "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -4710,7 +4712,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -4740,6 +4741,7 @@ "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz", "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, + "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -4754,6 +4756,7 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "dev": true, + "peer": true, "engines": { "node": ">=8" } @@ -4763,6 +4766,7 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz", "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, + "peer": true, "engines": { "node": ">=10" }, @@ -4809,7 +4813,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4819,7 +4822,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -4831,7 +4833,8 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", - "dev": true + "dev": true, + "peer": true }, "node_modules/react-refresh": { "version": "0.18.0", @@ -5202,7 +5205,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, - "peer": true, "engines": { "node": ">=12" }, @@ -5312,7 +5314,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -5389,7 +5390,6 @@ "integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -5483,7 +5483,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -5497,7 +5496,6 @@ "integrity": "sha512-pmW4GCKQ8t5Ko1jYjC3SqOr7TUKN7uHOHB/XGsAIb69eYu6d1ionGSsb5H9chmPf+WeXt0VE7jTXsB1IvWoNbw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/expect": "4.0.12", "@vitest/mocker": "4.0.12", @@ -5742,7 +5740,6 @@ "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/frontend/src/pages/Logs.tsx b/frontend/src/pages/Logs.tsx index 353dd6b1..89c65ac3 100644 --- a/frontend/src/pages/Logs.tsx +++ b/frontend/src/pages/Logs.tsx @@ -1,83 +1,60 @@ import React, { useState } from 'react'; -import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'; -import { getLogs, getLogContent } from '../api/logs'; -import { getSettings, updateSetting } from '../api/settings'; +import { useQuery } from '@tanstack/react-query'; +import { getLogs, getLogContent, downloadLog, LogFilter } from '../api/logs'; import { Card } from '../components/ui/Card'; +import { Loader2, FileText, ChevronLeft, ChevronRight } from 'lucide-react'; +import { LogTable } from '../components/LogTable'; +import { LogFilters } from '../components/LogFilters'; import { Button } from '../components/ui/Button'; -import { toast } from '../components/Toast'; -import { Loader2, RefreshCw, FileText, Save } from 'lucide-react'; const Logs: React.FC = () => { const [selectedLog, setSelectedLog] = useState(null); - const [lineCount, setLineCount] = useState(100); - const [logLevel, setLogLevel] = useState('INFO'); - const queryClient = useQueryClient(); - const { data: logs, isLoading: isLoadingLogs, refetch: refetchLogs } = useQuery({ + // Filter State + const [search, setSearch] = useState(''); + const [host, setHost] = useState(''); + const [status, setStatus] = useState(''); + const [page, setPage] = useState(0); + const limit = 50; + + const { data: logs, isLoading: isLoadingLogs } = useQuery({ queryKey: ['logs'], queryFn: getLogs, }); - const { data: logContent, isLoading: isLoadingContent, refetch: refetchContent } = useQuery({ - queryKey: ['logContent', selectedLog, lineCount], - queryFn: () => selectedLog ? getLogContent(selectedLog, lineCount) : Promise.resolve({ lines: [] }), + // Select first log by default if none selected + React.useEffect(() => { + if (!selectedLog && logs && logs.length > 0) { + setSelectedLog(logs[0].name); + } + }, [logs, selectedLog]); + + const filter: LogFilter = { + search, + host, + status, + limit, + offset: page * limit + }; + + const { data: logData, isLoading: isLoadingContent, refetch: refetchContent } = useQuery({ + queryKey: ['logContent', selectedLog, search, host, status, page], + queryFn: () => selectedLog ? getLogContent(selectedLog, filter) : Promise.resolve(null), enabled: !!selectedLog, }); - const { data: settings } = useQuery({ - queryKey: ['settings'], - queryFn: getSettings, - }); - - // Update local state when settings load - React.useEffect(() => { - if (settings && settings['logging.level']) { - setLogLevel(settings['logging.level']); + const handleDownload = () => { + if (selectedLog) { + downloadLog(selectedLog); } - }, [settings]); + }; - const saveSettingsMutation = useMutation({ - mutationFn: async () => { - await updateSetting('logging.level', logLevel, 'caddy', 'string'); - }, - onSuccess: () => { - queryClient.invalidateQueries({ queryKey: ['settings'] }); - toast.success('Log level saved'); - }, - onError: (error: any) => { - toast.error(`Failed to save log level: ${error.message}`); - }, - }); + const totalPages = logData ? Math.ceil(logData.total / limit) : 0; return (
-

System Logs

-
-
- - -
- -
+

Access Logs

@@ -94,75 +71,84 @@ const Logs: React.FC = () => { {logs?.map((log) => ( ))} {logs?.length === 0 && ( -

No logs found

+
No log files found
)}
)}
- {/* Log Viewer */} -
- -
-

- {selectedLog ? selectedLog : 'Select a log file'} -

- {selectedLog && ( -
- Lines: - -
- )} -
+ {/* Log Content */} +
+ {selectedLog ? ( + <> + { setSearch(v); setPage(0); }} + host={host} + onHostChange={(v) => { setHost(v); setPage(0); }} + status={status} + onStatusChange={(v) => { setStatus(v); setPage(0); }} + onRefresh={refetchContent} + onDownload={handleDownload} + isLoading={isLoadingContent} + /> -
- {isLoadingContent ? ( -
- -
- ) : selectedLog ? ( - logContent?.lines && logContent.lines.length > 0 ? ( - logContent.lines.map((line, i) => ( -
- {line} + + + + {/* Pagination */} + {logData && logData.total > 0 && ( +
+
+ Showing {logData.offset + 1} to {Math.min(logData.offset + limit, logData.total)} of {logData.total} entries
- )) - ) : ( -
File is empty
- ) - ) : ( -
- -

Select a log file from the list to view its contents

-
- )} -
- +
+ + +
+
+ )} + + + ) : ( + + +

Select a log file to view contents

+ + )}