Merge pull request #1800 from deepfence/ui-fix-2044

Multiple toast message in download of scan results
deepfence · Dec 3, 2023 · 7b71a02 · 7b71a02
2 parents 4ac94af + 5533ffd
commit 7b71a02
Show file tree

Hide file tree

Showing 11 changed files with 78 additions and 28 deletions.
diff --git a/deepfence_frontend/apps/dashboard/src/features/common/data-component/downloadScanAction.tsx b/deepfence_frontend/apps/dashboard/src/features/common/data-component/downloadScanAction.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { ActionFunctionArgs, useFetcher } from 'react-router-dom';
 import { toast } from 'sonner';
 
@@ -76,7 +77,7 @@ export const action = async ({ request }: ActionFunctionArgs): Promise<null> =>
   const reportResponse = await retryUntilResponseHasValue(
     getReportApi,
     [{ reportId }],
-    async (response) => {
+    async (response, showToast) => {
       if (response.ok) {
         if (response.value.status === 'ERROR') {
           toast.error(
@@ -85,7 +86,7 @@ export const action = async ({ request }: ActionFunctionArgs): Promise<null> =>
           return true;
         }
         const url = response.value.url;
-        if (!url) {
+        if (!url && showToast) {
           toast.message(
             'Download in progress, it may take some time however you can always find it on Integrations > Report Downloads',
           );
@@ -105,6 +106,7 @@ export const action = async ({ request }: ActionFunctionArgs): Promise<null> =>
         return true;
       }
     },
+    true,
   );
 
   if (reportResponse.ok) {
@@ -119,8 +121,13 @@ export const action = async ({ request }: ActionFunctionArgs): Promise<null> =>
   return null;
 };
 
-export const useDownloadScan = () => {
+export const useDownloadScan = (isDownloading?: (state: string) => void) => {
   const fetcher = useFetcher<null>();
+
+  useEffect(() => {
+    isDownloading?.(fetcher.state);
+  }, [fetcher.state]);
+
   return {
     downloadScan: ({
       scanId,

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx
@@ -583,11 +583,14 @@ const ScanHistory = () => {
 };
 
 const HistoryControls = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const { data, fetchStatus } = useScanResults();
   const { scanStatusResult } = data;
   const { scan_id, node_id, node_type, updated_at, status } = scanStatusResult ?? {};
   const { navigate, goBack } = usePageNavigation();
-  const { downloadScan } = useDownloadScan();
+  const { downloadScan } = useDownloadScan((state) => {
+    setIsSubmitting(state === 'submitting');
+  });
   const [openStopScanModal, setOpenStopScanModal] = useState(false);
 
   const [showScanCompareModal, setShowScanCompareModal] = useState<boolean>(false);
@@ -744,7 +747,8 @@ const HistoryControls = () => {
                     <DownloadLineIcon />
                   </span>
                 }
-                disabled={fetchStatus !== 'idle'}
+                disabled={fetchStatus !== 'idle' || isSubmitting}
+                loading={isSubmitting}
                 size="md"
                 onClick={() => {
                   downloadScan({

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx
@@ -270,7 +270,10 @@ const ActionDropdown = ({
 }) => {
   const fetcher = useFetcher();
   const [open, setOpen] = useState(false);
-  const { downloadScan } = useDownloadScan();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { downloadScan } = useDownloadScan((state) => {
+    setIsSubmitting(state === 'submitting');
+  });
   const [openStopScanModal, setOpenStopScanModal] = useState(false);
 
   const onDownloadAction = useCallback(() => {
@@ -309,9 +312,11 @@ const ActionDropdown = ({
                 e.preventDefault();
                 onDownloadAction();
               }}
-              disabled={!isScanComplete(scanStatus)}
+              disabled={!isScanComplete(scanStatus) || isSubmitting}
             >
-              <span>Download report</span>
+              <span className="flex text-center gap-x-2">
+                {isSubmitting && <CircleSpinner size="sm" />}Download report
+              </span>
             </DropdownItem>
             <DropdownItem
               onClick={(e) => {

diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx
@@ -492,7 +492,10 @@ const ActionDropdown = ({
 }) => {
   const fetcher = useFetcher();
   const [open, setOpen] = useState(false);
-  const { downloadScan } = useDownloadScan();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { downloadScan } = useDownloadScan((state) => {
+    setIsSubmitting(state === 'submitting');
+  });
   const [openStopScanModal, setOpenStopScanModal] = useState(false);
 
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
@@ -578,7 +581,9 @@ const ActionDropdown = ({
                 onDownloadAction();
               }}
             >
-              Download latest report
+              <span className="flex text-center gap-x-2">
+                {isSubmitting && <CircleSpinner size="sm" />} Download latest report
+              </span>
             </DropdownItem>
             <DropdownItem
               disabled={!scanId || !nodeType}

diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureCloudScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureCloudScanResults.tsx
@@ -572,11 +572,14 @@ const ScanHistory = () => {
   );
 };
 const HistoryControls = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const { data, fetchStatus } = useScanResults();
   const { nodeType = '' } = useParams();
   const { scanStatusResult } = data;
   const { navigate, goBack } = usePageNavigation();
-  const { downloadScan } = useDownloadScan();
+  const { downloadScan } = useDownloadScan((state) => {
+    setIsSubmitting(state === 'submitting');
+  });
 
   const [openStopScanModal, setOpenStopScanModal] = useState(false);
   const { scan_id, node_id, node_type, updated_at, status } = scanStatusResult ?? {};
@@ -734,7 +737,8 @@ const HistoryControls = () => {
                     <DownloadLineIcon />
                   </span>
                 }
-                disabled={fetchStatus !== 'idle'}
+                disabled={fetchStatus !== 'idle' || isSubmitting}
+                loading={isSubmitting}
                 size="md"
                 onClick={() => {
                   downloadScan({

diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureScanResults.tsx
@@ -569,12 +569,15 @@ const ScanHistory = () => {
 };
 
 const HistoryControls = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const { data, fetchStatus } = useScanResults();
   const { nodeType = '' } = useParams();
   const { scanStatusResult } = data;
   const { scan_id, node_id, node_type, updated_at, status } = scanStatusResult ?? {};
   const { navigate, goBack } = usePageNavigation();
-  const { downloadScan } = useDownloadScan();
+  const { downloadScan } = useDownloadScan((state) => {
+    setIsSubmitting(state === 'submitting');
+  });
 
   const [openStopScanModal, setOpenStopScanModal] = useState(false);
 
@@ -730,7 +733,8 @@ const HistoryControls = () => {
                     <DownloadLineIcon />
                   </span>
                 }
-                disabled={fetchStatus !== 'idle'}
+                disabled={fetchStatus !== 'idle' || isSubmitting}
+                loading={isSubmitting}
                 size="md"
                 onClick={() => {
                   downloadScan({

diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScanResults.tsx
@@ -582,11 +582,14 @@ const ScanHistory = () => {
 };
 
 const HistoryControls = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const { data, fetchStatus } = useScanResults();
   const { scanStatusResult } = data;
   const { scan_id, node_id, node_type, updated_at, status } = scanStatusResult ?? {};
   const { navigate, goBack } = usePageNavigation();
-  const { downloadScan } = useDownloadScan();
+  const { downloadScan } = useDownloadScan((state) => {
+    setIsSubmitting(state === 'submitting');
+  });
   const [openStopScanModal, setOpenStopScanModal] = useState(false);
 
   const [showScanCompareModal, setShowScanCompareModal] = useState<boolean>(false);
@@ -743,7 +746,8 @@ const HistoryControls = () => {
                     <DownloadLineIcon />
                   </span>
                 }
-                disabled={fetchStatus !== 'idle'}
+                disabled={fetchStatus !== 'idle' || isSubmitting}
+                loading={isSubmitting}
                 size="md"
                 onClick={() => {
                   downloadScan({

diff --git a/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScans.tsx b/deepfence_frontend/apps/dashboard/src/features/secrets/pages/SecretScans.tsx
@@ -270,7 +270,10 @@ const ActionDropdown = ({
 }) => {
   const fetcher = useFetcher();
   const [open, setOpen] = useState(false);
-  const { downloadScan } = useDownloadScan();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { downloadScan } = useDownloadScan((state) => {
+    setIsSubmitting(state === 'submitting');
+  });
   const [openStopScanModal, setOpenStopScanModal] = useState(false);
 
   const onDownloadAction = useCallback(() => {
@@ -309,9 +312,11 @@ const ActionDropdown = ({
                 e.preventDefault();
                 onDownloadAction();
               }}
-              disabled={!isScanComplete(scanStatus)}
+              disabled={!isScanComplete(scanStatus) || isSubmitting}
             >
-              <span>Download report</span>
+              <span className="flex text-center gap-x-2">
+                {isSubmitting && <CircleSpinner size="sm" />}Download report
+              </span>
             </DropdownItem>
             <DropdownItem
               onClick={(e) => {

diff --git a/...e_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScanResults.tsx b/...e_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScanResults.tsx
@@ -25,7 +25,6 @@ import {
   DropdownItem,
   DropdownSeparator,
   getRowSelectionColumn,
-  IconButton,
   Modal,
   RowSelectionState,
   SortingState,
@@ -542,12 +541,15 @@ const ScanHistory = () => {
 };
 
 const HistoryControls = () => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const { data, fetchStatus } = useScanResults();
   const { scanStatusResult } = data;
   const { scan_id, node_id, node_type, updated_at, status, node_name } =
     scanStatusResult ?? {};
   const { navigate, goBack } = usePageNavigation();
-  const { downloadScan } = useDownloadScan();
+  const { downloadScan } = useDownloadScan((state) => {
+    setIsSubmitting(state === 'submitting');
+  });
 
   const [openStopScanModal, setOpenStopScanModal] = useState(false);
   const [showScanCompareModal, setShowScanCompareModal] = useState<boolean>(false);
@@ -709,7 +711,8 @@ const HistoryControls = () => {
                     <DownloadLineIcon />
                   </span>
                 }
-                disabled={fetchStatus !== 'idle'}
+                disabled={fetchStatus !== 'idle' || isSubmitting}
+                loading={isSubmitting}
                 size="md"
                 onClick={() => {
                   downloadScan({

diff --git a/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx b/deepfence_frontend/apps/dashboard/src/features/vulnerabilities/pages/VulnerabilityScans.tsx
@@ -305,7 +305,10 @@ const ActionDropdown = ({
   const fetcher = useFetcher();
   const [open, setOpen] = useState(false);
   const [openStopScanModal, setOpenStopScanModal] = useState(false);
-  const { downloadScan } = useDownloadScan();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { downloadScan } = useDownloadScan((state) => {
+    setIsSubmitting(state === 'submitting');
+  });
   const onDownloadAction = useCallback(
     (actionType?: ActionEnumType) => {
       if (!actionType) {
@@ -356,9 +359,11 @@ const ActionDropdown = ({
                 e.preventDefault();
                 onDownloadAction();
               }}
-              disabled={!isScanComplete(scanStatus)}
+              disabled={!isScanComplete(scanStatus) || isSubmitting}
             >
-              Download Report
+              <span className="flex text-center gap-x-2">
+                {isSubmitting && <CircleSpinner size="sm" />}Download report
+              </span>
             </DropdownItem>
             <DropdownItem
               onClick={(e) => {

diff --git a/deepfence_frontend/apps/dashboard/src/utils/api.ts b/deepfence_frontend/apps/dashboard/src/utils/api.ts
@@ -131,13 +131,17 @@ export function apiWrapper<F extends Func<any[], any>>({
 export const retryUntilResponseHasValue = async <F extends Func<any[], any>>(
   fn: F,
   fnParams: Parameters<F>,
-  checkResponseHasValue: (response: Awaited<ReturnType<F>>) => Promise<boolean>,
+  checkResponseHasValue: (
+    response: Awaited<ReturnType<F>>,
+    show: boolean,
+  ) => Promise<boolean>,
+  showToast = true,
 ): Promise<ReturnType<F>> => {
   const response = await fn(...fnParams);
-  const isPresent = await checkResponseHasValue(response);
+  const isPresent = await checkResponseHasValue(response, showToast);
   if (!isPresent) {
     await sleep(3000);
-    return retryUntilResponseHasValue(fn, fnParams, checkResponseHasValue);
+    return retryUntilResponseHasValue(fn, fnParams, checkResponseHasValue, isPresent);
   }
   return response;
 };