✨ Reduce assessment calls in effort to reduce network overhead (konve…

…yor#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 <[email protected]>
ibolton336 · Feb 29, 2024 · 7417cde · 7417cde
1 parent 55843d2
commit 7417cde
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 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
@@ -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 = () => {
                       >
                         <ApplicationAssessmentStatus
                           application={application}
+                          assessments={assessments}
+                          archetypes={archetypes}
                           key={`${application?.id}-assessment-status`}
                         />
                       </Td>
@@ -1079,6 +1089,7 @@ export const ApplicationsTable: React.FC = () => {
         <ApplicationDetailDrawer
           application={activeItem}
           applications={applications}
+          assessments={assessments}
           onCloseClick={clearActiveItem}
           onEditClick={() => setSaveApplicationModalState(activeItem)}
           task={activeItem ? getTask(activeItem) : null}

diff --git a/...s/applications/components/application-assessment-status/application-assessment-status.tsx b/...s/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 <EmptyTextMessage message={t("terms.notAvailable")} />;
   }
 
-  if (isFetching || isFetching) {
-    return <Spinner size="md" />;
-  }
-
   let statusPreset: IconedStatusPreset = "NotStarted"; // Default status
   let tooltipCount: number = 0;
 

diff --git a/...app/pages/applications/components/application-detail-drawer/application-detail-drawer.tsx b/...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>(
     TabKey.Details
@@ -203,9 +205,16 @@ export const ApplicationDetailDrawer: React.FC<
                   <DescriptionListTerm>
                     {t("terms.archetypesAssessed")}
                   </DescriptionListTerm>
-                  <DescriptionListDescription>
-                    <AssessedArchetypes application={application} />
-                  </DescriptionListDescription>
+                  {assessments && assessments.length ? (
+                    <DescriptionListDescription>
+                      <AssessedArchetypes
+                        application={application}
+                        assessments={assessments}
+                      />
+                    </DescriptionListDescription>
+                  ) : (
+                    <EmptyTextMessage message={t("terms.none")} />
+                  )}
                 </DescriptionListGroup>
 
                 <DescriptionListGroup>

diff --git a/...ages/applications/components/application-detail-drawer/components/assessed-archetypes.tsx b/...ages/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<IAssessedArchetypesProps> = ({
   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<IAssessedArchetypesProps> = ({
     );
   }, [archetypes, assessments]);
 
-  if (isFetchingArchetypes || isFetchingAssessments) {
+  if (isFetchingArchetypes) {
     return <Spinner size="md" />;
   }
 

diff --git 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
@@ -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),