diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx index ff7c364c1b..4f44be86ea 100644 --- a/client/src/app/pages/applications/applications-table/applications-table.tsx +++ b/client/src/app/pages/applications/applications-table/applications-table.tsx @@ -147,7 +147,10 @@ export const ApplicationsTable: React.FC = () => { const getTask = (application: Application) => tasks.find((task: Task) => task.application?.id === application.id); - const { tasks } = useFetchTasks({ addon: "analyzer" }, isAnalyzeModalOpen); + const { tasks, hasActiveTasks } = useFetchTasks( + { addon: "analyzer" }, + isAnalyzeModalOpen + ); const isTaskCancellable = (application: Application) => { const task = getTask(application); @@ -209,10 +212,11 @@ export const ApplicationsTable: React.FC = () => { isFetching: isFetchingApplications, error: applicationsFetchError, refetch: fetchApplications, - } = useFetchApplications(); + } = useFetchApplications(!hasActiveTasks); - const { assessments } = useFetchAssessments(); - const { archetypes } = useFetchArchetypes(); + const { assessments, isFetching: isFetchingAssesments } = + useFetchAssessments(); + const { archetypes, isFetching: isFetchingArchetypes } = useFetchArchetypes(); const onDeleteApplicationSuccess = (appIDCount: number) => { pushNotification({ @@ -894,6 +898,11 @@ export const ApplicationsTable: React.FC = () => { application={application} assessments={assessments} archetypes={archetypes} + isLoading={ + isFetchingApplications || + isFetchingArchetypes || + isFetchingAssesments + } key={`${application?.id}-assessment-status`} /> diff --git a/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx b/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx index 8f2314f032..a6a0df6ab7 100644 --- a/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx +++ b/client/src/app/pages/applications/components/application-assessment-status/application-assessment-status.tsx @@ -1,8 +1,8 @@ import React from "react"; import { useTranslation } from "react-i18next"; -import { EmptyTextMessage } from "@app/components/EmptyTextMessage"; import { Application, Archetype, Assessment } from "@app/api/models"; import { IconedStatus, IconedStatusPreset } from "@app/components/IconedStatus"; +import { Spinner } from "@patternfly/react-core"; interface ApplicationAssessmentStatusProps { application: Application; assessments: Assessment[]; @@ -12,19 +12,25 @@ interface ApplicationAssessmentStatusProps { export const ApplicationAssessmentStatus: React.FC< ApplicationAssessmentStatusProps -> = ({ application, assessments, archetypes }) => { +> = ({ application, assessments, archetypes, isLoading }) => { const { t } = useTranslation(); - const filteredAssessments = assessments?.filter( + const applicationAssessments = assessments?.filter( (assessment: Assessment) => assessment.application?.id === application.id ); + const inheritedArchetypes = archetypes?.filter( + (archetype: Archetype) => + archetype.applications?.map((app) => app.id).includes(application.id) + ); const assessmentStatusInfo = React.useMemo(() => { - const assessmentsWithArchetypes = archetypes.map((archetype) => ({ - archetype, - assessments: assessments.filter( - (assessment) => assessment.archetype?.id === archetype.id - ), - })); + const assessmentsWithArchetypes = inheritedArchetypes.map( + (inheritedArchetype) => ({ + inheritedArchetype, + assessments: assessments.filter( + (assessment) => assessment.archetype?.id === inheritedArchetype.id + ), + }) + ); const someArchetypesAssessed = assessmentsWithArchetypes.some( ({ assessments }) => assessments.length > 0 @@ -32,12 +38,12 @@ export const ApplicationAssessmentStatus: React.FC< const allArchetypesAssessed = assessmentsWithArchetypes.length > 0 && - assessmentsWithArchetypes.every(({ archetype, assessments }) => { + assessmentsWithArchetypes.every(({ inheritedArchetype, assessments }) => { const requiredAssessments = assessments.filter( (assessment) => assessment.required ); return ( - archetype.assessed && + inheritedArchetype.assessed && assessments.length > 0 && requiredAssessments.length > 0 && requiredAssessments.every( @@ -56,18 +62,19 @@ export const ApplicationAssessmentStatus: React.FC< ); const assessedArchetypesWithARequiredAssessment = - assessmentsWithArchetypes.filter(({ assessments, archetype }) => + assessmentsWithArchetypes.filter(({ assessments, inheritedArchetype }) => assessments.some( (assessment) => assessment.required && assessment.status === "complete" && - archetype.assessed + inheritedArchetype.assessed ) ); const assessedArchetypeCount = - archetypes?.filter( - (archetype) => - archetype?.assessments?.length ?? (0 > 0 && archetype.assessed) + inheritedArchetypes?.filter( + (inheritedArchetype) => + inheritedArchetype?.assessments?.length ?? + (0 > 0 && inheritedArchetype.assessed) ).length || 0; return { @@ -78,10 +85,10 @@ export const ApplicationAssessmentStatus: React.FC< assessedArchetypesWithARequiredAssessment, assessedArchetypeCount, }; - }, [archetypes, assessments]); + }, [inheritedArchetypes, assessments]); - if (archetypes?.length === 0 || assessments?.length === 0) { - return ; + if (isLoading) { + return ; } let statusPreset: IconedStatusPreset = "NotStarted"; // Default status @@ -89,6 +96,7 @@ export const ApplicationAssessmentStatus: React.FC< const isDirectlyAssessed = application.assessed && (application.assessments?.length ?? 0) > 0; + const { allArchetypesAssessed, assessedArchetypesWithARequiredAssessment, @@ -104,7 +112,9 @@ export const ApplicationAssessmentStatus: React.FC< statusPreset = "InProgressInheritedAssessments"; tooltipCount = assessedArchetypesWithARequiredAssessment.length; } else if ( - filteredAssessments?.some((assessment) => assessment.status === "started") + applicationAssessments?.some( + (assessment) => assessment.status === "started" + ) ) { statusPreset = "InProgress"; } diff --git a/client/src/app/queries/tasks.ts b/client/src/app/queries/tasks.ts index 23d107a911..c2532f1ace 100644 --- a/client/src/app/queries/tasks.ts +++ b/client/src/app/queries/tasks.ts @@ -42,12 +42,14 @@ export const useFetchTasks = ( }, onError: (err) => console.log(err), }); + const hasActiveTasks = data && data.length > 0; return { tasks: data || [], isFetching: isLoading, fetchError: error, refetch, + hasActiveTasks, }; };