[api/frontend] Enhance export everywhere (#123)

* [api/frontend] Enhance export everywhere * [api/client] Handle export of indicators in a specific entity
OpenCTI-Platform · Jan 24, 2020 · d328b8d · d328b8d
1 parent 002137d
commit d328b8d
Show file tree

Hide file tree

Showing 37 changed files with 779 additions and 250 deletions.
diff --git a/opencti-platform/opencti-front/src/components/list_lines/ListLines.js b/opencti-platform/opencti-front/src/components/list_lines/ListLines.js
@@ -23,18 +23,18 @@ import StixDomainEntitiesExports from '../../private/components/common/stix_doma
 
 const styles = (theme) => ({
   container: {
-    transition: theme.transitions.create('margin', {
+    transition: theme.transitions.create('padding', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
     }),
   },
   containerOpenExports: {
     flexGrow: 1,
-    transition: theme.transitions.create('margin', {
+    transition: theme.transitions.create('padding', {
       easing: theme.transitions.easing.easeOut,
       duration: theme.transitions.duration.enteringScreen,
     }),
-    marginRight: 310,
+    paddingRight: 310,
   },
   parameters: {
     float: 'left',
@@ -121,6 +121,7 @@ class ListLines extends Component {
       handleRemoveFilter,
       handleToggleExports,
       openExports,
+      noPadding,
       dataColumns,
       secondaryAction,
       paginationOptions,
@@ -134,7 +135,9 @@ class ListLines extends Component {
     return (
       <div
         className={
-          openExports ? classes.containerOpenExports : classes.container
+          openExports && !noPadding
+            ? classes.containerOpenExports
+            : classes.container
         }
       >
         <div className={classes.parameters}>
@@ -285,6 +288,7 @@ ListLines.propTypes = {
   handleRemoveFilter: PropTypes.func,
   handleToggleExports: PropTypes.func,
   openExports: PropTypes.bool,
+  noPadding: PropTypes.bool,
   views: PropTypes.array,
   exportEntityType: PropTypes.string,
   keyword: PropTypes.string,

diff --git a/opencti-platform/opencti-front/src/private/components/common/files/FileLine.js b/opencti-platform/opencti-front/src/private/components/common/files/FileLine.js
@@ -114,7 +114,7 @@ class FileLineComponent extends Component {
     const { lastModifiedSinceMin, uploadStatus } = file;
     const isFail = uploadStatus === 'error' || uploadStatus === 'partial';
     const isProgress = uploadStatus === 'progress';
-    const isOutdated = isProgress && lastModifiedSinceMin > 5;
+    const isOutdated = isProgress && lastModifiedSinceMin > 1;
     const isImportActive = () => connectors && filter((x) => x.data.active, connectors).length > 0;
     const fileName = propOr('', 'name', file).includes('_')
       ? pipe(split('_'), drop(1), join('_'))(file.name)
@@ -183,7 +183,6 @@ class FileLineComponent extends Component {
               <Tooltip title={t('Delete this file')}>
                 <span>
                   <IconButton
-                    disabled={isProgress}
                     color="secondary"
                     onClick={this.handleRemoveJob.bind(this, file.id)}
                   >

diff --git a/opencti-platform/opencti-front/src/private/components/common/stix_object/StixObjectTags.js b/opencti-platform/opencti-front/src/private/components/common/stix_object/StixObjectTags.js
@@ -68,7 +68,7 @@ class StixObjectTags extends Component {
                       tagEdge.node.id,
                       tagEdge.node.value,
                     )
-                    : ''
+                    : null
                 }
               />
             ),
@@ -82,7 +82,7 @@ class StixObjectTags extends Component {
             onClick={
               typeof onClick === 'function'
                 ? onClick.bind(this, 'tags', null, null)
-                : ''
+                : null
             }
           />
         )}
@@ -99,7 +99,4 @@ StixObjectTags.propTypes = {
   tags: PropTypes.object,
 };
 
-export default compose(
-  inject18n,
-  withStyles(styles),
-)(StixObjectTags);
+export default compose(inject18n, withStyles(styles))(StixObjectTags);
diff --git a/opencti-platform/opencti-front/src/private/components/entities/cities/CityReports.js b/opencti-platform/opencti-front/src/private/components/entities/cities/CityReports.js
@@ -10,9 +10,20 @@ import CityPopover from './CityPopover';
 import Reports from '../../reports/Reports';
 import StixDomainEntityHeader from '../../common/stix_domain_entities/StixDomainEntityHeader';
 
-const styles = () => ({
+const styles = (theme) => ({
   container: {
-    margin: 0,
+    transition: theme.transitions.create('padding', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  containerWithPadding: {
+    flexGrow: 1,
+    transition: theme.transitions.create('padding', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    paddingRight: 310,
   },
   paper: {
     height: '100%',
@@ -24,16 +35,30 @@ const styles = () => ({
 });
 
 class CityReportsComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { withPadding: false };
+  }
+
   render() {
+    const { withPadding } = this.state;
     const { classes, city } = this.props;
     return (
-      <div className={classes.container}>
+      <div
+        className={
+          withPadding ? classes.containerWithPadding : classes.container
+        }
+      >
         <StixDomainEntityHeader
           stixDomainEntity={city}
           PopoverComponent={<CityPopover />}
         />
         <Paper classes={{ root: classes.paper }} elevation={2}>
-          <Reports objectId={city.id} />
+          <Reports
+            objectId={city.id}
+            onChangeOpenExports={(openExports) => this.setState({ withPadding: openExports })
+            }
+          />
         </Paper>
       </div>
     );
@@ -56,7 +81,4 @@ const CityReports = createFragmentContainer(CityReportsComponent, {
   `,
 });
 
-export default compose(
-  inject18n,
-  withStyles(styles),
-)(CityReports);
+export default compose(inject18n, withStyles(styles))(CityReports);
diff --git a/opencti-platform/opencti-front/src/private/components/entities/countries/CountryReports.js b/opencti-platform/opencti-front/src/private/components/entities/countries/CountryReports.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import { compose } from 'ramda';
 import { createFragmentContainer } from 'react-relay';
 import graphql from 'babel-plugin-relay/macro';
@@ -10,9 +10,20 @@ import CountryPopover from './CountryPopover';
 import Reports from '../../reports/Reports';
 import StixDomainEntityHeader from '../../common/stix_domain_entities/StixDomainEntityHeader';
 
-const styles = () => ({
+const styles = (theme) => ({
   container: {
-    margin: 0,
+    transition: theme.transitions.create('padding', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  containerWithPadding: {
+    flexGrow: 1,
+    transition: theme.transitions.create('padding', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    paddingRight: 310,
   },
   paper: {
     height: '100%',
@@ -24,16 +35,30 @@ const styles = () => ({
 });
 
 class CountryReportsComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { withPadding: false };
+  }
+
   render() {
+    const { withPadding } = this.state;
     const { classes, country } = this.props;
     return (
-      <div className={classes.container}>
+      <div
+        className={
+          withPadding ? classes.containerWithPadding : classes.container
+        }
+      >
         <StixDomainEntityHeader
           stixDomainEntity={country}
           PopoverComponent={<CountryPopover />}
         />
         <Paper classes={{ root: classes.paper }} elevation={2}>
-          <Reports objectId={country.id} />
+          <Reports
+            objectId={country.id}
+            onChangeOpenExports={(openExports) => this.setState({ withPadding: openExports })
+            }
+          />
         </Paper>
       </div>
     );
@@ -56,7 +81,4 @@ const CountryReports = createFragmentContainer(CountryReportsComponent, {
   `,
 });
 
-export default compose(
-  inject18n,
-  withStyles(styles),
-)(CountryReports);
+export default compose(inject18n, withStyles(styles))(CountryReports);
diff --git a/...atform/opencti-front/src/private/components/entities/organizations/OrganizationReports.js b/...atform/opencti-front/src/private/components/entities/organizations/OrganizationReports.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import { compose, contains } from 'ramda';
 import { createFragmentContainer } from 'react-relay';
 import graphql from 'babel-plugin-relay/macro';
@@ -10,9 +10,20 @@ import OrganizationPopover from './OrganizationPopover';
 import Reports from '../../reports/Reports';
 import StixDomainEntityHeader from '../../common/stix_domain_entities/StixDomainEntityHeader';
 
-const styles = () => ({
+const styles = (theme) => ({
   container: {
-    margin: 0,
+    transition: theme.transitions.create('padding', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  containerWithPadding: {
+    flexGrow: 1,
+    transition: theme.transitions.create('padding', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    paddingRight: 310,
   },
   paper: {
     height: '100%',
@@ -26,31 +37,53 @@ const styles = () => ({
 const organizationTypesForAuthorMode = ['vendor', 'csirt', 'partner'];
 
 class OrganizationReportsComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { withPadding: false };
+  }
+
   render() {
+    const { withPadding } = this.state;
     const { classes, organization } = this.props;
     if (
       contains(organization.organization_class, organizationTypesForAuthorMode)
     ) {
       return (
-        <div className={classes.container}>
+        <div
+          className={
+            withPadding ? classes.containerWithPadding : classes.container
+          }
+        >
           <StixDomainEntityHeader
             stixDomainEntity={organization}
             PopoverComponent={<OrganizationPopover />}
           />
           <Paper classes={{ root: classes.paper }} elevation={2}>
-            <Reports authorId={organization.id} />
+            <Reports
+              authorId={organization.id}
+              onChangeOpenExports={(openExports) => this.setState({ withPadding: openExports })
+              }
+            />
           </Paper>
         </div>
       );
     }
     return (
-      <div className={classes.container}>
+      <div
+        className={
+          withPadding ? classes.containerWithPadding : classes.container
+        }
+      >
         <StixDomainEntityHeader
           stixDomainEntity={organization}
           PopoverComponent={<OrganizationPopover />}
         />
         <Paper classes={{ root: classes.paper }} elevation={2}>
-          <Reports objectId={organization.id} />
+          <Reports
+            objectId={organization.id}
+            onChangeOpenExports={(openExports) => this.setState({ withPadding: openExports })
+            }
+          />
         </Paper>
       </div>
     );
@@ -77,7 +110,4 @@ const OrganizationReports = createFragmentContainer(
   },
 );
 
-export default compose(
-  inject18n,
-  withStyles(styles),
-)(OrganizationReports);
+export default compose(inject18n, withStyles(styles))(OrganizationReports);
diff --git a/opencti-platform/opencti-front/src/private/components/entities/persons/PersonReports.js b/opencti-platform/opencti-front/src/private/components/entities/persons/PersonReports.js
@@ -10,9 +10,20 @@ import PersonPopover from './PersonPopover';
 import Reports from '../../reports/Reports';
 import StixDomainEntityHeader from '../../common/stix_domain_entities/StixDomainEntityHeader';
 
-const styles = () => ({
+const styles = (theme) => ({
   container: {
-    margin: 0,
+    transition: theme.transitions.create('padding', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  containerWithPadding: {
+    flexGrow: 1,
+    transition: theme.transitions.create('padding', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    paddingRight: 310,
   },
   paper: {
     height: '100%',
@@ -24,16 +35,30 @@ const styles = () => ({
 });
 
 class PersonReportsComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { withPadding: false };
+  }
+
   render() {
+    const { withPadding } = this.state;
     const { classes, person } = this.props;
     return (
-      <div className={classes.container}>
+      <div
+        className={
+          withPadding ? classes.containerWithPadding : classes.container
+        }
+      >
         <StixDomainEntityHeader
           stixDomainEntity={person}
           PopoverComponent={<PersonPopover />}
         />
         <Paper classes={{ root: classes.paper }} elevation={2}>
-          <Reports objectId={person.id} />
+          <Reports
+            objectId={person.id}
+            onChangeOpenExports={(openExports) => this.setState({ withPadding: openExports })
+            }
+          />
         </Paper>
       </div>
     );
@@ -56,7 +81,4 @@ const PersonReports = createFragmentContainer(PersonReportsComponent, {
   `,
 });
 
-export default compose(
-  inject18n,
-  withStyles(styles),
-)(PersonReports);
+export default compose(inject18n, withStyles(styles))(PersonReports);