fix(logs): remove redundant top page header to maximize vertical terminal space
This commit is contained in:
@@ -107,13 +107,6 @@ export default function LogsPage() {
|
|||||||
minHeight: 0,
|
minHeight: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ padding: "20px 24px" }}>
|
|
||||||
<PageHeader
|
|
||||||
title="Server Logs"
|
|
||||||
subtitle="Container stdout/stderr for your deployed apps."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{loading && !anatomy ? (
|
{loading && !anatomy ? (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -141,7 +134,6 @@ export default function LogsPage() {
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
flex: 1,
|
flex: 1,
|
||||||
minHeight: 0,
|
minHeight: 0,
|
||||||
borderTop: `1px solid ${THEME.borderSoft}`,
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* App Picker Column */}
|
{/* App Picker Column */}
|
||||||
@@ -151,33 +143,68 @@ export default function LogsPage() {
|
|||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
gap: 8,
|
|
||||||
borderRight: `1px solid ${THEME.borderSoft}`,
|
borderRight: `1px solid ${THEME.borderSoft}`,
|
||||||
padding: "20px",
|
|
||||||
overflowY: "auto",
|
overflowY: "auto",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{live.map((app) => (
|
<header
|
||||||
<button
|
style={{
|
||||||
key={app.uuid}
|
display: "flex",
|
||||||
onClick={() => setActiveUuid(app.uuid)}
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
padding: "10px 20px",
|
||||||
|
position: "sticky",
|
||||||
|
top: 0,
|
||||||
|
background: THEME.cardBg,
|
||||||
|
zIndex: 10,
|
||||||
|
height: "41px",
|
||||||
|
boxSizing: "border-box",
|
||||||
|
borderTopLeftRadius: THEME.radius,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<h3
|
||||||
style={{
|
style={{
|
||||||
textAlign: "left",
|
fontSize: "0.95rem",
|
||||||
padding: "10px 14px",
|
fontWeight: 600,
|
||||||
background:
|
color: THEME.ink,
|
||||||
activeUuid === app.uuid ? THEME.subtleBg : THEME.cardBg,
|
margin: 0,
|
||||||
border: `1px solid ${activeUuid === app.uuid ? THEME.border : "transparent"}`,
|
|
||||||
borderRadius: THEME.radiusSm,
|
|
||||||
cursor: "pointer",
|
|
||||||
fontSize: "0.875rem",
|
|
||||||
fontWeight: 500,
|
|
||||||
color: activeUuid === app.uuid ? THEME.ink : THEME.mid,
|
|
||||||
transition: "all 0.15s ease",
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{app.name}
|
Apps
|
||||||
</button>
|
</h3>
|
||||||
))}
|
</header>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 4,
|
||||||
|
padding: "0 20px 20px 20px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{live.map((app) => (
|
||||||
|
<button
|
||||||
|
key={app.uuid}
|
||||||
|
onClick={() => setActiveUuid(app.uuid)}
|
||||||
|
style={{
|
||||||
|
textAlign: "left",
|
||||||
|
padding: "10px 14px",
|
||||||
|
background:
|
||||||
|
activeUuid === app.uuid
|
||||||
|
? THEME.subtleBg
|
||||||
|
: "transparent",
|
||||||
|
border: "1px solid transparent",
|
||||||
|
borderRadius: THEME.radiusSm,
|
||||||
|
cursor: "pointer",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
fontWeight: activeUuid === app.uuid ? 500 : 400,
|
||||||
|
color: activeUuid === app.uuid ? THEME.ink : THEME.mid,
|
||||||
|
transition: "all 0.1s ease",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{app.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Log Viewer Column */}
|
{/* Log Viewer Column */}
|
||||||
@@ -195,18 +222,18 @@ export default function LogsPage() {
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
padding: "12px 20px",
|
padding: "10px 16px",
|
||||||
background: THEME.subtleBg,
|
background: THEME.subtleBg,
|
||||||
borderBottom: `1px solid ${THEME.borderSoft}`,
|
borderBottom: `1px solid ${THEME.borderSoft}`,
|
||||||
height: "53px",
|
height: "41px",
|
||||||
boxSizing: "border-box",
|
boxSizing: "border-box",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
style={{
|
style={{
|
||||||
fontSize: "0.95rem",
|
fontSize: "0.85rem",
|
||||||
fontWeight: 600,
|
fontWeight: 500,
|
||||||
color: THEME.ink,
|
color: THEME.mid,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{live.find((a) => a.uuid === activeUuid)?.name ?? "Logs"}
|
{live.find((a) => a.uuid === activeUuid)?.name ?? "Logs"}
|
||||||
@@ -214,13 +241,14 @@ export default function LogsPage() {
|
|||||||
<SecondaryButton
|
<SecondaryButton
|
||||||
icon={
|
icon={
|
||||||
logsLoading ? (
|
logsLoading ? (
|
||||||
<Loader2 size={14} className="animate-spin" />
|
<Loader2 size={13} className="animate-spin" />
|
||||||
) : (
|
) : (
|
||||||
<RefreshCw size={14} />
|
<RefreshCw size={13} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
onClick={() => activeUuid && fetchLogs(activeUuid)}
|
onClick={() => activeUuid && fetchLogs(activeUuid)}
|
||||||
disabled={logsLoading}
|
disabled={logsLoading}
|
||||||
|
style={{ padding: "4px 8px", fontSize: "0.75rem" }}
|
||||||
>
|
>
|
||||||
Refresh
|
Refresh
|
||||||
</SecondaryButton>
|
</SecondaryButton>
|
||||||
|
|||||||
Reference in New Issue
Block a user