[frontend] Add content mapping in content tab (#5651)

Co-authored-by: Jeremy Cloarec <[email protected]>
OpenCTI-Platform · Jun 14, 2024 · c4d9409 · c4d9409
1 parent 833c6e0
commit c4d9409
Show file tree

Hide file tree

Showing 56 changed files with 644 additions and 951 deletions.
diff --git a/opencti-platform/opencti-front/lang/front/de.json b/opencti-platform/opencti-front/lang/front/de.json
@@ -340,6 +340,7 @@
   "Content": "Inhalt",
   "Content mapping view": "Ansicht des Content Mappings",
   "Content max marking definition levels": "Maximale Markierungsdefinitionsstufen für Inhalte",
+  "Content view": "Ansicht des Inhalts",
   "contest": "Flüchtige Gruppierung",
   "Context": "Kontext",
   "context": "Kontext",

diff --git a/opencti-platform/opencti-front/lang/front/en.json b/opencti-platform/opencti-front/lang/front/en.json
@@ -340,6 +340,7 @@
   "Content": "Content",
   "Content mapping view": "Content mapping view",
   "Content max marking definition levels": "Content max marking definition levels",
+  "Content view": "Content view",
   "contest": "Ephemeral groupment",
   "Context": "Context",
   "context": "Context",

diff --git a/opencti-platform/opencti-front/lang/front/es.json b/opencti-platform/opencti-front/lang/front/es.json
@@ -340,6 +340,7 @@
   "Content": "Contenido",
   "Content mapping view": "Vista de mapeo de contenidos",
   "Content max marking definition levels": "Niveles de definición de marcado máximo de contenido",
+  "Content view": "Vista del contenido",
   "contest": "Movimiento espontáneo",
   "context": "Contexto",
   "Context": "Contexto",

diff --git a/opencti-platform/opencti-front/lang/front/fr.json b/opencti-platform/opencti-front/lang/front/fr.json
@@ -340,6 +340,7 @@
   "Content": "Contenu",
   "Content mapping view": "Vue de la cartographie du contenu",
   "Content max marking definition levels": "Niveaux de marquage maximum du contenu",
+  "Content view": "Vue du contenu",
   "contest": "Mouvement spontané",
   "context": "Contexte",
   "Context": "Contexte",

diff --git a/opencti-platform/opencti-front/lang/front/ja.json b/opencti-platform/opencti-front/lang/front/ja.json
@@ -340,6 +340,7 @@
   "Content": "内容",
   "Content mapping view": "コンテンツマッピングビュー",
   "Content max marking definition levels": "コンテンツの最大マーキング定義レベル",
+  "Content view": "コンテンツビュー",
   "contest": "一時的なグループ",
   "context": "コンテキスト",
   "Context": "コンテキスト",

diff --git a/opencti-platform/opencti-front/lang/front/zh.json b/opencti-platform/opencti-front/lang/front/zh.json
@@ -340,6 +340,7 @@
   "Content": "内容",
   "Content mapping view": "内容映射视图",
   "Content max marking definition levels": "内容最大标记定义级别",
+  "Content view": "内容视图",
   "contest": "比赛",
   "context": "关联",
   "Context": "上下文",

diff --git a/...cti-platform/opencti-front/src/private/components/analyses/groupings/GroupingCreation.tsx b/...cti-platform/opencti-front/src/private/components/analyses/groupings/GroupingCreation.tsx
@@ -96,6 +96,8 @@ export const GroupingCreationForm: FunctionComponent<GroupingFormProps> = ({
   const classes = useStyles();
   const { t_i18n } = useFormatter();
   const navigate = useNavigate();
+  const { isFeatureEnable } = useHelper();
+  const contentMappingFeatureFlag = isFeatureEnable('CONTENT_MAPPING');
   const [mapAfter, setMapAfter] = useState<boolean>(false);
   const basicShape = {
     name: Yup.string().trim().min(2).required(t_i18n('This field is required')),
@@ -149,9 +151,15 @@ export const GroupingCreationForm: FunctionComponent<GroupingFormProps> = ({
           onClose();
         }
         if (mapAfter) {
-          navigate(
-            `/dashboard/analyses/groupings/${response.groupingAdd?.id}/knowledge/content`,
-          );
+          if (contentMappingFeatureFlag) {
+            navigate(
+              `/dashboard/analyses/groupings/${response.groupingAdd?.id}/content/mapping`,
+            );
+          } else {
+            navigate(
+              `/dashboard/analyses/groupings/${response.groupingAdd?.id}/knowledge/content`,
+            );
+          }
         }
       },
     });

diff --git a/...ti-platform/opencti-front/src/private/components/analyses/groupings/GroupingKnowledge.jsx b/...ti-platform/opencti-front/src/private/components/analyses/groupings/GroupingKnowledge.jsx
@@ -14,8 +14,8 @@ import Loader, { LoaderVariant } from '../../../../components/Loader';
 import GroupingPopover from './GroupingPopover';
 import AttackPatternsMatrix from '../../techniques/attack_patterns/AttackPatternsMatrix';
 import { buildViewParamsFromUrlAndStorage, saveViewParameters } from '../../../../utils/ListParameters';
-import ContainerContent, { containerContentQuery } from '../../common/containers/ContainerContent';
 import investigationAddFromContainer from '../../../../utils/InvestigationUtils';
+import ContainerContent, { containerContentQuery } from '../../common/containers/ContainerContent';
 import withRouter from '../../../../utils/compat-router/withRouter';
 
 const styles = () => ({
@@ -210,7 +210,7 @@ class GroupingKnowledgeComponent extends Component {
                   );
                 }}
               />
-            }
+              }
           />
           <Route
             path="/correlation"

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/groupings/Root.tsx b/opencti-platform/opencti-front/src/private/components/analyses/groupings/Root.tsx
@@ -11,7 +11,7 @@ import Tab from '@mui/material/Tab';
 import { GraphQLSubscriptionConfig } from 'relay-runtime';
 import { RootReportSubscription } from '@components/analyses/reports/__generated__/RootReportSubscription.graphql';
 import StixCoreObjectSimulationResult from '@components/common/stix_core_objects/StixCoreObjectSimulationResult';
