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

OpenCTI-Platform · Jun 5, 2024 · c2ce15b · c2ce15b
1 parent 2eb5dfd
commit c2ce15b
Show file tree

Hide file tree

Showing 60 changed files with 862 additions and 500 deletions.
diff --git a/opencti-platform/opencti-front/lang/front/de.json b/opencti-platform/opencti-front/lang/front/de.json
@@ -339,6 +339,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
@@ -339,6 +339,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
@@ -339,6 +339,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
@@ -339,6 +339,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
@@ -339,6 +339,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
@@ -339,6 +339,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
@@ -150,7 +150,7 @@ export const GroupingCreationForm: FunctionComponent<GroupingFormProps> = ({
         }
         if (mapAfter) {
           navigate(
-            `/dashboard/analyses/groupings/${response.groupingAdd?.id}/knowledge/content`,
+            `/dashboard/analyses/groupings/${response.groupingAdd?.id}/content/mapping`,
           );
         }
       },

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
@@ -158,7 +158,7 @@ class GroupingKnowledgeComponent extends Component {
             container={grouping}
             PopoverComponent={<GroupingPopover />}
             link={`/dashboard/analyses/groupings/${grouping.id}/knowledge`}
-            modes={['graph', 'content', 'correlation', 'matrix']}
+            modes={['graph', 'correlation', 'matrix']}
             currentMode={mode}
             knowledge={true}
             enableSuggestions={true}

diff --git a/...atform/opencti-front/src/private/components/analyses/groupings/GroupingKnowledgeGraph.jsx b/...atform/opencti-front/src/private/components/analyses/groupings/GroupingKnowledgeGraph.jsx
@@ -1013,7 +1013,7 @@ class GroupingKnowledgeGraphComponent extends Component {
                 container={grouping}
                 PopoverComponent={<GroupingPopover />}
                 link={`/dashboard/analyses/groupings/${grouping.id}/knowledge`}
-                modes={['graph', 'content', 'correlation', 'matrix']}
+                modes={['graph', 'correlation', 'matrix']}
                 currentMode={mode}
                 adjust={this.handleZoomToFit.bind(this)}
                 knowledge={true}

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';
@@ -87,6 +87,13 @@ const RootGrouping = () => {
   const enableReferences = useIsEnforceReference('Grouping') && !useGranted([BYPASSREFERENCE]);
   const { t_i18n } = useFormatter();
   useSubscription(subConfig);
+
+  const getCurrentTab = (grouping) => {
+    if (location.pathname.includes(`/dashboard/analyses/groupings/${grouping.id}/knowledge`)) return `/dashboard/analyses/groupings/${grouping.id}/knowledge`;
+    if (location.pathname.includes(`/dashboard/analyses/groupings/${grouping.id}/content`)) return `/dashboard/analyses/groupings/${grouping.id}/content`;
+    return location.pathname;
+  };
+
   return (
     <>
       <QueryRenderer
@@ -115,6 +122,13 @@ const RootGrouping = () => {
               ) {
                 paddingRight = 350;
               }
+              if (
+                location.pathname.includes(
+                  `/dashboard/analyses/groupings/${grouping.id}/content/mapping`,
+                )
+              ) {
+                paddingRight = 0;
+              }
               return (
                 <div style={{ paddingRight }}>
                   <Breadcrumbs variant="object" elements={[
@@ -139,13 +153,7 @@ const RootGrouping = () => {
                     }}
                   >
                     <Tabs
-                      value={
-                                location.pathname.includes(
-                                  `/dashboard/analyses/groupings/${grouping.id}/knowledge`,
-                                )
-                                  ? `/dashboard/analyses/groupings/${grouping.id}/knowledge`
-                                  : location.pathname
-                              }
+                      value={getCurrentTab(grouping)}
                     >
                       <Tab
                         component={Link}
@@ -214,10 +222,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';
@@ -76,6 +77,11 @@ const RootMalwareAnalysis = () => {
   const location = useLocation();
   const { t_i18n } = useFormatter();
   useSubscription(subConfig);
+  const getCurrentTab = (malwareAnalysis) => {
+    if (location.pathname.includes(`/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/knowledge`)) return `/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/knowledge`;
+    if (location.pathname.includes(`/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/content`)) return `/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/content`;
+    return location.pathname;
+  };
   const link = `/dashboard/analyses/malware_analyses/${malwareAnalysisId}/knowledge`;
   return (
     <>
@@ -86,8 +92,23 @@ const RootMalwareAnalysis = () => {
           if (props) {
             if (props.malwareAnalysis) {
               const { malwareAnalysis } = props;
+              let paddingRight = 0;
+              if (
+                location.pathname.includes(
+                  `/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/content`,
+                )
+              ) {
+                paddingRight = 350;
+              }
+              if (
+                location.pathname.includes(
+                  `/dashboard/analyses/malware_analyses/${malwareAnalysis.id}/content/mapping`,
+                )
+              ) {
+                paddingRight = 0;
+              }
               return (
-                <>
+                <div style={{ paddingRight }}>
                   <Breadcrumbs variant="object" elements={[
                     { label: t_i18n('Analyses') },
                     { label: t_i18n('Malware analyses'), link: '/dashboard/analyses/malware_analyses' },
@@ -98,8 +119,8 @@ const RootMalwareAnalysis = () => {
                     entityType={'Malware-Analysis'}
                     stixDomainObject={malwareAnalysis}
                     PopoverComponent={
-                      <MalwareAnalysisPopover id={malwareAnalysisId} />
-                    }
+                      <MalwareAnalysisPopover id={malwareAnalysisId}/>
+                          }
                     noAliases={true}
                   />
                   <Box
@@ -110,13 +131,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(malwareAnalysis)}
                     >
                       <Tab
                         component={Link}
@@ -130,6 +145,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 +201,14 @@ const RootMalwareAnalysis = () => {
                           entityId={malwareAnalysisId}
                         />}
                     />
+                    <Route
+                      path="/content/*"
+                      element={
+                        <StixCoreObjectContentRoot
+                          stixCoreObject={malwareAnalysis}
+                        />
+                      }
+                    />
                     <Route
                       path="/files"
                       element={
@@ -198,10 +227,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
@@ -164,7 +164,7 @@ export const ReportCreationForm: FunctionComponent<ReportFormProps> = ({
         }
         if (mapAfter) {
           navigate(
-            `/dashboard/analyses/reports/${response.reportAdd?.id}/knowledge/content`,
+            `/dashboard/analyses/reports/${response.reportAdd?.id}/content/mapping`,
           );
         }
       },

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
@@ -262,7 +262,7 @@ class ReportKnowledgeComponent extends Component {
           container={report}
           PopoverComponent={<ReportPopover />}
           link={`/dashboard/analyses/reports/${report.id}/knowledge`}
-          modes={['graph', 'content', 'timeline', 'correlation', 'matrix']}
+          modes={['graph', 'timeline', 'correlation', 'matrix']}
           currentMode={mode}
           knowledge={true}
           enableSuggestions={true}

diff --git a/...i-platform/opencti-front/src/private/components/analyses/reports/ReportKnowledgeGraph.jsx b/...i-platform/opencti-front/src/private/components/analyses/reports/ReportKnowledgeGraph.jsx
@@ -1016,7 +1016,6 @@ class ReportKnowledgeGraphComponent extends Component {
                 link={`/dashboard/analyses/reports/${report.id}/knowledge`}
                 modes={[
                   'graph',
-                  'content',
                   'timeline',
                   'correlation',
                   'matrix',

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,7 +23,6 @@ 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';
@@ -86,6 +86,11 @@ const RootReport = () => {
   const enableReferences = useIsEnforceReference('Report') && !useGranted([BYPASSREFERENCE]);
   const { t_i18n } = useFormatter();
   useSubscription(subConfig);
+  const getCurrentTab = (report) => {
+    if (location.pathname.includes(`/dashboard/analyses/reports/${report.id}/knowledge`)) return `/dashboard/analyses/reports/${report.id}/knowledge`;
+    if (location.pathname.includes(`/dashboard/analyses/reports/${report.id}/content`)) return `/dashboard/analyses/reports/${report.id}/content`;
+    return location.pathname;
+  };
   return (
     <>
       <QueryRenderer
@@ -114,6 +119,13 @@ const RootReport = () => {
               ) {
                 paddingRight = 350;
               }
+              if (
+                location.pathname.includes(
+                  `/dashboard/analyses/reports/${report.id}/content/mapping`,
+                )
+              ) {
+                paddingRight = 0;
+              }
               return (
                 <div style={{ paddingRight }} data-testid="report-details-page">
                   <Breadcrumbs variant="object" elements={[
@@ -141,13 +153,7 @@ const RootReport = () => {
                     }}
                   >
                     <Tabs
-                      value={
-                        location.pathname.includes(
-                          `/dashboard/analyses/reports/${report.id}/knowledge`,
-                        )
-                          ? `/dashboard/analyses/reports/${report.id}/knowledge`
-                          : location.pathname
-                      }
+                      value={getCurrentTab(report)}
                     >
                       <Tab
                         component={Link}
@@ -225,10 +231,11 @@ const RootReport = () => {
                       )}
                     />
                     <Route
-                      path="/content"
+                      path="/content/*"
                       element={
-                        <StixCoreObjectContent
+                        <StixCoreObjectContentRoot
                           stixCoreObject={report}
+                          isContainer={true}
                         />
                       }
                     />