diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
index 656cd0ae8de0..27f6beb6d218 100644
--- a/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
+++ b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx
@@ -14,6 +14,8 @@ import { Link } from 'react-router-dom';
import ApiKeyIcon from '@mui/icons-material/Key';
import SegmentsIcon from '@mui/icons-material/DonutLarge';
import ConnectedIcon from '@mui/icons-material/Cable';
+import { useProjectStatus } from 'hooks/api/getters/useProjectStatus/useProjectStatus';
+import useLoading from 'hooks/useLoading';
const Wrapper = styled('article')(({ theme }) => ({
backgroundColor: theme.palette.envAccordion.expanded,
@@ -89,7 +91,7 @@ const ListItem: FC<
{icon}
- {children}
+ {children}
{linkText}
@@ -97,10 +99,11 @@ const ListItem: FC<
export const ProjectResources = () => {
const projectId = useRequiredPathParam('projectId');
- const { project, loading: loadingProject } = useProjectOverview(projectId);
- const { tokens, loading: loadingTokens } = useProjectApiTokens(projectId);
- const { segments, loading: loadingSegments } = useSegments();
- // todo: add sdk connections
+ const { project } = useProjectOverview(projectId);
+ const { tokens } = useProjectApiTokens(projectId);
+ const { segments } = useSegments();
+ const { data: projectStatus, loading: loadingResources } =
+ useProjectStatus(projectId);
const segmentCount = useMemo(
() =>
@@ -109,8 +112,10 @@ export const ProjectResources = () => {
[segments, projectId],
);
+ const loadingStatusRef = useLoading(true, '[data-loading-resources=true]');
+
return (
-
+
Project Resources
@@ -137,7 +142,8 @@ export const ProjectResources = () => {
linkText='View connections'
icon={}
>
- 1 connected environment(s)
+ {projectStatus?.resources?.connectedEnvironments}{' '}
+ connected environment(s)
`api/admin/projects/${projectId}/status`;
const placeholderData: ProjectStatusSchema = {
activityCountByDate: [],
+ resources: { connectedEnvironments: 0 },
};
export const useProjectStatus = (projectId: string) => {
diff --git a/frontend/src/openapi/models/projectStatusSchema.ts b/frontend/src/openapi/models/projectStatusSchema.ts
index 3b9f9c87e86d..d10d690f63ae 100644
--- a/frontend/src/openapi/models/projectStatusSchema.ts
+++ b/frontend/src/openapi/models/projectStatusSchema.ts
@@ -11,4 +11,10 @@ import type { ProjectActivitySchema } from './projectActivitySchema';
export interface ProjectStatusSchema {
/** Array of activity records with date and count, representing the project’s daily activity statistics. */
activityCountByDate: ProjectActivitySchema;
+
+ /** Key resources within the project */
+ resources: {
+ /** Handwritten placeholder */
+ connectedEnvironments: number;
+ };
}
diff --git a/src/lib/openapi/spec/project-status-schema.ts b/src/lib/openapi/spec/project-status-schema.ts
index 8683b6ae5e65..5a14a64324ad 100644
--- a/src/lib/openapi/spec/project-status-schema.ts
+++ b/src/lib/openapi/spec/project-status-schema.ts
@@ -22,6 +22,7 @@ export const projectStatusSchema = {
properties: {
connectedEnvironments: {
type: 'number',
+ minimum: 0,
description:
'The number of environments that have received SDK traffic in this project.',
},