+ client: handle clear statistics

client/src/__locales/en.json

@@ -369,9 +369,13 @@
     "interval_24_hour": "24 hours",
     "interval_days": "{{count}} day",
     "interval_days_plural": "{{count}} days",
-    "time_period": "Time period",
-    "time_period_desc": "If you decrease the interval value, some data will be lost",
     "domain": "Domain",
     "answer": "Answer",
-    "filter_added_successfully": "The filter has been successfully added"
+    "filter_added_successfully": "The filter has been successfully added",
+    "statistics_logs": "Statistics and logs",
+    "statistics_retention": "Statistics retention",
+    "statistics_retention_desc": "If you decrease the interval value, some data will be lost",
+    "statistics_clear": " Clear statistics",
+    "statistics_clear_confirm": "Are you sure you want to clear statistics?",
+    "statistics_cleared": "Statistics successfully cleared"
 }

client/src/actions/stats.js

@@ -59,3 +59,19 @@ export const getStats = () => async (dispatch) => {
         dispatch(getStatsFailure());
     }
 };
+
+export const resetStatsRequest = createAction('RESET_STATS_REQUEST');
+export const resetStatsFailure = createAction('RESET_STATS_FAILURE');
+export const resetStatsSuccess = createAction('RESET_STATS_SUCCESS');
+
+export const resetStats = () => async (dispatch) => {
+    dispatch(getStatsRequest());
+    try {
+        await apiClient.resetStats();
+        dispatch(addSuccessToast('statistics_cleared'));
+        dispatch(resetStatsSuccess());
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(resetStatsFailure());
+    }
+};

client/src/api/Api.js

@@ -496,6 +496,7 @@ export default class Api {
     GET_STATS = { path: 'stats', method: 'GET' };
     STATS_INFO = { path: 'stats_info', method: 'GET' };
     STATS_CONFIG = { path: 'stats_config', method: 'POST' };
+    STATS_RESET = { path: 'stats_reset', method: 'POST' };
 
     getStats() {
         const { path, method } = this.GET_STATS;
@@ -515,4 +516,9 @@ export default class Api {
         };
         return this.makeRequest(path, method, config);
     }
+
+    resetStats() {
+        const { path, method } = this.STATS_RESET;
+        return this.makeRequest(path, method);
+    }
 }

client/src/components/Settings/StatsConfig/Form.js

@@ -38,10 +38,10 @@ const Form = (props) => {
             <div className="row">
                 <div className="col-12">
                     <label className="form__label form__label--with-desc" htmlFor="server_name">
-                        <Trans>time_period</Trans>
+                        <Trans>statistics_retention</Trans>
                     </label>
                     <div className="form__desc form__desc--top">
-                        <Trans>time_period_desc</Trans>
+                        <Trans>statistics_retention_desc</Trans>
                     </div>
                 </div>
                 <div className="col-12">

client/src/components/Settings/StatsConfig/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { withNamespaces } from 'react-i18next';
+import { withNamespaces, Trans } from 'react-i18next';
 import debounce from 'lodash/debounce';
 
 import { DEBOUNCE_TIMEOUT } from '../../../helpers/constants';
@@ -12,18 +12,21 @@ class StatsConfig extends Component {
         this.props.setStatsConfig(values);
     }, DEBOUNCE_TIMEOUT);
 
