[backend/frontend] Introduce user analytics tabs and start tabs layout (

#2510)
OpenCTI-Platform · Nov 19, 2023 · dab1429 · dab1429
1 parent d975d20
commit dab1429
Show file tree

Hide file tree

Showing 46 changed files with 882 additions and 846 deletions.
diff --git a/opencti-platform/opencti-front/src/private/components/arsenal/malwares/Root.jsx b/opencti-platform/opencti-front/src/private/components/arsenal/malwares/Root.jsx
@@ -85,7 +85,7 @@ class RootMalware extends Component {
     } = this.props;
     const link = `/dashboard/arsenal/malwares/${malwareId}/knowledge`;
     return (
-      <div>
+      <>
         <Route path="/dashboard/arsenal/malwares/:malwareId/knowledge">
           <StixCoreObjectKnowledgeBar
             stixCoreObjectLink={link}
@@ -118,10 +118,7 @@ class RootMalware extends Component {
                       exact
                       path="/dashboard/arsenal/malwares/:malwareId"
                       render={(routeProps) => (
-                        <Malware
-                          {...routeProps}
-                          malware={props.malware}
-                        />
+                        <Malware {...routeProps} malware={props.malware} />
                       )}
                     />
                     <Route
@@ -148,7 +145,7 @@ class RootMalware extends Component {
                       render={(routeProps) => (
                         <React.Fragment>
                           <StixDomainObjectHeader
-                            entityType={'Malware'}
+                            entityType="Malware"
                             stixDomainObject={props.malware}
                             PopoverComponent={<MalwarePopover />}
                           />
@@ -167,7 +164,7 @@ class RootMalware extends Component {
                       render={(routeProps) => (
                         <React.Fragment>
                           <StixDomainObjectHeader
-                            entityType={'Malware'}
+                            entityType="Malware"
                             stixDomainObject={props.malware}
                             PopoverComponent={<MalwarePopover />}
                           />
@@ -187,7 +184,7 @@ class RootMalware extends Component {
                       render={(routeProps) => (
                         <React.Fragment>
                           <StixDomainObjectHeader
-                            entityType={'Malware'}
+                            entityType="Malware"
                             stixDomainObject={props.malware}
                             PopoverComponent={<MalwarePopover />}
                           />
@@ -206,7 +203,7 @@ class RootMalware extends Component {
             return <Loader />;
           }}
         />
-      </div>
+      </>
     );
   }
 }

diff --git a/opencti-platform/opencti-front/src/private/components/common/audits/AuditsHorizontalBars.jsx b/opencti-platform/opencti-front/src/private/components/common/audits/AuditsHorizontalBars.jsx
@@ -213,16 +213,20 @@ const auditsHorizontalBarsDistributionQuery = graphql`
         ... on Group {
           name
         }
+        ... on Workspace {
+          name
+          type
+        }
       }
     }
   }
 `;
 
 const AuditsHorizontalBars = ({
-  variant,
+  variant = null,
   height,
-  startDate,
-  endDate,
+  startDate = null,
+  endDate = null,
   dataSelection,
   parameters = {},
   withExportPopover = false,
@@ -311,7 +315,10 @@ const AuditsHorizontalBars = ({
               || selection.attribute.endsWith('_ids')
               ? props.auditsDistribution.map((n) => ({
                 id: n.entity.id,
-                entity_type: n.entity.entity_type,
+                entity_type:
+                      n.entity.entity_type === 'Workspace'
+                        ? n.entity.type
+                        : n.entity.entity_type,
               }))
               : null;
             return (

diff --git a/opencti-platform/opencti-front/src/private/components/common/audits/AuditsList.jsx b/opencti-platform/opencti-front/src/private/components/common/audits/AuditsList.jsx
@@ -96,6 +96,7 @@ const auditsListQuery = graphql`
             name
           }
           context_data {
+            id
             entity_type
             entity_name
             message
@@ -107,10 +108,10 @@ const auditsListQuery = graphql`
 `;
 
 const AuditsList = ({
-  variant,
+  variant = null,
   height,
-  startDate,
-  endDate,
+  startDate = null,
+  endDate = null,
   dataSelection,
   parameters = {},
 }) => {
@@ -192,15 +193,22 @@ const AuditsList = ({
                         ? `for \`${audit.context_data?.entity_name}\` (${audit.context_data?.entity_type})`
                         : ''
                     }`;
+                    const link = audit.context_data?.entity_type
+                      ? `${resolveLink(
+                        audit.context_data?.entity_type === 'Workspace'
+                          ? audit.context_data?.workspace_type
+                          : audit.context_data?.entity_type,
+                      )}/${audit.context_data?.id}`
+                      : undefined;
                     return (
                       <ListItem
                         key={audit.id}
                         dense={true}
                         button={true}
                         classes={{ root: classes.item }}
                         divider={true}
-                        component={Link}
-                        to={`${resolveLink(audit.entity_type)}/${audit.id}`}
+                        component={link ? Link : undefined}
+                        to={link}
                       >
                         <ListItemIcon>
                           <ItemIcon
@@ -224,21 +232,22 @@ const AuditsList = ({
                               </div>
                               <div
                                 className={classes.bodyItem}
-                                style={{ width: '15%' }}
+                                style={{ width: '18%' }}
                               >
                                 {audit.user?.name ?? '-'}
                               </div>
                               <div
                                 className={classes.bodyItem}
-                                style={{ width: '12%' }}
+                                style={{ width: '15%' }}
                               >
-                                {audit.event_type}
+                                {audit.event_scope}
                               </div>
                               <div
                                 className={classes.bodyItem}
-                                style={{ width: '12%' }}
+                                style={{ width: '22%' }}
                               >
-                                {audit.event_scope}
+                                {audit.context_data?.entity_name
+                                  ?? audit.event_type}
                               </div>
                               <div
                                 className={classes.bodyItem}

diff --git a/opencti-platform/opencti-front/src/private/components/common/audits/AuditsMultiAreaChart.jsx b/opencti-platform/opencti-front/src/private/components/common/audits/AuditsMultiAreaChart.jsx
@@ -67,8 +67,8 @@ const auditsMultiAreaChartTimeSeriesQuery = graphql`
 const AuditsMultiAreaChart = ({
   variant,
   height,
-  startDate,
-  endDate,
+  startDate = null,
+  endDate = null,
   dataSelection,
   parameters = {},
   withExportPopover = false,

diff --git a/opencti-platform/opencti-front/src/private/components/common/audits/AuditsMultiLineChart.jsx b/opencti-platform/opencti-front/src/private/components/common/audits/AuditsMultiLineChart.jsx
@@ -65,10 +65,10 @@ const auditsMultiLineChartTimeSeriesQuery = graphql`
 `;
 
 const AuditsMultiLineChart = ({
-  variant,
+  variant = null,
   height,
-  startDate,
-  endDate,
+  startDate = null,
+  endDate = null,
   dataSelection,
   parameters = {},
   withExportPopover = false,

diff --git a/...i-platform/opencti-front/src/private/components/common/audits/AuditsMultiVerticalBars.jsx b/...i-platform/opencti-front/src/private/components/common/audits/AuditsMultiVerticalBars.jsx
@@ -65,10 +65,10 @@ const auditsMultiVerticalBarsTimeSeriesQuery = graphql`
 `;
 
 const AuditsMultiVerticalBars = ({
-  variant,
+  variant = null,
   height,
-  startDate,
-  endDate,
+  startDate = null,
+  endDate = null,
   dataSelection,
   parameters = {},
   withExportPopover = false,

diff --git a/opencti-platform/opencti-front/src/private/components/common/audits/AuditsRadar.jsx b/opencti-platform/opencti-front/src/private/components/common/audits/AuditsRadar.jsx
@@ -26,7 +26,6 @@ import { QueryRenderer } from '../../../../relay/environment';
 import { useFormatter } from '../../../../components/i18n';
 import { radarChartOptions } from '../../../../utils/Charts';
 import { convertFilters } from '../../../../utils/ListParameters';
-import { truncate } from '../../../../utils/String';
 import useGranted, { SETTINGS } from '../../../../utils/hooks/useGranted';
 import useEnterpriseEdition from '../../../../utils/hooks/useEnterpriseEdition';
 import { defaultValue } from '../../../../utils/Graph';
@@ -196,10 +195,10 @@ const auditsRadarDistributionQuery = graphql`
 `;
 
 const AuditsRadar = ({
-  variant,
+  variant = null,
   height,
-  startDate,
-  endDate,
+  startDate = null,
+  endDate = null,
   dataSelection,
   parameters = {},
   withExportPopover = false,
@@ -258,31 +257,32 @@ const AuditsRadar = ({
             && props.auditsDistribution
             && props.auditsDistribution.length > 0
           ) {
-            const data = props.auditsDistribution.map((n) => n.value);
+            let data = props.auditsDistribution;
+            if (
+              selection.attribute.endsWith('.id')
+              || selection.attribute.endsWith('_id')
+              || selection.attribute.endsWith('_ids')
+            ) {
+              data = R.map(
+                (n) => R.assoc('label', defaultValue(n.entity), n),
+                props.auditsDistribution,
+              );
+            }
+            const valueData = data.map((n) => n.value);
             const chartData = [
               {
                 name: selection.label || t('Number of history entries'),
-                data,
+                data: valueData,
               },
             ];
-            const labels = props.auditsDistribution.map((n) => truncate(
-              // eslint-disable-next-line no-nested-ternary
-              selection.attribute.endsWith('.id')
-                  || selection.attribute.endsWith('_id')
-                  || selection.attribute.endsWith('_ids')
-                ? defaultValue(n.entity)
-                : selection.attribute === 'entity_type'
-                  ? t(`entity_${n.label}`)
-                  : n.label,
-              20,
-            ));
+            const labels = data.map((n) => n.label);
             return (
               <Chart
                 options={radarChartOptions(theme, labels, [], true, false)}
                 series={chartData}
                 type="radar"
                 width="100%"
-                height="100%"
+                height="120%"
                 withExportPopover={withExportPopover}
                 isReadOnly={isReadOnly}
               />

diff --git a/opencti-platform/opencti-front/src/private/components/common/form/CreatorField.tsx b/opencti-platform/opencti-front/src/private/components/common/form/CreatorField.tsx
@@ -106,7 +106,7 @@ const CreatorField: FunctionComponent<CreatorFieldProps> = ({
         ) => (
           <li {...props}>
             <div className={classes.icon} style={{ color: option.color }}>
-              <ItemIcon type="User" />
+              <ItemIcon type="UserOverview" />
             </div>
             <div className={classes.text}>{option.label}</div>
           </li>

diff --git a/...rm/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectsRadar.jsx b/...rm/opencti-front/src/private/components/common/stix_core_objects/StixCoreObjectsRadar.jsx
@@ -270,7 +270,7 @@ const StixCoreObjectsRadar = ({
                 series={chartData}
                 type="radar"
                 width="100%"
-                height="100%"
+                height="120%"
                 withExportPopover={withExportPopover}
                 isReadOnly={isReadOnly}
               />

diff --git a/...ront/src/private/components/common/stix_domain_objects/StixDomainObjectAttackPatterns.jsx b/...ront/src/private/components/common/stix_domain_objects/StixDomainObjectAttackPatterns.jsx
@@ -22,10 +22,10 @@ const StixDomainObjectAttackPatterns = ({
   defaultStartTime,
   defaultStopTime,
   disableExport,
+  tabMode,
 }) => {
   const LOCAL_STORAGE_KEY = `view-attack-patterns-${stixDomainObjectId}`;
   const classes = useStyles();
-
   const {
     viewStorage,
     helpers,
@@ -71,6 +71,7 @@ const StixDomainObjectAttackPatterns = ({
                   disableExport ? null : helpers.handleToggleExports
                 }
                 openExports={openExports}
+                tabMode={tabMode}
               />
             );
           }