add progress bar and filters notifications

client/package-lock.json

@@ -12895,6 +12895,15 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-redux-loading-bar": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/react-redux-loading-bar/-/react-redux-loading-bar-4.0.7.tgz",
+      "integrity": "sha512-jWq9HJ2BDdmvSEUmf1NzILxFYBRnel+HfYCX50OqNW8dnOVgYyzkHgNqVFBwigPWjDOIYh99eoGcl0kf2HGo/w==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.2"
+      }
+    },
     "react-router": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",

client/package.json

@@ -22,6 +22,7 @@
     "react-dom": "^16.4.0",
     "react-modal": "^3.4.5",
     "react-redux": "^5.0.7",
+    "react-redux-loading-bar": "^4.0.7",
     "react-router-dom": "^4.2.2",
     "react-table": "^6.8.6",
     "react-transition-group": "^2.4.0",

client/src/actions/index.js

@@ -1,5 +1,6 @@
 import { createAction } from 'redux-actions';
 import round from 'lodash/round';
+import { showLoading, hideLoading } from 'react-redux-loading-bar';
 
 import { normalizeHistory, normalizeFilteringStatus, normalizeLogs } from '../helpers/helpers';
 import Api from '../api/Api';
@@ -212,13 +213,17 @@ export const toggleLogStatusSuccess = createAction('TOGGLE_LOGS_SUCCESS');
 export const toggleLogStatus = queryLogEnabled => async (dispatch) => {
     dispatch(toggleLogStatusRequest());
     let toggleMethod;
+    let successMessage;
     if (queryLogEnabled) {
         toggleMethod = apiClient.disableQueryLog.bind(apiClient);
+        successMessage = 'disabled';
     } else {
         toggleMethod = apiClient.enableQueryLog.bind(apiClient);
+        successMessage = 'enabled';
     }
     try {
         await toggleMethod();
+        dispatch(addSuccessToast(`Query log ${successMessage}`));
         dispatch(toggleLogStatusSuccess());
     } catch (error) {
         dispatch(addErrorToast({ error }));
@@ -234,6 +239,7 @@ export const setRules = rules => async (dispatch) => {
     dispatch(setRulesRequest());
     try {
         await apiClient.setRules(rules);
+        dispatch(addSuccessToast('Custom rules saved'));
         dispatch(setRulesSuccess());
     } catch (error) {
         dispatch(addErrorToast({ error }));
@@ -288,13 +294,27 @@ export const refreshFiltersSuccess = createAction('FILTERING_REFRESH_SUCCESS');
 
 export const refreshFilters = () => async (dispatch) => {
     dispatch(refreshFiltersRequest);
+    dispatch(showLoading());
     try {
-        await apiClient.refreshFilters();
+        const refreshText = await apiClient.refreshFilters();
         dispatch(refreshFiltersSuccess);
+
+        if (refreshText.includes('OK')) {
+            if (refreshText.includes('OK 0')) {
+                dispatch(addSuccessToast('All filters are already up-to-date'));
+            } else {
+                dispatch(addSuccessToast(refreshText.replace(/OK /g, '')));
+            }
+        } else {
+            dispatch(addErrorToast({ error: refreshText }));
+        }
+
         dispatch(getFilteringStatus());
+        dispatch(hideLoading());
     } catch (error) {
         dispatch(addErrorToast({ error }));
         dispatch(refreshFiltersFailure());
+        dispatch(hideLoading());
     }
 };
 
@@ -378,6 +398,7 @@ export const setUpstream = url => async (dispatch) => {
     dispatch(setUpstreamRequest());
     try {
         await apiClient.setUpstream(url);
+        dispatch(addSuccessToast('Upstream DNS servers saved'));
         dispatch(setUpstreamSuccess());
     } catch (error) {
         dispatch(addErrorToast({ error }));

client/src/components/App/index.css

@@ -17,3 +17,10 @@ body {
         min-height: calc(100vh - 117px);
     }
 }
+
+.loading-bar {
+    position: absolute;
+    z-index: 103;
+    height: 3px;
+    background: linear-gradient(45deg, rgba(99, 125, 120, 1) 0%, rgba(88, 177, 101, 1) 100%);
+}

client/src/components/App/index.js

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
 import { HashRouter, Route } from 'react-router-dom';
 import PropTypes from 'prop-types';
+import LoadingBar from 'react-redux-loading-bar';
 
 import 'react-table/react-table.css';
 import '../ui/Tabler.css';
@@ -31,6 +32,7 @@ class App extends Component {
         return (
             <HashRouter hashType='noslash'>
                 <Fragment>
+                    <LoadingBar className="loading-bar" updateTime={1000} />
                     <Route component={Header} />
                     <div className="container container--wrap">
                         {!dashboard.processing && !dashboard.isCoreRunning &&

client/src/components/Dashboard/index.js

@@ -20,7 +20,7 @@ class Dashboard extends Component {
         this.props.getStats();
         this.props.getStatsHistory();
         this.props.getTopStats();
-    };
+    }
 
     render() {
         const { dashboard } = this.props;

client/src/reducers/index.js

@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
 import { handleActions } from 'redux-actions';
+import { loadingBarReducer } from 'react-redux-loading-bar';
 import nanoid from 'nanoid';
 
 import * as actions from '../actions';
@@ -207,4 +208,5 @@ export default combineReducers({
     queryLogs,
     filtering,
     toasts,
+    loadingBar: loadingBarReducer,
 });