fix: detach the log indicator from timestamp column (#6681)

SigNoz · Dec 20, 2024 · 8e7c78e · 8e7c78e
1 parent 53ebd39
commit 8e7c78e
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 13 deletions.
diff --git a/frontend/src/components/Logs/TableView/useTableView.styles.scss b/frontend/src/components/Logs/TableView/useTableView.styles.scss
@@ -22,17 +22,20 @@
 	}
 }
 
+.state-indicator {
+	width: 15px;
+	.log-state-indicator {
+		padding: 0px;
+	}
+}
+
 .table-timestamp {
 	display: flex;
 	align-items: center;
 
 	.ant-typography {
 		margin-bottom: 0;
 	}
-
-	.log-state-indicator {
-		padding: 0px;
-	}
 }
 
 .lightMode {

diff --git a/frontend/src/components/Logs/TableView/useTableView.tsx b/frontend/src/components/Logs/TableView/useTableView.tsx
@@ -75,12 +75,28 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 		}
 
 		return [
+			{
+				// We do not need any title and data index for the log state indicator
+				title: '',
+				dataIndex: '',
+				key: 'state-indicator',
+				render: (_, item): ColumnTypeRender<Record<string, unknown>> => ({
+					children: (
+						<div className={cx('state-indicator', fontSize)}>
+							<LogStateIndicator
+								type={getLogIndicatorTypeForTable(item)}
+								fontSize={fontSize}
+							/>
+						</div>
+					),
+				}),
+			},
 			{
 				title: 'timestamp',
 				dataIndex: 'timestamp',
 				key: 'timestamp',
 				// https://github.com/ant-design/ant-design/discussions/36886
-				render: (field, item): ColumnTypeRender<Record<string, unknown>> => {
+				render: (field): ColumnTypeRender<Record<string, unknown>> => {
 					const date =
 						typeof field === 'string'
 							? formatTimezoneAdjustedTimestamp(field, 'YYYY-MM-DD HH:mm:ss.SSS')
@@ -91,10 +107,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
 					return {
 						children: (
 							<div className="table-timestamp">
-								<LogStateIndicator
-									type={getLogIndicatorTypeForTable(item)}
-									fontSize={fontSize}
-								/>
 								<Typography.Paragraph ellipsis className={cx('text', fontSize)}>
 									{date}
 								</Typography.Paragraph>

diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx b/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx
@@ -79,6 +79,7 @@ export default function TableRow({
 				return (
 					<TableCellStyled
 						$isDragColumn={false}
+						$isLogIndicator={column.key === 'state-indicator'}
 						$isDarkMode={isDarkMode}
 						key={column.key}
 						fontSize={fontSize}

diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
@@ -126,7 +126,7 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 
 						return (
 							<TableHeaderCellStyled
-								$isTimestamp={column.key === 'timestamp'}
+								$isLogIndicator={column.key === 'state-indicator'}
 								$isDarkMode={isDarkMode}
 								$isDragColumn={isDragColumn}
 								key={column.key}

diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts b/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts
@@ -7,7 +7,7 @@ import { getActiveLogBackground } from 'utils/logs';
 interface TableHeaderCellStyledProps {
 	$isDragColumn: boolean;
 	$isDarkMode: boolean;
-	$isTimestamp?: boolean;
+	$isLogIndicator?: boolean;
 	fontSize?: FontSize;
 }
 
@@ -28,11 +28,12 @@ export const TableCellStyled = styled.td<TableHeaderCellStyledProps>`
 	background-color: ${(props): string =>
 		props.$isDarkMode ? 'inherit' : themeColors.whiteCream};
 
+	${({ $isLogIndicator }): string =>
+		$isLogIndicator ? 'padding: 0 0 0 8px;' : ''}
 	color: ${(props): string =>
 		props.$isDarkMode ? themeColors.white : themeColors.bckgGrey};
 `;
 
-// handle the light theme here
 export const TableRowStyled = styled.tr<{
 	$isActiveLog: boolean;
 	$isDarkMode: boolean;
@@ -85,7 +86,7 @@ export const TableHeaderCellStyled = styled.th<TableHeaderCellStyledProps>`
 			: fontSize === FontSize.LARGE
 			? `font-size:14px; line-height:24px; padding: 0.5rem;`
 			: ``};
-	${({ $isTimestamp }): string => ($isTimestamp ? 'padding-left: 24px;' : '')}
+	${({ $isLogIndicator }): string => ($isLogIndicator ? 'padding: 0px; ' : '')}
 	color: ${(props): string =>
 		props.$isDarkMode ? 'var(--bg-vanilla-100, #fff)' : themeColors.bckgGrey};
 `;