fix: [SIG-532]: Copy Log Link Functionality for new designs (SigNoz#4644

) * fix: [SIG-532]: timeRange not updating correctly for copy log link * fix: [SIG-532]: use virtuoso props to scroll to some intiial position rather than API hit * fix: added styles for highlighted colors * fix: handle colors for copy log link * fix: update colors for copy log lines
calshankar · Mar 5, 2024 · 0c14145 · 0c14145
1 parent 6618b47
commit 0c14145
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 34 deletions.
diff --git 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({
 		<>
 			<Container
 				$isActiveLog={isHighlighted}
+				$isDarkMode={isDarkMode}
 				onMouseEnter={handleMouseEnter}
 				onMouseLeave={handleMouseLeave}
 				onClick={handleDetailedView}

diff --git a/frontend/src/components/Logs/ListLogView/styles.ts b/frontend/src/components/Logs/ListLogView/styles.ts
@@ -1,18 +1,24 @@
+import { Color } from '@signozhq/design-tokens';
 import { Card, Typography } from 'antd';
 import styled from 'styled-components';
-import { getActiveLogBackground } from 'utils/logs';
 
 export const Container = styled(Card)<{
 	$isActiveLog: boolean;
+	$isDarkMode: boolean;
 }>`
 	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
@@ -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
@@ -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
@@ -122,12 +122,14 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 								fields: selectedFields,
 								linesPerRow: options.maxLines,
 								appendTo: 'end',
+								activeLogIndex,
 							}}
 						/>
 					) : (
 						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
 							<Virtuoso
 								ref={ref}
+								initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
 								data={logs}
 								totalCount={logs.length}
 								itemContent={getItemContent}

diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
@@ -134,6 +134,9 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 			<>
 				<TableVirtuoso
 					ref={ref}
+					initialTopMostItemIndex={
+						tableViewProps.activeLogIndex !== -1 ? tableViewProps.activeLogIndex : 0
+					}
 					style={infinityDefaultStyles}
 					data={dataSource}
 					components={{

diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts b/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts
@@ -1,3 +1,4 @@
+import { Color } from '@signozhq/design-tokens';
 import { themeColors } from 'constants/theme';
 import styled from 'styled-components';
 import { getActiveLogBackground } from 'utils/logs';
@@ -27,7 +28,12 @@ export const TableRowStyled = styled.tr<{
 	$isDarkMode: boolean;
 }>`
 	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
@@ -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({
 			>
 				<Virtuoso
 					ref={ref}
+					initialTopMostItemIndex={activeLogIndex !== -1 ? activeLogIndex : 0}
 					data={logs}
 					endReached={onEndReached}
 					totalCount={logs.length}
@@ -151,7 +143,16 @@ function LogsExplorerList({
 				/>
 			</Card>
 		);
-	}, [isLoading, options, logs, onEndReached, getItemContent, selectedFields]);
+	}, [
+		isLoading,
+		options.format,
+		options.maxLines,
+		activeLogIndex,
+		logs,
+		onEndReached,
+		getItemContent,
+		selectedFields,
+	]);
 
 	return (
 		<div className="logs-list-view-container">

diff --git 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<AppState, GlobalReducer>(
-		(state) => state.globalTime,
-	);
 
 	const { queryData: timeRange } = useUrlQueryData<LogTimeRange | null>(
 		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(() => {