diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceUsersConsumptionChart.stories.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceUsersConsumptionChart.stories.tsx new file mode 100644 index 0000000000..23a62a047c --- /dev/null +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceUsersConsumptionChart.stories.tsx @@ -0,0 +1,55 @@ +import type { Meta, StoryObj } from "@storybook/react-vite"; +import { AIGovernanceUsersConsumption } from "./AIGovernanceUsersConsumptionChart"; + +const meta: Meta = { + title: + "pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceUsersConsumptionChart", + component: AIGovernanceUsersConsumption, + args: { + aiGovernanceUserFeature: { + enabled: true, + entitlement: "entitled", + limit: 1000, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const Disabled: Story = { + args: { + aiGovernanceUserFeature: { + enabled: false, + entitlement: "not_entitled", + }, + }, +}; + +export const NoFeature: Story = { + args: { + aiGovernanceUserFeature: undefined, + }, +}; + +export const ErrorMissingData: Story = { + args: { + aiGovernanceUserFeature: { + enabled: true, + entitlement: "entitled", + limit: undefined, + }, + }, +}; + +export const ErrorNegativeValues: Story = { + args: { + aiGovernanceUserFeature: { + enabled: true, + entitlement: "entitled", + limit: -1000, + }, + }, +}; diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceUsersConsumptionChart.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceUsersConsumptionChart.tsx new file mode 100644 index 0000000000..a5610550d9 --- /dev/null +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/AIGovernanceUsersConsumptionChart.tsx @@ -0,0 +1,119 @@ +import type { Feature } from "api/typesGenerated"; +import { ErrorAlert } from "components/Alert/ErrorAlert"; +import { Button } from "components/Button/Button"; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "components/Collapsible/Collapsible"; +import { Link } from "components/Link/Link"; +import { ChevronRightIcon } from "lucide-react"; +import type { FC } from "react"; +import { docs } from "utils/docs"; + +interface AIGovernanceUsersConsumptionProps { + aiGovernanceUserFeature?: Feature; +} + +export const AIGovernanceUsersConsumption: FC< + AIGovernanceUsersConsumptionProps +> = ({ aiGovernanceUserFeature }) => { + // If no feature is provided or it's disabled, show disabled state + if (!aiGovernanceUserFeature?.enabled) { + return ( +
+
+
+ Users with AI Governance Add-On + + AI Governance is not included in your current license. Contact{" "} + sales to upgrade your + license and unlock this addon. + +
+
+
+ ); + } + + const limit = aiGovernanceUserFeature.limit; + + if (limit === undefined || limit < 0) { + return ; + } + + return ( +
+
+ +
+

+ Users with AI Governance Add-On +

+ + + + +
+ + +

+ Users using AI features like{" "} + + AI Bridge + + ,{" "} + + Boundary + + , or{" "} + + Tasks + + . +

+
+
+
+ +
+
+
+
{limit.toLocaleString()}
+
Users Entitled
+
+
+ Additional analytics and measurements coming soon +
+
+
+
+ ); +}; diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx index 3b9b58212e..8f151cdf15 100644 --- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx @@ -86,6 +86,9 @@ const LicensesSettingsPage: FC = () => { managedAgentFeature={ entitlementsQuery.data?.features.managed_agent_limit } + aiGovernanceUserFeature={ + entitlementsQuery.data?.features.ai_governance_user_limit + } refreshEntitlements={async () => { try { await refreshEntitlementsMutation.mutateAsync(); diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx index 9b56ae5a12..b6096d2b78 100644 --- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx @@ -21,6 +21,7 @@ import { PlusIcon, RotateCwIcon } from "lucide-react"; import type { FC } from "react"; import Confetti from "react-confetti"; import { Link } from "react-router"; +import { AIGovernanceUsersConsumption } from "./AIGovernanceUsersConsumptionChart"; import { LicenseCard } from "./LicenseCard"; import { LicenseSeatConsumptionChart } from "./LicenseSeatConsumptionChart"; import { ManagedAgentsConsumption } from "./ManagedAgentsConsumption"; @@ -37,6 +38,7 @@ type Props = { refreshEntitlements: () => void; activeUsers: UserStatusChangeCount[] | undefined; managedAgentFeature?: Feature; + aiGovernanceUserFeature?: Feature; }; const LicensesSettingsPageView: FC = ({ @@ -51,6 +53,7 @@ const LicensesSettingsPageView: FC = ({ refreshEntitlements, activeUsers, managedAgentFeature, + aiGovernanceUserFeature, }) => { const theme = useTheme(); const { width, height } = useWindowSize(); @@ -164,7 +167,14 @@ const LicensesSettingsPageView: FC = ({ )} {licenses && licenses.length > 0 && ( - + <> + + + )} diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.tsx index 022627c11d..c887a7ac71 100644 --- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/ManagedAgentsConsumption.tsx @@ -1,4 +1,3 @@ -import MuiLink from "@mui/material/Link"; import type { Feature } from "api/typesGenerated"; import { ErrorAlert } from "components/Alert/ErrorAlert"; import { Button } from "components/Button/Button"; @@ -7,7 +6,7 @@ import { CollapsibleContent, CollapsibleTrigger, } from "components/Collapsible/Collapsible"; -import { Stack } from "components/Stack/Stack"; +import { Link } from "components/Link/Link"; import dayjs from "dayjs"; import { ChevronRightIcon } from "lucide-react"; import type { FC } from "react"; @@ -24,16 +23,16 @@ export const ManagedAgentsConsumption: FC = ({ if (!managedAgentFeature?.enabled) { return (
- - - Managed AI Agents Disabled +
+
+ Agent Workspace Builds Disabled - Managed AI agents are not included in your current license. - Contact sales to + Agent Workspace Builds are not included in your current license. + Contact sales to upgrade your license and unlock this feature. - - +
+
); } @@ -76,7 +75,7 @@ export const ManagedAgentsConsumption: FC = ({
-

Managed AI Agents Usage

+

Agent Workspace Builds