From 0e173d2f705752c335c7fa78fdd5c578420e8a43 Mon Sep 17 00:00:00 2001 From: Ildar Kamalov Date: Wed, 19 Sep 2018 18:58:55 +0300 Subject: [PATCH] add progress bar and filters notifications --- client/package-lock.json | 9 +++++++++ client/package.json | 1 + client/src/actions/index.js | 23 ++++++++++++++++++++++- client/src/components/App/index.css | 7 +++++++ client/src/components/App/index.js | 2 ++ client/src/components/Dashboard/index.js | 2 +- client/src/reducers/index.js | 2 ++ 7 files changed, 44 insertions(+), 2 deletions(-) diff --git a/client/package-lock.json b/client/package-lock.json index a40c8624..efac20b7 100644 --- a/client/package-lock.json +++ b/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", diff --git a/client/package.json b/client/package.json index ce8e436d..183148a2 100644 --- a/client/package.json +++ b/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", diff --git a/client/src/actions/index.js b/client/src/actions/index.js index 27d57f39..048fe77e 100644 --- a/client/src/actions/index.js +++ b/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 })); diff --git a/client/src/components/App/index.css b/client/src/components/App/index.css index d90f40ae..fe3d81d3 100644 --- a/client/src/components/App/index.css +++ b/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%); +} diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js index 1b48620c..2716881f 100644 --- a/client/src/components/App/index.js +++ b/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 ( +
{!dashboard.processing && !dashboard.isCoreRunning && diff --git a/client/src/components/Dashboard/index.js b/client/src/components/Dashboard/index.js index 28bee848..f1e30715 100644 --- a/client/src/components/Dashboard/index.js +++ b/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; diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js index 853a2409..d141ecc3 100644 --- a/client/src/reducers/index.js +++ b/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, });