- changed ManagedAgentsConsumption component to only have a managedAgentFeature param

ibetitsmike · ibetitsmike · commit 721561b2d506 · 2025-07-28T10:10:33.000Z
- added managedAgentFeature validation and stories for various failed states
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx
@@ -51,9 +51,6 @@ const LicensesSettingsPageView: FC<Props> = ({
 }) => {
 	const theme = useTheme();
 	const { width, height } = useWindowSize();
-	const managedAgentLimitStarts = managedAgentFeature?.usage_period?.start;
-	const managedAgentLimitExpires = managedAgentFeature?.usage_period?.end;
-	const managedAgentFeatureEnabled = managedAgentFeature?.enabled;
 
 	return (
 		<>
@@ -158,15 +155,8 @@ const LicensesSettingsPageView: FC<Props> = ({
 					/>
 				)}
 
-				{licenses && licenses.length > 0 && managedAgentFeature && (
-					<ManagedAgentsConsumption
-						usage={managedAgentFeature.actual || 0}
-						included={managedAgentFeature.soft_limit || 0}
-						limit={managedAgentFeature.limit || 0}
-						startDate={managedAgentLimitStarts || ""}
-						endDate={managedAgentLimitExpires || ""}
-						enabled={managedAgentFeatureEnabled}
-					/>
+				{licenses && licenses.length > 0 && (
+					<ManagedAgentsConsumption managedAgentFeature={managedAgentFeature} />
 				)}
 			</div>
 		</>
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.stories.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.stories.tsx
@@ -6,11 +6,18 @@ const meta: Meta<typeof ManagedAgentsConsumption> = {
 		"pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption",
 	component: ManagedAgentsConsumption,
 	args: {
-		usage: 50000,
-		included: 60000,
-		limit: 120000,
-		startDate: "February 27, 2025",
-		endDate: "February 27, 2026",
+		managedAgentFeature: {
+			enabled: true,
+			actual: 50000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
 	},
 };
 
@@ -21,41 +28,169 @@ export const Default: Story = {};
 
 export const NearLimit: Story = {
 	args: {
-		usage: 115000,
-		included: 60000,
-		limit: 120000,
+		managedAgentFeature: {
+			enabled: true,
+			actual: 115000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
 	},
 };
 
 export const OverIncluded: Story = {
 	args: {
-		usage: 80000,
-		included: 60000,
-		limit: 120000,
+		managedAgentFeature: {
+			enabled: true,
+			actual: 80000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
 	},
 };
 
 export const LowUsage: Story = {
 	args: {
-		usage: 25000,
-		included: 60000,
-		limit: 120000,
+		managedAgentFeature: {
+			enabled: true,
+			actual: 25000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
 	},
 };
 
 export const IncludedAtLimit: Story = {
 	args: {
-		usage: 25000,
-		included: 30500,
-		limit: 30500,
+		managedAgentFeature: {
+			enabled: true,
+			actual: 25000,
+			soft_limit: 30500,
+			limit: 30500,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
 	},
 };
 
 export const Disabled: Story = {
 	args: {
-		enabled: false,
-		usage: Number.NaN,
-		included: Number.NaN,
-		limit: Number.NaN,
+		managedAgentFeature: {
+			enabled: false,
+			actual: undefined,
+			soft_limit: undefined,
+			limit: undefined,
+			usage_period: undefined,
+			entitlement: "not_entitled",
+		},
+	},
+};
+
+export const NoFeature: Story = {
+	args: {
+		managedAgentFeature: undefined,
+	},
+};
+
+// Error States for Validation
+export const ErrorMissingData: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: undefined,
+			soft_limit: undefined,
+			limit: undefined,
+			usage_period: undefined,
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const ErrorNegativeValues: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: -100,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const ErrorSoftLimitExceedsLimit: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 50000,
+			soft_limit: 150000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2025",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const ErrorInvalidDates: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 50000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "invalid-date",
+				end: "February 27, 2026",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
+	},
+};
+
+export const ErrorEndBeforeStart: Story = {
+	args: {
+		managedAgentFeature: {
+			enabled: true,
+			actual: 50000,
+			soft_limit: 60000,
+			limit: 120000,
+			usage_period: {
+				start: "February 27, 2026",
+				end: "February 27, 2025",
+				issued_at: "February 27, 2025",
+			},
+			entitlement: "entitled",
+		},
 	},
 };
diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.tsx
@@ -1,5 +1,7 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import MuiLink from "@mui/material/Link";
+import type { Feature } from "api/typesGenerated";
+import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Button } from "components/Button/Button";
 import {
 	Collapsible,
@@ -12,23 +14,65 @@ import { ChevronRightIcon } from "lucide-react";
 import type { FC } from "react";
 
 interface ManagedAgentsConsumptionProps {
-	usage: number;
-	included: number;
-	limit: number;
-	startDate: string;
-	endDate: string;
-	enabled?: boolean;
+	managedAgentFeature?: Feature;
 }
 
+const validateFeature = (feature?: Feature): string | null => {
+	if (!feature) {
+		return null; // No feature is valid (will show disabled state)
+	}
+
+	// If enabled, we need valid numeric data
+	if (feature.enabled) {
+		if (
+			feature.actual === undefined ||
+			feature.soft_limit === undefined ||
+			feature.limit === undefined
+		) {
+			return "Managed agent feature is enabled but missing required usage data (actual, soft_limit, or limit).";
+		}
+
+		if (
+			feature.actual < 0 ||
+			feature.soft_limit < 0 ||
+			feature.limit < 0
+		) {
+			return "Managed agent feature contains invalid negative values for usage metrics.";
+		}
+
+		if (feature.soft_limit > feature.limit) {
+			return "Managed agent feature has invalid configuration: soft limit exceeds total limit.";
+		}
+
+		// Validate usage period if present
+		if (feature.usage_period) {
+			const start = dayjs(feature.usage_period.start);
+			const end = dayjs(feature.usage_period.end);
+
+			if (!start.isValid() || !end.isValid()) {
+				return "Managed agent feature has invalid usage period dates.";
+			}
+
+			if (end.isBefore(start)) {
+				return "Managed agent feature has invalid usage period: end date is before start date.";
+			}
+		}
+	}
+
+	return null; // Valid
+};
+
 export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
-	usage,
-	included,
-	limit,
-	startDate,
-	endDate,
-	enabled = true,
+	managedAgentFeature,
 }) => {
-	if (!enabled) {
+	// Validate the feature data
+	const validationError = validateFeature(managedAgentFeature);
+	if (validationError) {
+		return <ErrorAlert error={new Error(validationError)} />;
+	}
+
+	// If no feature is provided or it's disabled, show disabled state
+	if (!managedAgentFeature?.enabled) {
 		return (
 			<div css={styles.disabledRoot}>
 				<Stack alignItems="center" spacing={1}>
@@ -48,6 +92,12 @@ export const ManagedAgentsConsumption: FC<ManagedAgentsConsumptionProps> = ({
 		);
 	}
 
+	const usage = managedAgentFeature.actual || 0;
+	const included = managedAgentFeature.soft_limit || 0;
+	const limit = managedAgentFeature.limit || 0;
+	const startDate = managedAgentFeature.usage_period?.start || "";
+	const endDate = managedAgentFeature.usage_period?.end || "";
+
 	const usagePercentage = Math.min((usage / limit) * 100, 100);
 	const includedPercentage = Math.min((included / limit) * 100, 100);
 	const remainingPercentage = Math.max(100 - includedPercentage, 0);
