)}
-
+
);
};
diff --git a/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableEntities.jsx b/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableEntities.jsx
deleted file mode 100644
index ea953d5a5c5d..000000000000
--- a/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableEntities.jsx
+++ /dev/null
@@ -1,307 +0,0 @@
-import React, { Component } from 'react';
-import * as PropTypes from 'prop-types';
-import { compose } from 'ramda';
-import withStyles from '@mui/styles/withStyles';
-import Typography from '@mui/material/Typography';
-import Paper from '@mui/material/Paper';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import ListItemText from '@mui/material/ListItemText';
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
-import { ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
-import { QueryRenderer } from '../../../../relay/environment';
-import inject18n from '../../../../components/i18n';
-import StixCyberObservableEntitiesLines, { stixCyberObservableEntitiesLinesQuery } from './StixCyberObservableEntitiesLines';
-import StixCoreRelationshipCreationFromEntity from '../../common/stix_core_relationships/StixCoreRelationshipCreationFromEntity';
-import Security from '../../../../utils/Security';
-import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
-import SearchInput from '../../../../components/SearchInput';
-
-const styles = (theme) => ({
- paper: {
- margin: 0,
- padding: 15,
- borderRadius: 4,
- },
- item: {
- paddingLeft: 10,
- height: 50,
- },
- itemIcon: {
- color: theme.palette.primary.main,
- },
- itemHead: {
- paddingLeft: 10,
- textTransform: 'uppercase',
- },
- bodyItem: {
- height: 20,
- fontSize: 13,
- float: 'left',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- paddingRight: 10,
- },
- goIcon: {
- position: 'absolute',
- right: -10,
- },
- itemIconDisabled: {
- color: theme.palette.grey[700],
- },
- placeholder: {
- display: 'inline-block',
- height: '1em',
- backgroundColor: theme.palette.grey[700],
- },
-});
-
-const inlineStylesHeaders = {
- iconSort: {
- position: 'absolute',
- margin: '0 0 0 5px',
- padding: 0,
- top: '0px',
- },
- relationship_type: {
- float: 'left',
- width: '10%',
- fontSize: 12,
- fontWeight: '700',
- cursor: 'pointer',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- paddingRight: 10,
- },
- entity_tyoe: {
- float: 'left',
- width: '10%',
- fontSize: 12,
- fontWeight: '700',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- paddingRight: 10,
- },
- name: {
- float: 'left',
- width: '22%',
- fontSize: 12,
- fontWeight: '700',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- paddingRight: 10,
- },
- createdBy: {
- float: 'left',
- width: '12%',
- fontSize: 12,
- fontWeight: '700',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- paddingRight: 10,
- },
- creator: {
- float: 'left',
- width: '12%',
- fontSize: 12,
- fontWeight: '700',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- paddingRight: 10,
- },
- start_time: {
- float: 'left',
- width: '10%',
- fontSize: 12,
- fontWeight: '700',
- cursor: 'pointer',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- paddingRight: 10,
- },
- stop_time: {
- float: 'left',
- width: '10%',
- fontSize: 12,
- fontWeight: '700',
- cursor: 'pointer',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- paddingRight: 10,
- },
- confidence: {
- float: 'left',
- width: '12%',
- fontSize: 12,
- fontWeight: '700',
- cursor: 'pointer',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- paddingRight: 10,
- },
-};
-
-class StixCyberObservableEntities extends Component {
- constructor(props) {
- super(props);
- this.state = {
- sortBy: null,
- orderAsc: false,
- searchTerm: '',
- view: 'lines',
- relationReversed: false,
- };
- }
-
- handleReverseRelation() {
- this.setState({ relationReversed: !this.state.relationReversed });
- }
-
- handleSort(field, orderAsc) {
- this.setState({ sortBy: field, orderAsc });
- }
-
- handleSearch(value) {
- this.setState({ searchTerm: value });
- }
-
- SortHeader(field, label, isSortable) {
- const { t } = this.props;
- const sortComponent = this.state.orderAsc ? (
-
- ) : (
-
- );
- if (isSortable) {
- return (
-
- {t(label)}
- {this.state.sortBy === field ? sortComponent : ''}
-
- );
- }
- return (
-
- {t(label)}
-
- );
- }
-
- render() {
- const { sortBy, orderAsc, searchTerm, relationReversed } = this.state;
- const { classes, t, entityId, defaultStartTime, defaultStopTime } = this.props;
- const paginationOptions = {
- fromOrToId: entityId,
- search: searchTerm,
- orderBy: sortBy,
- orderMode: orderAsc ? 'asc' : 'desc',
- };
- return (
-
-
- {t('Relations')}
-
-
}
- >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {this.SortHeader('relationship_type', 'Relationship', true)}
- {this.SortHeader('entity_tyoe', 'Entity type', false)}
- {this.SortHeader('name', 'Name', false)}
- {this.SortHeader('createdBy', 'Author', false)}
- {this.SortHeader('creator', 'Creator', false)}
- {this.SortHeader('start_time', 'First obs.', true)}
- {this.SortHeader('stop_time', 'Last obs.', true)}
- {this.SortHeader('confidence', 'Confidence level', true)}
-
- }
- />
-
-
-
(
-
- )}
- />
-
-
-
- );
- }
-}
-
-StixCyberObservableEntities.propTypes = {
- entityId: PropTypes.string,
- relationship_type: PropTypes.string,
- classes: PropTypes.object,
- t: PropTypes.func,
- navigate: PropTypes.func,
- defaultStartTime: PropTypes.string,
- defaultStopTime: PropTypes.string,
-};
-
-export default compose(
- inject18n,
- withStyles(styles),
-)(StixCyberObservableEntities);
diff --git a/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableEntities.tsx b/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableEntities.tsx
new file mode 100644
index 000000000000..3df091683d54
--- /dev/null
+++ b/opencti-platform/opencti-front/src/private/components/observations/stix_cyber_observables/StixCyberObservableEntities.tsx
@@ -0,0 +1,212 @@
+import React, { FunctionComponent, useContext, useEffect, useState } from 'react';
+import { Add, ArrowDropDown, ArrowDropUp } from '@mui/icons-material';
+import { IconButton, List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, Paper, Typography } from '@mui/material';
+import { useFormatter } from '../../../../components/i18n';
+import { CreateRelationshipContext } from '../../common/menus/CreateRelationshipContextProvider';
+import useHelper from '../../../../utils/hooks/useHelper';
+import Security from '../../../../utils/Security';
+import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
+import StixCoreRelationshipCreationFromControlledDial from '../../common/stix_core_relationships/StixCoreRelationshipCreationFromControlledDial';
+import StixCoreRelationshipCreationFromEntity from '../../common/stix_core_relationships/StixCoreRelationshipCreationFromEntity';
+import SearchInput from '../../../../components/SearchInput';
+import { QueryRenderer } from '../../../../relay/environment';
+import StixCyberObservableEntitiesLines, { stixCyberObservableEntitiesLinesQuery } from './StixCyberObservableEntitiesLines';
+import { StixCyberObservableEntitiesLinesPaginationQuery$data } from './__generated__/StixCyberObservableEntitiesLinesPaginationQuery.graphql';
+
+interface StixCyberObservableEntitiesProps {
+ entityId: string;
+ defaultStartTime: string;
+ defaultStopTime: string;
+}
+
+const StixCyberObservableEntities: FunctionComponent