Jan 17, 2025 · Jan 13, 2025 · Jan 14, 2025 · Jan 14, 2025 · Jan 14, 2025 · Jan 14, 2025
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
 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
 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 {
 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
 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
 "[&_.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}
 <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-solidborder-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
 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";
 ref={ref}
 {...props}
 >
 {children}
 <Slottable>{children}</Slottable>
 <SquareArrowOutUpRightIcon aria-hidden="true" />
 </Comp>
 );
diff --git a/site/src/index.css b/site/src/index.css
 --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%;
 --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

 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 ?? [];
 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
 importtype{Meta,StoryObj}from"@storybook/react";
 import{
 MockDeploymentDAUResponse,
 MockEntitlementsWithUserLimit,
 mockApiError,
 }from"testHelpers/entities";
 import{MockDeploymentDAUResponse}from"testHelpers/entities";
 import{GeneralSettingsPageView}from"./GeneralSettingsPageView";

 constmeta:Meta<typeofGeneralSettingsPageView>={
 hidden:false,
 },
 ],
 deploymentDAUs:MockDeploymentDAUResponse,
 dailyActiveUsers:MockDeploymentDAUResponse,
 invalidExperiments:[],
 safeExperiments:[],
 entitlements:undefined,
 },
 };


 exportconstPage:Story={};

 exportconstNoDAUs:Story={
 args:{
 deploymentDAUs:undefined,
 },
 };

 exportconstDAUError:Story={
 args:{
 deploymentDAUs:undefined,
 deploymentDAUsError:mockApiError({
 message:"Error fetching DAUs.",
 }),
 },
 };

 exportconstallExperimentsEnabled:Story={
 args:{
 deploymentOptions:[
 invalidExperiments:["invalid"],
 },
 };

 exportconstWithLicenseUtilization:Story={
 args:{
 entitlements:{
 ...MockEntitlementsWithUserLimit,
 features:{
 ...MockEntitlementsWithUserLimit.features,
 user_limit:{
 ...MockEntitlementsWithUserLimit.features.user_limit,
 enabled:true,
 actual:75,
 limit:100,
 entitlement:"entitled",
 },
 },
 },
 },
 };

 exportconstHighLicenseUtilization:Story={
 args:{
 entitlements:{
 ...MockEntitlementsWithUserLimit,
 features:{
 ...MockEntitlementsWithUserLimit.features,
 user_limit:{
 ...MockEntitlementsWithUserLimit.features.user_limit,
 enabled:true,
 actual:95,
 limit:100,
 entitlement:"entitled",
 },
 },
 },
 },
 };

 exportconstExceedsLicenseUtilization:Story={
 args:{
 entitlements:{
 ...MockEntitlementsWithUserLimit,
 features:{
 ...MockEntitlementsWithUserLimit.features,
 user_limit:{
 ...MockEntitlementsWithUserLimit.features.user_limit,
 enabled:true,
 actual:100,
 limit:95,
 entitlement:"entitled",
 },
 },
 },
 },
 };
 exportconstNoLicenseLimit: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
 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
 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>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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> => {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 {
Expand All		@@ -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"]
		>;
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -19,7 +19,7 @@ const chartData = [
		const chartConfig = {
		users: {
		label: "Users",
		color: "hsl(var(--chart-1))",
		color: "hsl(var(--highlight-purple))",
		},
		} satisfies ChartConfig;

Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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}
Expand DownExpand Up		@@ -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-solidborder-border bg-surface-primary px-3 py-2 text-xs shadow-xl",
		className,
		)}
		>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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";
Expand DownExpand Up		@@ -38,7 +38,7 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
		ref={ref}
		{...props}
		>
		{children}
		<Slottable>{children}</Slottable>
		<SquareArrowOutUpRightIcon aria-hidden="true" />
		</Comp>
		);
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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%;
Expand All		@@ -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%;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 ?? [];
Expand All		@@ -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}
		/>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,9 +1,5 @@
		importtype{Meta,StoryObj}from"@storybook/react";
		import{
		MockDeploymentDAUResponse,
		MockEntitlementsWithUserLimit,
		mockApiError,
		}from"testHelpers/entities";
		import{MockDeploymentDAUResponse}from"testHelpers/entities";
		import{GeneralSettingsPageView}from"./GeneralSettingsPageView";

		constmeta:Meta<typeofGeneralSettingsPageView>={
Expand DownExpand Up		@@ -39,10 +35,9 @@ const meta: Meta<typeof GeneralSettingsPageView> = {
		hidden:false,
		},
		],
		deploymentDAUs:MockDeploymentDAUResponse,
		dailyActiveUsers:MockDeploymentDAUResponse,
		invalidExperiments:[],
		safeExperiments:[],
		entitlements:undefined,
		},
		};

Expand All		@@ -51,21 +46,6 @@ type Story = StoryObj<typeof GeneralSettingsPageView>;

		exportconstPage:Story={};

		exportconstNoDAUs:Story={
		args:{
		deploymentDAUs:undefined,
		},
		};

		exportconstDAUError:Story={
		args:{
		deploymentDAUs:undefined,
		deploymentDAUsError:mockApiError({
		message:"Error fetching DAUs.",
		}),
		},
		};

		exportconstallExperimentsEnabled:Story={
		args:{
		deploymentOptions:[
Expand DownExpand Up		@@ -137,74 +117,3 @@ export const invalidExperimentsEnabled: Story = {
		invalidExperiments:["invalid"],
		},
		};

		exportconstWithLicenseUtilization:Story={
		args:{
		entitlements:{
		...MockEntitlementsWithUserLimit,
		features:{
		...MockEntitlementsWithUserLimit.features,
		user_limit:{
		...MockEntitlementsWithUserLimit.features.user_limit,
		enabled:true,
		actual:75,
		limit:100,
		entitlement:"entitled",
		},
		},
		},
		},
		};

		exportconstHighLicenseUtilization:Story={
		args:{
		entitlements:{
		...MockEntitlementsWithUserLimit,
		features:{
		...MockEntitlementsWithUserLimit.features,
		user_limit:{
		...MockEntitlementsWithUserLimit.features.user_limit,
		enabled:true,
		actual:95,
		limit:100,
		entitlement:"entitled",
		},
		},
		},
		},
		};

		exportconstExceedsLicenseUtilization:Story={
		args:{
		entitlements:{
		...MockEntitlementsWithUserLimit,
		features:{
		...MockEntitlementsWithUserLimit.features,
		user_limit:{
		...MockEntitlementsWithUserLimit.features.user_limit,
		enabled:true,
		actual:100,
		limit:95,
		entitlement:"entitled",
		},
		},
		},
		},
		};
		exportconstNoLicenseLimit:Story={
		args:{
		entitlements:{
		...MockEntitlementsWithUserLimit,
		features:{
		...MockEntitlementsWithUserLimit.features,
		user_limit:{
		...MockEntitlementsWithUserLimit.features.user_limit,
		enabled:false,
		actual:0,
		limit:0,
		entitlement:"entitled",
		},
		},
		},
		},
		};
Original file line number	Diff line number	Diff line change
		@@ -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
Expand All		@@ -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
SasSwart marked this conversation as resolved. Show resolvedHide resolved
		data={dailyActiveUsers?.entries.map((i) => ({
		date: i.date,
		users: i.amount,
		}))}
		/>
		{invalidExperiments.length > 0 && (
		<Alert severity="warning">
		<AlertTitle>Invalid experiments in use:</AlertTitle>
Expand Down