[frontend] Display external reference of observables

OpenCTI-Platform · Feb 23, 2020 · dea6db9 · dea6db9
1 parent f0e9d6f
commit dea6db9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 17 deletions.
diff --git a/...-front/src/private/components/common/external_references/EntityExternalReferencesLines.js b/...-front/src/private/components/common/external_references/EntityExternalReferencesLines.js
@@ -15,12 +15,12 @@ import IconButton from '@material-ui/core/IconButton';
 import Button from '@material-ui/core/Button';
 import Avatar from '@material-ui/core/Avatar';
 import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogActions from '@material-ui/core/DialogActions';
 import { LinkOff } from '@material-ui/icons';
 import { compose } from 'ramda';
+import Slide from '@material-ui/core/Slide';
 import inject18n from '../../../../components/i18n';
 import { truncate } from '../../../../utils/String';
 import { commitMutation } from '../../../../relay/environment';
@@ -52,6 +52,11 @@ const styles = (theme) => ({
   },
 });
 
+const Transition = React.forwardRef((props, ref) => (
+  <Slide direction="up" ref={ref} {...props} />
+));
+Transition.displayName = 'TransitionSlide';
+
 class EntityExternalReferencesLinesContainer extends Component {
   constructor(props) {
     super(props);
@@ -204,20 +209,10 @@ class EntityExternalReferencesLinesContainer extends Component {
         <Dialog
           open={this.state.displayDialog}
           keepMounted={true}
+          TransitionComponent={Transition}
           onClose={this.handleCloseDialog.bind(this)}
         >
-          <DialogTitle>{t('Confirmation required')}</DialogTitle>
           <DialogContent>
-            {this.state.removeExternalReference != null && (
-              <DialogContentText>
-                {t('Removing')} '
-                {truncate(
-                  this.state.removeExternalReference.node.source_name,
-                  30,
-                )}
-                '.
-              </DialogContentText>
-            )}
             <DialogContentText>
               {t('Do you want to remove this external reference?')}
             </DialogContentText>
@@ -228,14 +223,14 @@ class EntityExternalReferencesLinesContainer extends Component {
               color="primary"
               disabled={this.state.removing}
             >
-              {t('No')}
+              {t('Cancel')}
             </Button>
             <Button
               onClick={this.handleRemoval.bind(this)}
               color="primary"
               disabled={this.state.removing}
             >
-              {t('Yes')}
+              {t('Delete')}
             </Button>
           </DialogActions>
         </Dialog>

diff --git a/...atform/opencti-front/src/private/components/signatures/stix_observables/StixObservable.js b/...atform/opencti-front/src/private/components/signatures/stix_observables/StixObservable.js
@@ -13,6 +13,7 @@ import StixObservableEdition from './StixObservableEdition';
 import EntityLastReports from '../../reports/EntityLastReports';
 import StixObservableIndicators from './StixObservableIndicators';
 import Security, { KNOWLEDGE_KNUPDATE } from '../../../../utils/Security';
+import EntityExternalReferences from '../../common/external_references/EntityExternalReferences';
 
 const styles = () => ({
   container: {
@@ -44,7 +45,19 @@ class StixObservableComponent extends Component {
             <EntityLastReports stixObservableId={stixObservable.id} />
           </Grid>
         </Grid>
-        <StixObservableIndicators stixObservable={stixObservable} />
+        <Grid
+          container={true}
+          spacing={3}
+          classes={{ container: classes.gridContainer }}
+          style={{ marginTop: 30 }}
+        >
+          <Grid item={true} xs={8}>
+            <StixObservableIndicators stixObservable={stixObservable} />
+          </Grid>
+          <Grid item={true} xs={4}>
+            <EntityExternalReferences entityId={stixObservable.id} />
+          </Grid>
+        </Grid>
         <Security needs={[KNOWLEDGE_KNUPDATE]}>
           <StixObservableEdition stixObservableId={stixObservable.id} />
         </Security>

diff --git a/...ncti-front/src/private/components/signatures/stix_observables/StixObservableIndicators.js b/...ncti-front/src/private/components/signatures/stix_observables/StixObservableIndicators.js
@@ -27,7 +27,7 @@ const styles = (theme) => ({
   paper: {
     height: '100%',
     minHeight: '100%',
-    margin: '10px 0 0 0',
+    margin: '6px 0 0 0',
     padding: '15px 15px 15px 15px',
     borderRadius: 6,
   },
@@ -188,7 +188,7 @@ class StixObservableIndicatorsComponent extends Component {
     );
     const sortedIndicators = sort(indicators);
     return (
-      <div style={{ marginTop: 40 }}>
+      <div style={{ height: '100%' }}>
         <Typography variant="h4" gutterBottom={true} style={{ float: 'left' }}>
           {t('Indicators composed with this observable')}
         </Typography>