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

client/src/components/ui/Card.css

@@ -118,14 +118,14 @@
     }
 }
 
-.card .red {
+.card .logs__cell--red {
     background-color: #fff4f2;
 }
 
-.card .green {
+.card .logs__cell--green {
     background-color: #f1faf3;
 }
 
-.card .blue {
+.card .logs__row--blue {
     background-color: #ecf7ff;
 }

client/src/components/ui/Loading.css

@@ -13,8 +13,7 @@
     z-index: 100;
     width: 100%;
     min-height: 100vh;
-    background-color: rgba(255, 255, 255, 0.6);
-    opacity: 0.8;
+    background-color: rgba(255, 255, 255, 0.48);
 }
 
 .loading:after {

client/src/components/ui/Loading.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
 import './Loading.css';
 
-const Loading = ({ className }) => (
-    <div className={classNames('loading', className)} />
-);
+const Loading = ({ className, text }) => {
+    const { t } = useTranslation();
+    return <div className={classNames('loading', className)}>{t(text)}</div>;
+};
 
 Loading.propTypes = {
     className: PropTypes.string,
+    text: PropTypes.string,
 };
 
 export default Loading;

client/src/components/ui/ReactTable.css

@@ -13,18 +13,18 @@
     overflow: visible;
 }
 
-.rt-tr-group.red {
+.rt-tr-group.logs__row--red {
     background-color: rgba(223, 56, 18, 0.05);
 }
 
-.rt-tr-group.green {
+.rt-tr-group.logs__row--green {
     background-color: rgba(103, 178, 121, 0.1);
 }
 
-.rt-tr-group.blue {
+.rt-tr-group.logs__row--blue {
     background-color: #e5effd;
 }
 
-.rt-tr-group.yellow {
+.rt-tr-group.logs__row--yellow {
     background-color: var(--yellow-pale);
 }

client/src/components/ui/Tooltip.js

@@ -34,33 +34,47 @@ const Tooltip = ({
         delayShowValue = 0;
     }
 
+    const renderTooltip = ({ tooltipRef, getTooltipProps }) => (
+            <div
+                    {...getTooltipProps({
+                        ref: tooltipRef,
+                        className,
+                    })}
+            >
+                {typeof content === 'string' ? t(content) : content}
+            </div>
+    );
+
+    const renderTrigger = ({ getTriggerProps, triggerRef }) => (
+            <span
+                    {...getTriggerProps({
+                        ref: triggerRef,
+                        className: triggerClass,
+                    })}
+            >
+                    {children}
+                </span>
+    );
+
+    renderTooltip.propTypes = {
+        tooltipRef: propTypes.object,
+        getTooltipProps: propTypes.func,
+    };
+
+    renderTrigger.propTypes = {
+        triggerRef: propTypes.object,
+        getTriggerProps: propTypes.func,
+    };
+
     return (
         <TooltipTrigger
             placement={placement}
             trigger={triggerValue}
             delayHide={delayHideValue}
             delayShow={delayShowValue}
-            tooltip={({ tooltipRef, getTooltipProps }) => (
-                <div
-                    {...getTooltipProps({
-                        ref: tooltipRef,
-                        className,
-                    })}
-                >
-                    {typeof content === 'string' ? t(content) : content}
-                </div>
-            )}
+            tooltip={renderTooltip}
         >
-            {({ getTriggerProps, triggerRef }) => (
-                <span
-                    {...getTriggerProps({
-                        ref: triggerRef,
-                        className: triggerClass,
-                    })}
-                >
-                    {children}
-                </span>
-            )}
+            {renderTrigger}
         </TooltipTrigger>
     );
 };