Use the /tasks/report/dashboard endpoint

Also refactor some components to: - push data access closer to where it is used - break into smaller manageable components Signed-off-by: Scott J Dickerson <[email protected]>
konveyor · Jul 16, 2024 · 849a2ec · 849a2ec
1 parent 91f0209
commit 849a2ec
Show file tree

Hide file tree

Showing 8 changed files with 453 additions and 383 deletions.
diff --git a/client/src/app/api/models.ts b/client/src/app/api/models.ts
@@ -335,6 +335,24 @@ export interface Task {
   attached?: TaskAttachment[];
 }
 
+/** A smaller version of `Task` fetched from the report/dashboard endpoint. */
+export interface TaskDashboard {
+  id: number;
+  createUser: string;
+  updateUser: string;
+  createTime: string; // ISO-8601
+  name: string;
+  kind?: string;
+  addon?: string;
+  state: TaskState;
+  application: Ref;
+  started?: string; // ISO-8601
+  terminated?: string; // ISO-8601
+
+  /** Count of errors recorded on the task - even Succeeded tasks may have errors. */
+  errors?: number;
+}
+
 export interface TaskPolicy {
   isolated?: boolean;
   preemptEnabled?: boolean;

diff --git a/client/src/app/api/rest.ts b/client/src/app/api/rest.ts
@@ -42,6 +42,7 @@ import {
   Task,
   Taskgroup,
   TaskQueue,
+  TaskDashboard,
   Ticket,
   Tracker,
   TrackerProject,
@@ -357,8 +358,10 @@ export function getTaskByIdAndFormat(
     });
 }
 
-export const getTasks = () =>
-  axios.get<Task[]>(TASKS).then((response) => response.data);
+export const getTasksDashboard = () =>
+  axios
+    .get<TaskDashboard[]>(`${TASKS}/report/dashboard`)
+    .then((response) => response.data);
 
 export const getServerTasks = (params: HubRequestParams = {}) =>
   getHubPaginatedResult<Task>(TASKS, params);

diff --git a/client/src/app/pages/applications/applications-table/applications-table.tsx b/client/src/app/pages/applications/applications-table/applications-table.tsx
@@ -75,14 +75,13 @@ import {
   useBulkDeleteApplicationMutation,
   useFetchApplications,
 } from "@app/queries/applications";
-import { useCancelTaskMutation, useFetchTasks } from "@app/queries/tasks";
 import {
-  useDeleteAssessmentMutation,
-  useFetchAssessments,
-} from "@app/queries/assessments";
+  useCancelTaskMutation,
+  useFetchTaskDashboard,
+} from "@app/queries/tasks";
+import { useDeleteAssessmentMutation } from "@app/queries/assessments";
 import { useDeleteReviewMutation } from "@app/queries/reviews";
 import { useFetchTagsWithTagItems } from "@app/queries/tags";
-import { useFetchArchetypes } from "@app/queries/archetypes";
 
 // Relative components
 import { AnalysisWizard } from "../analysis-wizard/analysis-wizard";
