This is an automated email from the ASF dual-hosted git repository. ephraimanierobi pushed a commit to branch v2-8-test in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 552fbe31208749054df5a99db9c8587129f36f91 Author: Karthikeyan Singaravelan <[email protected]> AuthorDate: Sun Dec 3 06:39:44 2023 +0530 Use dropdown instead of buttons when there are more than 10 retries in 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 <[email protected]> --------- Co-authored-by: Jens Scheffler <[email protected]> (cherry picked from commit fd0988369b3a94be01a994e46b7993e2d97b2028) --- .../js/dag/details/taskInstance/Logs/index.tsx | 57 ++++++++++++++++------ 1 file changed, 41 insertions(+), 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 index 16a5e2159f..12d64f4238 100644 --- 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"
