mirrors/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-08-05 21:57:09 +02:00
Code Issues Projects Releases Wiki Activity

Change IconCopy to IconCheck after clicking copy icon in metrics explore modal

Browse Source 
Signed-off-by: Ryan Wu <rongjun0821@gmail.com>
This commit is contained in:
Ryan Wu 2025-04-02 18:04:34 +08:00
parent 6bfaaa0fee
commit 831f79261c
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 { FC, useMemo, useState } from "react";
import { useSuspenseAPIQuery } from "../../../api/api"; import { useSuspenseAPIQuery } from "../../../api/api";
import { MetadataResult } from "../../../api/responseTypes/metadata"; 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 React from "react";
import { Fuzzy } from "@nexucis/fuzzy"; import { Fuzzy } from "@nexucis/fuzzy";
import sanitizeHTML from "sanitize-html"; 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 LabelsExplorer from "./LabelsExplorer";
import { useDebouncedValue } from "@mantine/hooks"; import { useDebouncedValue } from "@mantine/hooks";
import classes from "./MetricsExplorer.module.css"; import classes from "./MetricsExplorer.module.css";
@ -139,20 +139,29 @@ const MetricsExplorer: FC<MetricsExplorerProps> = ({
stroke={1.5} stroke={1.5}
/> />
</ActionIcon> </ActionIcon>
<ActionIcon <CopyButton value={m.original}>
size="sm" {({ copied, copy }) => (
color="gray" <ActionIcon
variant="light" size="sm"
title="Copy to clipboard" color="gray"
onClick={() => { variant="light"
navigator.clipboard.writeText(m.original); title="Copy to clipboard"
}} onClick={copy}
> >
<IconCopy {copied ? (
style={{ width: "70%", height: "70%" }} <IconCheck
stroke={1.5} style={{ width: "70%", height: "70%" }}
/> stroke={1.5}
</ActionIcon> />
) : (
<IconCopy
style={{ width: "70%", height: "70%" }}
stroke={1.5}
/>
)}
</ActionIcon>
)}
</CopyButton>
</Group> </Group>
</Group> </Group>
</Table.Td> </Table.Td>