Oct 31, 2024 · Oct 31, 2024 · Oct 31, 2024 · Oct 31, 2024
diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.stories.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.stories.tsx
 type Story = StoryObj<typeof ActiveUserChart>;

 export const Example: Story = {};

 export const UserLimit: Story = {
 args: {
 userLimit: 10,
 },
 };
diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
 Tooltip,
 defaults,
 } from "chart.js";
 import annotationPlugin from "chartjs-plugin-annotation";
 import {
 HelpTooltip,
 HelpTooltipContent,
 Title,
 Tooltip,
 Legend,
 annotationPlugin,
 );

 const USER_LIMIT_DISPLAY_THRESHOLD = 60;

 export interface ActiveUserChartProps {
 data: readonly { date: string; amount: number }[];
 interval: "day" | "week";
 userLimit: number | undefined;
 }

 export const ActiveUserChart: FC<ActiveUserChartProps> = ({
 data,
 interval,
 userLimit,
 }) => {
 const theme = useTheme();

 responsive: true,
 animation: false,
 plugins: {
 annotation: {
 annotations: [
 {
 type: "line",
 scaleID: "y",
 display: shouldDisplayUserLimit(userLimit, chartData),
 value: userLimit,
 borderColor: theme.palette.secondary.contrastText,
 borderWidth: 5,
 label: {
 content: "User limit",
 color: theme.palette.primary.contrastText,
 display: true,
 font: { weight: "normal" },
 },
 },
 ],
 },
 legend: {
 display: false,
 },
 precision: 0,
 },
 },

 x: {
 grid: { color: theme.palette.divider },
 ticks: {
 );
 };

 export const ActiveUsersTitle: FC = () => {
 type ActiveUsersTitleProps = {
 interval: "day" | "week";
 };

 export const ActiveUsersTitle: FC<ActiveUsersTitleProps> = ({ interval }) => {
 return (
 <div css={{ display: "flex", alignItems: "center", gap: 8 }}>
 Active Users
 {interval === "day" ? "Daily" : "Weekly"}Active Users
 <HelpTooltip>
 <HelpTooltipTrigger size="small" />
 <HelpTooltipContent>
 <HelpTooltipTitle>How do we calculate active users?</HelpTooltipTitle>
 <HelpTooltipText>
 When a connection is initiated to a user&apos;s workspace they are
 considered an active user. e.g. apps, web terminal, SSH
 considered an active user. e.g. apps, web terminal, SSH. This is for
 measuring user activity and has no connection to license
 consumption.
 </HelpTooltipText>
 </HelpTooltipContent>
 </HelpTooltip>
 </div>
 );
 };

 function shouldDisplayUserLimit(
 userLimit: number | undefined,
 activeUsers: number[],
 ): boolean {
 if (!userLimit || activeUsers.length === 0) {
 return false;
 }
 return (
 Math.max(...activeUsers) >= (userLimit * USER_LIMIT_DISPLAY_THRESHOLD) / 100
 );
 }
diff --git a/.../src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/.../src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx

 export const Page: Story = {};

 export const WithUserLimit: Story = {
 args: {
 deploymentDAUs: MockDeploymentDAUResponse,
 entitlements: MockEntitlementsWithUserLimit,
 },
 };

 export const NoDAUs: Story = {
 args: {
 deploymentDAUs: undefined,
diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
 )}
 {deploymentDAUs && (
 <div css={{ marginBottom: 24, height: 200 }}>
 <ChartSection title={<ActiveUsersTitle />}>
 <ActiveUserChart
 data={deploymentDAUs.entries}
 interval="day"
 userLimit={
 entitlements?.features.user_limit.enabled
 ? entitlements?.features.user_limit.limit
 : undefined
 }
 />
 <ChartSection title={<ActiveUsersTitle interval="day" />}>
 <ActiveUserChart data={deploymentDAUs.entries} interval="day" />
 </ChartSection>
 </div>
 )}
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.stories.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.stories.tsx
 },
 },
 };

 export const LoadedWithUserLimit: Story = {
 ...Loaded,
 args: {
 ...Loaded.args,
 entitlements: MockEntitlementsWithUserLimit,
 },
 };
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
 <Panel {...panelProps}>
 <PanelHeader>
 <PanelTitle>
 <ActiveUsersTitle />
 <ActiveUsersTitleinterval={interval}/>
 </PanelTitle>
 </PanelHeader>
 <PanelContent>
 {data && data.length > 0 && (
 <ActiveUserChart
 interval={interval}
 userLimit={userLimit}
 data={data.map((d) => ({
 amount: d.active_users,
 date: d.start_time,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -22,9 +22,3 @@ export default meta;
		type Story = StoryObj<typeof ActiveUserChart>;

		export const Example: Story = {};

		export const UserLimit: Story = {
		args: {
		userLimit: 10,
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,7 +14,6 @@ import {
		Tooltip,
		defaults,
		} from "chart.js";
		import annotationPlugin from "chartjs-plugin-annotation";
		import {
		HelpTooltip,
		HelpTooltipContent,
Expand All		@@ -36,21 +35,16 @@ ChartJS.register(
		Title,
		Tooltip,
		Legend,
		annotationPlugin,
		);

		const USER_LIMIT_DISPLAY_THRESHOLD = 60;

		export interface ActiveUserChartProps {
		data: readonly { date: string; amount: number }[];
		interval: "day" \| "week";
		userLimit: number \| undefined;
		}

		export const ActiveUserChart: FC<ActiveUserChartProps> = ({
		data,
		interval,
		userLimit,
		}) => {
		const theme = useTheme();

Expand All		@@ -64,24 +58,6 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
		responsive: true,
		animation: false,
		plugins: {
		annotation: {
		annotations: [
		{
		type: "line",
		scaleID: "y",
		display: shouldDisplayUserLimit(userLimit, chartData),
		value: userLimit,
		borderColor: theme.palette.secondary.contrastText,
		borderWidth: 5,
		label: {
		content: "User limit",
		color: theme.palette.primary.contrastText,
		display: true,
		font: { weight: "normal" },
		},
		},
		],
		},
		legend: {
		display: false,
		},
Expand All		@@ -103,7 +79,6 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
		precision: 0,
		},
		},

		x: {
		grid: { color: theme.palette.divider },
		ticks: {
Expand DownExpand Up		@@ -138,32 +113,26 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
		);
		};

		export const ActiveUsersTitle: FC = () => {
		type ActiveUsersTitleProps = {
		interval: "day" \| "week";
		};

		export const ActiveUsersTitle: FC<ActiveUsersTitleProps> = ({ interval }) => {
		return (
		<div css={{ display: "flex", alignItems: "center", gap: 8 }}>
		Active Users
		{interval === "day" ? "Daily" : "Weekly"}Active Users
		<HelpTooltip>
		<HelpTooltipTrigger size="small" />
		<HelpTooltipContent>
		<HelpTooltipTitle>How do we calculate active users?</HelpTooltipTitle>
		<HelpTooltipText>
		When a connection is initiated to a user's workspace they are
		considered an active user. e.g. apps, web terminal, SSH
		considered an active user. e.g. apps, web terminal, SSH. This is for
		measuring user activity and has no connection to license
		consumption.
		</HelpTooltipText>
Comment on lines 128 to 133 Copy link Member matifaliOct 31, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I am okay with the new messaging. BrunoQuaresma reacted with heart emoji Copy link Collaborator stirbyOct 31, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. This is great!
		</HelpTooltipContent>
		</HelpTooltip>
		</div>
		);
		};

		function shouldDisplayUserLimit(
		userLimit: number \| undefined,
		activeUsers: number[],
		): boolean {
		if (!userLimit \|\| activeUsers.length === 0) {
		return false;
		}
		return (
		Math.max(...activeUsers) >= (userLimit * USER_LIMIT_DISPLAY_THRESHOLD) / 100
		);
		}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -50,13 +50,6 @@ type Story = StoryObj<typeof GeneralSettingsPageView>;

		export const Page: Story = {};

		export const WithUserLimit: Story = {
		args: {
		deploymentDAUs: MockDeploymentDAUResponse,
		entitlements: MockEntitlementsWithUserLimit,
		},
		};

		export const NoDAUs: Story = {
		args: {
		deploymentDAUs: undefined,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -49,16 +49,8 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
		)}
		{deploymentDAUs && (
		<div css={{ marginBottom: 24, height: 200 }}>
		<ChartSection title={<ActiveUsersTitle />}>
		<ActiveUserChart
		data={deploymentDAUs.entries}
		interval="day"
		userLimit={
		entitlements?.features.user_limit.enabled
		? entitlements?.features.user_limit.limit
		: undefined
		}
		/>
		<ChartSection title={<ActiveUsersTitle interval="day" />}>
		<ActiveUserChart data={deploymentDAUs.entries} interval="day" />
		</ChartSection>
		</div>
		)}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -868,11 +868,3 @@ export const Loaded: Story = {
		},
		},
		};

		export const LoadedWithUserLimit: Story = {
		...Loaded,
		args: {
		...Loaded.args,
		entitlements: MockEntitlementsWithUserLimit,
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -249,7 +249,7 @@ const ActiveUsersPanel: FC<ActiveUsersPanelProps> = ({
		<Panel {...panelProps}>
		<PanelHeader>
		<PanelTitle>
		<ActiveUsersTitle />
		<ActiveUsersTitleinterval={interval}/>
		</PanelTitle>
		</PanelHeader>
		<PanelContent>
Expand All		@@ -258,7 +258,6 @@ const ActiveUsersPanel: FC<ActiveUsersPanelProps> = ({
		{data && data.length > 0 && (
		<ActiveUserChart
		interval={interval}
		userLimit={userLimit}
		data={data.map((d) => ({
		amount: d.active_users,
		date: d.start_time,
Expand Down