From 8de8a8a86a70e9492d950f2502e725f385bb0c76 Mon Sep 17 00:00:00 2001
From: Kanishka Chowdhury <ckanishka24@gmail.com>
Date: Fri, 8 Sep 2023 12:11:07 +0530
Subject: [PATCH] fix(FE/Logs): fix all logs not visible on scrolling (#3512)

* fix(FE/Logs): fix all logs not visible on scrolling

* fix(FE/logs): fix scroll behaviour in live logs

* refactor(FE/logs): replaced StyledComponents with scss

---------

Co-authored-by: Rajat Dabade <rajat@signoz.io>
---
 frontend/src/constants/card.ts                       |  4 ++++
 .../src/container/LiveLogs/LiveLogsList/index.tsx    |  5 ++---
 .../LogsExplorerList/InfinityTableView/index.tsx     |  1 -
 frontend/src/container/LogsExplorerList/index.tsx    |  5 ++---
 frontend/src/container/LogsExplorerList/styles.ts    |  1 +
 frontend/src/container/LogsTable/index.tsx           | 12 +++++-------
 .../src/container/LogsTable/logsTable.styles.scss    |  3 +++
 frontend/src/container/LogsTable/styles.ts           |  3 +++
 frontend/src/pages/Logs/index.tsx                    |  4 +++-
 frontend/src/pages/Logs/logs.styles.scss             |  4 ++++
 10 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/constants/card.ts
 create mode 100644 frontend/src/container/LogsTable/logsTable.styles.scss
 create mode 100644 frontend/src/pages/Logs/logs.styles.scss

diff --git a/frontend/src/constants/card.ts b/frontend/src/constants/card.ts
new file mode 100644
index 0000000000..1832c1b7e8
--- /dev/null
+++ b/frontend/src/constants/card.ts
@@ -0,0 +1,4 @@
+export const CARD_BODY_STYLE = {
+	padding: '0',
+	height: '100%',
+};
diff --git a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
index 8f6405c78b..940b612379 100644
--- a/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
+++ b/frontend/src/container/LiveLogs/LiveLogsList/index.tsx
@@ -2,6 +2,7 @@ import { Card, Typography } from 'antd';
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import Spinner from 'components/Spinner';
+import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { OptionFormatTypes } from 'constants/optionsFormatTypes';
 import InfinityTableView from 'container/LogsExplorerList/InfinityTableView';
@@ -9,7 +10,6 @@ import { InfinityWrapperStyled } from 'container/LogsExplorerList/styles';
 import { convertKeysToColumnFields } from 'container/LogsExplorerList/utils';
 import { Heading } from 'container/LogsTable/styles';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { contentStyle } from 'container/Trace/Search/config';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import useFontFaceObserver from 'hooks/useFontObserver';
 import { useEventSource } from 'providers/EventSource';
@@ -112,10 +112,9 @@ function LiveLogsList({ logs }: LiveLogsListProps): JSX.Element {
 							}}
 						/>
 					) : (
-						<Card style={{ width: '100%' }} bodyStyle={{ ...contentStyle }}>
+						<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
 							<Virtuoso
 								ref={ref}
-								useWindowScroll
 								data={logs}
 								totalCount={logs.length}
 								itemContent={getItemContent}
diff --git a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
index 433ce896c2..7c4bb5f122 100644
--- a/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
+++ b/frontend/src/container/LogsExplorerList/InfinityTableView/index.tsx
@@ -144,7 +144,6 @@ const InfinityTable = forwardRef<TableVirtuosoHandle, InfinityTableProps>(
 		return (
 			<>
 				<TableVirtuoso
-					useWindowScroll
 					ref={ref}
 					style={infinityDefaultStyles}
 					data={dataSource}
diff --git a/frontend/src/container/LogsExplorerList/index.tsx b/frontend/src/container/LogsExplorerList/index.tsx
index 645582dd9c..91a9aafdd0 100644
--- a/frontend/src/container/LogsExplorerList/index.tsx
+++ b/frontend/src/container/LogsExplorerList/index.tsx
@@ -3,11 +3,11 @@ import { Card, Typography } from 'antd';
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import Spinner from 'components/Spinner';
+import { CARD_BODY_STYLE } from 'constants/card';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import ExplorerControlPanel from 'container/ExplorerControlPanel';
 import { Heading } from 'container/LogsTable/styles';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import { contentStyle } from 'container/Trace/Search/config';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import useFontFaceObserver from 'hooks/useFontObserver';
@@ -116,10 +116,9 @@ function LogsExplorerList({
 		}
 
 		return (
-			<Card style={{ width: '100%' }} bodyStyle={{ ...contentStyle }}>
+			<Card style={{ width: '100%' }} bodyStyle={CARD_BODY_STYLE}>
 				<Virtuoso
 					ref={ref}
-					useWindowScroll
 					data={logs}
 					endReached={onEndReached}
 					totalCount={logs.length}
diff --git a/frontend/src/container/LogsExplorerList/styles.ts b/frontend/src/container/LogsExplorerList/styles.ts
index 1c3dde6466..6ae200c339 100644
--- a/frontend/src/container/LogsExplorerList/styles.ts
+++ b/frontend/src/container/LogsExplorerList/styles.ts
@@ -3,4 +3,5 @@ import styled from 'styled-components';
 export const InfinityWrapperStyled = styled.div`
 	min-height: 40rem;
 	display: flex;
+	height: 100%;
 `;
diff --git a/frontend/src/container/LogsTable/index.tsx b/frontend/src/container/LogsTable/index.tsx
index 2acfdc9a13..e1d01da058 100644
--- a/frontend/src/container/LogsTable/index.tsx
+++ b/frontend/src/container/LogsTable/index.tsx
@@ -1,10 +1,12 @@
+import './logsTable.styles.scss';
+
 import { Card, Typography } from 'antd';
 // components
 import ListLogView from 'components/Logs/ListLogView';
 import RawLogView from 'components/Logs/RawLogView';
 import LogsTableView from 'components/Logs/TableView';
 import Spinner from 'components/Spinner';
-import { contentStyle } from 'container/Trace/Search/config';
+import { CARD_BODY_STYLE } from 'constants/card';
 import { useActiveLog } from 'hooks/logs/useActiveLog';
 import useFontFaceObserver from 'hooks/useFontObserver';
 import { memo, useCallback, useMemo } from 'react';
@@ -85,12 +87,8 @@ function LogsTable(props: LogsTableProps): JSX.Element {
 		}
 
 		return (
-			<Card bodyStyle={contentStyle}>
-				<Virtuoso
-					useWindowScroll
-					totalCount={logs.length}
-					itemContent={getItemContent}
-				/>
+			<Card className="logs-card" bodyStyle={CARD_BODY_STYLE}>
+				<Virtuoso totalCount={logs.length} itemContent={getItemContent} />
 			</Card>
 		);
 	}, [getItemContent, linesPerRow, logs, onSetActiveLog, selected, viewMode]);
diff --git a/frontend/src/container/LogsTable/logsTable.styles.scss b/frontend/src/container/LogsTable/logsTable.styles.scss
new file mode 100644
index 0000000000..ba6b436ad9
--- /dev/null
+++ b/frontend/src/container/LogsTable/logsTable.styles.scss
@@ -0,0 +1,3 @@
+.logs-card {
+    flex: 1;
+}
\ No newline at end of file
diff --git a/frontend/src/container/LogsTable/styles.ts b/frontend/src/container/LogsTable/styles.ts
index a7c843fa51..e935022909 100644
--- a/frontend/src/container/LogsTable/styles.ts
+++ b/frontend/src/container/LogsTable/styles.ts
@@ -6,6 +6,9 @@ export const Container = styled.div`
 	width: 100%;
 	margin-bottom: 1rem;
 	margin-top: 0.5rem;
+	display: flex;
+	flex-direction: column;
+	flex: 1;
 `;
 
 export const Heading = styled(Card)`
diff --git a/frontend/src/pages/Logs/index.tsx b/frontend/src/pages/Logs/index.tsx
index f9ebd04bb7..edae696519 100644
--- a/frontend/src/pages/Logs/index.tsx
+++ b/frontend/src/pages/Logs/index.tsx
@@ -1,3 +1,5 @@
+import './logs.styles.scss';
+
 import { Button, Col, Divider, Popover, Row, Select, Space } from 'antd';
 import { QueryParams } from 'constants/query';
 import LogControls from 'container/LogControls';
@@ -93,7 +95,7 @@ function Logs(): JSX.Element {
 
 			<Row gutter={20} wrap={false}>
 				<LogsFilters />
-				<Col flex={1}>
+				<Col flex={1} className="logs-col-container">
 					<Row>
 						<Col flex={1}>
 							<Space align="baseline" direction="horizontal">
diff --git a/frontend/src/pages/Logs/logs.styles.scss b/frontend/src/pages/Logs/logs.styles.scss
new file mode 100644
index 0000000000..5b7775f9b9
--- /dev/null
+++ b/frontend/src/pages/Logs/logs.styles.scss
@@ -0,0 +1,4 @@
+.logs-col-container {
+    display: flex;
+    flex-direction: column;
+}
\ No newline at end of file