feat: color coding is added in the table view (#2437)

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

@@ -1,7 +1,9 @@
 import { ExpandAltOutlined } from '@ant-design/icons';
+import Convert from 'ansi-to-html';
 import { Table, Typography } from 'antd';
 import { ColumnsType, ColumnType } from 'antd/es/table';
 import dayjs from 'dayjs';
+import dompurify from 'dompurify';
 // utils
 import { FlatLogData } from 'lib/logs/flatLogData';
 import React, { useMemo } from 'react';
@@ -13,6 +15,7 @@ import { ILog } from 'types/api/logs/log';
 import { ExpandIconWrapper } from '../RawLogView/styles';
 // config
 import { defaultCellStyle, defaultTableStyle, tableScroll } from './config';
+import { TableBodyContent } from './styles';
 
 type ColumnTypeRender<T = unknown> = ReturnType<
 	NonNullable<ColumnType<T>['render']>
@@ -25,6 +28,8 @@ type LogsTableViewProps = {
 	onClickExpand: (log: ILog) => void;
 };
 
+const convert = new Convert();
+
 function LogsTableView(props: LogsTableViewProps): JSX.Element {
 	const { logs, fields, linesPerRow, onClickExpand } = props;
 
@@ -94,9 +99,12 @@ function LogsTableView(props: LogsTableViewProps): JSX.Element {
 						style: defaultTableStyle,
 					},
 					children: (
-						<Typography.Paragraph ellipsis={{ rows: linesPerRow }}>
+						<TableBodyContent
-							{field}
+							dangerouslySetInnerHTML={{
-						</Typography.Paragraph>
+								__html: convert.toHtml(dompurify.sanitize(field)),
+							}}
+							linesPerRow={linesPerRow}
+						/>
 					),
 				}),
 			},

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+interface TableBodyContentProps {
+	linesPerRow: number;
+}
+
+export const TableBodyContent = styled.div<TableBodyContentProps>`
+	margin-bottom: 0;
+	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: 0.875rem;
+
+	line-height: 2rem;
+
+	cursor: pointer;
+`;