From 592657a5410715a18cccfe0cd02b8af0f6060459 Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Fri, 29 Nov 2024 09:02:59 +0000
Subject: [PATCH 1/5] Show license utilization in general settings

---
 .../GeneralSettingsPageView.stories.tsx       | 55 +++++++++++++++++++
 .../GeneralSettingsPageView.tsx               | 28 ++++++++++
 2 files changed, 83 insertions(+)

diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
index 9147a1a5befff..df37337d52b42 100644
--- a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
+++ b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
@@ -42,6 +42,7 @@ const meta: Meta<typeof GeneralSettingsPageView> = {
 		deploymentDAUs: MockDeploymentDAUResponse,
 		invalidExperiments: [],
 		safeExperiments: [],
+		entitlements: undefined,
 	},
 };
 
@@ -136,3 +137,57 @@ 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 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
index 29edacd08d9e7..22041437a8c67 100644
--- a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -10,6 +10,7 @@ import {
 	ActiveUsersTitle,
 } from "components/ActiveUserChart/ActiveUserChart";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
+import { Gauge } from "components/Gauge/Gauge";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
@@ -36,6 +37,12 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 	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
@@ -54,6 +61,27 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 						</ChartSection>
 					</div>
 				)}
+				{licenseUtilizationPercentage && (
+					<div css={{ marginBottom: 24, height: 200 }}>
+						<ChartSection title="License Utilization">
+							<Gauge
+								value={licenseUtilizationPercentage * 100}
+								label="License Usage"
+							/>
+							<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>
+					</div>
+				)}
 				{invalidExperiments.length > 0 && (
 					<Alert severity="warning">
 						<AlertTitle>Invalid experiments in use:</AlertTitle>

From 4f077c02a3d8fbb58af67433d41a7d3905234996 Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Fri, 29 Nov 2024 09:10:07 +0000
Subject: [PATCH 2/5] Show license utilization in general settings

---
 .../GeneralSettingsPage/GeneralSettingsPageView.tsx   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
index 22041437a8c67..7be82581066a9 100644
--- a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -1,4 +1,5 @@
 import AlertTitle from "@mui/material/AlertTitle";
+import LinearProgress from "@mui/material/LinearProgress";
 import type {
 	DAUsResponse,
 	Entitlements,
@@ -10,7 +11,6 @@ import {
 	ActiveUsersTitle,
 } from "components/ActiveUserChart/ActiveUserChart";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
-import { Gauge } from "components/Gauge/Gauge";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
@@ -64,9 +64,14 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 				{licenseUtilizationPercentage && (
 					<div css={{ marginBottom: 24, height: 200 }}>
 						<ChartSection title="License Utilization">
-							<Gauge
+							<LinearProgress
+								variant="determinate"
 								value={licenseUtilizationPercentage * 100}
-								label="License Usage"
+								css={{
+									height: 24,
+									borderRadius: 4,
+									marginBottom: 8,
+								}}
 							/>
 							<span
 								css={{

From 2e2bfb74fdffed58c4ad6ac9fc5222d46c0ba312 Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 2 Dec 2024 11:16:48 +0000
Subject: [PATCH 3/5] allow license utilization to render gracefully when a
 user exceeds their limit

---
 .../GeneralSettingsPageView.stories.tsx       | 17 ++++++
 .../GeneralSettingsPageView.tsx               | 53 ++++++++++---------
 2 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
index df37337d52b42..05ed426d5dcc9 100644
--- a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
+++ b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.stories.tsx
@@ -174,6 +174,23 @@ export const HighLicenseUtilization: Story = {
 	},
 };
 
+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: {
diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
index 7be82581066a9..b710b3ec272e6 100644
--- a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -62,30 +62,35 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 					</div>
 				)}
 				{licenseUtilizationPercentage && (
-					<div css={{ marginBottom: 24, height: 200 }}>
-						<ChartSection title="License Utilization">
-							<LinearProgress
-								variant="determinate"
-								value={licenseUtilizationPercentage * 100}
-								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>
-					</div>
+					<ChartSection title="License Utilization">
+						<LinearProgress
+							variant="determinate"
+							value={(licenseUtilizationPercentage % 1) * 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>
 				)}
 				{invalidExperiments.length > 0 && (
 					<Alert severity="warning">

From 46f19c6eeeab84b17f509c52b1315de8603bc82f Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 2 Dec 2024 11:51:37 +0000
Subject: [PATCH 4/5] make fmt

---
 .../GeneralSettingsPage/GeneralSettingsPageView.tsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
index b710b3ec272e6..ba25a98909141 100644
--- a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -70,8 +70,8 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 								licenseUtilizationPercentage < 0.9
 									? "primary"
 									: licenseUtilizationPercentage < 1
-									? "warning"
-									: "error"
+										? "warning"
+										: "error"
 							}
 							css={{
 								height: 24,

From 8d98a97d91a0d28b781759a55d96d01938e0a2d7 Mon Sep 17 00:00:00 2001
From: Sas Swart <sas.swart.cdk@gmail.com>
Date: Mon, 2 Dec 2024 21:20:08 +0200
Subject: [PATCH 5/5] Update
 site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: ケイラ <mckayla@hey.com>
---
 .../GeneralSettingsPage/GeneralSettingsPageView.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
index ba25a98909141..df5550d70e965 100644
--- a/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
+++ b/site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -65,7 +65,7 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 					<ChartSection title="License Utilization">
 						<LinearProgress
 							variant="determinate"
-							value={(licenseUtilizationPercentage % 1) * 100}
+							value={Math.min(licenseUtilizationPercentage * 100, 100)}
 							color={
 								licenseUtilizationPercentage < 0.9
 									? "primary"