GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-07-23 23:04:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: polished the log UI (#3591)

Browse Source
This commit is contained in:
Rajat Dabade 2023-09-20 15:31:31 +05:30 committed by GitHub
parent 3db8a25eb9
commit 04acc49154
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/container/LogDetailedView/FieldRenderer.styles.ts Normal file
View File

@ -0,0 +1,20 @@
import { Tag } from 'antd';
import styled from 'styled-components';
export const TagContainer = styled(Tag)`
&&& {
border-radius: 0.25rem;
padding: 0.063rem 0.5rem;
font-weight: 600;
font-size: 0.75rem;
line-height: 1.25rem;
}
`;
export const TagLabel = styled.span`
font-weight: 400;
`;
export const TagValue = styled.span`
text-transform: capitalize;
`;

12
frontend/src/container/LogDetailedView/FieldRenderer.tsx
View File

@ -1,6 +1,6 @@
import { blue } from '@ant-design/colors'; import { blue } from '@ant-design/colors';
import { Tag } from 'antd';
import { TagContainer, TagLabel, TagValue } from './FieldRenderer.styles';
import { FieldRendererProps } from './LogDetailedView.types'; import { FieldRendererProps } from './LogDetailedView.types';
import { getFieldAttributes } from './utils'; import { getFieldAttributes } from './utils';
@ -12,8 +12,14 @@ function FieldRenderer({ field }: FieldRendererProps): JSX.Element {
{dataType && newField && logType ? ( {dataType && newField && logType ? (
<> <>
<span style={{ color: blue[4] }}>{newField} </span> <span style={{ color: blue[4] }}>{newField} </span>
<Tag>Type: {logType}</Tag> <TagContainer>
<Tag>Data type: {dataType}</Tag> <TagLabel>Type: </TagLabel>
<TagValue>{logType}</TagValue>
</TagContainer>
<TagContainer>
<TagLabel>Data type: </TagLabel>
<TagValue>{dataType}</TagValue>
</TagContainer>
</> </>
) : ( ) : (
<span style={{ color: blue[4] }}>{field}</span> <span style={{ color: blue[4] }}>{field}</span>