Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 4 commits into from
Mar 7, 2023
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dd6c3fc
feat: color coding is added in the list view
palashgdev Mar 7, 2023
778e901
Merge branch 'develop' into 2298-1
palashgdev Mar 7, 2023
de1846a
Merge branch 'develop' into 2298-1
palashgdev Mar 7, 2023
aded637
Merge branch 'develop' into 2298-1
palashgdev Mar 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: color coding is added in the list view
  • Loading branch information
@palashgdev
palashgdev committed Mar 7, 2023
commit dd6c3fc60e40018e5fc79ac6d84304d444f9ec32
87 changes: 43 additions & 44 deletions frontend/src/components/Logs/ListLogView/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { blue, grey, orange } from '@ant-design/colors';
import { CopyFilled, ExpandAltOutlined } from '@ant-design/icons';
import Convert from 'ansi-to-html';
import { Button, Divider, Row, Typography } from 'antd';
import { map } from 'd3';
import dayjs from 'dayjs';
import dompurify from 'dompurify';
import { useNotifications } from 'hooks/useNotifications';
// utils
import { FlatLogData } from 'lib/logs/flatLogData';
Expand All @@ -19,24 +21,37 @@ import { ILogsReducer } from 'types/reducer/logs';
import AddToQueryHOC from '../AddToQueryHOC';
import CopyClipboardHOC from '../CopyClipboardHOC';
// styles
import { Container, LogContainer, Text, TextContainer } from './styles';
import {
Container,
LogContainer,
LogText,
SelectedLog,
Text,
TextContainer,
} from './styles';
import { isValidLogField } from './util';

const convert = new Convert();

interface LogFieldProps {
fieldKey: string;
fieldValue: string;
}
function LogGeneralField({ fieldKey, fieldValue }: LogFieldProps): JSX.Element {
const html = useMemo(
() => ({
__html: convert.toHtml(dompurify.sanitize(fieldValue)),
}),
[fieldValue],
);

return (
<TextContainer>
<Text ellipsis type="secondary">
{fieldKey}
{`${fieldKey}: `}
</Text>
<CopyClipboardHOC textToCopy={fieldValue}>
<Typography.Text ellipsis>
{': '}
{fieldValue}
</Typography.Text>
<LogText dangerouslySetInnerHTML={html} />
</CopyClipboardHOC>
</TextContainer>
);
Expand All @@ -47,31 +62,19 @@ function LogSelectedField({
fieldValue = '',
}: LogFieldProps): JSX.Element {
return (
<div
style={{
display: 'flex',
overflow: 'hidden',
width: '100%',
}}
>
<SelectedLog>
<AddToQueryHOC fieldKey={fieldKey} fieldValue={fieldValue}>
<Typography.Text>
{`"`}
<span style={{ color: blue[4] }}>{fieldKey}</span>
{`"`}
</Typography.Text>
</AddToQueryHOC>
<CopyClipboardHOC textToCopy={fieldValue}>
<Typography.Text ellipsis>
<span>
{': '}
{typeof fieldValue === 'string' && `"`}
</span>
<span style={{ color: orange[6] }}>{fieldValue}</span>
{typeof fieldValue === 'string' && `"`}
<span>{': '}</span>
<span style={{ color: orange[6] }}>{fieldValue || "''"}</span>
</Typography.Text>
</CopyClipboardHOC>
</div>
</SelectedLog>
);
}

Expand Down Expand Up @@ -111,22 +114,18 @@ function ListLogView({ logData }: ListLogViewProps): JSX.Element {
return (
<Container>
<div>
<div>
{'{'}
<LogContainer>
<>
<LogGeneralField fieldKey="log" fieldValue={flattenLogData.body} />
{flattenLogData.stream && (
<LogGeneralField fieldKey="stream" fieldValue={flattenLogData.stream} />
)}
<LogGeneralField
fieldKey="timestamp"
fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()}
/>
</>
</LogContainer>
{'}'}
</div>
<LogContainer>
<>
<LogGeneralField fieldKey="log" fieldValue={flattenLogData.body} />
{flattenLogData.stream && (
<LogGeneralField fieldKey="stream" fieldValue={flattenLogData.stream} />
)}
<LogGeneralField
fieldKey="timestamp"
fieldValue={dayjs((flattenLogData.timestamp as never) / 1e6).format()}
/>
</>
</LogContainer>
<div>
{map(updatedSelecedFields, (field) =>
isValidLogField(flattenLogData[field.name] as never) ? (
Expand All @@ -145,19 +144,19 @@ function ListLogView({ logData }: ListLogViewProps): JSX.Element {
size="small"
type="text"
onClick={handleDetailedView}
style={{ color: blue[5], padding: 0, margin: 0 }}
style={{ color: blue[5] }}
icon={<ExpandAltOutlined />}
>
{' '}
<ExpandAltOutlined /> View Details
View Details
</Button>
<Button
size="small"
type="text"
onClick={handleCopyJSON}
style={{ padding: 0, margin: 0, color: grey[1] }}
style={{ color: grey[1] }}
icon={<CopyFilled />}
>
{' '}
<CopyFilled /> Copy JSON
Copy JSON
</Button>
</Row>
</Container>
Expand Down
14 changes: 14 additions & 0 deletions frontend/src/components/Logs/ListLogView/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,17 @@ export const TextContainer = styled.div`
export const LogContainer = styled.div`
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;
`;