added scroll to bottom for logviewer

sinamics · Jul 25, 2022 · e3c8926 · e3c8926
1 parent aae329d
commit e3c8926
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 32 deletions.
diff --git a/frontend/src/pages/logviewer/containers/dockerLog.tsx b/frontend/src/pages/logviewer/containers/dockerLog.tsx
@@ -1,11 +1,13 @@
 import React, { useEffect } from 'react';
 import { Label } from 'semantic-ui-react';
 import { useGetDockerLogMutation } from '../../../graphql/generated/dist';
+//@ts-ignore
+import ScrollToBottom from 'react-scroll-to-bottom';
 
 const DockerLog = () => {
   //get server logs
   const [fetchLog, { data, loading, error }] = useGetDockerLogMutation({
-    variables: { properties: { minutes: 240, limit: 35 } },
+    variables: { properties: { minutes: 240 } },
     fetchPolicy: 'network-only'
   });
 
@@ -17,21 +19,23 @@ const DockerLog = () => {
   if (error) return <div>Error</div>;
 
   return (
-    <div className='themeBg themeText'>
-      {data?.getDockerLog.file?.map((log: any, idx: number) => {
-        // check if first word is error or failed
-        const errorWords = ['failed', 'error'];
-        const isError = new RegExp(errorWords.join('|')).test(log?.message.toLowerCase());
-        return (
-          <div key={idx} style={{ fontSize: '16px' }}>
-            <Label color={`${isError ? 'red' : 'green'}`} horizontal>
-              {log.timestamp}
-            </Label>
-            <span style={{ background: `${isError ? '#a1131366' : ''}` }}>{`${log.message}`}</span>
-          </div>
-        );
-      })}
-    </div>
+    <ScrollToBottom>
+      <div className='themeBg themeText logContainer'>
+        {data?.getDockerLog.file?.map((log: any, idx: number) => {
+          // check if first word is error or failed
+          const errorWords = ['failed', 'error'];
+          const isError = new RegExp(errorWords.join('|')).test(log?.message.toLowerCase());
+          return (
+            <div key={idx} style={{ fontSize: '16px' }}>
+              <Label color={`${isError ? 'red' : 'green'}`} horizontal>
+                {log.timestamp}
+              </Label>
+              <span style={{ background: `${isError ? '#a1131366' : ''}` }}>{`${log.message}`}</span>
+            </div>
+          );
+        })}
+      </div>
+    </ScrollToBottom>
   );
 };
 

diff --git a/frontend/src/pages/logviewer/containers/systemLog.tsx b/frontend/src/pages/logviewer/containers/systemLog.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { Label } from 'semantic-ui-react';
 import { useGetServerLogQuery } from '../../../graphql/generated/dist';
+//@ts-ignore
+import ScrollToBottom from 'react-scroll-to-bottom';
 
 const SystemLog = () => {
   //get server logs
@@ -9,30 +11,32 @@ const SystemLog = () => {
     loading,
     error
   } = useGetServerLogQuery({
-    variables: { properties: { minutes: 240, limit: 35 } },
+    variables: { properties: { minutes: 240 } },
     fetchPolicy: 'network-only'
   });
 
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error</div>;
 
   return (
-    <div className='themeBg themeText'>
-      {getServerLog.file?.map((log: any, idx: number) => {
-        // check if first word is error or failed
-        const errorWords = ['failed', 'error'];
-        const isError = new RegExp(errorWords.join('|')).test(log?.message.toLowerCase());
+    <ScrollToBottom>
+      <div className='themeBg themeText logContainer'>
+        {getServerLog.file?.map((log: any, idx: number) => {
+          // check if first word is error or failed
+          const errorWords = ['failed', 'error'];
+          const isError = new RegExp(errorWords.join('|')).test(log?.message.toLowerCase());
 
-        return (
-          <div key={idx} style={{ fontSize: '16px' }}>
-            <Label color={`${isError ? 'red' : 'green'}`} horizontal>
-              {log.timestamp}
-            </Label>
-            <span style={{ background: `${isError ? '#a1131366' : ''}` }}>{`${log.message}`}</span>
-          </div>
-        );
-      })}
-    </div>
+          return (
+            <div key={idx} style={{ fontSize: '16px' }}>
+              <Label color={`${isError ? 'red' : 'green'}`} horizontal>
+                {log.timestamp}
+              </Label>
+              <span style={{ background: `${isError ? '#a1131366' : ''}` }}>{`${log.message}`}</span>
+            </div>
+          );
+        })}
+      </div>
+    </ScrollToBottom>
   );
 };
 

diff --git a/frontend/src/scss/core/_logviewer.scss b/frontend/src/scss/core/_logviewer.scss
@@ -0,0 +1,5 @@
+:is(.logContainer) {
+  max-height: calc(100vh - 130px);
+  //   overflow-y: scroll;
+  position: relative;
+}
diff --git a/frontend/src/scss/core/core.scss b/frontend/src/scss/core/core.scss
@@ -23,3 +23,4 @@
 @import 'switch';
 @import 'map';
 @import 'chart';
+@import 'logviewer';