Merge remote-tracking branch 'origin/master' into update-dnsproxy

client/src/components/App/index.js

@@ -34,6 +34,8 @@ import EncryptionTopline from '../ui/EncryptionTopline';
 import Icons from '../ui/Icons';
 import i18n from '../../i18n';
 import Loading from '../ui/Loading';
+import { FILTERS_URLS, MENU_URLS, SETTINGS_URLS } from '../../helpers/constants';
+import Services from '../Filters/Services';
 
 class App extends Component {
     componentDidMount() {
@@ -99,26 +101,29 @@ class App extends Component {
                                 <div className="col-lg-12">
                                     <Status reloadPage={this.reloadPage}
                                             message="dns_start"
-                                        />
+                                    />
                                     <Loading />
                                 </div>
                             </div>
                         )}
                         {!dashboard.processing && dashboard.isCoreRunning && (
-                            <Fragment>
-                                <Route path="/" exact component={Dashboard} />
-                                <Route path="/settings" component={Settings} />
-                                <Route path="/dns" component={Dns} />
-                                <Route path="/encryption" component={Encryption} />
-                                <Route path="/dhcp" component={Dhcp} />
-                                <Route path="/clients" component={Clients} />
-                                <Route path="/filters" component={DnsBlocklist} />
-                                <Route path="/dns_allowlists" component={DnsAllowlist} />
-                                <Route path="/dns_rewrites" component={DnsRewrites} />
-                                <Route path="/custom_rules" component={CustomRules} />
-                                <Route path="/logs" component={Logs} />
-                                <Route path="/guide" component={SetupGuide} />
-                            </Fragment>
+                            <>
+                                <Route path={MENU_URLS.root} exact component={Dashboard} />
+                                <Route path={MENU_URLS.logs} component={Logs} />
+                                <Route path={MENU_URLS.guide} component={SetupGuide} />
+                                <Route path={SETTINGS_URLS.settings} component={Settings} />
+                                <Route path={SETTINGS_URLS.dns} component={Dns} />
+                                <Route path={SETTINGS_URLS.encryption} component={Encryption} />
+                                <Route path={SETTINGS_URLS.dhcp} component={Dhcp} />
+                                <Route path={SETTINGS_URLS.clients} component={Clients} />
+                                <Route path={FILTERS_URLS.dns_blocklists}
+                                       component={DnsBlocklist} />
+                                <Route path={FILTERS_URLS.dns_allowlists}
+                                       component={DnsAllowlist} />
+                                <Route path={FILTERS_URLS.dns_rewrites} component={DnsRewrites} />
+                                <Route path={FILTERS_URLS.custom_rules} component={CustomRules} />
+                                <Route path={FILTERS_URLS.blocked_services} component={Services} />
+                            </>
                         )}
                     </div>
                     <Footer

client/src/components/Filters/DnsAllowlist.js

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
@@ -72,7 +72,7 @@ class DnsAllowlist extends Component {
         const whitelist = true;
 
         return (
-            <Fragment>
+            <>
                 <PageTitle
                     title={t('dns_allowlists')}
                     subtitle={t('dns_allowlists_desc')}
@@ -113,7 +113,7 @@ class DnsAllowlist extends Component {
                     currentFilterData={currentFilterData}
                     whitelist={whitelist}
                 />
-            </Fragment>
+            </>
         );
     }
 }

client/src/components/Filters/Services/index.js

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useDispatch, useSelector } from 'react-redux';
+import Form from './Form';
+import Card from '../../ui/Card';
+import { getBlockedServices, setBlockedServices } from '../../../actions/services';
+import PageTitle from '../../ui/PageTitle';
+
+const getInitialDataForServices = (initial) => (initial ? initial.reduce(
+    (acc, service) => {
+        acc.blocked_services[service] = true;
+        return acc;
+    }, { blocked_services: {} },
+) : initial);
+
+const Services = () => {
+    const [t] = useTranslation();
+    const dispatch = useDispatch();
+    const services = useSelector((store) => store && store.services);
+
+    useEffect(() => {
+        dispatch(getBlockedServices());
+    }, []);
+
+    const handleSubmit = (values) => {
+        if (!values || !values.blocked_services) {
+            return;
+        }
+
+        const blocked_services = Object
+            .keys(values.blocked_services)
+            .filter((service) => values.blocked_services[service]);
+
+        dispatch(setBlockedServices(blocked_services));
+    };
+
+    const initialValues = getInitialDataForServices(services.list);
+
+    return (
+        <>
+            <PageTitle
+                title={t('blocked_services')}
+                subtitle={t('blocked_services_desc')}
+            />
+            <Card
+                bodyType="card-body box-body--settings"
+            >
+                <div className="form">
+                    <Form
+                        initialValues={initialValues}
+                        processing={services.processing}
+                        processingSet={services.processingSet}
+                        onSubmit={handleSubmit}
+                    />
+                </div>
+            </Card>
+        </>
+    );
+};
+
+Services.propTypes = {};
+
+export default Services;

