From 7aa947c6f18fbde2daf33f06fadf0110e7923d70 Mon Sep 17 00:00:00 2001 From: Palash Date: Wed, 11 Jan 2023 00:31:46 +0530 Subject: [PATCH 1/9] feat: global time is updated --- frontend/src/container/LogControls/index.tsx | 47 ++++++++++++++++++- .../src/container/LogsSearchFilter/index.tsx | 16 +++++-- frontend/src/store/reducers/global.ts | 17 +++++++ frontend/src/store/reducers/logs.ts | 2 +- frontend/src/types/actions/globalTime.ts | 13 ++++- frontend/src/types/actions/logs.ts | 11 ++++- 6 files changed, 97 insertions(+), 9 deletions(-) diff --git a/frontend/src/container/LogControls/index.tsx b/frontend/src/container/LogControls/index.tsx index 319b9b5f0d..c756b793d1 100644 --- a/frontend/src/container/LogControls/index.tsx +++ b/frontend/src/container/LogControls/index.tsx @@ -4,6 +4,7 @@ import { RightOutlined, } from '@ant-design/icons'; import { Button, Divider, Select } from 'antd'; +import { getMinMax } from 'container/TopNav/AutoRefresh/config'; import React, { memo, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; @@ -13,6 +14,7 @@ import { RESET_ID_START_AND_END, SET_LOG_LINES_PER_PAGE, } from 'types/actions/logs'; +import { GlobalReducer } from 'types/reducer/globalTime'; import { ILogsReducer } from 'types/reducer/logs'; import { ITEMS_PER_PAGE_OPTIONS } from './config'; @@ -28,29 +30,72 @@ function LogControls(): JSX.Element | null { isLoadingAggregate, logs, } = useSelector((state) => state.logs); + const globalTime = useSelector( + (state) => state.globalTime, + ); const dispatch = useDispatch(); const handleLogLinesPerPageChange = (e: number): void => { + const { maxTime, minTime } = getMinMax( + globalTime.selectedTime, + globalTime.minTime, + globalTime.maxTime, + ); + dispatch({ type: SET_LOG_LINES_PER_PAGE, - payload: e, + payload: { + logLinesPerPage: e, + maxTime, + minTime, + }, }); }; const handleGoToLatest = (): void => { + const { maxTime, minTime } = getMinMax( + globalTime.selectedTime, + globalTime.minTime, + globalTime.maxTime, + ); + dispatch({ type: RESET_ID_START_AND_END, + payload: { + maxTime, + minTime, + }, }); }; const handleNavigatePrevious = (): void => { + const { maxTime, minTime } = getMinMax( + globalTime.selectedTime, + globalTime.minTime, + globalTime.maxTime, + ); + dispatch({ type: GET_PREVIOUS_LOG_LINES, + payload: { + maxTime, + minTime, + }, }); }; const handleNavigateNext = (): void => { + const { maxTime, minTime } = getMinMax( + globalTime.selectedTime, + globalTime.minTime, + globalTime.maxTime, + ); + dispatch({ type: GET_NEXT_LOG_LINES, + payload: { + minTime, + maxTime, + }, }); }; diff --git a/frontend/src/container/LogsSearchFilter/index.tsx b/frontend/src/container/LogsSearchFilter/index.tsx index 5f2c6d482d..d0b0ed395e 100644 --- a/frontend/src/container/LogsSearchFilter/index.tsx +++ b/frontend/src/container/LogsSearchFilter/index.tsx @@ -1,4 +1,5 @@ import { Input, InputRef, Popover } from 'antd'; +import { getMinMax } from 'container/TopNav/AutoRefresh/config'; import useUrlQuery from 'hooks/useUrlQuery'; import getStep from 'lib/getStep'; import { debounce } from 'lodash-es'; @@ -45,7 +46,7 @@ function SearchFilter({ AppState, ILogsReducer >((state) => state.logs); - const { maxTime, minTime } = useSelector( + const globalTime = useSelector( (state) => state.globalTime, ); const dispatch = useDispatch>(); @@ -86,6 +87,12 @@ function SearchFilter({ 0, ); } else { + const { maxTime, minTime } = getMinMax( + globalTime.selectedTime, + globalTime.minTime, + globalTime.maxTime, + ); + getLogs({ q: customQuery, limit: logLinesPerPage, @@ -117,8 +124,7 @@ function SearchFilter({ idStart, liveTail, logLinesPerPage, - maxTime, - minTime, + globalTime, ], ); @@ -145,12 +151,12 @@ function SearchFilter({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [ urlQueryString, - maxTime, - minTime, idEnd, idStart, logLinesPerPage, dispatch, + globalTime.maxTime, + globalTime.minTime, ]); return ( diff --git a/frontend/src/store/reducers/global.ts b/frontend/src/store/reducers/global.ts index 462076e54e..db338a256b 100644 --- a/frontend/src/store/reducers/global.ts +++ b/frontend/src/store/reducers/global.ts @@ -6,6 +6,12 @@ import { UPDATE_AUTO_REFRESH_INTERVAL, UPDATE_TIME_INTERVAL, } from 'types/actions/globalTime'; +import { + GET_NEXT_LOG_LINES, + GET_PREVIOUS_LOG_LINES, + RESET_ID_START_AND_END, + SET_LOG_LINES_PER_PAGE, +} from 'types/actions/logs'; import { GlobalReducer } from 'types/reducer/globalTime'; const intitalState: GlobalReducer = { @@ -53,6 +59,17 @@ const globalTimeReducer = ( }; } + case GET_NEXT_LOG_LINES: + case GET_PREVIOUS_LOG_LINES: + case RESET_ID_START_AND_END: + case SET_LOG_LINES_PER_PAGE: { + return { + ...state, + maxTime: action.payload.maxTime, + minTime: action.payload.minTime, + }; + } + default: return state; } diff --git a/frontend/src/store/reducers/logs.ts b/frontend/src/store/reducers/logs.ts index 5e1dc69977..417d61699f 100644 --- a/frontend/src/store/reducers/logs.ts +++ b/frontend/src/store/reducers/logs.ts @@ -126,7 +126,7 @@ export const LogsReducer = ( case SET_LOG_LINES_PER_PAGE: { return { ...state, - logLinesPerPage: action.payload, + logLinesPerPage: action.payload.logsLinesPerPage, }; } diff --git a/frontend/src/types/actions/globalTime.ts b/frontend/src/types/actions/globalTime.ts index 8ce1ff3963..24c28ee418 100644 --- a/frontend/src/types/actions/globalTime.ts +++ b/frontend/src/types/actions/globalTime.ts @@ -1,5 +1,12 @@ import { Time } from 'container/TopNav/DateTimeSelection/config'; +import { + NextLogsLines, + PreviousLogsLines, + ResetIdStartAndEnd, + SetLogsLinesPerPage, +} from './logs'; + export const UPDATE_TIME_INTERVAL = 'UPDATE_TIME_INTERVAL'; export const GLOBAL_TIME_LOADING_START = 'GLOBAL_TIME_LOADING_START'; export const UPDATE_AUTO_REFRESH_DISABLED = 'UPDATE_AUTO_REFRESH_DISABLED'; @@ -37,4 +44,8 @@ export type GlobalTimeAction = | UpdateTimeInterval | GlobalTimeLoading | UpdateAutoRefreshDisabled - | UpdateAutoRefreshInterval; + | UpdateAutoRefreshInterval + | NextLogsLines + | PreviousLogsLines + | ResetIdStartAndEnd + | SetLogsLinesPerPage; diff --git a/frontend/src/types/actions/logs.ts b/frontend/src/types/actions/logs.ts index e7a38f0116..5dcc7d407a 100644 --- a/frontend/src/types/actions/logs.ts +++ b/frontend/src/types/actions/logs.ts @@ -13,6 +13,8 @@ import { TLogsLiveTailState } from 'types/api/logs/liveTail'; import { ILog } from 'types/api/logs/log'; import { ILogsAggregate } from 'types/api/logs/logAggregate'; +import { GlobalTime } from './globalTime'; + // export const GET_SERVICE_LIST_SUCCESS = 'GET_SERVICE_LIST_SUCCESS'; // export const GET_SERVICE_LIST_LOADING_START = 'GET_SERVICE_LIST_LOADING_START'; // export const GET_SERVICE_LIST_ERROR = 'GET_SERVICE_LIST_ERROR'; @@ -75,17 +77,24 @@ export interface UpdateLogs { } export interface SetLogsLinesPerPage { type: typeof SET_LOG_LINES_PER_PAGE; - payload: number; + payload: { + logsLinesPerPage: number; + minTime: GlobalTime['minTime']; + maxTime: GlobalTime['maxTime']; + }; } export interface PreviousLogsLines { type: typeof GET_PREVIOUS_LOG_LINES; + payload: GlobalTime; } export interface NextLogsLines { type: typeof GET_NEXT_LOG_LINES; + payload: GlobalTime; } export interface ResetIdStartAndEnd { type: typeof RESET_ID_START_AND_END; + payload: GlobalTime; } export interface SetLoading { type: typeof SET_LOADING; From fcd2724e0e5566f8478e917f67be9874d2181b46 Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Wed, 11 Jan 2023 19:11:49 +0530 Subject: [PATCH 2/9] fix: logs updating the global time is updated for min and max time --- frontend/src/container/LogControls/index.tsx | 28 ------------------- .../src/container/LogsSearchFilter/index.tsx | 7 +---- frontend/src/store/reducers/global.ts | 12 ++------ frontend/src/types/actions/globalTime.ts | 12 ++------ frontend/src/types/actions/logs.ts | 4 --- 5 files changed, 5 insertions(+), 58 deletions(-) diff --git a/frontend/src/container/LogControls/index.tsx b/frontend/src/container/LogControls/index.tsx index c756b793d1..8cb9d2b968 100644 --- a/frontend/src/container/LogControls/index.tsx +++ b/frontend/src/container/LogControls/index.tsx @@ -36,18 +36,10 @@ function LogControls(): JSX.Element | null { const dispatch = useDispatch(); const handleLogLinesPerPageChange = (e: number): void => { - const { maxTime, minTime } = getMinMax( - globalTime.selectedTime, - globalTime.minTime, - globalTime.maxTime, - ); - dispatch({ type: SET_LOG_LINES_PER_PAGE, payload: { logLinesPerPage: e, - maxTime, - minTime, }, }); }; @@ -69,33 +61,13 @@ function LogControls(): JSX.Element | null { }; const handleNavigatePrevious = (): void => { - const { maxTime, minTime } = getMinMax( - globalTime.selectedTime, - globalTime.minTime, - globalTime.maxTime, - ); - dispatch({ type: GET_PREVIOUS_LOG_LINES, - payload: { - maxTime, - minTime, - }, }); }; const handleNavigateNext = (): void => { - const { maxTime, minTime } = getMinMax( - globalTime.selectedTime, - globalTime.minTime, - globalTime.maxTime, - ); - dispatch({ type: GET_NEXT_LOG_LINES, - payload: { - minTime, - maxTime, - }, }); }; diff --git a/frontend/src/container/LogsSearchFilter/index.tsx b/frontend/src/container/LogsSearchFilter/index.tsx index d0b0ed395e..7b98728d66 100644 --- a/frontend/src/container/LogsSearchFilter/index.tsx +++ b/frontend/src/container/LogsSearchFilter/index.tsx @@ -1,5 +1,4 @@ import { Input, InputRef, Popover } from 'antd'; -import { getMinMax } from 'container/TopNav/AutoRefresh/config'; import useUrlQuery from 'hooks/useUrlQuery'; import getStep from 'lib/getStep'; import { debounce } from 'lodash-es'; @@ -87,11 +86,7 @@ function SearchFilter({ 0, ); } else { - const { maxTime, minTime } = getMinMax( - globalTime.selectedTime, - globalTime.minTime, - globalTime.maxTime, - ); + const { maxTime, minTime } = globalTime; getLogs({ q: customQuery, diff --git a/frontend/src/store/reducers/global.ts b/frontend/src/store/reducers/global.ts index db338a256b..c7a029746e 100644 --- a/frontend/src/store/reducers/global.ts +++ b/frontend/src/store/reducers/global.ts @@ -6,12 +6,7 @@ import { UPDATE_AUTO_REFRESH_INTERVAL, UPDATE_TIME_INTERVAL, } from 'types/actions/globalTime'; -import { - GET_NEXT_LOG_LINES, - GET_PREVIOUS_LOG_LINES, - RESET_ID_START_AND_END, - SET_LOG_LINES_PER_PAGE, -} from 'types/actions/logs'; +import { RESET_ID_START_AND_END } from 'types/actions/logs'; import { GlobalReducer } from 'types/reducer/globalTime'; const intitalState: GlobalReducer = { @@ -59,10 +54,7 @@ const globalTimeReducer = ( }; } - case GET_NEXT_LOG_LINES: - case GET_PREVIOUS_LOG_LINES: - case RESET_ID_START_AND_END: - case SET_LOG_LINES_PER_PAGE: { + case RESET_ID_START_AND_END: { return { ...state, maxTime: action.payload.maxTime, diff --git a/frontend/src/types/actions/globalTime.ts b/frontend/src/types/actions/globalTime.ts index 24c28ee418..0150c744d7 100644 --- a/frontend/src/types/actions/globalTime.ts +++ b/frontend/src/types/actions/globalTime.ts @@ -1,11 +1,6 @@ import { Time } from 'container/TopNav/DateTimeSelection/config'; -import { - NextLogsLines, - PreviousLogsLines, - ResetIdStartAndEnd, - SetLogsLinesPerPage, -} from './logs'; +import { ResetIdStartAndEnd } from './logs'; export const UPDATE_TIME_INTERVAL = 'UPDATE_TIME_INTERVAL'; export const GLOBAL_TIME_LOADING_START = 'GLOBAL_TIME_LOADING_START'; @@ -45,7 +40,4 @@ export type GlobalTimeAction = | GlobalTimeLoading | UpdateAutoRefreshDisabled | UpdateAutoRefreshInterval - | NextLogsLines - | PreviousLogsLines - | ResetIdStartAndEnd - | SetLogsLinesPerPage; + | ResetIdStartAndEnd; diff --git a/frontend/src/types/actions/logs.ts b/frontend/src/types/actions/logs.ts index 17d1435859..78f912ce04 100644 --- a/frontend/src/types/actions/logs.ts +++ b/frontend/src/types/actions/logs.ts @@ -79,18 +79,14 @@ export interface SetLogsLinesPerPage { type: typeof SET_LOG_LINES_PER_PAGE; payload: { logsLinesPerPage: number; - minTime: GlobalTime['minTime']; - maxTime: GlobalTime['maxTime']; }; } export interface PreviousLogsLines { type: typeof GET_PREVIOUS_LOG_LINES; - payload: GlobalTime; } export interface NextLogsLines { type: typeof GET_NEXT_LOG_LINES; - payload: GlobalTime; } export interface ResetIdStartAndEnd { type: typeof RESET_ID_START_AND_END; From 450b8fc8121a6467de3a3c58b20d09741056b6be Mon Sep 17 00:00:00 2001 From: Palash Date: Sun, 15 Jan 2023 15:46:46 +0530 Subject: [PATCH 3/9] chore: logs is updated --- frontend/src/container/LogsFilters/config.ts | 1 + frontend/src/container/LogsFilters/index.tsx | 35 +++++-------------- .../src/container/LogsSearchFilter/index.tsx | 7 ++++ frontend/src/pages/Logs/index.tsx | 26 ++------------ 4 files changed, 19 insertions(+), 50 deletions(-) create mode 100644 frontend/src/container/LogsFilters/config.ts diff --git a/frontend/src/container/LogsFilters/config.ts b/frontend/src/container/LogsFilters/config.ts new file mode 100644 index 0000000000..11e46ca48b --- /dev/null +++ b/frontend/src/container/LogsFilters/config.ts @@ -0,0 +1 @@ +export const RESTRICTED_SELECTED_FIELDS = ['timestamp', 'id']; diff --git a/frontend/src/container/LogsFilters/index.tsx b/frontend/src/container/LogsFilters/index.tsx index 42d8bc500e..08fbfd7d38 100644 --- a/frontend/src/container/LogsFilters/index.tsx +++ b/frontend/src/container/LogsFilters/index.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/no-array-index-key */ import { red } from '@ant-design/colors'; import { CloseOutlined, PlusCircleFilled } from '@ant-design/icons'; import { Input } from 'antd'; @@ -7,21 +6,16 @@ import RemoveSelectedField from 'api/logs/RemoveFromSelectedField'; import CategoryHeading from 'components/Logs/CategoryHeading'; import { fieldSearchFilter } from 'lib/logs/fieldSearch'; import React, { memo, useState } from 'react'; -import { connect, useSelector } from 'react-redux'; -import { bindActionCreators, Dispatch } from 'redux'; -import { ThunkDispatch } from 'redux-thunk'; -import { GetLogsFields } from 'store/actions/logs/getFields'; +import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; -import AppActions from 'types/actions'; import { IInterestingFields, ISelectedFields } from 'types/api/logs/fields'; import { ILogsReducer } from 'types/reducer/logs'; +import { RESTRICTED_SELECTED_FIELDS } from './config'; import { FieldItem } from './FieldItem'; import { CategoryContainer, Container, FieldContainer } from './styles'; -const RESTRICTED_SELECTED_FIELDS = ['timestamp', 'id']; - -function LogsFilters({ getLogsFields }: LogsFiltersProps): JSX.Element { +function LogsFilters(): JSX.Element { const { fields: { interesting, selected }, } = useSelector((state) => state.logs); @@ -52,7 +46,7 @@ function LogsFilters({ getLogsFields }: LogsFiltersProps): JSX.Element { ...fieldData, selected: true, }); - getLogsFields(); + // getLogsFields(); setInterestingFieldLoading( interestingFieldLoading.filter((e) => e !== fieldIndex), @@ -75,7 +69,7 @@ function LogsFilters({ getLogsFields }: LogsFiltersProps): JSX.Element { selected: false, }); - getLogsFields(); + // getLogsFields(); setSelectedFieldLoading( interestingFieldLoading.filter((e) => e !== fieldIndex), @@ -98,7 +92,7 @@ function LogsFilters({ getLogsFields }: LogsFiltersProps): JSX.Element { .filter((field) => fieldSearchFilter(field.name, filterValuesInput)) .map((field, idx) => ( fieldSearchFilter(field.name, filterValuesInput)) .map((field, idx) => ( - {/* Extract Fields */} ); } -interface DispatchProps { - getLogsFields: () => (dispatch: Dispatch) => void; -} - -const mapDispatchToProps = ( - dispatch: ThunkDispatch, -): DispatchProps => ({ - getLogsFields: bindActionCreators(GetLogsFields, dispatch), -}); - -type LogsFiltersProps = DispatchProps; - -export default connect(null, mapDispatchToProps)(memo(LogsFilters)); +export default memo(LogsFilters); diff --git a/frontend/src/container/LogsSearchFilter/index.tsx b/frontend/src/container/LogsSearchFilter/index.tsx index 5063336af8..b62016e2cb 100644 --- a/frontend/src/container/LogsSearchFilter/index.tsx +++ b/frontend/src/container/LogsSearchFilter/index.tsx @@ -12,6 +12,7 @@ import React, { import { connect, useDispatch, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; +import { GetLogsFields } from 'store/actions/logs/getFields'; import { getLogs } from 'store/actions/logs/getLogs'; import { getLogsAggregate } from 'store/actions/logs/getLogsAggregate'; import { AppState } from 'store/reducers'; @@ -32,6 +33,7 @@ import { useSearchParser } from './useSearchParser'; function SearchFilter({ getLogs, getLogsAggregate, + getLogsFields, }: SearchFilterProps): JSX.Element { const { updateParsedQuery, @@ -69,6 +71,8 @@ function SearchFilter({ const handleSearch = useCallback( (customQuery: string) => { + getLogsFields(); + if (liveTail === 'PLAYING') { dispatch({ type: TOGGLE_LIVE_TAIL, @@ -120,6 +124,7 @@ function SearchFilter({ liveTail, logLinesPerPage, globalTime, + getLogsFields, ], ); @@ -195,6 +200,7 @@ function SearchFilter({ interface DispatchProps { getLogs: typeof getLogs; getLogsAggregate: typeof getLogsAggregate; + getLogsFields: typeof GetLogsFields; } type SearchFilterProps = DispatchProps; @@ -204,6 +210,7 @@ const mapDispatchToProps = ( ): DispatchProps => ({ getLogs: bindActionCreators(getLogs, dispatch), getLogsAggregate: bindActionCreators(getLogsAggregate, dispatch), + getLogsFields: bindActionCreators(GetLogsFields, dispatch), }); export default connect(null, mapDispatchToProps)(SearchFilter); diff --git a/frontend/src/pages/Logs/index.tsx b/frontend/src/pages/Logs/index.tsx index 80358b4018..74537a6c82 100644 --- a/frontend/src/pages/Logs/index.tsx +++ b/frontend/src/pages/Logs/index.tsx @@ -9,16 +9,12 @@ import LogsTable from 'container/LogsTable'; import useMountedState from 'hooks/useMountedState'; import useUrlQuery from 'hooks/useUrlQuery'; import React, { memo, useEffect } from 'react'; -import { connect, useDispatch } from 'react-redux'; -import { bindActionCreators, Dispatch } from 'redux'; -import { ThunkDispatch } from 'redux-thunk'; -import { GetLogsFields } from 'store/actions/logs/getFields'; -import AppActions from 'types/actions'; +import { useDispatch } from 'react-redux'; import { SET_SEARCH_QUERY_STRING } from 'types/actions/logs'; import SpaceContainer from './styles'; -function Logs({ getLogsFields }: LogsProps): JSX.Element { +function Logs(): JSX.Element { const getMountedState = useMountedState(); const urlQuery = useUrlQuery(); @@ -35,10 +31,6 @@ function Logs({ getLogsFields }: LogsProps): JSX.Element { } }, [dispatch, getMountedState, urlQuery]); - useEffect(() => { - getLogsFields(); - }, [getLogsFields]); - return ( <> (dispatch: Dispatch) => void; -} - -const mapDispatchToProps = ( - dispatch: ThunkDispatch, -): DispatchProps => ({ - getLogsFields: bindActionCreators(GetLogsFields, dispatch), -}); - -export default connect(null, mapDispatchToProps)(memo(Logs)); +export default memo(Logs); From c9e88453e166270dccb5806a3c75f1ebeda2b0d6 Mon Sep 17 00:00:00 2001 From: Palash Gupta Date: Thu, 19 Jan 2023 14:28:31 +0530 Subject: [PATCH 4/9] chore: removed duplicate action triggerance --- frontend/src/pages/Logs/index.tsx | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/frontend/src/pages/Logs/index.tsx b/frontend/src/pages/Logs/index.tsx index 74537a6c82..185b86dbd0 100644 --- a/frontend/src/pages/Logs/index.tsx +++ b/frontend/src/pages/Logs/index.tsx @@ -6,31 +6,11 @@ import LogsAggregate from 'container/LogsAggregate'; import LogsFilters from 'container/LogsFilters'; import LogsSearchFilter from 'container/LogsSearchFilter'; import LogsTable from 'container/LogsTable'; -import useMountedState from 'hooks/useMountedState'; -import useUrlQuery from 'hooks/useUrlQuery'; -import React, { memo, useEffect } from 'react'; -import { useDispatch } from 'react-redux'; -import { SET_SEARCH_QUERY_STRING } from 'types/actions/logs'; +import React, { memo } from 'react'; import SpaceContainer from './styles'; function Logs(): JSX.Element { - const getMountedState = useMountedState(); - - const urlQuery = useUrlQuery(); - const dispatch = useDispatch(); - - useEffect(() => { - const hasMounted = getMountedState(); - - if (!hasMounted) { - dispatch({ - type: SET_SEARCH_QUERY_STRING, - payload: urlQuery.get('q'), - }); - } - }, [dispatch, getMountedState, urlQuery]); - return ( <> Date: Thu, 19 Jan 2023 19:19:04 +0530 Subject: [PATCH 5/9] feat: onTagFilter is updated --- .../src/components/Logs/LogItem/index.tsx | 10 +- frontend/src/constants/theme.ts | 1 + .../src/container/LogsFilters/FieldItem.tsx | 96 ++++++++++------ frontend/src/container/LogsFilters/config.ts | 7 ++ frontend/src/container/LogsFilters/index.tsx | 104 ++++++++---------- frontend/src/container/LogsFilters/styles.ts | 10 +- frontend/src/container/LogsFilters/types.ts | 35 ++++++ frontend/src/container/LogsFilters/utils.ts | 91 +++++++++++++++ .../src/container/LogsSearchFilter/index.tsx | 12 +- .../LogsSearchFilter/useSearchParser.ts | 4 +- frontend/src/lib/logs/flatLogData.ts | 4 +- frontend/src/store/reducers/logs.ts | 22 ++++ frontend/src/types/actions/logs.ts | 35 +++--- 13 files changed, 293 insertions(+), 138 deletions(-) create mode 100644 frontend/src/container/LogsFilters/types.ts create mode 100644 frontend/src/container/LogsFilters/utils.ts diff --git a/frontend/src/components/Logs/LogItem/index.tsx b/frontend/src/components/Logs/LogItem/index.tsx index f6ee026e64..b236a4c58d 100644 --- a/frontend/src/components/Logs/LogItem/index.tsx +++ b/frontend/src/components/Logs/LogItem/index.tsx @@ -101,15 +101,9 @@ function LogItem({ logData }: LogItemProps): JSX.Element { {'{'} <> - + {flattenLogData.stream && ( - + )} ) => void; - fieldData: Record; - fieldIndex: number; - isLoading: boolean; - iconHoverText: string; -} -export function FieldItem({ +function FieldItem({ name, buttonIcon, buttonOnClick, @@ -23,33 +19,65 @@ export function FieldItem({ isLoading, iconHoverText, }: FieldItemProps): JSX.Element { - const [isHovered, setIsHovered] = useState(false); + const [isHovered, setIsHovered] = useState(false); const isDarkMode = useIsDarkMode(); + + const onClickHandler = useCallback(() => { + if (!isLoading && buttonOnClick) buttonOnClick({ fieldData, fieldIndex }); + }, [buttonOnClick, fieldData, fieldIndex, isLoading]); + + const renderContent = useMemo(() => { + if (isLoading) { + return } />; + } + + if (isHovered) { + return ( + {iconHoverText}}> +