Fix inappropriate filters in create report

deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/AdvanceFilter.tsx

@@ -1,6 +1,11 @@
+import { upperCase } from 'lodash-es';
 import { useMemo, useState } from 'react';
 import { Listbox, ListboxOption } from 'ui-components';
 
+import {
+  UtilsReportFiltersNodeTypeEnum,
+  UtilsReportFiltersScanTypeEnum,
+} from '@/api/generated';
 import { SearchableCloudAccountsList } from '@/components/forms/SearchableCloudAccountsList';
 import { SearchableClusterList } from '@/components/forms/SearchableClusterList';
 import { SearchableContainerList } from '@/components/forms/SearchableContainerList';
@@ -30,11 +35,11 @@ const getNodeTypeByProviderName = (providerName: string): string | undefined =>
 const API_SCAN_TYPE_MAP: {
   [key: string]: ScanTypeEnum;
 } = {
-  Vulnerability: ScanTypeEnum.VulnerabilityScan,
-  Secret: ScanTypeEnum.SecretScan,
-  Malware: ScanTypeEnum.MalwareScan,
-  Compliance: ScanTypeEnum.ComplianceScan,
-  CloudCompliance: ScanTypeEnum.CloudComplianceScan,
+  [UtilsReportFiltersScanTypeEnum.Vulnerability]: ScanTypeEnum.VulnerabilityScan,
+  [UtilsReportFiltersScanTypeEnum.Secret]: ScanTypeEnum.SecretScan,
+  [UtilsReportFiltersScanTypeEnum.Malware]: ScanTypeEnum.MalwareScan,
+  [UtilsReportFiltersScanTypeEnum.Compliance]: ScanTypeEnum.ComplianceScan,
+  [UtilsReportFiltersScanTypeEnum.CloudCompliance]: ScanTypeEnum.CloudComplianceScan,
 };
 
 export const AdvancedFilter = ({
@@ -50,6 +55,7 @@ export const AdvancedFilter = ({
 
   const [maskedType, setMaskedType] = useState([]);
   const [status, setStatus] = useState([]);
+
   const nodeType = useMemo(
     () => getNodeTypeByProviderName(provider.toLowerCase()),
     [provider],
@@ -71,7 +77,7 @@ export const AdvancedFilter = ({
           <div className="grid grid-cols-2 gap-x-8 gap-y-6 pt-4">
             {isCloudNode(nodeType) && (
               <SearchableCloudAccountsList
-                label={`${provider} Account`}
+                label={`${upperCase(provider)} Account`}
                 triggerVariant="select"
                 defaultSelectedAccounts={selectedCloudAccounts}
                 cloudProvider={provider.toLowerCase() as 'aws' | 'gcp' | 'azure'}
@@ -83,7 +89,7 @@ export const AdvancedFilter = ({
                 }}
               />
             )}
-            {nodeType === 'host' ? (
+            {nodeType === UtilsReportFiltersNodeTypeEnum.Host ? (
               <>
                 <div>
                   <SearchableHostList
@@ -103,7 +109,7 @@ export const AdvancedFilter = ({
               </>
             ) : null}
 
-            {provider === 'ContainerImage' ? (
+            {provider === UtilsReportFiltersNodeTypeEnum.ContainerImage ? (
               <>
                 <div>
                   <SearchableImageList
@@ -122,7 +128,7 @@ export const AdvancedFilter = ({
               </>
             ) : null}
 
-            {provider === 'Container' ? (
+            {provider === UtilsReportFiltersNodeTypeEnum.Container ? (
               <>
                 <div>
                   <SearchableContainerList
@@ -141,7 +147,7 @@ export const AdvancedFilter = ({
               </>
             ) : null}
 
-            {resourceType !== 'CloudCompliance' ? (
+            {resourceType !== UtilsReportFiltersScanTypeEnum.CloudCompliance ? (
               <>
                 <div>
                   <SearchableClusterList

deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/CloudComplianceForm.tsx

@@ -1,7 +1,12 @@
+import { upperCase } from 'lodash-es';
 import { useEffect, useState } from 'react';
 import { Listbox, ListboxOption } from 'ui-components';
 
-import { getReportBenchmarkList } from '@/features/integrations/pages/DownloadReport';
+import { UtilsReportFiltersScanTypeEnum } from '@/api/generated';
+import {
+  getReportBenchmarkList,
+  getReportNodeType,
+} from '@/features/integrations/pages/DownloadReport';
 
 export const CloudComplianceForm = ({
   setProvider,
@@ -27,21 +32,19 @@ export const CloudComplianceForm = ({
           setProvider(value);
         }}
         getDisplayValue={() => {
-          return (
-            ['Aws', 'Gcp', 'Azure'].find((_provider) => {
-              return _provider === provider;
-            }) ?? ''
-          );
+          return upperCase(provider);
         }}
         placeholder="Select Provider"
       >
-        {['Aws', 'Gcp', 'Azure'].map((resource) => {
-          return (
-            <ListboxOption value={resource} key={resource}>
-              {resource}
-            </ListboxOption>
-          );
-        })}
+        {getReportNodeType(UtilsReportFiltersScanTypeEnum.CloudCompliance).map(
+          (resource) => {
+            return (
+              <ListboxOption value={resource} key={resource}>
+                {upperCase(resource)}
+              </ListboxOption>
+            );
+          },
+        )}
       </Listbox>
 
       {provider && (

deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/CommonForm.tsx

@@ -1,9 +1,17 @@
+import { upperFirst } from 'lodash-es';
 import { useEffect, useMemo, useState } from 'react';
 import { Listbox, ListboxOption } from 'ui-components';
 
+import { UtilsReportFiltersNodeTypeEnum } from '@/api/generated';
 import { getReportNodeType } from '@/features/integrations/pages/DownloadReport';
 
 const severities = ['Critical', 'High', 'Medium', 'Low'];
+const getDisplayNodeTypeValue = (nodeType: string) => {
+  if (nodeType === UtilsReportFiltersNodeTypeEnum.ContainerImage) {
+    return 'Container Image';
+  }
+  return upperFirst(nodeType);
+};
 export const CommonForm = ({
   setProvider,
   resource,
@@ -21,7 +29,7 @@ export const CommonForm = ({
     setSeverity([]);
   }, [resource, provider]);
 
-  const nodeType = useMemo(() => {
+  const nodeTypes = useMemo(() => {
     return getReportNodeType(resource);
   }, [resource]);
 
@@ -39,14 +47,14 @@ export const CommonForm = ({
         }}
         placeholder="Select node type"
         getDisplayValue={() => {
-          return provider;
+          return getDisplayNodeTypeValue(provider) ?? '';
         }}
         required
       >
-        {Object.keys(nodeType).map((resource) => {
+        {nodeTypes.map((type) => {
           return (
-            <ListboxOption value={resource} key={resource}>
-              {resource}
+            <ListboxOption value={type} key={type}>
+              {getDisplayNodeTypeValue(type)}
             </ListboxOption>
           );
         })}

deepfence_frontend/apps/dashboard/src/features/integrations/components/report-form/ComplianceForm.tsx

@@ -1,11 +1,20 @@
+import { upperCase, upperFirst } from 'lodash-es';
 import { useEffect, useState } from 'react';
 import { Listbox, ListboxOption } from 'ui-components';
 
+import { UtilsReportFiltersScanTypeEnum } from '@/api/generated';
 import {
   getReportBenchmarkList,
   getReportNodeType,
 } from '@/features/integrations/pages/DownloadReport';
 
+const getDisplayNodeTypeValue = (resource: string, nodeType: string) => {
+  if (resource === UtilsReportFiltersScanTypeEnum.CloudCompliance) {
+    return upperCase(nodeType);
+  }
+  return upperFirst(nodeType);
+};
+
 export const ComplianceForm = ({
   setProvider,
   resource,
@@ -33,13 +42,13 @@ export const ComplianceForm = ({
         }}
         placeholder="Select node type"
         getDisplayValue={() => {
-          return provider;
+          return getDisplayNodeTypeValue(resource, provider) ?? '';
         }}
       >
-        {Object.keys(getReportNodeType(resource)).map((resource) => {
+        {getReportNodeType(resource).map((resource) => {
           return (
             <ListboxOption value={resource} key={resource}>
-              {resource}
+              {getDisplayNodeTypeValue(resource, resource)}
             </ListboxOption>
           );
         })}

deepfence_frontend/apps/dashboard/src/features/integrations/pages/CreateReport.tsx

@@ -1,3 +1,4 @@
+import { upperFirst } from 'lodash-es';
 import { useState } from 'react';
 import { ActionFunctionArgs, useFetcher } from 'react-router-dom';
 import {
@@ -24,7 +25,6 @@ import { AdvancedFilter } from '@/features/integrations/components/report-form/A
 import { CloudComplianceForm } from '@/features/integrations/components/report-form/CloudComplianceForm';
 import { CommonForm } from '@/features/integrations/components/report-form/CommonForm';
 import { ComplianceForm } from '@/features/integrations/components/report-form/ComplianceForm';
-import { NODE_TYPES } from '@/features/integrations/pages/DownloadReport';
 import { ActionEnumType } from '@/features/integrations/pages/IntegrationAdd';
 import { SuccessModalContent } from '@/features/settings/components/SuccessModalContent';
 import { invalidateAllQueries } from '@/queries';
@@ -42,13 +42,13 @@ export const DURATION: { [k: string]: ModelGenerateReportReqDurationEnum } = {
   'Last 180 Days': ModelGenerateReportReqDurationEnum.NUMBER_180,
   'All Documents': 0 as ModelGenerateReportReqDurationEnum,
 };
-const RESOURCES: { [k: string]: UtilsReportFiltersScanTypeEnum } = {
-  Vulnerability: UtilsReportFiltersScanTypeEnum.Vulnerability,
-  Secret: UtilsReportFiltersScanTypeEnum.Secret,
-  Malware: UtilsReportFiltersScanTypeEnum.Malware,
-  Compliance: UtilsReportFiltersScanTypeEnum.Compliance,
-  'Cloud Compliance': UtilsReportFiltersScanTypeEnum.CloudCompliance,
-};
+const RESOURCES = [
+  UtilsReportFiltersScanTypeEnum.Vulnerability,
+  UtilsReportFiltersScanTypeEnum.Secret,
+  UtilsReportFiltersScanTypeEnum.Malware,
+  UtilsReportFiltersScanTypeEnum.Compliance,
+  UtilsReportFiltersScanTypeEnum.CloudCompliance,
+];
 const REPORT_TYPES: { [k: string]: ModelGenerateReportReqReportTypeEnum } = {
   PDF: ModelGenerateReportReqReportTypeEnum.Pdf,
   XLSX: ModelGenerateReportReqReportTypeEnum.Xlsx,
@@ -67,14 +67,10 @@ const action = async ({ request }: ActionFunctionArgs): Promise<ActionData> => {
   const reportType = body.downloadType.toString();
   const _reportType: ModelGenerateReportReqReportTypeEnum = REPORT_TYPES[reportType];
 
-  const resource = body.resource.toString();
-  const _resource: UtilsReportFiltersScanTypeEnum = RESOURCES[resource];
+  const _resource = body.resource as UtilsReportFiltersScanTypeEnum;
 
-  let nodeType = body.nodeType.toString();
-  if (nodeType.toString() === 'Kubernetes') {
-    nodeType = 'Cluster';
-  }
-  const _nodeType: UtilsReportFiltersNodeTypeEnum = NODE_TYPES[nodeType];
+  const _nodeType: UtilsReportFiltersNodeTypeEnum =
+    body.nodeType as UtilsReportFiltersNodeTypeEnum;
 
   const masked = formData.getAll('mask[]');
   const status = formData.getAll('status[]');
@@ -226,6 +222,14 @@ const Header = () => {
     </SlidingModalHeader>
   );
 };
+
+const getResourceDisplayValue = (resource: string) => {
+  if (resource === UtilsReportFiltersScanTypeEnum.CloudCompliance) {
+    return 'Cloud Compliance';
+  }
+  return resource;
+};
+
 const ReportForm = () => {
   const [resource, setResource] = useState('');
   const [provider, setProvider] = useState('');
@@ -263,33 +267,34 @@ const ReportForm = () => {
                 setProvider('');
               }}
               getDisplayValue={(item) => {
-                return Object.keys(RESOURCES).find((resource) => resource === item) ?? '';
+                return item ? upperFirst(getResourceDisplayValue(item)) : '';
               }}
               placeholder="Select resource"
               required
             >
-              {Object.keys(RESOURCES).map((resource) => {
+              {RESOURCES.map((resource) => {
                 return (
                   <ListboxOption value={resource} key={resource}>
-                    {resource}
+                    {upperFirst(getResourceDisplayValue(resource))}
                   </ListboxOption>
                 );
               })}
             </Listbox>
 
-            {resource === 'Compliance' ? (
+            {resource === UtilsReportFiltersScanTypeEnum.Compliance ? (
               <ComplianceForm
                 setProvider={setProvider}
                 provider={provider}
                 resource={resource}
               />
             ) : null}
 
-            {resource === 'CloudCompliance' ? (
+            {resource === UtilsReportFiltersScanTypeEnum.CloudCompliance ? (
               <CloudComplianceForm setProvider={setProvider} provider={provider} />
             ) : null}
 
-            {resource !== 'CloudCompliance' && resource !== 'Compliance' ? (
+            {resource !== UtilsReportFiltersScanTypeEnum.CloudCompliance &&
+            resource !== UtilsReportFiltersScanTypeEnum.Compliance ? (
               <CommonForm
                 setProvider={setProvider}
                 resource={resource}
@@ -341,7 +346,7 @@ const ReportForm = () => {
                 setDownloadType(value);
               }}
               placeholder="Download type"
-              getDisplayValue={(item) => {
+              getDisplayValue={() => {
                 return downloadType;
               }}
               required