[frontend/api] Handling a global tagging system with filters and colo…

…rs picker (#229) * [frontend/api] Introduce tagging & filtering * [frontend/api] Implement tagging in all threats entities (#229) * [frontend/api] Implement tagging on techniques, persons and organizatirons * [frontend/api] Handle and display marking definitions of relations (#37)
OpenCTI-Platform · Oct 15, 2019 · 2894635 · 2894635
1 parent 17761e2
commit 2894635
Show file tree

Hide file tree

Showing 199 changed files with 10,244 additions and 4,618 deletions.
diff --git a/opencti-platform/entrypoint.sh b/opencti-platform/entrypoint.sh
@@ -4,4 +4,4 @@
 cd /opt/opencti
 
 # Start
-node dist/server.js
+node --max_old_space_size=8192 dist/server.js
diff --git a/opencti-platform/opencti-front/package.json b/opencti-platform/opencti-front/package.json
@@ -1,80 +1,81 @@
 {
   "name": "opencti-front",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "author": "Luatix",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
-    "@date-io/moment": "^1.3.8",
-    "@material-ui/core": "^4.2.0",
-    "@material-ui/icons": "^4.2.1",
-    "@material-ui/lab": "^4.0.0-alpha.19",
-    "@material-ui/pickers": "^3.1.2",
-    "apollo-link": "^1.2.12",
-    "apollo-link-ws": "^1.0.18",
-    "babel-plugin-relay": "^5.0.0",
+    "@date-io/moment": "^1.3.6",
+    "@material-ui/core": "^4.5.0",
+    "@material-ui/icons": "^4.4.3",
+    "@material-ui/lab": "^4.0.0-alpha.28",
+    "@material-ui/pickers": "^3.2.6",
+    "apollo-link": "^1.2.13",
+    "apollo-link-ws": "^1.0.19",
+    "babel-plugin-relay": "^6.0.0",
     "classnames": "^2.2.6",
     "countdown": "^2.6.0",
     "dagre": "^0.8.4",
     "formik": "^1.5.8",
-    "formik-material-ui": "^0.0.20",
-    "graphql": "^14.4.1",
-    "http-proxy-middleware": "^0.19.1",
-    "js-cookie": "^2.2.0",
-    "js-file-download": "^0.4.7",
+    "formik-material-ui": "^0.0.22",
+    "graphql": "^14.5.8",
+    "http-proxy-middleware": "^0.20.0",
+    "js-cookie": "^2.2.1",
+    "js-file-download": "^0.4.8",
     "jsonwebtoken": "^8.5.1",
-    "lodash": "^4.17.14",
-    "mdi-material-ui": "^6.1.0",
+    "lodash": "^4.17.15",
+    "mdi-material-ui": "^6.7.0",
     "moment": "^2.24.0",
-    "moment-timezone": "^0.5.25",
+    "moment-timezone": "^0.5.26",
     "object-hash": "^1.3.1",
     "prop-types": "^15.7.2",
     "ramda": "^0.26.1",
-    "react": "^16.8.6",
+    "react": "^16.10.1",
+    "react-color": "^2.17.3",
     "react-csv": "^1.1.1",
     "react-document-title": "^2.0.3",
-    "react-dom": "^16.8.6",
+    "react-dom": "^16.10.1",
     "react-grid-layout": "^0.16.6",
     "react-intl": "^2.9.0",
-    "react-markdown": "^4.1.0",
-    "react-particles-js": "^2.6.0",
-    "react-relay": "^5.0.0",
-    "react-relay-network-modern": "^4.0.2",
-    "react-router-dom": "^5.0.1",
-    "react-scripts": "^3.0.1",
-    "react-select": "^3.0.4",
+    "react-markdown": "^4.2.2",
+    "react-particles-js": "^2.7.0",
+    "react-relay": "^6.0.0",
+    "react-relay-network-modern": "^4.1.0",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "^3.1.2",
+    "react-select": "^3.0.8",
     "react-swipeable-views": "^0.13.3",
     "react-virtualized": "^9.21.1",
     "react-window-dimensions": "^1.0.2",
-    "recharts": "^1.6.2",
-    "relay-compiler": "^5.0.0",
-    "relay-runtime": "^5.0.0",
-    "rxjs": "^6.5.2",
-    "storm-react-diagrams": "^5.2.1",
+    "recharts": "^1.7.1",
+    "relay-compiler": "^6.0.0",
+    "relay-runtime": "^6.0.0",
+    "rxjs": "^6.5.3",
     "subscriptions-transport-ws": "^0.9.16",
-    "typeface-roboto": "^0.0.54",
-    "uuid": "^3.3.2",
+    "storm-react-diagrams": "^5.2.1",
+    "typeface-roboto": "^0.0.75",
+    "uuid": "^3.3.3",
     "yup": "^0.27.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^5.0.11",
-    "@storybook/addon-links": "^5.0.11",
-    "@storybook/addons": "^5.0.11",
-    "@storybook/react": "^5.0.11",
+    "@storybook/addon-actions": "^5.2.1",
+    "@storybook/addon-links": "^5.2.1",
+    "@storybook/addons": "^5.2.1",
+    "@storybook/react": "^5.2.1",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
-    "cross-env": "^5.2.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-config-prettier": "^4.3.0",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-react": "^7.13.0",
-    "fs-extra": "^8.0.1",
-    "prettier": "^1.17.1",
+    "cross-env": "^6.0.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-config-airbnb-base": "^14.0.0",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-react": "^7.15.0",
+    "fs-extra": "^8.1.0",
+    "prettier": "^1.18.2",
     "relay-devtools": "^1.4.0"
   },
   "engines": {
-    "node": ">= 10.* || 8.*"
+    "node": ">= 10.*"
   },
   "scripts": {
     "start": "yarn relay && react-scripts start",

diff --git a/opencti-platform/opencti-front/src/components/Autocomplete.js b/opencti-platform/opencti-front/src/components/Autocomplete.js
@@ -6,6 +6,7 @@ import Select from 'react-select';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
+import Popper from '@material-ui/core/Popper';
 import Paper from '@material-ui/core/Paper';
 import Chip from '@material-ui/core/Chip';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -15,7 +16,7 @@ import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import inject18n from './i18n';
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     flexGrow: 1,
   },
@@ -53,20 +54,9 @@ const styles = theme => ({
     left: 2,
     fontSize: 16,
   },
-  paper: {
-    position: 'absolute',
-    zIndex: 1,
+  popper: {
+    zIndex: theme.zIndex.modal + 200,
     marginTop: theme.spacing(1),
-    left: 0,
-    right: 0,
-  },
-  paperReversed: {
-    position: 'absolute',
-    transform: 'translate(0, -340px)',
-    zIndex: 5000,
-    left: 0,
-    right: 0,
-    height: 300,
   },
   divider: {
     height: theme.spacing(2),
@@ -171,17 +161,23 @@ function MultiValue(props) {
 
 function Menu(props) {
   return (
-    <Paper
-      square
-      className={
-        props.selectProps.reverseMenu
-          ? props.selectProps.classes.paperReversed
-          : props.selectProps.classes.paper
-      }
-      {...props.innerProps}
+    <Popper
+      open={Boolean(props.children)}
+      anchorEl={props.selectProps.anchorEl.current}
+      className={props.selectProps.classes.popper}
     >
-      {props.children}
-    </Paper>
+      <Paper
+        square
+        {...props.innerProps}
+        style={{
+          width: props.selectProps.anchorEl.current
+            ? props.selectProps.anchorEl.current.clientWidth
+            : null,
+        }}
+      >
+        {props.children}
+      </Paper>
+    </Popper>
   );
 }
 
@@ -197,6 +193,11 @@ const components = {
 };
 
 class Autocomplete extends Component {
+  constructor(props) {
+    super(props);
+    this.anchorEl = React.createRef();
+  }
+
   render() {
     const {
       required,
@@ -217,12 +218,13 @@ class Autocomplete extends Component {
       labelDisplay,
       reverseMenu,
       variant,
+      noMargin,
     } = this.props;
     const errorText = errors[field.name];
     const hasError = dirty && errorText !== undefined && touched[field.name] !== undefined;
 
     const selectStyles = {
-      input: base => ({
+      input: (base) => ({
         ...base,
         '& input': {
           font: 'inherit',
@@ -247,13 +249,13 @@ class Autocomplete extends Component {
     }
 
     return (
-      <div className={classes.root}>
+      <div className={classes.root} ref={this.anchorEl}>
         <FormControl
           fullWidth
           error={hasError}
           required={required}
           disabled={isSubmitting}
-          style={{ marginTop: '20px' }}
+          style={{ marginTop: noMargin ? 0 : '20px' }}
         >
           <Select
             classes={classes}
@@ -285,6 +287,7 @@ class Autocomplete extends Component {
             placeholder={label}
             isMulti={multiple}
             openMenuOnClick={false}
+            anchorEl={this.anchorEl}
             reverseMenu={reverseMenu}
             isDisabled={isSubmitting}
             noOptionsMessage={() => (
@@ -322,6 +325,7 @@ Autocomplete.propTypes = {
   labelDisplay: PropTypes.bool,
   reverseMenu: PropTypes.bool,
   variant: PropTypes.string,
+  noMargin: PropTypes.bool,
 };
 
 export default compose(

diff --git a/opencti-platform/opencti-front/src/components/AutocompleteCreate.js b/opencti-platform/opencti-front/src/components/AutocompleteCreate.js
@@ -6,6 +6,7 @@ import CreatableSelect from 'react-select/creatable';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import TextField from '@material-ui/core/TextField';
+import Popper from '@material-ui/core/Popper';
 import Paper from '@material-ui/core/Paper';
 import Chip from '@material-ui/core/Chip';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -15,7 +16,7 @@ import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import inject18n from './i18n';
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     flexGrow: 1,
   },
@@ -53,12 +54,9 @@ const styles = theme => ({
     left: 2,
     fontSize: 16,
   },
-  paper: {
-    position: 'absolute',
-    zIndex: 1,
+  popper: {
+    zIndex: theme.zIndex.modal + 200,
     marginTop: theme.spacing(1),
-    left: 0,
-    right: 0,
   },
   divider: {
     height: theme.spacing(2),
@@ -163,13 +161,23 @@ function MultiValue(props) {
 
 function Menu(props) {
   return (
-    <Paper
-      square
-      className={props.selectProps.classes.paper}
-      {...props.innerProps}
+    <Popper
+      open={Boolean(props.children)}
+      anchorEl={props.selectProps.anchorEl.current}
+      className={props.selectProps.classes.popper}
     >
-      {props.children}
-    </Paper>
+      <Paper
+        square
+        {...props.innerProps}
+        style={{
+          width: props.selectProps.anchorEl.current
+            ? props.selectProps.anchorEl.current.clientWidth
+            : null,
+        }}
+      >
+        {props.children}
+      </Paper>
+    </Popper>
   );
 }
 
@@ -185,6 +193,11 @@ const components = {
 };
 
 class AutocompleteCreate extends Component {
+  constructor(props) {
+    super(props);
+    this.anchorEl = React.createRef();
+  }
+
   render() {
     const {
       required,
@@ -203,12 +216,13 @@ class AutocompleteCreate extends Component {
       helperText,
       multiple,
       handleCreate,
+      noMargin,
     } = this.props;
     const errorText = errors[field.name];
     const hasError = dirty && errorText !== undefined;
 
     const selectStyles = {
-      input: base => ({
+      input: (base) => ({
         ...base,
         '& input': {
           font: 'inherit',
@@ -228,13 +242,13 @@ class AutocompleteCreate extends Component {
     }
 
     return (
-      <div className={classes.root}>
+      <div className={classes.root} ref={this.anchorEl}>
         <FormControl
           fullWidth
           error={hasError}
           required={required}
           disabled={isSubmitting}
-          style={{ marginTop: '20px' }}
+          style={{ marginTop: noMargin ? 0 : '20px' }}
         >
           <CreatableSelect
             classes={classes}
@@ -266,13 +280,14 @@ class AutocompleteCreate extends Component {
             isMulti={multiple}
             openMenuOnClick={false}
             onCreateOption={handleCreate.bind(this)}
+            anchorEl={this.anchorEl}
             isDisabled={isSubmitting}
             noOptionsMessage={() => (
               <span style={{ fontStyle: 'italic' }}>
                 {t('No available options')}
               </span>
             )}
-            formatCreateLabel={inputValue => (
+            formatCreateLabel={(inputValue) => (
               <span style={{ fontStyle: 'italic' }}>
                 {t('Create')} {inputValue}
               </span>
@@ -305,6 +320,7 @@ AutocompleteCreate.propTypes = {
   helperText: PropTypes.node,
   multiple: PropTypes.bool,
   handleCreate: PropTypes.func,
+  noMargin: PropTypes.bool,
 };
 
 export default compose(