diff --git a/frontend/src/container/LogsAggregate/index.tsx b/frontend/src/container/LogsAggregate/index.tsx index 34200049c4..66a16f9ad3 100644 --- a/frontend/src/container/LogsAggregate/index.tsx +++ b/frontend/src/container/LogsAggregate/index.tsx @@ -3,7 +3,7 @@ import Graph from 'components/Graph'; import Spinner from 'components/Spinner'; import dayjs from 'dayjs'; import getStep from 'lib/getStep'; -import React, { memo, useEffect, useRef } from 'react'; +import React, { memo, useEffect, useMemo, useRef } from 'react'; import { connect, useSelector } from 'react-redux'; import { bindActionCreators, Dispatch } from 'redux'; import { ThunkDispatch } from 'redux-thunk'; @@ -77,6 +77,18 @@ function LogsAggregate({ getLogsAggregate }: LogsAggregateProps): JSX.Element { // eslint-disable-next-line react-hooks/exhaustive-deps }, [getLogsAggregate, maxTime, minTime, liveTail]); + const graphData = useMemo(() => { + return { + labels: logsAggregate.map((s) => new Date(s.timestamp / 1000000)), + datasets: [ + { + data: logsAggregate.map((s) => s.value), + backgroundColor: blue[4], + }, + ], + }; + }, [logsAggregate]); + return ( {isLoadingAggregate ? ( @@ -84,15 +96,7 @@ function LogsAggregate({ getLogsAggregate }: LogsAggregateProps): JSX.Element { ) : ( new Date(s.timestamp / 1000000)), - datasets: [ - { - data: logsAggregate.map((s) => s.value), - backgroundColor: blue[4], - }, - ], - }} + data={graphData} type="bar" containerHeight="100%" animate diff --git a/frontend/src/pages/Logs/index.tsx b/frontend/src/pages/Logs/index.tsx index 2799295146..80358b4018 100644 --- a/frontend/src/pages/Logs/index.tsx +++ b/frontend/src/pages/Logs/index.tsx @@ -6,6 +6,7 @@ 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 { connect, useDispatch } from 'react-redux'; @@ -18,16 +19,21 @@ import { SET_SEARCH_QUERY_STRING } from 'types/actions/logs'; import SpaceContainer from './styles'; function Logs({ getLogsFields }: LogsProps): JSX.Element { - const urlQuery = useUrlQuery(); + const getMountedState = useMountedState(); + const urlQuery = useUrlQuery(); const dispatch = useDispatch(); useEffect(() => { - dispatch({ - type: SET_SEARCH_QUERY_STRING, - payload: urlQuery.get('q'), - }); - }, [dispatch, urlQuery]); + const hasMounted = getMountedState(); + + if (!hasMounted) { + dispatch({ + type: SET_SEARCH_QUERY_STRING, + payload: urlQuery.get('q'), + }); + } + }, [dispatch, getMountedState, urlQuery]); useEffect(() => { getLogsFields();