From dea6db9ad13b55905c9240c2d2727e436adea568 Mon Sep 17 00:00:00 2001
From: Samuel Hassine <samuel@hassine.fr>
Date: Sun, 23 Feb 2020 22:35:36 +0100
Subject: [PATCH] [frontend] Display external reference of observables

---
 .../EntityExternalReferencesLines.js          | 23 ++++++++-----------
 .../stix_observables/StixObservable.js        | 15 +++++++++++-
 .../StixObservableIndicators.js               |  4 ++--
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/opencti-platform/opencti-front/src/private/components/common/external_references/EntityExternalReferencesLines.js b/opencti-platform/opencti-front/src/private/components/common/external_references/EntityExternalReferencesLines.js
index 2e8c78e7d48b..65ee3e14f9a8 100644
--- a/opencti-platform/opencti-front/src/private/components/common/external_references/EntityExternalReferencesLines.js
+++ b/opencti-platform/opencti-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/opencti-platform/opencti-front/src/private/components/signatures/stix_observables/StixObservable.js b/opencti-platform/opencti-front/src/private/components/signatures/stix_observables/StixObservable.js
index ef2921bfa30f..fc17ae2e2856 100644
--- a/opencti-platform/opencti-front/src/private/components/signatures/stix_observables/StixObservable.js
+++ b/opencti-platform/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/opencti-platform/opencti-front/src/private/components/signatures/stix_observables/StixObservableIndicators.js b/opencti-platform/opencti-front/src/private/components/signatures/stix_observables/StixObservableIndicators.js
index 4532dd50a8f2..15d0267ebb13 100644
--- a/opencti-platform/opencti-front/src/private/components/signatures/stix_observables/StixObservableIndicators.js
+++ b/opencti-platform/opencti-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>