chore: Abandon the use of list

2 files changed, 18 insertions, 30 deletions

diff --git a/src/components/Logs.module.scss b/src/components/Logs.module.scss
index d8bfce2..aac50f2 100644
--- a/src/components/Logs.module.scss
+++ b/src/components/Logs.module.scss
@@ -1,5 +1,7 @@
 .logMeta {
   font-size: 0.8em;
+  margin-bottom: 15px;
+  display: block;
  }
 
 .logType {
@@ -33,6 +35,7 @@
   background-color: var(--bg-log-info-card);
   border-radius: 4px;
   color: var(--color-text);
+  overflow-y: auto;
 
   :global {
     .log {
diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
index b004a11..481e822 100644
--- a/src/components/Logs.tsx
+++ b/src/components/Logs.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Pause, Play } from 'react-feather';
 import { useTranslation } from 'react-i18next';
-import { areEqual, FixedSizeList as List, ListChildComponentProps } from 'react-window';
 import { fetchLogs, reconnect as reconnectLogs,stop as stopLogs } from 'src/api/logs';
 import ContentHeader from 'src/components/ContentHeader';
 import LogSearch from 'src/components/LogSearch';
@@ -16,13 +15,13 @@ import { Log, State } from 'src/store/types';
 import s from './Logs.module.scss';
 import { Fab, position as fabPosition } from './shared/Fab';
 
-const { useCallback, memo, useEffect } = React;
+const { useCallback, useEffect } = React;
 
 const paddingBottom = 30;
 const colors = {
   debug: '#389d3d',
   info: '#58c3f2',
-  warning: '#80037e',
+  warning: '#cc5abb',
   error: '#c11c1c',
 };
 
@@ -37,30 +36,16 @@ type LogLineProps = Partial<Log>;
 
 function LogLine({ time, payload, type }: LogLineProps) {
   return (
-    <span className={s.logMeta}>
+    <div className={s.logMeta}>
         <span className={s.logTime} >{time}</span>
         <span className={s.logType} style={{ color: colors[type]}}>
           [ {logTypes[type]} ]
         </span>
         <span className={s.logText} >{payload}</span>
-      </span>
+      </div>
   );
 }
 
-function itemKey(index: number, data: LogLineProps[]) {
-  const item = data[index];
-  return item.id;
-}
-
-const Row = memo(({ index, style, data }: ListChildComponentProps<LogLineProps>) => {
-  const r = data[index];
-  return (
-    <div style={style}>
-      <LogLine {...r} />
-    </div>
-  );
-}, areEqual);
-
 function Logs({ dispatch, logLevel, apiConfig, logs, logStreamingPaused }) {
   const actions = useStoreActions();
   const toggleIsRefreshPaused = useCallback(() => {
@@ -89,17 +74,17 @@ function Logs({ dispatch, logLevel, apiConfig, logs, logStreamingPaused }) {
             <div>{t('no_logs')}</div>
           </div>
         ) : (
-          <div className={s.logsWrapper}>
-            <List
-              height={containerHeight - paddingBottom*2.5}
-              width="100%"
-              itemCount={logs.length}
-              itemSize={40}
-              itemData={logs}
-              itemKey={itemKey}
-            >
-              {Row}
-            </List>
+          <div className={s.logsWrapper} style={{ height: containerHeight - paddingBottom*2 }}>
+            {
+              logs.map(
+                (log, index) => (
+                  <div className="" key={index}>
+                    <LogLine {...log} />
+                  </div>
+                ),
+              )
+            }
+
 
             <Fab
               icon={logStreamingPaused ? <Play size={16} /> : <Pause size={16} />}