[frontend/backend] Custom financial-data route

OpenCTI-Platform · Jan 4, 2024 · d39cb95 · d39cb95
1 parent 6072002
commit d39cb95
Show file tree

Hide file tree

Showing 19 changed files with 2,138 additions and 1,008 deletions.
diff --git a/opencti-platform/opencti-front/src/private/components/nav/TopMenuObservations.tsx b/opencti-platform/opencti-front/src/private/components/nav/TopMenuObservations.tsx
@@ -1,13 +1,7 @@
 import React from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import Button from '@mui/material/Button';
-import {
-  ArchiveOutline,
-  HexagonOutline,
-  PiggyBank,
-  ServerNetwork,
-  ShieldSearch,
-} from 'mdi-material-ui';
+import { ArchiveOutline, HexagonOutline, PiggyBank, ServerNetwork, ShieldSearch } from 'mdi-material-ui';
 import makeStyles from '@mui/styles/makeStyles';
 import { Theme } from '@mui/material/styles/createTheme';
 import { useFormatter } from '../../../components/i18n';

diff --git a/opencti-platform/opencti-front/src/private/components/observations/FinancialData.tsx b/opencti-platform/opencti-front/src/private/components/observations/FinancialData.tsx
@@ -1,14 +1,16 @@
 import React, { FunctionComponent } from 'react';
 import ExportContextProvider from 'src/utils/ExportContextProvider';
 import { usePaginationLocalStorage } from 'src/utils/hooks/useLocalStorage';
-import { filtersWithEntityType, initialFilterGroup } from 'src/utils/filters/filtersUtils';
+import { injectEntityTypeFilterInFilterGroup, emptyFilterGroup } from 'src/utils/filters/filtersUtils';
 import ListLines from 'src/components/list_lines/ListLines';
 import useEntityToggle from 'src/utils/hooks/useEntityToggle';
 import useCopy from 'src/utils/hooks/useCopy';
 import useAuth from 'src/utils/hooks/useAuth';
 import useQueryLoading from 'src/utils/hooks/useQueryLoading';
 import Security from 'src/utils/Security';
 import { KNOWLEDGE_KNUPDATE } from 'src/utils/hooks/useGranted';
+import { makeStyles } from '@mui/styles';
+import { Theme } from 'src/components/Theme';
 import FinancialDataLines, { financialDataLinesQuery, financialDataLinesSearchQuery } from './financial_data/FinancialDataLines';
 import ToolBar from '../data/ToolBar';
 import { FinancialDataLinesPaginationQuery, FinancialDataLinesPaginationQuery$variables } from './financial_data/__generated__/FinancialDataLinesPaginationQuery.graphql';
@@ -17,8 +19,6 @@ import { FinancialDataLinesSearchQuery$data } from './financial_data/__generated
 import { FinancialDataLine_node$data } from './financial_data/__generated__/FinancialDataLine_node.graphql';
 import FinancialDataRightBar from './financial_data/FinancialDataRightBar';
 import FinancialDataCreation from './financial_data/FinancialDataCreation';
-import { makeStyles } from '@mui/styles';
-import { Theme } from 'src/components/Theme';
 
 const LOCAL_STORAGE_KEY = 'financialData';
 
