[frontend] Reports

OpenCTI-Platform · Jan 20, 2024 · 22403c9 · 22403c9
1 parent f7506b4
commit 22403c9
Show file tree

Hide file tree

Showing 15 changed files with 486 additions and 964 deletions.
diff --git a/opencti-platform/opencti-front/src/components/ItemStatus.jsx b/opencti-platform/opencti-front/src/components/ItemStatus.jsx
@@ -28,13 +28,14 @@ const styles = () => ({
 });
 
 const ItemStatus = (props) => {
-  const { classes, t, status, variant, disabled } = props;
+  const { classes, t, status, variant, disabled, onClick } = props;
   const style = variant === 'inList' ? classes.chipInList : classes.chip;
   if (status && status.template) {
     return (
       <Chip
         classes={{ root: style }}
         variant="outlined"
+        onClick={onClick}
         label={status.template.name}
         style={{
           color: status.template.color,
@@ -55,6 +56,7 @@ const ItemStatus = (props) => {
 
 ItemStatus.propTypes = {
   classes: PropTypes.object.isRequired,
+  onClick: PropTypes.func,
   status: PropTypes.object,
   variant: PropTypes.string,
   t: PropTypes.func,

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTable.tsx
@@ -13,6 +13,7 @@ import useLocalStorage, { usePaginationLocalStorage } from '../../utils/hooks/us
 const DataTable = ({
   dataColumns,
   filterExportContext,
+  lineFragment,
   resolvePath,
   storageKey,
   initialValues,
@@ -24,6 +25,7 @@ const DataTable = ({
   availableRelationFilterTypes,
   preloadedPaginationProps,
   parametersWithPadding = false,
+  redirectionModeEnabled = false,
 }: DataTableProps) => {
   const memoizedHeaders = useRef<ReactNode>(null);
   const setMemoizedHeaders = useCallback((headers: ReactNode) => {
@@ -76,6 +78,8 @@ const DataTable = ({
         availableFilterKeys,
         paginationOptions,
         filterExportContext,
+        lineFragment,
+        redirectionModeEnabled,
       } as DataTableContextProps}
     >
       <div style={{ display: 'flex', marginTop: -10 }}>

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTableBody.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTableBody.tsx
@@ -3,12 +3,12 @@ import makeStyles from '@mui/styles/makeStyles';
 import { createStyles } from '@mui/styles';
 import usePreloadedPaginationFragment from '../../utils/hooks/usePreloadedPaginationFragment';
 import DataTableHeaders, { MemoizedTableHeaders } from './DataTableHeaders';
-import DataTableLines from './DataTableLines';
 import { DataTableContext } from './dataTableUtils';
 import { ColumnSizeVars, DataTableBodyProps } from './dataTableTypes';
 import type { Theme } from '../Theme';
 import useLocalStorage from '../../utils/hooks/useLocalStorage';
 import { isNotEmptyField } from '../../utils/utils';
+import DataTableLine, { DataTableLineDummy } from './DataTableLine';
 
 const SELECT_COLUMN_SIZE = 42;
 
@@ -109,10 +109,15 @@ const DataTableBody = ({
         style={{ ...columnSizeVars }}
       >
         {/* If we have perf issues we should find a way to memoize this */}
-        <DataTableLines
-          rows={resolvedData}
-          isLoading={isLoading}
-        />
+        {resolvedData.map((row: never) => {
+          return (
+            <DataTableLine
+              key={row.id}
+              row={row}
+            />
+          );
+        })}
+        {isLoading && Array(10).fill(0).map((_, idx) => (<DataTableLineDummy key={idx} />))}
       </div>
     </div>
   );

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTableFilters.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTableFilters.tsx
@@ -1,14 +1,23 @@
 import Filters from '@components/common/lists/Filters';
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import makeStyles from '@mui/styles/makeStyles';
 import Tooltip from '@mui/material/Tooltip';
-import { FileDownloadOutlined } from '@mui/icons-material';
+import { FileDownloadOutlined, SettingsOutlined } from '@mui/icons-material';
 import ToggleButton from '@mui/material/ToggleButton';
 import StixDomainObjectsExports from '@components/common/stix_domain_objects/StixDomainObjectsExports';
 import StixCoreRelationshipsExports from '@components/common/stix_core_relationships/StixCoreRelationshipsExports';
 import StixCoreObjectsExports from '@components/common/stix_core_objects/StixCoreObjectsExports';
 import StixCyberObservablesExports from '@components/observations/stix_cyber_observables/StixCyberObservablesExports';
 import { ToggleButtonGroup } from '@mui/material';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
 import FilterIconButton from '../FilterIconButton';
 import { useFormatter } from '../i18n';
 import { DataTableDisplayFiltersProps, DataTableFiltersProps } from './dataTableTypes';
@@ -19,6 +28,7 @@ import useEntityToggle from '../../utils/hooks/useEntityToggle';
 import Security from '../../utils/Security';
 import { KNOWLEDGE_KNGETEXPORT } from '../../utils/hooks/useGranted';
 import { ExportContext } from '../../utils/ExportContextProvider';
+import Transition from '../Transition';
 
 const useStyles = makeStyles(() => ({
   filterContainer: {
@@ -75,15 +85,18 @@ const DataTableFilters = ({
 }: DataTableFiltersProps) => {
   const { t_i18n } = useFormatter();
 
+  const [openSettings, setOpenSettings] = useState(false);
+
   const {
     paginationOptions,
     parametersWithPadding,
     storageKey,
     initialValues,
     currentView,
+    redirectionModeEnabled,
     filterExportContext: exportContext,
   } = useContext(DataTableContext);
-  const { helpers, viewStorage: { numberOfElements, openExports } } = usePaginationLocalStorage(storageKey, initialValues);
+  const { helpers, viewStorage: { numberOfElements, openExports, redirectionMode } } = usePaginationLocalStorage(storageKey, initialValues);
 
   const { selectedElements } = useEntityToggle(storageKey);
 
@@ -136,13 +149,24 @@ const DataTableFilters = ({
                 if (value && value === 'export') {
                   helpers.handleToggleExports();
                 } else if (value && value === 'settings') {
-                  // this.handleOpenSettings();
+                  setOpenSettings(true);
                 } else if (value && value !== 'export-csv') {
                   helpers.handleChangeView(value);
                 }
               }}
               style={{ margin: '0 0 0 5px' }}
             >
+              {redirectionModeEnabled && (
+                <ToggleButton
+                  size="small"
+                  value="settings"
+                  aria-label="settings"
+                >
+                  <Tooltip title={t_i18n('List settings')}>
+                    <SettingsOutlined fontSize="small" color="primary" />
+                  </Tooltip>
+                </ToggleButton>
+              )}
               {!exportDisabled && (
                 <ToggleButton value="export" aria-label="export">
                   <Tooltip title={t_i18n('Open export panel')}>
@@ -203,6 +227,45 @@ const DataTableFilters = ({
             />
           </Security>
       )}
+      {redirectionModeEnabled && (
+        <Dialog
+          open={openSettings}
+          PaperProps={{ elevation: 1 }}
+          TransitionComponent={Transition}
+          onClose={() => setOpenSettings(false)}
+          maxWidth="xs"
+          fullWidth
+        >
+          <DialogTitle>{t_i18n('List settings')}</DialogTitle>
+          <DialogContent>
+            <FormControl style={{ width: '100%' }}>
+              <InputLabel id="redirectionMode">
+                {t_i18n('Redirection mode')}
+              </InputLabel>
+              <Select
+                value={redirectionMode}
+                onChange={(event) => helpers.handleAddProperty('redirectionMode', event.target.value)}
+                fullWidth
+              >
+                <MenuItem value="overview">
+                  {t_i18n('Redirecting to the Overview section')}
+                </MenuItem>
+                <MenuItem value="knowledge">
+                  {t_i18n('Redirecting to the Knowledge section')}
+                </MenuItem>
+                <MenuItem value="content">
+                  {t_i18n('Redirecting to the Content section')}
+                </MenuItem>
+              </Select>
+            </FormControl>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={() => setOpenSettings(false)}>
+              {t_i18n('Close')}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      )}
     </ExportContext.Provider>
   );
 };

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTableLine.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTableLine.tsx
@@ -1,6 +1,5 @@
 import React, { useContext, useMemo } from 'react';
 import { useFragment } from 'react-relay';
-import { entitiesFragment } from '@components/data/entities/EntitiesStixDomainObjectLine';
 import Skeleton from '@mui/material/Skeleton';
 import Checkbox from '@mui/material/Checkbox';
 import IconButton from '@mui/material/IconButton';
@@ -70,17 +69,25 @@ const DataTableCell = ({
 
 const DataTableLine = ({ row }: DataTableLineProps) => {
   const classes = useStyles({});
-  const { effectiveColumns, storageKey } = useContext(DataTableContext);
-  const data = useFragment(entitiesFragment, row);
+
+  const { effectiveColumns, storageKey, lineFragment, initialValues } = useContext(DataTableContext);
   const {
     selectAll,
     deSelectedElements,
     selectedElements,
     onToggleEntity,
   } = useEntityToggle(storageKey);
+  const { viewStorage: { redirectionMode } } = usePaginationLocalStorage(storageKey, initialValues);
+
+  const data = useFragment(lineFragment, row);
 
   const navigate = useNavigate();
 
+  let link = `${resolveLink(data.entity_type)}/${data.id}`;
+  if (redirectionMode && redirectionMode !== 'overview') {
+    link = `${link}/${redirectionMode}`;
+  }
+
   return (
     <div
       key={row.id}
@@ -119,7 +126,7 @@ const DataTableLine = ({ row }: DataTableLineProps) => {
         }}
       >
         {effectiveColumns.at(-1)?.id === 'navigate' && (
-          <IconButton onClick={() => navigate(`${resolveLink(data.entity_type)}/${data.id}`)}>
+          <IconButton onClick={() => navigate(link)}>
             <KeyboardArrowRightOutlined />
           </IconButton>
         )}
@@ -131,14 +138,16 @@ const DataTableLine = ({ row }: DataTableLineProps) => {
 export const DataTableLineDummy = () => {
   const classes = useStyles({});
   const { effectiveColumns } = useContext(DataTableContext);
+
+  const defaultWidth = (window.innerWidth - 200) / effectiveColumns.length;
   const lines = useMemo(() => (
     <>
       {effectiveColumns.map((column) => (
         <Skeleton
           key={column.id}
           variant="text"
           height={50}
-          width={column?.size ? column.size - 20 : 100}
+          width={column?.size ? column.size - 20 : defaultWidth}
         />
       ))}
     </>

diff --git a/opencti-platform/opencti-front/src/components/dataGrid/DataTableLines.tsx b/opencti-platform/opencti-front/src/components/dataGrid/DataTableLines.tsx
diff --git a/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts b/opencti-platform/opencti-front/src/components/dataGrid/dataTableTypes.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { Dispatch, ReactNode, SetStateAction } from 'react';
+import { GraphQLTaggedNode } from 'react-relay';
 import type { LocalStorage } from '../../utils/hooks/useLocalStorageModel';
 import { UseLocalStorageHelpers } from '../../utils/hooks/useLocalStorage';
 import { FilterGroup } from '../../utils/filters/filtersUtils';
@@ -44,6 +45,8 @@ export interface DataTableContextProps {
   currentView?: string
   filterExportContext?: { entity_type?: string, entity_id?: string }
   paginationOptions: PaginationOptions
+  redirectionModeEnabled?: boolean
+  lineFragment: GraphQLTaggedNode | null
 }
 
 export interface DataTableProps {
@@ -56,10 +59,12 @@ export interface DataTableProps {
   searchContextFinal?: any
   availableFilterKeys: FilterIconButtonProps['availableFilterKeys']
   availableRelationFilterTypes?: FilterIconButtonProps['availableRelationFilterTypes']
-  availableEntityTypes: string[]
+  availableEntityTypes?: string[]
   availableRelationshipTypes?: string[]
   preloadedPaginationProps: UsePreloadedPaginationFragment<any>
   filterExportContext?: { entity_type?: string, entity_id?: string }
+  redirectionModeEnabled?: boolean
+  lineFragment: GraphQLTaggedNode
 }
 
 export interface DataTableBodyProps {
@@ -77,8 +82,6 @@ export type DataTableFiltersProps = Pick<DataTableProps, 'availableFilterKeys'
 | 'availableRelationshipTypes'
 | 'availableRelationFilterTypes'>;
 
-export type DataTableLinesProps = { rows: any[], isLoading: boolean };
-
 export interface DataTableLineProps {
   row: any
 }