[frontend] View observables of cities/regions and city overview/knowl…

…edge (#301)

opencti-platform/opencti-front/src/private/components/entities/Root.js

@@ -9,6 +9,7 @@ import RootRegion from './regions/Root';
 import Countries from './Countries';
 import RootCountry from './countries/Root';
 import Cities from './Cities';
+import RootCity from './cities/Root';
 import Organizations from './Organizations';
 import RootOrganization from './organizations/Root';
 import Persons from './Persons';
@@ -31,7 +32,7 @@ class Root extends Component {
         />
         <BoundaryRoute
           path="/dashboard/entities/sectors/:sectorId"
-          render={routeProps => <RootSector {...routeProps} me={me} />}
+          render={(routeProps) => <RootSector {...routeProps} me={me} />}
         />
         <BoundaryRoute
           exact
@@ -40,7 +41,7 @@ class Root extends Component {
         />
         <BoundaryRoute
           path="/dashboard/entities/regions/:regionId"
-          render={routeProps => <RootRegion {...routeProps} me={me} />}
+          render={(routeProps) => <RootRegion {...routeProps} me={me} />}
         />
         <BoundaryRoute
           exact
@@ -49,21 +50,25 @@ class Root extends Component {
         />
         <BoundaryRoute
           path="/dashboard/entities/countries/:countryId"
-          render={routeProps => <RootCountry {...routeProps} me={me} />}
+          render={(routeProps) => <RootCountry {...routeProps} me={me} />}
         />
         <BoundaryRoute
           exact
           path="/dashboard/entities/cities"
           component={Cities}
         />
+        <BoundaryRoute
+          path="/dashboard/entities/cities/:cityId"
+          render={(routeProps) => <RootCity {...routeProps} me={me} />}
+        />
         <BoundaryRoute
           exact
           path="/dashboard/entities/organizations"
           component={Organizations}
         />
         <BoundaryRoute
           path="/dashboard/entities/organizations/:organizationId"
-          render={routeProps => <RootOrganization {...routeProps} me={me} />}
+          render={(routeProps) => <RootOrganization {...routeProps} me={me} />}
         />
         <BoundaryRoute
           exact
@@ -72,7 +77,7 @@ class Root extends Component {
         />
         <BoundaryRoute
           path="/dashboard/entities/persons/:personId"
-          render={routeProps => <RootPerson {...routeProps} me={me} />}
+          render={(routeProps) => <RootPerson {...routeProps} me={me} />}
         />
       </Switch>
     );

opencti-platform/opencti-front/src/private/components/entities/cities/City.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import * as PropTypes from 'prop-types';
+import { compose } from 'ramda';
+import { createFragmentContainer } from 'react-relay';
+import graphql from 'babel-plugin-relay/macro';
+import { withStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import inject18n from '../../../../components/i18n';
+import CityOverview from './CityOverview';
+import CityEdition from './CityEdition';
+import CityPopover from './CityPopover';
+import EntityLastReports from '../../reports/EntityLastReports';
+import EntityCampaignsChart from '../../threats/campaigns/EntityCampaignsChart';
+import EntityReportsChart from '../../reports/EntityReportsChart';
+import EntityIncidentsChart from '../../threats/incidents/EntityIncidentsChart';
+import StixDomainEntityHeader from '../../common/stix_domain_entities/StixDomainEntityHeader';
+
+const styles = () => ({
+  container: {
+    margin: 0,
+  },
+  gridContainer: {
+    marginBottom: 20,
+  },
+});
+
+class CityComponent extends Component {
+  render() {
+    const { classes, city } = this.props;
+    return (
+      <div className={classes.container}>
+        <StixDomainEntityHeader
+          stixDomainEntity={city}
+          PopoverComponent={<CityPopover />}
+        />
+        <Grid
+          container={true}
+          spacing={3}
+          classes={{ container: classes.gridContainer }}
+        >
+          <Grid item={true} xs={6}>
+            <CityOverview city={city} />
+          </Grid>
+          <Grid item={true} xs={6}>
+            <EntityLastReports entityId={city.id} />
+          </Grid>
+        </Grid>
+        <Grid
+          container={true}
+          spacing={3}
+          classes={{ container: classes.gridContainer }}
+          style={{ marginTop: 30 }}
+        >
+          <Grid item={true} xs={4}>
+            <EntityCampaignsChart entityId={city.id} />
+          </Grid>
+          <Grid item={true} xs={4}>
+            <EntityIncidentsChart entityId={city.id} />
+          </Grid>
+          <Grid item={true} xs={4}>
+            <EntityReportsChart entityId={city.id} />
+          </Grid>
+        </Grid>
+        <CityEdition cityId={city.id} />
+      </div>
+    );
+  }
+}
+
+CityComponent.propTypes = {
+  city: PropTypes.object,
+  classes: PropTypes.object,
+  t: PropTypes.func,
+};
+
+const City = createFragmentContainer(CityComponent, {
+  city: graphql`
+    fragment City_city on City {
+      id
+      name
+      alias
+      ...CityOverview_city
+    }
+  `,
+});
+
+export default compose(
+  inject18n,
+  withStyles(styles),
+)(City);