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
This commit is contained in:
Artem Baskal
2020-06-18 00:36:19 +03:00
parent b1c951fb2c
commit e39fe1b913
81 changed files with 3415 additions and 1087 deletions

View File

@@ -79,16 +79,26 @@ class AutoClients extends Component {
},
]}
className="-striped -highlight card-table-overflow"
showPagination={true}
showPagination
defaultPageSize={10}
minRows={5}
previousText={t('previous_btn')}
nextText={t('next_btn')}
showPageSizeOptions={false}
showPageJump={false}
renderTotalPagesCount={() => false}
previousText={
<svg className="icons icon--small icon--gray w-100 h-100">
<use xlinkHref="#arrow-left" />
</svg>}
nextText={
<svg className="icons icon--small icon--gray w-100 h-100">
<use xlinkHref="#arrow-right" />
</svg>}
loadingText={t('loading_table_status')}
pageText={t('page_table_footer_text')}
ofText="/"
pageText=''
ofText=''
rowsText={t('rows_table_footer_text')}
noDataText={t('clients_not_found')}
getPaginationProps={() => ({ className: 'custom-pagination' })}
/>
</Card>
);

View File

@@ -91,7 +91,7 @@ class ClientsTable extends Component {
const { value } = row;
return (
<div className="logs__row logs__row--overflow">
<div className="logs__row o-hidden">
<span className="logs__text">
{value.map((address) => (
<div key={address} title={address}>
@@ -121,7 +121,7 @@ class ClientsTable extends Component {
);
return (
<div className="logs__row logs__row--overflow">
<div className="logs__row o-hidden">
<div className="logs__text">{title}</div>
</div>
);
@@ -167,7 +167,7 @@ class ClientsTable extends Component {
);
return (
<div className="logs__row logs__row--overflow">
<div className="logs__row o-hidden">
<div className="logs__text">{title}</div>
</div>
);
@@ -185,7 +185,7 @@ class ClientsTable extends Component {
}
return (
<div className="logs__row logs__row--overflow">
<div className="logs__row o-hidden">
<span className="logs__text">
{value.map((tag) => (
<div key={tag} title={tag} className="small">
@@ -282,16 +282,26 @@ class ClientsTable extends Component {
},
]}
className="-striped -highlight card-table-overflow"
showPagination={true}
showPagination
defaultPageSize={10}
minRows={5}
previousText={t('previous_btn')}
nextText={t('next_btn')}
showPageSizeOptions={false}
showPageJump={false}
renderTotalPagesCount={() => false}
previousText={
<svg className="icons icon--small icon--gray w-100 h-100">
<use xlinkHref="#arrow-left" />
</svg>}
nextText={
<svg className="icons icon--small icon--gray w-100 h-100">
<use xlinkHref="#arrow-right" />
</svg>}
loadingText={t('loading_table_status')}
pageText={t('page_table_footer_text')}
ofText="/"
pageText=''
ofText=''
rowsText={t('rows_table_footer_text')}
noDataText={t('clients_not_found')}
getPaginationProps={() => ({ className: 'custom-pagination' })}
/>
<button
type="button"

View File

@@ -89,7 +89,7 @@ const renderFieldsWrapper = (placeholder, buttonTitle) => function cell(row) {
onClick={() => fields.push()}
title={buttonTitle}
>
<svg className="icon icon--close">
<svg className="icon icon--small">
<use xlinkHref="#plus" />
</svg>
</button>

View File

@@ -32,11 +32,9 @@ const getFormattedWhois = (value, t) => {
const whoisCell = (t) => function cell(row) {
const { value } = row;
return (
<div className="logs__row logs__row--overflow">
<span className="logs__text logs__text--wrap">{getFormattedWhois(value, t)}</span>
</div>
);
return <div className="logs__row o-hidden">
<div className="logs__text logs__text--wrap">{getFormattedWhois(value, t)}</div>
</div>;
};
export default whoisCell;

View File

@@ -2,11 +2,11 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ReactTable from 'react-table';
import { Trans, withTranslation } from 'react-i18next';
import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../helpers/constants';
import { LEASES_TABLE_DEFAULT_PAGE_SIZE } from '../../../helpers/constants';
class Leases extends Component {
cellWrap = ({ value }) => (
<div className="logs__row logs__row--overflow">
<div className="logs__row o-hidden">
<span className="logs__text" title={value}>
{value}
</span>
@@ -37,9 +37,9 @@ class Leases extends Component {
Cell: this.cellWrap,
},
]}
pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
showPageSizeOptions={false}
showPagination={leases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
showPagination={leases.length > LEASES_TABLE_DEFAULT_PAGE_SIZE}
noDataText={t('dhcp_leases_not_found')}
minRows={6}
className="-striped -highlight card-table-overflow"

View File

@@ -2,13 +2,13 @@ import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import ReactTable from 'react-table';
import { Trans, withTranslation } from 'react-i18next';
import { SMALL_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
import { LEASES_TABLE_DEFAULT_PAGE_SIZE } from '../../../../helpers/constants';
import Modal from './Modal';
class StaticLeases extends Component {
cellWrap = ({ value }) => (
<div className="logs__row logs__row--overflow">
<div className="logs__row o-hidden">
<span className="logs__text" title={value}>
{value}
</span>
@@ -67,7 +67,7 @@ class StaticLeases extends Component {
<div className="logs__row logs__row--center">
<button
type="button"
className="btn btn-icon btn-outline-secondary btn-sm"
className="btn btn-icon btn-icon--green btn-outline-secondary btn-sm"
title={t('delete_table_action')}
disabled={processingDeleting}
onClick={() => this.handleDelete(ip, mac, hostname)
@@ -82,9 +82,9 @@ class StaticLeases extends Component {
},
},
]}
pageSize={SMALL_TABLE_DEFAULT_PAGE_SIZE}
pageSize={LEASES_TABLE_DEFAULT_PAGE_SIZE}
showPageSizeOptions={false}
showPagination={staticLeases.length > SMALL_TABLE_DEFAULT_PAGE_SIZE}
showPagination={staticLeases.length > LEASES_TABLE_DEFAULT_PAGE_SIZE}
noDataText={t('dhcp_static_leases_not_found')}
className="-striped -highlight card-table-overflow"
minRows={6}

View File

@@ -112,6 +112,11 @@
justify-content: center;
width: 30px;
height: 30px;
background-color: transparent;
}
.btn-icon--green {
color: var(--green);
}
.btn-icon-sm {