mirrors
/
AdGuardHome
mirror of https://github.com/AdguardTeam/AdGuardHome.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

+ client: load additional search results

This commit is contained in:
Ildar Kamalov 2019-11-18 14:51:09 +03:00
parent e243e69a6e
commit 62c8664fd7
7 changed files with 151 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
client/src/actions/queryLogs.js
View File

@ -3,6 +3,7 @@ import { createAction } from 'redux-actions';
import apiClient from '../api/Api';
import { addErrorToast, addSuccessToast } from './index';
import { normalizeLogs } from '../helpers/helpers';
import { TABLE_DEFAULT_PAGE_SIZE } from '../helpers/constants';
const getLogsWithParams = async (config) => {
const { older_than, filter, ...values } = config;
@ -15,6 +16,41 @@ const getLogsWithParams = async (config) => {
};
};
export const getAdditionalLogsRequest = createAction('GET_ADDITIONAL_LOGS_REQUEST');
export const getAdditionalLogsFailure = createAction('GET_ADDITIONAL_LOGS_FAILURE');
export const getAdditionalLogsSuccess = createAction('GET_ADDITIONAL_LOGS_SUCCESS');
const checkFilteredLogs = async (data, filter, dispatch, total) => {
const { logs, oldest } = data;
const totalData = total || { logs };
const needToGetAdditionalLogs = (logs.length < TABLE_DEFAULT_PAGE_SIZE ||
totalData.logs.length < TABLE_DEFAULT_PAGE_SIZE) &&
oldest !== '';
if (needToGetAdditionalLogs) {
dispatch(getAdditionalLogsRequest());
try {
const additionalLogs = await getLogsWithParams({ older_than: oldest, filter });
if (additionalLogs.logs.length > 0) {
return await checkFilteredLogs(additionalLogs, filter, dispatch, {
logs: [...totalData.logs, ...additionalLogs.logs],
oldest: additionalLogs.oldest,
});
}
dispatch(getAdditionalLogsSuccess());
return totalData;
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(getAdditionalLogsFailure(error));
}
}
dispatch(getAdditionalLogsSuccess());
return totalData;
};
export const setLogsPagination = createAction('LOGS_PAGINATION');
export const setLogsPage = createAction('SET_LOG_PAGE');
@ -22,11 +58,20 @@ export const getLogsRequest = createAction('GET_LOGS_REQUEST');
export const getLogsFailure = createAction('GET_LOGS_FAILURE');
export const getLogsSuccess = createAction('GET_LOGS_SUCCESS');
export const getLogs = config => async (dispatch) => {
export const getLogs = config => async (dispatch, getState) => {
dispatch(getLogsRequest());
try {
const logs = await getLogsWithParams(config);
dispatch(getLogsSuccess(logs));
const { isFiltered, filter, page } = getState().queryLogs;
const data = await getLogsWithParams({ ...config, filter });
if (isFiltered) {
const additionalData = await checkFilteredLogs(data, filter, dispatch);
const updatedData = additionalData.logs ? { ...data, ...additionalData } : data;
dispatch(getLogsSuccess(updatedData));
dispatch(setLogsPagination({ page, pageSize: TABLE_DEFAULT_PAGE_SIZE }));
} else {
dispatch(getLogsSuccess(data));
}
} catch (error) {
dispatch(addErrorToast({ error }));
dispatch(getLogsFailure(error));
@ -40,8 +85,11 @@ export const setLogsFilterSuccess = createAction('SET_LOGS_FILTER_SUCCESS');
export const setLogsFilter = filter => async (dispatch) => {
dispatch(setLogsFilterRequest());
try {
const logs = await getLogsWithParams({ older_than: '', filter });
dispatch(setLogsFilterSuccess(logs));
const data = await getLogsWithParams({ older_than: '', filter });
const additionalData = await checkFilteredLogs(data, filter, dispatch);
const updatedData = additionalData.logs ? { ...data, ...additionalData } : data;
dispatch(setLogsFilterSuccess({ ...updatedData, filter }));
dispatch(setLogsPage(0));
} catch (error) {
dispatch(addErrorToast({ error }));

22
client/src/components/Logs/Filters/Form.js
View File

@ -49,10 +49,10 @@ const Form = (props) => {
return (
<form onSubmit={handleChange}>
<div className="row">
<div className="col-3">
<div className="col-6 col-sm-3 my-2">
<Field
id="domain"
name="domain"
id="filter_domain"
name="filter_domain"
component={renderFilterField}
type="text"
className="form-control"
@ -61,10 +61,10 @@ const Form = (props) => {
onChange={handleChange}
/>
</div>
<div className="col-3">
<div className="col-6 col-sm-3 my-2">
<Field
id="type"
name="type"
id="filter_question_type"
name="filter_question_type"
component={renderField}
type="text"
className="form-control"
@ -72,9 +72,9 @@ const Form = (props) => {
onChange={handleChange}
/>
</div>
<div className="col-3">
<div className="col-6 col-sm-3 my-2">
<Field
name="response"
name="filter_response_status"
component="select"
className="form-control custom-select"
>
@ -86,10 +86,10 @@ const Form = (props) => {
</option>
</Field>
</div>
<div className="col-3">
<div className="col-6 col-sm-3 my-2">
<Field
id="client"
name="client"
id="filter_client"
name="filter_client"
component={renderFilterField}
type="text"
className="form-control"

33
client/src/components/Logs/Filters/index.js
View File

@ -1,24 +1,22 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import debounce from 'lodash/debounce';
import classnames from 'classnames';
import { DEBOUNCE_FILTER_TIMEOUT, RESPONSE_FILTER } from '../../../helpers/constants';
import { isValidQuestionType } from '../../../helpers/helpers';
import Form from './Form';
import Card from '../../ui/Card';
class Filters extends Component {
getFilters = (filtered) => {
const {
domain, client, type, response,
} = filtered;
return {
filter_domain: domain || '',
filter_client: client || '',
filter_question_type: isValidQuestionType(type) ? type.toUpperCase() : '',
filter_response_status: response === RESPONSE_FILTER.FILTERED ? response : '',
};
};
getFilters = ({
filter_domain, filter_question_type, filter_response_status, filter_client,
}) => ({
filter_domain: filter_domain || '',
filter_question_type: isValidQuestionType(filter_question_type) ? filter_question_type.toUpperCase() : '',
filter_response_status: filter_response_status === RESPONSE_FILTER.FILTERED ? filter_response_status : '',
filter_client: filter_client || '',
});
handleFormChange = debounce((values) => {
const filter = this.getFilters(values);
@ -26,13 +24,20 @@ class Filters extends Component {
}, DEBOUNCE_FILTER_TIMEOUT);
render() {
const { filter } = this.props;
const { filter, processingAdditionalLogs } = this.props;
const cardBodyClass = classnames({
'card-body': true,
'card-body--loading': processingAdditionalLogs,
});
return (
<Card bodyType={cardBodyClass}>
<Form
initialValues={filter}
onChange={this.handleFormChange}
/>
</Card>
);
}
}
@ -40,6 +45,8 @@ class Filters extends Component {
Filters.propTypes = {
filter: PropTypes.object.isRequired,
setLogsFilter: PropTypes.func.isRequired,
processingGetLogs: PropTypes.bool.isRequired,
processingAdditionalLogs: PropTypes.bool.isRequired,
};
export default Filters;

55
client/src/components/Logs/index.js
View File

@ -10,7 +10,7 @@ import {
formatTime,
formatDateTime,
} from '../../helpers/helpers';
import { SERVICES, FILTERED_STATUS, DEFAULT_LOGS_FILTER, RESPONSE_FILTER, TABLE_DEFAULT_PAGE_SIZE } from '../../helpers/constants';
import { SERVICES, FILTERED_STATUS, TABLE_DEFAULT_PAGE_SIZE } from '../../helpers/constants';
import { getTrackerData } from '../../helpers/trackers/trackers';
import { formatClientCell } from '../../helpers/formatClientCell';
@ -23,7 +23,7 @@ import Popover from '../ui/Popover';
import './Logs.css';
const TABLE_FIRST_PAGE = 0;
const INITIAL_REQUEST_DATA = ['', DEFAULT_LOGS_FILTER, TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
const INITIAL_REQUEST_DATA = ['', TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
const FILTERED_REASON = 'Filtered';
class Logs extends Component {
@ -35,10 +35,10 @@ class Logs extends Component {
this.props.getLogsConfig();
}
getLogs = (older_than, filter, page) => {
getLogs = (older_than, page) => {
if (this.props.queryLogs.enabled) {
this.props.getLogs({
older_than, filter, page, pageSize: TABLE_DEFAULT_PAGE_SIZE,
older_than, page, pageSize: TABLE_DEFAULT_PAGE_SIZE,
});
}
};
@ -218,18 +218,19 @@ class Logs extends Component {
fetchData = (state) => {
const { pages } = state;
const {
filter, oldest, page,
} = this.props.queryLogs;
const { oldest, page } = this.props.queryLogs;
const isLastPage = pages && (page + 1 === pages);
if (isLastPage) {
this.getLogs(oldest, filter, page);
} else {
this.props.setLogsPagination({ page, pageSize: TABLE_DEFAULT_PAGE_SIZE });
this.getLogs(oldest, page);
}
};
changePage = (page) => {
this.props.setLogsPage(page);
this.props.setLogsPagination({ page, pageSize: TABLE_DEFAULT_PAGE_SIZE });
};
renderLogs() {
const { queryLogs, dashboard, t } = this.props;
const { processingClients } = dashboard;
@ -250,7 +251,6 @@ class Logs extends Component {
accessor: 'domain',
minWidth: 180,
Cell: this.getDomainCell,
Filter: this.getFilterInput,
},
{
Header: t('type_table_header'),
@ -262,28 +262,6 @@ class Logs extends Component {
accessor: 'response',
minWidth: 250,
Cell: this.getResponseCell,
filterMethod: (filter, row) => {
if (filter.value === RESPONSE_FILTER.FILTERED) {
// eslint-disable-next-line no-underscore-dangle
const { reason } = row._original;
return this.checkFiltered(reason) || this.checkWhiteList(reason);
}
return true;
},
Filter: ({ filter, onChange }) => (
<select
className="form-control custom-select"
onChange={event => onChange(event.target.value)}
value={filter ? filter.value : RESPONSE_FILTER.ALL}
>
<option value={RESPONSE_FILTER.ALL}>
<Trans>show_all_filter_type</Trans>
</option>
<option value={RESPONSE_FILTER.FILTERED}>
<Trans>show_filtered_type</Trans>
</option>
</select>
),
},
{
Header: t('client_table_header'),
@ -291,7 +269,6 @@ class Logs extends Component {
maxWidth: 240,
minWidth: 240,
Cell: this.getClientCell,
Filter: this.getFilterInput,
},
];
@ -311,7 +288,7 @@ class Logs extends Component {
showPageJump={false}
showPageSizeOptions={false}
onFetchData={this.fetchData}
onPageChange={newPage => this.props.setLogsPage(newPage)}
onPageChange={this.changePage}
className="logs__table"
defaultPageSize={TABLE_DEFAULT_PAGE_SIZE}
previousText={t('previous_btn')}
@ -365,7 +342,9 @@ class Logs extends Component {
render() {
const { queryLogs, t } = this.props;
const { enabled, processingGetConfig } = queryLogs;
const {
enabled, processingGetConfig, processingAdditionalLogs, processingGetLogs,
} = queryLogs;
const refreshButton = enabled ? (
<button
@ -387,12 +366,12 @@ class Logs extends Component {
{enabled && processingGetConfig && <Loading />}
{enabled && !processingGetConfig && (
<Fragment>
<Card>
<Filters
filter={queryLogs.filter}
processingGetLogs={processingGetLogs}
processingAdditionalLogs={processingAdditionalLogs}
setLogsFilter={this.props.setLogsFilter}
/>
</Card>
<Card>{this.renderLogs()}</Card>
</Fragment>
)}

30
client/src/components/ui/Card.css
View File

@ -33,6 +33,36 @@
text-align: center;
}
.card-body--loading {
position: relative;
}
.card-body--loading:before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.6);
}
.card-body--loading:after {
content: "";
position: absolute;
z-index: 101;
left: 50%;
top: 50%;
width: 40px;
height: 40px;
margin-top: -20px;
margin-left: -20px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2047.6%2047.6%22%20height%3D%22100%25%22%20width%3D%22100%25%22%3E%3Cpath%20opacity%3D%22.235%22%20fill%3D%22%23979797%22%20d%3D%22M44.4%2011.9l-5.2%203c1.5%202.6%202.4%205.6%202.4%208.9%200%209.8-8%2017.8-17.8%2017.8-6.6%200-12.3-3.6-15.4-8.9l-5.2%203C7.3%2042.8%2015%2047.6%2023.8%2047.6c13.1%200%2023.8-10.7%2023.8-23.8%200-4.3-1.2-8.4-3.2-11.9z%22%2F%3E%3Cpath%20fill%3D%22%2366b574%22%20d%3D%22M3.2%2035.7C0%2030.2-.8%2023.8.8%2017.6%202.5%2011.5%206.4%206.4%2011.9%203.2%2017.4%200%2023.8-.8%2030%20.8c6.1%201.6%2011.3%205.6%2014.4%2011.1l-5.2%203c-2.4-4.1-6.2-7.1-10.8-8.3C23.8%205.4%2019%206%2014.9%208.4s-7.1%206.2-8.3%2010.8c-1.2%204.6-.6%209.4%201.8%2013.5l-5.2%203z%22%2F%3E%3C%2Fsvg%3E");
will-change: transform;
animation: clockwise 2s linear infinite;
}
.card-title-stats {
font-size: 13px;
color: #9aa0ac;

11
client/src/reducers/queryLogs.js
View File

@ -107,12 +107,23 @@ const queryLogs = handleActions(
...payload,
processingSetConfig: false,
}),
[actions.getAdditionalLogsRequest]: state => ({
...state, processingAdditionalLogs: true, processingGetLogs: true,
}),
[actions.getAdditionalLogsFailure]: state => ({
...state, processingAdditionalLogs: false, processingGetLogs: false,
}),
[actions.getAdditionalLogsSuccess]: state => ({
...state, processingAdditionalLogs: false, processingGetLogs: false,
}),
},
{
processingGetLogs: true,
processingClear: false,
processingGetConfig: false,
processingSetConfig: false,
processingAdditionalLogs: false,
logs: [],
interval: 1,
allLogs: [],