coder · BrunoQuaresma · Jan 17, 2025 · Jan 13, 2025 · Jan 14, 2025 · Jan 14, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -2089,6 +2089,19 @@ class ApiMethods {
 		return response.data;
 	};
 
+	getInsightsUserStatusCounts = async (
+		offset = Math.trunc(new Date().getTimezoneOffset() / 60),
+	): Promise<TypesGen.GetUserStatusCountsResponse> => {
+		const searchParams = new URLSearchParams({
+			tz_offset: offset.toString(),
+		});
+		const response = await this.axios.get(
+			`/api/v2/insights/user-status-counts?${searchParams}`,
+		);
+
+		return response.data;
+	};
+
 	getInsightsTemplate = async (
 		params: InsightsTemplateParams,
 	): Promise<TypesGen.TemplateInsightsResponse> => {

diff --git a/site/src/api/queries/insights.ts b/site/src/api/queries/insights.ts
@@ -1,4 +1,6 @@
 import { API, type InsightsParams, type InsightsTemplateParams } from "api/api";
+import type { GetUserStatusCountsResponse } from "api/typesGenerated";
+import { type UseQueryOptions, UseQueryResult } from "react-query";
 
 export const insightsTemplate = (params: InsightsTemplateParams) => {
 	return {
@@ -20,3 +22,15 @@ export const insightsUserActivity = (params: InsightsParams) => {
 		queryFn: () => API.getInsightsUserActivity(params),
 	};
 };
+
+export const insightsUserStatusCounts = () => {
+	return {
+		queryKey: ["insights", "userStatusCounts"],
+		queryFn: () => API.getInsightsUserStatusCounts(),
+		select: (data) => data.status_counts,
+	} satisfies UseQueryOptions<
+		GetUserStatusCountsResponse,
+		unknown,
+		GetUserStatusCountsResponse["status_counts"]
+	>;
+};
diff --git a/site/src/components/Chart/Chart.stories.tsx b/site/src/components/Chart/Chart.stories.tsx
@@ -19,7 +19,7 @@ const chartData = [
 const chartConfig = {
 	users: {
 		label: "Users",
-		color: "hsl(var(--chart-1))",
+		color: "hsl(var(--highlight-purple))",
 	},
 } satisfies ChartConfig;
 

diff --git a/site/src/components/Chart/Chart.tsx b/site/src/components/Chart/Chart.tsx
@@ -66,6 +66,8 @@ export const ChartContainer = React.forwardRef<
 					"[&_.recharts-sector[stroke='#fff']]:stroke-transparent",
 					"[&_.recharts-sector]:outline-none",
 					"[&_.recharts-surface]:outline-none",
+					"[&_.recharts-text]:fill-content-secondary [&_.recharts-text]:font-medium",
+					"[&_.recharts-cartesian-axis-line]:stroke-[hsl(var(--border-default))]",
 					className,
 				)}
 				{...props}
@@ -195,7 +197,7 @@ export const ChartTooltipContent = React.forwardRef<
 			<div
 				ref={ref}
 				className={cn(
-					"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+					"grid min-w-[8rem] items-start gap-1 rounded-lg border border-solid border-border bg-surface-primary px-3 py-2 text-xs shadow-xl",
 					className,
 				)}
 			>

diff --git a/site/src/components/Link/Link.tsx b/site/src/components/Link/Link.tsx
@@ -1,4 +1,4 @@
-import { Slot } from "@radix-ui/react-slot";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 import { SquareArrowOutUpRightIcon } from "lucide-react";
 import { forwardRef } from "react";
@@ -38,7 +38,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
 				ref={ref}
 				{...props}
 			>
-				{children}
+				<Slottable>{children}</Slottable>
 				<SquareArrowOutUpRightIcon aria-hidden="true" />
 			</Comp>
 		);

diff --git a/site/src/index.css b/site/src/index.css
@@ -28,11 +28,8 @@
 		--border-success: 142 76% 36%;
 		--border-destructive: 0 84% 60%;
 		--radius: 0.5rem;
-		--chart-1: 12 76% 61%;
-		--chart-2: 173 58% 39%;
-		--chart-3: 197 37% 24%;
-		--chart-4: 43 74% 66%;
-		--chart-5: 27 87% 67%;
+		--highlight-purple: 262 83% 58%;
+		--highlight-green: 143 64% 24%;
 		--border: 240 5.9% 90%;
 		--input: 240 5.9% 90%;
 		--ring: 240 10% 3.9%;
