aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/reports/RouteReportPage.js44
-rw-r--r--modern/src/reports/StatisticsPage.js60
-rw-r--r--modern/src/reports/components/ReportFilter.js2
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}`,