Pull request 743: + client: Query Logs Infinite Scroll

Merge in DNS/adguard-home from feature/infinite_scroll_query_logs to master Squashed commit of the following: commit 4407ef2e7c055066257da791fbd65e6b0a495729 Merge: 40b74522 0a4781be Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 16:20:23 2020 +0300 Merge branch 'master' into feature/infinite_scroll_query_logs commit 40b745225112cf8d664220ed8f484b0aa16e997c Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 15:46:27 2020 +0300 Remove dynamic translation of toasts commit f08fa7b8c6a243f6b10e924aebccc183ce7814fd Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 13:59:53 2020 +0300 Remove renderLimitIdx, update isEntireLog commit 0f1b02616faaa5759c0a3f6d8257117fa22094d9 Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 11:11:14 2020 +0300 Rename variables commit 0928570c689c1fa704af775382620d68893e7c1c Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 11:06:50 2020 +0300 Make query logs short polling function more expressive commit 9e773cbd6c287a1c799fa2680f3462508462ea7a Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Sep 1 11:06:19 2020 +0300 Fix Toast translation interface commit f9c57033e5adc5788954cf086b2f114dd8938bcb Author: ArtemBaskal <a.baskal@adguard.com> Date: Mon Aug 31 17:01:36 2020 +0300 Do not hide loader commit b86ba48613437f5559a748ad9aa4cf79d15db082 Author: ArtemBaskal <a.baskal@adguard.com> Date: Mon Aug 31 16:56:34 2020 +0300 Add dynamic translation for all toasts commit b9d1d9b447ca90a3c179e503fa5d4abd3516321e Author: ArtemBaskal <a.baskal@adguard.com> Date: Mon Aug 31 16:39:29 2020 +0300 Prevent getting query logs recursion if query is not changed commit e25189749f7912648cca4503cfa8d0ad898c4bb6 Author: ArtemBaskal <a.baskal@adguard.com> Date: Mon Aug 31 10:13:20 2020 +0300 Decrease page limit to 20 commit 8b248ac5276899de838abf2dc9a69e47599cfc12 Author: ArtemBaskal <a.baskal@adguard.com> Date: Fri Aug 28 18:47:12 2020 +0300 Return checkFilteredLogs commit bf2d65c4a3dca0da6b15f632ae11042b7c8e2045 Author: ArtemBaskal <a.baskal@adguard.com> Date: Fri Aug 28 18:33:51 2020 +0300 Review changes commit 01b5250f9d9136a1f334086d3e2f00d1a928b37b Author: ArtemBaskal <a.baskal@adguard.com> Date: Fri Aug 28 15:29:59 2020 +0300 Remove checkFilteredLogs commit 25b364c41e6a1489d930c8b3b39b1ab43723f29d Merge: 1dc66034 2c666cbd Author: Andrey Meshkov <am@adguard.com> Date: Fri Aug 28 14:28:47 2020 +0300 Merge branch 'feature/infinite_scroll_query_logs' of ssh://bit.adguard.com:7999/dns/adguard-home into feature/infinite_scroll_query_logs commit 1dc6603421cde9847e792bfe77ff6546e53fbc2a Author: Andrey Meshkov <am@adguard.com> Date: Fri Aug 28 14:28:01 2020 +0300 disregard maxFileScanEntries only if offset is set commit bad741ed7f1dccf6959d43d000b8c0150f526f9e Author: Andrey Meshkov <am@adguard.com> Date: Fri Aug 28 11:57:45 2020 +0300 Fix search behavior when limit is specified commit 2c666cbdde465cf17434126830dd99ceedfc4cbc Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Aug 27 18:50:28 2020 +0300 Hide table ref loader during data loading commit 8b4f7fe642ef9e87a979813dcdbd7817d64c27f9 Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Aug 27 18:43:24 2020 +0300 Repair search commit 26fae1ae01a789999b8a2181d60b35663a20460a Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Aug 27 17:59:27 2020 +0300 Resetting initial render index, change loader position on search commit e2c97ae1a288438267eef9aec71b979319674a71 Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Aug 27 16:02:03 2020 +0300 Change isScrolledIntoView ... and 32 more commits
2020-09-01 16:30:30 +03:00
parent 0a4781be97
commit 6b61429572
74 changed files with 1449 additions and 1861 deletions
--- a/client/src/helpers/constants.js
+++ b/client/src/helpers/constants.js
@@ -307,9 +307,7 @@ export const DEFAULT_LOGS_FILTER = {

 export const DEFAULT_LANGUAGE = 'en';

-export const TABLE_DEFAULT_PAGE_SIZE = 25;
-
-export const TABLE_FIRST_PAGE = 0;
+export const QUERY_LOGS_PAGE_LIMIT = 20;

 export const LEASES_TABLE_DEFAULT_PAGE_SIZE = 20;

@@ -327,85 +325,93 @@ export const FILTERED_STATUS = {

 export const RESPONSE_FILTER = {
    ALL: {
-        query: 'all',
-        label: 'all_queries',
+        QUERY: 'all',
+        LABEL: 'all_queries',
    },
    FILTERED: {
-        query: 'filtered',
-        label: 'filtered',
+        QUERY: 'filtered',
+        LABEL: 'filtered',
    },
    PROCESSED: {
-        query: 'processed',
-        label: 'show_processed_responses',
+        QUERY: 'processed',
+        LABEL: 'show_processed_responses',
    },
    BLOCKED: {
-        query: 'blocked',
-        label: 'show_blocked_responses',
+        QUERY: 'blocked',
+        LABEL: 'show_blocked_responses',
    },
    BLOCKED_THREATS: {
-        query: 'blocked_safebrowsing',
-        label: 'blocked_threats',
+        QUERY: 'blocked_safebrowsing',
+        LABEL: 'blocked_threats',
    },
    BLOCKED_ADULT_WEBSITES: {
-        query: 'blocked_parental',
-        label: 'blocked_adult_websites',
+        QUERY: 'blocked_parental',
+        LABEL: 'blocked_adult_websites',
    },
    ALLOWED: {
-        query: 'whitelisted',
-        label: 'allowed',
+        QUERY: 'whitelisted',
+        LABEL: 'allowed',
    },
    REWRITTEN: {
-        query: 'rewritten',
-        label: 'rewritten',
+        QUERY: 'rewritten',
+        LABEL: 'rewritten',
    },
    SAFE_SEARCH: {
-        query: 'safe_search',
-        label: 'safe_search',
+        QUERY: 'safe_search',
+        LABEL: 'safe_search',
    },
 };

 export const RESPONSE_FILTER_QUERIES = Object.values(RESPONSE_FILTER)
-    .reduce((acc, { query }) => {
-        acc[query] = query;
+    .reduce((acc, { QUERY }) => {
+        acc[QUERY] = QUERY;
        return acc;
    }, {});

+export const QUERY_STATUS_COLORS = {
+    BLUE: 'blue',
+    GREEN: 'green',
+    RED: 'red',
+    WHITE: 'white',
+    YELLOW: 'yellow',
+};
+
 export const FILTERED_STATUS_TO_META_MAP = {
    [FILTERED_STATUS.NOT_FILTERED_WHITE_LIST]: {
-        label: RESPONSE_FILTER.ALLOWED.label,
-        color: 'green',
+        LABEL: RESPONSE_FILTER.ALLOWED.LABEL,
+        COLOR: QUERY_STATUS_COLORS.GREEN,
    },
    [FILTERED_STATUS.NOT_FILTERED_NOT_FOUND]: {
-        label: RESPONSE_FILTER.PROCESSED.label,
-        color: 'white',
+        LABEL: RESPONSE_FILTER.PROCESSED.LABEL,
+        COLOR: QUERY_STATUS_COLORS.WHITE,
    },
    [FILTERED_STATUS.FILTERED_BLOCKED_SERVICE]: {
-        label: RESPONSE_FILTER.BLOCKED.label,
-        color: 'red',
+        LABEL: RESPONSE_FILTER.BLOCKED.LABEL,
+        COLOR: QUERY_STATUS_COLORS.RED,
    },
    [FILTERED_STATUS.FILTERED_SAFE_SEARCH]: {
-        label: RESPONSE_FILTER.SAFE_SEARCH.label,
-        color: 'yellow',
+        LABEL: RESPONSE_FILTER.SAFE_SEARCH.LABEL,
+        COLOR: QUERY_STATUS_COLORS.YELLOW,
    },
    [FILTERED_STATUS.FILTERED_BLACK_LIST]: {
-        label: RESPONSE_FILTER.BLOCKED.label,
-        color: 'red',
+        LABEL: RESPONSE_FILTER.BLOCKED.LABEL,
+        COLOR: QUERY_STATUS_COLORS.RED,
    },
    [FILTERED_STATUS.REWRITE]: {
-        label: RESPONSE_FILTER.REWRITTEN.label,
-        color: 'blue',
+        LABEL: RESPONSE_FILTER.REWRITTEN.LABEL,
+        COLOR: QUERY_STATUS_COLORS.BLUE,
    },
    [FILTERED_STATUS.REWRITE_HOSTS]: {
-        label: RESPONSE_FILTER.REWRITTEN.label,
-        color: 'blue',
+        LABEL: RESPONSE_FILTER.REWRITTEN.LABEL,
+        COLOR: QUERY_STATUS_COLORS.BLUE,
    },
    [FILTERED_STATUS.FILTERED_SAFE_BROWSING]: {
-        label: RESPONSE_FILTER.BLOCKED_THREATS.label,
-        color: 'yellow',
+        LABEL: RESPONSE_FILTER.BLOCKED_THREATS.LABEL,
+        COLOR: QUERY_STATUS_COLORS.YELLOW,
    },
    [FILTERED_STATUS.FILTERED_PARENTAL]: {
-        label: RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.label,
-        color: 'yellow',
+        LABEL: RESPONSE_FILTER.BLOCKED_ADULT_WEBSITES.LABEL,
+        COLOR: QUERY_STATUS_COLORS.YELLOW,
    },
 };

@@ -519,3 +525,17 @@ export const DHCP_DESCRIPTION_PLACEHOLDERS = {
        lease_duration: 'dhcp_form_lease_input',
    },
 };
+
+export const TOAST_TRANSITION_TIMEOUT = 500;
+
+export const TOAST_TYPES = {
+    SUCCESS: 'success',
+    ERROR: 'error',
+    NOTICE: 'notice',
+};
+
+export const TOAST_TIMEOUTS = {
+    [TOAST_TYPES.SUCCESS]: 5000,
+    [TOAST_TYPES.ERROR]: 30000,
+    [TOAST_TYPES.NOTICE]: 30000,
+};
--- a/client/src/helpers/helpers.js
+++ b/client/src/helpers/helpers.js
@@ -15,6 +15,7 @@ import { getTrackerData } from './trackers/trackers';

 import {
    CHECK_TIMEOUT,
+    CUSTOM_FILTERING_RULES_ID,
    DEFAULT_DATE_FORMAT_OPTIONS,
    DEFAULT_LANGUAGE,
    DEFAULT_TIME_FORMAT,
@@ -742,6 +743,30 @@ export const sortIp = (a, b) => {
    }
 };

+/**
+ * @param {array} filters
+ * @param {array} whitelistFilters
+ * @param {number} filterId
+ * @param {function} t - translate
+ * @returns {string}
+ */
+export const getFilterName = (
+    filters,
+    whitelistFilters,
+    filterId,
+    customFilterTranslationKey = 'custom_filter_rules',
+    resolveFilterName = (filter) => (filter ? filter.name : i18n.t('unknown_filter', { filterId })),
+) => {
+    if (filterId === CUSTOM_FILTERING_RULES_ID) {
+        return i18n.t(customFilterTranslationKey);
+    }
+
+    const matchIdPredicate = (filter) => filter.id === filterId;
+    const filter = filters.find(matchIdPredicate) || whitelistFilters.find(matchIdPredicate);
+
+    return resolveFilterName(filter);
+};
+
 /**
 * @param ip {string}
 * @param gateway_ip {string}
@@ -803,3 +828,11 @@ export const enrichWithConcatenatedIpAddresses = (interfaces) => Object.entries(
        acc[k].ip_addresses = ipv4_addresses.concat(ipv6_addresses);
        return acc;
    }, interfaces);
+
+export const isScrolledIntoView = (el) => {
+    const rect = el.getBoundingClientRect();
+    const elemTop = rect.top;
+    const elemBottom = rect.bottom;
+
+    return elemTop < window.innerHeight && elemBottom >= 0;
+};
--- a/client/src/helpers/renderFormattedClientCell.js
+++ b/client/src/helpers/renderFormattedClientCell.js
@@ -24,9 +24,17 @@ const getFormattedWhois = (whois) => {
    );
 };

-export const formatClientCell = (row, isDetailed = false, isLogs = true) => {
-    const { value, original: { info } } = row;
-    let whoisContainer = '';
+/**
+ * @param {string} value
+ * @param {object} info
+ * @param {string} info.name
+ * @param {object} info.whois_info
+ * @param {boolean} [isDetailed]
+ * @param {boolean} [isLogs]
+ * @returns {JSX.Element}
+ */
+export const renderFormattedClientCell = (value, info, isDetailed = false, isLogs = false) => {
+    let whoisContainer = null;
    let nameContainer = value;

    if (info) {
@@ -34,42 +42,28 @@ export const formatClientCell = (row, isDetailed = false, isLogs = true) => {
        const whoisAvailable = whois_info && Object.keys(whois_info).length > 0;

        if (name) {
-            if (isLogs) {
-                nameContainer = !whoisAvailable && isDetailed
-                    ? (
-                        <small title={value}>{value}</small>
-                    ) : (
-                        <div className="logs__text logs__text--nowrap" title={`${name} (${value})`}>
-                            {name}&nbsp;<small>{`(${value})`}</small>
-                        </div>
-                    );
+            const nameValue = <div className="logs__text logs__text--nowrap" title={`${name} (${value})`}>
+                {name}&nbsp;<small>{`(${value})`}</small>
+            </div>;
+
+            if (!isLogs) {
+                nameContainer = nameValue;
            } else {
-                nameContainer = (
-                    <div
-                        className="logs__text logs__text--nowrap"
-                        title={`${name} (${value})`}
-                    >
-                        {name}&nbsp;<small>{`(${value})`}</small>
-                    </div>
-                );
+                nameContainer = !whoisAvailable && isDetailed
+                    ? <small title={value}>{value}</small>
+                    : nameValue;
            }
        }

        if (whoisAvailable && isDetailed) {
-            whoisContainer = (
-                <div className="logs__text logs__text--wrap logs__text--whois">
+            whoisContainer = <div className="logs__text logs__text--wrap logs__text--whois">
                    {getFormattedWhois(whois_info)}
-                </div>
-            );
+                </div>;
        }
    }

-    return (
-        <div className="logs__text mw-100" title={value}>
-            <>
-                {nameContainer}
-                {whoisContainer}
-            </>
-        </div>
-    );
+    return <div className="logs__text mw-100" title={value}>
+        {nameContainer}
+        {whoisContainer}
+    </div>;
 };