[frontend] refactor distribution widgets

OpenCTI-Platform · Apr 2, 2024 · 3950248 · 3950248
1 parent 37c65bf
commit 3950248
Show file tree

Hide file tree

Showing 113 changed files with 1,273 additions and 6,971 deletions.
diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetDistributionList.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetDistributionList.tsx
@@ -9,6 +9,7 @@ import ItemIcon from '../ItemIcon';
 import { computeLink } from '../../utils/Entity';
 import type { Theme } from '../Theme';
 import { useFormatter } from '../i18n';
+import { getMainRepresentative } from '../../utils/defaultRepresentatives';
 
 interface WidgetDistributionListProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -38,6 +39,8 @@ const WidgetDistributionList = ({
     >
       <List style={{ marginTop: -10 }}>
         {data.map((entry, key) => {
+          const label = getMainRepresentative(entry.entity) || entry.label;
+
           let link: string | null = null;
           if (entry.type !== 'User' || hasSettingAccess) {
             const node: {
@@ -94,7 +97,7 @@ const WidgetDistributionList = ({
                       paddingRight: 10,
                     }}
                   >
-                    {entry.label}
+                    {label}
                   </div>
                 }
               />

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetDonut.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetDonut.tsx
@@ -2,10 +2,9 @@ import Chart from '@components/common/charts/Chart';
 import React from 'react';
 import { useTheme } from '@mui/styles';
 import type { ApexOptions } from 'apexcharts';
-import { defaultValue, isFieldForIdentifier } from '../../utils/defaultRepresentatives';
 import { donutChartOptions } from '../../utils/Charts';
-import { useFormatter } from '../i18n';
 import type { Theme } from '../Theme';
+import useDistributionGraphData from '../../utils/hooks/useDistributionGraphData';
 
 interface WidgetDonutProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -22,16 +21,10 @@ const WidgetDonut = ({
   readonly = false,
 }: WidgetDonutProps) => {
   const theme = useTheme<Theme>();
-  const { t_i18n } = useFormatter();
+  const { buildWidgetLabelsOption } = useDistributionGraphData();
 
   const chartData = data.map((n) => n.value);
-  // eslint-disable-next-line no-nested-ternary
-  const labels = data.map((n) => (groupBy.endsWith('_id')
-    ? defaultValue(n.entity, t_i18n('Restricted'))
-    : groupBy === 'entity_type' && t_i18n(`entity_${n.label}`) !== `entity_${n.label}`
-      ? t_i18n(`entity_${n.label}`)
-      : n.label));
-
+  const labels = buildWidgetLabelsOption(data, groupBy);
   let chartColors = [];
   if (data.at(0)?.entity?.color) {
     chartColors = data.map((n) => (theme.palette.mode === 'light' && n.entity?.color === '#ffffff'

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetListCoreObjects.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetListCoreObjects.tsx
@@ -8,7 +8,7 @@ import StixCoreObjectLabels from '@components/common/stix_core_objects/StixCoreO
 import React, { CSSProperties } from 'react';
 import { resolveLink } from '../../utils/Entity';
 import ItemIcon from '../ItemIcon';
-import { defaultValue } from '../../utils/defaultRepresentatives';
+import { getMainRepresentative } from '../../utils/defaultRepresentatives';
 import ItemStatus from '../ItemStatus';
 import ItemMarkings from '../ItemMarkings';
 import { useFormatter } from '../i18n';
@@ -72,7 +72,7 @@ const WidgetListCoreObjects = ({
                 primary={
                   <>
                     <div style={bodyItemStyle('30%')}>
-                      {defaultValue(stixCoreObject)}
+                      {getMainRepresentative(stixCoreObject)}
                     </div>
                     <div style={bodyItemStyle('10%')}>
                       {fsd(date)}

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetListRelationships.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetListRelationships.tsx
@@ -7,7 +7,7 @@ import React, { CSSProperties } from 'react';
 import { useTheme } from '@mui/styles';
 import { ListItemButton } from '@mui/material';
 import ItemIcon from '../ItemIcon';
-import { defaultValue } from '../../utils/defaultRepresentatives';
+import { getMainRepresentative } from '../../utils/defaultRepresentatives';
 import ItemMarkings from '../ItemMarkings';
 import { computeLink } from '../../utils/Entity';
 import type { Theme } from '../Theme';
@@ -116,7 +116,7 @@ const WidgetListRelationships = ({
                     <div style={bodyItemStyle('18%')}>
                       <code>
                         {stixRelationship.from
-                          ? defaultValue(stixRelationship.from)
+                          ? getMainRepresentative(stixRelationship.from)
                           : t_i18n('Restricted')}
                       </code>
                     </div>
@@ -149,7 +149,7 @@ const WidgetListRelationships = ({
                     <div style={bodyItemStyle('18%')}>
                       <code>
                         {stixRelationship.to
-                          ? defaultValue(stixRelationship.to)
+                          ? getMainRepresentative(stixRelationship.to)
                           : t_i18n('Restricted')}
                       </code>
                     </div>

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetRadar.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetRadar.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 import { useTheme } from '@mui/styles';
 import { ApexOptions } from 'apexcharts';
 import { radarChartOptions } from '../../utils/Charts';
-import { defaultValue } from '../../utils/defaultRepresentatives';
 import { useFormatter } from '../i18n';
 import type { Theme } from '../Theme';
+import useDistributionGraphData from '../../utils/hooks/useDistributionGraphData';
 
 interface WidgetRadarProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -25,19 +25,14 @@ const WidgetRadar = ({
 }: WidgetRadarProps) => {
   const theme = useTheme<Theme>();
   const { t_i18n } = useFormatter();
+  const { buildWidgetLabelsOption } = useDistributionGraphData();
 
   const chartData = [{
     name: label || t_i18n('Number of relationships'),
     data: data.map((n) => n.value),
   }];
 
-  // eslint-disable-next-line no-nested-ternary,implicit-arrow-linebreak
-  const labels = data.map((n) => (groupBy.endsWith('_id')
-    ? defaultValue(n.entity, t_i18n('Restricted'))
-    : groupBy === 'entity_type' && t_i18n(`entity_${n.label}`) !== `entity_${n.label}`
-      ? t_i18n(`entity_${n.label}`)
-      : n.label));
-
+  const labels = buildWidgetLabelsOption(data, groupBy);
   return (
     <Chart
       options={radarChartOptions(theme, labels, [], true, false) as ApexOptions}

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetTimeline.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetTimeline.tsx
@@ -9,7 +9,7 @@ import TimelineContent from '@mui/lab/TimelineContent';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import React from 'react';
-import { defaultValue } from '../../utils/defaultRepresentatives';
+import { getSecondaryRepresentative, getMainRepresentative } from '../../utils/defaultRepresentatives';
 import MarkdownDisplay from '../MarkdownDisplay';
 import ItemIcon from '../ItemIcon';
 import { itemColor } from '../../utils/Colors';
@@ -33,9 +33,9 @@ const WidgetTimeline = ({ data }: WidgetTimelineProps) => {
       }}
     >
       <Timeline position="alternate">
-        {data.map(({ value, link }) => {
+        {data.map(({ value, link }, index) => {
           return (
-            <TimelineItem key={value.id}>
+            <TimelineItem key={`${value.id}-${index}`}>
               <TimelineOppositeContent
                 sx={{ paddingTop: '18px' }}
                 color="text.secondary"
@@ -67,11 +67,11 @@ const WidgetTimeline = ({ data }: WidgetTimelineProps) => {
               <TimelineContent>
                 <Paper variant="outlined" sx={{ padding: '15px' }} className="noDrag">
                   <Typography variant="h2">
-                    {defaultValue(value)}
+                    {getMainRepresentative(value)}
                   </Typography>
                   <div style={{ marginTop: -5, color: '#a8a8a8' }}>
                     <MarkdownDisplay
-                      content={value.description}
+                      content={getSecondaryRepresentative(value)}
                       limit={150}
                     />
                   </div>

diff --git a/opencti-platform/opencti-front/src/components/dashboard/WidgetTree.tsx b/opencti-platform/opencti-front/src/components/dashboard/WidgetTree.tsx
@@ -4,7 +4,7 @@ import { useTheme } from '@mui/styles';
 import { ApexOptions } from 'apexcharts';
 import { useFormatter } from '../i18n';
 import { treeMapOptions } from '../../utils/Charts';
-import { defaultValue } from '../../utils/defaultRepresentatives';
+import { getMainRepresentative, isFieldForIdentifier } from '../../utils/defaultRepresentatives';
 
 interface WidgetTreeProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -25,15 +25,16 @@ const WidgetTree = ({
   const theme = useTheme();
   const { t_i18n } = useFormatter();
 
-  const chartData = data.map((n) => ({
-    // eslint-disable-next-line no-nested-ternary
-    x: groupBy.endsWith('_id')
-      ? defaultValue(n.entity, t_i18n('Restricted'))
-      : groupBy === 'entity_type' && t_i18n(`entity_${n.label}`) !== `entity_${n.label}`
-        ? t_i18n(`entity_${n.label}`)
-        : n.label,
-    y: n.value,
-  }));
+  const chartData = data.map((n) => {
+    const item = { x: n.label, y: n.value };
+    if (isFieldForIdentifier(groupBy)) {
+      item.x = getMainRepresentative(n.entity);
+    } else if (groupBy === 'entity_type' && t_i18n(`entity_${n.label}`) !== `entity_${n.label}`) {
+      item.x = t_i18n(`entity_${n.label}`);
+    }
+    return item;
+  });
+
   const series = [{ data: chartData }];
 
   return (

diff --git a/opencti-platform/opencti-front/src/private/components/SearchBulk.jsx b/opencti-platform/opencti-front/src/private/components/SearchBulk.jsx
@@ -21,7 +21,7 @@ import ItemIcon from '../../components/ItemIcon';
 import { searchStixCoreObjectsLinesSearchQuery } from './search/SearchStixCoreObjectsLines';
 import { fetchQuery } from '../../relay/environment';
 import { useFormatter } from '../../components/i18n';
-import { defaultValue } from '../../utils/defaultRepresentatives';
+import { getMainRepresentative } from '../../utils/defaultRepresentatives';
 import { resolveLink } from '../../utils/Entity';
 import StixCoreObjectLabels from './common/stix_core_objects/StixCoreObjectLabels';
 import StixCoreObjectsExports from './common/stix_core_objects/StixCoreObjectsExports';
@@ -340,7 +340,7 @@ const SearchBulk = () => {
                         (resolvedStixCoreObject) => ({
                           id: resolvedStixCoreObject.id,
                           type: resolvedStixCoreObject.entity_type,
-                          value: defaultValue(resolvedStixCoreObject),
+                          value: getMainRepresentative(resolvedStixCoreObject),
                           labels: resolvedStixCoreObject.objectLabel,
                           markings: resolvedStixCoreObject.objectMarking,
                           containersNumber: resolvedStixCoreObject.containersNumber,

diff --git a/...atform/opencti-front/src/private/components/analyses/groupings/GroupingKnowledgeGraph.jsx b/...atform/opencti-front/src/private/components/analyses/groupings/GroupingKnowledgeGraph.jsx
@@ -31,7 +31,7 @@ import {
   nodePaint,
   nodeThreePaint,
 } from '../../../../utils/Graph';
-import { defaultSecondaryValue, defaultValue } from '../../../../utils/defaultRepresentatives';
+import { getSecondaryRepresentative, getMainRepresentative } from '../../../../utils/defaultRepresentatives';
 import { buildViewParamsFromUrlAndStorage, saveViewParameters } from '../../../../utils/ListParameters';
 import GroupingKnowledgeGraphBar from './GroupingKnowledgeGraphBar';
 import { groupingMutationFieldPatch } from './GroupingEditionOverview';
@@ -954,9 +954,9 @@ class GroupingKnowledgeGraphComponent extends Component {
     this.selectedNodes.clear();
     if (isNotEmptyField(keyword)) {
       const filterByKeyword = (n) => keyword === ''
-        || (defaultValue(n) || '').toLowerCase().indexOf(keyword.toLowerCase())
+        || (getMainRepresentative(n) || '').toLowerCase().indexOf(keyword.toLowerCase())
           !== -1
-        || (defaultSecondaryValue(n) || '')
+        || (getSecondaryRepresentative(n) || '')
           .toLowerCase()
           .indexOf(keyword.toLowerCase()) !== -1
         || (n.entity_type || '').toLowerCase().indexOf(keyword.toLowerCase())