Use dropdown instead of buttons when there are more than 10 retries i…

…n log tab (#36025) * Use dropdown instead of buttons when there are more than 10 retries in log tab. * Update airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx Co-authored-by: Jens Scheffler <95105677+jscheffl@users.noreply.github.com> --------- Co-authored-by: Jens Scheffler <95105677+jscheffl@users.noreply.github.com>
apache · Dec 3, 2023 · fd09883 · fd09883
1 parent 9c168b7
commit fd09883
Showing 1 changed file with 41 additions and 16 deletions.
diff --git a/airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx b/airflow/www/static/js/dag/details/taskInstance/Logs/index.tsx
@@ -26,6 +26,7 @@ import {
   Checkbox,
   Icon,
   Spinner,
+  Select,
 } from "@chakra-ui/react";
 import { MdWarning } from "react-icons/md";
 
@@ -152,6 +153,9 @@ const Logs = ({
     [data, fileSourceFilters, logLevelFilters, timezone]
   );
 
+  const logAttemptDropdownLimit = 10;
+  const showDropdown = internalIndexes.length > logAttemptDropdownLimit;
+
   useEffect(() => {
     // Reset fileSourceFilters and selected attempt when changing to
     // a task that do not have those filters anymore.
@@ -193,24 +197,45 @@ const Logs = ({
       {tryNumber !== undefined && (
         <>
           <Box>
-            <Text as="span"> (by attempts)</Text>
-            <Flex my={1} justifyContent="space-between">
-              <Flex flexWrap="wrap">
-                {internalIndexes.map((index) => (
-                  <Button
-                    key={index}
-                    variant={taskTryNumber === index ? "solid" : "ghost"}
-                    colorScheme="blue"
-                    onClick={() => setSelectedTryNumber(index)}
-                    data-testid={`log-attempt-select-button-${index}`}
-                  >
-                    {index}
-                  </Button>
-                ))}
-              </Flex>
-            </Flex>
+            {!showDropdown && (
+              <Box>
+                <Text as="span"> (by attempts)</Text>
+                <Flex my={1} justifyContent="space-between">
+                  <Flex flexWrap="wrap">
+                    {internalIndexes.map((index) => (
+                      <Button
+                        key={index}
+                        variant={taskTryNumber === index ? "solid" : "ghost"}
+                        colorScheme="blue"
+                        onClick={() => setSelectedTryNumber(index)}
+                        data-testid={`log-attempt-select-button-${index}`}
+                      >
+                        {index}
+                      </Button>
+                    ))}
+                  </Flex>
+                </Flex>
+              </Box>
+            )}
             <Flex my={1} justifyContent="space-between" flexWrap="wrap">
               <Flex alignItems="center" flexGrow={1} mr={10}>
+                {showDropdown && (
+                  <Box width="100%" mr={2}>
+                    <Select
+                      size="sm"
+                      placeholder="Select log attempt"
+                      onChange={(e) => {
+                        setSelectedTryNumber(Number(e.target.value));
+                      }}
+                    >
+                      {internalIndexes.map((index) => (
+                        <option key={index} value={index}>
+                          {index}
+                        </option>
+                      ))}
+                    </Select>
+                  </Box>
+                )}
                 <Box width="100%" mr={2}>
                   <MultiSelect
                     size="sm"