import React, { useState } from 'react'; import { FormControl, InputLabel, Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, Paper, } from '@material-ui/core'; import moment from 'moment'; import t from '../common/localization'; import { formatDate } from '../common/formatter'; import OptionsLayout from '../settings/OptionsLayout'; const Filter = ({ setItems }) => { const [period, setPeriod] = useState('today'); const [from, setFrom] = useState(moment().subtract(1, 'hour')); const [to, setTo] = useState(moment()); const handleClick = async () => { let selectedFrom; let selectedTo; switch (period) { case 'today': selectedFrom = moment().startOf('day'); selectedTo = moment().endOf('day'); break; case 'yesterday': selectedFrom = moment().subtract(1, 'day').startOf('day'); selectedTo = moment().subtract(1, 'day').endOf('day'); break; case 'thisWeek': selectedFrom = moment().startOf('week'); selectedTo = moment().endOf('week'); break; case 'previousWeek': selectedFrom = moment().subtract(1, 'week').startOf('week'); selectedTo = moment().subtract(1, 'week').endOf('week'); break; case 'thisMonth': selectedFrom = moment().startOf('month'); selectedTo = moment().endOf('month'); break; case 'previousMonth': selectedFrom = moment().subtract(1, 'month').startOf('month'); selectedTo = moment().subtract(1, 'month').endOf('month'); break; default: selectedFrom = from; selectedTo = to; break; } const query = new URLSearchParams({ from: selectedFrom.toISOString(), to: selectedTo.toISOString() }); const response = await fetch(`/api/statistics?${query.toString()}`, { Accept: 'application/json' }); if (response.ok) { setItems(await response.json()); } }; return ( <> {t('reportPeriod')} {period === 'custom' && ( setFrom(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))} fullWidth /> )} {period === 'custom' && ( setTo(moment(e.target.value, moment.HTML5_FMT.DATETIME_LOCAL))} fullWidth /> )} ); }; const StatisticsPage = () => { const [items, setItems] = useState([]); return ( {t('statisticsCaptureTime')} {t('statisticsActiveUsers')} {t('statisticsActiveDevices')} {t('statisticsRequests')} {t('statisticsMessagesReceived')} {t('statisticsMessagesStored')} {t('notificatorMail')} {t('notificatorSms')} {t('statisticsGeocoder')} {t('statisticsGeolocation')} {items.map((item) => ( {formatDate(item.captureTime)} {item.activeUsers} {item.activeDevices} {item.requests} {item.messagesReceived} {item.messagesStored} {item.mailSent} {item.smsSent} {item.geocoderRequests} {item.geolocationRequests} ))}
); }; export default StatisticsPage;