diff --git a/site/src/components/Badge/Badge.tsx b/site/src/components/Badge/Badge.tsx index 7ee7cc4f94fe0..e405966c8c235 100644 --- a/site/src/components/Badge/Badge.tsx +++ b/site/src/components/Badge/Badge.tsx @@ -17,9 +17,12 @@ export const badgeVariants = cva( default: "border-transparent bg-surface-secondary text-content-secondary shadow", warning: - "border-transparent bg-surface-orange text-content-warning shadow", + "border border-solid border-border-warning bg-surface-orange text-content-warning shadow", + destructive: + "border border-solid border-border-destructive bg-surface-red text-content-highlight-red shadow", }, size: { + xs: "text-2xs font-regular h-5 [&_svg]:hidden rounded px-1.5", sm: "text-2xs font-regular h-5.5 [&_svg]:size-icon-xs", md: "text-xs font-medium [&_svg]:size-icon-sm", }, diff --git a/site/src/index.css b/site/src/index.css index fe8699bc62b07..e2b71d7be6516 100644 --- a/site/src/index.css +++ b/site/src/index.css @@ -28,11 +28,13 @@ --surface-grey: 240 5% 96%; --surface-orange: 34 100% 92%; --surface-sky: 201 94% 86%; + --surface-red: 0 93% 94%; --border-default: 240 6% 90%; --border-success: 142 76% 36%; --border-warning: 30.66, 97.16%, 72.35%; --border-destructive: 0 84% 60%; - --border-hover: 240, 5%, 34%; + --border-warning: 27 96% 61%; + --border-hover: 240 5% 34%; --overlay-default: 240 5% 84% / 80%; --radius: 0.5rem; --highlight-purple: 262 83% 58%; @@ -66,10 +68,12 @@ --surface-grey: 240 6% 10%; --surface-orange: 13 81% 15%; --surface-sky: 204 80% 16%; + --surface-red: 0 75% 15%; --border-default: 240 4% 16%; --border-success: 142 76% 36%; --border-warning: 30.66, 97.16%, 72.35%; --border-destructive: 0 91% 71%; + --border-warning: 31 97% 72%; --border-hover: 240, 5%, 34%; --overlay-default: 240 10% 4% / 80%; --highlight-purple: 252 95% 85%; diff --git a/site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx b/site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx index 9c87cd4eae01c..f3c9c80d085fd 100644 --- a/site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx +++ b/site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx @@ -1,8 +1,6 @@ -import AutoDeleteIcon from "@mui/icons-material/AutoDelete"; -import RecyclingIcon from "@mui/icons-material/Recycling"; import Tooltip from "@mui/material/Tooltip"; import type { Workspace } from "api/typesGenerated"; -import { Pill } from "components/Pill/Pill"; +import { Badge } from "components/Badge/Badge"; import { formatDistanceToNow } from "date-fns"; import type { FC } from "react"; @@ -35,9 +33,9 @@ export const WorkspaceDormantBadge: FC = ({ } > - } type="error"> + Deletion Pending - + ) : ( = ({ } > - } type="warning"> + Dormant - + ); }; diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx index 9fe72c23910e5..a9d585fccf58c 100644 --- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx +++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx @@ -13,6 +13,11 @@ import { AvatarData } from "components/Avatar/AvatarData"; import { AvatarDataSkeleton } from "components/Avatar/AvatarDataSkeleton"; import { InfoTooltip } from "components/InfoTooltip/InfoTooltip"; import { Stack } from "components/Stack/Stack"; +import { + StatusIndicator, + StatusIndicatorDot, + type StatusIndicatorProps, +} from "components/StatusIndicator/StatusIndicator"; import { Table, TableBody, @@ -25,19 +30,26 @@ import { TableLoaderSkeleton, TableRowSkeleton, } from "components/TableLoader/TableLoader"; +import dayjs from "dayjs"; +import relativeTime from "dayjs/plugin/relativeTime"; import { useClickableTableRow } from "hooks/useClickableTableRow"; import { useDashboard } from "modules/dashboard/useDashboard"; import { WorkspaceAppStatus } from "modules/workspaces/WorkspaceAppStatus/WorkspaceAppStatus"; import { WorkspaceDormantBadge } from "modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge"; import { WorkspaceOutdatedTooltip } from "modules/workspaces/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip"; -import { WorkspaceStatusBadge } from "modules/workspaces/WorkspaceStatusBadge/WorkspaceStatusBadge"; -import { LastUsed } from "pages/WorkspacesPage/LastUsed"; import { type FC, type ReactNode, useMemo } from "react"; import { useNavigate } from "react-router-dom"; import { cn } from "utils/cn"; -import { getDisplayWorkspaceTemplateName } from "utils/workspace"; +import { + type DisplayWorkspaceStatusType, + getDisplayWorkspaceStatus, + getDisplayWorkspaceTemplateName, + lastUsedMessage, +} from "utils/workspace"; import { WorkspacesEmpty } from "./WorkspacesEmpty"; +dayjs.extend(relativeTime); + export interface WorkspacesTableProps { workspaces?: readonly Workspace[]; checkedWorkspaces: readonly Workspace[]; @@ -125,8 +137,7 @@ export const WorkspacesTable: FC = ({ {hasAppStatus && Activity} Template - Last used - Status + Status @@ -248,26 +259,7 @@ export const WorkspacesTable: FC = ({ /> - - - - - -
- - {workspace.latest_build.status === "running" && - !workspace.health.healthy && ( - - )} - {workspace.dormant_at && ( - - )} -
- +
@@ -345,14 +337,11 @@ const TableLoader: FC = ({ canCheckWorkspaces }) => { - - - - - + + - + @@ -362,3 +351,51 @@ const TableLoader: FC = ({ canCheckWorkspaces }) => { const cantBeChecked = (workspace: Workspace) => { return ["deleting", "pending"].includes(workspace.latest_build.status); }; + +type WorkspaceStatusCellProps = { + workspace: Workspace; +}; + +const variantByStatusType: Record< + DisplayWorkspaceStatusType, + StatusIndicatorProps["variant"] +> = { + active: "pending", + inactive: "inactive", + success: "success", + error: "failed", + danger: "warning", + warning: "warning", +}; + +const WorkspaceStatusCell: FC = ({ workspace }) => { + const { text, type } = getDisplayWorkspaceStatus( + workspace.latest_build.status, + workspace.latest_build.job, + ); + + return ( + +
+ + + {text} + {workspace.latest_build.status === "running" && + !workspace.health.healthy && ( + + )} + {workspace.dormant_at && ( + + )} + + + {lastUsedMessage(workspace.last_used_at)} + +
+ + ); +}; diff --git a/site/src/utils/workspace.tsx b/site/src/utils/workspace.tsx index 963adf58a7270..32fd6ce153d0e 100644 --- a/site/src/utils/workspace.tsx +++ b/site/src/utils/workspace.tsx @@ -168,14 +168,29 @@ export const getDisplayWorkspaceTemplateName = ( : workspace.template_name; }; +export type DisplayWorkspaceStatusType = + | "success" + | "active" + | "inactive" + | "error" + | "warning" + | "danger"; + +type DisplayWorkspaceStatus = { + text: string; + type: DisplayWorkspaceStatusType; + icon: React.ReactNode; +}; + export const getDisplayWorkspaceStatus = ( workspaceStatus: TypesGen.WorkspaceStatus, provisionerJob?: TypesGen.ProvisionerJob, -) => { +): DisplayWorkspaceStatus => { switch (workspaceStatus) { case undefined: return { text: "Loading", + type: "active", icon: , } as const; case "running": @@ -307,3 +322,23 @@ const FALLBACK_ICON = "/icon/widgets.svg"; export const getResourceIconPath = (resourceType: string): string => { return BUILT_IN_ICON_PATHS[resourceType] ?? FALLBACK_ICON; }; + +export const lastUsedMessage = (lastUsedAt: string | Date): string => { + const t = dayjs(lastUsedAt); + const now = dayjs(); + let message = t.fromNow(); + + if (t.isAfter(now.subtract(1, "hour"))) { + message = "Now"; + } else if (t.isAfter(now.subtract(3, "day"))) { + message = t.fromNow(); + } else if (t.isAfter(now.subtract(1, "month"))) { + message = t.fromNow(); + } else if (t.isAfter(now.subtract(100, "year"))) { + message = t.fromNow(); + } else { + message = "Never"; + } + + return message; +}; diff --git a/site/tailwind.config.js b/site/tailwind.config.js index 3e612408596f5..142a4711b56f3 100644 --- a/site/tailwind.config.js +++ b/site/tailwind.config.js @@ -49,6 +49,7 @@ module.exports = { grey: "hsl(var(--surface-grey))", orange: "hsl(var(--surface-orange))", sky: "hsl(var(--surface-sky))", + red: "hsl(var(--surface-red))", }, border: { DEFAULT: "hsl(var(--border-default))",