-import StixCoreObjectContent from '../../common/stix_core_objects/StixCoreObjectContent';
+import StixCoreObjectContentRoot from '@components/common/stix_core_objects/StixCoreObjectContentRoot';
 import { QueryRenderer } from '../../../../relay/environment';
 import Grouping from './Grouping';
 import GroupingPopover from './GroupingPopover';
@@ -26,6 +26,7 @@ import { useFormatter } from '../../../../components/i18n';
 import Breadcrumbs from '../../../../components/Breadcrumbs';
 import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';
 import useGranted, { BYPASSREFERENCE } from '../../../../utils/hooks/useGranted';
+import { getCurrentTab, getPaddingRight } from '../../../../utils/utils';
 
 const subscription = graphql`
   subscription RootGroupingSubscription($id: ID!) {
@@ -87,6 +88,7 @@ const RootGrouping = () => {
   const enableReferences = useIsEnforceReference('Grouping') && !useGranted([BYPASSREFERENCE]);
   const { t_i18n } = useFormatter();
   useSubscription(subConfig);
+
   return (
     <>
       <QueryRenderer
@@ -96,25 +98,8 @@ const RootGrouping = () => {
           if (props) {
             if (props.grouping) {
               const { grouping } = props;
-              let paddingRight = 0;
               const isOverview = location.pathname === `/dashboard/analyses/groupings/${grouping.id}`;
-              if (
-                location.pathname.includes(
-                  `/dashboard/analyses/groupings/${grouping.id}/entities`,
-                )
-                      || location.pathname.includes(
-                        `/dashboard/analyses/groupings/${grouping.id}/observables`,
-                      )
-              ) {
-                paddingRight = 250;
-              }
-              if (
-                location.pathname.includes(
-                  `/dashboard/analyses/groupings/${grouping.id}/content`,
-                )
-              ) {
-                paddingRight = 350;
-              }
+              const paddingRight = getPaddingRight(location.pathname, grouping.id, '/dashboard/analyses/groupings', false);
               return (
                 <div style={{ paddingRight }}>
                   <Breadcrumbs variant="object" elements={[
@@ -139,13 +124,7 @@ const RootGrouping = () => {
                     }}
                   >
                     <Tabs
-                      value={
-                                location.pathname.includes(
-                                  `/dashboard/analyses/groupings/${grouping.id}/knowledge`,
-                                )
-                                  ? `/dashboard/analyses/groupings/${grouping.id}/knowledge`
-                                  : location.pathname
-                              }
+                      value={getCurrentTab(location.pathname, grouping.id, '/dashboard/analyses/groupings')}
                     >
                       <Tab
                         component={Link}
@@ -214,10 +193,11 @@ const RootGrouping = () => {
                       }
                     />
                     <Route
-                      path="/content"
+                      path="/content/*"
                       element={
-                        <StixCoreObjectContent
+                        <StixCoreObjectContentRoot
                           stixCoreObject={grouping}
+                          isContainer={true}
                         />
                       }
                     />

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/malware_analyses/Root.tsx b/opencti-platform/opencti-front/src/private/components/analyses/malware_analyses/Root.tsx
@@ -9,6 +9,7 @@ import { GraphQLSubscriptionConfig } from 'relay-runtime';
 import Box from '@mui/material/Box';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
+import StixCoreObjectContentRoot from '@components/common/stix_core_objects/StixCoreObjectContentRoot';
 import { QueryRenderer } from '../../../../relay/environment';
 import ErrorNotFound from '../../../../components/ErrorNotFound';
 import Loader from '../../../../components/Loader';
@@ -24,6 +25,7 @@ import StixCoreRelationship from '../../common/stix_core_relationships/StixCoreR
 import { useFormatter } from '../../../../components/i18n';
 import Breadcrumbs from '../../../../components/Breadcrumbs';
 import { getMainRepresentative } from '../../../../utils/defaultRepresentatives';
+import { getCurrentTab, getPaddingRight } from '../../../../utils/utils';
 
 const subscription = graphql`
   subscription RootMalwareAnalysisSubscription($id: ID!) {
@@ -86,8 +88,9 @@ const RootMalwareAnalysis = () => {
           if (props) {
             if (props.malwareAnalysis) {
               const { malwareAnalysis } = props;
+              const paddingRight = getPaddingRight(location.pathname, malwareAnalysis.id, '/dashboard/analyses/malware_analyses', false);
               return (
-                <>
+                <div style={{ paddingRight }}>
                   <Breadcrumbs variant="object" elements={[
                     { label: t_i18n('Analyses') },
                     { label: t_i18n('Malware analyses'), link: '/dashboard/analyses/malware_analyses' },
@@ -98,8 +101,8 @@ const RootMalwareAnalysis = () => {
                     entityType={'Malware-Analysis'}
                     stixDomainObject={malwareAnalysis}
                     PopoverComponent={
-                      <MalwareAnalysisPopover id={malwareAnalysisId} />
-                    }
+                      <MalwareAnalysisPopover id={malwareAnalysisId}/>
+                          }
                     noAliases={true}
                   />
                   <Box
@@ -110,13 +113,7 @@ const RootMalwareAnalysis = () => {
                     }}
                   >
                     <Tabs
-                      value={
-                        location.pathname.includes(
-                          `/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/knowledge`,
-                        )
-                          ? `/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/knowledge`
-                          : location.pathname
-                      }
+                      value={getCurrentTab(location.pathname, malwareAnalysis.id, '/dashboard/analyses/malware_analyses')}
                     >
                       <Tab
                         component={Link}
@@ -130,6 +127,12 @@ const RootMalwareAnalysis = () => {
                         value={`/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/knowledge`}
                         label={t_i18n('Knowledge')}
                       />
+                      <Tab
+                        component={Link}
+                        to={`/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/content`}
+                        value={`/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/content`}
+                        label={t_i18n('Content')}
+                      />
                       <Tab
                         component={Link}
                         to={`/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/files`}
@@ -180,6 +183,14 @@ const RootMalwareAnalysis = () => {
                           entityId={malwareAnalysisId}
                         />}
                     />
+                    <Route
+                      path="/content/*"
+                      element={
+                        <StixCoreObjectContentRoot
+                          stixCoreObject={malwareAnalysis}
+                        />
+                      }
+                    />
                     <Route
                       path="/files"
                       element={
@@ -198,10 +209,10 @@ const RootMalwareAnalysis = () => {
                         />}
                     />
                   </Routes>
-                </>
+                </div>
               );
             }
-            return <ErrorNotFound />;
+            return <ErrorNotFound/>;
           }
           return <Loader />;
         }}

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/reports/ReportCreation.tsx b/opencti-platform/opencti-front/src/private/components/analyses/reports/ReportCreation.tsx
@@ -105,6 +105,8 @@ export const ReportCreationForm: FunctionComponent<ReportFormProps> = ({
   const classes = useStyles();
   const { t_i18n } = useFormatter();
   const navigate = useNavigate();
+  const { isFeatureEnable } = useHelper();
+  const contentMappingFeatureFlag = isFeatureEnable('CONTENT_MAPPING');
   const [mapAfter, setMapAfter] = useState<boolean>(false);
   const basicShape = {
     name: Yup.string().trim().min(2, t_i18n('Name must be at least 2 characters')).required(t_i18n('This field is required')),
@@ -163,9 +165,15 @@ export const ReportCreationForm: FunctionComponent<ReportFormProps> = ({
           onClose();
         }
         if (mapAfter) {
-          navigate(
-            `/dashboard/analyses/reports/${response.reportAdd?.id}/knowledge/content`,
-          );
+          if (contentMappingFeatureFlag) {
+            navigate(
+              `/dashboard/analyses/reports/${response.reportAdd?.id}/content/mapping`,
+            );
+          } else {
+            navigate(
+              `/dashboard/analyses/reports/${response.reportAdd?.id}/knowledge/content`,
+            );
+          }
         }
       },
     });

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
@@ -310,7 +310,7 @@ class ReportKnowledgeComponent extends Component {
                   );
                 }}
               />
-            )}
+              )}
           />
           <Route
             path="/timeline"

