From 03a299f212e28e39059b886a302a5dc4678989a0 Mon Sep 17 00:00:00 2001 From: Ian Bolton Date: Thu, 29 Feb 2024 09:31:56 -0500 Subject: [PATCH] :sparkles: Reduce assessment calls in effort to reduce network overhead Signed-off-by: Ian Bolton --- .../applications-table/applications-table.tsx | 12 +++++++++++- .../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, 34 insertions(+), 32 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 796d9f316b..ff7c364c1b 100644 --- a/client/src/app/pages/applications/applications-table/applications-table.tsx +++ b/client/src/app/pages/applications/applications-table/applications-table.tsx @@ -80,7 +80,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"; @@ -104,6 +107,7 @@ import { TaskGroupProvider } from "../analysis-wizard/components/TaskGroupContex import { ApplicationIdentityForm } from "../components/application-identity-form/application-identity-form"; import { ApplicationReviewStatus } from "../components/application-review-status/application-review-status"; import { KebabDropdown } from "@app/components/KebabDropdown"; +import { useFetchArchetypes } from "@app/queries/archetypes"; export const ApplicationsTable: React.FC = () => { const { t } = useTranslation(); @@ -207,6 +211,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", { @@ -885,6 +892,8 @@ export const ApplicationsTable: React.FC = () => { > @@ -1059,6 +1068,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 7a127d3435..b721a02478 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 @@ -212,9 +214,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),