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

UI v2 bug fixes
deepfence · Jul 19, 2023 · 2609762 · 2609762
2 parents 8b19e99 + cfd8a71
commit 2609762
Show file tree

Hide file tree

Showing 19 changed files with 270 additions and 112 deletions.
diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/components/IntegrationForm.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/components/IntegrationForm.tsx
@@ -539,10 +539,10 @@ export const IntegrationForm = ({
               label="Jira Url"
               placeholder="Jira site url"
               helperText={
-                fieldErrors?.url ??
+                fieldErrors?.jira_site_url ??
                 'Ex. https://[organization].atlassian.net/Version: 7.13'
               }
-              color={fieldErrors?.url ? 'error' : 'default'}
+              color={fieldErrors?.jira_site_url ? 'error' : 'default'}
             />
             <Radio
               name="authTypeRadio"
@@ -566,10 +566,12 @@ export const IntegrationForm = ({
               name="authType"
               label={authType === 'password' ? 'Password' : 'Api Token'}
               helperText={
-                authType === 'password' ? fieldErrors?.password : fieldErrors?.api_token
+                authType === 'password'
+                  ? fieldErrors?.password
+                  : fieldErrors?.is_auth_token
               }
               color={
-                fieldErrors?.password || fieldErrors?.api_token ? 'error' : 'default'
+                fieldErrors?.password || fieldErrors?.is_auth_token ? 'error' : 'default'
               }
               type={authType === 'password' ? 'password' : 'text'}
               placeholder={authType === 'password' ? 'password' : 'Api token'}
@@ -617,15 +619,15 @@ export const IntegrationForm = ({
               name="folder"
               label={'Folder'}
               placeholder="S3 folder"
-              helperText={fieldErrors?.aws_access_key}
-              color={fieldErrors?.s3_folaws_access_keyder_name ? 'error' : 'default'}
+              helperText={fieldErrors?.s3_folder_name}
+              color={fieldErrors?.s3_folder_name ? 'error' : 'default'}
             />
             <TextInputType
               name="accessKey"
               label="Access Key"
               placeholder="AWS access key"
-              helperText={fieldErrors?.jira_assignee}
-              color={fieldErrors?.jira_assignee ? 'error' : 'default'}
+              helperText={fieldErrors?.aws_access_key}
+              color={fieldErrors?.aws_access_key ? 'error' : 'default'}
             />
             <TextInputType
               name="secretKey"

diff --git a/...rontend/apps/dashboard/src/features/integrations/components/useIntegrationTableColumn.tsx b/...rontend/apps/dashboard/src/features/integrations/components/useIntegrationTableColumn.tsx
@@ -380,6 +380,19 @@ export const useIntegrationTableColumn = (
             },
           ),
         ];
+      case IntegrationType.email:
+        return [
+          columnHelper.display({
+            id: 'email_id',
+            header: () => <TruncatedText text={'Email id'} />,
+            cell: (info) => (
+              <TruncatedText text={info.row.original.config?.email_id ?? ''} />
+            ),
+            minSize: 45,
+            size: 50,
+            maxSize: 55,
+          }),
+        ];
       default:
         console.warn('Dynamic columns valid integration type');
         return [];

diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/IntegrationAdd.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/IntegrationAdd.tsx
@@ -1,11 +1,6 @@
 import { useSuspenseQuery } from '@suspensive/react-query';
 import { Suspense, useCallback, useState } from 'react';
-import {
-  ActionFunctionArgs,
-  FetcherWithComponents,
-  useFetcher,
-  useParams,
-} from 'react-router-dom';
+import { ActionFunctionArgs, useFetcher, useParams } from 'react-router-dom';
 import { toast } from 'sonner';
 import {
   Button,
@@ -352,7 +347,6 @@ const action = async ({ request, params }: ActionFunctionArgs): Promise<ActionDa
         };
       }
     }
-    toast.success('Deleted successfully');
     invalidateAllQueries();
     return {
       deleteSuccess: true,
@@ -396,7 +390,7 @@ const DeleteConfirmationModal = ({
             <span className="h-6 w-6 shrink-0">
               <ErrorStandardLineIcon />
             </span>
-            Delete report
+            Delete integration
           </div>
         ) : undefined
       }

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareDetailModal.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareDetailModal.tsx
@@ -16,6 +16,7 @@ import { CopyLineIcon } from '@/components/icons/common/CopyLine';
 import { SeverityBadge } from '@/components/SeverityBadge';
 import { MalwareIcon } from '@/components/sideNavigation/icons/Malware';
 import { queries } from '@/queries';
+import { replacebyUppercaseCharacters } from '@/utils/label';
 import { usePageNavigation } from '@/utils/usePageNavigation';
 
 function useGetMalwareDetails() {
@@ -83,7 +84,7 @@ const Header = () => {
 };
 
 function processLabel(labelKey: string) {
-  return labelKey.replaceAll('_', ' ').replaceAll('id', 'ID');
+  return replacebyUppercaseCharacters(labelKey);
 }
 
 const DetailsComponent = () => {
@@ -121,6 +122,8 @@ const DetailsComponent = () => {
             valueAsStr = value.length ? value.join(', ') : '-';
           } else if (typeof value === 'string') {
             valueAsStr = value?.length ? value : '-';
+          } else if (value === undefined) {
+            valueAsStr = '-';
           } else {
             valueAsStr = String(value);
           }

diff --git a/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx b/deepfence_frontend/apps/dashboard/src/features/malwares/pages/MalwareScans.tsx
@@ -32,6 +32,10 @@ import {
   UtilsReportFiltersNodeTypeEnum,
   UtilsReportFiltersScanTypeEnum,
 } from '@/api/generated';
+import {
+  ConfigureScanModal,
+  ConfigureScanModalProps,
+} from '@/components/ConfigureScanModal';
 import { DFLink } from '@/components/DFLink';
 import { FilterBadge } from '@/components/filters/FilterBadge';
 import { SearchableClusterList } from '@/components/forms/SearchableClusterList';
@@ -57,6 +61,7 @@ import { formatMilliseconds } from '@/utils/date';
 import {
   isNeverScanned,
   isScanComplete,
+  isScanInProgress,
   MalwareScanGroupedStatus,
   SCAN_STATUS_GROUPS,
 } from '@/utils/scan';
@@ -219,6 +224,7 @@ const ActionDropdown = ({
   setShowDeleteDialog,
   setScanIdToDelete,
   setNodeIdToDelete,
+  setStartScanInfo,
 }: {
   trigger: React.ReactNode;
   scanId: string;
@@ -228,6 +234,13 @@ const ActionDropdown = ({
   setShowDeleteDialog: React.Dispatch<React.SetStateAction<boolean>>;
   setScanIdToDelete: React.Dispatch<React.SetStateAction<string>>;
   setNodeIdToDelete: React.Dispatch<React.SetStateAction<string>>;
+  setStartScanInfo: React.Dispatch<
+    React.SetStateAction<{
+      start: boolean;
+      nodeId: string;
+      nodeType: string;
+    }>
+  >;
 }) => {
   const fetcher = useFetcher();
   const [open, setOpen] = useState(false);
@@ -272,20 +285,17 @@ const ActionDropdown = ({
             </DropdownItem>
             <DropdownItem
               onClick={(e) => {
-                if (!isScanComplete(scanStatus)) return;
                 e.preventDefault();
-                onDownloadAction();
+                if (isScanInProgress(scanStatus)) return;
+                setStartScanInfo({
+                  start: true,
+                  nodeId,
+                  nodeType,
+                });
               }}
-              disabled
+              disabled={isScanInProgress(scanStatus)}
             >
-              <span
-                className={cx('flex items-center gap-x-2', {
-                  'opacity-60 dark:opacity-30 cursor-default':
-                    !isScanComplete(scanStatus),
-                })}
-              >
-                Start scan
-              </span>
+              <span className="flex items-center">Start scan</span>
             </DropdownItem>
             <DropdownItem
               onClick={() => {
@@ -561,6 +571,11 @@ const ScansTable = () => {
   const [sort, setSort] = useSortingState();
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [scanIdToDelete, setScanIdToDelete] = useState('');
+  const [startScanInfo, setStartScanInfo] = useState({
+    start: false,
+    nodeId: '',
+    nodeType: '',
+  });
   const [nodeIdToDelete, setNodeIdToDelete] = useState('');
 
   const columnHelper = createColumnHelper<ScanResult>();
@@ -579,6 +594,7 @@ const ScansTable = () => {
             setScanIdToDelete={setScanIdToDelete}
             setNodeIdToDelete={setNodeIdToDelete}
             setShowDeleteDialog={setShowDeleteDialog}
+            setStartScanInfo={setStartScanInfo}
             trigger={
               <button className="p-1 flex">
                 <span className="block h-4 w-4 dark:text-text-text-and-icon rotate-90 shrink-0">
@@ -648,7 +664,7 @@ const ScansTable = () => {
         enableResizing: true,
       }),
       columnHelper.accessor('total', {
-        enableSorting: true,
+        enableSorting: false,
         cell: (info) => (
           <div className="flex items-center justify-end tabular-nums">
             <span className="truncate">{info.getValue()}</span>
@@ -664,7 +680,7 @@ const ScansTable = () => {
         maxSize: 80,
       }),
       columnHelper.accessor('critical', {
-        enableSorting: true,
+        enableSorting: false,
         cell: (info) => {
           const params = new URLSearchParams();
           params.set('severity', 'critical');
@@ -692,7 +708,7 @@ const ScansTable = () => {
         maxSize: 80,
       }),
       columnHelper.accessor('high', {
-        enableSorting: true,
+        enableSorting: false,
         cell: (info) => {
           const params = new URLSearchParams();
           params.set('severity', 'high');
@@ -720,7 +736,7 @@ const ScansTable = () => {
         maxSize: 80,
       }),
       columnHelper.accessor('medium', {
-        enableSorting: true,
+        enableSorting: false,
         cell: (info) => {
           const params = new URLSearchParams();
           params.set('severity', 'medium');
@@ -748,7 +764,7 @@ const ScansTable = () => {
         maxSize: 80,
       }),
       columnHelper.accessor('low', {
-        enableSorting: true,
+        enableSorting: false,
         cell: (info) => {
           const params = new URLSearchParams();
           params.set('severity', 'low');
@@ -776,7 +792,7 @@ const ScansTable = () => {
         maxSize: 80,
       }),
       columnHelper.accessor('unknown', {
-        enableSorting: true,
+        enableSorting: false,
         cell: (info) => {
           const params = new URLSearchParams();
           params.set('severity', 'unknown');
@@ -818,6 +834,28 @@ const ScansTable = () => {
           setShowDialog={setShowDeleteDialog}
         />
       )}
+      {startScanInfo.start && (
+        <ConfigureScanModal
+          open={true}
+          onOpenChange={() =>
+            setStartScanInfo({
+              start: false,
+              nodeId: '',
+              nodeType: '',
+            })
+          }
+          scanOptions={
+            {
+              showAdvancedOptions: true,
+              scanType: ScanTypeEnum.MalwareScan,
+              data: {
+                nodeIds: [startScanInfo.nodeId],
+                nodeType: startScanInfo.nodeType,
+              },
+            } as ConfigureScanModalProps['scanOptions']
+          }
+        />
+      )}
       <Table
         data={data.scans}
         columns={columns}

diff --git a/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx b/deepfence_frontend/apps/dashboard/src/features/postures/pages/Accounts.tsx
@@ -563,9 +563,9 @@ const AccountTable = ({
   const columns = useMemo(() => {
     const columns: ColumnDef<ModelCloudNodeAccountInfo, any>[] = [
       getRowSelectionColumn(columnHelper, {
-        minSize: 10,
-        size: 10,
-        maxSize: 10,
+        minSize: 15,
+        size: 15,
+        maxSize: 15,
       }),
       columnHelper.display({
         id: 'actions',