You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by bb...@apache.org on 2022/04/13 15:56:36 UTC
[airflow] branch grid-copy-btn created (now 9484f26c53)
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a change to branch grid-copy-btn
in repository https://gitbox.apache.org/repos/asf/airflow.git
at 9484f26c53 Add a clipboard button to grid details
This branch includes the following new commits:
new 9484f26c53 Add a clipboard button to grid details
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[airflow] 01/01: Add a clipboard button to grid details
Posted by bb...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch grid-copy-btn
in repository https://gitbox.apache.org/repos/asf/airflow.git
commit 9484f26c532a30662129d685bcd818d29a2e5bf3
Author: Brent Bovenzi <br...@gmail.com>
AuthorDate: Wed Apr 13 11:55:47 2022 -0400
Add a clipboard button to grid details
---
airflow/www/static/js/tree/Clipboard.jsx | 64 ++++++++++++++++++++++
.../js/tree/details/content/dagRun/index.jsx | 3 +-
.../tree/details/content/taskInstance/Details.jsx | 5 +-
3 files changed, 69 insertions(+), 3 deletions(-)
diff --git a/airflow/www/static/js/tree/Clipboard.jsx b/airflow/www/static/js/tree/Clipboard.jsx
new file mode 100644
index 0000000000..b26219b48f
--- /dev/null
+++ b/airflow/www/static/js/tree/Clipboard.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+ Box,
+ Button,
+ IconButton,
+ Tooltip,
+ useClipboard,
+ forwardRef,
+} from '@chakra-ui/react';
+import { FiCopy } from 'react-icons/fi';
+
+import { useContainerRef } from './context/containerRef';
+
+export const ClipboardButton = forwardRef(
+ (
+ {
+ value,
+ variant = 'outline',
+ iconOnly = false,
+ label = 'copy',
+ title = 'Copy',
+ 'aria-label': ariaLabel = 'Copy',
+ ...otherProps
+ },
+ ref,
+ ) => {
+ const { hasCopied, onCopy } = useClipboard(value);
+ const containerRef = useContainerRef();
+
+ const commonProps = {
+ onClick: onCopy,
+ variant,
+ title,
+ ref,
+ ...otherProps,
+ };
+
+ return (
+ <Tooltip
+ label="Copied"
+ isOpen={hasCopied}
+ isDisabled={!hasCopied}
+ closeDelay={500}
+ placement="top"
+ portalProps={{ containerRef }}
+ >
+ {iconOnly ? (
+ <IconButton icon={<FiCopy />} aria-label={ariaLabel} {...commonProps} />
+ ) : (
+ <Button leftIcon={<FiCopy />} {...commonProps}>
+ {label}
+ </Button>
+ )}
+ </Tooltip>
+ );
+ },
+);
+
+export const ClipboardText = ({ value }) => (
+ <Box as="span">
+ {value}
+ <ClipboardButton value={value} iconOnly variant="ghost" size="xs" fontSize="lg" ml={1} />
+ </Box>
+);
diff --git a/airflow/www/static/js/tree/details/content/dagRun/index.jsx b/airflow/www/static/js/tree/details/content/dagRun/index.jsx
index a449d183d3..98e3cdcca6 100644
--- a/airflow/www/static/js/tree/details/content/dagRun/index.jsx
+++ b/airflow/www/static/js/tree/details/content/dagRun/index.jsx
@@ -28,6 +28,7 @@ import {
import { MdPlayArrow, MdOutlineAccountTree } from 'react-icons/md';
import { SimpleStatus } from '../../../StatusBox';
+import { ClipboardText } from '../../../Clipboard';
import { formatDuration } from '../../../../datetime_utils';
import Time from '../../../Time';
import MarkFailedRun from './MarkFailedRun';
@@ -91,7 +92,7 @@ const DagRun = ({ runId }) => {
<Text whiteSpace="nowrap">
Run Id:
{' '}
- {runId}
+ <ClipboardText value={runId} />
</Text>
<Text>
Run Type:
diff --git a/airflow/www/static/js/tree/details/content/taskInstance/Details.jsx b/airflow/www/static/js/tree/details/content/taskInstance/Details.jsx
index 6ef9fa7460..6d341e4c3c 100644
--- a/airflow/www/static/js/tree/details/content/taskInstance/Details.jsx
+++ b/airflow/www/static/js/tree/details/content/taskInstance/Details.jsx
@@ -28,6 +28,7 @@ import { finalStatesMap } from '../../../../utils';
import { getDuration, formatDuration } from '../../../../datetime_utils';
import { SimpleStatus } from '../../../StatusBox';
import Time from '../../../Time';
+import { ClipboardText } from '../../../Clipboard';
const Details = ({ instance, group, operator }) => {
const isGroup = !!group.children;
@@ -114,12 +115,12 @@ const Details = ({ instance, group, operator }) => {
<br />
<Text>
{taskIdTitle}
- {taskId}
+ <ClipboardText value={taskId} />
</Text>
<Text whiteSpace="nowrap">
Run Id:
{' '}
- {runId}
+ <ClipboardText value={runId} />
</Text>
{operator && (
<Text>