[frontend] fix filters adding for TimeLine views, Alert Live, and lab…

…el icon (#6348)
OpenCTI-Platform · Mar 14, 2024 · ddb40da · ddb40da
1 parent ac241d0
commit ddb40da
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 176 deletions.
diff --git a/opencti-platform/opencti-front/src/private/components/analyses/reports/ReportKnowledge.jsx b/opencti-platform/opencti-front/src/private/components/analyses/reports/ReportKnowledge.jsx
@@ -167,7 +167,7 @@ class ReportKnowledgeComponent extends Component {
     );
   }
 
-  handleAddTimeLineFilter(key, id, op = 'eq', event = null) {
+  handleAddTimeLineFilter(filterKeysSchema, key, id, op = 'eq', event = null) {
     if (event) {
       event.stopPropagation();
       event.preventDefault();
@@ -176,6 +176,7 @@ class ReportKnowledgeComponent extends Component {
       this.state.timeLineFilters,
       key,
       id,
+      filterKeysSchema,
       op,
     );
     this.setState(
@@ -256,16 +257,16 @@ class ReportKnowledgeComponent extends Component {
         id={location.pathname.includes('matrix') ? 'parent' : 'container'}
       >
         {mode !== 'graph' && (
-          <ContainerHeader
-            container={report}
-            PopoverComponent={<ReportPopover />}
-            link={`/dashboard/analyses/reports/${report.id}/knowledge`}
-            modes={['graph', 'content', 'timeline', 'correlation', 'matrix']}
-            currentMode={mode}
-            knowledge={true}
-            enableSuggestions={true}
-            investigationAddFromContainer={investigationAddFromContainer}
-          />
+        <ContainerHeader
+          container={report}
+          PopoverComponent={<ReportPopover />}
+          link={`/dashboard/analyses/reports/${report.id}/knowledge`}
+          modes={['graph', 'content', 'timeline', 'correlation', 'matrix']}
+          currentMode={mode}
+          knowledge={true}
+          enableSuggestions={true}
+          investigationAddFromContainer={investigationAddFromContainer}
+        />
         )}
         <Route
           exact

diff --git a/...-platform/opencti-front/src/private/components/cases/case_incidents/IncidentKnowledge.jsx b/...-platform/opencti-front/src/private/components/cases/case_incidents/IncidentKnowledge.jsx
@@ -168,7 +168,7 @@ class IncidentKnowledgeComponent extends Component {
     );
   }
 
-  handleAddTimeLineFilter(key, id, op = 'eq', event = null) {
+  handleAddTimeLineFilter(filterKeysSchema, key, id, op = 'eq', event = null) {
     if (event) {
       event.stopPropagation();
       event.preventDefault();
@@ -177,6 +177,7 @@ class IncidentKnowledgeComponent extends Component {
       this.state.timeLineFilters,
       key,
       id,
+      filterKeysSchema,
       op,
     );
     this.setState(
@@ -257,16 +258,16 @@ class IncidentKnowledgeComponent extends Component {
         id={location.pathname.includes('matrix') ? 'parent' : 'container'}
       >
         {mode !== 'graph' && (
-          <ContainerHeader
-            container={caseData}
-            PopoverComponent={<CaseIncidentPopover id={caseData.id} />}
-            link={`/dashboard/cases/incidents/${caseData.id}/knowledge`}
-            modes={['graph', 'content', 'timeline', 'correlation', 'matrix']}
-            currentMode={mode}
-            knowledge={true}
-            enableSuggestions={true}
-            investigationAddFromContainer={investigationAddFromContainer}
-          />
+        <ContainerHeader
+          container={caseData}
+          PopoverComponent={<CaseIncidentPopover id={caseData.id} />}
+          link={`/dashboard/cases/incidents/${caseData.id}/knowledge`}
+          modes={['graph', 'content', 'timeline', 'correlation', 'matrix']}
+          currentMode={mode}
+          knowledge={true}
+          enableSuggestions={true}
+          investigationAddFromContainer={investigationAddFromContainer}
+        />
         )}
         <Route
           exact

diff --git a/opencti-platform/opencti-front/src/private/components/cases/case_rfis/CaseRfiKnowledge.jsx b/opencti-platform/opencti-front/src/private/components/cases/case_rfis/CaseRfiKnowledge.jsx
@@ -168,7 +168,7 @@ class CaseRfiKnowledgeComponent extends Component {
     );
   }
 
-  handleAddTimeLineFilter(key, id, op = 'eq', event = null) {
+  handleAddTimeLineFilter(filterKeysSchema, key, id, op = 'eq', event = null) {
     if (event) {
       event.stopPropagation();
       event.preventDefault();
@@ -177,6 +177,7 @@ class CaseRfiKnowledgeComponent extends Component {
       this.state.timeLineFilters,
       key,
       id,
+      filterKeysSchema,
       op,
     );
     this.setState(
@@ -257,16 +258,16 @@ class CaseRfiKnowledgeComponent extends Component {
         id={location.pathname.includes('matrix') ? 'parent' : 'container'}
       >
         {mode !== 'graph' && (
-          <ContainerHeader
-            container={caseData}
-            PopoverComponent={<CaseRfiPopover id={caseData.id} />}
-            link={`/dashboard/cases/rfis/${caseData.id}/knowledge`}
-            modes={['graph', 'content', 'timeline', 'correlation', 'matrix']}
-            currentMode={mode}
-            knowledge={true}
-            enableSuggestions={true}
-            investigationAddFromContainer={investigationAddFromContainer}
-          />
+        <ContainerHeader
+          container={caseData}
+          PopoverComponent={<CaseRfiPopover id={caseData.id}/>}
+          link={`/dashboard/cases/rfis/${caseData.id}/knowledge`}
+          modes={['graph', 'content', 'timeline', 'correlation', 'matrix']}
+          currentMode={mode}
+          knowledge={true}
+          enableSuggestions={true}
+          investigationAddFromContainer={investigationAddFromContainer}
+        />
         )}
         <Route
           exact
@@ -303,7 +304,7 @@ class CaseRfiKnowledgeComponent extends Component {
               variables={{ id: caseData.id }}
               render={({ props }) => {
                 if (props && props.container) {
-                  return <ContainerContent containerData={props.container} />;
+                  return <ContainerContent containerData={props.container}/>;
                 }
                 return (
                   <Loader
@@ -375,7 +376,7 @@ class CaseRfiKnowledgeComponent extends Component {
               render={({ props }) => {
                 if (props && props.caseRfi) {
                   return (
-                    <CaseRfiKnowledgeCorrelation caseData={props.caseRfi} />
+                    <CaseRfiKnowledgeCorrelation caseData={props.caseRfi}/>
                   );
                 }
                 return (

diff --git a/opencti-platform/opencti-front/src/private/components/cases/case_rfts/CaseRftKnowledge.jsx b/opencti-platform/opencti-front/src/private/components/cases/case_rfts/CaseRftKnowledge.jsx
@@ -167,7 +167,7 @@ class CaseRftKnowledgeComponent extends Component {
     );
   }
 
-  handleAddTimeLineFilter(key, id, op = 'eq', event = null) {
+  handleAddTimeLineFilter(filterKeysSchema, key, id, op = 'eq', event = null) {
     if (event) {
       event.stopPropagation();
       event.preventDefault();
@@ -176,6 +176,7 @@ class CaseRftKnowledgeComponent extends Component {
       this.state.timeLineFilters,
       key,
       id,
+      filterKeysSchema,
       op,
     );
     this.setState(
@@ -256,16 +257,16 @@ class CaseRftKnowledgeComponent extends Component {
         id={location.pathname.includes('matrix') ? 'parent' : 'container'}
       >
         {mode !== 'graph' && (
-          <ContainerHeader
-            container={caseData}
-            PopoverComponent={<CaseRftPopover id={caseData.id} />}
-            link={`/dashboard/cases/rfts/${caseData.id}/knowledge`}
-            modes={['graph', 'content', 'timeline', 'correlation', 'matrix']}
-            currentMode={mode}
-            knowledge={true}
-            enableSuggestions={true}
-            investigationAddFromContainer={investigationAddFromContainer}
-          />
+        <ContainerHeader
+          container={caseData}
+          PopoverComponent={<CaseRftPopover id={caseData.id}/>}
+          link={`/dashboard/cases/rfts/${caseData.id}/knowledge`}
+          modes={['graph', 'content', 'timeline', 'correlation', 'matrix']}
+          currentMode={mode}
+          knowledge={true}
+          enableSuggestions={true}
+          investigationAddFromContainer={investigationAddFromContainer}
+        />
         )}
         <Route
           exact
@@ -353,7 +354,7 @@ class CaseRftKnowledgeComponent extends Component {
               render={({ props }) => {
                 if (props && props.caseRft) {
                   return (
-                    <CaseRftKnowledgeCorrelation caseData={props.caseRft} />
+                    <CaseRftKnowledgeCorrelation caseData={props.caseRft}/>
                   );
                 }
                 return (

diff --git a/...ainers/ContainertKnowledgeTimeLineBar.jsx → ...ainers/ContainertKnowledgeTimeLineBar.tsx b/...ainers/ContainertKnowledgeTimeLineBar.jsx → ...ainers/ContainertKnowledgeTimeLineBar.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { FunctionComponent, SyntheticEvent, useEffect, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import { RelationManyToMany, CalendarMultiselectOutline } from 'mdi-material-ui';
 import Tooltip from '@mui/material/Tooltip';
@@ -10,7 +10,8 @@ import { useFormatter } from '../../../../components/i18n';
 import { MESSAGING$ } from '../../../../relay/environment';
 import Filters from '../lists/Filters';
 import FilterIconButton from '../../../../components/FilterIconButton';
-import { UserContext } from '../../../../utils/hooks/useAuth';
+import useAuth, { FilterDefinition, UserContext } from '../../../../utils/hooks/useAuth';
+import { Filter, FilterGroup } from '../../../../utils/filters/filtersUtils';
 
 const useStyles = makeStyles(() => ({
   bottomNav: {
@@ -25,8 +26,22 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
+interface ContentKnowledgeTimeLineBarProps {
+  handleTimeLineSearch: (search: string) => void;
+  timeLineSearchTerm: string;
+  timeLineDisplayRelationships: boolean;
+  handleToggleTimeLineDisplayRelationships: () => void;
+  timeLineFunctionalDate: boolean;
+  handleToggleTimeLineFunctionalDate: () => void;
+  timeLineFilters: FilterGroup;
+  handleAddTimeLineFilter: (filterKeysSchema: Map<string, Map<string, FilterDefinition>>, key: string, id: string, op?: string, event?: SyntheticEvent) => void;
+  handleRemoveTimeLineFilter: (key: string, id?: string) => void;
+  handleSwitchFilterLocalMode: (filter: Filter) => void;
+  handleSwitchFilterGlobalMode: () => void;
+}
+
 // TODO Fix ContentKnowledge
-const ContentKnowledgeTimeLineBar = ({
+const ContentKnowledgeTimeLineBar: FunctionComponent<ContentKnowledgeTimeLineBarProps> = ({
   handleTimeLineSearch,
   timeLineSearchTerm,
   timeLineDisplayRelationships,
@@ -39,6 +54,7 @@ const ContentKnowledgeTimeLineBar = ({
   handleSwitchFilterLocalMode,
   handleSwitchFilterGlobalMode,
 }) => {
+  const { filterKeysSchema } = useAuth().schema;
   const classes = useStyles();
   const { t_i18n } = useFormatter();
   const [navOpen, setNavOpen] = useState(
@@ -53,6 +69,9 @@ const ContentKnowledgeTimeLineBar = ({
       sub.unsubscribe();
     };
   });
+  const handleAddFilter = (key: string, id: string, op = 'eq', event?: SyntheticEvent) => {
+    handleAddTimeLineFilter(filterKeysSchema, key, id, op, event);
+  };
   return (
     <UserContext.Consumer>
       {({ bannerSettings }) => (
@@ -65,7 +84,7 @@ const ContentKnowledgeTimeLineBar = ({
             elevation: 1,
             style: {
               paddingLeft: navOpen ? 185 : 60,
-              bottom: bannerSettings.bannerHeightNumber,
+              bottom: bannerSettings?.bannerHeightNumber,
             },
           }}
         >
@@ -139,7 +158,7 @@ const ContentKnowledgeTimeLineBar = ({
                     'Stix-Domain-Object',
                     'Stix-Cyber-Observable',
                   ]}
-                  handleAddFilter={handleAddTimeLineFilter}
+                  handleAddFilter={handleAddFilter}
                 />
               </div>
 

diff --git a/opencti-platform/opencti-front/src/private/components/common/lists/Filters.tsx b/opencti-platform/opencti-front/src/private/components/common/lists/Filters.tsx
@@ -8,6 +8,7 @@ import ListFilters from './ListFilters';
 import DialogFilters from './DialogFilters';
 import { HandleAddFilter, handleFilterHelpers } from '../../../../utils/hooks/useLocalStorage';
 import { setSearchEntitiesScope } from '../../../../utils/filters/SearchEntitiesUtil';
+import useAuth from '../../../../utils/hooks/useAuth';
 
 interface FiltersProps {
   variant?: string;
@@ -97,13 +98,14 @@ const Filters: FunctionComponent<FiltersProps> = ({
     setOpen(false);
     setAnchorEl(null);
   };
+  const { filterKeysSchema } = useAuth().schema;
   const defaultHandleAddFilter = handleAddFilter
     || ((key, id, operator = 'eq', event = undefined) => {
       if (event) {
         event.stopPropagation();
         event.preventDefault();
       }
-      setFilters(constructHandleAddFilter(filters, key, id, operator));
+      setFilters(constructHandleAddFilter(filters, key, id, filterKeysSchema, operator));
     });
   const defaultHandleRemoveFilter = handleRemoveFilter
     || ((key, operator = 'eq') => {