GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 19:39:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: change the log background to same as severity text with some opacity (#6217)

Browse Source 
* 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
This commit is contained in:
Vikrant Gupta 2024-10-18 18:19:42 +05:30 committed by GitHub
parent efdaf7ee43
commit 8466e31e02
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 92 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/LogDetail/index.tsx
View File

@ -129,6 +129,7 @@ function LogDetail({
return (
<Drawer
width="60%"
maskStyle={{ background: 'none' }}
title={
<>
<Divider type="vertical" className={cx('log-type-indicator', LogType)} />

15
frontend/src/components/Logs/ListLogView/index.tsx
View File

@ -195,21 +195,20 @@ function ListLogView({
return (
<>
<Container
$isActiveLog={isHighlighted}
$isActiveLog={
isHighlighted ||
activeLog?.id === logData.id ||
activeContextLog?.id === logData.id
}
$isDarkMode={isDarkMode}
$logType={logType}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleDetailedView}
fontSize={fontSize}
>
<div className="log-line">
<LogStateIndicator
type={logType}
isActive={
activeLog?.id === logData.id || activeContextLog?.id === logData.id
}
fontSize={fontSize}
/>
<LogStateIndicator type={logType} fontSize={fontSize} />
<div>
<LogContainer fontSize={fontSize}>
<LogGeneralField

12
frontend/src/components/Logs/ListLogView/styles.ts
View File

@ -1,8 +1,8 @@
/* eslint-disable no-nested-ternary */
import { Color } from '@signozhq/design-tokens';
import { Card, Typography } from 'antd';
import { FontSize } from 'container/OptionsMenu/types';
import styled from 'styled-components';
import { getActiveLogBackground } from 'utils/logs';
interface LogTextProps {
linesPerRow?: number;
@ -15,6 +15,7 @@ interface LogContainerProps {
export const Container = styled(Card)<{
$isActiveLog: boolean;
$isDarkMode: boolean;
$logType: string;
fontSize: FontSize;
}>`
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)`

6
frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss
View File

@ -41,10 +41,4 @@
background-color: var(--bg-sakura-500);
}
}
&.isActive {
.line {
background-color: var(--bg-robin-400, #7190f9);
}
}
}

8
frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.test.tsx
View File

@ -17,14 +17,6 @@ describe('LogStateIndicator', () => {
);
});
it('renders correctly when isActive is true', () => {
const { container } = render(
<LogStateIndicator type="INFO" isActive fontSize={FontSize.MEDIUM} />,
);
const indicator = container.firstChild as HTMLElement;
expect(indicator.classList.contains('isActive')).toBe(true);
});
it('renders correctly with different types', () => {
const { container: containerInfo } = render(
<LogStateIndicator type="INFO" fontSize={FontSize.MEDIUM} />,

8
frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.tsx
View File

@ -44,22 +44,16 @@ export const LogType = {
function LogStateIndicator({
type,
isActive,
fontSize,
}: {
type: string;
fontSize: FontSize;
isActive?: boolean;
}): JSX.Element {
return (
<div className={cx('log-state-indicator', isActive ? 'isActive' : '')}>
<div className="log-state-indicator">
<div className={cx('line', type, fontSize)}> </div>
</div>
);
}
LogStateIndicator.defaultProps = {
isActive: false,
};
export default LogStateIndicator;

15
frontend/src/components/Logs/RawLogView/index.tsx
View File

@ -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}
>
<LogStateIndicator
type={logType}
isActive={
activeLog?.id === data.id ||
activeContextLog?.id === data.id ||
isActiveLog
}
fontSize={fontSize}
/>
<LogStateIndicator type={logType} fontSize={fontSize} />
<RawLogContent
$isReadOnly={isReadOnly}

8
frontend/src/components/Logs/RawLogView/styles.ts
View File

@ -13,6 +13,7 @@ export const RawLogViewContainer = styled(Row)<{
$isReadOnly?: boolean;
$isActiveLog?: boolean;
$isHightlightedLog: boolean;
$logType: string;
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 =>

16
frontend/src/components/Logs/TableView/useTableView.tsx
View File

@ -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 => {
<div className="table-timestamp">
<LogStateIndicator
type={getLogIndicatorTypeForTable(item)}
isActive={
activeLog?.id === item.id || activeContextLog?.id === item.id
}
fontSize={fontSize}
/>
<Typography.Paragraph ellipsis className={cx('text', fontSize)}>
@ -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 };
};

22
frontend/src/container/LogsExplorerList/InfinityTableView/TableRow.styles.scss
View File

@ -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;
}
}

26
frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
View File

@ -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<ILog>['TableRow'] = ({
children,
@ -31,10 +37,17 @@ const CustomTableRow: TableComponents<ILog>['TableRow'] = ({
const isDarkMode = useIsDarkMode();
const logType = getLogIndicatorType(props.item);
return (
<TableRowStyled
$isDarkMode={isDarkMode}
$isActiveLog={isHighlighted}
$isActiveLog={
isHighlighted ||
(context as CustomTableRowProps).activeContextLogId === props.item.id ||
(context as CustomTableRowProps).activeLogId === props.item.id
}
$logType={logType}
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
>
@ -66,8 +79,6 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
...tableViewProps,
onClickExpand: onSetActiveLog,
onOpenLogsContext: handleSetActiveContextLog,
activeLog,
activeContextLog,
});
const { draggedColumns, onDragColumns } = useDragColumns<
@ -153,7 +164,14 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
// 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}

8
frontend/src/container/LogsExplorerList/InfinityTableView/styles.ts
View File

@ -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<TableHeaderCellStyledProps>`
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)
: ''};
}

23
frontend/src/utils/logs.ts
View File

@ -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 = (