From 7417cde71bd451727ad21b4dac4aca028cb1f7ff Mon Sep 17 00:00:00 2001 From: Ian Bolton Date: Thu, 29 Feb 2024 09:38:55 -0500 Subject: [PATCH] :sparkles: Reduce assessment calls in effort to reduce network overhead (#1724) - Reduce assessment fetch calls resulting from unnecessary hook calls & query invalidations. - Passes assessments down from app table into sub components Signed-off-by: Ian Bolton --- .../applications-table/applications-table.tsx | 17 ++++++++++++++--- .../application-assessment-status.tsx | 18 +++++------------- .../application-detail-drawer.tsx | 17 +++++++++++++---- .../components/assessed-archetypes.tsx | 7 +++---- client/src/app/queries/applications.ts | 6 +----- client/src/app/queries/archetypes.ts | 6 +----- 6 files changed, 37 insertions(+), 34 deletions(-) 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 75386c6496..8e776a4d3a 100644 --- a/client/src/app/pages/applications/applications-table/applications-table.tsx +++ b/client/src/app/pages/applications/applications-table/applications-table.tsx @@ -83,7 +83,10 @@ import { useFetchApplications, } from "@app/queries/applications"; import { useCancelTaskMutation, useFetchTasks } from "@app/queries/tasks"; -import { useDeleteAssessmentMutation } from "@app/queries/assessments"; +import { + useDeleteAssessmentMutation, + useFetchAssessments, +} from "@app/queries/assessments"; import { useDeleteReviewMutation } from "@app/queries/reviews"; import { useFetchIdentities } from "@app/queries/identities"; import { useFetchTagsWithTagItems } from "@app/queries/tags"; @@ -106,6 +109,7 @@ import { AnalysisWizard } from "../analysis-wizard/analysis-wizard"; import { TaskGroupProvider } from "../analysis-wizard/components/TaskGroupContext"; import { ApplicationIdentityForm } from "../components/application-identity-form/application-identity-form"; import { ApplicationReviewStatus } from "../components/application-review-status/application-review-status"; +import { useFetchArchetypes } from "@app/queries/archetypes"; export const ApplicationsTable: React.FC = () => { const { t } = useTranslation(); @@ -211,6 +215,9 @@ export const ApplicationsTable: React.FC = () => { refetch: fetchApplications, } = useFetchApplications(); + const { assessments } = useFetchAssessments(); + const { archetypes } = useFetchArchetypes(); + const onDeleteApplicationSuccess = (appIDCount: number) => { pushNotification({ title: t("toastr.success.applicationDeleted", { @@ -360,8 +367,9 @@ export const ApplicationsTable: React.FC = () => { selectOptions: [ ...new Set( applications - .flatMap((application) => - application?.archetypes?.map((archetype) => archetype.name) + .flatMap( + (application) => + application?.archetypes?.map((archetype) => archetype.name) ) .filter(Boolean) ), @@ -905,6 +913,8 @@ export const ApplicationsTable: React.FC = () => { > @@ -1079,6 +1089,7 @@ export const ApplicationsTable: React.FC = () => { setSaveApplicationModalState(activeItem)} task={activeItem ? getTask(activeItem) : null} 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 cf05a18ba5..8f2314f032 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,24 +1,20 @@ import React from "react"; import { useTranslation } from "react-i18next"; -import { Spinner } from "@patternfly/react-core"; import { EmptyTextMessage } from "@app/components/EmptyTextMessage"; -import { Application, Assessment } from "@app/api/models"; +import { Application, Archetype, Assessment } from "@app/api/models"; import { IconedStatus, IconedStatusPreset } from "@app/components/IconedStatus"; -import { useFetchAssessments } from "@app/queries/assessments"; -import { useFetchArchetypes } from "@app/queries/archetypes"; interface ApplicationAssessmentStatusProps { application: Application; + assessments: Assessment[]; + archetypes: Archetype[]; isLoading?: boolean; } export const ApplicationAssessmentStatus: React.FC< ApplicationAssessmentStatusProps -> = ({ application }) => { +> = ({ application, assessments, archetypes }) => { const { t } = useTranslation(); - const { archetypes, isFetching } = useFetchArchetypes(application); - const { assessments, fetchError } = useFetchAssessments(); - const filteredAssessments = assessments?.filter( (assessment: Assessment) => assessment.application?.id === application.id ); @@ -84,14 +80,10 @@ export const ApplicationAssessmentStatus: React.FC< }; }, [archetypes, assessments]); - if (fetchError) { + if (archetypes?.length === 0 || assessments?.length === 0) { return ; } - if (isFetching || isFetching) { - return ; - } - let statusPreset: IconedStatusPreset = "NotStarted"; // Default status let tooltipCount: number = 0; diff --git a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx index d978ae10a1..e67153c3c1 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx +++ b/client/src/app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx @@ -31,6 +31,7 @@ import { MimeType, Ref, Archetype, + AssessmentWithSectionOrder, } from "@app/api/models"; import { IPageDrawerContentProps, @@ -64,6 +65,7 @@ export interface IApplicationDetailDrawerProps application: Application | null; task: Task | undefined | null; applications?: Application[]; + assessments?: AssessmentWithSectionOrder[]; onEditClick: () => void; } @@ -77,7 +79,7 @@ enum TabKey { export const ApplicationDetailDrawer: React.FC< IApplicationDetailDrawerProps -> = ({ onCloseClick, application, task, onEditClick }) => { +> = ({ onCloseClick, application, assessments, task, onEditClick }) => { const { t } = useTranslation(); const [activeTabKey, setActiveTabKey] = React.useState( TabKey.Details @@ -203,9 +205,16 @@ export const ApplicationDetailDrawer: React.FC< {t("terms.archetypesAssessed")} - - - + {assessments && assessments.length ? ( + + + + ) : ( + + )} diff --git a/client/src/app/pages/applications/components/application-detail-drawer/components/assessed-archetypes.tsx b/client/src/app/pages/applications/components/application-detail-drawer/components/assessed-archetypes.tsx index 03da85083e..6136bd73a6 100644 --- a/client/src/app/pages/applications/components/application-detail-drawer/components/assessed-archetypes.tsx +++ b/client/src/app/pages/applications/components/application-detail-drawer/components/assessed-archetypes.tsx @@ -4,20 +4,19 @@ import { Label, LabelGroup, Spinner } from "@patternfly/react-core"; import { EmptyTextMessage } from "@app/components/EmptyTextMessage"; import { useTranslation } from "react-i18next"; import { useFetchArchetypes } from "@app/queries/archetypes"; -import { useFetchAssessments } from "@app/queries/assessments"; interface IAssessedArchetypesProps { application: Application | null; + assessments: AssessmentWithSectionOrder[] | null; } export const AssessedArchetypes: React.FC = ({ application, + assessments, }) => { const { t } = useTranslation(); const { archetypes, isFetching: isFetchingArchetypes } = useFetchArchetypes(application); - const { assessments, isFetching: isFetchingAssessments } = - useFetchAssessments(); const assessedArchetypes = React.useMemo(() => { if (!archetypes || !assessments) return []; @@ -32,7 +31,7 @@ export const AssessedArchetypes: React.FC = ({ ); }, [archetypes, assessments]); - if (isFetchingArchetypes || isFetchingAssessments) { + if (isFetchingArchetypes) { return ; } diff --git a/client/src/app/queries/applications.ts b/client/src/app/queries/applications.ts index 1adf91d17f..8e5fc98eb8 100644 --- a/client/src/app/queries/applications.ts +++ b/client/src/app/queries/applications.ts @@ -21,10 +21,7 @@ import { updateApplication, } from "@app/api/rest"; import { reviewsQueryKey } from "./reviews"; -import { - assessmentsByItemIdQueryKey, - assessmentsQueryKey, -} from "./assessments"; +import { assessmentsByItemIdQueryKey } from "./assessments"; import saveAs from "file-saver"; export const ApplicationDependencyQueryKey = "applicationdependencies"; @@ -45,7 +42,6 @@ export const useFetchApplications = (refetchDisabled: boolean = false) => { refetchInterval: !refetchDisabled ? 5000 : false, onSuccess: () => { queryClient.invalidateQueries([reviewsQueryKey]); - queryClient.invalidateQueries([assessmentsQueryKey]); queryClient.invalidateQueries([assessmentsByItemIdQueryKey]); }, onError: (error: AxiosError) => console.log(error), diff --git a/client/src/app/queries/archetypes.ts b/client/src/app/queries/archetypes.ts index a740d564d2..2dc818c4db 100644 --- a/client/src/app/queries/archetypes.ts +++ b/client/src/app/queries/archetypes.ts @@ -9,10 +9,7 @@ import { getArchetypes, updateArchetype, } from "@app/api/rest"; -import { - assessmentsQueryKey, - assessmentsByItemIdQueryKey, -} from "./assessments"; +import { assessmentsByItemIdQueryKey } from "./assessments"; import { reviewsQueryKey } from "./reviews"; import { useState } from "react"; @@ -43,7 +40,6 @@ export const useFetchArchetypes = (forApplication?: Application | null) => { } queryClient.invalidateQueries([reviewsQueryKey]); - queryClient.invalidateQueries([assessmentsQueryKey]); queryClient.invalidateQueries([assessmentsByItemIdQueryKey]); }, onError: (error: AxiosError) => console.log(error),