+ client: handle filters configuration

client/src/helpers/constants.js

@@ -265,3 +265,5 @@ export const FILTERED_STATUS = {
 export const STATS_INTERVALS_DAYS = [1, 7, 30, 90];
 
 export const QUERY_LOG_INTERVALS_DAYS = [1, 7, 30, 90];
+
+export const FILTERS_INTERVALS_HOURS = [0, 1, 12, 24, 72, 168];

client/src/helpers/form.js

@@ -32,28 +32,36 @@ export const renderRadioField = ({
 }) => (
     <Fragment>
         <label className="custom-control custom-radio custom-control-inline">
-            <input
-                {...input}
-                type="radio"
-                className="custom-control-input"
-                disabled={disabled}
-            />
+            <input {...input} type="radio" className="custom-control-input" disabled={disabled} />
             <span className="custom-control-label">{placeholder}</span>
         </label>
-        {!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
+        {!disabled &&
+            touched &&
+            (error && <span className="form__message form__message--error">{error}</span>)}
     </Fragment>
 );
 
 export const renderSelectField = ({
-    input, placeholder, disabled, meta: { touched, error },
+    input,
+    placeholder,
+    subtitle,
+    disabled,
+    modifier = 'checkbox--form',
+    meta: { touched, error },
 }) => (
     <Fragment>
-        <label className="checkbox checkbox--form">
+        <label className={`checkbox ${modifier}`}>
             <span className="checkbox__marker" />
             <input {...input} type="checkbox" className="checkbox__input" disabled={disabled} />
             <span className="checkbox__label">
                 <span className="checkbox__label-text checkbox__label-text--long">
                     <span className="checkbox__label-title">{placeholder}</span>
+                    {subtitle && (
+                        <span
+                            className="checkbox__label-subtitle"
+                            dangerouslySetInnerHTML={{ __html: subtitle }}
+                        />
+                    )}
                 </span>
             </span>
         </label>
@@ -64,7 +72,12 @@ export const renderSelectField = ({
 );
 
 export const renderServiceField = ({
-    input, placeholder, disabled, modifier, icon, meta: { touched, error },
+    input,
+    placeholder,
+    disabled,
+    modifier,
+    icon,
+    meta: { touched, error },
 }) => (
     <Fragment>
         <label className={`service custom-switch ${modifier}`}>
@@ -81,7 +94,9 @@ export const renderServiceField = ({
                 <use xlinkHref={`#${icon}`} />
             </svg>
         </label>
-        {!disabled && touched && (error && <span className="form__message form__message--error">{error}</span>)}
+        {!disabled &&
+            touched &&
+            (error && <span className="form__message form__message--error">{error}</span>)}
     </Fragment>
 );
 

client/src/helpers/helpers.js

@@ -6,6 +6,7 @@ import addDays from 'date-fns/add_days';
 import subDays from 'date-fns/sub_days';
 import round from 'lodash/round';
 import axios from 'axios';
+import i18n from 'i18next';
 
 import {
     STANDARD_DNS_PORT,
@@ -19,6 +20,21 @@ export const formatTime = (time) => {
     return dateFormat(parsedTime, 'HH:mm:ss');
 };
 
+export const formatDateTime = (dateTime) => {
+    const currentLanguage = i18n.languages[0] || 'en';
+    const parsedTime = dateParse(dateTime);
+    const options = {
+        year: 'numeric',
+        month: 'numeric',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: false,
+    };
+
+    return parsedTime.toLocaleString(currentLanguage, options);
+};
+
 export const normalizeLogs = logs => logs.map((log) => {
     const {
         time,
@@ -74,18 +90,38 @@ export const normalizeTopStats = stats => (
 );
 
 export const normalizeFilteringStatus = (filteringStatus) => {
-    const { enabled, filters, user_rules: userRules } = filteringStatus;
-    const newFilters = filters ? filters.map((filter) => {
-        const {
-            id, url, enabled, lastUpdated: lastUpdated = Date.now(), name = 'Default name', rulesCount: rulesCount = 0,
-        } = filter;
+    const {
+        enabled, filters, user_rules: userRules, interval,
+    } = filteringStatus;
+    const newFilters = filters
+        ? filters.map((filter) => {
+            const {
+                id,
+                url,
+                enabled,
+                last_updated,
+                name = 'Default name',
+                rules_count: rules_count = 0,
+            } = filter;
 
-        return {
-            id, url, enabled, lastUpdated: formatTime(lastUpdated), name, rulesCount,
-        };
-    }) : [];
+            return {
+                id,
+                url,
+                enabled,
+                lastUpdated: last_updated ? formatDateTime(last_updated) : '–',
+                name,
+                rulesCount: rules_count,
+            };
+        })
+        : [];
     const newUserRules = Array.isArray(userRules) ? userRules.join('\n') : '';
-    return { enabled, userRules: newUserRules, filters: newFilters };
+
+    return {
+        enabled,
+        userRules: newUserRules,
+        filters: newFilters,
+        interval,
+    };
 };
 
 export const getPercent = (amount, number) => {
@@ -241,3 +277,5 @@ export const secondsToMilliseconds = (seconds) => {
 
     return seconds;
 };
+
+export const normalizeRulesTextarea = text => text && text.replace(/^\n/g, '').replace(/\n\s*\n/g, '\n');