mirrors/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2026-05-05 12:26:14 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #16390 from ryanwuer/copy-notification-in-explore-metrics-modal

Browse Source 
Make copy operation responsive after clicking copy icon in metrics explore modal
This commit is contained in:
Julius Volz 2025-04-02 17:48:34 +02:00 committed by GitHub
commit 8ad21d0659
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/ui/mantine-ui/src/pages/query/MetricsExplorer/MetricsExplorer.tsx
View File

@ -1,11 +1,11 @@
import { FC, useMemo, useState } from "react";
import { useSuspenseAPIQuery } from "../../../api/api";
import { MetadataResult } from "../../../api/responseTypes/metadata";
import { ActionIcon, Group, Stack, Table, TextInput } from "@mantine/core";
import { ActionIcon, CopyButton, Group, Stack, Table, TextInput } from "@mantine/core";
import React from "react";
import { Fuzzy } from "@nexucis/fuzzy";
import sanitizeHTML from "sanitize-html";
import { IconCodePlus, IconCopy, IconZoomCode } from "@tabler/icons-react";
import { IconCheck, IconCodePlus, IconCopy, IconZoomCode } from "@tabler/icons-react";
import LabelsExplorer from "./LabelsExplorer";
import { useDebouncedValue } from "@mantine/hooks";
import classes from "./MetricsExplorer.module.css";
@ -139,20 +139,29 @@ const MetricsExplorer: FC<MetricsExplorerProps> = ({
stroke={1.5}
/>
</ActionIcon>
<ActionIcon
size="sm"
color="gray"
variant="light"
title="Copy to clipboard"
onClick={() => {
navigator.clipboard.writeText(m.original);
}}
>
<IconCopy
style={{ width: "70%", height: "70%" }}
stroke={1.5}
/>
</ActionIcon>
<CopyButton value={m.original}>
{({ copied, copy }) => (
<ActionIcon
size="sm"
color="gray"
variant="light"
title="Copy to clipboard"
onClick={copy}
>
{copied ? (
<IconCheck
style={{ width: "70%", height: "70%" }}
stroke={1.5}
/>
) : (
<IconCopy
style={{ width: "70%", height: "70%" }}
stroke={1.5}
/>
)}
</ActionIcon>
)}
</CopyButton>
</Group>
</Group>
</Table.Td>