From 8466e31e02597f323039468d055bb50aedc0d413 Mon Sep 17 00:00:00 2001 From: Vikrant Gupta Date: Fri, 18 Oct 2024 18:19:42 +0530 Subject: [PATCH] chore: change the log background to same as severity text with some opacity (#6217) * chore: change the log background to same as severity text with some opacity * chore: make the log background changes for column renderer * chore: remove the backdrop mask from logs details drawer * chore: fix tests --- frontend/src/components/LogDetail/index.tsx | 1 + .../src/components/Logs/ListLogView/index.tsx | 15 +++++------ .../src/components/Logs/ListLogView/styles.ts | 12 +++------ .../LogStateIndicator.styles.scss | 6 ----- .../LogStateIndicator.test.tsx | 8 ------ .../LogStateIndicator/LogStateIndicator.tsx | 8 +----- .../src/components/Logs/RawLogView/index.tsx | 15 ++++------- .../src/components/Logs/RawLogView/styles.ts | 8 +++--- .../Logs/TableView/useTableView.tsx | 16 +----------- .../InfinityTableView/TableRow.styles.scss | 22 ++++++++++++++++ .../InfinityTableView/index.tsx | 26 ++++++++++++++++--- .../InfinityTableView/styles.ts | 8 +++--- frontend/src/utils/logs.ts | 23 ++++++++++++++-- 13 files changed, 92 insertions(+), 76 deletions(-) diff --git a/frontend/src/components/LogDetail/index.tsx b/frontend/src/components/LogDetail/index.tsx index 4748312ceb..c216694c35 100644 --- a/frontend/src/components/LogDetail/index.tsx +++ b/frontend/src/components/LogDetail/index.tsx @@ -129,6 +129,7 @@ function LogDetail({ return ( diff --git a/frontend/src/components/Logs/ListLogView/index.tsx b/frontend/src/components/Logs/ListLogView/index.tsx index ed2627552d..8d5c0118cd 100644 --- a/frontend/src/components/Logs/ListLogView/index.tsx +++ b/frontend/src/components/Logs/ListLogView/index.tsx @@ -195,21 +195,20 @@ function ListLogView({ return ( <>
- +
` width: 100% !important; @@ -41,13 +42,8 @@ export const Container = styled(Card)<{ ? `padding:0.3rem 0.6rem;` : ``} - ${({ $isActiveLog, $isDarkMode }): string => - $isActiveLog - ? `background-color: ${ - $isDarkMode ? Color.BG_SLATE_500 : Color.BG_VANILLA_300 - } !important` - : ''} - } + ${({ $isActiveLog, $isDarkMode, $logType }): string => + getActiveLogBackground($isActiveLog, $isDarkMode, $logType)} `; export const Text = styled(Typography.Text)` diff --git a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss index 2260bf5aa3..5c2720e954 100644 --- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss +++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss @@ -41,10 +41,4 @@ background-color: var(--bg-sakura-500); } } - - &.isActive { - .line { - background-color: var(--bg-robin-400, #7190f9); - } - } } diff --git a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx index 06cc9d3ec4..5ecddd5959 100644 --- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx +++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx @@ -17,14 +17,6 @@ describe('LogStateIndicator', () => { ); }); - it('renders correctly when isActive is true', () => { - const { container } = render( - , - ); - const indicator = container.firstChild as HTMLElement; - expect(indicator.classList.contains('isActive')).toBe(true); - }); - it('renders correctly with different types', () => { const { container: containerInfo } = render( , diff --git a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx index b9afa5b7a2..f831c6252a 100644 --- a/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx +++ b/frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx @@ -44,22 +44,16 @@ export const LogType = { function LogStateIndicator({ type, - isActive, fontSize, }: { type: string; fontSize: FontSize; - isActive?: boolean; }): JSX.Element { return ( -
+
); } -LogStateIndicator.defaultProps = { - isActive: false, -}; - export default LogStateIndicator; diff --git a/frontend/src/components/Logs/RawLogView/index.tsx b/frontend/src/components/Logs/RawLogView/index.tsx index 2cda9c7247..c8246ad120 100644 --- a/frontend/src/components/Logs/RawLogView/index.tsx +++ b/frontend/src/components/Logs/RawLogView/index.tsx @@ -162,20 +162,15 @@ function RawLogView({ $isDarkMode={isDarkMode} $isReadOnly={isReadOnly} $isHightlightedLog={isHighlighted} - $isActiveLog={isActiveLog} + $isActiveLog={ + activeLog?.id === data.id || activeContextLog?.id === data.id || isActiveLog + } + $logType={logType} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} fontSize={fontSize} > - + ` position: relative; @@ -34,11 +35,12 @@ export const RawLogViewContainer = styled(Row)<{ : `margin: 2px 0;`} } - ${({ $isActiveLog }): string => getActiveLogBackground($isActiveLog)} + ${({ $isActiveLog, $logType }): string => + getActiveLogBackground($isActiveLog, true, $logType)} - ${({ $isReadOnly, $isActiveLog, $isDarkMode }): string => + ${({ $isReadOnly, $isActiveLog, $isDarkMode, $logType }): string => $isActiveLog - ? getActiveLogBackground($isActiveLog, $isDarkMode) + ? getActiveLogBackground($isActiveLog, $isDarkMode, $logType) : getDefaultLogBackground($isReadOnly, $isDarkMode)} ${({ $isHightlightedLog, $isDarkMode }): string => diff --git a/frontend/src/components/Logs/TableView/useTableView.tsx b/frontend/src/components/Logs/TableView/useTableView.tsx index 43b4ba2628..662686e67d 100644 --- a/frontend/src/components/Logs/TableView/useTableView.tsx +++ b/frontend/src/components/Logs/TableView/useTableView.tsx @@ -35,8 +35,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => { linesPerRow, fontSize, appendTo = 'center', - activeContextLog, - activeLog, isListViewPanel, } = props; @@ -90,9 +88,6 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
@@ -130,16 +125,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => { }, ...(appendTo === 'end' ? fieldColumns : []), ]; - }, [ - fields, - isListViewPanel, - appendTo, - isDarkMode, - linesPerRow, - activeLog?.id, - activeContextLog?.id, - fontSize, - ]); + }, [fields, isListViewPanel, appendTo, isDarkMode, linesPerRow, fontSize]); return { columns, dataSource: flattenLogData }; }; diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.styles.scss b/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.styles.scss index 6b0593def3..1dba778569 100644 --- a/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.styles.scss +++ b/frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.styles.scss @@ -2,3 +2,25 @@ cursor: pointer; position: relative; } + +.table-row-backdrop { + &.INFO { + background-color: var(--bg-robin-500) 10; + } + &.WARNING, + &.WARN { + background-color: var(--bg-amber-500) 10; + } + &.ERROR { + background-color: var(--bg-cherry-500) 10; + } + &.TRACE { + background-color: var(--bg-forest-400) 10; + } + &.DEBUG { + background-color: var(--bg-aqua-500) 10; + } + &.FATAL { + background-color: var(--bg-sakura-500) 10; + } +} diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx index fe2d2ba1d4..3cc216962e 100644 --- a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx +++ b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx @@ -1,5 +1,6 @@ import LogDetail from 'components/LogDetail'; import { VIEW_TYPES } from 'components/LogDetail/constants'; +import { getLogIndicatorType } from 'components/Logs/LogStateIndicator/utils'; import { useTableView } from 'components/Logs/TableView/useTableView'; import { LOCALSTORAGE } from 'constants/localStorage'; import { useActiveLog } from 'hooks/logs/useActiveLog'; @@ -21,6 +22,11 @@ import { TableHeaderCellStyled, TableRowStyled } from './styles'; import TableRow from './TableRow'; import { InfinityTableProps } from './types'; +interface CustomTableRowProps { + activeContextLogId: string; + activeLogId: string; +} + // eslint-disable-next-line react/function-component-definition const CustomTableRow: TableComponents['TableRow'] = ({ children, @@ -31,10 +37,17 @@ const CustomTableRow: TableComponents['TableRow'] = ({ const isDarkMode = useIsDarkMode(); + const logType = getLogIndicatorType(props.item); + return ( @@ -66,8 +79,6 @@ const InfinityTable = forwardRef( ...tableViewProps, onClickExpand: onSetActiveLog, onOpenLogsContext: handleSetActiveContextLog, - activeLog, - activeContextLog, }); const { draggedColumns, onDragColumns } = useDragColumns< @@ -153,7 +164,14 @@ const InfinityTable = forwardRef( // TODO: fix it in the future // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - TableRow: CustomTableRow, + TableRow: (props): any => + CustomTableRow({ + ...props, + context: { + activeContextLogId: activeContextLog?.id, + activeLogId: activeLog?.id, + }, + } as any), }} itemContent={itemContent} fixedHeaderContent={tableHeader} diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts b/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts index 89c9592dd4..787b4c9105 100644 --- a/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts +++ b/frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts @@ -1,5 +1,4 @@ /* eslint-disable no-nested-ternary */ -import { Color } from '@signozhq/design-tokens'; import { themeColors } from 'constants/theme'; import { FontSize } from 'container/OptionsMenu/types'; import styled from 'styled-components'; @@ -37,13 +36,12 @@ export const TableCellStyled = styled.td` export const TableRowStyled = styled.tr<{ $isActiveLog: boolean; $isDarkMode: boolean; + $logType: string; }>` td { - ${({ $isActiveLog, $isDarkMode }): string => + ${({ $isActiveLog, $isDarkMode, $logType }): string => $isActiveLog - ? `background-color: ${ - $isDarkMode ? Color.BG_SLATE_500 : Color.BG_VANILLA_300 - } !important` + ? getActiveLogBackground($isActiveLog, $isDarkMode, $logType) : ''}; } diff --git a/frontend/src/utils/logs.ts b/frontend/src/utils/logs.ts index 10f6625f31..b230a678e3 100644 --- a/frontend/src/utils/logs.ts +++ b/frontend/src/utils/logs.ts @@ -1,5 +1,6 @@ import { orange } from '@ant-design/colors'; import { Color } from '@signozhq/design-tokens'; +import { LogType } from 'components/Logs/LogStateIndicator/LogStateIndicator'; export const getDefaultLogBackground = ( isReadOnly?: boolean, @@ -17,10 +18,28 @@ export const getDefaultLogBackground = ( export const getActiveLogBackground = ( isActiveLog = true, isDarkMode = true, + logType?: string, ): string => { if (!isActiveLog) return ``; - if (isDarkMode) return `background-color: ${Color.BG_SLATE_200};`; - return `background-color: ${Color.BG_VANILLA_300}; color: ${Color.TEXT_SLATE_400}`; + if (isDarkMode) { + switch (logType) { + case LogType.INFO: + return `background-color: ${Color.BG_ROBIN_500}10 !important;`; + case LogType.WARN: + return `background-color: ${Color.BG_AMBER_500}10 !important;`; + case LogType.ERROR: + return `background-color: ${Color.BG_CHERRY_500}10 !important;`; + case LogType.TRACE: + return `background-color: ${Color.BG_FOREST_400}10 !important;`; + case LogType.DEBUG: + return `background-color: ${Color.BG_AQUA_500}10 !important;`; + case LogType.FATAL: + return `background-color: ${Color.BG_SAKURA_500}10 !important;`; + default: + return `background-color: ${Color.BG_SLATE_200} !important;`; + } + } + return `background-color: ${Color.BG_VANILLA_300}!important; color: ${Color.TEXT_SLATE_400} !important;`; }; export const getHightLightedLogBackground = (