diff --git a/frontend/src/components/Logs/ListLogView/index.tsx b/frontend/src/components/Logs/ListLogView/index.tsx index 74deef6cdf..10790255cf 100644 --- a/frontend/src/components/Logs/ListLogView/index.tsx +++ b/frontend/src/components/Logs/ListLogView/index.tsx @@ -9,6 +9,7 @@ import dayjs from 'dayjs'; import dompurify from 'dompurify'; import { useActiveLog } from 'hooks/logs/useActiveLog'; import { useCopyLogLink } from 'hooks/logs/useCopyLogLink'; +import { useIsDarkMode } from 'hooks/useDarkMode'; // utils import { FlatLogData } from 'lib/logs/flatLogData'; import { useCallback, useMemo, useState } from 'react'; @@ -114,6 +115,8 @@ function ListLogView({ onClearActiveLog: handleClearActiveContextLog, } = useActiveLog(); + const isDarkMode = useIsDarkMode(); + const handlerClearActiveContextLog = useCallback( (event: React.MouseEvent | React.KeyboardEvent) => { event.preventDefault(); @@ -163,6 +166,7 @@ function ListLogView({ <> ` width: 100% !important; margin-bottom: 0.3rem; cursor: pointer; .ant-card-body { padding: 0.3rem 0.6rem; - } - ${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)} + ${({ $isActiveLog, $isDarkMode }): string => + $isActiveLog + ? `background-color: ${ + $isDarkMode ? Color.BG_SLATE_500 : Color.BG_VANILLA_300 + } !important` + : ''} + } `; export const Text = styled(Typography.Text)` diff --git a/frontend/src/components/Logs/RawLogView/styles.ts b/frontend/src/components/Logs/RawLogView/styles.ts index 5806ce2b48..357eed0324 100644 --- a/frontend/src/components/Logs/RawLogView/styles.ts +++ b/frontend/src/components/Logs/RawLogView/styles.ts @@ -30,6 +30,14 @@ export const RawLogViewContainer = styled(Row)<{ $isActiveLog ? getActiveLogBackground($isActiveLog, $isDarkMode) : getDefaultLogBackground($isReadOnly, $isDarkMode)} + + ${({ $isHightlightedLog, $isDarkMode }): string => + $isHightlightedLog + ? `background-color: ${ + $isDarkMode ? Color.BG_SLATE_500 : Color.BG_VANILLA_300 + }; + transition: background-color 2s ease-in;` + : ''} `; export const ExpandIconWrapper = styled(Col)` diff --git a/frontend/src/components/Logs/TableView/types.ts b/frontend/src/components/Logs/TableView/types.ts index 3176101d9d..36a796ac0f 100644 --- a/frontend/src/components/Logs/TableView/types.ts +++ b/frontend/src/components/Logs/TableView/types.ts @@ -23,6 +23,7 @@ export type UseTableViewProps = { onOpenLogsContext?: (log: ILog) => void; onClickExpand?: (log: ILog) => void; activeLog?: ILog | null; + activeLogIndex?: number; activeContextLog?: ILog | null; isListViewPanel?: boolean; } & LogsTableViewProps; diff --git a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx index 3d208c0e93..7be2927445 100644 --- a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx +++ b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx @@ -122,12 +122,14 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element { fields: selectedFields, linesPerRow: options.maxLines, appendTo: 'end', + activeLogIndex, }} /> ) : ( ( <> ` td { - ${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)} + ${({ $isActiveLog, $isDarkMode }): string => + $isActiveLog + ? `background-color: ${ + $isDarkMode ? Color.BG_SLATE_500 : Color.BG_VANILLA_300 + } !important` + : ''} } cursor: pointer; diff --git a/frontend/src/container/LogsExplorerList/index.tsx b/frontend/src/container/LogsExplorerList/index.tsx index dbc38b7923..21b03cf413 100644 --- a/frontend/src/container/LogsExplorerList/index.tsx +++ b/frontend/src/container/LogsExplorerList/index.tsx @@ -16,7 +16,7 @@ import { useOptionsMenu } from 'container/OptionsMenu'; import { useActiveLog } from 'hooks/logs/useActiveLog'; import { useCopyLogLink } from 'hooks/logs/useCopyLogLink'; import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder'; -import { memo, useCallback, useEffect, useMemo, useRef } from 'react'; +import { memo, useCallback, useMemo, useRef } from 'react'; import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'; // interfaces import { ILog } from 'types/api/logs/log'; @@ -103,16 +103,6 @@ function LogsExplorerList({ ], ); - useEffect(() => { - if (!activeLogId || activeLogIndex < 0) return; - - ref?.current?.scrollToIndex({ - index: activeLogIndex, - align: 'start', - behavior: 'smooth', - }); - }, [activeLogId, activeLogIndex]); - const renderContent = useMemo(() => { const components = isLoading ? { @@ -130,6 +120,7 @@ function LogsExplorerList({ fields: selectedFields, linesPerRow: options.maxLines, appendTo: 'end', + activeLogIndex, }} infitiyTableProps={{ onEndReached }} /> @@ -143,6 +134,7 @@ function LogsExplorerList({ > ); - }, [isLoading, options, logs, onEndReached, getItemContent, selectedFields]); + }, [ + isLoading, + options.format, + options.maxLines, + activeLogIndex, + logs, + onEndReached, + getItemContent, + selectedFields, + ]); return (
diff --git a/frontend/src/hooks/logs/useCopyLogLink.ts b/frontend/src/hooks/logs/useCopyLogLink.ts index 35b4293f51..b663aa750c 100644 --- a/frontend/src/hooks/logs/useCopyLogLink.ts +++ b/frontend/src/hooks/logs/useCopyLogLink.ts @@ -11,11 +11,8 @@ import { useMemo, useState, } from 'react'; -import { useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import { useCopyToClipboard } from 'react-use'; -import { AppState } from 'store/reducers'; -import { GlobalReducer } from 'types/reducer/globalTime'; import { HIGHLIGHTED_DELAY } from './configs'; import { LogTimeRange, UseCopyLogLink } from './types'; @@ -25,9 +22,6 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => { const { pathname } = useLocation(); const [, setCopy] = useCopyToClipboard(); const { notifications } = useNotifications(); - const { maxTime, minTime } = useSelector( - (state) => state.globalTime, - ); const { queryData: timeRange } = useUrlQueryData( QueryParams.timeRange, @@ -70,8 +64,8 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => { urlQuery.delete(QueryParams.timeRange); urlQuery.set(QueryParams.activeLogId, `"${logId}"`); urlQuery.set(QueryParams.timeRange, range); - urlQuery.set(QueryParams.startTime, minTime.toString()); - urlQuery.set(QueryParams.endTime, maxTime.toString()); + urlQuery.set(QueryParams.startTime, timeRange?.start.toString() || ''); + urlQuery.set(QueryParams.endTime, timeRange?.end.toString() || ''); const link = `${window.location.origin}${pathname}?${urlQuery.toString()}`; @@ -80,16 +74,7 @@ export const useCopyLogLink = (logId?: string): UseCopyLogLink => { message: 'Copied to clipboard', }); }, - [ - logId, - timeRange, - urlQuery, - minTime, - maxTime, - pathname, - setCopy, - notifications, - ], + [logId, timeRange, urlQuery, pathname, setCopy, notifications], ); useEffect(() => {