Skip to content

feat: show workspace health error alert above agents in WorkspacePage #19400

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 6 commits into from
Aug 22, 2025
+82 −2
Merged

feat: show workspace health error alert above agents in WorkspacePage #19400

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e3f1b21
feat: show workspace health error alert above agents in WorkspacePage
aqandrew Aug 18, 2025
9b89bb1
Merge branch 'main' into aqandrew/unhealthy-workspace-alert
aqandrew Aug 18, 2025
2d5b791
style: fix import order
aqandrew Aug 19, 2025
b6cfffc
test: set MockUnhealthyWorkspace's agent to be in error state
aqandrew Aug 21, 2025
988c3d3
test: add UnhealthyWithoutUpdatePermission Workspace story
aqandrew Aug 21, 2025
eb0711f
refactor: remove unused export
aqandrew Aug 21, 2025
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
18 changes: 18 additions & 0 deletions site/src/pages/WorkspacePage/Workspace.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import type { ProvisionerJobLog } from "api/typesGenerated";
import { action } from "storybook/actions";
import type { WorkspacePermissions } from "../../modules/workspaces/permissions";
import { Workspace } from "./Workspace";
import { defaultPermissions } from "./WorkspaceNotifications/WorkspaceNotifications.stories";

// Helper function to create timestamps easily - Copied from AppStatuses.stories.tsx
const createTimestamp = (
Expand Down Expand Up @@ -349,6 +350,23 @@ export const Stopping: Story = {
},
};

export const Unhealthy: Story = {
args: {
...Running.args,
workspace: Mocks.MockUnhealthyWorkspace,
},
};

export const UnhealthyWithoutUpdatePermission: Story = {
args: {
...Unhealthy.args,
permissions: {
...defaultPermissions,
updateWorkspace: false,
},
},
};

export const FailedWithLogs: Story = {
args: {
...Running.args,
Expand Down
39 changes: 39 additions & 0 deletions site/src/pages/WorkspacePage/Workspace.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ import {
WorkspaceBuildProgress,
} from "./WorkspaceBuildProgress";
import { WorkspaceDeletedBanner } from "./WorkspaceDeletedBanner";
import { NotificationActionButton } from "./WorkspaceNotifications/Notifications";
import { findTroubleshootingURL } from "./WorkspaceNotifications/WorkspaceNotifications";
import { WorkspaceTopbar } from "./WorkspaceTopbar";

interface WorkspaceProps {
Expand Down Expand Up @@ -95,6 +97,8 @@ export const Workspace: FC<WorkspaceProps> = ({
(workspace.latest_build.matched_provisioners?.available ?? 1) > 0;
const shouldShowProvisionerAlert =
workspacePending && !haveBuildLogs && !provisionersHealthy && !isRestarting;
const troubleshootingURL = findTroubleshootingURL(workspace.latest_build);
const hasActions = permissions.updateWorkspace || troubleshootingURL;

return (
<div className="flex flex-col flex-1 min-h-0">
Expand Down Expand Up @@ -192,6 +196,41 @@ export const Workspace: FC<WorkspaceProps> = ({
</Alert>
)}

{!workspace.health.healthy && (
<Alert severity="warning">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alert's background color is --surface-secondary. The buttons turn --surface-secondary on hover, so there's no apparent change when hovering. (This is also the case in WorkspaceNotifications.)

Does it make sense to keep these colors? Or should we do something like give NotificationActionButton an even lighter background (--surface-tertiary) on hover?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the existing popup has the same problem. it should definitely get fixed eventually but our colors are a bit of a mess right now. probably out of scope for this issue.

<AlertTitle>Workspace is unhealthy</AlertTitle>
<AlertDetail>
<p>
Your workspace is running but{" "}
{workspace.health.failing_agents.length > 1
? `${workspace.health.failing_agents.length} agents are unhealthy`
: "1 agent is unhealthy"}
.
</p>
{hasActions && (
<div className="flex items-center gap-2">
{permissions.updateWorkspace && (
<NotificationActionButton
onClick={() => handleRestart()}
>
Restart
</NotificationActionButton>
)}
{troubleshootingURL && (
<NotificationActionButton
onClick={() =>
window.open(troubleshootingURL, "_blank")
}
>
Troubleshooting
</NotificationActionButton>
)}
</div>
)}
</AlertDetail>
</Alert>
)}

{transitionStats !== undefined && (
<WorkspaceBuildProgress
workspace={workspace}
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import type { WorkspacePermissions } from "modules/workspaces/permissions";
import { expect, userEvent, waitFor, within } from "storybook/test";
import { WorkspaceNotifications } from "./WorkspaceNotifications";

const defaultPermissions: WorkspacePermissions = {
export const defaultPermissions: WorkspacePermissions = {
readWorkspace: true,
updateWorkspaceVersion: true,
updateWorkspace: true,
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/WorkspacePage/WorkspaceNotifications/WorkspaceNotifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ const styles = {
},
} satisfies Record<string, Interpolation<Theme>>;

const findTroubleshootingURL = (
export const findTroubleshootingURL = (
workspaceBuild: WorkspaceBuild,
): string | undefined => {
for (const resource of workspaceBuild.resources) {
Expand Down
23 changes: 23 additions & 0 deletions site/src/testHelpers/entities.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -992,6 +992,15 @@ export const MockWorkspaceSubAgent: TypesGen.WorkspaceAgent = {
],
};

const MockWorkspaceUnhealthyAgent: TypesGen.WorkspaceAgent = {
...MockWorkspaceAgent,
id: "test-workspace-unhealthy-agent",
name: "a-workspace-unhealthy-agent",
status: "timeout",
lifecycle_state: "start_error",
health: { healthy: false },
};

export const MockWorkspaceAppStatus: TypesGen.WorkspaceAppStatus = {
id: "test-app-status",
created_at: "2022-05-17T17:39:01.382927298Z",
Expand Down Expand Up @@ -1443,6 +1452,20 @@ export const MockStoppingWorkspace: TypesGen.Workspace = {
status: "stopping",
},
};
export const MockUnhealthyWorkspace: TypesGen.Workspace = {
...MockWorkspace,
id: "test-unhealthy-workspace",
health: {
healthy: false,
failing_agents: [MockWorkspaceUnhealthyAgent.id],
},
latest_build: {
...MockWorkspace.latest_build,
resources: [
{ ...MockWorkspaceResource, agents: [MockWorkspaceUnhealthyAgent] },
],
},
};
export const MockStartingWorkspace: TypesGen.Workspace = {
...MockWorkspace,
id: "test-starting-workspace",
Expand Down
Loading
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy