feat: adding task ids to the ui (#20894)

CHANGELOG.md

@@ -30,6 +30,7 @@ or `/query` HTTP endpoints.
 1. [20971](https://github.com/influxdata/influxdb/pull/20971): Set a default `--http-read-header-timeout` of 10s in `influxd`.
 1. [20971](https://github.com/influxdata/influxdb/pull/20971): Set a default `--http-idle-timeout` of 3m in `influxd`.
 1. [20861](https://github.com/influxdata/influxdb/pull/20861): Update Telegraf plugins in UI to include additions and changes in 1.18 release.
+1. [20894](https://github.com/influxdata/influxdb/pull/20894): Display task IDs in the UI.
 
 ### Bug Fixes
 

ui/src/style/chronograf.scss

@@ -124,6 +124,7 @@
 @import 'src/dashboards/components/DashboardLightMode.scss';
 @import 'src/buckets/components/DemoDataDropdown.scss';
 @import 'src/buckets/components/BucketCardMeta.scss';
+@import 'src/tasks/components/TaskCardMeta.scss';
 @import 'src/shared/components/notifications/Notification.scss';
 
 // External

ui/src/tasks/components/TaskCard.tsx

@@ -16,6 +16,7 @@ import {
 } from '@influxdata/clockface'
 import {Context} from 'src/clockface'
 import InlineLabels from 'src/shared/components/inlineLabels/InlineLabels'
+import TaskCardMeta from 'src/tasks/components/TaskCardMeta'
 import LastRunTaskStatus from 'src/shared/components/lastRunTaskStatus/LastRunTaskStatus'
 
 // Actions
@@ -78,6 +79,9 @@ export class TaskCard extends PureComponent<
             {this.activeToggle}
             <>Last completed at {task.latestCompleted}</>
             <>{`Scheduled to run ${this.schedule}`}</>
+            <>
+              <TaskCardMeta task={task} />
+            </>
           </ResourceCard.Meta>
           {this.labels}
         </FlexBox>

ui/src/tasks/components/TaskCardMeta.scss

@@ -0,0 +1,20 @@
+.copy-task-id {
+  transition: color 0.25s ease;
+
+  &:hover {
+    cursor: pointer;
+    color: $c-pool;
+  }
+}
+
+.copy-task-id--helper {
+  color: $g13-mist;
+  transition: opacity 0.25s ease;
+  opacity: 0;
+  display: inline-block;
+  margin-left: $cf-marg-b;
+}
+
+.copy-task-id:hover .copy-task-id--helper {
+  opacity: 1;
+}

ui/src/tasks/components/TaskCardMeta.tsx

@@ -0,0 +1,53 @@
+// Libraries
+import React, {FC} from 'react'
+import CopyToClipboard from 'react-copy-to-clipboard'
+import {useDispatch} from 'react-redux'
+
+// Constants
+import {
+  copyToClipboardSuccess,
+  copyToClipboardFailed,
+} from 'src/shared/copy/notifications'
+
+// Actions
+import {notify} from 'src/shared/actions/notifications'
+
+// Components
+import {ResourceCard} from '@influxdata/clockface'
+
+// Types
+import {Task} from 'src/types'
+
+interface OwnProps {
+  task: Task
+}
+
+const TaskCardMeta: FC<OwnProps> = ({task}) => {
+  const dispatch = useDispatch()
+  const handleCopyAttempt = (
+    copiedText: string,
+    isSuccessful: boolean
+  ): void => {
+    const text = copiedText.slice(0, 30).trimRight()
+    const truncatedText = `${text}...`
+
+    if (isSuccessful) {
+      dispatch(notify(copyToClipboardSuccess(truncatedText, 'Task ID')))
+    } else {
+      dispatch(notify(copyToClipboardFailed(truncatedText, 'Task ID')))
+    }
+  }
+
+  return (
+    <ResourceCard.Meta>
+      <CopyToClipboard text={task.id} onCopy={handleCopyAttempt}>
+        <span className="copy-task-id" title="Click to Copy to Clipboard">
+          ID: {task.id}
+          <span className="copy-task-id--helper">Copy to Clipboard</span>
+        </span>
+      </CopyToClipboard>
+    </ResourceCard.Meta>
+  )
+}
+
+export default TaskCardMeta