@@ -37,7 +37,7 @@ const FinancialData: FunctionComponent = () => {
   const { viewStorage, paginationOptions, helpers } = usePaginationLocalStorage<FinancialDataLinesPaginationQuery$variables>(
     LOCAL_STORAGE_KEY,
     {
-      filters: initialFilterGroup,
+      filters: emptyFilterGroup,
       searchTerm: '',
       sortBy: 'created_at',
       orderAsc: false,
@@ -148,78 +148,76 @@ const FinancialData: FunctionComponent = () => {
     const finalType = (types && types.length > 0)
       ? types
       : 'Stix-Cyber-Observable';
-    const toolBarFilters = filtersWithEntityType(filters, finalType);
+    const toolBarFilters = injectEntityTypeFilterInFilterGroup(filters, finalType);
     return (
-      <>
-        <ListLines
-          sortBy={sortBy}
-          orderAsc={orderAsc}
-          dataColumns={buildColumns()}
-          handleSort={helpers.handleSort}
-          handleSearch={helpers.handleSearch}
-          handleAddFilter={helpers.handleAddFilter}
-          handleRemoveFilter={helpers.handleRemoveFilter}
-          handleSwitchGlobalMode={helpers.handleSwitchGlobalMode}
-          handleSwitchLocalMode={helpers.handleSwitchLocalMode}
-          handleToggleSelectAll={handleToggleSelectAll}
-          openExports={openExports}
-          selectAll={selectAll}
-          exportEntityType="Financial-Data"
-          exportContext={null}
-          keyword={searchTerm}
-          filters={filters}
-          iconExtension={true}
-          paginationOptions={paginationOptions}
-          numberOfElements={numberOfElements}
-          availableFilterKeys={[
-            'objectLabel',
-            'objectMarking',
-            'created_at',
-            'x_opencti_score',
-            'createdBy',
-            'sightedBy',
-            'creator_id',
-          ]}
-        >
-          {queryRef && (
-            <React.Suspense
-              fallback={
-                <>
-                  {Array(20)
-                    .fill(0)
-                    .map((_, idx) => (
-                      <FinancialDataLineDummy key={idx} />
-                    ))
-                  }
-                </>
-              }
-            >
-              <FinancialDataLines
-                queryRef={queryRef}
-                paginationOptions={paginationOptions}
-                dataColumns={buildColumns()}
-                onLabelClick={helpers.handleAddFilter}
-                selectedElements={selectedElements}
-                deSelectedElements={deSelectedElements}
-                onToggleEntity={onToggleEntity}
-                selectAll={selectAll}
-                setNumberOfElements={helpers.handleSetNumberOfElements}
-              />
-              <ToolBar
-                selectedElements={selectedElements}
-                deSelectedElements={deSelectedElements}
-                numberOfSelectedElements={numberOfSelectedElements}
-                selectAll={selectAll}
-                filters={toolBarFilters}
-                search={searchTerm}
-                handleClearSelectedElements={handleClearSelectedElements}
-                variant="large"
-                handleCopy={handleCopy}
-              />
-            </React.Suspense>
-          )}
-        </ListLines>
-      </>
+      <ListLines
+        sortBy={sortBy}
+        orderAsc={orderAsc}
+        dataColumns={buildColumns()}
+        handleSort={helpers.handleSort}
+        handleSearch={helpers.handleSearch}
+        handleAddFilter={helpers.handleAddFilter}
+        handleRemoveFilter={helpers.handleRemoveFilter}
+        handleSwitchGlobalMode={helpers.handleSwitchGlobalMode}
+        handleSwitchLocalMode={helpers.handleSwitchLocalMode}
+        handleToggleSelectAll={handleToggleSelectAll}
+        openExports={openExports}
+        selectAll={selectAll}
+        exportEntityType="Financial-Data"
+        exportContext={null}
+        keyword={searchTerm}
+        filters={filters}
+        iconExtension={true}
+        paginationOptions={paginationOptions}
+        numberOfElements={numberOfElements}
+        availableFilterKeys={[
+          'objectLabel',
+          'objectMarking',
+          'created_at',
+          'x_opencti_score',
+          'createdBy',
+          'sightedBy',
+          'creator_id',
+        ]}
+      >
+        {queryRef && (
+          <React.Suspense
+            fallback={
+              <>
+                {Array(20)
+                  .fill(0)
+                  .map((_, idx) => (
+                    <FinancialDataLineDummy key={idx} />
+                  ))
+                }
+              </>
+            }
+          >
+            <FinancialDataLines
+              queryRef={queryRef}
+              paginationOptions={paginationOptions}
+              dataColumns={buildColumns()}
+              onLabelClick={helpers.handleAddFilter}
+              selectedElements={selectedElements}
+              deSelectedElements={deSelectedElements}
+              onToggleEntity={onToggleEntity}
+              selectAll={selectAll}
+              setNumberOfElements={helpers.handleSetNumberOfElements}
+            />
+            <ToolBar
+              selectedElements={selectedElements}
+              deSelectedElements={deSelectedElements}
+              numberOfSelectedElements={numberOfSelectedElements}
+              selectAll={selectAll}
+              filters={toolBarFilters}
+              search={searchTerm}
+              handleClearSelectedElements={handleClearSelectedElements}
+              variant="large"
+              handleCopy={handleCopy}
+            />
+          </React.Suspense>
+        )}
+      </ListLines>
     );
   };
 

diff --git a/opencti-platform/opencti-front/src/private/components/observations/Root.tsx b/opencti-platform/opencti-front/src/private/components/observations/Root.tsx
@@ -17,6 +17,7 @@ const RootIndicator = lazy(() => import('./indicators/Root'));
 const Infrastructures = lazy(() => import('./Infrastructures'));
 const RootInfrastructure = lazy(() => import('./infrastructures/Root'));
 const FinancialData = lazy(() => import('./FinancialData'));
+const RootFinancialData = lazy(() => import('./financial_data/Root'));
 
 const Root = () => {
   let redirect: string | null = null;
@@ -81,6 +82,10 @@ const Root = () => {
           path="/dashboard/observations/financial-data"
           component={FinancialData}
         />
+        <BoundaryRoute
+          path="/dashboard/observations/financial-data/:financialDataId"
+          component={RootFinancialData}
+        />
       </Switch>
     </Suspense>
   );