fix cloud account filter for integration form (#2351)

deepfence · Oct 24, 2024 · 0fe2320 · 0fe2320
1 parent 161cf62
commit 0fe2320
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 12 deletions.
diff --git a/deepfence_frontend/apps/dashboard/api-spec.json b/deepfence_frontend/apps/dashboard/api-spec.json
@@ -14951,6 +14951,7 @@
         "required": ["node_ids"],
         "type": "object",
         "properties": {
+          "cloud_provider": { "type": "string" },
           "container_names": {
             "type": "array",
             "items": { "type": "string" },

diff --git a/deepfence_frontend/apps/dashboard/src/api/generated/models/ModelIntegrationFilters.ts b/deepfence_frontend/apps/dashboard/src/api/generated/models/ModelIntegrationFilters.ts
@@ -32,6 +32,12 @@ import {
  * @interface ModelIntegrationFilters
  */
 export interface ModelIntegrationFilters {
+    /**
+     * 
+     * @type {string}
+     * @memberof ModelIntegrationFilters
+     */
+    cloud_provider?: string;
     /**
      * 
      * @type {Array<string>}
@@ -72,6 +78,7 @@ export function ModelIntegrationFiltersFromJSONTyped(json: any, ignoreDiscrimina
     }
     return {
 
+        'cloud_provider': !exists(json, 'cloud_provider') ? undefined : json['cloud_provider'],
         'container_names': !exists(json, 'container_names') ? undefined : json['container_names'],
         'fields_filters': !exists(json, 'fields_filters') ? undefined : ReportersFieldsFiltersFromJSON(json['fields_filters']),
         'node_ids': (json['node_ids'] === null ? null : (json['node_ids'] as Array<any>).map(ModelNodeIdentifierFromJSON)),
@@ -87,6 +94,7 @@ export function ModelIntegrationFiltersToJSON(value?: ModelIntegrationFilters |
     }
     return {
 
+        'cloud_provider': value.cloud_provider,
         'container_names': value.container_names,
         'fields_filters': ReportersFieldsFiltersToJSON(value.fields_filters),
         'node_ids': (value.node_ids === null ? null : (value.node_ids as Array<any>).map(ModelNodeIdentifierToJSON)),

diff --git a/deepfence_frontend/apps/dashboard/src/components/forms/SearchableCloudAccountsList.tsx b/deepfence_frontend/apps/dashboard/src/components/forms/SearchableCloudAccountsList.tsx
@@ -20,6 +20,7 @@ export type SearchableCloudAccountsListProps = {
   helperText?: string;
   displayValue?: string;
   color?: 'error' | 'default';
+  name?: string;
 };
 
 const fieldName = 'cloudAccountsFilter';
@@ -36,6 +37,7 @@ const SearchableCloudAccounts = ({
   helperText,
   color,
   displayValue,
+  name,
 }: SearchableCloudAccountsListProps) => {
   const [searchText, setSearchText] = useState('');
 
@@ -85,7 +87,7 @@ const SearchableCloudAccounts = ({
         startIcon={
           isFetchingNextPage ? <CircleSpinner size="sm" className="w-3 h-3" /> : undefined
         }
-        name={fieldName}
+        name={name ?? fieldName}
         getDisplayValue={() =>
           isSelectVariantType && selectedAccounts.length > 0
             ? `${selectedAccounts.length} selected`
@@ -136,13 +138,14 @@ export const SearchableCloudAccountsList = (props: SearchableCloudAccountsListPr
     triggerVariant,
     displayValue,
     defaultSelectedAccounts = [],
+    name,
   } = props;
   return (
     <Suspense
       fallback={
         <>
           <Combobox
-            name={fieldName}
+            name={name ?? fieldName}
             value={defaultSelectedAccounts}
             label={label}
             triggerVariant={triggerVariant}

diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/components/IntegrationForm.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/components/IntegrationForm.tsx
@@ -320,7 +320,7 @@ export const IntegrationForm = ({
                   color={fieldErrors?.aws_region ? 'error' : 'default'}
                 />
                 <SearchableCloudAccountsList
-                  label="AWS Account"
+                  label="Target AWS Account"
                   triggerVariant="select"
                   defaultSelectedAccounts={awsAccounts}
                   cloudProvider="aws"
@@ -331,6 +331,7 @@ export const IntegrationForm = ({
                   onChange={(value) => {
                     setAccounts(value);
                   }}
+                  name="targetAWSAccount"
                   helperText={fieldErrors?.aws_account_id}
                   color={fieldErrors?.aws_account_id ? 'error' : 'default'}
                 />

diff --git a/...d/apps/dashboard/src/features/integrations/components/integration-form/AdvancedFilter.tsx b/...d/apps/dashboard/src/features/integrations/components/integration-form/AdvancedFilter.tsx
@@ -1,3 +1,4 @@
+import { upperCase } from 'lodash-es';
 import { useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import { Listbox, ListboxOption } from 'ui-components';
@@ -87,10 +88,10 @@ export const AdvancedFilters = ({
       <div className="grid grid-cols-2 gap-y-8 gap-x-8 pt-4">
         {isCloudComplianceNotification(notificationType) && cloudProvider ? (
           <SearchableCloudAccountsList
-            label={`${cloudProvider} Account`}
+            label={`${upperCase(cloudProvider)} Account`}
             triggerVariant="select"
             defaultSelectedAccounts={selectedCloudAccounts}
-            cloudProvider={cloudProvider.toLowerCase() as 'aws' | 'gcp' | 'azure'}
+            cloudProvider={cloudProvider as 'aws' | 'gcp' | 'azure'}
             onClearAll={() => {
               setSelectedCloudAccounts([]);
             }}

diff --git a/...dashboard/src/features/integrations/components/integration-form/NotificationTypeField.tsx b/...dashboard/src/features/integrations/components/integration-form/NotificationTypeField.tsx
@@ -1,3 +1,4 @@
+import { upperCase } from 'lodash-es';
 import { useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Checkbox, Listbox, ListboxOption, Tooltip } from 'ui-components';
@@ -50,7 +51,7 @@ export const NotificationTypeField = ({
   const [notificationType, setNotificationType] = useState<ScanTypeEnum | string>(
     defaultNotificationType,
   );
-  const [cloud, setCloud] = useState<string>('AWS');
+  const [cloud, setCloud] = useState<string>(data?.filters?.cloud_provider ?? 'aws');
 
   const { integrationType } = useParams() as {
     integrationType: string;
@@ -116,13 +117,13 @@ export const NotificationTypeField = ({
             }}
             placeholder="Select provider"
             getDisplayValue={() => {
-              return cloud;
+              return upperCase(cloud);
             }}
           >
-            {['AWS', 'GCP', 'AZURE'].map((cloud) => {
+            {['aws', 'gcp', 'azure'].map((cloud) => {
               return (
                 <ListboxOption value={cloud} key={cloud}>
-                  {cloud}
+                  {upperCase(cloud)}
                 </ListboxOption>
               );
             })}

diff --git a/...ce_frontend/apps/dashboard/src/features/integrations/components/integration-form/utils.ts b/...ce_frontend/apps/dashboard/src/features/integrations/components/integration-form/utils.ts
@@ -144,7 +144,7 @@ export const getCloudAccountsFilter = (
     return [];
   }
   return nodeIds.reduce((acc: string[], current) => {
-    if (current.node_type === ModelNodeIdentifierNodeTypeEnum.CloudAccount) {
+    if (['aws', 'gcp', 'azure'].includes(current.node_type)) {
       acc.push(current.node_id);
     }
     return acc;

diff --git a/deepfence_frontend/apps/dashboard/src/features/integrations/pages/IntegrationAdd.tsx b/deepfence_frontend/apps/dashboard/src/features/integrations/pages/IntegrationAdd.tsx
@@ -109,7 +109,7 @@ const getConfigBodyNotificationType = (formData: FormData, integrationType: stri
         auth_header: formBody.authKey,
       };
     case IntegrationType.awsSecurityHub: {
-      const accounts = getArrayTypeValuesFromFormData(formData, 'cloudAccountsFilter');
+      const accounts = getArrayTypeValuesFromFormData(formData, 'targetAWSAccount');
       return {
         aws_access_key: formBody.accessKey,
         aws_secret_key: formBody.secretKey,
@@ -208,6 +208,7 @@ const action = async ({ request, params }: ActionFunctionArgs): Promise<ActionDa
       node_ids: ModelNodeIdentifier[];
       fields_filters: ReportersFieldsFilters;
       container_names: string[];
+      cloud_provider?: string;
     } = {
       fields_filters: {
         compare_filter: null,
@@ -259,12 +260,18 @@ const action = async ({ request, params }: ActionFunctionArgs): Promise<ActionDa
       );
       nodeIds.push(..._clusters);
     }
+    const cloudType = formData.get('cloudType') as
+      | ModelNodeIdentifierNodeTypeEnum
+      | undefined;
+    if (_notificationType === 'CloudCompliance' && cloudType) {
+      _filters.cloud_provider = cloudType;
+    }
     if (accountIds.length) {
       const _accounts: ModelNodeIdentifier[] = accountIds.map<ModelNodeIdentifier>(
         (id) => {
           return {
             node_id: id,
-            node_type: ModelNodeIdentifierNodeTypeEnum.CloudAccount,
+            node_type: cloudType ?? ModelNodeIdentifierNodeTypeEnum.CloudAccount,
           };
         },
       );