[frontend] Fix massive operations on matrix-in-line view (#4230)

OpenCTI-Platform · Sep 10, 2024 · b14ae38 · b14ae38
1 parent 86da517
commit b14ae38
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 18 deletions.
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTableWithoutFragment.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTableWithoutFragment.tsx
@@ -19,6 +19,7 @@ type OCTIDataTableWithoutFragmentProps = Pick<DataTableProps, 'dataColumns'
 | 'disableLineSelection'
 | 'disableToolBar'
 | 'disableSelectAll'
+| 'disableRedirectOnRowClick'
 | 'filtersComponent'
 | 'variant'> & {
   data: unknown,

diff --git a/...ront/src/private/components/common/stix_domain_objects/StixDomainObjectAttackPatterns.tsx b/...ront/src/private/components/common/stix_domain_objects/StixDomainObjectAttackPatterns.tsx
@@ -46,12 +46,16 @@ const StixDomainObjectAttackPatterns: FunctionComponent<StixDomainObjectAttackPa
     viewStorage,
     helpers,
     paginationOptions,
-  } = usePaginationLocalStorage<StixDomainObjectAttackPatternsKillChainQuery$variables>(LOCAL_STORAGE_KEY, {
-    searchTerm: '',
-    openExports: false,
-    filters: emptyFilterGroup,
-    view: 'matrix',
-  });
+  } = usePaginationLocalStorage<StixDomainObjectAttackPatternsKillChainQuery$variables>(
+    LOCAL_STORAGE_KEY,
+    {
+      searchTerm: '',
+      openExports: false,
+      filters: emptyFilterGroup,
+      view: 'matrix',
+      numberOfElements: { number: 0, symbol: '', original: 0 },
+    },
+  );
   const { searchTerm, filters, view, openExports } = viewStorage;
   const userFilters = useRemoveIdAndIncorrectKeysFromFilterGroupObject(filters, ['Attack-Pattern']);
   const contextFilters = {
@@ -93,6 +97,7 @@ const StixDomainObjectAttackPatterns: FunctionComponent<StixDomainObjectAttackPa
             disableExport={disableExport}
             openExports={openExports}
             availableFilterKeys={availableFilterKeys}
+            storageKey={LOCAL_STORAGE_KEY}
           />
         </React.Suspense>
       )}

