feat: lazylog

plugins/circleci/package.json

@@ -27,9 +27,11 @@
     "@material-ui/core": "^4.9.1",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.45",
+    "@types/react-lazylog": "^4.5.0",
     "circleci-api": "^4.0.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-lazylog": "^4.5.2",
     "react-router": "^5.1.2",
     "react-use": "^13.0.0"
   },

plugins/circleci/src/components/ActionOutput/ActionOutput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, FC } from 'react';
+import React, { useEffect, useState, FC, Suspense } from 'react';
 import {
   ExpansionPanel,
   ExpansionPanelSummary,
@@ -9,6 +9,8 @@ import {
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import { BuildStepAction } from 'circleci-api';
 
+const LazyLog = React.lazy(() => import('react-lazylog/build/LazyLog'));
+
 export const ActionOutput: FC<{
   url: string;
   name: string;
@@ -25,22 +27,25 @@ export const ActionOutput: FC<{
           );
       });
   }, [url]);
-  console.log(messages);
   return (
-    <ExpansionPanel>
+    <ExpansionPanel TransitionProps={{ unmountOnExit: true }}>
       <ExpansionPanelSummary
         expandIcon={<ExpandMoreIcon />}
-        aria-controls="panel1a-content"
-        id="panel1a-header"
+        aria-controls={`panel-${name}-content`}
+        id={`panel-${name}-header`}
       >
         <Typography>{name}</Typography>
       </ExpansionPanelSummary>
       <ExpansionPanelDetails>
-        {messages.length === 0
-          ? 'Nothing here...'
-          : messages.map(message => (
-              <p style={{ whiteSpace: 'pre-wrap' }}>{message}</p>
-            ))}
+        {messages.length === 0 ? (
+          'Nothing here...'
+        ) : (
+          <Suspense fallback="...">
+            <div style={{ height: '200px', width: '100%' }}>
+              <LazyLog text={messages.join('\n')} extraLines={1} enableSearch />
+            </div>
+          </Suspense>
+        )}
       </ExpansionPanelDetails>
     </ExpansionPanel>
   );

plugins/circleci/src/pages/DetailedViewPage/DetailedViewPage.tsx

@@ -64,9 +64,8 @@ const BuildsList: FC<{ build: BuildWithSteps | null }> = ({ build }) => (
 
 const ActionsList: FC<{ actions: BuildStepAction[]; name: string }> = ({
   actions,
-  name,
 }) => (
-  <Box key={name}>
+  <>
     {actions.map((action: BuildStepAction) => (
       <ActionOutput
         action={action}
@@ -74,5 +73,5 @@ const ActionsList: FC<{ actions: BuildStepAction[]; name: string }> = ({
         url={action.output_url || ''}
       />
     ))}
-  </Box>
+  </>
 );

plugins/circleci/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig.json",
   "include": ["src"],
   "compilerOptions": {
+    "module": "esnext",
     "baseUrl": "src"
   }
 }