WIP we have chart

coder · mtojek · Oct 9, 2023 · Oct 6, 2023 · Oct 6, 2023 · Oct 6, 2023
commit 98b583e6448526652be3e424730770f797e30ba2
diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -40,11 +40,13 @@ ChartJS.register(
 export interface ActiveUserChartProps {
   data: { date: string; amount: number }[];
   interval: "day" | "week";
+  userLimit: number | undefined;
 }
 
 export const ActiveUserChart: FC<ActiveUserChartProps> = ({
   data,
   interval,
+  userLimit,
 }) => {
   const theme: Theme = useTheme();
 
@@ -106,6 +108,14 @@ export const ActiveUserChart: FC<ActiveUserChartProps> = ({
             backgroundColor: theme.palette.info.dark,
             fill: "origin",
           },
+          {
+            label: "User limit",
+            data: data.map((_) => userLimit),
+            pointBackgroundColor: theme.palette.warning.light,
+            pointBorderColor: theme.palette.warning.light,
+            borderColor: theme.palette.warning.light,
+            fill: false,
+          }
         ],
       }}
       options={options}

diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPage.tsx
@@ -5,10 +5,12 @@ import { pageTitle } from "utils/page";
 import { GeneralSettingsPageView } from "./GeneralSettingsPageView";
 import { useQuery } from "@tanstack/react-query";
 import { deploymentDAUs } from "api/queries/deployment";
+import { entitlements } from "api/queries/entitlements";
 
 const GeneralSettingsPage: FC = () => {
   const { deploymentValues } = useDeploySettings();
   const deploymentDAUsQuery = useQuery(deploymentDAUs());
+  const entitlementsQuery = useQuery(entitlements());
 
   return (
     <>
@@ -19,6 +21,7 @@ const GeneralSettingsPage: FC = () => {
         deploymentOptions={deploymentValues.options}
         deploymentDAUs={deploymentDAUsQuery.data}
         deploymentDAUsError={deploymentDAUsQuery.error}
+        entitlements={entitlementsQuery.data}
       />
     </>
   );

diff --git a/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx
@@ -1,5 +1,5 @@
 import Box from "@mui/material/Box";
-import { ClibaseOption, DAUsResponse } from "api/typesGenerated";
+import { ClibaseOption, DAUsResponse, Entitlements } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import {
   ActiveUserChart,
@@ -16,11 +16,13 @@ export type GeneralSettingsPageViewProps = {
   deploymentOptions: ClibaseOption[];
   deploymentDAUs?: DAUsResponse;
   deploymentDAUsError: unknown;
+  entitlements: Entitlements | undefined;
 };
 export const GeneralSettingsPageView = ({
   deploymentOptions,
   deploymentDAUs,
   deploymentDAUsError,
+  entitlements,
 }: GeneralSettingsPageViewProps): JSX.Element => {
   return (
     <>
@@ -36,7 +38,7 @@ export const GeneralSettingsPageView = ({
         {deploymentDAUs && (
           <Box height={200} sx={{ mb: 3 }}>
             <ChartSection title={<ActiveUsersTitle />}>
-              <ActiveUserChart data={deploymentDAUs.entries} interval="day" />
+              <ActiveUserChart data={deploymentDAUs.entries} interval="day" userLimit={entitlements?.features.user_limit.limit} />
             </ChartSection>
           </Box>
         )}

diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -21,6 +21,7 @@ import { Helmet } from "react-helmet-async";
 import { getTemplatePageTitle } from "../utils";
 import { Loader } from "components/Loader/Loader";
 import {
+  Entitlements,
   Template,
   TemplateAppUsage,
   TemplateInsightsResponse,
@@ -48,6 +49,7 @@ import {
   insightsUserLatency,
 } from "api/queries/insights";
 import { useSearchParams } from "react-router-dom";
+import { entitlements } from "api/queries/entitlements";
 
 const DEFAULT_NUMBER_OF_WEEKS = numberOfWeeksOptions[0];
 
@@ -75,6 +77,7 @@ export default function TemplateInsightsPage() {
   const { data: templateInsights } = useQuery(insightsTemplate(insightsFilter));
   const { data: userLatency } = useQuery(insightsUserLatency(commonFilters));
   const { data: userActivity } = useQuery(insightsUserActivity(commonFilters));
+  const { data: entitlementsQuery} = useQuery(entitlements());
 
   return (
     <>
@@ -106,6 +109,7 @@ export default function TemplateInsightsPage() {
         userLatency={userLatency}
         userActivity={userActivity}
         interval={interval}
+        entitlements={entitlementsQuery}
       />
     </>
   );
@@ -146,12 +150,14 @@ export const TemplateInsightsPageView = ({
   templateInsights,
   userLatency,
   userActivity,
+  entitlements,
   controls,
   interval,
 }: {
   templateInsights: TemplateInsightsResponse | undefined;
   userLatency: UserLatencyInsightsResponse | undefined;
   userActivity: UserActivityInsightsResponse | undefined;
+  entitlements: Entitlements | undefined;
   controls: ReactNode;
   interval: InsightsInterval;
 }) => {
@@ -178,6 +184,7 @@ export const TemplateInsightsPageView = ({
         <ActiveUsersPanel
           sx={{ gridColumn: "span 2" }}
           interval={interval}
+          userLimit={entitlements?.features.user_limit.limit}
           data={templateInsights?.interval_reports}
         />
         <UsersLatencyPanel data={userLatency} />
@@ -198,10 +205,12 @@ export const TemplateInsightsPageView = ({
 const ActiveUsersPanel = ({
   data,
   interval,
+  userLimit,
   ...panelProps
 }: PanelProps & {
   data: TemplateInsightsResponse["interval_reports"] | undefined;
   interval: InsightsInterval;
+  userLimit: number | undefined;
 }) => {
   return (
     <Panel {...panelProps}>
@@ -216,6 +225,7 @@ const ActiveUsersPanel = ({
         {data && data.length > 0 && (
           <ActiveUserChart
             interval={interval}
+            userLimit={userLimit}
             data={data.map((d) => ({
               amount: d.active_users,
               date: d.start_time,