From 10181956b8e7e68a1c0aa0e3e8ae99f4a59a8dbc Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 29 Oct 2024 12:36:26 +0000 Subject: [PATCH 1/2] fix(site): fix workspace timings to use theme colors --- .../workspaces/WorkspaceTiming/Chart/Bar.tsx | 6 +- .../WorkspaceTiming/Chart/Blocks.tsx | 14 ++--- .../WorkspaceTiming/ResourcesChart.tsx | 58 ++++++++++--------- .../WorkspaceTiming/ScriptsChart.tsx | 53 +++++++++-------- .../WorkspaceTimings.stories.tsx | 4 ++ 5 files changed, 75 insertions(+), 60 deletions(-) diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx index a98d91ae428b5..3ed7fdcd31898 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx @@ -91,7 +91,7 @@ const styles = { left: -8, }, }), - clickable: { + clickable: (theme) => ({ cursor: "pointer", // We need to make the bar width at least 34px to allow the "..." icons to be displayed. // The calculation is border * 1 + side paddings * 2 + icon width (which is 18px) @@ -99,7 +99,7 @@ const styles = { "&:focus, &:hover, &:active": { outline: "none", - borderColor: "#38BDF8", + borderColor: theme.roles.active.outline, }, - }, + }), } satisfies Record>; diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx index 752e53c5b5c4a..417e2c5426353 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx @@ -52,16 +52,16 @@ const styles = { gap: spaceBetweenBlocks, alignItems: "center", }, - block: { + block: (theme) =>({ borderRadius: 4, height: 18, - backgroundColor: "#082F49", - border: "1px solid #38BDF8", + backgroundColor: theme.roles.active.background, + border: `1px solid ${theme.roles.active.outline}`, flexShrink: 0, flex: 1, - }, - more: { - color: "#38BDF8", + }), + more: (theme) => ({ + color: theme.roles.active.outline, lineHeight: 0, flexShrink: 0, flex: 1, @@ -69,5 +69,5 @@ const styles = { "& svg": { fontSize: moreIconSize, }, - }, + }), } satisfies Record>; diff --git a/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx b/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx index b1c69b6d1baf7..d05a1cc0ee857 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx @@ -32,32 +32,7 @@ import { } from "./Chart/utils"; import type { StageCategory } from "./StagesChart"; -const legendsByAction: Record = { - "state refresh": { - label: "state refresh", - }, - create: { - label: "create", - colors: { - fill: "#022C22", - stroke: "#BBF7D0", - }, - }, - delete: { - label: "delete", - colors: { - fill: "#422006", - stroke: "#FDBA74", - }, - }, - read: { - label: "read", - colors: { - fill: "#082F49", - stroke: "#38BDF8", - }, - }, -}; + type ResourceTiming = { name: string; @@ -86,6 +61,8 @@ export const ResourcesChart: FC = ({ const visibleTimings = timings.filter( (t) => !isCoderResource(t.name) && t.name.includes(filter), ); + const theme = useTheme(); + const legendsByAction = getLegendsByAction(theme); const visibleLegends = [...new Set(visibleTimings.map((t) => t.action))].map( (a) => legendsByAction[a], ); @@ -168,3 +145,32 @@ export const isCoderResource = (resource: string) => { resource.startsWith("coder_") ); }; + +function getLegendsByAction(theme: Theme): Record { + return { + "state refresh": { + label: "state refresh", + }, + create: { + label: "create", + colors: { + fill: theme.roles.success.background, + stroke: theme.roles.success.outline, + }, + }, + delete: { + label: "delete", + colors: { + fill: theme.roles.warning.background, + stroke: theme.roles.warning.outline, + }, + }, + read: { + label: "read", + colors: { + fill: theme.roles.active.background, + stroke: theme.roles.active.outline, + }, + }, + } +} diff --git a/site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx b/site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx index 5dfc57e51098f..266907b0546bc 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx @@ -27,30 +27,7 @@ import { mergeTimeRanges, } from "./Chart/utils"; import type { StageCategory } from "./StagesChart"; - -const legendsByStatus: Record = { - ok: { - label: "success", - colors: { - fill: "#022C22", - stroke: "#BBF7D0", - }, - }, - exit_failure: { - label: "failure", - colors: { - fill: "#450A0A", - stroke: "#F87171", - }, - }, - timeout: { - label: "timed out", - colors: { - fill: "#422006", - stroke: "#FDBA74", - }, - }, -}; +import { type Theme, useTheme } from "@emotion/react"; type ScriptTiming = { name: string; @@ -77,6 +54,8 @@ export const ScriptsChart: FC = ({ const [ticks, scale] = makeTicks(totalTime); const [filter, setFilter] = useState(""); const visibleTimings = timings.filter((t) => t.name.includes(filter)); + const theme = useTheme() + const legendsByStatus = getLegendsByStatus(theme); const visibleLegends = [...new Set(visibleTimings.map((t) => t.status))].map( (s) => legendsByStatus[s], ); @@ -151,3 +130,29 @@ export const ScriptsChart: FC = ({ ); }; + +function getLegendsByStatus(theme: Theme): Record { + return { + ok: { + label: "success", + colors: { + fill: theme.roles.success.background, + stroke: theme.roles.success.outline, + }, + }, + exit_failure: { + label: "failure", + colors: { + fill: theme.roles.error.background, + stroke: theme.roles.error.outline, + }, + }, + timeout: { + label: "timed out", + colors: { + fill: theme.roles.warning.background, + stroke: theme.roles.warning.outline, + }, + }, + } +}; diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx index b1bf487c52732..8ea1f04174a75 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { expect, userEvent, waitFor, within } from "@storybook/test"; import { WorkspaceTimings } from "./WorkspaceTimings"; import { WorkspaceTimingsResponse } from "./storybookData"; +import { chromatic } from "testHelpers/chromatic"; const meta: Meta = { title: "modules/workspaces/WorkspaceTimings", @@ -11,6 +12,9 @@ const meta: Meta = { provisionerTimings: WorkspaceTimingsResponse.provisioner_timings, agentScriptTimings: WorkspaceTimingsResponse.agent_script_timings, }, + parameters: { + chromatic, + } }; export default meta; From e8f2e7e142499c6fa2d99e9b8fedc65b4af0a6f4 Mon Sep 17 00:00:00 2001 From: BrunoQuaresma Date: Tue, 29 Oct 2024 15:54:47 +0000 Subject: [PATCH 2/2] Fix fmt --- .../modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx | 2 +- .../modules/workspaces/WorkspaceTiming/ResourcesChart.tsx | 4 +--- .../modules/workspaces/WorkspaceTiming/ScriptsChart.tsx | 8 ++++---- .../WorkspaceTiming/WorkspaceTimings.stories.tsx | 4 ++-- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx index 417e2c5426353..00660c39f495c 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx @@ -52,7 +52,7 @@ const styles = { gap: spaceBetweenBlocks, alignItems: "center", }, - block: (theme) =>({ + block: (theme) => ({ borderRadius: 4, height: 18, backgroundColor: theme.roles.active.background, diff --git a/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx b/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx index d05a1cc0ee857..3f1f7d761e748 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx @@ -32,8 +32,6 @@ import { } from "./Chart/utils"; import type { StageCategory } from "./StagesChart"; - - type ResourceTiming = { name: string; source: string; @@ -172,5 +170,5 @@ function getLegendsByAction(theme: Theme): Record { stroke: theme.roles.active.outline, }, }, - } + }; } diff --git a/site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx b/site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx index 266907b0546bc..64d97bff7cfdb 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx @@ -1,3 +1,4 @@ +import { type Theme, useTheme } from "@emotion/react"; import { type FC, useState } from "react"; import { Bar } from "./Chart/Bar"; import { @@ -27,7 +28,6 @@ import { mergeTimeRanges, } from "./Chart/utils"; import type { StageCategory } from "./StagesChart"; -import { type Theme, useTheme } from "@emotion/react"; type ScriptTiming = { name: string; @@ -54,7 +54,7 @@ export const ScriptsChart: FC = ({ const [ticks, scale] = makeTicks(totalTime); const [filter, setFilter] = useState(""); const visibleTimings = timings.filter((t) => t.name.includes(filter)); - const theme = useTheme() + const theme = useTheme(); const legendsByStatus = getLegendsByStatus(theme); const visibleLegends = [...new Set(visibleTimings.map((t) => t.status))].map( (s) => legendsByStatus[s], @@ -154,5 +154,5 @@ function getLegendsByStatus(theme: Theme): Record { stroke: theme.roles.warning.outline, }, }, - } -}; + }; +} diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx index 8ea1f04174a75..f546e271395ab 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx @@ -1,8 +1,8 @@ import type { Meta, StoryObj } from "@storybook/react"; import { expect, userEvent, waitFor, within } from "@storybook/test"; +import { chromatic } from "testHelpers/chromatic"; import { WorkspaceTimings } from "./WorkspaceTimings"; import { WorkspaceTimingsResponse } from "./storybookData"; -import { chromatic } from "testHelpers/chromatic"; const meta: Meta = { title: "modules/workspaces/WorkspaceTimings", @@ -14,7 +14,7 @@ const meta: Meta = { }, parameters: { chromatic, - } + }, }; export default meta;