From 2b13aff4f1f6ad3e900632a233ae59b1ba1a89f4 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Tue, 5 Nov 2024 14:50:51 +0100 Subject: [PATCH] feat: hook up project resources API to resources widget (#8657) This PR wires up the connectedenvironments data from the API to the resources widget. Additionally, it adjusts the orval schema to add the new connectedEnvironments property, and adds a loading state indicator for the resource values based on the project status endpoint response. As was discussed in a previous PR, I think this is a good time to update the API to include all the information required for this view. This would get rid of three hooks, lots of loading state indicators (because we **can** do them individually; check out https://github.com/Unleash/unleash/pull/8657/commits/0a334f989283f0ec24fa91936638527a17cb1242) and generally simplify this component a bit. Here's the loading state: ![image](https://github.com/user-attachments/assets/c9938383-afcd-4f4b-92df-c64b83f5b1df) --- .../ProjectStatus/ProjectResources.tsx | 20 ++++++++++++------- .../useProjectStatus/useProjectStatus.ts | 1 + .../src/openapi/models/projectStatusSchema.ts | 6 ++++++ src/lib/openapi/spec/project-status-schema.ts | 1 + 4 files changed, 21 insertions(+), 7 deletions(-) diff --git a/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx b/frontend/src/component/project/Project/ProjectStatus/ProjectResources.tsx index 656cd0ae8d..27f6beb6d2 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 3b9f9c87e8..d10d690f63 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 8683b6ae5e..5a14a64324 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.', },