+    handleReset = () => {
+        const { t, resetStats } = this.props;
+        // eslint-disable-next-line no-alert
+        if (window.confirm(t('statistics_clear_confirm'))) {
+            resetStats();
+        }
+    };
+
     render() {
         const {
-            t,
+            t, interval, processing, processingReset,
-            interval,
-            processing,
         } = this.props;
 
         return (
-            <Card
+            <Card title={t('statistics_logs')} bodyType="card-body box-body--settings">
-                title={t('stats_params')}
-                bodyType="card-body box-body--settings"
-            >
                 <div className="form">
                     <Form
                         initialValues={{
@@ -33,6 +36,15 @@ class StatsConfig extends Component {
                         onChange={this.handleFormChange}
                         processing={processing}
                     />
+
+                    <button
+                        type="button"
+                        className="btn btn-outline-secondary btn-sm mt-3"
+                        onClick={this.handleReset}
+                        disabled={processingReset}
+                    >
+                        <Trans>statistics_clear</Trans>
+                    </button>
                 </div>
             </Card>
         );
@@ -42,7 +54,9 @@ class StatsConfig extends Component {
 StatsConfig.propTypes = {
     interval: PropTypes.number.isRequired,
     processing: PropTypes.bool.isRequired,
+    processingReset: PropTypes.bool.isRequired,
     setStatsConfig: PropTypes.func.isRequired,
+    resetStats: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
 };
 

client/src/components/Settings/index.js

@@ -68,6 +68,7 @@ class Settings extends Component {
             services,
             setBlockedServices,
             setStatsConfig,
+            resetStats,
             stats,
             t,
         } = this.props;
@@ -89,7 +90,9 @@ class Settings extends Component {
                                 <StatsConfig
                                     interval={stats.interval}
                                     processing={stats.processingSetConfig}
+                                    processingReset={stats.processingReset}
                                     setStatsConfig={setStatsConfig}
+                                    resetStats={resetStats}
                                 />
                             </div>
                             <div className="col-md-12">
@@ -107,13 +110,13 @@ class Settings extends Component {
 }
 
 Settings.propTypes = {
-    initSettings: PropTypes.func,
+    initSettings: PropTypes.func.isRequired,
-    settings: PropTypes.object,
+    settings: PropTypes.object.isRequired,
-    settingsList: PropTypes.object,
+    toggleSetting: PropTypes.func.isRequired,
-    toggleSetting: PropTypes.func,
+    getStatsConfig: PropTypes.func.isRequired,
-    getStatsConfig: PropTypes.func,
+    setStatsConfig: PropTypes.func.isRequired,
-    setStatsConfig: PropTypes.func,
+    resetStats: PropTypes.func.isRequired,
-    t: PropTypes.func,
+    t: PropTypes.func.isRequired,
 };
 
 export default withNamespaces()(Settings);

client/src/containers/Settings.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { initSettings, toggleSetting } from '../actions';
 import { getBlockedServices, setBlockedServices } from '../actions/services';
-import { getStatsConfig, setStatsConfig } from '../actions/stats';
+import { getStatsConfig, setStatsConfig, resetStats } from '../actions/stats';
 import Settings from '../components/Settings';
 
 const mapStateToProps = (state) => {
@@ -21,6 +21,7 @@ const mapDispatchToProps = {
     setBlockedServices,
     getStatsConfig,
     setStatsConfig,
+    resetStats,
 };
 
 export default connect(

client/src/reducers/stats.js

@@ -2,6 +2,22 @@ import { handleActions } from 'redux-actions';
 
 import * as actions from '../actions/stats';
 
+const defaultStats = {
+    dnsQueries: [],
+    blockedFiltering: [],
+    replacedParental: [],
+    replacedSafebrowsing: [],
+    topBlockedDomains: [],
+    topClients: [],
+    topQueriedDomains: [],
+    numBlockedFiltering: 0,
+    numDnsQueries: 0,
+    numReplacedParental: 0,
+    numReplacedSafebrowsing: 0,
+    numReplacedSafesearch: 0,
+    avgProcessingTime: 0,
+};
+
 const stats = handleActions(
     {
         [actions.getStatsConfigRequest]: state => ({ ...state, processingGetConfig: true }),
@@ -59,25 +75,22 @@ const stats = handleActions(
 
             return newState;
         },
+
+        [actions.resetStatsRequest]: state => ({ ...state, processingReset: true }),
+        [actions.resetStatsFailure]: state => ({ ...state, processingReset: false }),
+        [actions.resetStatsSuccess]: state => ({
+            ...state,
+            ...defaultStats,
+            processingReset: false,
+        }),
     },
     {
         processingGetConfig: false,
         processingSetConfig: false,
         processingStats: true,
+        processingReset: false,
         interval: 1,
-        dnsQueries: [],
+        ...defaultStats,
-        blockedFiltering: [],
-        replacedParental: [],
-        replacedSafebrowsing: [],
-        topBlockedDomains: [],
-        topClients: [],
-        topQueriedDomains: [],
-        numBlockedFiltering: 0,
-        numDnsQueries: 0,
-        numReplacedParental: 0,
-        numReplacedSafebrowsing: 0,
-        numReplacedSafesearch: 0,
-        avgProcessingTime: 0,
     },
 );