scan history selection improvements (#2283)

* scan history selection improvements

* update codeowners

* added back the test ids

* add more spacing between refresh button and dropdown target

* do not show previous data if cloud posture scan is in progress

* fix compare cloud scan incorrect query order

.github/CODEOWNERS

@@ -1 +1 @@
-/deepfence_frontend/ @manV @milan-deepfence
+/deepfence_frontend/ @manV

deepfence_frontend/apps/dashboard/src/components/forms/CompareScanInputModal.tsx

@@ -2,7 +2,7 @@ import { Suspense, useEffect, useState } from 'react';
 import { Button, Checkbox, CircleSpinner, Modal } from 'ui-components';
 
 import { ModelNodeIdentifierNodeTypeEnum } from '@/api/generated';
-import { ISelected, ScanTimeList } from '@/components/forms/ScanTimeList';
+import { ScanTimeList } from '@/components/forms/ScanTimeList';
 import { ImageTagType, SearchableTagList } from '@/components/forms/SearchableTagList';
 import { useScanResults as malwareScanResults } from '@/features/malwares/pages/MalwareScanResults';
 import { useScanResults as secretScanResults } from '@/features/secrets/pages/SecretScanResults';
@@ -48,60 +48,42 @@ const Tags = ({
     />
   );
 };
-type ToScanDataType = {
-  toScanId: string;
-  toScanTime: number | null;
-};
 
 const InputForm = ({
   nodeId,
   nodeType,
   scanType,
-  compareInput,
   toScanData,
   setToScanData,
+  baseScanInfo,
 }: {
   nodeId: string;
   nodeType: string;
   scanType: string;
-  compareInput: {
-    baseScanId: string;
-    toScanId: string;
-    baseScanTime: number;
-    toScanTime: number;
+  baseScanInfo: {
+    scanId: string;
+    createdAt: number;
   };
-  toScanData: ToScanDataType;
-  setToScanData: React.Dispatch<React.SetStateAction<ToScanDataType>>;
+  toScanData: { scanId: string; createdAt: number } | null;
+  setToScanData: React.Dispatch<
+    React.SetStateAction<{ scanId: string; createdAt: number } | null>
+  >;
 }) => {
-  const [selectedTag, setSelectedTag] = useState<ImageTagType | null>({
-    nodeId,
-    nodeName: '',
-    tagList: [],
-  });
+  const [selectedTag, setSelectedTag] = useState<ImageTagType | null>(null);
   const [withOtherTags, setWithOtherTags] = useState<boolean>(false);
 
   // clear scan time when compare with other tags checkbox is checked
   useEffect(() => {
     if (withOtherTags) {
-      setSelectedTag({
-        nodeId: '',
-        nodeName: '',
-        tagList: [],
-      });
+      setSelectedTag(null);
     }
-    setToScanData({
-      toScanTime: null,
-      toScanId: '',
-    });
+    setToScanData(null);
   }, [withOtherTags]);
 
   // clear to scan time when tag is selected
   useEffect(() => {
     if (selectedTag) {
-      setToScanData({
-        toScanTime: null,
-        toScanId: '',
-      });
+      setToScanData(null);
     }
   }, [selectedTag]);
 
@@ -132,12 +114,12 @@ const InputForm = ({
         {withOtherTags ? (
           <ScanTimeList
             triggerVariant="underline"
-            defaultSelectedTime={toScanData.toScanTime ?? null}
+            defaultSelectedTime={toScanData?.createdAt ?? null}
             valueKey="nodeId"
-            onChange={(data: ISelected) => {
+            onChange={(data) => {
               setToScanData({
-                toScanTime: data.createdAt,
-                toScanId: data.scanId,
+                createdAt: data.createdAt,
+                scanId: data.scanId,
               });
             }}
             // node id should be selected tag nodeid
@@ -149,19 +131,19 @@ const InputForm = ({
         ) : (
           <ScanTimeList
             triggerVariant="underline"
-            defaultSelectedTime={toScanData.toScanTime ?? null}
+            defaultSelectedTime={toScanData?.createdAt ?? null}
             valueKey="nodeId"
-            onChange={(data: ISelected) => {
+            onChange={(data) => {
               setToScanData({
-                toScanTime: data.createdAt,
-                toScanId: data.scanId,
+                createdAt: data.createdAt,
+                scanId: data.scanId,
               });
             }}
             nodeId={nodeId}
             nodeType={nodeType}
             scanType={scanType as ScanTypeEnum}
             // skip scan time when base scan is same as to scan
-            skipScanTime={compareInput.baseScanTime}
+            skipScanTime={baseScanInfo.createdAt}
             noDataText="No scan to compare"
           />
         )}
@@ -172,60 +154,43 @@ const InputForm = ({
 export const CompareScanInputModal = ({
   showDialog,
   setShowDialog,
-  scanHistoryData,
-  setShowScanCompareModal,
-  setCompareInput,
   nodeId,
   nodeType,
   scanType,
-  compareInput,
+  baseScanInfo,
 }: {
   showDialog: boolean;
-  setShowDialog: React.Dispatch<React.SetStateAction<boolean>>;
-  scanHistoryData: {
-    createdAt: number;
-    scanId: string;
-    status: string;
-  }[];
-  setShowScanCompareModal: React.Dispatch<React.SetStateAction<boolean>>;
-  setCompareInput: React.Dispatch<
-    React.SetStateAction<{
-      baseScanId: string;
-      toScanId: string;
-      baseScanTime: number;
-      toScanTime: number;
-      showScanTimeModal: boolean;
-    }>
-  >;
+  setShowDialog: (
+    open: boolean,
+    compareToScanInfo: { scanId: string; createdAt: number } | null,
+  ) => void;
   nodeId: string;
   nodeType: string;
   scanType: string;
-  compareInput: {
-    baseScanId: string;
-    toScanId: string;
-    baseScanTime: number;
-    toScanTime: number;
+  baseScanInfo: {
+    scanId: string;
+    createdAt: number;
   };
 }) => {
-  const [toScanData, setToScanData] = useState<ToScanDataType>({
-    toScanId: '',
-    toScanTime: null,
-  });
+  const [toScanData, setToScanData] = useState<{
+    scanId: string;
+    createdAt: number;
+  } | null>(null);
 
   return (
     <Modal
       size="s"
       open={showDialog}
-      onOpenChange={() => {
-        setShowDialog(false);
+      onOpenChange={(open) => {
+        setShowDialog(open, null);
       }}
       title="Select scan to compare"
       footer={
         <div className={'flex gap-x-4 justify-end'}>
           <Button
             size="md"
             onClick={() => {
-              setShowDialog(false);
+              setShowDialog(false, null);
             }}
             type="button"
             variant="outline"
@@ -235,20 +200,9 @@ export const CompareScanInputModal = ({
           <Button
             size="md"
             type="button"
-            disabled={!toScanData.toScanTime}
+            disabled={!toScanData}
             onClick={() => {
-              const baseScan = scanHistoryData.find((data) => {
-                return data.createdAt === compareInput.baseScanTime;
-              });
-              setCompareInput({
-                baseScanId: baseScan?.scanId ?? '',
-                toScanId: toScanData?.toScanId ?? '',
-                baseScanTime: baseScan?.createdAt ?? 0,
-                toScanTime: toScanData?.toScanTime ?? 0,
-                showScanTimeModal: false,
-              });
-              setShowDialog(false);
-              setShowScanCompareModal(true);
+              setShowDialog(false, toScanData);
             }}
           >
             Compare
@@ -261,7 +215,7 @@ export const CompareScanInputModal = ({
           nodeId={nodeId}
           nodeType={nodeType}
           scanType={scanType}
-          compareInput={compareInput}
+          baseScanInfo={baseScanInfo}
           setToScanData={setToScanData}
           toScanData={toScanData}
         />

deepfence_frontend/apps/dashboard/src/components/forms/ScanTimeList.tsx

@@ -53,7 +53,7 @@ const ScanTime = ({
     setSelectedTime(defaultSelectedTime ?? null);
   }, [defaultSelectedTime]);
 
-  const { data, hasNextPage, isFetchingNextPage, fetchNextPage } =
+  const { data, isFetchingNextPage, hasNextPage, fetchNextPage } =
     useSuspenseInfiniteQuery({
       ...queries.common.scanHistories({
         size: PAGE_SIZE,
@@ -63,6 +63,9 @@ const ScanTime = ({
       }),
       keepPreviousData: true,
       getNextPageParam: (lastPage, allPages) => {
+        if (!('data' in lastPage) || !lastPage.hasNextPage) {
+          return undefined;
+        }
         return allPages.length * PAGE_SIZE;
       },
       getPreviousPageParam: (firstPage, allPages) => {
@@ -75,6 +78,10 @@ const ScanTime = ({
     if (hasNextPage) fetchNextPage();
   };
 
+  if (data.pages.find((page) => 'error' in page)) {
+    return <div className="text-p7a text-status-error">Error getting scan history.</div>;
+  }
+
   return (
     <>
       <Listbox
@@ -106,12 +113,14 @@ const ScanTime = ({
       >
         {data?.pages
           .flatMap((page) => {
+            if ('error' in page) {
+              return [];
+            }
             return page.data;
           })
           .filter(
             (scan) => scan.createdAt !== skipScanTime && isScanComplete(scan.status),
           )
-          .reverse()
           ?.map?.((scan) => {
             return (
               <ListboxOption

deepfence_frontend/apps/dashboard/src/components/header/AutoRefresh.tsx

@@ -49,7 +49,7 @@ export const AutoRefresh = () => {
   }, [spinning]);
 
   return (
-    <div className="flex items-stretch dark:text-text-text-and-icon text-bg-grid-border">
+    <div className="flex gap-3 items-stretch dark:text-text-text-and-icon text-bg-grid-border">
       <button
         className="flex items-center justify-center"
         title="Refresh now"
@@ -64,7 +64,7 @@ export const AutoRefresh = () => {
         }}
       >
         <span
-          className={cn('w-4 h-4', {
+          className={cn('w-6 h-4', {
             'animate-spin direction-reverse': spinning,
           })}
         >

deepfence_frontend/apps/dashboard/src/components/scan-history/HistoryControlsSkeleton.tsx

@@ -0,0 +1,12 @@
+export const HistoryControlsSkeleton = () => {
+  return (
+    <div className="flex items-center gap-x-2">
+      <div className="h-4 w-40 bg-gray-200 dark:bg-gray-800 rounded"></div>
+      <div className="h-4 w-32 bg-gray-200 dark:bg-gray-800 rounded"></div>
+      <div className="h-4 w-28 bg-gray-200 dark:bg-gray-800 rounded"></div>
+      <div className="h-4 w-20 bg-gray-200 dark:bg-gray-800 rounded"></div>
+      <div className="h-4 w-32 bg-gray-200 dark:bg-gray-800 rounded"></div>
+      <div className="h-4 w-44 bg-gray-200 dark:bg-gray-800 rounded"></div>
+    </div>
+  );
+};