diff --git a/client/package-lock.json b/client/package-lock.json index 3309c809..26ca1857 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -324,6 +324,11 @@ "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.2.0.tgz", "integrity": "sha1-6GuBnGAs+IIa1jdBNpjx3sAhhHo=" }, + "alertifyjs": { + "version": "1.11.1", + "resolved": "https://registry.npmjs.org/alertifyjs/-/alertifyjs-1.11.1.tgz", + "integrity": "sha512-8rw5zvMlg0Idltq15OOU9tGabYVA/I8JTNIM5ICUXqvrdPb7cfl+sSkTv9pDc6bbB8p9L85GtmOG7SUSv+bugQ==" + }, "align-text": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", diff --git a/client/package.json b/client/package.json index 19260f52..4b43075b 100644 --- a/client/package.json +++ b/client/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@nivo/line": "^0.42.1", + "alertifyjs": "^1.11.1", "axios": "^0.18.0", "classnames": "^2.2.6", "date-fns": "^1.29.0", diff --git a/client/src/actions/index.js b/client/src/actions/index.js index daa1cc49..5b693b92 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 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); diff --git a/client/src/components/App/index.js b/client/src/components/App/index.js index 7bdad801..fcb31887 100644 --- a/client/src/components/App/index.js +++ b/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'; diff --git a/client/src/components/ui/Alertify.css b/client/src/components/ui/Alertify.css new file mode 100644 index 00000000..321a9b34 --- /dev/null +++ b/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); +}