Fix grid logs for large logs

airflow/www/static/js/api/useTaskLog.ts

@@ -32,7 +32,7 @@ interface Props extends API.GetLogVariables {
 }
 
 const useTaskLog = ({
-  dagId, dagRunId, taskId, taskTryNumber, mapIndex, fullContent, state,
+  dagId, dagRunId, taskId, taskTryNumber, mapIndex, fullContent = false, state,
 }: Props) => {
   let url: string = '';
   const [isPreviousStatePending, setPrevState] = useState(true);

airflow/www/static/js/dag/details/taskInstance/Logs/index.test.tsx

@@ -81,7 +81,6 @@ describe('Test Logs Component.', () => {
     expect(useTaskLogMock).toHaveBeenLastCalledWith({
       dagId: 'dummyDagId',
       dagRunId: 'dummyDagRunId',
-      fullContent: false,
       taskId: 'dummyTaskId',
       taskTryNumber: 2,
     });
@@ -141,7 +140,6 @@ describe('Test Logs Component.', () => {
     expect(useTaskLogMock).toHaveBeenLastCalledWith({
       dagId: 'dummyDagId',
       dagRunId: 'dummyDagRunId',
-      fullContent: false,
       mapIndex: 1,
       taskId: 'dummyTaskId',
       taskTryNumber: 2,
@@ -168,7 +166,6 @@ describe('Test Logs Component.', () => {
     expect(useTaskLogMock).toHaveBeenLastCalledWith({
       dagId: 'dummyDagId',
       dagRunId: 'dummyDagRunId',
-      fullContent: false,
       taskId: 'dummyTaskId',
       taskTryNumber: 2,
     });
@@ -179,40 +176,8 @@ describe('Test Logs Component.', () => {
     expect(useTaskLogMock).toHaveBeenLastCalledWith({
       dagId: 'dummyDagId',
       dagRunId: 'dummyDagRunId',
-      fullContent: false,
       taskId: 'dummyTaskId',
       taskTryNumber: 1,
     });
   });
-
-  test('Test Logs Full Content', () => {
-    const tryNumber = 2;
-    const { getByTestId } = render(
-      <Logs
-        dagId="dummyDagId"
-        dagRunId="dummyDagRunId"
-        taskId="dummyTaskId"
-        executionDate="2020:01:01T01:00+00:00"
-        tryNumber={tryNumber}
-      />,
-    );
-    expect(useTaskLogMock).toHaveBeenLastCalledWith({
-      dagId: 'dummyDagId',
-      dagRunId: 'dummyDagRunId',
-      fullContent: false,
-      taskId: 'dummyTaskId',
-      taskTryNumber: 2,
-    });
-    const fullContentCheckbox = getByTestId('full-content-checkbox');
-
-    fireEvent.click(fullContentCheckbox);
-
-    expect(useTaskLogMock).toHaveBeenLastCalledWith({
-      dagId: 'dummyDagId',
-      dagRunId: 'dummyDagRunId',
-      fullContent: true,
-      taskId: 'dummyTaskId',
-      taskTryNumber: 2,
-    });
-  });
 });

airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx

@@ -27,7 +27,9 @@ import {
   Divider,
   Button,
   Checkbox,
+  Icon,
 } from '@chakra-ui/react';
+import { MdWarning } from 'react-icons/md';
 
 import { getMetaValue } from 'src/utils';
 import useTaskLog from 'src/api/useTaskLog';
@@ -102,7 +104,6 @@ const Logs = ({
 }: Props) => {
   const [internalIndexes, externalIndexes] = getLinkIndexes(tryNumber);
   const [selectedTryNumber, setSelectedTryNumber] = useState<number | undefined>();
-  const [shouldRequestFullContent, setShouldRequestFullContent] = useState(false);
   const [wrap, setWrap] = useState(getMetaValue('default_wrap') === 'True');
   const [logLevelFilters, setLogLevelFilters] = useState<Array<LogLevelOption>>([]);
   const [fileSourceFilters, setFileSourceFilters] = useState<Array<FileSourceOption>>([]);
@@ -115,7 +116,6 @@ const Logs = ({
     taskId,
     mapIndex,
     taskTryNumber,
-    fullContent: shouldRequestFullContent,
     state,
   });
 
@@ -128,7 +128,11 @@ const Logs = ({
     params.append('map_index', mapIndex.toString());
   }
 
-  const { parsedLogs, fileSources = [] } = useMemo(
+  const {
+    parsedLogs,
+    fileSources = [],
+    warning,
+  } = useMemo(
     () => parseLogs(
       data,
       timezone,
@@ -222,13 +226,6 @@ const Logs = ({
                 >
                   <Text as="strong">Wrap</Text>
                 </Checkbox>
-                <Checkbox
-                  onChange={() => setShouldRequestFullContent((previousState) => !previousState)}
-                  px={4}
-                  data-testid="full-content-checkbox"
-                >
-                  <Text as="strong" whiteSpace="nowrap">Full Logs</Text>
-                </Checkbox>
                 <LogLink
                   dagId={dagId}
                   taskId={taskId}
@@ -245,6 +242,14 @@ const Logs = ({
               </Flex>
             </Flex>
           </Box>
+          {!!warning && (
+            <Flex bg="yellow.200" borderRadius={2} borderColor="gray.400" alignItems="center" p={2}>
+              <Icon as={MdWarning} color="yellow.500" mr={2} />
+              <Text fontSize="sm">
+                {warning}
+              </Text>
+            </Flex>
+          )}
           {!!parsedLogs && (
             <LogBlock
               parsedLogs={parsedLogs}

airflow/www/static/js/dag/details/taskInstance/Logs/utils.ts

@@ -47,11 +47,14 @@ export const parseLogs = (
     return {};
   }
   let lines;
+
+  let warning;
+
   try {
     lines = data.split('\n');
   } catch (err) {
-    console.error(err);
-    return {};
+    warning = 'Unable to show logs. There was an error parsing logs.';
+    return { warning };
   }
 
   const parsedLines: Array<string> = [];
@@ -87,5 +90,17 @@ export const parseLogs = (
     }
   });
 
-  return { parsedLogs: parsedLines.join('\n'), fileSources: Array.from(fileSources).sort() };
+  return {
+    parsedLogs: parsedLines
+      .map((l) => {
+        if (l.length >= 1000000) {
+          warning = 'Large log file. Some lines have been truncated. Download logs in order to see everything.';
+          return `${l.slice(0, 1000000)}...`;
+        }
+        return l;
+      })
+      .join('\n'),
+    fileSources: Array.from(fileSources).sort(),
+    warning,
+  };
 };