Configurable stats report

3 files changed, 61 insertions, 45 deletions

diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index edb15af4..80e22bf6 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -56,28 +56,30 @@ const RouteReportPage = () => {
           </FormControl>
         </div>
       </ReportFilter>
-      <Table>
-        <TableHead>
-          <TableRow>
-            {columns.map((key) => (<TableCell>{t(columnsMap.get(key))}</TableCell>))}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {items.map((item) => (
-            <TableRow key={item.id}>
-              {columns.map((key) => (
-                <TableCell>
-                  <PositionValue
-                    position={item}
-                    property={item.hasOwnProperty(key) ? key : null}
-                    attribute={item.hasOwnProperty(key) ? null : key}
-                  />
-                </TableCell>
-              ))}
+      <TableContainer>
+        <Table>
+          <TableHead>
+            <TableRow>
+              {columns.map((key) => (<TableCell>{t(columnsMap.get(key))}</TableCell>))}
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
+          </TableHead>
+          <TableBody>
+            {items.map((item) => (
+              <TableRow key={item.id}>
+                {columns.map((key) => (
+                  <TableCell>
+                    <PositionValue
+                      position={item}
+                      property={item.hasOwnProperty(key) ? key : null}
+                      attribute={item.hasOwnProperty(key) ? null : key}
+                    />
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
     </PageLayout>
   );
 };
diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js
index 9c4f1384..09128c8a 100644
--- a/modern/src/reports/StatisticsPage.js
+++ b/modern/src/reports/StatisticsPage.js
@@ -1,16 +1,33 @@
 import React, { useState } from 'react';
 import {
-  TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+  TableContainer, Table, TableRow, TableCell, TableHead, TableBody, FormControl, InputLabel, Select, MenuItem,
 } from '@material-ui/core';
 import { formatDate } from '../common/util/formatter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
 import ReportsMenu from './components/ReportsMenu';
-import ReportFilter from './components/ReportFilter';
+import ReportFilter, { useFilterStyles } from './components/ReportFilter';
+import usePersistedState from '../common/util/usePersistedState';
+
+const columnsArray = [
+  ['captureTime', 'statisticsCaptureTime'],
+  ['activeUsers', 'statisticsActiveUsers'],
+  ['activeDevices', 'statisticsActiveDevices'],
+  ['requests', 'statisticsRequests'],
+  ['messagesReceived', 'statisticsMessagesReceived'],
+  ['messagesStored', 'statisticsMessagesStored'],
+  ['mailSent', 'notificatorMail'],
+  ['smsSent', 'notificatorSms'],
+  ['geocoderRequests', 'statisticsGeocoder'],
+  ['geolocationRequests', 'statisticsGeolocation'],
+];
+const columnsMap = new Map(columnsArray);
 
 const StatisticsPage = () => {
+  const classes = useFilterStyles();
   const t = useTranslation();
 
+  const [columns, setColumns] = usePersistedState('statisticsColumns', ['captureTime', 'activeUsers', 'activeDevices', 'messagesStored']);
   const [items, setItems] = useState([]);
 
   const handleSubmit = async (_, from, to) => {
@@ -23,36 +40,33 @@ const StatisticsPage = () => {
 
   return (
     <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'statisticsTitle']}>
-      <ReportFilter handleSubmit={handleSubmit} showOnly ignoreDevice />
+      <ReportFilter handleSubmit={handleSubmit} showOnly ignoreDevice>
+        <div className={classes.item}>
+          <FormControl variant="filled" fullWidth>
+            <InputLabel>{t('sharedColumns')}</InputLabel>
+            <Select value={columns} onChange={(e) => setColumns(e.target.value)} renderValue={(it) => it.length} multiple>
+              {columnsArray.map(([key, string]) => (
+                <MenuItem value={key}>{t(string)}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        </div>
+      </ReportFilter>
       <TableContainer>
         <Table>
           <TableHead>
             <TableRow>
-              <TableCell>{t('statisticsCaptureTime')}</TableCell>
-              <TableCell>{t('statisticsActiveUsers')}</TableCell>
-              <TableCell>{t('statisticsActiveDevices')}</TableCell>
-              <TableCell>{t('statisticsRequests')}</TableCell>
-              <TableCell>{t('statisticsMessagesReceived')}</TableCell>
-              <TableCell>{t('statisticsMessagesStored')}</TableCell>
-              <TableCell>{t('notificatorMail')}</TableCell>
-              <TableCell>{t('notificatorSms')}</TableCell>
-              <TableCell>{t('statisticsGeocoder')}</TableCell>
-              <TableCell>{t('statisticsGeolocation')}</TableCell>
+              {columns.map((key) => (<TableCell>{t(columnsMap.get(key))}</TableCell>))}
             </TableRow>
           </TableHead>
           <TableBody>
             {items.map((item) => (
               <TableRow key={item.id}>
-                <TableCell>{formatDate(item.captureTime)}</TableCell>
-                <TableCell>{item.activeUsers}</TableCell>
-                <TableCell>{item.activeDevices}</TableCell>
-                <TableCell>{item.requests}</TableCell>
-                <TableCell>{item.messagesReceived}</TableCell>
-                <TableCell>{item.messagesStored}</TableCell>
-                <TableCell>{item.mailSent}</TableCell>
-                <TableCell>{item.smsSent}</TableCell>
-                <TableCell>{item.geocoderRequests}</TableCell>
-                <TableCell>{item.geolocationRequests}</TableCell>
+                {columns.map((key) => (
+                  <TableCell>
+                    {key === 'captureTime' ? formatDate(item[key]) : item[key]}
+                  </TableCell>
+                ))}
               </TableRow>
             ))}
           </TableBody>
diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index 30a49c81..c7f6a197 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -12,7 +12,7 @@ export const useFilterStyles = makeStyles((theme) => ({
     display: 'flex',
     flexWrap: 'wrap',
     gap: theme.spacing(1),
-    padding: theme.spacing(2),
+    padding: theme.spacing(3, 2, 2),
   },
   item: {
     flex: `1 1 ${dimensions.filterFormWidth}`,