Skip to content

chore(site): refactor logs and add stories #12553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Mar 14, 2024
Merged

chore(site): refactor logs and add stories #12553

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4099ba6
Refact log components
BrunoQuaresma Mar 12, 2024
6f46085
Add stories for LogLine
BrunoQuaresma Mar 12, 2024
23b3910
Fix source_id prop
BrunoQuaresma Mar 12, 2024
c3e39a1
Fix resource_id parametters
BrunoQuaresma Mar 12, 2024
cb7cda9
Fix line height
BrunoQuaresma Mar 12, 2024
8b5a831
Apply PR review suggestions
BrunoQuaresma Mar 13, 2024
53dcd35
Fix missing log line space
BrunoQuaresma Mar 13, 2024
5e6222a
Add output comment
BrunoQuaresma Mar 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix line height
  • Loading branch information
@BrunoQuaresma
BrunoQuaresma committed Mar 12, 2024
commit cb7cda9d5d39bb95fce0b093149ecb279f312ff5
3 changes: 1 addition & 2 deletions site/src/components/Logs/LogLine.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import type { LogLevel } from "api/typesGenerated";
import { MONOSPACE_FONT_FAMILY } from "theme/constants";

export const DEFAULT_LOG_LINE_SIDE_PADDING = 24;
export const LOG_LINE_HEIGHT = 20;

export interface Line {
time: string;
Expand Down Expand Up @@ -43,7 +42,7 @@ const styles = {
fontSize: 13,
color: theme.palette.text.primary,
fontFamily: MONOSPACE_FONT_FAMILY,
height: LOG_LINE_HEIGHT,
height: "auto",
// Whitespace is significant in terminal output for alignment
whiteSpace: "pre",
padding: `0 var(--log-line-side-padding, ${DEFAULT_LOG_LINE_SIDE_PADDING}px)`,
Expand Down
5 changes: 2 additions & 3 deletions site/src/modules/resources/AgentLogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,8 @@ import {
import { FixedSizeList as List } from "react-window";
import * as API from "api/api";
import type { WorkspaceAgentLogSource } from "api/typesGenerated";
import { LOG_LINE_HEIGHT } from "components/Logs/LogLine";
import { AgentLogLine } from "./AgentLogLine";
import type { LineWithID } from "./AgentRow";
import { AGENT_LOG_LINE_HEIGHT, type LineWithID } from "./AgentRow";

type AgentLogsProps = Omit<
ComponentProps<typeof List>,
Expand All @@ -37,7 +36,7 @@ export const AgentLogs = forwardRef<List, AgentLogsProps>(
ref={ref}
css={styles.logs}
itemCount={logs.length}
itemSize={LOG_LINE_HEIGHT}
itemSize={AGENT_LOG_LINE_HEIGHT}
{...listProps}
>
{({ index, style }) => {
Expand Down
7 changes: 5 additions & 2 deletions site/src/modules/resources/AgentRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import type {
WorkspaceAgentMetadata,
} from "api/typesGenerated";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { LOG_LINE_HEIGHT, type Line } from "components/Logs/LogLine";
import type { Line } from "components/Logs/LogLine";
import { Stack } from "components/Stack/Stack";
import { useProxy } from "contexts/ProxyContext";
import { AgentLatency } from "./AgentLatency";
Expand All @@ -36,6 +36,9 @@ import { TerminalLink } from "./TerminalLink/TerminalLink";
import { VSCodeDesktopButton } from "./VSCodeDesktopButton/VSCodeDesktopButton";
import { XRayScanAlert } from "./XRayScanAlert";

// Approximate height of a log line. Used to control virtualized list height.
export const AGENT_LOG_LINE_HEIGHT = 20;

// Logs are stored as the Line interface to make rendering
// much more efficient. Instead of mapping objects each time, we're
// able to just pass the array of logs to the component.
Expand Down Expand Up @@ -151,7 +154,7 @@ export const AgentRow: FC<AgentRowProps> = ({
const distanceFromBottom =
logListDivRef.current.scrollHeight -
(props.scrollOffset + parent.clientHeight);
setBottomOfLogs(distanceFromBottom < LOG_LINE_HEIGHT);
setBottomOfLogs(distanceFromBottom < AGENT_LOG_LINE_HEIGHT);
},
[logListDivRef],
);
Expand Down