You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by GitBox <gi...@apache.org> on 2022/03/22 16:25:14 UTC
[GitHub] [airflow] ryanahamilton commented on a change in pull request #22123: Add details drawer to Grid View
ryanahamilton commented on a change in pull request #22123:
URL: https://github.com/apache/airflow/pull/22123#discussion_r832308970
##########
File path: airflow/www/static/js/tree/StatusBox.jsx
##########
@@ -24,55 +24,76 @@ import { isEqual } from 'lodash';
import {
Box,
Tooltip,
+ useTheme,
} from '@chakra-ui/react';
-import { callModal } from '../dag';
import InstanceTooltip from './InstanceTooltip';
+import { useContainerRef } from './providers/containerRef';
+import { useSelection } from './providers/selection';
export const boxSize = 10;
export const boxSizePx = `${boxSize}px`;
+export const SimpleStatus = ({ state, ...rest }) => (
+ <Box
+ width={boxSizePx}
+ height={boxSizePx}
+ backgroundColor={stateColors[state] || 'white'}
+ borderRadius="2px"
+ borderWidth={state ? 0 : 1}
+ {...rest}
+ />
+);
+
const StatusBox = ({
- group, instance, containerRef, extraLinks = [],
+ group, instance,
}) => {
- const {
- executionDate, taskId, tryNumber = 0, operator, runId, mapIndex,
- } = instance;
- const onClick = () => executionDate && callModal(taskId, executionDate, extraLinks, tryNumber, operator === 'SubDagOperator', runId, mapIndex);
+ const containerRef = useContainerRef();
+ const { selected, onSelect } = useSelection();
+ const { runId, taskId } = instance;
+ const { colors } = useTheme();
+ const hoverBlue = `${colors.blue[100]}50`;
// Fetch the corresponding column element and set its background color when hovering
const onMouseEnter = () => {
- [...containerRef.current.getElementsByClassName(`js-${runId}`)]
- .forEach((e) => { e.style.backgroundColor = 'rgba(113, 128, 150, 0.1)'; });
+ if (selected.runId !== runId) {
+ [...containerRef.current.getElementsByClassName(`js-${runId}`)]
+ .forEach((e) => { e.style.backgroundColor = hoverBlue; });
+ }
};
const onMouseLeave = () => {
[...containerRef.current.getElementsByClassName(`js-${runId}`)]
.forEach((e) => { e.style.backgroundColor = null; });
};
+ const onClick = () => {
+ onMouseLeave();
+ onSelect({ taskId, runId });
+ };
+
return (
- <Tooltip
- label={<InstanceTooltip instance={instance} group={group} />}
- fontSize="md"
- portalProps={{ containerRef }}
- hasArrow
- placement="top"
- openDelay={400}
- >
- <Box
- width={boxSizePx}
- height={boxSizePx}
- backgroundColor={stateColors[instance.state] || 'white'}
- borderRadius="2px"
- borderWidth={instance.state ? 0 : 1}
- onMouseEnter={onMouseEnter}
- onMouseLeave={onMouseLeave}
- onClick={onClick}
- zIndex={1}
- cursor={!group.children && 'pointer'}
- data-testid="task-instance"
- />
- </Tooltip>
+ <>
Review comment:
Why the added fragment? Doesn't appear necessary given `<Tooltip />` is the only child.
##########
File path: airflow/www/static/js/tree/details/content/Dag.jsx
##########
@@ -0,0 +1,137 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* global moment */
+
+import React from 'react';
+import {
+ Table,
+ Tbody,
+ Tr,
+ Td,
+ Tag,
+ Text,
+ Code,
+ Link,
+ Box,
+ Button,
+ Flex,
+} from '@chakra-ui/react';
+
+import { formatDuration } from '../../../datetime_utils';
+import { getMetaValue } from '../../../utils';
+import { useDag, useTasks } from '../../api';
+import Time from '../../Time';
+
+const dagId = getMetaValue('dag_id');
+
+const Dag = () => {
+ const { data: dag } = useDag(dagId);
+ const { data: taskData } = useTasks(dagId);
+ if (!dag || !taskData) return null;
+ const { tasks = [], totalEntries = '' } = taskData;
+ const {
+ description, tags, fileloc, owners, catchup, startDate, timezone, dagRunTimeout,
+ } = dag;
+
+ // Build a key/value object of operator counts, the name is hidden inside of t.classRef.className
+ const operators = {};
+ tasks.forEach((t) => {
+ if (!operators[t.classRef.className]) {
+ operators[t.classRef.className] = 1;
+ } else {
+ operators[t.classRef.className] += 1;
+ }
+ });
+
+ return (
+ <Box>
Review comment:
Is this `Box` doing anything or could it be a fragment instead?
##########
File path: airflow/www/static/js/tree/details/content/dagRun/ClearRun.jsx
##########
@@ -0,0 +1,65 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState } from 'react';
+import { Button, useDisclosure } from '@chakra-ui/react';
+
+import { useClearRun } from '../../../api';
+import ConfirmDialog from '../ConfirmDialog';
+
+const ClearRun = ({ dagId, runId }) => {
+ const [affectedTasks, setAffectedTasks] = useState([]);
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const { mutateAsync: onClear, isLoading } = useClearRun(dagId, runId);
+
+ const onClick = async () => {
+ try {
+ const data = await onClear({ confirmed: false });
+ setAffectedTasks(data);
+ onOpen();
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ const onConfirm = async () => {
+ try {
+ await onClear({ confirmed: true });
+ setAffectedTasks([]);
+ onClose();
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ return (
+ <>
+ <Button onClick={onClick} isLoading={isLoading}>Clear existing tasks</Button>
+ <ConfirmDialog
+ isOpen={isOpen}
+ onClose={onClose}
+ onConfirm={onConfirm}
+ description="Here's the list of task instances you are about to clear:"
Review comment:
I didn't see this copy in the PR GIF, but even without the context, it seems like the copy could be simplified:
```suggestion
description="Task instances you are about to clear:"
```
##########
File path: airflow/www/static/js/tree/details/content/taskInstance/ExtraLinks.jsx
##########
@@ -0,0 +1,64 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import {
+ Button,
+ Flex,
+ Link,
+ Divider,
+} from '@chakra-ui/react';
+
+import { useExtraLinks } from '../../../api';
+
+const ExtraLinks = ({
+ dagId,
+ taskId,
+ executionDate,
+ extraLinks = [],
+}) => {
+ const { data: links = [] } = useExtraLinks({
+ dagId, taskId, executionDate, extraLinks,
+ });
+
+ if (!links.length) return null;
+ const checkIfExternal = (url) => /^(?:[a-z]+:)?\/\//.test(url);
Review comment:
Nit, the function naming could make it more explicit that returns a boolean
```suggestion
const isExternal = (url) => /^(?:[a-z]+:)?\/\//.test(url);
```
##########
File path: airflow/www/static/js/tree/details/content/taskInstance/taskActions/Clear.jsx
##########
@@ -0,0 +1,127 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState } from 'react';
+import {
+ Button,
+ Flex,
+ ButtonGroup,
+ useDisclosure,
+} from '@chakra-ui/react';
+
+import ActionButton from './ActionButton';
+import ConfirmDialog from '../../ConfirmDialog';
+import { useClearTask, useConfirmClearTask } from '../../../../api';
+
+const Run = ({
+ dagId,
+ runId,
+ taskId,
+ executionDate,
+}) => {
+ const [affectedTasks, setAffectedTasks] = useState([]);
+
+ // Options check/unchecked
+ const { isOpen: past, onToggle: onTogglePast } = useDisclosure();
Review comment:
Seems a little unorthodox to use `useDisclosure` to manage these boolean state values, no?
##########
File path: airflow/www/static/js/tree/StatusBox.jsx
##########
@@ -24,55 +24,76 @@ import { isEqual } from 'lodash';
import {
Box,
Tooltip,
+ useTheme,
} from '@chakra-ui/react';
-import { callModal } from '../dag';
import InstanceTooltip from './InstanceTooltip';
+import { useContainerRef } from './providers/containerRef';
+import { useSelection } from './providers/selection';
export const boxSize = 10;
export const boxSizePx = `${boxSize}px`;
+export const SimpleStatus = ({ state, ...rest }) => (
+ <Box
+ width={boxSizePx}
+ height={boxSizePx}
+ backgroundColor={stateColors[state] || 'white'}
+ borderRadius="2px"
+ borderWidth={state ? 0 : 1}
+ {...rest}
+ />
+);
+
const StatusBox = ({
- group, instance, containerRef, extraLinks = [],
+ group, instance,
}) => {
- const {
- executionDate, taskId, tryNumber = 0, operator, runId, mapIndex,
- } = instance;
- const onClick = () => executionDate && callModal(taskId, executionDate, extraLinks, tryNumber, operator === 'SubDagOperator', runId, mapIndex);
+ const containerRef = useContainerRef();
+ const { selected, onSelect } = useSelection();
+ const { runId, taskId } = instance;
+ const { colors } = useTheme();
+ const hoverBlue = `${colors.blue[100]}50`;
Review comment:
What's this translating to? Is it just suffixing the `50` to the hex value? e.g. `#BEE3F850`?
##########
File path: airflow/www/static/js/tree/details/content/dagRun/index.jsx
##########
@@ -0,0 +1,140 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import {
+ Flex,
+ Text,
+ Box,
+ Button,
+ Link,
+ Divider,
+} from '@chakra-ui/react';
+import { MdPlayArrow, MdOutlineAccountTree } from 'react-icons/md';
+
+import { SimpleStatus } from '../../../StatusBox';
+import { formatDuration } from '../../../../datetime_utils';
Review comment:
Not for this PR, but we might want to add some path aliasing so we can avoid all of the relative path imports.
##########
File path: airflow/www/static/js/tree/details/content/dagRun/MarkFailedRun.jsx
##########
@@ -0,0 +1,61 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState } from 'react';
+import { Button, useDisclosure } from '@chakra-ui/react';
+
+import { useMarkFailedRun } from '../../../api';
+import ConfirmDialog from '../ConfirmDialog';
+
+const MarkFailedRun = ({ dagId, runId }) => {
+ const [affectedTasks, setAffectedTasks] = useState([]);
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const { mutateAsync: markFailed, isLoading } = useMarkFailedRun(dagId, runId);
+
+ const onClick = async () => {
+ try {
+ const data = await markFailed({ confirmed: false });
+ setAffectedTasks(data);
+ onOpen();
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ const onConfirm = () => {
+ markFailed({ confirmed: true });
+ setAffectedTasks([]);
+ onClose();
+ };
+
+ return (
+ <>
+ <Button onClick={onClick} colorScheme="red" isLoading={isLoading}>Mark Failed</Button>
+ <ConfirmDialog
+ isOpen={isOpen}
+ onClose={onClose}
+ onConfirm={onConfirm}
+ description="Here's the list of task instances you are about to mark as failed:"
Review comment:
Similar copy suggestion here
```suggestion
description="Task instances you are about to mark as failed:"
```
##########
File path: airflow/www/static/js/tree/details/Header.jsx
##########
@@ -0,0 +1,95 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ Box,
+ Heading,
+} from '@chakra-ui/react';
+import { MdPlayArrow } from 'react-icons/md';
+
+import { getMetaValue } from '../../utils';
+import { useSelection } from '../providers/selection';
+import Time from '../Time';
+import useTreeData from '../useTreeData';
+
+const dagId = getMetaValue('dag_id');
+
+const LabelValue = ({ label, value }) => (
+ <Box position="relative">
+ <Heading as="h5" size="sm" color="gray.300" position="absolute" top="-12px">{label}</Heading>
+ <Heading as="h3" size="md">{value}</Heading>
+ </Box>
+);
+
+const Header = () => {
+ const { data: { dagRuns = [] } } = useTreeData();
+ const { selected: { taskId, runId, task }, onSelect, clearSelection } = useSelection();
+ const dagRun = dagRuns.find((r) => r.runId === runId);
+
+ let runLabel;
+ if (dagRun) {
+ if (runId.includes('manual__') || runId.includes('scheduled__') || runId.includes('backfill__')) {
+ runLabel = (<Time dateTime={dagRun.dataIntervalEnd} />);
+ } else {
+ runLabel = runId;
+ }
+ if (dagRun.runType === 'manual') {
+ runLabel = (
+ <>
+ <MdPlayArrow style={{ display: 'inline' }} />
+ {runLabel}
+ </>
+ );
+ }
+ }
+
+ const isMapped = task && task.isMapped;
+ const lastIndex = taskId ? taskId.lastIndexOf('.') : null;
+ const taskName = lastIndex ? taskId.substring(lastIndex + 1) : taskId;
+
+ return (
+ <Breadcrumb color="gray.300">
+ <BreadcrumbItem isCurrentPage={!runId && !taskId} mt="15px">
Review comment:
Could the `mt="15px"` on each of these `BreadcrumbItem` be moved up to the parent `Breadcrumb`? Could we just use Chakra spacing instead? e.g. `mt={4}`
##########
File path: airflow/www/static/js/tree/details/content/dagRun/QueueRun.jsx
##########
@@ -0,0 +1,74 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useState } from 'react';
+import { Button, useDisclosure } from '@chakra-ui/react';
+
+import { useQueueRun } from '../../../api';
+import ConfirmDialog from '../ConfirmDialog';
+
+const QueueRun = ({ dagId, runId }) => {
+ const [affectedTasks, setAffectedTasks] = useState([]);
+ const { isOpen, onOpen, onClose } = useDisclosure();
+ const { mutateAsync: onQueue, isLoading } = useQueueRun(dagId, runId);
+
+ // Get what the changes will be and show it in a modal
+ const onClick = async () => {
+ try {
+ const data = await onQueue({ confirmed: false });
+ setAffectedTasks(data);
+ onOpen();
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ // Confirm changes
+ const onConfirm = async () => {
+ try {
+ await onQueue({ confirmed: true });
+ setAffectedTasks([]);
+ onClose();
+ } catch (e) {
+ console.error(e);
+ }
+ };
+
+ return (
+ <>
+ <Button
+ onClick={onClick}
+ isLoading={isLoading}
+ ml="5px"
+ title="Queue up new tasks to make the DAG run up-to-date with any DAG file changes."
+ >
+ Queue up new tasks
+ </Button>
+ <ConfirmDialog
+ isOpen={isOpen}
+ onClose={onClose}
+ onConfirm={onConfirm}
+ description="Here's the list of task instances you are about to queue:"
Review comment:
Similar copy suggestion here
```suggestion
description="Task instances you are about to queue:"
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscribe@airflow.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org