mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
fix(site): implement agent logs improvements (#24455)
Polishes the agent logs panel in the workspace resources UI: consistent padding, clearer behavior when switching log source tabs, and a more usable download menu for long source lists. - Use symmetric vertical padding on the logs container (`py-4` instead of top-only padding). - Add optional `showSourceIcons` on `AgentLogs` (defaults on); `AgentRow` turns it off unless the **All** tab is active so filtered tabs are not cluttered with redundant source icons. - Anchor the download-logs dropdown below the trigger and cap menu height to 6 items with scrolling so many sources do not overflow the viewport.
This commit is contained in:
@@ -29,6 +29,7 @@ type AgentLogsProps = Omit<
|
||||
logs: readonly Line[];
|
||||
sources: readonly WorkspaceAgentLogSource[];
|
||||
overflowed: boolean;
|
||||
showSourceIcons?: boolean;
|
||||
};
|
||||
|
||||
export const AgentLogs: React.FC<AgentLogsProps> = ({
|
||||
@@ -36,6 +37,7 @@ export const AgentLogs: React.FC<AgentLogsProps> = ({
|
||||
sources,
|
||||
overflowed,
|
||||
className,
|
||||
showSourceIcons = true,
|
||||
...listProps
|
||||
}) => {
|
||||
const logSourceById = Object.fromEntries(sources.map((s) => [s.id, s]));
|
||||
@@ -51,7 +53,7 @@ export const AgentLogs: React.FC<AgentLogsProps> = ({
|
||||
// We need the div selector to be able to apply the padding
|
||||
// top from startupLogs
|
||||
className={cn(
|
||||
"pt-4 [&>div]:relative bg-surface-secondary",
|
||||
"py-4 [&>div]:relative bg-surface-secondary",
|
||||
// Add extra padding so that overflow indicator can't
|
||||
// fully cover up lines of text
|
||||
overflowed && "pb-10",
|
||||
@@ -126,18 +128,20 @@ export const AgentLogs: React.FC<AgentLogsProps> = ({
|
||||
line={log}
|
||||
style={style}
|
||||
sourceIcon={
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{icon}</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
{logSource.display_name}
|
||||
{assignedIcon && (
|
||||
<i>
|
||||
<br />
|
||||
No icon specified!
|
||||
</i>
|
||||
)}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
showSourceIcons ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>{icon}</TooltipTrigger>
|
||||
<TooltipContent side="bottom">
|
||||
{logSource.display_name}
|
||||
{assignedIcon && (
|
||||
<i>
|
||||
<br />
|
||||
No icon specified!
|
||||
</i>
|
||||
)}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -184,9 +184,11 @@ export const AgentRow: FC<AgentRowProps> = ({
|
||||
if (!parent) {
|
||||
return;
|
||||
}
|
||||
// Use the parent's scrollHeight (not the inner div's) so that
|
||||
// any padding on the scroll container is included in the
|
||||
// calculation and doesn't inflate the "at bottom" zone.
|
||||
const distanceFromBottom =
|
||||
logListDivRef.current.scrollHeight -
|
||||
(props.scrollOffset + parent.clientHeight);
|
||||
parent.scrollHeight - (props.scrollOffset + parent.clientHeight);
|
||||
setBottomOfLogs(distanceFromBottom < AGENT_LOG_LINE_HEIGHT);
|
||||
};
|
||||
|
||||
@@ -596,6 +598,7 @@ export const AgentRow: FC<AgentRowProps> = ({
|
||||
sources={agent.log_sources}
|
||||
overflowed={agent.logs_overflowed}
|
||||
className="bg-transparent"
|
||||
showSourceIcons={selectedLogTab === "all"}
|
||||
/>
|
||||
)}
|
||||
</AutoSizer>
|
||||
|
||||
@@ -61,7 +61,11 @@ export const DownloadSelectedAgentLogsButton: FC<
|
||||
<ChevronDownIcon className="size-icon-sm" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuContent
|
||||
side="bottom"
|
||||
align="end"
|
||||
className="max-h-56 overflow-y-auto"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
disabled={!hasAllLogs}
|
||||
onSelect={() => {
|
||||
|
||||
Reference in New Issue
Block a user