cotugno/AdGuardHome
2
Fork 0
mirror of https://github.com/AdguardTeam/AdGuardHome.git synced 2024-11-15 18:08:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

+ client: handle filter change

Browse Source
This commit is contained in:
Ildar Kamalov 2019-09-26 11:36:02 +03:00
parent 9ac6049405
commit f04c028e38
7 changed files with 71 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/package-lock.json generated vendored
View File

@ -9868,12 +9868,20 @@
"dev": true
},
"prop-types": {
"version": "15.6.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
"integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"requires": {
"loose-envify": "^1.3.1",
"object-assign": "^4.1.1"
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
},
"dependencies": {
"react-is": {
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz",
"integrity": "sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw=="
}
}
},
"proxy-addr": {
@ -10212,9 +10220,9 @@
}
},
"react-table": {
"version": "6.8.6",
"resolved": "https://registry.npmjs.org/react-table/-/react-table-6.8.6.tgz",
"integrity": "sha1-oK2LSDkxkFLVvvwBJgP7Fh5S7eM=",
"version": "6.10.3",
"resolved": "https://registry.npmjs.org/react-table/-/react-table-6.10.3.tgz",
"integrity": "sha512-sVlq2/rxVaQJywGD95+qGiMr/SMHFIFnXdx619BLOWE/Os5FOGtV6pQJNAjZixbQZiOu7dmBO1kME28uxh6wmA==",
"requires": {
"classnames": "^2.2.5"
}

4
client/package.json vendored
View File

@ -17,7 +17,7 @@
"i18next-browser-languagedetector": "^2.2.3",
"lodash": "^4.17.15",
"nanoid": "^1.2.3",
"prop-types": "^15.6.1",
"prop-types": "^15.7.2",
"react": "^16.4.0",
"react-click-outside": "^3.0.1",
"react-dom": "^16.4.0",
@ -27,7 +27,7 @@
"react-redux-loading-bar": "^4.0.7",
"react-router-dom": "^4.2.2",
"react-router-hash-link": "^1.2.2",
"react-table": "^6.8.6",
"react-table": "^6.10.3",
"react-transition-group": "^2.4.0",
"redux": "^4.0.0",
"redux-actions": "^2.4.0",

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

@ -5,6 +5,7 @@ import { addErrorToast, addSuccessToast } from './index';
import { normalizeLogs } from '../helpers/helpers';
export const setLogsPagination = createAction('LOGS_PAGINATION');
export const setLogsFilter = createAction('LOGS_FILTER');
export const getLogsRequest = createAction('GET_LOGS_REQUEST');
export const getLogsFailure = createAction('GET_LOGS_FAILURE');

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

@ -12,7 +12,7 @@ import {
formatDateTime,
isValidQuestionType,
} from '../../helpers/helpers';
import { SERVICES, FILTERED_STATUS, DEBOUNCE_TIMEOUT } from '../../helpers/constants';
import { SERVICES, FILTERED_STATUS, DEBOUNCE_TIMEOUT, DEFAULT_LOGS_FILTER } from '../../helpers/constants';
import { getTrackerData } from '../../helpers/trackers/trackers';
import { formatClientCell } from '../../helpers/formatClientCell';
@ -26,7 +26,7 @@ import './Logs.css';
const TABLE_FIRST_PAGE = 0;
const TABLE_DEFAULT_PAGE_SIZE = 50;
const INITIAL_REQUEST_DATA = ['', {}, TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
const INITIAL_REQUEST_DATA = ['', DEFAULT_LOGS_FILTER, TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE];
const FILTERED_REASON = 'Filtered';
const RESPONSE_FILTER = {
ALL: 'all',
@ -41,18 +41,16 @@ class Logs extends Component {
this.props.getLogsConfig();
}
getLogs = (lastRowTime, filter, page, pageSize) => {
getLogs = (lastRowTime, filter, page, pageSize, filtered) => {
if (this.props.queryLogs.enabled) {
this.props.getLogs({
lastRowTime, filter, page, pageSize,
lastRowTime, filter, page, pageSize, filtered,
});
}
};
refreshLogs = (lastRowTime, filter, page, pageSize, refreshLogs = true) => {
this.props.getLogs({
lastRowTime, filter, page, pageSize, refreshLogs,
});
refreshLogs = () => {
window.location.reload();
};
handleLogsFiltering = debounce((lastRowTime, filter, page, pageSize, filtered) => {
@ -265,25 +263,36 @@ class Logs extends Component {
};
fetchData = (state) => {
const {
filtered, pageSize, page, pages,
} = state;
const { allLogs } = this.props.queryLogs;
const isLastPage = pages && (page + 1 >= pages);
const isFiltersPresent = filtered.length > 0;
const filter = this.getFilters(filtered);
const { pageSize, page, pages } = state;
const { allLogs, filter } = this.props.queryLogs;
const isLastPage = page + 1 === pages;
if (isFiltersPresent) {
this.handleLogsFiltering('', filter, page, pageSize, true);
} else if (isLastPage) {
if (isLastPage) {
const lastRow = allLogs[allLogs.length - 1];
const lastRowTime = (lastRow && lastRow.time) || '';
this.getLogs(lastRowTime, filter, page, pageSize);
this.getLogs(lastRowTime, filter, page, pageSize, true);
} else {
this.props.setLogsPagination({ page, pageSize });
}
};
handleFilterChange = (filtered) => {
const filters = this.getFilters(filtered);
this.props.setLogsFilter(filters);
this.handleLogsFiltering('', filters, TABLE_FIRST_PAGE, TABLE_DEFAULT_PAGE_SIZE, true);
}
showTotalPagesCount = (pages) => {
const { total, isEntireLog } = this.props.queryLogs;
const showEllipsis = !isEntireLog && total >= 500;
return (
<span className="-totalPages">
{pages || 1}{showEllipsis && '…' }
</span>
);
}
renderLogs() {
const { queryLogs, dashboard, t } = this.props;
const { processingClients } = dashboard;
@ -362,7 +371,7 @@ class Logs extends Component {
loading={isLoading}
showPageJump={false}
onFetchData={this.fetchData}
onPageChange={page => this.setState({ page })}
onFilteredChange={this.handleFilterChange}
className="logs__table"
showPagination={true}
defaultPageSize={TABLE_DEFAULT_PAGE_SIZE}
@ -373,6 +382,7 @@ class Logs extends Component {
ofText={t('of_table_footer_text')}
rowsText={t('rows_table_footer_text')}
noDataText={t('no_logs_found')}
renderTotalPagesCount={this.showTotalPagesCount}
defaultFilterMethod={(filter, row) => {
const id = filter.pivotId || filter.id;
return row[id] !== undefined
@ -422,7 +432,7 @@ class Logs extends Component {
<button
type="button"
className="btn btn-icon btn-outline-primary btn-sm ml-3"
onClick={() => this.refreshLogs(...INITIAL_REQUEST_DATA)}
onClick={this.refreshLogs}
>
<svg className="icons">
<use xlinkHref="#refresh" />
@ -468,6 +478,7 @@ Logs.propTypes = {
getClients: PropTypes.func.isRequired,
getLogsConfig: PropTypes.func.isRequired,
setLogsPagination: PropTypes.func.isRequired,
setLogsFilter: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
};

3
client/src/containers/Logs.js
View File

@ -1,7 +1,7 @@
import { connect } from 'react-redux';
import { addSuccessToast, getClients } from '../actions';
import { getFilteringStatus, setRules } from '../actions/filtering';
import { getLogs, getLogsConfig, setLogsPagination } from '../actions/queryLogs';
import { getLogs, getLogsConfig, setLogsPagination, setLogsFilter } from '../actions/queryLogs';
import Logs from '../components/Logs';
const mapStateToProps = (state) => {
@ -18,6 +18,7 @@ const mapDispatchToProps = {
getClients,
getLogsConfig,
setLogsPagination,
setLogsFilter,
};
export default connect(

7
client/src/helpers/constants.js
View File

@ -318,3 +318,10 @@ export const DNS_RECORD_TYPES = [
'TXT',
'URI',
];
export const DEFAULT_LOGS_FILTER = {
domain: '',
client: '',
question_type: '',
response_status: '',
};

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

@ -1,6 +1,7 @@
import { handleActions } from 'redux-actions';
import * as actions from '../actions/queryLogs';
import { DEFAULT_LOGS_FILTER } from '../helpers/constants';
const queryLogs = handleActions(
{
@ -19,11 +20,15 @@ const queryLogs = handleActions(
};
},
[actions.setLogsFilter]: (state, { payload }) => (
{ ...state, filter: payload }
),
[actions.getLogsRequest]: state => ({ ...state, processingGetLogs: true }),
[actions.getLogsFailure]: state => ({ ...state, processingGetLogs: false }),
[actions.getLogsSuccess]: (state, { payload }) => {
const {
logs, lastRowTime, page, pageSize, filtered, refreshLogs,
logs, lastRowTime, page, pageSize, filtered,
} = payload;
let logsWithOffset = state.allLogs.length > 0 ? state.allLogs : logs;
let allLogs = logs;
@ -31,9 +36,7 @@ const queryLogs = handleActions(
if (lastRowTime) {
logsWithOffset = [...state.allLogs, ...logs];
allLogs = [...state.allLogs, ...logs];
}
if (filtered || refreshLogs) {
} else if (filtered) {
logsWithOffset = logs;
allLogs = logs;
}
@ -50,6 +53,7 @@ const queryLogs = handleActions(
total,
allLogs,
logs: logsSlice,
isEntireLog: logs.length < 1,
processingGetLogs: false,
};
},
@ -86,10 +90,11 @@ const queryLogs = handleActions(
logs: [],
interval: 1,
allLogs: [],
pages: 0,
offset: 0,
pages: 1,
total: 0,
enabled: true,
older_than: '',
filter: DEFAULT_LOGS_FILTER,
},
);