client/src/components/Header/Menu.js

@@ -38,6 +38,7 @@ const FILTERS_ITEMS = [
     { route: FILTERS_URLS.dns_allowlists, text: 'dns_allowlists' },
     { route: FILTERS_URLS.dns_rewrites, text: 'dns_rewrites' },
     { route: FILTERS_URLS.custom_rules, text: 'custom_filtering_rules' },
+    { route: FILTERS_URLS.blocked_services, text: 'blocked_services' },
 ];
 
 class Menu extends Component {

client/src/components/Settings/index.js

@@ -2,7 +2,6 @@ import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import Services from './Services';
 import StatsConfig from './StatsConfig';
 import LogsConfig from './LogsConfig';
 import FiltersConfig from './FiltersConfig';
@@ -35,7 +34,6 @@ class Settings extends Component {
 
     componentDidMount() {
         this.props.initSettings(this.settings);
-        this.props.getBlockedServices();
         this.props.getStatsConfig();
         this.props.getLogsConfig();
         this.props.getFilteringStatus();
@@ -63,8 +61,6 @@ class Settings extends Component {
     render() {
         const {
             settings,
-            services,
-            setBlockedServices,
             setStatsConfig,
             resetStats,
             stats,
@@ -77,7 +73,6 @@ class Settings extends Component {
         } = this.props;
 
         const isDataReady = !settings.processing
-            && !services.processing
             && !stats.processingGetConfig
             && !queryLogs.processingGetConfig;
 
@@ -123,12 +118,6 @@ class Settings extends Component {
                                     resetStats={resetStats}
                                 />
                             </div>
-                            <div className="col-md-12">
-                                <Services
-                                    services={services}
-                                    setBlockedServices={setBlockedServices}
-                                />
-                            </div>
                         </div>
                     </div>
                 )}
@@ -147,14 +136,9 @@ Settings.propTypes = {
     setFiltersConfig: PropTypes.func.isRequired,
     getFilteringStatus: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
-    getBlockedServices: PropTypes.func,
     getLogsConfig: PropTypes.func,
-    setBlockedServices: PropTypes.func,
     setLogsConfig: PropTypes.func,
     clearLogs: PropTypes.func,
-    services: PropTypes.shape({
-        processing: PropTypes.bool,
-    }),
     stats: PropTypes.shape({
         processingGetConfig: PropTypes.bool,
         interval: PropTypes.number,

client/src/helpers/constants.js

@@ -161,6 +161,7 @@ export const FILTERS_URLS = {
     dns_allowlists: '/dns_allowlists',
     dns_rewrites: '/dns_rewrites',
     custom_rules: '/custom_rules',
+    blocked_services: '/blocked_services',
 };
 
 export const SERVICES = [

client/src/helpers/helpers.js

@@ -30,32 +30,39 @@ import {
 } from './constants';
 
 /**
- * @param string The time to format
- * @returns string Returns the time in the format HH:mm:ss
+ * @param time {string} The time to format
+ * @returns {string} Returns the time in the format HH:mm:ss
  */
 export const formatTime = (time) => {
     const parsedTime = dateParse(time);
     return dateFormat(parsedTime, DEFAULT_TIME_FORMAT);
 };
 
 /**
- * @param string The date to format
- * @returns string Returns the date and time in the format DD/MM/YYYY, HH:mm
+ * @param dateTime {string} The date to format
+ * @param [options] {object} Date.prototype.toLocaleString([locales[, options]]) options argument
+ * @returns {string} Returns the date and time in the specified format
  */
 export const formatDateTime = (dateTime, options = DEFAULT_DATE_FORMAT_OPTIONS) => {
-    const currentLanguage = i18n.languages[0] || DEFAULT_LANGUAGE;
-    const parsedTime = dateParse(dateTime);
+    const { language } = navigator;
+    const currentLanguage = (language.slice(0, 2) === 'en' || !language) ? 'en-GB' : language;
+
+    const parsedTime = new Date(dateTime);
 
     return parsedTime.toLocaleString(currentLanguage, options);
 };
 
+/**
+ * @param dateTime {string} The date to format
+ * @returns {string} Returns the date and time in the format with the full month name
+ */
 export const formatDetailedDateTime = (dateTime) => formatDateTime(
     dateTime, DETAILED_DATE_FORMAT_OPTIONS,
 );
 
 /**
- * @param string
- * @returns boolean
+ * @param date {string}
+ * @returns {boolean}
  */
 export const isToday = (date) => isSameDay(new Date(date), new Date());
 
@@ -307,15 +314,12 @@ export const normalizeTextarea = (text) => {
  * @returns {Object.<string, number>} normalizedTopClients.auto - auto clients
  * @returns {Object.<string, number>} normalizedTopClients.configured - configured clients
  */
-
 export const normalizeTopClients = (topClients) => topClients.reduce(
-    (nameToCountMap, clientObj) => {
+    (acc, clientObj) => {
         const { name, count, info: { name: infoName } } = clientObj;
-        // eslint-disable-next-line no-param-reassign
-        nameToCountMap.auto[name] = count;
-        // eslint-disable-next-line no-param-reassign
-        nameToCountMap.configured[infoName] = count;
-        return nameToCountMap;
+        acc.auto[name] = count;
+        acc.configured[infoName] = count;
+        return acc;
     }, {
         auto: {},
         configured: {},
@@ -483,8 +487,8 @@ export const getCurrentFilter = (url, filters) => {
 };
 
 /**
- * @param {object} initialValues
- * @param {object} values
+ * @param initialValues {object}
+ * @param values {object}
  * @returns {object} Returns different values of objects
  */
 export const getObjDiff = (initialValues, values) => Object.entries(values)
@@ -496,8 +500,8 @@ export const getObjDiff = (initialValues, values) => Object.entries(values)
     }, {});
 
 /**
- * @param number Number to format
- * @returns string Returns a string with a language-sensitive representation of this number
+ * @param num {number} to format
+ * @returns {string} Returns a string with a language-sensitive representation of this number
  */
 export const formatNumber = (num) => {
     const currentLanguage = i18n.languages[0] || DEFAULT_LANGUAGE;
@@ -508,7 +512,6 @@ export const normalizeMultiline = (multiline) => `${normalizeTextarea(multiline)
     .map((line) => line.trim())
     .join('\n')}\n`;
 
-
 /**
  * @param parsedIp {object} ipaddr.js IPv4 or IPv6 object
  * @param cidr {array} ipaddr.js CIDR array

go.mod

@@ -20,5 +20,6 @@ require (
 	golang.org/x/crypto v0.0.0-20200403201458-baeed622b8d8
 	golang.org/x/net v0.0.0-20200324143707-d3edc9973b7e
 	golang.org/x/sys v0.0.0-20200331124033-c3d80250170d
+	gopkg.in/natefinch/lumberjack.v2 v2.0.0
 	gopkg.in/yaml.v2 v2.2.8
 )