Skip to content

Improve dashboard UX when agent cannot connect #33

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

Closed
cdr-robot wants to merge 1 commit into from
Closed

Improve dashboard UX when agent cannot connect #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 20 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 @@ -159,6 +159,14 @@ export const AgentRow: FC<AgentRowProps> = ({
enabled: agent.status === "connected",
select: (res) => res.containers.filter((c) => c.status === "running"),
});

// Check if the agent has an unhealthy status that requires more space for error display
const hasErrorState =
agent.status === "timeout" ||
agent.lifecycle_state === "start_timeout" ||
agent.lifecycle_state === "start_error" ||
agent.lifecycle_state === "shutdown_timeout" ||
agent.lifecycle_state === "shutdown_error";

return (
<Stack
Expand All @@ -173,7 +181,11 @@ export const AgentRow: FC<AgentRowProps> = ({
>
<header css={styles.header}>
<div css={styles.agentInfo}>
<div css={styles.agentNameAndStatus}>
<div css={[
styles.agentNameAndStatus,
// Add more space for error states with inline text
hasErrorState && styles.agentNameAndStatusWithError
]}>
<AgentStatus agent={agent} />
<span css={styles.agentName}>{agent.name}</span>
</div>
Expand Down Expand Up @@ -474,6 +486,12 @@ const styles = {
},
}),

agentNameAndStatusWithError: {
flexGrow: 1,
flexWrap: "wrap",
gap: "8px 16px", // Vertical gap 8px, horizontal gap 16px
},

agentName: (theme) => ({
whiteSpace: "nowrap",
overflow: "hidden",
Expand Down Expand Up @@ -533,4 +551,4 @@ const styles = {
position: "relative",
},
}),
} satisfies Record<string, Interpolation<Theme>>;
} satisfies Record<string, Interpolation<Theme>>;
179 changes: 81 additions & 98 deletions site/src/modules/resources/AgentStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
import { PopoverTrigger } from "components/deprecated/Popover/Popover";
import type { FC } from "react";

// If we think in the agent status and lifecycle into a single enum/state I’d
// If we think in the agent status and lifecycle into a single enum/state I'd
// say we would have: connecting, timeout, disconnected, connected:created,
// connected:starting, connected:start_timeout, connected:start_error,
// connected:ready, connected:shutting_down, connected:shutdown_timeout,
Expand Down Expand Up @@ -48,50 +48,35 @@ interface AgentStatusProps {

const StartTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Agent timeout">
<WarningRounded css={styles.timeoutWarning} />
</PopoverTrigger>

<HelpTooltipContent>
<HelpTooltipTitle>Agent is taking too long to start</HelpTooltipTitle>
<HelpTooltipText>
We noticed this agent is taking longer than expected to start.{" "}
<Link
target="_blank"
rel="noreferrer"
href={agent.troubleshooting_url}
>
Troubleshoot
</Link>
.
</HelpTooltipText>
</HelpTooltipContent>
</HelpTooltip>
<div css={styles.statusWithText}>
<WarningRounded css={styles.timeoutWarning} />
<span css={styles.statusText}>Agent is taking too long to start</span>
<Link
target="_blank"
rel="noreferrer"
href={agent.troubleshooting_url}
css={styles.troubleshootLink}
>
Troubleshoot
</Link>
</div>
);
};

const StartErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Start error">
<WarningRounded css={styles.errorWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Error starting the agent</HelpTooltipTitle>
<HelpTooltipText>
Something went wrong during the agent startup.{" "}
<Link
target="_blank"
rel="noreferrer"
href={agent.troubleshooting_url}
>
Troubleshoot
</Link>
.
</HelpTooltipText>
</HelpTooltipContent>
</HelpTooltip>
<div css={styles.statusWithText}>
<WarningRounded css={styles.errorWarning} />
<span css={styles.statusText}>Error starting the agent</span>
<Link
target="_blank"
rel="noreferrer"
href={agent.troubleshooting_url}
css={styles.troubleshootLink}
>
Troubleshoot
</Link>
</div>
);
};

Expand All @@ -109,49 +94,35 @@ const ShuttingDownLifecycle: FC = () => {

const ShutdownTimeoutLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Stop timeout">
<WarningRounded css={styles.timeoutWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Agent is taking too long to stop</HelpTooltipTitle>
<HelpTooltipText>
We noticed this agent is taking longer than expected to stop.{" "}
<Link
target="_blank"
rel="noreferrer"
href={agent.troubleshooting_url}
>
Troubleshoot
</Link>
.
</HelpTooltipText>
</HelpTooltipContent>
</HelpTooltip>
<div css={styles.statusWithText}>
<WarningRounded css={styles.timeoutWarning} />
<span css={styles.statusText}>Agent is taking too long to stop</span>
<Link
target="_blank"
rel="noreferrer"
href={agent.troubleshooting_url}
css={styles.troubleshootLink}
>
Troubleshoot
</Link>
</div>
);
};

const ShutdownErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Stop error">
<WarningRounded css={styles.errorWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Error stopping the agent</HelpTooltipTitle>
<HelpTooltipText>
Something went wrong while trying to stop the agent.{" "}
<Link
target="_blank"
rel="noreferrer"
href={agent.troubleshooting_url}
>
Troubleshoot
</Link>
.
</HelpTooltipText>
</HelpTooltipContent>
</HelpTooltip>
<div css={styles.statusWithText}>
<WarningRounded css={styles.errorWarning} />
<span css={styles.statusText}>Error stopping the agent</span>
<Link
target="_blank"
rel="noreferrer"
href={agent.troubleshooting_url}
css={styles.troubleshootLink}
>
Troubleshoot
</Link>
</div>
);
};

Expand Down Expand Up @@ -229,25 +200,18 @@ const ConnectingStatus: FC = () => {

const TimeoutStatus: FC<AgentStatusProps> = ({ agent }) => {
return (
<HelpTooltip>
<PopoverTrigger role="status" aria-label="Timeout">
<WarningRounded css={styles.timeoutWarning} />
</PopoverTrigger>
<HelpTooltipContent>
<HelpTooltipTitle>Agent is taking too long to connect</HelpTooltipTitle>
<HelpTooltipText>
We noticed this agent is taking longer than expected to connect.{" "}
<Link
target="_blank"
rel="noreferrer"
href={agent.troubleshooting_url}
>
Troubleshoot
</Link>
.
</HelpTooltipText>
</HelpTooltipContent>
</HelpTooltip>
<div css={styles.statusWithText}>
<WarningRounded css={styles.timeoutWarning} />
<span css={styles.statusText}>Agent is taking too long to connect</span>
<Link
target="_blank"
rel="noreferrer"
href={agent.troubleshooting_url}
css={styles.troubleshootLink}
>
Troubleshoot
</Link>
</div>
);
};

Expand Down Expand Up @@ -309,12 +273,31 @@ const styles = {
width: 14,
height: 14,
position: "relative",
flexShrink: 0,
}),

errorWarning: (theme) => ({
color: theme.palette.error.main,
width: 14,
height: 14,
position: "relative",
flexShrink: 0,
}),
} satisfies Record<string, Interpolation<Theme>>;

statusWithText: {
display: "flex",
alignItems: "center",
gap: "8px",
},

statusText: (theme) => ({
fontSize: 12,
fontWeight: 500,
color: theme.palette.text.secondary,
}),

troubleshootLink: {
fontSize: 12,
fontWeight: 500,
}
} satisfies Record<string, Interpolation<Theme>>;
Loading