andreas/llama-swap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements (#213)

Browse Source 
* use two column for logs view on wider screens

* hide log controls when panel is minimized
This commit is contained in:
Benson Wong
2025-07-31 11:59:21 -07:00
committed by GitHub
parent 5172cb2e12
commit 574fdfabb4
1 changed files with 27 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
ui/src/pages/LogViewer.tsx
View File

@@ -6,7 +6,7 @@ const LogViewer = () => {
const { proxyLogs, upstreamLogs } = useAPI(); const { proxyLogs, upstreamLogs } = useAPI();
return ( return (
<div className="flex flex-col gap-5" style={{ height: "calc(100vh - 125px)" }}> <div className="flex flex-col lg:flex-row gap-5" style={{ height: "calc(100vh - 125px)" }}>
<LogPanel id="proxy" title="Proxy Logs" logData={proxyLogs} /> <LogPanel id="proxy" title="Proxy Logs" logData={proxyLogs} />
<LogPanel id="upstream" title="Upstream Logs" logData={upstreamLogs} /> <LogPanel id="upstream" title="Upstream Logs" logData={upstreamLogs} />
</div> </div>
@@ -90,34 +90,36 @@ export const LogPanel = ({ id, title, logData, className }: LogPanelProps) => {
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
{/* Title - Always full width on mobile, normal on desktop */} {/* Title - Always full width on mobile, normal on desktop */}
<div className="w-full md:w-auto" onClick={() => setIsCollapsed(!isCollapsed)}> <div className="w-full md:w-auto" onClick={() => setIsCollapsed(!isCollapsed)}>
<h3 className="m-0 text-lg">{title}</h3> <h3 className="m-0 text-lg p-0">{title}</h3>
</div> </div>
<div className="flex flex-col sm:flex-row gap-4 w-full md:w-auto"> {!isCollapsed && (
{/* Sizing Buttons - Stacks vertically on mobile */} <div className="flex flex-col sm:flex-row gap-4 w-full md:w-auto">
<div className="flex flex-wrap gap-2"> {/* Sizing Buttons - Stacks vertically on mobile */}
<button className="btn" onClick={toggleFontSize}> <div className="flex flex-wrap gap-2">
font: {fontSize} <button className="btn" onClick={toggleFontSize}>
</button> font: {fontSize}
<button className="btn" onClick={() => setTextWrap((prev) => !prev)}> </button>
{wrapText ? "wrap" : "wrap off"} <button className="btn" onClick={() => setTextWrap((prev) => !prev)}>
</button> {wrapText ? "wrap" : "wrap off"}
</div> </button>
</div>
{/* Filtering Options - Full width on mobile, normal on desktop */} {/* Filtering Options - Full width on mobile, normal on desktop */}
<div className="flex flex-1 min-w-0 gap-2"> <div className="flex flex-1 min-w-0 gap-2">
<input <input
type="text" type="text"
className="flex-1 min-w-[120px] text-sm border p-2 rounded" className="flex-1 min-w-[120px] text-sm border p-2 rounded"
placeholder="Filter logs..." placeholder="Filter logs..."
value={filterRegex} value={filterRegex}
onChange={(e) => setFilterRegex(e.target.value)} onChange={(e) => setFilterRegex(e.target.value)}
/> />
<button className="btn" onClick={() => setFilterRegex("")}> <button className="btn" onClick={() => setFilterRegex("")}>
Clear Clear
</button> </button>
</div>
</div> </div>
</div> )}
</div> </div>
</div> </div>