Add alert on failed requests

client/src/actions/index.js

@@ -1,5 +1,6 @@
 import { createAction } from 'redux-actions';
 import round from 'lodash/round';
+import alertify from 'alertifyjs';
 
 import { normalizeHistory, normalizeFilteringStatus, normalizeLogs } from '../helpers/helpers';
 import Api from '../api/Api';
@@ -119,6 +120,7 @@ export const disableDns = () => async (dispatch) => {
         dispatch(disableDnsSuccess());
     } catch (error) {
         console.error(error);
+        alertify.error(`Failed to disable DNS with status code ${error.response.status}`);
         dispatch(disableDnsFailure());
     }
 };
@@ -154,8 +156,13 @@ export const getTopStats = () => async (dispatch, getState) => {
         const state = getState();
         const timer = setInterval(async () => {
             if (state.dashboard.isCoreRunning) {
-                const stats = await apiClient.getGlobalStatsTop();
-                dispatch(getTopStatsSuccess(stats));
+                try {
+                    const stats = await apiClient.getGlobalStatsTop();
+                    dispatch(getTopStatsSuccess(stats));
+                } catch (error) {
+                    alertify.error(`Failed to load statistics with status code ${error.response.status}`);
+                    dispatch(getTopStatsFailure());
+                }
                 clearInterval(timer);
             }
         }, 100);
@@ -175,8 +182,13 @@ export const getLogs = () => async (dispatch, getState) => {
         const state = getState();
         const timer = setInterval(async () => {
             if (state.dashboard.isCoreRunning) {
-                const logs = normalizeLogs(await apiClient.getQueryLog());
-                dispatch(getLogsSuccess(logs));
+                try {
+                    const logs = normalizeLogs(await apiClient.getQueryLog());
+                    dispatch(getLogsSuccess(logs));
+                } catch (error) {
+                    alertify.error(`Failed to load query log with status code ${error.response.status}`);
+                    dispatch(getLogsFailure());
+                }
                 clearInterval(timer);
             }
         }, 100);

client/src/components/App/index.js

@@ -3,8 +3,10 @@ import { HashRouter, Route } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import 'react-table/react-table.css';
+import 'alertifyjs/build/css/alertify.min.css';
 import '../ui/Tabler.css';
 import '../ui/ReactTable.css';
+import '../ui/Alertify.css';
 import './index.css';
 
 import Header from '../../containers/Header';

client/src/components/ui/Alertify.css

@@ -0,0 +1,9 @@
+.alertify-notifier .ajs-message {
+    width: 280px;
+    font-weight: 600;
+    color: #fff;
+}
+
+.alertify-notifier .ajs-message.ajs-error {
+    background-color: rgba(236, 53, 53, 0.76);
+}