From 7fc9912d15186b2f11f84549cc495c46438ecf06 Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
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 |
|-------------|-------------|
|
|
|
### Checklist
The following checks are **mandatory**:
- [ ] My change adheres [VictoriaMetrics contributing
guidelines](https://docs.victoriametrics.com/contributing/).
---------
Signed-off-by: hagen1778 <roman@victoriametrics.com>
Co-authored-by: hagen1778 <roman@victoriametrics.com>
(cherry picked from commit 959a4383c59456c70ac8e96b28975c97a4a9a4b4)
---
.../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 5c397cc4db..ef4933a0ec 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<JsonViewProps> = ({ 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 ebac923e86..0ac12ddbcf 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).