diff --git a/site/src/components/WorkspaceHealthBadge/WorkspaceHealthBadge.stories.tsx b/site/src/components/WorkspaceHealthBadge/WorkspaceHealthBadge.stories.tsx new file mode 100644 index 0000000000000..245ecd49785ac --- /dev/null +++ b/site/src/components/WorkspaceHealthBadge/WorkspaceHealthBadge.stories.tsx @@ -0,0 +1,99 @@ +import { Story } from "@storybook/react" +import { + MockCanceledWorkspace, + MockCancelingWorkspace, + MockDeletedWorkspace, + MockDeletingWorkspace, + MockFailedWorkspace, + MockPendingWorkspace, + MockStartingWorkspace, + MockStoppedWorkspace, + MockStoppingWorkspace, + MockWorkspace, + MockBuildInfo, + MockEntitlementsWithScheduling, + MockExperiments, + MockAppearance, +} from "testHelpers/entities" +import { + WorkspaceHealthBadge, + WorkspaceHealthBadgeProps, +} from "./WorkspaceHealthBadge" +import { DashboardProviderContext } from "components/Dashboard/DashboardProvider" + +export default { + title: "components/WorkspaceHealthBadge", + component: WorkspaceHealthBadge, +} + +const MockedAppearance = { + config: MockAppearance, + preview: false, + setPreview: () => null, + save: () => null, +} + +const Template: Story = (args) => ( + + + +) + +export const Running = Template.bind({}) +Running.args = { + workspace: MockWorkspace, +} + +// TODO(mafredri): Healthyness mocks. + +export const Starting = Template.bind({}) +Starting.args = { + workspace: MockStartingWorkspace, +} + +export const Stopped = Template.bind({}) +Stopped.args = { + workspace: MockStoppedWorkspace, +} + +export const Stopping = Template.bind({}) +Stopping.args = { + workspace: MockStoppingWorkspace, +} + +export const Deleting = Template.bind({}) +Deleting.args = { + workspace: MockDeletingWorkspace, +} + +export const Deleted = Template.bind({}) +Deleted.args = { + workspace: MockDeletedWorkspace, +} + +export const Canceling = Template.bind({}) +Canceling.args = { + workspace: MockCancelingWorkspace, +} + +export const Canceled = Template.bind({}) +Canceled.args = { + workspace: MockCanceledWorkspace, +} + +export const Failed = Template.bind({}) +Failed.args = { + workspace: MockFailedWorkspace, +} + +export const Pending = Template.bind({}) +Pending.args = { + workspace: MockPendingWorkspace, +} diff --git a/site/src/components/WorkspaceHealthBadge/WorkspaceHealthBadge.tsx b/site/src/components/WorkspaceHealthBadge/WorkspaceHealthBadge.tsx new file mode 100644 index 0000000000000..a9aa808eee213 --- /dev/null +++ b/site/src/components/WorkspaceHealthBadge/WorkspaceHealthBadge.tsx @@ -0,0 +1,30 @@ +import { Workspace } from "api/typesGenerated" +import { Pill } from "components/Pill/Pill" +import { FC, PropsWithChildren } from "react" +import { ErrorIcon } from "components/Icons/ErrorIcon" +import FavoriteIcon from "@mui/icons-material/Favorite" +import { Maybe } from "components/Conditionals/Maybe" + +export type WorkspaceHealthBadgeProps = { + workspace: Workspace + className?: string +} + +export const WorkspaceHealthBadge: FC< + PropsWithChildren +> = ({ workspace, className }) => { + return ( + + : } + text={workspace.health.healthy ? "Healthy" : "Unhealthy"} + type={workspace.health.healthy ? "success" : "warning"} + /> + + ) +} diff --git a/site/src/components/WorkspacesTable/WorkspacesRow.tsx b/site/src/components/WorkspacesTable/WorkspacesRow.tsx index 7dd637b1afda7..720e1755451f0 100644 --- a/site/src/components/WorkspacesTable/WorkspacesRow.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesRow.tsx @@ -13,6 +13,7 @@ import { OutdatedHelpTooltip } from "components/Tooltips/OutdatedHelpTooltip" import { Avatar } from "components/Avatar/Avatar" import { Stack } from "components/Stack/Stack" import { useClickableTableRow } from "hooks/useClickableTableRow" +import { WorkspaceHealthBadge } from "components/WorkspaceHealthBadge/WorkspaceHealthBadge" export const WorkspacesRow: FC<{ workspace: Workspace @@ -65,6 +66,10 @@ export const WorkspacesRow: FC<{ + + + +
diff --git a/site/src/components/WorkspacesTable/WorkspacesTable.tsx b/site/src/components/WorkspacesTable/WorkspacesTable.tsx index 71c31312f8df4..b27932b5aec7a 100644 --- a/site/src/components/WorkspacesTable/WorkspacesTable.tsx +++ b/site/src/components/WorkspacesTable/WorkspacesTable.tsx @@ -13,6 +13,7 @@ const Language = { template: "Template", lastUsed: "Last Used", status: "Status", + health: "Health", } export interface WorkspacesTableProps { @@ -37,6 +38,7 @@ export const WorkspacesTable: FC = ({ {Language.template} {Language.lastUsed} {Language.status} + {Language.health}