Merge: fix #1421

Full rework of the query log Squashed commit of the following: commit e8a72eb223551f17e637136713dae03accf8ab9e Author: Andrey Meshkov <am@adguard.com> Date: Thu Jun 18 00:31:53 2020 +0300 fix race in whois test commit 801d28197f888fa21f83c9a0b49e3c9472c08513 Merge: 9d9787fd b1c951fb Author: Andrey Meshkov <am@adguard.com> Date: Thu Jun 18 00:28:13 2020 +0300 Merge branch 'master' into feature/1421 commit 9d9787fd79b17f76c7baed52c12ac462fd00a5e4 Merge: 4ce337ca 08e238ab Author: Andrey Meshkov <am@adguard.com> Date: Thu Jun 18 00:27:32 2020 +0300 Merge commit 4ce337ca7aec163edf87a038bb25fb44e64f8613 Author: Andrey Meshkov <am@adguard.com> Date: Thu Jun 18 00:22:49 2020 +0300 -(home): fix whois test commit 08e238ab0e723b1e354f58245e9a8d5017b392c9 Author: ArtemBaskal <a.baskal@adguard.com> Date: Thu Jun 18 00:13:41 2020 +0300 Add comments commit 5f108065952bcc25dce1c2eee3f9401d2641a6e9 Author: ArtemBaskal <a.baskal@adguard.com> Date: Wed Jun 17 23:47:50 2020 +0300 Make tooltip position absolute for touch commit 4c30a583165e5d007d4b01b657de8751a7bd8c7b Author: ArtemBaskal <a.baskal@adguard.com> Date: Wed Jun 17 20:39:44 2020 +0300 Prevent scroll hide for touch devices commit 62da97931f5921613762614717c62c77ddb6b8db Author: ArtemBaskal <a.baskal@adguard.com> Date: Wed Jun 17 20:06:24 2020 +0300 Review changes: ipad tooltip commit 12dddcca8caca51c157b5d25dfa3ca03ba7f0c06 Author: ArtemBaskal <a.baskal@adguard.com> Date: Wed Jun 17 16:59:16 2020 +0300 Add close tooltip event for ipad commit 62191e41d5bf67317f9f1dc6c6af08cbabb4bf90 Author: ArtemBaskal <a.baskal@adguard.com> Date: Wed Jun 17 16:39:40 2020 +0300 Add success toast on logs refresh commit 2ebdd6a8124269d737c8060c3247aaf35d85cb8b Author: ArtemBaskal <a.baskal@adguard.com> Date: Wed Jun 17 16:01:37 2020 +0300 Fix pagination commit 5820c92bacd93d05a3d66d42ee95f099e1c5d9e9 Author: ArtemBaskal <a.baskal@adguard.com> Date: Wed Jun 17 11:31:15 2020 +0300 Revert "Render table in chunks" This reverts commit cdfcd849ccddc1bc35591edac7904129431470c9. commit cdfcd849ccddc1bc35591edac7904129431470c9 Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Jun 16 18:42:18 2020 +0300 Render table in chunks commit cc8c5e64274bf6e806e2e8a4bf305af745c3ed2a Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Jun 16 17:35:24 2020 +0300 Add pagination button hover effect commit f7e134091a1556784a5fea9d83c50353536126ef Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Jun 16 16:28:00 2020 +0300 Make loader position absolute commit a7b887b57d903f1f7ac967b861b5cc677728efc4 Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Jun 16 15:42:20 2020 +0300 Ignore clients find without params commit ecb322fefd4a161d79f28d17fe27827ee91701e4 Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Jun 16 15:30:48 2020 +0300 Styles changes commit 9323ce3938bf04e1290eade09201ba0790a250c0 Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Jun 16 14:32:23 2020 +0300 Review styles changes commit e0faa04ba3643f01b2ca99524cdd52b0731725c7 Merge: 98576823 15e71435 Author: ArtemBaskal <a.baskal@adguard.com> Date: Tue Jun 16 12:08:45 2020 +0300 Merge branch '1421-new-qlog-v2' into feature/1421 commit 9857682371e8d9a3a91933cfb58a26b3470675d9 Author: ArtemBaskal <a.baskal@adguard.com> Date: Mon Jun 15 18:32:02 2020 +0300 Fix response cell ... and 88 more commits
2020-06-18 00:36:19 +03:00
parent b1c951fb2c
commit e39fe1b913
81 changed files with 3415 additions and 1087 deletions
--- a/client/src/components/ui/CellWrap.js
+++ b/client/src/components/ui/CellWrap.js
@@ -9,7 +9,7 @@ const CellWrap = ({ value }, formatValue, formatTitle = formatValue) => {
    const cellTitle = typeof formatTitle === 'function' ? formatTitle(value) : value;

    return (
-        <div className="logs__row logs__row--overflow">
+        <div className="logs__row o-hidden">
            <span className="logs__text logs__text--full" title={cellTitle}>
                {cellValue}
            </span>
--- a/client/src/components/ui/Icons.css
+++ b/client/src/components/ui/Icons.css
@@ -4,7 +4,19 @@
    height: 100%;
 }

-.icon--close {
-    width: 24px;
-    height: 24px;
+.icon--small {
+    width: 1.5rem;
+    height: 1.5rem;
+}
+
+.icon--gray {
+    color: var(--gray-a5);
+}
+
+.icon--disabled {
+    color: var(--gray-d8);
+}
+
+.icon--active {
+    color: #66b574;
 }
--- a/client/src/components/ui/Icons.js
+++ b/client/src/components/ui/Icons.js
--- a/client/src/components/ui/Loading.js
+++ b/client/src/components/ui/Loading.js
@@ -3,7 +3,7 @@ import React from 'react';
 import './Loading.css';

 const Loading = () => (
-    <div className="loading"></div>
+    <div className="loading" />
 );

 export default Loading;
--- a/client/src/components/ui/PageTitle.css
+++ b/client/src/components/ui/PageTitle.css
@@ -3,13 +3,32 @@
    align-items: flex-start;
 }

+.page-header--logs {
+    flex-direction: row;
+    align-items: flex-end;
+    margin: 2rem 0 3rem;
+}
+
+@media (max-width: 991px) {
+    .page-header--logs {
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 1.5rem;
+    }
+
+    .page-header--logs .page-title {
+        padding-bottom: 2.5rem;;
+    }
+}
+
 .page-subtitle {
    margin-left: 0;
    font-size: 0.9rem;
 }

-.page-title {
-    line-height: 2.2rem;
+.page-title--large {
+    font-size: 36px;
+    line-height: 46px;
 }

 .page-title__actions {
--- a/client/src/components/ui/PageTitle.js
+++ b/client/src/components/ui/PageTitle.js
@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';

 import './PageTitle.css';

-const PageTitle = (props) => (
+const PageTitle = ({ title, subtitle, children }) => (
    <div className="page-header">
        <h1 className="page-title">
-            {props.title}
-            {props.children}
+            {title}
+            {children}
        </h1>
-        {props.subtitle && (
+        {subtitle && (
            <div className="page-subtitle">
-                {props.subtitle}
+                {subtitle}
            </div>
        )}
    </div>
--- a/client/src/components/ui/ReactTable.css
+++ b/client/src/components/ui/ReactTable.css
@@ -1,21 +1,26 @@
 .ReactTable .rt-th,
 .ReactTable .rt-td {
    padding: 10px 15px;
-    overflow: visible;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

 .ReactTable .rt-tbody {
    overflow: visible;
 }

-.rt-tr-group .red {
-    background-color: #fff4f2;
+.rt-tr-group.red {
+    background-color: rgba(223, 56, 18, 0.05);
 }

-.rt-tr-group .green {
-    background-color: #f1faf3;
+.rt-tr-group.green {
+    background-color: rgba(103, 178, 121, 0.1);
 }

-.rt-tr-group .blue {
-    background-color: #ecf7ff;
+.rt-tr-group.blue {
+    background-color: #e5effd;
+}
+
+.rt-tr-group.yellow {
+    background-color: var(--yellow-pale);
 }
--- a/client/src/components/ui/Tooltip.css
+++ b/client/src/components/ui/Tooltip.css
@@ -6,7 +6,6 @@
    width: 18px;
    height: 18px;
    flex-shrink: 0;
-    margin-left: 5px;
    background-image: url("./svg/help-circle.svg");
    background-size: 100%;
    cursor: pointer;
@@ -56,7 +55,6 @@
 .tooltip-custom--logs {
    border-radius: 50%;
    background-image: url("./svg/help-circle-gray.svg");
-    background-color: #fff;
 }

 .tooltip-custom--logs:before {
--- a/client/src/components/ui/Tooltip.js
+++ b/client/src/components/ui/Tooltip.js
@@ -3,9 +3,8 @@ import PropTypes from 'prop-types';

 import './Tooltip.css';

-const Tooltip = (props) => (
-    <div data-tooltip={props.text} className={`tooltip-custom ${props.type || ''}`}></div>
-);
+const Tooltip = ({ text, type = '' }) => <div data-tooltip={text}
+                                              className={`tooltip-custom ml-1 ${type}`} />;

 Tooltip.propTypes = {
    text: PropTypes.string.isRequired,