From 66b2e17bbaffcbf65da68133c22153a5b622e4f0 Mon Sep 17 00:00:00 2001
From: palashgdev <palashgdev@gmail.com>
Date: Fri, 10 Mar 2023 13:55:42 +0530
Subject: [PATCH] feat: color coding is added in the table view (#2437)

---
 .../src/components/Logs/TableView/index.tsx   | 14 ++++++++++---
 .../src/components/Logs/TableView/styles.ts   | 21 +++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/Logs/TableView/styles.ts

diff --git a/frontend/src/components/Logs/TableView/index.tsx b/frontend/src/components/Logs/TableView/index.tsx
index 774a2d889c..dd90164d3b 100644
--- a/frontend/src/components/Logs/TableView/index.tsx
+++ b/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 }}>
-							{field}
-						</Typography.Paragraph>
+						<TableBodyContent
+							dangerouslySetInnerHTML={{
+								__html: convert.toHtml(dompurify.sanitize(field)),
+							}}
+							linesPerRow={linesPerRow}
+						/>
 					),
 				}),
 			},
diff --git a/frontend/src/components/Logs/TableView/styles.ts b/frontend/src/components/Logs/TableView/styles.ts
new file mode 100644
index 0000000000..cd361b9c5e
--- /dev/null
+++ b/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;
+`;