[frontend/api] Implement exports of lists and fix relay version (#391,#…

…405) * [frontend/api] Implement exports of lists * [frontend] Introduce loader for files
OpenCTI-Platform · Jan 20, 2020 · 3448779 · 3448779
1 parent 0f875d4
commit 3448779
Show file tree

Hide file tree

Showing 98 changed files with 3,806 additions and 2,598 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -31,7 +31,7 @@ jobs:
           APP__REACTIVE: false
           GRAKN__HOSTNAME: 127.0.0.1
           ELASTICSEARCH__HOSTNAME: 127.0.0.1
-      - image: graknlabs/grakn:1.5.9
+      - image: graknlabs/grakn:1.6.1
       - image: docker.elastic.co/elasticsearch/elasticsearch:7.5.0
         environment:
           - "discovery.type=single-node"

diff --git a/opencti-documentation/docs/getting-started/achitecture.md b/opencti-documentation/docs/getting-started/achitecture.md
@@ -14,7 +14,9 @@ The API is the central part of the OpenCTI platorm, allowing the *clients* (incl
 
 ## The write workers
 
-The workers are standalone Python processes that just consume messages from the RabbitMQ broker in order to do asynchroneous write queries. You can launch as many workers as you need to increase the write performances. Nevertheless, the Grakn database could have some problems with concurrent writing and fails on some operations.
+The workers are standalone Python processes that just consume messages from the RabbitMQ broker in order to do asynchroneous write queries. You can launch as many workers as you need to increase the write performances.
+
+> Since `Grakn 1.6.1`, there is no more race conditions on duplicate keys, so we strongly advise you to launch more than one worker.
 
 ## The connectors
 

diff --git a/opencti-documentation/docs/installation/manual.md b/opencti-documentation/docs/installation/manual.md
@@ -10,7 +10,7 @@ sidebar_label: Manual deployment
 | ------------- |-----------------------| ----------------------------------------------------------|
 | NodeJS        | `>= 12.* && < 13.0.0` | https://nodejs.org/en/download                            |
 | Python        | `>= 3.6`              | https://www.python.org/downloads                          |
-| Grakn Core    | `=== 1.5.9`           | https://grakn.ai/download#core                            |
+| Grakn Core    | `=== 1.6.1`           | https://grakn.ai/download#core                            |
 | ElasticSearch | `>= 7.5`              | https://www.elastic.co/downloads/elasticsearch            |
 | MinIO         | `>= 20191012`         | https://min.io/download                                   |
 | Redis         | `>= 3.0`              | https://redis.io/download                                 |
@@ -88,6 +88,8 @@ $ python3 worker.py &
 
 ## Upgrade the platform
 
+> If you are upgrading from Grakn 1.5.9 to Grakn 1.6.1, you need to be aware of the manual migration procedure for keep your old data, as documented in the [Grakn documentation](https://dev.grakn.ai/docs/running-grakn/install-and-run).
+
 When upgrading the platform, you have to replace all files and restart the platform, the schema migrations will be done automatically:
 
 ```bash

diff --git a/opencti-platform/opencti-front/package.json b/opencti-platform/opencti-front/package.json
@@ -5,9 +5,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@date-io/moment": "^1.3.13",
-    "@material-ui/core": "^4.8.2",
+    "@material-ui/core": "^4.8.3",
     "@material-ui/icons": "^4.5.1",
-    "@material-ui/lab": "^4.0.0-alpha.38",
+    "@material-ui/lab": "^4.0.0-alpha.39",
     "@material-ui/pickers": "^3.2.8",
     "apollo-link": "^1.2.13",
     "apollo-link-ws": "^1.0.19",
@@ -38,17 +38,15 @@
     "react-intl": "^3.9.3",
     "react-markdown": "^4.2.2",
     "react-particles-js": "^2.7.0",
-    "react-relay": "^8.0.0",
+    "react-relay": "^7.1.0",
     "react-relay-network-modern": "^4.4.0",
     "react-router-dom": "^5.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.8.5",
-    "relay-compiler": "^8.0.0",
-    "relay-runtime": "^8.0.0",
-    "rxjs": "^6.5.3",
+    "relay-runtime": "^7.1.0",
     "subscriptions-transport-ws": "^0.9.16",
     "storm-react-diagrams": "^5.2.1",
     "typeface-roboto": "^0.0.75",
@@ -72,7 +70,7 @@
     "eslint-plugin-react": "^7.17.0",
     "fs-extra": "^8.1.0",
     "prettier": "^1.19.1",
-    "relay-compiler": "^8.0.0",
+    "relay-compiler": "^7.1.0",
     "react-app-rewired": "^2.1.5",
     "relay-devtools": "^1.4.0",
     "react-scripts": "^3.3.0"

diff --git a/opencti-platform/opencti-front/src/components/list_cards/ListCards.js b/opencti-platform/opencti-front/src/components/list_cards/ListCards.js
@@ -14,15 +14,36 @@ import {
   Dashboard,
 } from '@material-ui/icons';
 import Chip from '@material-ui/core/Chip';
+import Tooltip from '@material-ui/core/Tooltip';
+import { FileExportOutline } from 'mdi-material-ui';
+import { QueryRenderer } from '../../relay/environment';
 import SearchInput from '../SearchInput';
 import inject18n from '../i18n';
+import StixDomainEntitiesExports, {
+  stixDomainEntitiesExportsQuery,
+} from '../../private/components/common/stix_domain_entities/StixDomainEntitiesExports';
 
-const styles = () => ({
+const styles = (theme) => ({
+  container: {
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+  },
+  containerOpenExports: {
+    flexGrow: 1,
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginRight: 310,
+  },
   parameters: {
     float: 'left',
     marginTop: -10,
   },
   views: {
+    display: 'flex',
     float: 'right',
   },
   cardsContainer: {
@@ -63,15 +84,23 @@ class ListCards extends Component {
       handleSearch,
       handleChangeView,
       handleRemoveFilter,
+      handleToggleExports,
+      openExports,
       dataColumns,
+      paginationOptions,
       keyword,
       filters,
       sortBy,
       orderAsc,
       children,
+      exportEntityType,
     } = this.props;
     return (
-      <div>
+      <div
+        className={
+          openExports ? classes.containerOpenExports : classes.container
+        }
+      >
         <div className={classes.parameters}>
           <div style={{ float: 'left', marginRight: 20 }}>
             <SearchInput
@@ -114,7 +143,9 @@ class ListCards extends Component {
                     <Chip
                       key={filter[0]}
                       classes={{ root: classes.filter }}
-                      label={`${filter[0]}: ${f.value === null ? t('No tag') : f.value}`}
+                      label={`${filter[0]}: ${
+                        f.value === null ? t('No tag') : f.value
+                      }`}
                       onDelete={handleRemoveFilter.bind(this, filter[0])}
                     />
                 ),
@@ -127,29 +158,62 @@ class ListCards extends Component {
         <div className={classes.views}>
           <div style={{ float: 'right', marginTop: -20 }}>
             {typeof handleChangeView === 'function' ? (
-              <IconButton
-                color="secondary"
-                onClick={handleChangeView.bind(this, 'cards')}
-              >
-                <Dashboard />
-              </IconButton>
+              <Tooltip title={t('Cards view')}>
+                <IconButton
+                  color="secondary"
+                  onClick={handleChangeView.bind(this, 'cards')}
+                >
+                  <Dashboard />
+                </IconButton>
+              </Tooltip>
             ) : (
               ''
             )}
             {typeof handleChangeView === 'function' ? (
-              <IconButton
-                color="primary"
-                onClick={handleChangeView.bind(this, 'lines')}
-              >
-                <TableChart />
-              </IconButton>
+              <Tooltip title={t('Lines view')}>
+                <IconButton
+                  color="primary"
+                  onClick={handleChangeView.bind(this, 'lines')}
+                >
+                  <TableChart />
+                </IconButton>
+              </Tooltip>
+            ) : (
+              ''
+            )}
+            {typeof handleToggleExports === 'function' ? (
+              <Tooltip title={t('Exports panel')}>
+                <IconButton
+                  color={openExports ? 'secondary' : 'primary'}
+                  onClick={handleToggleExports.bind(this)}
+                >
+                  <FileExportOutline />
+                </IconButton>
+              </Tooltip>
             ) : (
               ''
             )}
           </div>
         </div>
         <div className="clearfix" />
         <div className={classes.cardsContainer}>{children}</div>
+        {typeof handleToggleExports === 'function' ? (
+          <QueryRenderer
+            query={stixDomainEntitiesExportsQuery}
+            variables={{ count: 25, type: exportEntityType }}
+            render={({ props }) => (
+              <StixDomainEntitiesExports
+                open={openExports}
+                handleToggle={handleToggleExports.bind(this)}
+                data={props}
+                paginationOptions={paginationOptions}
+                exportEntityType={exportEntityType}
+              />
+            )}
+          />
+        ) : (
+          ''
+        )}
       </div>
     );
   }
@@ -163,17 +227,16 @@ ListCards.propTypes = {
   handleSort: PropTypes.func.isRequired,
   handleChangeView: PropTypes.func,
   handleRemoveFilter: PropTypes.func,
+  handleToggleExports: PropTypes.func,
+  openExports: PropTypes.bool,
   views: PropTypes.array,
-  displayExport: PropTypes.bool,
-  displayImport: PropTypes.bool,
+  exportEntityType: PropTypes.string,
   keyword: PropTypes.string,
   filters: PropTypes.object,
   sortBy: PropTypes.string.isRequired,
   orderAsc: PropTypes.bool.isRequired,
   dataColumns: PropTypes.object.isRequired,
+  paginationOptions: PropTypes.object,
 };
 
-export default compose(
-  inject18n,
-  withStyles(styles),
-)(ListCards);
+export default compose(inject18n, withStyles(styles))(ListCards);