Add lazy log library (#4502)

airbytehq · Jul 5, 2021 · fc71ab0 · fc71ab0
1 parent 08b32d1
commit fc71ab0
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 21 deletions.
diff --git a/airbyte-webapp/package-lock.json b/airbyte-webapp/package-lock.json
diff --git a/airbyte-webapp/package.json b/airbyte-webapp/package.json
@@ -35,6 +35,7 @@
     "react-dropzone": "^11.2.4",
     "react-helmet": "6.1.0",
     "react-intl": "^3.12.0",
+    "react-lazylog": "^4.5.3",
     "react-pose": "^4.0.10",
     "react-router-dom": "^5.1.2",
     "react-table": "^7.5.0",
@@ -62,6 +63,7 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.1",
     "@types/react-helmet": "6.1.0",
+    "@types/react-lazylog": "^4.5.0",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-table": "^7.0.12",
     "@types/react-widgets": "4.4.4",

diff --git a/airbyte-webapp/src/components/JobItem/components/JobCurrenLogs.tsx b/airbyte-webapp/src/components/JobItem/components/JobCurrenLogs.tsx
@@ -63,11 +63,7 @@ const JobCurrentLogs: React.FC<IProps> = ({
           fileName={`logs-${id}-${attemptId}`}
         />
       </CenteredDetails>
-      <Logs>
-        {logsText?.logLines.map((item, key) => (
-          <div key={`log-${id}-${key}`}>{item}</div>
-        ))}
-      </Logs>
+      <Logs logsArray={logsText?.logLines} />
     </>
   );
 };

diff --git a/airbyte-webapp/src/components/JobItem/components/JobLogs.tsx b/airbyte-webapp/src/components/JobItem/components/JobLogs.tsx
@@ -24,11 +24,7 @@ const JobLogs: React.FC<IProps> = ({ id, jobIsFailed }) => {
   );
 
   if (!job.attempts.length) {
-    return (
-      <Logs>
-        <FormattedMessage id="sources.emptyLogs" />
-      </Logs>
-    );
+    return <Logs />;
   }
 
   const data = job.attempts.map((item, index) => ({
@@ -68,15 +64,11 @@ const JobLogs: React.FC<IProps> = ({ id, jobIsFailed }) => {
           />
         ) : null}
       </CenteredDetails>
-      <Logs>
-        {hasLogs ? (
-          job.logsByAttempt[attemptNumber].logLines.map((item, key) => (
-            <div key={`log-${id}-${key}`}>{item}</div>
-          ))
-        ) : (
-          <FormattedMessage id="sources.emptyLogs" />
-        )}
-      </Logs>
+      <Logs
+        logsArray={
+          hasLogs ? job.logsByAttempt[attemptNumber].logLines : undefined
+        }
+      />
     </>
   );
 };

diff --git a/airbyte-webapp/src/components/JobItem/components/Logs.tsx b/airbyte-webapp/src/components/JobItem/components/Logs.tsx
@@ -1,12 +1,60 @@
 import styled from "styled-components";
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import { LazyLog } from "react-lazylog";
 
-const Logs = styled.div`
-  padding: 11px 42px 20px;
+const LogsView = styled.div<{ isEmpty?: boolean }>`
+  padding: 11px ${({ isEmpty }) => (isEmpty ? 42 : 12)}px 20px;
   font-size: 12px;
   line-height: 18px;
   color: ${({ theme }) => theme.darkPrimaryColor};
   font-family: ${({ theme }) => theme.codeFont};
   word-wrap: break-word;
+  min-height: ${({ isEmpty }) => (isEmpty ? "auto" : "400px")};
+
+  & .logLine {
+    font-size: 10px;
+    color: ${({ theme }) => theme.darkPrimaryColor};
+
+    &.highlightLogLine {
+      background: ${({ theme }) => theme.greyColor40};
+    }
+
+    &:hover {
+      background: ${({ theme }) => theme.greyColor30};
+    }
+
+    & > a {
+      margin-left: 5px;
+      margin-right: 10px;
+      width: 45px;
+    }
+  }
 `;
 
+type LogsProps = {
+  logsArray?: string[];
+};
+
+const Logs: React.FC<LogsProps> = ({ logsArray }) => {
+  const logsJoin = logsArray && logsArray.length ? logsArray.join("\n") : "";
+
+  return (
+    <LogsView isEmpty={!logsArray}>
+      {logsArray ? (
+        <LazyLog
+          text={logsJoin}
+          lineClassName="logLine"
+          highlightLineClassName="highlightLogLine"
+          selectableLines
+          follow
+          style={{ background: "transparent" }}
+        />
+      ) : (
+        <FormattedMessage id="sources.emptyLogs" />
+      )}
+    </LogsView>
+  );
+};
+
 export default Logs;