UI Indication for file generation and housekeeping

app/next-client-app/api/files.ts

@@ -1,6 +1,7 @@
 "use server";
 
 import request from "@/lib/api/request";
+import { revalidatePath } from "next/cache";
 
 const fetchKeys = {
   list: (scan_report_id: number, filter?: string) =>
@@ -11,11 +12,11 @@ const fetchKeys = {
 
 export async function list(
   scan_report_id: number,
-  filter: string | undefined,
+  filter: string | undefined
 ): Promise<PaginatedResponse<FileDownload> | null> {
   try {
     return await request<PaginatedResponse<FileDownload>>(
-      fetchKeys.list(scan_report_id, filter),
+      fetchKeys.list(scan_report_id, filter)
     );
   } catch (error) {
     return null;
@@ -24,7 +25,7 @@ export async function list(
 
 export async function requestFile(
   scan_report_id: number,
-  file_type: FileTypeFormat,
+  file_type: FileTypeFormat
 ): Promise<{ success: boolean; errorMessage?: string }> {
   try {
     await request(fetchKeys.requestFile(scan_report_id), {
@@ -37,6 +38,7 @@ export async function requestFile(
         file_type: file_type,
       }),
     });
+    revalidatePath(`/scanreports/${scan_report_id}/downloads`);
     return { success: true };
   } catch (error: any) {
     return { success: false, errorMessage: error.message };

app/next-client-app/api/scanreports.ts

@@ -170,11 +170,10 @@ export async function updateScanReportTable(
       },
       body: JSON.stringify(data),
     });
+    revalidatePath(`/scanreports/${scanReportId}/`);
   } catch (error: any) {
     return { errorMessage: error.message };
   }
-  // TODO: remove redirect here.
-  redirect(`/scanreports/${scanReportId}/`);
 }
 
 export async function getScanReportTables(

app/next-client-app/app/(protected)/scanreports/[id]/downloads/download-status.tsx

@@ -0,0 +1,23 @@
+"use client";
+import { StatusIcon } from "@/components/core/StatusIcon";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { GeneralStatus } from "@/constants/job";
+import { cn } from "@/lib/utils";
+
+export function DownloadStatus({ lastestJob }: { lastestJob: Job }) {
+  return (
+    <Alert
+      className={cn(
+        "max-w-sm h-10 flex items-center border-2",
+        lastestJob.status.value == "IN_PROGRESS"
+          ? "border-orange-400"
+          : "border-red-400"
+      )}
+    >
+      <AlertDescription className="flex items-center">
+        <StatusIcon status={lastestJob.status} statusOptions={GeneralStatus} />
+        <div className="ml-2">{lastestJob?.details}</div>
+      </AlertDescription>
+    </Alert>
+  );
+}

app/next-client-app/app/(protected)/scanreports/[id]/downloads/page.tsx

@@ -3,8 +3,8 @@ import { objToQuery } from "@/lib/client-utils";
 import { DataTable } from "@/components/data-table";
 import { list } from "@/api/files";
 import { columns } from "./columns";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { InfoIcon } from "lucide-react";
+import { getJobs } from "@/api/scanreports";
+import { DownloadStatus } from "./download-status";
 
 interface DownloadsProps {
   params: {
@@ -13,8 +13,6 @@ interface DownloadsProps {
   searchParams?: FilterParameters;
 }
 
-export const revalidate = 30;
-
 export default async function Downloads({
   params: { id },
   searchParams,
@@ -26,8 +24,15 @@ export default async function Downloads({
   };
   const combinedParams = { ...defaultParams, ...searchParams };
   const query = objToQuery(combinedParams);
+  const downloadingJob = await getJobs(id, "download");
   const filesList = await list(Number(id), query);
 
+  let lastestJob: Job | null = null;
+
+  if (downloadingJob) {
+    lastestJob = downloadingJob[0];
+  }
+
   return (
     <div>
       {filesList && (
@@ -37,14 +42,10 @@ export default async function Downloads({
           count={filesList.count}
           clickableRow={false}
           Filter={
-            <Alert className="max-w-sm h-10 flex items-center">
-              <AlertDescription className="flex">
-                <InfoIcon className="h-4 w-4 mr-2" />
-                <AlertTitle>
-                  Downloads might take a few minutes to be ready.
-                </AlertTitle>
-              </AlertDescription>
-            </Alert>
+            lastestJob?.status.value == "IN_PROGRESS" ||
+            lastestJob?.status.value == "FAILED" ? (
+              <DownloadStatus lastestJob={lastestJob} />
+            ) : undefined
           }
           defaultPageSize={defaultPageSize}
         />

app/next-client-app/app/(protected)/scanreports/[id]/layout.tsx

@@ -21,11 +21,12 @@ import {
 import { Suspense } from "react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { format } from "date-fns/format";
-import { UploadStatus } from "@/components/scanreports/UploadStatus";
 import { InfoItem } from "@/components/core/InfoItem";
 import { notFound } from "next/navigation";
 import Link from "next/link";
 import { MappingStatus } from "@/components/scanreports/MappingStatus";
+import { StatusIcon } from "@/components/core/StatusIcon";
+import { UploadStatusOptions } from "@/constants/scanReportStatus";
 
 export default async function ScanReportLayout({
   params,
@@ -102,8 +103,9 @@ export default async function ScanReportLayout({
         />
         <div className="py-1 md:py-0 md:px-3 h-5 flex items-center gap-2">
           Upload status:{" "}
-          <UploadStatus
-            upload_status={scanreport.upload_status || { value: "IN_PROGRESS" }}
+          <StatusIcon
+            statusOptions={UploadStatusOptions}
+            status={scanreport.upload_status || { value: "IN_PROGRESS" }}
           />
         </div>
         <div className="py-1 md:py-0 md:px-3 h-5">

app/next-client-app/app/(protected)/scanreports/[id]/mapping_rules/rules-buttons.tsx

@@ -38,7 +38,7 @@ export function RulesButton({
       toast.success("File requested.");
     } else {
       toast.error(
-        `Error downloading file: ${(resp.errorMessage as any).message}`,
+        `Error downloading file: ${(resp.errorMessage as any).message}`
       );
     }
   };

app/next-client-app/app/(protected)/scanreports/columns.tsx

@@ -17,12 +17,13 @@ import Link from "next/link";
 import { ColumnDef } from "@tanstack/react-table";
 import { DataTableColumnHeader } from "@/components/data-table/DataTableColumnHeader";
 import { Button } from "@/components/ui/button";
-import { UploadStatus } from "@/components/scanreports/UploadStatus";
 import { format } from "date-fns/format";
 import { HandleArchive } from "@/components/HandleArchive";
 import { useState } from "react";
 import DeleteDialog from "@/components/scanreports/DeleteDialog";
 import { MappingStatus } from "@/components/scanreports/MappingStatus";
+import { UploadStatusOptions } from "@/constants/scanReportStatus";
+import { StatusIcon } from "@/components/core/StatusIcon";
 
 export const columns: ColumnDef<ScanReport>[] = [
   {
@@ -97,8 +98,9 @@ export const columns: ColumnDef<ScanReport>[] = [
     cell: ({ row }) => {
       const { upload_status } = row.original;
       return (
-        <UploadStatus
-          upload_status={upload_status || { value: "IN_PROGRESS" }}
+        <StatusIcon
+          statusOptions={UploadStatusOptions}
+          status={upload_status || { value: "IN_PROGRESS" }}
         />
       );
     },

app/next-client-app/components/core/StatusIcon.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Loader2, LucideIcon, Check, X, CircleSlash } from "lucide-react";
+import { Tooltip } from "react-tooltip";
+
+export interface StatusOption {
+  label: string;
+  icon: string;
+  value: string;
+  color: string;
+}
+
+export function StatusIcon({
+  statusOptions,
+  status,
+}: {
+  statusOptions: StatusOption[];
+  status: { value: string };
+}) {
+  const statusInfo = statusOptions.find(
+    (option) => option.value === status.value
+  );
+
+  const iconMap: { [key: string]: LucideIcon } = {
+    Loader2,
+    Check,
+    X,
+    CircleSlash,
+  };
+  const Icon = statusInfo?.icon ? iconMap[statusInfo.icon] : null;
+
+  if (!Icon) {
+    return null;
+  }
+
+  return (
+    <a
+      data-tooltip-id="icon-tooltip"
+      data-tooltip-content={`${statusInfo?.label}`}
+      data-tooltip-place="top"
+      className="flex justify-center"
+    >
+      <Tooltip id="icon-tooltip" />
+      <Icon
+        className={cn(
+          statusInfo?.color,
+          "size-4",
+          Icon === Loader2 && "animate-spin"
+        )}
+      />
+    </a>
+  );
+}

app/next-client-app/components/jobs/JobDialog.tsx

@@ -5,9 +5,7 @@ import { DialogTrigger } from "@radix-ui/react-dialog";
 import { DataTable } from "../data-table";
 import { columns } from "./columns";
 import { GeneralStatus } from "@/constants/job";
-import { Loader2, X } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Tooltip } from "react-tooltip";
+import { StatusIcon } from "../core/StatusIcon";
 
 interface JobProps {
   jobGroups: Job[][];
@@ -20,29 +18,14 @@ export default function JobDialog({
   table_name,
   generalStatus,
 }: JobProps) {
-  const generalStatusOption = GeneralStatus.find(
-    (option) => option.value == generalStatus
-  );
-  const Icon = generalStatusOption?.icon || X;
-
   return (
     <Dialog>
       <DialogTrigger disabled={generalStatus == "NOT_STARTED"}>
         <div role="button">
-          <a
-            data-tooltip-id="icon-tooltip"
-            data-tooltip-content={`${generalStatusOption?.label}`}
-            data-tooltip-place="top"
-          >
-            <Tooltip id="icon-tooltip" />
-            <Icon
-              className={cn(
-                generalStatusOption?.color,
-                "size-4",
-                Icon === Loader2 && "animate-spin"
-              )}
-            />
-          </a>
+          <StatusIcon
+            status={{ value: generalStatus }}
+            statusOptions={GeneralStatus}
+          />
         </div>
       </DialogTrigger>
       <DialogContent className="max-w-screen-xl overflow-auto h-1/2">

app/next-client-app/components/jobs/columns.tsx

@@ -3,8 +3,8 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { DataTableColumnHeader } from "@/components/data-table/DataTableColumnHeader";
 import { format } from "date-fns/format";
-import { Status } from "./StageStatus";
-import { JobStage } from "@/constants/job";
+import { JobStage, StageStatus } from "@/constants/job";
+import { StatusIcon } from "@/components/core/StatusIcon";
 
 export const columns: ColumnDef<Job>[] = [
   {
@@ -28,7 +28,12 @@ export const columns: ColumnDef<Job>[] = [
     header: () => <div className="text-center">Status</div>,
     cell: ({ row }) => {
       const { status } = row.original;
-      return <Status status={status || { value: "QUEUED" }} />;
+      return (
+        <StatusIcon
+          status={status || { value: "QUEUED" }}
+          statusOptions={StageStatus}
+        />
+      );
     },
     enableSorting: false,
     enableHiding: true,

app/next-client-app/components/scanreports/MappingStatus.tsx

@@ -14,7 +14,7 @@ import { SelectTriggerProps } from "@radix-ui/react-select";
 
 interface MappingStatusProps extends SelectTriggerProps {
   id: string;
-  mapping_status: Status;
+  mapping_status: { value: string };
   dataset: string;
   disabled: boolean;
 }

app/next-client-app/components/scanreports/ScanReportTableUpdateForm.tsx

@@ -8,6 +8,7 @@ import { FormDataFilter } from "../form-components/FormikUtils";
 import { Form, Formik } from "formik";
 import { Tooltips } from "../Tooltips";
 import { FormikSelect } from "../form-components/FormikSelect";
+import { useRouter } from "next/navigation";
 
 interface FormData {
   personId: number | null;
@@ -27,6 +28,7 @@ export function ScanReportTableUpdateForm({
   personId: ScanReportField;
   dateEvent: ScanReportField;
 }) {
+  const router = useRouter();
   const canUpdate =
     permissions.includes("CanEdit") || permissions.includes("CanAdmin");
 
@@ -44,14 +46,15 @@ export function ScanReportTableUpdateForm({
     const response = await updateScanReportTable(
       scanreportTable.scan_report,
       scanreportTable.id,
-      submittingData,
+      submittingData
     );
     if (response) {
       toast.error(
-        `Update Scan Report Table failed. Error: ${response.errorMessage}`,
+        `Update Scan Report Table failed. Error: ${response.errorMessage}`
       );
     } else {
       toast.success("Update Scan Report Table successful!");
+      router.push(`/scanreports/${scanreportTable.scan_report}/`);
     }
   };