diff --git a/app/vmui/packages/vmui/src/components/Legend/Legend.tsx b/app/vmui/packages/vmui/src/components/Legend/Legend.tsx index 0e06bbc60e..50b35dace0 100644 --- a/app/vmui/packages/vmui/src/components/Legend/Legend.tsx +++ b/app/vmui/packages/vmui/src/components/Legend/Legend.tsx @@ -1,9 +1,10 @@ -import React, {FC, useMemo} from "preact/compat"; +import React, {FC, useMemo, useState} from "preact/compat"; import {hexToRGB} from "../../utils/color"; import {useAppState} from "../../state/common/StateContext"; import {LegendItem} from "../../utils/uplot/types"; import "./legend.css"; import {getDashLine} from "../../utils/uplot/helpers"; +import Tooltip from "@mui/material/Tooltip"; export interface LegendProps { labels: LegendItem[]; @@ -13,10 +14,18 @@ export interface LegendProps { const Legend: FC = ({labels, onChange}) => { const {query} = useAppState(); + const [copiedValue, setCopiedValue] = useState(""); + const groups = useMemo(() => { return Array.from(new Set(labels.map(l => l.group))); }, [labels]); + const handleClickFreeField = async (val: string, id: string) => { + await navigator.clipboard.writeText(val); + setCopiedValue(id); + setTimeout(() => setCopiedValue(""), 2000); + }; + return <>
{groups.map((group) =>
@@ -39,7 +48,25 @@ const Legend: FC = ({labels, onChange}) => { borderColor: legendItem.color, backgroundColor: `rgba(${hexToRGB(legendItem.color)}, 0.1)` }}/> -
{legendItem.label}
+
+ {legendItem.freeFormFields.__name__ || `Query ${legendItem.group} result`} + {!!Object.keys(legendItem.freeFormFields).length && <> +  { + {Object.keys(legendItem.freeFormFields).filter(f => f !== "__name__").map((f) => { + const freeField = `${f}="${legendItem.freeFormFields[f]}"`; + const fieldId = `${legendItem.group}.${legendItem.label}.${freeField}`; + return + { + e.stopPropagation(); + handleClickFreeField(freeField, fieldId); + }}> + {f}: {legendItem.freeFormFields[f]} + + ; + })} + } + } +
)}
diff --git a/app/vmui/packages/vmui/src/components/Legend/legend.css b/app/vmui/packages/vmui/src/components/Legend/legend.css index 23e0281551..b09fdad5de 100644 --- a/app/vmui/packages/vmui/src/components/Legend/legend.css +++ b/app/vmui/packages/vmui/src/components/Legend/legend.css @@ -34,7 +34,7 @@ grid-gap: 6px; align-items: start; justify-content: start; - padding: 5px 10px; + padding: 7px 50px 7px 10px; background-color: #FFF; cursor: pointer; transition: 0.2s ease; @@ -56,14 +56,27 @@ border-style: solid; box-sizing: border-box; transition: 0.2s ease; - margin: 3px 0; } .legendLabel { font-size: 11px; + line-height: 12px; font-weight: normal; } +.legendFreeFields { + padding: 3px; + cursor: pointer; +} + +.legendFreeFields:hover { + text-decoration: underline; +} + +.legendFreeFields:not(:last-child):after { + content: ","; +} + .legendWrapperHotkey { display: flex; align-items: center; diff --git a/app/vmui/packages/vmui/src/utils/uplot/series.ts b/app/vmui/packages/vmui/src/utils/uplot/series.ts index ec9fb4de62..e34b7b028a 100644 --- a/app/vmui/packages/vmui/src/utils/uplot/series.ts +++ b/app/vmui/packages/vmui/src/utils/uplot/series.ts @@ -10,6 +10,7 @@ export const getSeriesItem = (d: MetricResult, hideSeries: string[]): Series => return { label, dash: getDashLine(d.group), + class: JSON.stringify(d.metric), width: 1.4, stroke: getColorLine(d.group, label), show: !includesHideSeries(label, d.group, hideSeries), @@ -25,7 +26,8 @@ export const getLegendItem = (s: Series, group: number): LegendItem => ({ group, label: s.label || "", color: s.stroke as string, - checked: s.show || false + checked: s.show || false, + freeFormFields: JSON.parse(s.class || "{}"), }); export const getHideSeries = ({hideSeries, legend, metaKey, series}: HideSeriesArgs): string[] => { diff --git a/app/vmui/packages/vmui/src/utils/uplot/types.ts b/app/vmui/packages/vmui/src/utils/uplot/types.ts index b218de6b5e..76d5adccee 100644 --- a/app/vmui/packages/vmui/src/utils/uplot/types.ts +++ b/app/vmui/packages/vmui/src/utils/uplot/types.ts @@ -36,4 +36,5 @@ export interface LegendItem { label: string; color: string; checked: boolean; + freeFormFields: {[key: string]: string}; } \ No newline at end of file