diff --git a/...private/components/common/stix_domain_objects/StixDomainObjectAttackPatternsKillChain.tsx b/...private/components/common/stix_domain_objects/StixDomainObjectAttackPatternsKillChain.tsx
@@ -69,6 +69,7 @@ interface StixDomainObjectAttackPatternsKillChainProps {
   availableFilterKeys: string[];
   defaultStartTime: string;
   defaultStopTime: string;
+  storageKey: string;
 }
 
 const StixDomainObjectAttackPatternsKillChain: FunctionComponent<StixDomainObjectAttackPatternsKillChainProps> = ({
@@ -87,6 +88,7 @@ const StixDomainObjectAttackPatternsKillChain: FunctionComponent<StixDomainObjec
   availableFilterKeys,
   defaultStartTime,
   defaultStopTime,
+  storageKey,
 }) => {
   const { t_i18n } = useFormatter();
   const [currentColorsReversed, setCurrentColorsReversed] = useState(false);
@@ -397,6 +399,7 @@ const StixDomainObjectAttackPatternsKillChain: FunctionComponent<StixDomainObjec
           <StixDomainObjectAttackPatternsKillChainMatrixInline
             data={data}
             filters={filters}
+            storageKey={storageKey}
           />
         )}
         {currentView === 'courses-of-action' && (

diff --git a/...omponents/common/stix_domain_objects/StixDomainObjectAttackPatternsKillChainContainer.tsx b/...omponents/common/stix_domain_objects/StixDomainObjectAttackPatternsKillChainContainer.tsx
@@ -25,6 +25,7 @@ interface StixDomainObjectAttackPatternsKillChainProps {
   disableExport: boolean;
   openExports?: boolean;
   availableFilterKeys: string[];
+  storageKey: string;
 }
 
 export const stixDomainObjectAttackPatternsKillChainContainerFragment = graphql`
@@ -132,6 +133,7 @@ const StixDomainObjectAttackPatternsKillChainContainer: FunctionComponent<StixDo
   disableExport,
   openExports,
   availableFilterKeys,
+  storageKey,
 }) => {
   const dataPreloaded = usePreloadedQuery<StixDomainObjectAttackPatternsKillChainQuery>(
     stixDomainObjectAttackPatternsKillChainQuery,
@@ -158,6 +160,7 @@ const StixDomainObjectAttackPatternsKillChainContainer: FunctionComponent<StixDo
       handleToggleExports={disableExport ? undefined : helpers.handleToggleExports}
       openExports={openExports}
       availableFilterKeys={availableFilterKeys}
+      storageKey={storageKey}
     />
   );
 };

diff --git a/...onents/common/stix_domain_objects/StixDomainObjectAttackPatternsKillChainMatrixInLine.tsx b/...onents/common/stix_domain_objects/StixDomainObjectAttackPatternsKillChainMatrixInLine.tsx
@@ -1,46 +1,61 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useEffect, useState } from 'react';
 import {
   StixDomainObjectAttackPatternsKillChainContainer_data$data,
 } from '@components/common/stix_domain_objects/__generated__/StixDomainObjectAttackPatternsKillChainContainer_data.graphql';
 import Tooltip from '@mui/material/Tooltip';
 import DataTableWithoutFragment from '../../../../components/dataGrid/DataTableWithoutFragment';
 import { FilterGroup } from '../../../../utils/filters/filtersHelpers-types';
 import { truncate } from '../../../../utils/String';
-
-const LOCAL_STORAGE_KEY = 'stixDomainObjectAttackPatternsKillChainMatrixInline';
+import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
 
 interface StixDomainObjectAttackPatternsKillChainMatrixProps {
   data: StixDomainObjectAttackPatternsKillChainContainer_data$data;
   filters?: FilterGroup;
+  storageKey: string;
 }
 
 const StixDomainObjectAttackPatternsKillChainMatrixInline: FunctionComponent<StixDomainObjectAttackPatternsKillChainMatrixProps> = (
   {
     data,
     filters,
+    storageKey,
   },
 ) => {
   const attackPatterns = (data.attackPatterns?.edges ?? []).map((n) => n.node);
 
+  const { _, helpers: { handleSetNumberOfElements } } = usePaginationLocalStorage(storageKey, {});
+
+  const [previousCount, setPreviousCount] = useState<number>(attackPatterns.length);
+
+  useEffect(() => {
+    if (attackPatterns.length !== previousCount || attackPatterns.length !== 0) {
+      handleSetNumberOfElements({
+        number: attackPatterns.length,
+        symbol: '',
+        original: attackPatterns.length,
+      });
+      setPreviousCount(attackPatterns.length);
+    }
+  }, [attackPatterns.length, previousCount, handleSetNumberOfElements]);
+
   return (
     <DataTableWithoutFragment
       dataColumns={{
-        entity_type: { percentWidth: 11, isSortable: false },
-        killChainPhase: { percentWidth: 22, isSortable: false },
-        x_mitre_id: { percentWidth: 10, isSortable: false },
+        entity_type: { percentWidth: 11 },
+        killChainPhase: { percentWidth: 22 },
+        x_mitre_id: { percentWidth: 10 },
         name: {
           percentWidth: 20,
-          isSortable: true,
           render: ({ name }, { column: { size } }) => (<Tooltip title={name}>{truncate(name, size * 0.113)}</Tooltip>),
         },
-        objectLabel: { percentWidth: 15, isSortable: false },
-        created: { percentWidth: 12, isSortable: true },
-        objectMarking: { percentWidth: 10, isSortable: true },
+        objectLabel: { percentWidth: 15 },
+        created: { percentWidth: 12 },
+        objectMarking: { percentWidth: 10 },
       }}
-      storageKey={LOCAL_STORAGE_KEY}
+      storageKey={storageKey}
       data={attackPatterns}
       globalCount={attackPatterns.length}
-      allowBackgroundtasks={true}
+      allowBackgroundtasks
       taskScope={'KNOWLEDGE'}
       toolbarFilters={filters}
     />