feat: color encoding is added in the logs raw view (#2398)

* chore: some of the changes are updated

* feat: ansi-to-html is added

* feat: color is added in the raw view

frontend/package.json

@@ -32,6 +32,7 @@
 		"@grafana/data": "^8.4.3",
 		"@monaco-editor/react": "^4.3.1",
 		"@xstate/react": "^3.0.0",
+		"ansi-to-html": "0.7.2",
 		"antd": "5.0.5",
 		"axios": "^0.21.0",
 		"babel-eslint": "^10.1.0",
@@ -51,6 +52,7 @@
 		"d3-flame-graph": "^3.1.1",
 		"d3-tip": "^0.9.1",
 		"dayjs": "^1.10.7",
+		"dompurify": "3.0.0",
 		"dotenv": "8.2.0",
 		"event-source-polyfill": "1.0.31",
 		"file-loader": "6.1.1",
@@ -126,6 +128,7 @@
 		"@types/copy-webpack-plugin": "^8.0.1",
 		"@types/d3": "^6.2.0",
 		"@types/d3-tip": "^3.5.5",
+		"@types/dompurify": "^2.4.0",
 		"@types/event-source-polyfill": "^1.0.0",
 		"@types/flat": "^5.0.2",
 		"@types/fontfaceobserver": "2.1.0",

frontend/src/components/Logs/RawLogView/config.ts

@@ -1,5 +1 @@
-export const rawLineStyle: React.CSSProperties = {
+export const rawLineStyle: React.CSSProperties = {};
-	marginBottom: 0,
-	fontFamily: "'Fira Code', monospace",
-	fontWeight: 300,
-};

frontend/src/components/Logs/RawLogView/index.tsx

@@ -1,15 +1,22 @@
 import { ExpandAltOutlined } from '@ant-design/icons';
-import { Typography } from 'antd';
+// const Convert = require('ansi-to-html');
+import Convert from 'ansi-to-html';
 import dayjs from 'dayjs';
+import dompurify from 'dompurify';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import React, { useCallback, useMemo } from 'react';
 // interfaces
 import { ILog } from 'types/api/logs/log';
 
-import { rawLineStyle } from './config';
 // styles
-import { ExpandIconWrapper, RawLogViewContainer } from './styles';
+import {
+	ExpandIconWrapper,
+	RawLogContent,
+	RawLogViewContainer,
+} from './styles';
+
+const convert = new Convert();
 
 interface RawLogViewProps {
 	data: ILog;
@@ -27,20 +34,28 @@ function RawLogView(props: RawLogViewProps): JSX.Element {
 		[data.timestamp, data.body],
 	);
 
-	const ellipsis = useMemo(() => ({ rows: linesPerRow }), [linesPerRow]);
-
 	const handleClickExpand = useCallback(() => {
 		onClickExpand(data);
 	}, [onClickExpand, data]);
 
+	const html = useMemo(
+		() => ({
+			__html: convert.toHtml(dompurify.sanitize(text)),
+		}),
+		[text],
+	);
+
 	return (
-		<RawLogViewContainer wrap={false} align="middle" $isDarkMode={isDarkMode}>
+		<RawLogViewContainer
-			<ExpandIconWrapper flex="30px" onClick={handleClickExpand}>
+			onClick={handleClickExpand}
+			wrap={false}
+			align="middle"
+			$isDarkMode={isDarkMode}
+		>
+			<ExpandIconWrapper flex="30px">
 				<ExpandAltOutlined />
 			</ExpandIconWrapper>
-			<Typography.Paragraph style={rawLineStyle} ellipsis={ellipsis}>
+			<RawLogContent linesPerRow={linesPerRow} dangerouslySetInnerHTML={html} />
-				{text}
-			</Typography.Paragraph>
 		</RawLogViewContainer>
 	);
 }

frontend/src/components/Logs/RawLogView/styles.ts

@@ -22,3 +22,25 @@ export const ExpandIconWrapper = styled(Col)`
 	cursor: pointer;
 	font-size: 12px;
 `;
+
+interface RawLogContentProps {
+	linesPerRow: number;
+}
+
+export const RawLogContent = styled.div<RawLogContentProps>`
+	margin-bottom: 0;
+	font-family: Fira Code, monospace;
+	font-weight: 300;
+
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: ${(props): number => props.linesPerRow};
+	line-clamp: ${(props): number => props.linesPerRow};
+	-webkit-box-orient: vertical;
+
+	font-size: 1rem;
+	line-height: 2rem;
+
+	cursor: pointer;
+`;