diff --git a/client/src/components/Dashboard/Dashboard.css b/client/src/components/Dashboard/Dashboard.css
index 415a3f6b..765c9ed1 100644
--- a/client/src/components/Dashboard/Dashboard.css
+++ b/client/src/components/Dashboard/Dashboard.css
@@ -1,3 +1,9 @@
+.dashboard-protection-button.btn-gray {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-right-color: #a4a4a4;
+}
+
.stats__table .popover__body {
left: -10px;
min-width: 270px;
@@ -34,20 +40,11 @@
align-items: center;
}
-.dashboard-title__button {
- margin: 0 0.5rem;
-}
-
@media (max-width: 767.98px) {
.page-title--dashboard {
flex-direction: column;
align-items: flex-start;
}
-
- .dashboard-title__button {
- margin: 0.5rem 0;
- display: block;
- }
}
.counters__row {
diff --git a/client/src/components/Dashboard/index.js b/client/src/components/Dashboard/index.js
index cc19acf0..54354979 100644
--- a/client/src/components/Dashboard/index.js
+++ b/client/src/components/Dashboard/index.js
@@ -9,18 +9,25 @@ import Counters from './Counters';
import Clients from './Clients';
import QueriedDomains from './QueriedDomains';
import BlockedDomains from './BlockedDomains';
-import { SETTINGS_URLS } from '../../helpers/constants';
+import { DISABLE_PROTECTION_TIMINGS, ONE_SECOND_IN_MS, SETTINGS_URLS } from '../../helpers/constants';
+import {
+ msToSeconds,
+ msToMinutes,
+ msToHours,
+ msToDays,
+} from '../../helpers/helpers';
import PageTitle from '../ui/PageTitle';
import Loading from '../ui/Loading';
import './Dashboard.css';
+import Dropdown from '../ui/Dropdown';
const Dashboard = ({
getAccessList,
getStats,
getStatsConfig,
dashboard,
- dashboard: { protectionEnabled, processingProtection },
+ dashboard: { protectionEnabled, processingProtection, protectionDisabledDuration },
toggleProtection,
stats,
access,
@@ -36,20 +43,20 @@ const Dashboard = ({
useEffect(() => {
getAllStats();
}, []);
-
const getSubtitle = () => {
- if (stats.interval === 0) {
+ const ONE_DAY = 1;
+ const intervalInDays = msToDays(stats.interval);
+
+ if (intervalInDays < ONE_DAY) {
return t('stats_disabled_short');
}
- return stats.interval === 1
+ return intervalInDays === ONE_DAY
? t('for_last_24_hours')
- : t('for_last_days', { count: stats.interval });
+ : t('for_last_days', { count: msToDays(stats.interval) });
};
- const buttonText = protectionEnabled ? 'disable_protection' : 'enable_protection';
-
- const buttonClass = classNames('btn btn-sm dashboard-title__button', {
+ const buttonClass = classNames('btn btn-sm dashboard-protection-button', {
'btn-gray': protectionEnabled,
'btn-success': !protectionEnabled,
});
@@ -71,16 +78,87 @@ const Dashboard = ({
const subtitle = getSubtitle();
+ const DISABLE_PROTECTION_ITEMS = [
+ {
+ text: t('disable_for_seconds', { count: msToSeconds(DISABLE_PROTECTION_TIMINGS.HALF_MINUTE) }),
+ disableTime: DISABLE_PROTECTION_TIMINGS.HALF_MINUTE,
+ },
+ {
+ text: t('disable_for_minutes', { count: msToMinutes(DISABLE_PROTECTION_TIMINGS.MINUTE) }),
+ disableTime: DISABLE_PROTECTION_TIMINGS.MINUTE,
+ },
+ {
+ text: t('disable_for_minutes', { count: msToMinutes(DISABLE_PROTECTION_TIMINGS.TEN_MINUTES) }),
+ disableTime: DISABLE_PROTECTION_TIMINGS.TEN_MINUTES,
+ },
+ {
+ text: t('disable_for_hours', { count: msToHours(DISABLE_PROTECTION_TIMINGS.HOUR) }),
+ disableTime: DISABLE_PROTECTION_TIMINGS.HOUR,
+ },
+ {
+ text: t('disable_until_tomorrow'),
+ disableTime: DISABLE_PROTECTION_TIMINGS.TOMORROW,
+ },
+ ];
+
+ const getDisableProtectionItems = () => (
+ Object.values(DISABLE_PROTECTION_ITEMS)
+ .map((item, index) => (
+
{
+ toggleProtection(protectionEnabled, item.disableTime - ONE_SECOND_IN_MS);
+ }}
+ >
+ {item.text}
+
+ ))
+ );
+
+ const getRemaningTimeText = (milliseconds) => {
+ if (!milliseconds) {
+ return '';
+ }
+
+ const date = new Date(milliseconds);
+ const hh = date.getUTCHours();
+ const mm = `0${date.getUTCMinutes()}`.slice(-2);
+ const ss = `0${date.getUTCSeconds()}`.slice(-2);
+ const formattedHH = `0${hh}`.slice(-2);
+
+ return hh ? `${formattedHH}:${mm}:${ss}` : `${mm}:${ss}`;
+ };
+
+ const getProtectionBtnText = (status) => (status ? t('disable_protection') : t('enable_protection'));
+
return <>
-
+
+
+
+ {protectionEnabled &&
+ {getDisableProtectionItems()}
+ }
+