@@ -59,11 +56,8 @@
 		--border-default: 240 4% 16%;
 		--border-success: 142 76% 36%;
 		--border-destructive: 0 91% 71%;
-		--chart-1: 220 70% 50%;
-		--chart-2: 160 60% 45%;
-		--chart-3: 30 80% 55%;
-		--chart-4: 280 65% 60%;
-		--chart-5: 340 75% 55%;
+		--highlight-purple: 252 95% 85%;
+		--highlight-green: 141 79% 85%;
 		--border: 240 3.7% 15.9%;
 		--input: 240 3.7% 15.9%;
 		--ring: 240 4.9% 83.9%;

diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
@@ -11,11 +11,9 @@ import { GeneralSettingsPageView } from "./GeneralSettingsPageView";
 
 const GeneralSettingsPage: FC = () => {
 	const { deploymentConfig } = useDeploymentSettings();
-	const deploymentDAUsQuery = useQuery(deploymentDAUs());
 	const safeExperimentsQuery = useQuery(availableExperiments());
 
 	const { metadata } = useEmbeddedMetadata();
-	const entitlementsQuery = useQuery(entitlements(metadata.entitlements));
 	const enabledExperimentsQuery = useQuery(experiments(metadata.experiments));
 
 	const safeExperiments = safeExperimentsQuery.data?.safe ?? [];
@@ -24,16 +22,16 @@ const GeneralSettingsPage: FC = () => {
 			return !safeExperiments.includes(exp);
 		}) ?? [];
 
+	const { data: dailyActiveUsers } = useQuery(deploymentDAUs());
+
 	return (
 		<>
 			<Helmet>
 				<title>{pageTitle("General Settings")}</title>
 			</Helmet>
 			<GeneralSettingsPageView
 				deploymentOptions={deploymentConfig.options}
-				deploymentDAUs={deploymentDAUsQuery.data}
-				deploymentDAUsError={deploymentDAUsQuery.error}
-				entitlements={entitlementsQuery.data}
+				dailyActiveUsers={dailyActiveUsers}
 				invalidExperiments={invalidExperiments}
 				safeExperiments={safeExperiments}
 			/>

diff --git a/.../src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/.../src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
@@ -1,9 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import {
-	MockDeploymentDAUResponse,
-	MockEntitlementsWithUserLimit,
-	mockApiError,
-} from "testHelpers/entities";
+import { MockDeploymentDAUResponse } from "testHelpers/entities";
 import { GeneralSettingsPageView } from "./GeneralSettingsPageView";
 
 const meta: Meta<typeof GeneralSettingsPageView> = {
@@ -39,10 +35,9 @@ const meta: Meta<typeof GeneralSettingsPageView> = {
 				hidden: false,
 			},
 		],
-		deploymentDAUs: MockDeploymentDAUResponse,
+		dailyActiveUsers: MockDeploymentDAUResponse,
 		invalidExperiments: [],
 		safeExperiments: [],
-		entitlements: undefined,
 	},
 };
 
@@ -51,21 +46,6 @@ type Story = StoryObj<typeof GeneralSettingsPageView>;
 
 export const Page: Story = {};
 
