diff --git a/frontend/src/components/Logs/ListLogView/index.tsx b/frontend/src/components/Logs/ListLogView/index.tsx
index d38102c378..6095d343fc 100644
--- a/frontend/src/components/Logs/ListLogView/index.tsx
+++ b/frontend/src/components/Logs/ListLogView/index.tsx
@@ -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';
@@ -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 (
- {fieldKey}
+ {`${fieldKey}: `}
-
- {': '}
- {fieldValue}
-
+
);
@@ -47,31 +62,19 @@ function LogSelectedField({
fieldValue = '',
}: LogFieldProps): JSX.Element {
return (
-
+
- {`"`}
{fieldKey}
- {`"`}
-
- {': '}
- {typeof fieldValue === 'string' && `"`}
-
- {fieldValue}
- {typeof fieldValue === 'string' && `"`}
+ {': '}
+ {fieldValue || "''"}
-
+
);
}
@@ -111,22 +114,18 @@ function ListLogView({ logData }: ListLogViewProps): JSX.Element {
return (
-
- {'{'}
-
- <>
-
- {flattenLogData.stream && (
-
- )}
-
- >
-
- {'}'}
-
+
+ <>
+
+ {flattenLogData.stream && (
+
+ )}
+
+ >
+
{map(updatedSelecedFields, (field) =>
isValidLogField(flattenLogData[field.name] as never) ? (
@@ -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={}
>
- {' '}
- View Details
+ View Details
}
>
- {' '}
- Copy JSON
+ Copy JSON
diff --git a/frontend/src/components/Logs/ListLogView/styles.ts b/frontend/src/components/Logs/ListLogView/styles.ts
index ff913cae9c..a73b641e59 100644
--- a/frontend/src/components/Logs/ListLogView/styles.ts
+++ b/frontend/src/components/Logs/ListLogView/styles.ts
@@ -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;
+`;