diff --git a/opencti-platform/opencti-front/src/private/components/analyses/reports/Root.tsx b/opencti-platform/opencti-front/src/private/components/analyses/reports/Root.tsx
@@ -9,6 +9,7 @@ import { GraphQLSubscriptionConfig } from 'relay-runtime';
 import Box from '@mui/material/Box';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
+import StixCoreObjectContentRoot from '@components/common/stix_core_objects/StixCoreObjectContentRoot';
 import StixCoreObjectSimulationResult from '../../common/stix_core_objects/StixCoreObjectSimulationResult';
 import { QueryRenderer } from '../../../../relay/environment';
 import Report from './Report';
@@ -22,11 +23,11 @@ import ContainerStixDomainObjects from '../../common/containers/ContainerStixDom
 import ContainerStixCyberObservables from '../../common/containers/ContainerStixCyberObservables';
 import ErrorNotFound from '../../../../components/ErrorNotFound';
 import StixCoreObjectFilesAndHistory from '../../common/stix_core_objects/StixCoreObjectFilesAndHistory';
-import StixCoreObjectContent from '../../common/stix_core_objects/StixCoreObjectContent';
 import Breadcrumbs from '../../../../components/Breadcrumbs';
 import { useFormatter } from '../../../../components/i18n';
 import { useIsEnforceReference } from '../../../../utils/hooks/useEntitySettings';
 import useGranted, { BYPASSREFERENCE } from '../../../../utils/hooks/useGranted';