-export const NoDAUs: Story = {
-	args: {
-		deploymentDAUs: undefined,
-	},
-};
-
-export const DAUError: Story = {
-	args: {
-		deploymentDAUs: undefined,
-		deploymentDAUsError: mockApiError({
-			message: "Error fetching DAUs.",
-		}),
-	},
-};
-
 export const allExperimentsEnabled: Story = {
 	args: {
 		deploymentOptions: [
@@ -137,74 +117,3 @@ export const invalidExperimentsEnabled: Story = {
 		invalidExperiments: ["invalid"],
 	},
 };
-
-export const WithLicenseUtilization: Story = {
-	args: {
-		entitlements: {
-			...MockEntitlementsWithUserLimit,
-			features: {
-				...MockEntitlementsWithUserLimit.features,
-				user_limit: {
-					...MockEntitlementsWithUserLimit.features.user_limit,
-					enabled: true,
-					actual: 75,
-					limit: 100,
-					entitlement: "entitled",
-				},
-			},
-		},
-	},
-};
-
-export const HighLicenseUtilization: Story = {
-	args: {
-		entitlements: {
-			...MockEntitlementsWithUserLimit,
-			features: {
-				...MockEntitlementsWithUserLimit.features,
-				user_limit: {
-					...MockEntitlementsWithUserLimit.features.user_limit,
-					enabled: true,
-					actual: 95,
-					limit: 100,
-					entitlement: "entitled",
-				},
-			},
-		},
-	},
-};
-
-export const ExceedsLicenseUtilization: Story = {
-	args: {
-		entitlements: {
-			...MockEntitlementsWithUserLimit,
-			features: {
-				...MockEntitlementsWithUserLimit.features,
-				user_limit: {
-					...MockEntitlementsWithUserLimit.features.user_limit,
-					enabled: true,
-					actual: 100,
-					limit: 95,
-					entitlement: "entitled",
-				},
-			},
-		},
-	},
-};
-export const NoLicenseLimit: Story = {
-	args: {
-		entitlements: {
-			...MockEntitlementsWithUserLimit,
-			features: {
-				...MockEntitlementsWithUserLimit.features,
-				user_limit: {
-					...MockEntitlementsWithUserLimit.features.user_limit,
-					enabled: false,
-					actual: 0,
-					limit: 0,
-					entitlement: "entitled",
-				},
-			},
-		},
-	},
-};
diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -1,48 +1,32 @@
 import AlertTitle from "@mui/material/AlertTitle";
-import LinearProgress from "@mui/material/LinearProgress";
 import type {
 	DAUsResponse,
 	Entitlements,
 	Experiments,
 	SerpentOption,
 } from "api/typesGenerated";
-import {
-	ActiveUserChart,
-	ActiveUsersTitle,
-} from "components/ActiveUserChart/ActiveUserChart";
-import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
 import { useDeploymentOptions } from "utils/deployOptions";
 import { docs } from "utils/docs";
 import { Alert } from "../../../components/Alert/Alert";
 import OptionsTable from "../OptionsTable";
-import { ChartSection } from "./ChartSection";
+import { UserEngagementChart } from "./UserEngagementChart";
 
 export type GeneralSettingsPageViewProps = {
 	deploymentOptions: SerpentOption[];
-	deploymentDAUs?: DAUsResponse;
-	deploymentDAUsError: unknown;
-	entitlements: Entitlements | undefined;
+	dailyActiveUsers: DAUsResponse | undefined;
 	readonly invalidExperiments: Experiments | string[];
 	readonly safeExperiments: Experiments | string[];
 };
 
 export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 	deploymentOptions,
-	deploymentDAUs,
-	deploymentDAUsError,
-	entitlements,
+	dailyActiveUsers,
 	safeExperiments,
 	invalidExperiments,
 }) => {
-	const licenseUtilizationPercentage =
-		entitlements?.features?.user_limit?.actual &&
-		entitlements?.features?.user_limit?.limit
-			? entitlements.features.user_limit.actual /
-				entitlements.features.user_limit.limit
-			: undefined;
 	return (
 		<>
 			<SettingsHeader
@@ -51,47 +35,12 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 				docsHref={docs("/admin/setup")}
 			/>
 			<Stack spacing={4}>
-				{Boolean(deploymentDAUsError) && (
-					<ErrorAlert error={deploymentDAUsError} />
-				)}
-				{deploymentDAUs && (
-					<div css={{ marginBottom: 24, height: 200 }}>
-						<ChartSection title={<ActiveUsersTitle interval="day" />}>
-							<ActiveUserChart data={deploymentDAUs.entries} interval="day" />
-						</ChartSection>
-					</div>
-				)}
-				{licenseUtilizationPercentage && (
-					<ChartSection title="License Utilization">
-						<LinearProgress
-							variant="determinate"
-							value={Math.min(licenseUtilizationPercentage * 100, 100)}
-							color={
-								licenseUtilizationPercentage < 0.9
-									? "primary"
-									: licenseUtilizationPercentage < 1
-										? "warning"
-										: "error"
-							}
-							css={{
-								height: 24,
-								borderRadius: 4,
-								marginBottom: 8,
-							}}
-						/>
-						<span
-							css={{
-								fontSize: "0.75rem",
-								display: "block",
-								textAlign: "right",
-							}}
-						>
-							{Math.round(licenseUtilizationPercentage * 100)}% used (
-							{entitlements!.features.user_limit.actual}/
-							{entitlements!.features.user_limit.limit} users)
-						</span>
-					</ChartSection>
-				)}
+				<UserEngagementChart
+					data={dailyActiveUsers?.entries.map((i) => ({
+						date: i.date,
+						users: i.amount,
+					}))}
+				/>
 				{invalidExperiments.length > 0 && (
 					<Alert severity="warning">
 						<AlertTitle>Invalid experiments in use:</AlertTitle>