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

feat: color coding is added in the list view (#2432)

Browse Source
This commit is contained in:
palashgdev 2023-03-07 18:15:54 +05:30 committed by GitHub
parent 2a03291171
commit 7f04a4407b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 57 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,8 +1,10 @@
import { blue, grey, orange } from '@ant-design/colors'; import { blue, grey, orange } from '@ant-design/colors';
import { CopyFilled, ExpandAltOutlined } from '@ant-design/icons'; import { CopyFilled, ExpandAltOutlined } from '@ant-design/icons';
import Convert from 'ansi-to-html';
import { Button, Divider, Row, Typography } from 'antd'; import { Button, Divider, Row, Typography } from 'antd';
import { map } from 'd3'; import { map } from 'd3';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import dompurify from 'dompurify';
import { useNotifications } from 'hooks/useNotifications'; import { useNotifications } from 'hooks/useNotifications';
// utils // utils
import { FlatLogData } from 'lib/logs/flatLogData'; import { FlatLogData } from 'lib/logs/flatLogData';
@ -19,24 +21,37 @@ import { ILogsReducer } from 'types/reducer/logs';
import AddToQueryHOC from '../AddToQueryHOC'; import AddToQueryHOC from '../AddToQueryHOC';
import CopyClipboardHOC from '../CopyClipboardHOC'; import CopyClipboardHOC from '../CopyClipboardHOC';
// styles // styles
import { Container, LogContainer, Text, TextContainer } from './styles'; import {
Container,
LogContainer,
LogText,
SelectedLog,
Text,
TextContainer,
} from './styles';
import { isValidLogField } from './util'; import { isValidLogField } from './util';
const convert = new Convert();
interface LogFieldProps { interface LogFieldProps {
fieldKey: string; fieldKey: string;
fieldValue: string; fieldValue: string;
} }
function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element { function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
const html = useMemo(
() => ({
__html: convert.toHtml(dompurify.sanitize(fieldValue)),
}),
[fieldValue],
);
return ( return (
<TextContainer> <TextContainer>
<Text ellipsis type="secondary"> <Text ellipsis type="secondary">
{fieldKey} {`${fieldKey}: `}
</Text> </Text>
<CopyClipboardHOC textToCopy={fieldValue}> <CopyClipboardHOC textToCopy={fieldValue}>
<Typography.Text ellipsis> <LogText dangerouslySetInnerHTML={html} />
{': '}
{fieldValue}
</Typography.Text>
</CopyClipboardHOC> </CopyClipboardHOC>
</TextContainer> </TextContainer>
); );
@ -47,31 +62,19 @@ function LogSelectedField({
fieldValue = '', fieldValue = '',
}: LogFieldProps): JSX.Element { }: LogFieldProps): JSX.Element {
return ( return (
<div <SelectedLog>
style={{
display: 'flex',
overflow: 'hidden',
width: '100%',
}}
>
<AddToQueryHOC fieldKey={fieldKey} fieldValue={fieldValue}> <AddToQueryHOC fieldKey={fieldKey} fieldValue={fieldValue}>
<Typography.Text> <Typography.Text>
{`"`}
<span style={{ color: blue[4] }}>{fieldKey}</span> <span style={{ color: blue[4] }}>{fieldKey}</span>
{`"`}
</Typography.Text> </Typography.Text>
</AddToQueryHOC> </AddToQueryHOC>
<CopyClipboardHOC textToCopy={fieldValue}> <CopyClipboardHOC textToCopy={fieldValue}>
<Typography.Text ellipsis> <Typography.Text ellipsis>
<span> <span>{': '}</span>
{': '} <span style={{ color: orange[6] }}>{fieldValue || "''"}</span>
{typeof fieldValue === 'string' && `"`}
</span>
<span style={{ color: orange[6] }}>{fieldValue}</span>
{typeof fieldValue === 'string' && `"`}
</Typography.Text> </Typography.Text>
</CopyClipboardHOC> </CopyClipboardHOC>
</div> </SelectedLog>
); );
} }
@ -111,22 +114,18 @@ function ListLogView({ logData }: ListLogViewProps): JSX.Element {
return ( return (
<Container> <Container>
<div> <div>
<div> <LogContainer>
{'{'} <>
<LogContainer> <LogGeneralField fieldKey="log" fieldValue={flattenLogData.body} />
<> {flattenLogData.stream && (
<LogGeneralField fieldKey="log" fieldValue={flattenLogData.body} /> <LogGeneralField fieldKey="stream" fieldValue={flattenLogData.stream} />
{flattenLogData.stream && ( )}
<LogGeneralField fieldKey="stream" fieldValue={flattenLogData.stream} /> <LogGeneralField
)} fieldKey="timestamp"
<LogGeneralField fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()}
fieldKey="timestamp" />
fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()} </>
/> </LogContainer>
</>
</LogContainer>
{'}'}
</div>
<div> <div>
{map(updatedSelecedFields, (field) => {map(updatedSelecedFields, (field) =>
isValidLogField(flattenLogData[field.name] as never) ? ( isValidLogField(flattenLogData[field.name] as never) ? (
@ -145,19 +144,19 @@ function ListLogView({ logData }: ListLogViewProps): JSX.Element {
size="small" size="small"
type="text" type="text"
onClick={handleDetailedView} onClick={handleDetailedView}
style={{ color: blue[5], padding: 0, margin: 0 }} style={{ color: blue[5] }}
icon={<ExpandAltOutlined />}
> >
{' '} View Details
<ExpandAltOutlined /> View Details
</Button> </Button>
<Button <Button
size="small" size="small"
type="text" type="text"
onClick={handleCopyJSON} onClick={handleCopyJSON}
style={{ padding: 0, margin: 0, color: grey[1] }} style={{ color: grey[1] }}
icon={<CopyFilled />}
> >
{' '} Copy JSON
<CopyFilled /> Copy JSON
</Button> </Button>
</Row> </Row>
</Container> </Container>

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

@ -33,3 +33,17 @@ export const TextContainer = styled.div`
export const LogContainer = styled.div` export const LogContainer = styled.div`
margin-left: 0.5rem; margin-left: 0.5rem;
`; `;
export const LogText = styled.div`
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
`;
export const SelectedLog = styled.div`
display: flex;
width: 100%;
overflow: hidden;
`;