Add button to the dashboard page for enable/disable filtering

Closes #333

client/src/actions/index.js

@@ -98,6 +98,46 @@ export const initSettings = settingsList => async (dispatch) => {
     }
 };
 
+export const getFilteringRequest = createAction('GET_FILTERING_REQUEST');
+export const getFilteringFailure = createAction('GET_FILTERING_FAILURE');
+export const getFilteringSuccess = createAction('GET_FILTERING_SUCCESS');
+
+export const getFiltering = () => async (dispatch) => {
+    dispatch(getFilteringRequest());
+    try {
+        const filteringStatus = await apiClient.getFilteringStatus();
+        dispatch(getFilteringSuccess(filteringStatus.enabled));
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(getFilteringFailure());
+    }
+};
+
+export const toggleFilteringRequest = createAction('TOGGLE_FILTERING_REQUEST');
+export const toggleFilteringFailure = createAction('TOGGLE_FILTERING_FAILURE');
+export const toggleFilteringSuccess = createAction('TOGGLE_FILTERING_SUCCESS');
+
+export const toggleFiltering = status => async (dispatch) => {
+    dispatch(toggleFilteringRequest());
+    let successMessage = '';
+
+    try {
+        if (status) {
+            successMessage = 'Disabled filtering';
+            await apiClient.disableFiltering();
+        } else {
+            successMessage = 'Enabled filtering';
+            await apiClient.enableFiltering();
+        }
+
+        dispatch(addSuccessToast(successMessage));
+        dispatch(toggleFilteringSuccess());
+    } catch (error) {
+        dispatch(addErrorToast({ error }));
+        dispatch(toggleFilteringFailure());
+    }
+};
+
 export const dnsStatusRequest = createAction('DNS_STATUS_REQUEST');
 export const dnsStatusFailure = createAction('DNS_STATUS_FAILURE');
 export const dnsStatusSuccess = createAction('DNS_STATUS_SUCCESS');

client/src/components/Dashboard/index.js

@@ -20,6 +20,19 @@ class Dashboard extends Component {
         this.props.getStats();
         this.props.getStatsHistory();
         this.props.getTopStats();
+        this.props.getFiltering();
+    }
+
+    getToggleFilteringButton = () => {
+        const { isFilteringEnabled } = this.props.dashboard;
+        const buttonText = isFilteringEnabled ? 'Disable' : 'Enable';
+        const buttonClass = isFilteringEnabled ? 'btn-outline-secondary' : 'btn-outline-success';
+
+        return (
+            <button type="button" className={`btn btn-sm mr-2 ${buttonClass}`} onClick={() => this.props.toggleFiltering(isFilteringEnabled)}>
+                {buttonText} protection
+            </button>
+        );
     }
 
     render() {
@@ -37,6 +50,7 @@ class Dashboard extends Component {
             <Fragment>
                 <PageTitle title="Dashboard">
                     <div className="page-title__actions">
+                        {this.getToggleFilteringButton()}
                         {refreshFullButton}
                     </div>
                 </PageTitle>
@@ -97,9 +111,10 @@ Dashboard.propTypes = {
     getStats: PropTypes.func,
     getStatsHistory: PropTypes.func,
     getTopStats: PropTypes.func,
-    disableDns: PropTypes.func,
     dashboard: PropTypes.object,
     isCoreRunning: PropTypes.bool,
+    getFiltering: PropTypes.func,
+    toggleFiltering: PropTypes.func,
 };
 
 export default Dashboard;

client/src/reducers/index.js

@@ -129,6 +129,18 @@ const dashboard = handleActions({
 
         return state;
     },
+
+    [actions.getFilteringRequest]: state => ({ ...state, processingFiltering: true }),
+    [actions.getFilteringFailure]: state => ({ ...state, processingFiltering: false }),
+    [actions.getFilteringSuccess]: (state, { payload }) => {
+        const newState = { ...state, isFilteringEnabled: payload, processingFiltering: false };
+        return newState;
+    },
+
+    [actions.toggleFilteringSuccess]: (state) => {
+        const newSetting = { ...state, isFilteringEnabled: !state.isFilteringEnabled };
+        return newSetting;
+    },
 }, {
     processing: true,
     isCoreRunning: false,
@@ -136,6 +148,7 @@ const dashboard = handleActions({
     processingStats: true,
     logStatusProcessing: false,
     processingVersion: true,
+    processingFiltering: true,
 });
 
 const queryLogs = handleActions({