Adjust charts

coder · BrunoQuaresma · Jan 17, 2025 · Jan 13, 2025 · Jan 14, 2025 · Jan 14, 2025
commit 11ce94747fd9536d5e38783ee6b8e99d45c53def
@@ -14,7 +14,6 @@ const GeneralSettingsPage: FC = () => {
 	const safeExperimentsQuery = useQuery(availableExperiments());
 
 	const { metadata } = useEmbeddedMetadata();
-	const entitlementsQuery = useQuery(entitlements(metadata.entitlements));
 	const enabledExperimentsQuery = useQuery(experiments(metadata.experiments));
 
 	const safeExperiments = safeExperimentsQuery.data?.safe ?? [];
@@ -33,7 +32,6 @@ const GeneralSettingsPage: FC = () => {
 			<GeneralSettingsPageView
 				deploymentOptions={deploymentConfig.options}
 				dailyActiveUsers={dailyActiveUsers}
-				entitlements={entitlementsQuery.data}
 				invalidExperiments={invalidExperiments}
 				safeExperiments={safeExperiments}
 			/>

@@ -1,5 +1,4 @@
 import AlertTitle from "@mui/material/AlertTitle";
-import LinearProgress from "@mui/material/LinearProgress";
 import type {
 	DAUsResponse,
 	Entitlements,
@@ -13,30 +12,21 @@ import { useDeploymentOptions } from "utils/deployOptions";
 import { docs } from "utils/docs";
 import { Alert } from "../../../components/Alert/Alert";
 import OptionsTable from "../OptionsTable";
-import { ChartSection } from "./ChartSection";
 import { UserEngagementChart } from "./UserEngagementChart";
 
 export type GeneralSettingsPageViewProps = {
 	deploymentOptions: SerpentOption[];
 	dailyActiveUsers: DAUsResponse | undefined;
-	entitlements: Entitlements | undefined;
 	readonly invalidExperiments: Experiments | string[];
 	readonly safeExperiments: Experiments | string[];
 };
 
 export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 	deploymentOptions,
 	dailyActiveUsers,
-	entitlements,
 	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
@@ -51,37 +41,6 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 						users: i.amount,
 					}))}
 				/>
-				{licenseUtilizationPercentage && (
-					<ChartSection title="License Utilization">
-						<LinearProgress
-							variant="determinate"
-							value={Math.min(licenseUtilizationPercentage * 100, 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">
 						<AlertTitle>Invalid experiments in use:</AlertTitle>

@@ -23,6 +23,7 @@ import {
 	XAxis,
 	YAxis,
 } from "recharts";
+import { docs } from "utils/docs";
 
 const chartConfig = {
 	users: {
@@ -101,13 +102,25 @@ export const LicenseSeatConsumptionChart: FC<
 							You might also check:
 							<ul>
 								<li>
-									<Link>Activity Audit</Link>
+									<Link asChild>
+										<RouterLink to="/audit">Activity Audit</RouterLink>
+									</Link>
 								</li>
 								<li>
-									<Link>Daily user activity</Link>
+									<Link asChild>
+										<RouterLink to="/deployment/general">
+											Daily user activity
+										</RouterLink>
+									</Link>
 								</li>
 								<li>
-									<Link>More details on user account statuses</Link>
+									<Link
+										href={docs("/admin/users#user-status")}
+										target="_blank"
+										rel="noreferrer"
+									>
+										More details on user account statuses
+									</Link>
 								</li>
 							</ul>
 						</div>

@@ -16,6 +16,7 @@ import Confetti from "react-confetti";
 import { Link } from "react-router-dom";
 import { LicenseCard } from "./LicenseCard";
 import { LicenseSeatConsumptionChart } from "./LicenseSeatConsumptionChart";
+import { license } from "../../../../e2e/constants";
 
 type Props = {
 	showConfetti: boolean;
@@ -133,14 +134,16 @@ const LicensesSettingsPageView: FC<Props> = ({
 					</div>
 				)}
 
-				<LicenseSeatConsumptionChart
-					limit={userLimitLimit}
-					data={activeUsers?.map((i) => ({
-						date: i.date,
-						users: i.count,
-						limit: 80,
-					}))}
-				/>
+				{licenses && licenses.length > 0 && (
+					<LicenseSeatConsumptionChart
+						limit={userLimitLimit}
+						data={activeUsers?.map((i) => ({
+							date: i.date,
+							users: i.count,
+							limit: 80,
+						}))}
+					/>
+				)}
 			</div>
 		</>
 	);