From 959a4383c59456c70ac8e96b28975c97a4a9a4b4 Mon Sep 17 00:00:00 2001 From: Yury Molodov Date: Fri, 5 Jul 2024 09:33:09 +0200 Subject: [PATCH] vmui: add compact JSON display (#6582) ### Describe Your Changes If a JSON element has only one field, it will be displayed on a single line. #6559 | Old Display | New Display | |-------------|-------------| | ![image](https://github.com/VictoriaMetrics/VictoriaMetrics/assets/29711459/8866517b-a49d-450f-904c-19117397a078) | ![image](https://github.com/VictoriaMetrics/VictoriaMetrics/assets/29711459/8e222b43-a4cb-4f32-9a79-6199778404d3) | ### Checklist The following checks are **mandatory**: - [ ] My change adheres [VictoriaMetrics contributing guidelines](https://docs.victoriametrics.com/contributing/). --------- Signed-off-by: hagen1778 Co-authored-by: hagen1778 --- .../vmui/src/components/Views/JsonView/JsonView.tsx | 12 +++++++++++- docs/CHANGELOG.md | 1 + 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/app/vmui/packages/vmui/src/components/Views/JsonView/JsonView.tsx b/app/vmui/packages/vmui/src/components/Views/JsonView/JsonView.tsx index 5c397cc4d..ef4933a0e 100644 --- a/app/vmui/packages/vmui/src/components/Views/JsonView/JsonView.tsx +++ b/app/vmui/packages/vmui/src/components/Views/JsonView/JsonView.tsx @@ -12,7 +12,17 @@ export interface JsonViewProps { const JsonView: FC = ({ data }) => { const copyToClipboard = useCopyToClipboard(); - const formattedJson = useMemo(() => JSON.stringify(data, null, 2), [data]); + const formattedJson = useMemo(() => { + const space = " "; + const values = data.map(item => { + if (Object.keys(item).length === 1) { + return JSON.stringify(item); + } else { + return JSON.stringify(item, null, space.length); + } + }).join(",\n").replace(/^/gm, `${space}`); + return `[\n${values}\n]`; + }, [data]); const handlerCopy = async () => { await copyToClipboard(formattedJson, "Formatted JSON has been copied"); diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index ebac923e8..0ac12ddbc 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -48,6 +48,7 @@ See also [LTS releases](https://docs.victoriametrics.com/lts-releases/). * FEATURE: [vmagent](https://docs.victoriametrics.com/vmagent/) and [Single-node VictoriaMetrics](https://docs.victoriametrics.com/): add `-graphite.sanitizeMetricName` cmd-line flag for sanitizing metrics ingested via [Graphite protocol](https://docs.victoriametrics.com/#how-to-send-data-from-graphite-compatible-agents-such-as-statsd). See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6077). * FEATURE: [VictoriaMetrics cluster](https://docs.victoriametrics.com/cluster-victoriametrics/): do not retry RPC calls to vmstorage nodes if [complexity limits](https://docs.victoriametrics.com/#resource-usage-limits) were exceeded. * FEATURE: [vmalert](https://docs.victoriametrics.com/vmalert/): make `-replay.timeTo` optional in [replay mode](https://docs.victoriametrics.com/vmalert/#rules-backfilling). When omitted, the current timestamp will be used. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6492). +* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): show compacted result in the JSON tab for query results. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/6559). * BUGFIX: [docker-compose](https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/deployment/docker#docker-compose-environment-for-victoriametrics): fix incorrect link to vmui from [VictoriaMetrics plugin in Grafana](https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/deployment/docker#grafana). * BUGFIX: [docker-compose](https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/deployment/docker#docker-compose-environment-for-victoriametrics): fix incorrect link to vmui from [VictoriaMetrics plugin in Grafana](https://github.com/VictoriaMetrics/VictoriaMetrics/tree/master/deployment/docker#grafana).