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.', },