Merge pull request #1387 from deepfence/ui-v2-bug-fixes-3

UI v2 bug fixes 3
deepfence · Jul 21, 2023 · b96bb34 · b96bb34
2 parents fd5d2e5 + 1fb1972
commit b96bb34
Show file tree

Hide file tree

Showing 17 changed files with 177 additions and 210 deletions.
diff --git a/deepfence_frontend/apps/dashboard/src/components/ReactEcharts.tsx b/deepfence_frontend/apps/dashboard/src/components/ReactEcharts.tsx
@@ -26,7 +26,9 @@ export function ReactECharts({
     // Initialize chart
     let chart: ECharts | undefined;
     if (chartRef.current !== null) {
-      chart = init(chartRef.current, theme);
+      chart = init(chartRef.current, theme, {
+        renderer: 'svg',
+      });
     }
 
     // Return cleanup function

diff --git a/deepfence_frontend/apps/dashboard/src/components/forms/SearchableClusterList.tsx b/deepfence_frontend/apps/dashboard/src/components/forms/SearchableClusterList.tsx
@@ -47,6 +47,10 @@ export const SearchableClusterList = ({
       searchText,
       active,
       agentRunning: true,
+      order: {
+        sortBy: 'node_name',
+        descending: false,
+      },
     }),
     keepPreviousData: true,
     getNextPageParam: (lastPage, allPages) => {

diff --git a/deepfence_frontend/apps/dashboard/src/components/forms/SearchableContainerList.tsx b/deepfence_frontend/apps/dashboard/src/components/forms/SearchableContainerList.tsx
@@ -45,6 +45,10 @@ export const SearchableContainerList = ({
       size: PAGE_SIZE,
       searchText,
       active,
+      order: {
+        sortBy: 'node_name',
+        descending: false,
+      },
     }),
     keepPreviousData: true,
     getNextPageParam: (lastPage, allPages) => {

diff --git a/deepfence_frontend/apps/dashboard/src/components/forms/SearchableHostList.tsx b/deepfence_frontend/apps/dashboard/src/components/forms/SearchableHostList.tsx
@@ -51,6 +51,10 @@ export const SearchableHostList = ({
       searchText,
       active,
       agentRunning: true,
+      order: {
+        sortBy: 'host_name',
+        descending: false,
+      },
     }),
     keepPreviousData: true,
     getNextPageParam: (lastPage, allPages) => {

diff --git a/deepfence_frontend/apps/dashboard/src/components/forms/SearchableImageList.tsx b/deepfence_frontend/apps/dashboard/src/components/forms/SearchableImageList.tsx
@@ -46,6 +46,10 @@ export const SearchableImageList = ({
       size: PAGE_SIZE,
       searchText,
       active,
+      order: {
+        sortBy: 'node_name',
+        descending: false,
+      },
     }),
     keepPreviousData: true,
     getNextPageParam: (lastPage, allPages) => {

diff --git a/...end/apps/dashboard/src/components/scan-configure-forms/VulnerabilityScanConfigureForm.tsx b/...end/apps/dashboard/src/components/scan-configure-forms/VulnerabilityScanConfigureForm.tsx
@@ -16,11 +16,11 @@ import { apiWrapper } from '@/utils/api';
 import { isNodeTypeARegistryTagType, isNodeTypeARegistryType } from '@/utils/registry';
 
 const getPackages = () => [
-  // {
-  //   name: 'OS Packages',
-  //   checked: false,
-  //   value: ModelVulnerabilityScanTriggerReqScanConfigEnum.Base,
-  // },
+  {
+    name: 'OS Packages',
+    checked: false,
+    value: ModelVulnerabilityScanConfigLanguageLanguageEnum.Base,
+  },
   {
     name: 'Java',
     checked: false,

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScanResults.tsx
@@ -565,7 +565,7 @@ const HistoryControls = () => {
       )}
       <div className="h-3 w-[1px] dark:bg-bg-grid-border"></div>
       <ScanStatusBadge status={status ?? ''} />
-      {!isScanInProgress && (
+      {!isScanInProgress(status ?? '') && (
         <>
           <div className="h-3 w-[1px] dark:bg-bg-grid-border"></div>
           <div className="pl-1.5 flex">
@@ -638,9 +638,6 @@ const ActionDropdown = ({
             Un-mask malware across hosts and images
           </DropdownItem>
           <DropdownSeparator />
-          <DropdownItem onClick={() => onTableAction(ids, ActionEnumType.NOTIFY)}>
-            Notify
-          </DropdownItem>
           <DropdownSeparator />
           <DropdownItem
             onClick={() => {
@@ -730,18 +727,6 @@ const BulkActions = ({
           Unmask
         </Button>
       </Dropdown>
-      <Button
-        color="default"
-        variant="flat"
-        size="sm"
-        startIcon={<BellLineIcon />}
-        disabled={!ids.length}
-        onClick={() => {
-          onTableAction(ids, ActionEnumType.NOTIFY);
-        }}
-      >
-        Notify
-      </Button>
       <Button
         color="error"
         variant="flat"
@@ -1144,12 +1129,12 @@ const DynamicBreadcrumbs = () => {
 
   return (
     <>
-      <BreadcrumbLink isLink icon={<MalwareIcon />} asChild>
+      <BreadcrumbLink isLink asChild>
         <DFLink to={`/malware/scans?nodeType=${node_type}`} unstyled>
           {capitalize(node_type ?? '')}
         </DFLink>
       </BreadcrumbLink>
-      <BreadcrumbLink icon={<MalwareIcon />} isLast>
+      <BreadcrumbLink isLast>
         <span className="inherit cursor-auto">{node_name}</span>
       </BreadcrumbLink>
     </>

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx
@@ -932,7 +932,7 @@ const MalwareScans = () => {
               Malwares
             </DFLink>
           </BreadcrumbLink>
-          <BreadcrumbLink icon={<MalwareIcon />}>
+          <BreadcrumbLink>
             <span className="inherit cursor-auto">Malware Scans</span>
           </BreadcrumbLink>
         </Breadcrumb>

diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx
@@ -783,7 +783,7 @@ const Header = () => {
             Posture
           </DFLink>
         </BreadcrumbLink>
-        <BreadcrumbLink icon={<PostureIcon />}>
+        <BreadcrumbLink>
           <span className="inherit cursor-auto">
             {providersToNameMapping[routeParams.nodeType]}
           </span>

diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureCloudScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureCloudScanResults.tsx
@@ -615,9 +615,6 @@ const ActionDropdown = ({
             Un-mask
           </DropdownItem>
           <DropdownSeparator />
-          <DropdownItem onClick={() => onTableAction(ids, ActionEnumType.NOTIFY)}>
-            Notify
-          </DropdownItem>
           <DropdownSeparator />
           <DropdownItem
             onClick={() => {
@@ -694,18 +691,6 @@ const BulkActions = ({
           Unmask
         </Button>
       </Dropdown>
-      <Button
-        color="default"
-        variant="flat"
-        size="sm"
-        startIcon={<BellLineIcon />}
-        disabled={!ids.length}
-        onClick={() => {
-          onTableAction(ids, ActionEnumType.NOTIFY);
-        }}
-      >
-        Notify
-      </Button>
       <Button
         color="error"
         variant="flat"
@@ -1116,6 +1101,7 @@ const CloudPostureTable = ({
         enableResizing: false,
       }),
       columnHelper.accessor('node_id', {
+        id: 'control_id',
         enableSorting: true,
         enableResizing: false,
         cell: (info) => {
@@ -1298,7 +1284,7 @@ const DynamicBreadcrumbs = () => {
 
   return (
     <>
-      <BreadcrumbLink isLink icon={<PostureIcon />} asChild>
+      <BreadcrumbLink isLink asChild>
         <DFLink
           to={generatePath('/posture/accounts/:nodeType', {
             nodeType: params.nodeType,
@@ -1308,7 +1294,7 @@ const DynamicBreadcrumbs = () => {
           {providersToNameMapping[params.nodeType]}
         </DFLink>
       </BreadcrumbLink>
-      <BreadcrumbLink icon={<PostureIcon />} isLast>
+      <BreadcrumbLink isLast>
         <span className="inherit cursor-auto">{node_name}</span>
       </BreadcrumbLink>
     </>

diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureScanResults.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/PostureScanResults.tsx
@@ -613,9 +613,6 @@ const ActionDropdown = ({
             Un-mask
           </DropdownItem>
           <DropdownSeparator />
-          <DropdownItem onClick={() => onTableAction(ids, ActionEnumType.NOTIFY)}>
-            Notify
-          </DropdownItem>
           <DropdownSeparator />
           <DropdownItem
             onClick={() => {
@@ -693,18 +690,6 @@ const BulkActions = ({
           Unmask
         </Button>
       </Dropdown>
-      <Button
-        color="default"
-        variant="flat"
-        size="sm"
-        startIcon={<BellLineIcon />}
-        disabled={!ids.length}
-        onClick={() => {
-          onTableAction(ids, ActionEnumType.NOTIFY);
-        }}
-      >
-        Notify
-      </Button>
       <Button
         color="error"
         variant="flat"
@@ -1086,6 +1071,7 @@ const PostureTable = ({
         enableResizing: false,
       }),
       columnHelper.accessor('node_id', {
+        id: 'test_number',
         enableSorting: true,
         enableResizing: false,
         cell: (info) => (
@@ -1267,7 +1253,7 @@ const DynamicBreadcrumbs = () => {
   };
   return (
     <>
-      <BreadcrumbLink isLink icon={<PostureIcon />} asChild>
+      <BreadcrumbLink isLink asChild>
         <DFLink
           to={generatePath('/posture/accounts/:nodeType', {
             nodeType: params.nodeType,
@@ -1276,7 +1262,7 @@ const DynamicBreadcrumbs = () => {
           {providersToNameMapping[params.nodeType]}
         </DFLink>
       </BreadcrumbLink>
-      <BreadcrumbLink icon={<PostureIcon />} isLast>
+      <BreadcrumbLink isLast>
         <span className="inherit cursor-auto">{node_name}</span>
       </BreadcrumbLink>
     </>

diff --git a/deepfence_frontend/apps/dashboard/src/features/registries/pages/RegistryAccounts.tsx b/deepfence_frontend/apps/dashboard/src/features/registries/pages/RegistryAccounts.tsx
@@ -1,7 +1,7 @@
 import { useSuspenseQuery } from '@suspensive/react-query';
 import { useIsFetching } from '@tanstack/react-query';
 import { isEmpty } from 'lodash-es';
-import { Suspense, useCallback, useState } from 'react';
+import { Suspense, useCallback, useEffect, useState } from 'react';
 import { ActionFunctionArgs, useFetcher, useParams } from 'react-router-dom';
 import { toast } from 'sonner';
 import {
@@ -58,11 +58,6 @@ type ActionData = {
   message?: string;
 } | null;
 
-type ActionReturnType = {
-  message?: string;
-  success: boolean;
-};
-
 export type RegistryScanType =
   | typeof ScanTypeEnum.VulnerabilityScan
   | typeof ScanTypeEnum.SecretScan
@@ -108,7 +103,7 @@ function getScanOptions(
   throw new Error('invalid scan type');
 }
 
-const action = async ({ request }: ActionFunctionArgs): Promise<ActionReturnType> => {
+const action = async ({ request }: ActionFunctionArgs): Promise<ActionData> => {
   const formData = await request.formData();
   const actionType = formData.get('actionType');
 
@@ -125,16 +120,23 @@ const action = async ({ request }: ActionFunctionArgs): Promise<ActionReturnType
         return {
           message: modelResponse.message ?? '',
           success: false,
+          action: actionType,
         };
       } else if (r.error.response.status === 403) {
         const message = await get403Message(r.error);
         return {
           message,
           success: false,
+          action: actionType,
         };
       }
       throw r.error;
     }
+    invalidateAllQueries();
+    return {
+      success: true,
+      action: ActionEnumType.DELETE,
+    };
   } else if (actionType === ActionEnumType.SYNC_IMAGES) {
     const registryId = formData.get('nodeIds')?.toString() ?? '';
     if (!registryId) {
@@ -154,17 +156,15 @@ const action = async ({ request }: ActionFunctionArgs): Promise<ActionReturnType
         return {
           success: false,
           message,
+          action: actionType,
         };
       }
       throw result.error;
     }
+    invalidateAllQueries();
     toast.success('Sync registry images started successfully, please wait for sometime');
   }
-
-  invalidateAllQueries();
-  return {
-    success: true,
-  };
+  return null;
 };
 
 const DEFAULT_PAGE_SIZE = 10;
@@ -184,10 +184,12 @@ const DeleteConfirmationModal = ({
   id,
   showDialog,
   setShowDialog,
+  onDeleteSuccess,
 }: {
   showDialog: boolean;
   id: string;
   setShowDialog: React.Dispatch<React.SetStateAction<boolean>>;
+  onDeleteSuccess: () => void;
 }) => {
   const fetcher = useFetcher<ActionData>();
 
@@ -203,6 +205,17 @@ const DeleteConfirmationModal = ({
     },
     [fetcher, id],
   );
+
+  useEffect(() => {
+    if (
+      fetcher.state === 'idle' &&
+      fetcher.data?.success &&
+      fetcher.data.action === ActionEnumType.DELETE
+    ) {
+      onDeleteSuccess();
+    }
+  }, [fetcher]);
+
   return (
     <Modal
       size="s"
@@ -499,6 +512,9 @@ const RegistryAccountsResults = () => {
           showDialog={showDeleteDialog}
           id={idsToDelete}
           setShowDialog={setShowDeleteDialog}
+          onDeleteSuccess={() => {
+            setRowSelectionState({});
+          }}
         />
       )}
       {