Skip to content

Commit

Permalink
fix query log
Browse files Browse the repository at this point in the history
  • Loading branch information
@IldarKamalov
IldarKamalov committed Feb 14, 2025
1 parent 14a2685 commit 17c4c26
Show file tree
Hide file tree
Showing 9 changed files with 57 additions and 355 deletions.
22 changes: 12 additions & 10 deletions client/src/actions/queryLogs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import { createAction } from 'redux-actions';
import apiClient from '../api/Api';

import { normalizeLogs } from '../helpers/helpers';
import { DEFAULT_LOGS_FILTER, FORM_NAME, QUERY_LOGS_PAGE_LIMIT } from '../helpers/constants';
import { DEFAULT_LOGS_FILTER, QUERY_LOGS_PAGE_LIMIT } from '../helpers/constants';
import { addErrorToast, addSuccessToast } from './toasts';
import { SearchFormValues } from '../components/Logs';

const getLogsWithParams = async (config: any) => {
const { older_than, filter, ...values } = config;
Expand All @@ -27,12 +28,10 @@ export const getAdditionalLogsRequest = createAction('GET_ADDITIONAL_LOGS_REQUES
export const getAdditionalLogsFailure = createAction('GET_ADDITIONAL_LOGS_FAILURE');
export const getAdditionalLogsSuccess = createAction('GET_ADDITIONAL_LOGS_SUCCESS');

const shortPollQueryLogs = async (data: any, filter: any, dispatch: any, getState: any, total?: any) => {
const shortPollQueryLogs = async (data: any, filter: any, dispatch: any, currentQuery?: string, total?: any) => {
const { logs, oldest } = data;
const totalData = total || { logs };

const queryForm = getState().form[FORM_NAME.LOGS_FILTER];
const currentQuery = queryForm && queryForm.values.search;
const previousQuery = filter?.search;
const isQueryTheSame =
typeof previousQuery === 'string' && typeof currentQuery === 'string' && previousQuery === currentQuery;
Expand All @@ -51,7 +50,7 @@ const shortPollQueryLogs = async (data: any, filter: any, dispatch: any, getStat
filter,
});
if (additionalLogs.oldest.length > 0) {
return await shortPollQueryLogs(additionalLogs, filter, dispatch, getState, {
return await shortPollQueryLogs(additionalLogs, filter, dispatch, currentQuery, {
logs: [...totalData.logs, ...additionalLogs.logs],
oldest: additionalLogs.oldest,
});
Expand Down Expand Up @@ -91,17 +90,18 @@ export const updateLogs = () => async (dispatch: any, getState: any) => {
}
};

export const getLogs = () => async (dispatch: any, getState: any) => {
export const getLogs = (currentQuery?: string) => async (dispatch: any, getState: any) => {
dispatch(getLogsRequest());
try {
const { isFiltered, filter, oldest } = getState().queryLogs;

const data = await getLogsWithParams({
older_than: oldest,
filter,
});

if (isFiltered) {
const additionalData = await shortPollQueryLogs(data, filter, dispatch, getState);
const additionalData = await shortPollQueryLogs(data, filter, dispatch, currentQuery);
const updatedData = additionalData.logs ? { ...data, ...additionalData } : data;
dispatch(getLogsSuccess(updatedData));
} else {
Expand All @@ -122,21 +122,23 @@ export const setLogsFilterRequest = createAction('SET_LOGS_FILTER_REQUEST');
* @param {string} filter.response_status 'QUERY' field of RESPONSE_FILTER object
* @returns function
*/
export const setLogsFilter = (filter: any) => setLogsFilterRequest(filter);
export const setLogsFilter = (filter: SearchFormValues) => setLogsFilterRequest(filter);

export const setFilteredLogsRequest = createAction('SET_FILTERED_LOGS_REQUEST');
export const setFilteredLogsFailure = createAction('SET_FILTERED_LOGS_FAILURE');
export const setFilteredLogsSuccess = createAction('SET_FILTERED_LOGS_SUCCESS');

export const setFilteredLogs = (filter?: any) => async (dispatch: any, getState: any) => {
export const setFilteredLogs = (filter?: SearchFormValues) => async (dispatch: any) => {
dispatch(setFilteredLogsRequest());
try {
const data = await getLogsWithParams({
older_than: '',
filter,
});

const additionalData = await shortPollQueryLogs(data, filter, dispatch, getState);
const currentQuery = filter?.search;

const additionalData = await shortPollQueryLogs(data, filter, dispatch, currentQuery);
const updatedData = additionalData.logs ? { ...data, ...additionalData } : data;

dispatch(
Expand Down
32 changes: 5 additions & 27 deletions client/src/components/Logs/Filters/Form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useDispatch } from 'react-redux';

import { useHistory } from 'react-router-dom';
import classNames from 'classnames';
import { useForm } from 'react-hook-form';
import { useFormContext } from 'react-hook-form';
import {
DEBOUNCE_FILTER_TIMEOUT,
DEFAULT_LOGS_FILTER,
Expand All @@ -15,33 +15,22 @@ import {
import { setLogsFilter } from '../../../actions/queryLogs';
import useDebounce from '../../../helpers/useDebounce';

import { createOnBlurHandler, getLogsUrlParams } from '../../../helpers/helpers';
import { getLogsUrlParams } from '../../../helpers/helpers';

import { SearchField } from './SearchField';

export type FormValues = {
search: string;
response_status: string;
};
import { SearchFormValues } from '..';

type Props = {
initialValues: FormValues;
className?: string;
setIsLoading: (value: boolean) => void;
};

export const Form = ({ initialValues, className, setIsLoading }: Props) => {
export const Form = ({ className, setIsLoading }: Props) => {
const { t } = useTranslation();
const dispatch = useDispatch();
const history = useHistory();

const { register, watch, setValue } = useForm<FormValues>({
mode: 'onBlur',
defaultValues: {
search: initialValues.search || DEFAULT_LOGS_FILTER.search,
response_status: initialValues.response_status || DEFAULT_LOGS_FILTER.response_status,
},
});
const { register, watch, setValue } = useFormContext<SearchFormValues>();

const searchValue = watch('search');
const responseStatusValue = watch('response_status');
Expand Down Expand Up @@ -77,16 +66,6 @@ export const Form = ({ initialValues, className, setIsLoading }: Props) => {
}
};

const handleBlur = (e: React.FocusEvent<HTMLInputElement>) =>
createOnBlurHandler(
e,
{
value: e.target.value,
onChange: (v: string) => setValue('search', v),
},
(data: string) => data.trim(),
);

return (
<form
className="d-flex flex-wrap form-control--container"
Expand All @@ -97,7 +76,6 @@ export const Form = ({ initialValues, className, setIsLoading }: Props) => {
<SearchField
value={searchValue}
handleChange={(val) => setValue('search', val)}
onBlur={handleBlur}
onKeyDown={onEnterPress}
onClear={onInputClear}
placeholder={t('domain_or_client')}
Expand Down
6 changes: 6 additions & 0 deletions client/src/components/Logs/Filters/SearchField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,11 @@ export const SearchField = ({
handleChange(e.target.value);
};

const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
e.target.value = e.target.value.trim();
handleChange(e.target.value)
}

return (
<>
<div className="input-group-search input-group-search__icon--magnifier">
Expand All @@ -30,6 +35,7 @@ export const SearchField = ({
className={className}
value={value}
onChange={handleInputChange}
onBlur={handleBlur}
{...rest}
/>
{typeof value === 'string' && value.length > 0 && (
Expand Down
6 changes: 2 additions & 4 deletions client/src/components/Logs/Filters/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,16 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';

import { Form, FormValues } from './Form';
import { Form } from './Form';
import { refreshFilteredLogs } from '../../../actions/queryLogs';
import { addSuccessToast } from '../../../actions/toasts';

interface FiltersProps {
initialValues: FormValues;
processingGetLogs: boolean;
setIsLoading: (...args: unknown[]) => unknown;
}

const Filters = ({ initialValues, setIsLoading }: FiltersProps) => {
const Filters = ({ setIsLoading }: FiltersProps) => {
const { t } = useTranslation();
const dispatch = useDispatch();

Expand Down Expand Up @@ -40,7 +39,6 @@ const Filters = ({ initialValues, setIsLoading }: FiltersProps) => {
</h1>
<Form
setIsLoading={setIsLoading}
initialValues={initialValues}
/>
</div>
);
Expand Down
4 changes: 3 additions & 1 deletion client/src/components/Logs/InfiniteTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ interface InfiniteTableProps {
isLoading: boolean;
items: unknown[];
isSmallScreen: boolean;
currentQuery: string;
setDetailedDataCurrent: Dispatch<SetStateAction<any>>;
setButtonType: (...args: unknown[]) => unknown;
setModalOpened: (...args: unknown[]) => unknown;
Expand All @@ -27,6 +28,7 @@ const InfiniteTable = ({
isLoading,
items,
isSmallScreen,
currentQuery,
setDetailedDataCurrent,
setButtonType,
setModalOpened,
Expand All @@ -43,7 +45,7 @@ const InfiniteTable = ({

const listener = useCallback(() => {
if (!loadingRef.current && loader.current && isScrolledIntoView(loader.current)) {
dispatch(getLogs());
dispatch(getLogs(currentQuery));
}
}, []);

Expand Down
36 changes: 25 additions & 11 deletions client/src/components/Logs/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@ import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import queryString from 'query-string';
import classNames from 'classnames';
import { BLOCK_ACTIONS, MEDIUM_SCREEN_SIZE } from '../../helpers/constants';
import { FormProvider, useForm } from 'react-hook-form';
import { BLOCK_ACTIONS, DEFAULT_LOGS_FILTER, MEDIUM_SCREEN_SIZE } from '../../helpers/constants';

import Loading from '../ui/Loading';

Expand All @@ -29,6 +30,11 @@ import { BUTTON_PREFIX } from './Cells/helpers';
import AnonymizerNotification from './AnonymizerNotification';
import { RootState } from '../../initialState';

export type SearchFormValues = {
search: string;
response_status: string;
};

const processContent = (data: any, _buttonType: string) =>
Object.entries(data).map(([key, value]) => {
if (!value) {
Expand Down Expand Up @@ -76,7 +82,6 @@ const Logs = () => {
const {
enabled,
processingGetConfig,
// processingAdditionalLogs,
processingGetLogs,
anonymize_client_ip: anonymizeClientIp,
} = useSelector((state: RootState) => state.queryLogs, shallowEqual);
Expand All @@ -88,6 +93,17 @@ const Logs = () => {
const search = search_url_param || filter?.search || '';
const response_status = response_status_url_param || filter?.response_status || '';

const formMethods = useForm<SearchFormValues>({
mode: 'onBlur',
defaultValues: {
search: search || DEFAULT_LOGS_FILTER.search,
response_status: response_status || DEFAULT_LOGS_FILTER.response_status,
},
});

const { watch } = formMethods;
const currentQuery = watch('search');

const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= MEDIUM_SCREEN_SIZE);
const [detailedDataCurrent, setDetailedDataCurrent] = useState({});
const [buttonType, setButtonType] = useState(BLOCK_ACTIONS.BLOCK);
Expand Down Expand Up @@ -174,15 +190,12 @@ const Logs = () => {

const renderPage = () => (
<>
<Filters
initialValues={{
response_status,
search,
}}
setIsLoading={setIsLoading}
processingGetLogs={processingGetLogs}
// processingAdditionalLogs={processingAdditionalLogs}
/>
<FormProvider {...formMethods}>
<Filters
setIsLoading={setIsLoading}
processingGetLogs={processingGetLogs}
/>
</FormProvider>

<InfiniteTable
isLoading={isLoading}
Expand All @@ -191,6 +204,7 @@ const Logs = () => {
setDetailedDataCurrent={setDetailedDataCurrent}
setButtonType={setButtonType}
setModalOpened={setModalOpened}
currentQuery={currentQuery}
/>

<Modal
Expand Down
Loading

0 comments on commit 17c4c26

Please sign in to comment.