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

Revert "feat: show/hide timestamp and body fields in logs explorer (raw, defa…" (#6868)

Browse Source 
This reverts commit b465f74e4acad45e0b01ae68d4a2e33feb2b3067.
This commit is contained in:
Shaheer Kochai 2025-01-21 19:33:03 +04:30 committed by GitHub
parent 6e3ffd555d
commit 7730f76128
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 101 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -219,14 +219,12 @@ function ListLogView({
<LogStateIndicator type={logType} fontSize={fontSize} /> <LogStateIndicator type={logType} fontSize={fontSize} />
<div> <div>
<LogContainer fontSize={fontSize}> <LogContainer fontSize={fontSize}>
{updatedSelecedFields.some((field) => field.name === 'body') && ( <LogGeneralField
<LogGeneralField fieldKey="Log"
fieldKey="Log" fieldValue={flattenLogData.body}
fieldValue={flattenLogData.body} linesPerRow={linesPerRow}
linesPerRow={linesPerRow} fontSize={fontSize}
fontSize={fontSize} />
/>
)}
{flattenLogData.stream && ( {flattenLogData.stream && (
<LogGeneralField <LogGeneralField
fieldKey="Stream" fieldKey="Stream"
@ -234,27 +232,23 @@ function ListLogView({
fontSize={fontSize} fontSize={fontSize}
/> />
)} )}
{updatedSelecedFields.some((field) => field.name === 'timestamp') && ( <LogGeneralField
<LogGeneralField fieldKey="Timestamp"
fieldKey="Timestamp" fieldValue={timestampValue}
fieldValue={timestampValue} fontSize={fontSize}
fontSize={fontSize} />
/>
)}
{updatedSelecedFields {updatedSelecedFields.map((field) =>
.filter((field) => !['timestamp', 'body'].includes(field.name)) isValidLogField(flattenLogData[field.name] as never) ? (
.map((field) => <LogSelectedField
isValidLogField(flattenLogData[field.name] as never) ? ( key={field.name}
<LogSelectedField fieldKey={field.name}
key={field.name} fieldValue={flattenLogData[field.name] as never}
fieldKey={field.name} onAddToQuery={onAddToQuery}
fieldValue={flattenLogData[field.name] as never} fontSize={fontSize}
onAddToQuery={onAddToQuery} />
fontSize={fontSize} ) : null,
/> )}
) : null,
)}
</LogContainer> </LogContainer>
</div> </div>
</div> </div>

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

@ -73,7 +73,6 @@ function RawLogView({
); );
const attributesValues = updatedSelecedFields const attributesValues = updatedSelecedFields
.filter((field) => !['timestamp', 'body'].includes(field.name))
.map((field) => flattenLogData[field.name]) .map((field) => flattenLogData[field.name])
.filter((attribute) => { .filter((attribute) => {
// loadash isEmpty doesnot work with numbers // loadash isEmpty doesnot work with numbers
@ -93,40 +92,19 @@ function RawLogView({
const { formatTimezoneAdjustedTimestamp } = useTimezone(); const { formatTimezoneAdjustedTimestamp } = useTimezone();
const text = useMemo(() => { const text = useMemo(() => {
const parts = []; const date =
typeof data.timestamp === 'string'
? formatTimezoneAdjustedTimestamp(data.timestamp, 'YYYY-MM-DD HH:mm:ss.SSS')
: formatTimezoneAdjustedTimestamp(
data.timestamp / 1e6,
'YYYY-MM-DD HH:mm:ss.SSS',
);
// Check if timestamp is selected return `${date} | ${attributesText} ${data.body}`;
const showTimestamp = selectedFields.some(
(field) => field.name === 'timestamp',
);
if (showTimestamp) {
const date =
typeof data.timestamp === 'string'
? formatTimezoneAdjustedTimestamp(
data.timestamp,
'YYYY-MM-DD HH:mm:ss.SSS',
)
: formatTimezoneAdjustedTimestamp(
data.timestamp / 1e6,
'YYYY-MM-DD HH:mm:ss.SSS',
);
parts.push(date);
}
// Check if body is selected
const showBody = selectedFields.some((field) => field.name === 'body');
if (showBody) {
parts.push(`${attributesText} ${data.body}`);
} else {
parts.push(attributesText);
}
return parts.join(' | ');
}, [ }, [
selectedFields,
attributesText,
data.timestamp, data.timestamp,
data.body, data.body,
attributesText,
formatTimezoneAdjustedTimestamp, formatTimezoneAdjustedTimestamp,
]); ]);

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

@ -48,7 +48,7 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
const columns: ColumnsType<Record<string, unknown>> = useMemo(() => { const columns: ColumnsType<Record<string, unknown>> = useMemo(() => {
const fieldColumns: ColumnsType<Record<string, unknown>> = fields const fieldColumns: ColumnsType<Record<string, unknown>> = fields
.filter((e) => !['id', 'body', 'timestamp'].includes(e.name)) .filter((e) => e.name !== 'id')
.map(({ name }) => ({ .map(({ name }) => ({
title: name, title: name,
dataIndex: name, dataIndex: name,
@ -91,67 +91,55 @@ export const useTableView = (props: UseTableViewProps): UseTableViewResult => {
), ),
}), }),
}, },
...(fields.some((field) => field.name === 'timestamp') {
? [ title: 'timestamp',
{ dataIndex: 'timestamp',
title: 'timestamp', key: 'timestamp',
dataIndex: 'timestamp', // https://github.com/ant-design/ant-design/discussions/36886
key: 'timestamp', render: (field): ColumnTypeRender<Record<string, unknown>> => {
// https://github.com/ant-design/ant-design/discussions/36886 const date =
render: ( typeof field === 'string'
field: string | number, ? formatTimezoneAdjustedTimestamp(field, 'YYYY-MM-DD HH:mm:ss.SSS')
): ColumnTypeRender<Record<string, unknown>> => { : formatTimezoneAdjustedTimestamp(
const date = field / 1e6,
typeof field === 'string' 'YYYY-MM-DD HH:mm:ss.SSS',
? formatTimezoneAdjustedTimestamp(field, 'YYYY-MM-DD HH:mm:ss.SSS') );
: formatTimezoneAdjustedTimestamp( return {
field / 1e6, children: (
'YYYY-MM-DD HH:mm:ss.SSS', <div className="table-timestamp">
); <Typography.Paragraph ellipsis className={cx('text', fontSize)}>
return { {date}
children: ( </Typography.Paragraph>
<div className="table-timestamp"> </div>
<Typography.Paragraph ellipsis className={cx('text', fontSize)}> ),
{date} };
</Typography.Paragraph> },
</div> },
),
};
},
},
]
: []),
...(appendTo === 'center' ? fieldColumns : []), ...(appendTo === 'center' ? fieldColumns : []),
...(fields.some((field) => field.name === 'body') {
? [ title: 'body',
{ dataIndex: 'body',
title: 'body', key: 'body',
dataIndex: 'body', render: (field): ColumnTypeRender<Record<string, unknown>> => ({
key: 'body', props: {
render: ( style: defaultTableStyle,
field: string | number, },
): ColumnTypeRender<Record<string, unknown>> => ({ children: (
props: { <TableBodyContent
style: defaultTableStyle, dangerouslySetInnerHTML={{
}, __html: convert.toHtml(
children: ( dompurify.sanitize(unescapeString(field), {
<TableBodyContent FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
dangerouslySetInnerHTML={{ }),
__html: convert.toHtml(
dompurify.sanitize(unescapeString(field as string), {
FORBID_TAGS: [...FORBID_DOM_PURIFY_TAGS],
}),
),
}}
fontSize={fontSize}
linesPerRow={linesPerRow}
isDarkMode={isDarkMode}
/>
), ),
}), }}
}, fontSize={fontSize}
] linesPerRow={linesPerRow}
: []), isDarkMode={isDarkMode}
/>
),
}),
},
...(appendTo === 'end' ? fieldColumns : []), ...(appendTo === 'end' ? fieldColumns : []),
]; ];
}, [ }, [

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

@ -121,25 +121,23 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
const tableHeader = useCallback( const tableHeader = useCallback(
() => ( () => (
<tr> <tr>
{tableColumns {tableColumns.map((column) => {
.filter((column) => column.key) const isDragColumn = column.key !== 'expand';
.map((column) => {
const isDragColumn = column.key !== 'expand';
return ( return (
<TableHeaderCellStyled <TableHeaderCellStyled
$isLogIndicator={column.key === 'state-indicator'} $isLogIndicator={column.key === 'state-indicator'}
$isDarkMode={isDarkMode} $isDarkMode={isDarkMode}
$isDragColumn={isDragColumn} $isDragColumn={isDragColumn}
key={column.key} key={column.key}
fontSize={tableViewProps?.fontSize} fontSize={tableViewProps?.fontSize}
// eslint-disable-next-line react/jsx-props-no-spreading // eslint-disable-next-line react/jsx-props-no-spreading
{...(isDragColumn && { className: 'dragHandler' })} {...(isDragColumn && { className: 'dragHandler' })}
> >
{(column.title as string).replace(/^\w/, (c) => c.toUpperCase())} {(column.title as string).replace(/^\w/, (c) => c.toUpperCase())}
</TableHeaderCellStyled> </TableHeaderCellStyled>
); );
})} })}
</tr> </tr>
), ),
[tableColumns, isDarkMode, tableViewProps?.fontSize], [tableColumns, isDarkMode, tableViewProps?.fontSize],

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

@ -29,7 +29,7 @@ export const TableCellStyled = styled.td<TableHeaderCellStyledProps>`
props.$isDarkMode ? 'inherit' : themeColors.whiteCream}; props.$isDarkMode ? 'inherit' : themeColors.whiteCream};
${({ $isLogIndicator }): string => ${({ $isLogIndicator }): string =>
$isLogIndicator ? 'padding: 0 0 0 8px;width: 15px;' : ''} $isLogIndicator ? 'padding: 0 0 0 8px;' : ''}
color: ${(props): string => color: ${(props): string =>
props.$isDarkMode ? themeColors.white : themeColors.bckgGrey}; props.$isDarkMode ? themeColors.white : themeColors.bckgGrey};
`; `;

21
frontend/src/container/OptionsMenu/constants.ts
View File

@ -5,26 +5,7 @@ import { FontSize, OptionsQuery } from './types';
export const URL_OPTIONS = 'options'; export const URL_OPTIONS = 'options';
export const defaultOptionsQuery: OptionsQuery = { export const defaultOptionsQuery: OptionsQuery = {
selectColumns: [ selectColumns: [],
{
key: 'timestamp',
dataType: DataTypes.String,
type: 'tag',
isColumn: true,
isJSON: false,
id: 'timestamp--string--tag--true',
isIndexed: false,
},
{
key: 'body',
dataType: DataTypes.String,
type: 'tag',
isColumn: true,
isJSON: false,
id: 'body--string--tag--true',
isIndexed: false,
},
],
maxLines: 2, maxLines: 2,
format: 'raw', format: 'raw',
fontSize: FontSize.SMALL, fontSize: FontSize.SMALL,

22
frontend/src/container/OptionsMenu/useOptionsMenu.ts
View File

@ -169,15 +169,6 @@ const useOptionsMenu = ({
const searchedAttributeKeys = useMemo(() => { const searchedAttributeKeys = useMemo(() => {
if (searchedAttributesData?.payload?.attributeKeys?.length) { if (searchedAttributesData?.payload?.attributeKeys?.length) {
if (dataSource === DataSource.LOGS) {
// add timestamp and body to the list of attributes
return [
...defaultOptionsQuery.selectColumns,
...searchedAttributesData.payload.attributeKeys.filter(
(attribute) => attribute.key !== 'body',
),
];
}
return searchedAttributesData.payload.attributeKeys; return searchedAttributesData.payload.attributeKeys;
} }
if (dataSource === DataSource.TRACES) { if (dataSource === DataSource.TRACES) {
@ -207,17 +198,12 @@ const useOptionsMenu = ({
); );
const optionsFromAttributeKeys = useMemo(() => { const optionsFromAttributeKeys = useMemo(() => {
const filteredAttributeKeys = searchedAttributeKeys.filter((item) => { const filteredAttributeKeys = searchedAttributeKeys.filter(
// For other data sources, only filter out 'body' if it exists (item) => item.key !== 'body',
if (dataSource !== DataSource.LOGS) { );
return item.key !== 'body';
}
// For LOGS, keep all keys
return true;
});
return getOptionsFromKeys(filteredAttributeKeys, selectedColumnKeys); return getOptionsFromKeys(filteredAttributeKeys, selectedColumnKeys);
}, [dataSource, searchedAttributeKeys, selectedColumnKeys]); }, [searchedAttributeKeys, selectedColumnKeys]);
const handleRedirectWithOptionsData = useCallback( const handleRedirectWithOptionsData = useCallback(
(newQueryData: OptionsQuery) => { (newQueryData: OptionsQuery) => {