From 0574350e6e2b37ab1e7d27af8eaaf131d5b199fc Mon Sep 17 00:00:00 2001
From: Yevhen Shevchenko <90138953+yeshev@users.noreply.github.com>
Date: Tue, 29 Aug 2023 17:36:39 +0300
Subject: [PATCH] feat: add list loader and fix action column size (#3440)

* feat: create live logs page and custom top nav

* feat: add live logs where clause

* fix: success button color

* fix: turn back color

* fix: undefined scenario

* feat: get live data

* fix: change color, change number format

* feat: add live logs list

* feat: hide view if error, clear logs

* feat: add condition for disable initial loading

* fix: double request

* fix: render id in the where clause

* fix: render where clause and live list

* fix: last log padding

* fix: list data loading

* fix: no logs text

* fix: logs list size

* fix: small issues

* feat: add list loader and fix action column size

* fix: remove unnecessary file

---------

Co-authored-by: Palash Gupta <palashgdev@gmail.com>
Co-authored-by: Yunus M <myounis.ar@live.com>
---
 .../container/LiveLogs/ListViewPanel/index.tsx  | 17 ++++++++++++++---
 .../container/LiveLogs/ListViewPanel/styles.ts  | 11 +++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/container/LiveLogs/ListViewPanel/styles.ts

diff --git a/frontend/src/container/LiveLogs/ListViewPanel/index.tsx b/frontend/src/container/LiveLogs/ListViewPanel/index.tsx
index 360dac36c0..12b4266490 100644
--- a/frontend/src/container/LiveLogs/ListViewPanel/index.tsx
+++ b/frontend/src/container/LiveLogs/ListViewPanel/index.tsx
@@ -1,4 +1,5 @@
-import { Button, Popover, Select, Space } from 'antd';
+import { Button, Popover, Select } from 'antd';
+import Spinner from 'components/Spinner';
 import { LOCALSTORAGE } from 'constants/localStorage';
 import { useOptionsMenu } from 'container/OptionsMenu';
 import {
@@ -7,9 +8,12 @@ import {
 	viewModeOptionList,
 } from 'pages/Logs/config';
 import PopoverContent from 'pages/Logs/PopoverContent';
+import { useEventSource } from 'providers/EventSource';
 import { useCallback } from 'react';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
+import { SpinnerWrapper, Wrapper } from './styles';
+
 function ListViewPanel(): JSX.Element {
 	const { config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
@@ -17,6 +21,8 @@ function ListViewPanel(): JSX.Element {
 		aggregateOperator: StringOperators.NOOP,
 	});
 
+	const { isConnectionLoading } = useEventSource();
+
 	const isFormatButtonVisible = logsOptions.includes(config.format?.value);
 
 	const renderPopoverContent = useCallback(() => {
@@ -35,7 +41,7 @@ function ListViewPanel(): JSX.Element {
 	}, [config]);
 
 	return (
-		<Space align="baseline" direction="horizontal">
+		<Wrapper>
 			<Select
 				style={defaultSelectStyle}
 				value={config.format?.value}
@@ -51,7 +57,12 @@ function ListViewPanel(): JSX.Element {
 					<Button>Format</Button>
 				</Popover>
 			)}
-		</Space>
+			{isConnectionLoading && (
+				<SpinnerWrapper>
+					<Spinner style={{ height: 'auto' }} />
+				</SpinnerWrapper>
+			)}
+		</Wrapper>
 	);
 }
 
diff --git a/frontend/src/container/LiveLogs/ListViewPanel/styles.ts b/frontend/src/container/LiveLogs/ListViewPanel/styles.ts
new file mode 100644
index 0000000000..5fd6a9c1b7
--- /dev/null
+++ b/frontend/src/container/LiveLogs/ListViewPanel/styles.ts
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+	display: flex;
+	align-items: center;
+	gap: 1.5rem;
+`;
+
+export const SpinnerWrapper = styled.div`
+	margin-left: auto;
+`;