+import { getCurrentTab, getPaddingRight } from '../../../../utils/utils';
 
 const subscription = graphql`
   subscription RootReportSubscription($id: ID!) {
@@ -86,6 +87,7 @@ const RootReport = () => {
   const enableReferences = useIsEnforceReference('Report') && !useGranted([BYPASSREFERENCE]);
   const { t_i18n } = useFormatter();
   useSubscription(subConfig);
+
   return (
     <>
       <QueryRenderer
@@ -95,25 +97,8 @@ const RootReport = () => {
           if (props) {
             if (props.report) {
               const { report } = props;
-              let paddingRight = 0;
               const isOverview = location.pathname === `/dashboard/analyses/reports/${report.id}`;
-              if (
-                location.pathname.includes(
-                  `/dashboard/analyses/reports/${report.id}/entities`,
-                )
-                || location.pathname.includes(
-                  `/dashboard/analyses/reports/${report.id}/observables`,
-                )
-              ) {
-                paddingRight = 250;
-              }
-              if (
-                location.pathname.includes(
-                  `/dashboard/analyses/reports/${report.id}/content`,
-                )
-              ) {
-                paddingRight = 350;
-              }
+              const paddingRight = getPaddingRight(location.pathname, reportId, '/dashboard/analyses/reports', false);
               return (
                 <div style={{ paddingRight }} data-testid="report-details-page">
                   <Breadcrumbs variant="object" elements={[
@@ -141,13 +126,7 @@ const RootReport = () => {
                     }}
                   >
                     <Tabs
-                      value={
-                        location.pathname.includes(
-                          `/dashboard/analyses/reports/${report.id}/knowledge`,
-                        )
-                          ? `/dashboard/analyses/reports/${report.id}/knowledge`
-                          : location.pathname
-                      }
+                      value={getCurrentTab(location.pathname, report.id, '/dashboard/analyses/reports')}
                     >
                       <Tab
                         component={Link}
@@ -225,10 +204,11 @@ const RootReport = () => {
                       )}
                     />
                     <Route
-                      path="/content"
+                      path="/content/*"
                       element={
-                        <StixCoreObjectContent
+                        <StixCoreObjectContentRoot
                           stixCoreObject={report}
+                          isContainer={true}
                         />
                       }
                     />
-Original file line number
+Diff line change
@@ Expand Up / @@ -310,7 +310,7 @@ class ReportKnowledgeComponent extends Component { @@
                       );
                     }}
                   />
-                )}
+                  )}
               />
               <Route
                 path="/timeline"
@@ Expand Down @@