@@ -182,7 +181,7 @@ export const ApplicationsTable: React.FC = () => {
   // ----- Table data fetches and mutations
   const { tagItems } = useFetchTagsWithTagItems();
 
-  const { tasks, hasActiveTasks } = useFetchTasks(isAnalyzeModalOpen);
+  const { tasks, hasActiveTasks } = useFetchTaskDashboard(isAnalyzeModalOpen);
 
   const completedCancelTask = () => {
     pushNotification({
@@ -231,11 +230,6 @@ export const ApplicationsTable: React.FC = () => {
     referencedBusinessServiceRefs,
   } = useDecoratedApplications(baseApplications, tasks);
 
-  const { assessments, isFetching: isFetchingAssessments } =
-    useFetchAssessments();
-
-  const { archetypes, isFetching: isFetchingArchetypes } = useFetchArchetypes();
-
   const onDeleteApplicationSuccess = (appIDCount: number) => {
     pushNotification({
       title: t("toastr.success.applicationDeleted", {
@@ -913,11 +907,7 @@ export const ApplicationsTable: React.FC = () => {
                       >
                         <ApplicationAssessmentStatus
                           application={application}
-                          isLoading={
-                            isFetchingApplications ||
-                            isFetchingArchetypes ||
-                            isFetchingAssessments
-                          }
+                          isLoading={isFetchingApplications}
                           key={`${application?.id}-assessment-status`}
                         />
                       </Td>
@@ -1067,12 +1057,9 @@ export const ApplicationsTable: React.FC = () => {
 
         <ApplicationDetailDrawer
           application={activeItem}
-          applications={applications}
-          assessments={assessments}
-          archetypes={archetypes}
           onCloseClick={clearActiveItem}
           onEditClick={() => setSaveApplicationModalState(activeItem)}
-          task={activeItem ? activeItem.tasks.currentAnalyzer : null}
+          task={activeItem?.tasks?.currentAnalyzer ?? null}
         />
 
         <TaskGroupProvider>

diff --git a/client/src/app/pages/applications/applications-table/components/column-application-name.tsx b/client/src/app/pages/applications/applications-table/components/column-application-name.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Link } from "react-router-dom";
+import dayjs from "dayjs";
 
 import { Icon, Popover, PopoverProps, Tooltip } from "@patternfly/react-core";
 import {
@@ -10,17 +11,16 @@ import {
   ExclamationTriangleIcon,
   PendingIcon,
 } from "@patternfly/react-icons";
+import { Table, Tbody, Td, Thead, Tr } from "@patternfly/react-table";
 
 import { IconWithLabel, TaskStateIcon } from "@app/components/Icons";
+import { Paths } from "@app/Paths";
+import { formatPath, universalComparator } from "@app/utils/utils";
+import { TaskDashboard } from "@app/api/models";
 import {
   ApplicationTasksStatus,
   DecoratedApplication,
 } from "../useDecoratedApplications";
-import { Paths } from "@app/Paths";
-import { formatPath, universalComparator } from "@app/utils/utils";
-import dayjs from "dayjs";
-import { Table, Tbody, Td, Thead, Tr } from "@patternfly/react-table";
-import { Task } from "@app/api/models";
 
 interface StatusData {
   popoverVariant: PopoverProps["alertSeverityVariant"];
@@ -96,7 +96,7 @@ const linkToTasks = (applicationName: string) => {
   return `${formatPath(Paths.tasks, {})}?${search}`;
 };
 
-const linkToDetails = (task: Task) => {
+const linkToDetails = (task: TaskDashboard) => {
   return formatPath(Paths.taskDetails, {
     taskId: task.id,
   });

diff --git a/client/src/app/pages/applications/applications-table/useDecoratedApplications.ts b/client/src/app/pages/applications/applications-table/useDecoratedApplications.ts
@@ -1,12 +1,12 @@
 import { useMemo } from "react";
-import { Application, Identity, Task } from "@app/api/models";
+import { Application, Identity, TaskDashboard } from "@app/api/models";
 import { group, listify, mapEntries, unique } from "radash";
 import { TaskStates } from "@app/queries/tasks";
 import { universalComparator } from "@app/utils/utils";
 import { useFetchIdentities } from "@app/queries/identities";
 
 export interface TasksGroupedByKind {
-  [key: string]: Task[];
+  [key: string]: TaskDashboard[];
 }
 
 /**
@@ -37,7 +37,7 @@ export interface DecoratedApplication extends Application {
     latestHasSuccessWithErrors: boolean;
 
     /** The most recently created `kind === "analyzer"` task for the application */
-    currentAnalyzer: Task | undefined;
+    currentAnalyzer: TaskDashboard | undefined;
   };
   tasksStatus: ApplicationTasksStatus;
 
@@ -50,10 +50,10 @@ export interface DecoratedApplication extends Application {
 /**
  * Take an array of `Tasks`, group by application id and then by task kind.
  */
-const groupTasks = (tasks: Task[]) => {
+const groupTasks = (tasks: TaskDashboard[]) => {
   const byApplicationId = group(tasks, (task) => task.application.id) as Record<
     number,
-    Task[]
+    TaskDashboard[]
   >;
 
   const groupedByIdByKind = mapEntries(byApplicationId, (id, tasks) => [
@@ -96,7 +96,7 @@ const chooseApplicationTaskStatus = ({
  */
 const decorateApplications = (
   applications: Application[],
-  tasks: Task[],
+  tasks: TaskDashboard[],
   identities: Identity[]
 ) => {
   const { tasksById, tasksByIdByKind } = groupTasks(tasks);
@@ -152,7 +152,7 @@ const decorateApplications = (
 
 export const useDecoratedApplications = (
   applications: Application[],
-  tasks: Task[]
+  tasks: TaskDashboard[]
 ) => {
   const { identities } = useFetchIdentities();