diff --git a/frontend/src/components/Logs/TableView/useTableView.styles.scss b/frontend/src/components/Logs/TableView/useTableView.styles.scss index 9592d0ae12..f972850d21 100644 --- a/frontend/src/components/Logs/TableView/useTableView.styles.scss +++ b/frontend/src/components/Logs/TableView/useTableView.styles.scss @@ -22,6 +22,13 @@ } } +.state-indicator { + width: 15px; + .log-state-indicator { + padding: 0px; + } +} + .table-timestamp { display: flex; align-items: center; @@ -29,10 +36,6 @@ .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 index 890b9e0500..d38e10ce4c 100644 --- 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> => ({ + children: ( +
+ +
+ ), + }), + }, { title: 'timestamp', dataIndex: 'timestamp', key: 'timestamp', // https://github.com/ant-design/ant-design/discussions/36886 - render: (field, item): ColumnTypeRender> => { + render: (field): ColumnTypeRender> => { 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: (
- {date} diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx b/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.tsx index 76dc84b11a..6712c609c2 100644 --- 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 ( ( return ( ` 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` : 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}; `;