vmui: add metric relabel debug (#3889)

* feat: add metric relabel debug (#3807) * fix: add link to relabeling cookbook * lib/promrelabel: merge, fix conflicts * lib/promrelabel: fix diff * docs/vmui: add metric relabel playground --------- Co-authored-by: dmitryk-dk <kozlovdmitriyy@gmail.com>
2024-11-21 14:44:00 +00:00 · 2023-04-26 10:53:29 +02:00 · 2023-04-26 10:53:29 +02:00 · 4f3f9950d0
commit 4f3f9950d0
parent 45a551df9c
14 changed files with 793 additions and 284 deletions
--- a/app/vmselect/main.go
+++ b/app/vmselect/main.go
@ -461,6 +461,7 @@ func RequestHandler(w http.ResponseWriter, r *http.Request) bool {
 		return true
 	case "/metric-relabel-debug":
 		promscrapeMetricRelabelDebugRequests.Inc()
+		httpserver.EnableCORS(w, r)
 		promscrape.WriteMetricRelabelDebug(w, r)
 		return true
 	case "/target-relabel-debug":
--- a/app/vmui/packages/vmui/src/App.tsx
+++ b/app/vmui/packages/vmui/src/App.tsx
@ -12,6 +12,7 @@ import TracePage from "./pages/TracePage";
 import ExploreMetrics from "./pages/ExploreMetrics";
 import PreviewIcons from "./components/Main/Icons/PreviewIcons";
 import WithTemplate from "./pages/WithTemplate";
+import Relabel from "./pages/Relabel";

 const App: FC = () => {

@ -56,6 +57,10 @@ const App: FC = () => {
                  path={router.withTemplate}
                  element={<WithTemplate/>}
                />
+                <Route
+                  path={router.relabel}
+                  element={<Relabel/>}
+                />
                <Route
                  path={router.icons}
                  element={<PreviewIcons/>}
--- a/app/vmui/packages/vmui/src/api/metric-relabel.ts
+++ b/app/vmui/packages/vmui/src/api/metric-relabel.ts
@ -0,0 +1,8 @@
+export const getMetricRelabelDebug = (server: string, configs: string, metric: string): string => {
+  const params = [
+    "format=json",
+    `relabel_configs=${encodeURIComponent(configs)}`,
+    `metric=${encodeURIComponent(metric)}`
+  ];
+  return `${server}/metric-relabel-debug?${params.join("&")}`;
+};
--- a/app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/HeaderNav.tsx
+++ b/app/vmui/packages/vmui/src/components/Layout/Header/HeaderNav/HeaderNav.tsx
@ -55,6 +55,10 @@ const HeaderNav: FC<HeaderNavProps> = ({ color, background, direction }) => {
          label: routerOptions[router.withTemplate].title,
          value: router.withTemplate,
        },
+        {
+          label: routerOptions[router.relabel].title,
+          value: router.relabel,
+        },
      ]
    },
    {
--- a/app/vmui/packages/vmui/src/pages/Relabel/hooks/useRelabelDebug.ts
+++ b/app/vmui/packages/vmui/src/pages/Relabel/hooks/useRelabelDebug.ts
@ -0,0 +1,36 @@
+import { useAppState } from "../../../state/common/StateContext";
+import { useState } from "react";
+import { ErrorTypes, RelabelData } from "../../../types";
+import { getMetricRelabelDebug } from "../../../api/metric-relabel";
+
+export const useRelabelDebug = () => {
+  const { serverUrl } = useAppState();
+
+  const [data, setData] = useState<RelabelData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<ErrorTypes | string>();
+
+  const fetchData = async (config: string, metric: string) => {
+    const fetchUrl = getMetricRelabelDebug(serverUrl, config, metric);
+    setLoading(true);
+    try {
+      const response = await fetch(fetchUrl);
+      const resp = await response.json();
+
+      setData(resp.error ? null : resp);
+      setError(String(resp.error || ""));
+    } catch (e) {
+      if (e instanceof Error && e.name !== "AbortError") {
+        setError(`${e.name}: ${e.message}`);
+      }
+    }
+    setLoading(false);
+  };
+
+  return {
+    data,
+    error,
+    loading,
+    fetchData
+  };
+};
--- a/app/vmui/packages/vmui/src/pages/Relabel/index.tsx
+++ b/app/vmui/packages/vmui/src/pages/Relabel/index.tsx
@ -0,0 +1,181 @@
+import React, { FC, useEffect } from "preact/compat";
+import "./style.scss";
+import TextField from "../../components/Main/TextField/TextField";
+import { useState } from "react";
+import Button from "../../components/Main/Button/Button";
+import { InfoIcon, PlayIcon, WikiIcon } from "../../components/Main/Icons";
+import "./style.scss";
+import { useRelabelDebug } from "./hooks/useRelabelDebug";
+import Spinner from "../../components/Main/Spinner/Spinner";
+import Alert from "../../components/Main/Alert/Alert";
+import { useSearchParams } from "react-router-dom";
+
+const example = {
+  config: `- if: '{bar_label=~"b.*"}'
+  source_labels: [foo_label, bar_label]
+  separator: "_"
+  target_label: foobar
+- action: labeldrop
+  regex: "foo_.*"
+- target_label: job
+  replacement: "my-application-2"`,
+  labels: "{__name__=\"my_metric\", bar_label=\"bar\", foo_label=\"foo\", job=\"my-application\", instance=\"192.168.0.1\"}"
+};
+
+const Relabel: FC = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const { data, loading, error, fetchData } = useRelabelDebug();
+
+  const [config, setConfig] = useState("");
+  const [labels, setLabels] = useState("");
+
+  const handleChangeConfig = (val: string) => {
+    setConfig(val);
+  };
+
+  const handleChangeLabels = (val: string) => {
+    setLabels(val);
+  };
+
+  const handleRunQuery = () => {
+    fetchData(config, labels);
+    searchParams.set("config", config);
+    searchParams.set("labels", labels);
+    setSearchParams(searchParams);
+  };
+
+  const handleRunExample = () => {
+    const { config, labels } = example;
+    setConfig(config);
+    setLabels(labels);
+    fetchData(config, labels);
+    searchParams.set("config", config);
+    searchParams.set("labels", labels);
+    setSearchParams(searchParams);
+  };
+
+  useEffect(() => {
+    const queryConfig = searchParams.get("config") || "";
+    const queryLabels = searchParams.get("labels") || "";
+    if (queryLabels || queryConfig) {
+      fetchData(queryConfig, queryLabels);
+      setConfig(queryConfig);
+      setLabels(queryLabels);
+    }
+  }, []);
+
+  return (
+    <section className="vm-relabeling">
+      {loading && <Spinner/>}
+      <div className="vm-relabeling-header vm-block">
+        <div className="vm-relabeling-header__configs">
+          <TextField
+            type="textarea"
+            label="Relabel configs"
+            value={config}
+            autofocus
+            onChange={handleChangeConfig}
+          />
+        </div>
+        <div className="vm-relabeling-header__labels">
+          <TextField
+            type="textarea"
+            label="Labels"
+            value={labels}
+            onChange={handleChangeLabels}
+          />
+        </div>
+        <div className="vm-relabeling-header-bottom">
+          <a
+            className="vm-link vm-link_with-icon"
+            target="_blank"
+            href="https://docs.victoriametrics.com/relabeling.html"
+            rel="help noreferrer"
+          >
+            <InfoIcon/>
+            Relabeling cookbook
+          </a>
+          <a
+            className="vm-link vm-link_with-icon"
+            target="_blank"
+            href="https://docs.victoriametrics.com/vmagent.html#relabeling"
+            rel="help noreferrer"
+          >
+            <WikiIcon/>
+            Documentation
+          </a>
+          <Button
+            variant="text"
+            onClick={handleRunExample}
+          >
+            Try example
+          </Button>
+          <Button
+            variant="contained"
+            onClick={handleRunQuery}
+            startIcon={<PlayIcon/>}
+          >
+            Submit
+          </Button>
+        </div>
+      </div>
+
+      {error && <Alert variant="error">{error}</Alert>}
+
+      {data && (
+        <div className="vm-relabeling-steps vm-block">
+          {data.originalLabels && (
+            <div className="vm-relabeling-steps-item">
+              <div className="vm-relabeling-steps-item__row">
+                <span>Original labels:</span>
+                <code dangerouslySetInnerHTML={{ __html: data.originalLabels }}/>
+              </div>
+            </div>
+          )}
+
+          {data.steps.map((step, index) => (
+            <div
+              className="vm-relabeling-steps-item"
+              key={index}
+            >
+              <div className="vm-relabeling-steps-item__row">
+                <span>Step:</span>
+                {index + 1}
+              </div>
+              <div className="vm-relabeling-steps-item__row">
+                <span>Relabeling Rule:</span>
+                <code>
+                  <pre>{step.rule}</pre>
+                </code>
+              </div>
+              <div className="vm-relabeling-steps-item__row">
+                <span>Input Labels:</span>
+                <code>
+                  <pre dangerouslySetInnerHTML={{ __html: step.inLabels }}/>
+                </code>
+              </div>
+              <div className="vm-relabeling-steps-item__row">
+                <span>Output labels:</span>
+                <code>
+                  <pre dangerouslySetInnerHTML={{ __html: step.outLabels }}/>
+                </code>
+              </div>
+            </div>
+          ))}
+
+          {data.resultingLabels && (
+            <div className="vm-relabeling-steps-item">
+              <div className="vm-relabeling-steps-item__row">
+                <span>Resulting labels:</span>
+                <code dangerouslySetInnerHTML={{ __html: data.resultingLabels }}/>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default Relabel;
--- a/app/vmui/packages/vmui/src/pages/Relabel/style.scss
+++ b/app/vmui/packages/vmui/src/pages/Relabel/style.scss
@ -0,0 +1,74 @@
+@use "src/styles/variables" as *;
+
+.vm-relabeling {
+  display: grid;
+  gap: $padding-medium;
+
+  &-header {
+    display: grid;
+    gap: $padding-global;
+    align-items: flex-start;
+    width: 100%;
+
+    &__configs {
+      textarea {
+        min-height: 200px;
+      }
+    }
+
+    &__labels {
+      textarea {
+        min-height: 60px;
+      }
+    }
+
+    textarea {
+      overflow: auto;
+      width: 100%;
+      height: 100%;
+    }
+
+    &-bottom {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: $padding-global;
+
+      a {
+        color: $color-text-secondary;
+      }
+    }
+  }
+
+  &-steps {
+    display: grid;
+    gap: $padding-global;
+
+    &-item {
+      display: grid;
+      gap: $padding-global;
+      padding: 0 $padding-global $padding-global;
+      border-bottom: $border-divider;
+
+      &:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      &__row {
+        display: grid;
+        grid-template-columns: 100px 1fr;
+
+        @media (max-width: 500px) {
+          grid-template-columns: 1fr;
+          gap: 4px;
+
+        }
+
+        pre {
+          white-space: pre-wrap;
+        }
+      }
+    }
+  }
+}
--- a/app/vmui/packages/vmui/src/router/index.ts
+++ b/app/vmui/packages/vmui/src/router/index.ts
@ -6,7 +6,8 @@ const router = {
  topQueries: "/top-queries",
  trace: "/trace",
  withTemplate: "/expand-with-exprs",
-  icons: "/icons" // for dev
+  relabel: "/relabeling",
+  icons: "/icons"
 };

 export interface RouterOptionsHeader {
@ -70,6 +71,10 @@ export const routerOptions: {[key: string]: RouterOptions} = {
    title: "WITH templates",
    header: {}
  },
+  [router.relabel]: {
+    title: "Metric relabel debug",
+    header: {}
+  },
  [router.icons]: {
    title: "Icons",
    header: {}
--- a/app/vmui/packages/vmui/src/types/index.ts
+++ b/app/vmui/packages/vmui/src/types/index.ts
@ -125,3 +125,16 @@ export enum Theme {
  light = "light",
  dark = "dark",
 }
+
+export interface RelabelStep {
+  rule: string;
+  inLabels: string;
+  outLabels: string;
+}
+
+export interface RelabelData {
+  status: string;
+  originalLabels?: string;
+  resultingLabels?: string;
+  steps: RelabelStep[];
+}
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@ -27,6 +27,7 @@ The following tip changes can be tested by building VictoriaMetrics components f
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): integrate WITH template playground. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3811).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add a comparison of data from the previous day with data from the current day to the `Cardinality Explorer`. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3967).
 * FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): display histogram metrics as a heatmap in the `explore metrics` tab. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4111).
+* FEATURE: [vmui](https://docs.victoriametrics.com/#vmui): add the metric relabel playground feature to the vmui. See [this issue](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/3807).
 * FEATURE: [vmauth](https://docs.victoriametrics.com/vmauth.html): add ability to proxy requests for unauthorized users. See [this doc](https://github.com/VictoriaMetrics/VictoriaMetrics/issues/4083).

 * BUGFIX: reduce the probability of sudden increase in the number of small parts on systems with small number of CPU cores.
--- a/lib/promrelabel/debug.go
+++ b/lib/promrelabel/debug.go
@ -8,39 +8,39 @@ import (
 )

 // WriteMetricRelabelDebug writes /metric-relabel-debug page to w with the corresponding args.
-func WriteMetricRelabelDebug(w io.Writer, targetID, metric, relabelConfigs string, err error) {
-	writeRelabelDebug(w, false, targetID, metric, relabelConfigs, err)
+func WriteMetricRelabelDebug(w io.Writer, targetID, metric, relabelConfigs, format string, err error) {
+	writeRelabelDebug(w, false, targetID, metric, relabelConfigs, format, err)
 }

 // WriteTargetRelabelDebug writes /target-relabel-debug page to w with the corresponding args.
-func WriteTargetRelabelDebug(w io.Writer, targetID, metric, relabelConfigs string, err error) {
-	writeRelabelDebug(w, true, targetID, metric, relabelConfigs, err)
+func WriteTargetRelabelDebug(w io.Writer, targetID, metric, relabelConfigs, format string, err error) {
+	writeRelabelDebug(w, true, targetID, metric, relabelConfigs, format, err)
 }

-func writeRelabelDebug(w io.Writer, isTargetRelabel bool, targetID, metric, relabelConfigs string, err error) {
+func writeRelabelDebug(w io.Writer, isTargetRelabel bool, targetID, metric, relabelConfigs, format string, err error) {
 	if metric == "" {
 		metric = "{}"
 	}
 	targetURL := ""
 	if err != nil {
-		WriteRelabelDebugSteps(w, targetURL, targetID, nil, metric, relabelConfigs, err)
+		WriteRelabelDebugSteps(w, targetURL, targetID, format, nil, metric, relabelConfigs, err)
 		return
 	}
 	labels, err := promutils.NewLabelsFromString(metric)
 	if err != nil {
 		err = fmt.Errorf("cannot parse metric: %s", err)
-		WriteRelabelDebugSteps(w, targetURL, targetID, nil, metric, relabelConfigs, err)
+		WriteRelabelDebugSteps(w, targetURL, targetID, format, nil, metric, relabelConfigs, err)
 		return
 	}
 	pcs, err := ParseRelabelConfigsData([]byte(relabelConfigs))
 	if err != nil {
 		err = fmt.Errorf("cannot parse relabel configs: %s", err)
-		WriteRelabelDebugSteps(w, targetURL, targetID, nil, metric, relabelConfigs, err)
+		WriteRelabelDebugSteps(w, targetURL, targetID, format, nil, metric, relabelConfigs, err)
 		return
 	}

 	dss, targetURL := newDebugRelabelSteps(pcs, labels, isTargetRelabel)
-	WriteRelabelDebugSteps(w, targetURL, targetID, dss, metric, relabelConfigs, nil)
+	WriteRelabelDebugSteps(w, targetURL, targetID, format, dss, metric, relabelConfigs, nil)
 }

 func newDebugRelabelSteps(pcs *ParsedConfigs, labels *promutils.Labels, isTargetRelabel bool) ([]DebugStep, string) {
--- a/lib/promrelabel/debug.qtpl
+++ b/lib/promrelabel/debug.qtpl
@ -1,11 +1,20 @@
 {% import (
+        "fmt"
        "github.com/VictoriaMetrics/VictoriaMetrics/lib/htmlcomponents"
        "github.com/VictoriaMetrics/VictoriaMetrics/lib/promutils"
 ) %}

 {% stripspace %}

-{% func RelabelDebugSteps(targetURL string, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) %}
+{% func RelabelDebugSteps(targetURL, targetID, format string, dss []DebugStep, metric, relabelConfigs  string, err error) %}
+  {% if format == "json" %}
+      {%= RelabelDebugStepsJSON(targetURL, targetID, dss, metric, relabelConfigs, err) %}
+  {% else %}
+      {%= RelabelDebugStepsHTML(targetURL, targetID, dss, metric, relabelConfigs, err) %}
+  {% endif %}
+{% endfunc %}
+
+{% func RelabelDebugStepsHTML(targetURL, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) %}
 <!DOCTYPE html>
 <html lang="en">
 <head>
@ -128,6 +137,36 @@ function submitRelabelDebugForm(e) {
 {% endif %}
 {% endfunc %}

+{% func RelabelDebugStepsJSON(targetURL, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) %}
+    {
+       {% if err != nil %}
+                "status": "error",
+                "error": {%q= fmt.Sprintf("Error: %s", err) %}
+        {% else %}
+                "status": "success",
+                {% if len(dss) > 0 %}
+                    "originalLabels": {%q= string(mustFormatLabels(dss[0].In)) %},
+                    "resultingLabels": {%q= string(mustFormatLabels(dss[len(dss)-1].Out)) %},
+                {% endif %}
+                "steps": [
+                    {% for i, ds := range dss %}
+                        {% code
+                            inLabels := promutils.MustNewLabelsFromString(ds.In)
+                            outLabels := promutils.MustNewLabelsFromString(ds.Out)
+                            changedLabels := getChangedLabelNames(inLabels, outLabels)
+                        %}
+                        {
+                            "inLabels": {%q= labelsWithHighlight(inLabels, changedLabels, "red") %},
+                            "outLabels": {%q= labelsWithHighlight(outLabels, changedLabels, "blue") %},
+                            "rule": {%q= ds.Rule %}
+                        }
+                        {% if i != len(dss)-1 %},{% endif %}
+                    {% endfor %}
+                ]
+        {% endif %}
+    }
+{% endfunc %}
+
 {% func labelsWithHighlight(labels *promutils.Labels, highlight map[string]struct{}, color string) %}
        {% code
                labelsList := labels.GetLabels()
--- a/lib/promrelabel/debug.qtpl.go
+++ b/lib/promrelabel/debug.qtpl.go
@ -6,296 +6,432 @@ package promrelabel

 //line lib/promrelabel/debug.qtpl:1
 import (
+	"fmt"
 	"github.com/VictoriaMetrics/VictoriaMetrics/lib/htmlcomponents"
 	"github.com/VictoriaMetrics/VictoriaMetrics/lib/promutils"
 )

-//line lib/promrelabel/debug.qtpl:8
+//line lib/promrelabel/debug.qtpl:9
 import (
 	qtio422016 "io"

 	qt422016 "github.com/valyala/quicktemplate"
 )

-//line lib/promrelabel/debug.qtpl:8
+//line lib/promrelabel/debug.qtpl:9
 var (
 	_ = qtio422016.Copy
 	_ = qt422016.AcquireByteBuffer
 )

-//line lib/promrelabel/debug.qtpl:8
-func StreamRelabelDebugSteps(qw422016 *qt422016.Writer, targetURL string, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) {
-//line lib/promrelabel/debug.qtpl:8
-	qw422016.N().S(`<!DOCTYPE html><html lang="en"><head>`)
+//line lib/promrelabel/debug.qtpl:9
+func StreamRelabelDebugSteps(qw422016 *qt422016.Writer, targetURL, targetID, format string, dss []DebugStep, metric, relabelConfigs string, err error) {
+//line lib/promrelabel/debug.qtpl:10
+	if format == "json" {
+//line lib/promrelabel/debug.qtpl:11
+		StreamRelabelDebugStepsJSON(qw422016, targetURL, targetID, dss, metric, relabelConfigs, err)
 //line lib/promrelabel/debug.qtpl:12
-	htmlcomponents.StreamCommonHeader(qw422016)
-//line lib/promrelabel/debug.qtpl:12
-	qw422016.N().S(`<title>Metric relabel debug</title><script>function submitRelabelDebugForm(e) {var form = e.target;var method = "GET";if (form.elements["relabel_configs"].value.length + form.elements["metric"].value.length > 1000) {method = "POST";}form.method = method;}</script></head><body>`)
-//line lib/promrelabel/debug.qtpl:26
-	htmlcomponents.StreamNavbar(qw422016)
-//line lib/promrelabel/debug.qtpl:26
-	qw422016.N().S(`<div class="container-fluid"><a href="https://docs.victoriametrics.com/relabeling.html" target="_blank">Relabeling docs</a>`)
-//line lib/promrelabel/debug.qtpl:28
-	qw422016.N().S(` `)
-//line lib/promrelabel/debug.qtpl:30
-	if targetURL != "" {
-//line lib/promrelabel/debug.qtpl:30
-		qw422016.N().S(`<a href="metric-relabel-debug`)
-//line lib/promrelabel/debug.qtpl:31
-		if targetID != "" {
-//line lib/promrelabel/debug.qtpl:31
-			qw422016.N().S(`?id=`)
-//line lib/promrelabel/debug.qtpl:31
-			qw422016.E().S(targetID)
-//line lib/promrelabel/debug.qtpl:31
-		}
-//line lib/promrelabel/debug.qtpl:31
-		qw422016.N().S(`">Metric relabel debug</a>`)
-//line lib/promrelabel/debug.qtpl:32
 	} else {
-//line lib/promrelabel/debug.qtpl:32
-		qw422016.N().S(`<a href="target-relabel-debug`)
-//line lib/promrelabel/debug.qtpl:33
-		if targetID != "" {
-//line lib/promrelabel/debug.qtpl:33
-			qw422016.N().S(`?id=`)
-//line lib/promrelabel/debug.qtpl:33
-			qw422016.E().S(targetID)
-//line lib/promrelabel/debug.qtpl:33
+//line lib/promrelabel/debug.qtpl:13
+		StreamRelabelDebugStepsHTML(qw422016, targetURL, targetID, dss, metric, relabelConfigs, err)
+//line lib/promrelabel/debug.qtpl:14
 	}
-//line lib/promrelabel/debug.qtpl:33
-		qw422016.N().S(`">Target relabel debug</a>`)
-//line lib/promrelabel/debug.qtpl:34
+//line lib/promrelabel/debug.qtpl:15
 }
-//line lib/promrelabel/debug.qtpl:34
-	qw422016.N().S(`<br>`)
+
+//line lib/promrelabel/debug.qtpl:15
+func WriteRelabelDebugSteps(qq422016 qtio422016.Writer, targetURL, targetID, format string, dss []DebugStep, metric, relabelConfigs string, err error) {
+//line lib/promrelabel/debug.qtpl:15
+	qw422016 := qt422016.AcquireWriter(qq422016)
+//line lib/promrelabel/debug.qtpl:15
+	StreamRelabelDebugSteps(qw422016, targetURL, targetID, format, dss, metric, relabelConfigs, err)
+//line lib/promrelabel/debug.qtpl:15
+	qt422016.ReleaseWriter(qw422016)
+//line lib/promrelabel/debug.qtpl:15
+}
+
+//line lib/promrelabel/debug.qtpl:15
+func RelabelDebugSteps(targetURL, targetID, format string, dss []DebugStep, metric, relabelConfigs string, err error) string {
+//line lib/promrelabel/debug.qtpl:15
+	qb422016 := qt422016.AcquireByteBuffer()
+//line lib/promrelabel/debug.qtpl:15
+	WriteRelabelDebugSteps(qb422016, targetURL, targetID, format, dss, metric, relabelConfigs, err)
+//line lib/promrelabel/debug.qtpl:15
+	qs422016 := string(qb422016.B)
+//line lib/promrelabel/debug.qtpl:15
+	qt422016.ReleaseByteBuffer(qb422016)
+//line lib/promrelabel/debug.qtpl:15
+	return qs422016
+//line lib/promrelabel/debug.qtpl:15
+}
+
+//line lib/promrelabel/debug.qtpl:17
+func StreamRelabelDebugStepsHTML(qw422016 *qt422016.Writer, targetURL, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) {
+//line lib/promrelabel/debug.qtpl:17
+	qw422016.N().S(`<!DOCTYPE html><html lang="en"><head>`)
+//line lib/promrelabel/debug.qtpl:21
+	htmlcomponents.StreamCommonHeader(qw422016)
+//line lib/promrelabel/debug.qtpl:21
+	qw422016.N().S(`<title>Metric relabel debug</title><script>function submitRelabelDebugForm(e) {var form = e.target;var method = "GET";if (form.elements["relabel_configs"].value.length + form.elements["metric"].value.length > 1000) {method = "POST";}form.method = method;}</script></head><body>`)
+//line lib/promrelabel/debug.qtpl:35
+	htmlcomponents.StreamNavbar(qw422016)
+//line lib/promrelabel/debug.qtpl:35
+	qw422016.N().S(`<div class="container-fluid"><a href="https://docs.victoriametrics.com/relabeling.html" target="_blank">Relabeling docs</a>`)
 //line lib/promrelabel/debug.qtpl:37
-	if err != nil {
-//line lib/promrelabel/debug.qtpl:38
-		htmlcomponents.StreamErrorNotification(qw422016, err)
+	qw422016.N().S(` `)
 //line lib/promrelabel/debug.qtpl:39
+	if targetURL != "" {
+//line lib/promrelabel/debug.qtpl:39
+		qw422016.N().S(`<a href="metric-relabel-debug`)
+//line lib/promrelabel/debug.qtpl:40
+		if targetID != "" {
+//line lib/promrelabel/debug.qtpl:40
+			qw422016.N().S(`?id=`)
+//line lib/promrelabel/debug.qtpl:40
+			qw422016.E().S(targetID)
+//line lib/promrelabel/debug.qtpl:40
 		}
-//line lib/promrelabel/debug.qtpl:39
-	qw422016.N().S(`<div class="m-3"><form method="POST" onsubmit="submitRelabelDebugForm(event)">`)
+//line lib/promrelabel/debug.qtpl:40
+		qw422016.N().S(`">Metric relabel debug</a>`)
+//line lib/promrelabel/debug.qtpl:41
+	} else {
+//line lib/promrelabel/debug.qtpl:41
+		qw422016.N().S(`<a href="target-relabel-debug`)
+//line lib/promrelabel/debug.qtpl:42
+		if targetID != "" {
+//line lib/promrelabel/debug.qtpl:42
+			qw422016.N().S(`?id=`)
+//line lib/promrelabel/debug.qtpl:42
+			qw422016.E().S(targetID)
+//line lib/promrelabel/debug.qtpl:42
+		}
+//line lib/promrelabel/debug.qtpl:42
+		qw422016.N().S(`">Target relabel debug</a>`)
 //line lib/promrelabel/debug.qtpl:43
+	}
+//line lib/promrelabel/debug.qtpl:43
+	qw422016.N().S(`<br>`)
+//line lib/promrelabel/debug.qtpl:46
+	if err != nil {
+//line lib/promrelabel/debug.qtpl:47
+		htmlcomponents.StreamErrorNotification(qw422016, err)
+//line lib/promrelabel/debug.qtpl:48
+	}
+//line lib/promrelabel/debug.qtpl:48
+	qw422016.N().S(`<div class="m-3"><form method="POST" onsubmit="submitRelabelDebugForm(event)">`)
+//line lib/promrelabel/debug.qtpl:52
 	streamrelabelDebugFormInputs(qw422016, metric, relabelConfigs)
-//line lib/promrelabel/debug.qtpl:44
+//line lib/promrelabel/debug.qtpl:53
 	if targetID != "" {
-//line lib/promrelabel/debug.qtpl:44
+//line lib/promrelabel/debug.qtpl:53
 		qw422016.N().S(`<input type="hidden" name="id" value="`)
-//line lib/promrelabel/debug.qtpl:45
+//line lib/promrelabel/debug.qtpl:54
 		qw422016.E().S(targetID)
-//line lib/promrelabel/debug.qtpl:45
+//line lib/promrelabel/debug.qtpl:54
 		qw422016.N().S(`" />`)
-//line lib/promrelabel/debug.qtpl:46
+//line lib/promrelabel/debug.qtpl:55
 	}
-//line lib/promrelabel/debug.qtpl:46
+//line lib/promrelabel/debug.qtpl:55
 	qw422016.N().S(`<input type="submit" value="Submit" class="btn btn-primary m-1" />`)
-//line lib/promrelabel/debug.qtpl:48
+//line lib/promrelabel/debug.qtpl:57
 	if targetID != "" {
-//line lib/promrelabel/debug.qtpl:48
+//line lib/promrelabel/debug.qtpl:57
 		qw422016.N().S(`<button type="button" onclick="location.href='?id=`)
-//line lib/promrelabel/debug.qtpl:49
+//line lib/promrelabel/debug.qtpl:58
 		qw422016.E().S(targetID)
-//line lib/promrelabel/debug.qtpl:49
+//line lib/promrelabel/debug.qtpl:58
 		qw422016.N().S(`'" class="btn btn-secondary m-1">Reset</button>`)
-//line lib/promrelabel/debug.qtpl:50
+//line lib/promrelabel/debug.qtpl:59
 	}
-//line lib/promrelabel/debug.qtpl:50
+//line lib/promrelabel/debug.qtpl:59
 	qw422016.N().S(`</form></div><div class="row"><main class="col-12">`)
-//line lib/promrelabel/debug.qtpl:56
+//line lib/promrelabel/debug.qtpl:65
 	streamrelabelDebugSteps(qw422016, dss, targetURL, targetID)
-//line lib/promrelabel/debug.qtpl:56
+//line lib/promrelabel/debug.qtpl:65
 	qw422016.N().S(`</main></div></div></body></html>`)
-//line lib/promrelabel/debug.qtpl:62
+//line lib/promrelabel/debug.qtpl:71
 }

-//line lib/promrelabel/debug.qtpl:62
-func WriteRelabelDebugSteps(qq422016 qtio422016.Writer, targetURL string, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) {
-//line lib/promrelabel/debug.qtpl:62
+//line lib/promrelabel/debug.qtpl:71
+func WriteRelabelDebugStepsHTML(qq422016 qtio422016.Writer, targetURL, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) {
+//line lib/promrelabel/debug.qtpl:71
 	qw422016 := qt422016.AcquireWriter(qq422016)
-//line lib/promrelabel/debug.qtpl:62
-	StreamRelabelDebugSteps(qw422016, targetURL, targetID, dss, metric, relabelConfigs, err)
-//line lib/promrelabel/debug.qtpl:62
+//line lib/promrelabel/debug.qtpl:71
+	StreamRelabelDebugStepsHTML(qw422016, targetURL, targetID, dss, metric, relabelConfigs, err)
+//line lib/promrelabel/debug.qtpl:71
 	qt422016.ReleaseWriter(qw422016)
-//line lib/promrelabel/debug.qtpl:62
+//line lib/promrelabel/debug.qtpl:71
 }

-//line lib/promrelabel/debug.qtpl:62
-func RelabelDebugSteps(targetURL string, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) string {
-//line lib/promrelabel/debug.qtpl:62
+//line lib/promrelabel/debug.qtpl:71
+func RelabelDebugStepsHTML(targetURL, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) string {
+//line lib/promrelabel/debug.qtpl:71
 	qb422016 := qt422016.AcquireByteBuffer()
-//line lib/promrelabel/debug.qtpl:62
-	WriteRelabelDebugSteps(qb422016, targetURL, targetID, dss, metric, relabelConfigs, err)
-//line lib/promrelabel/debug.qtpl:62
+//line lib/promrelabel/debug.qtpl:71
+	WriteRelabelDebugStepsHTML(qb422016, targetURL, targetID, dss, metric, relabelConfigs, err)
+//line lib/promrelabel/debug.qtpl:71
 	qs422016 := string(qb422016.B)
-//line lib/promrelabel/debug.qtpl:62
+//line lib/promrelabel/debug.qtpl:71
 	qt422016.ReleaseByteBuffer(qb422016)
-//line lib/promrelabel/debug.qtpl:62
+//line lib/promrelabel/debug.qtpl:71
 	return qs422016
-//line lib/promrelabel/debug.qtpl:62
+//line lib/promrelabel/debug.qtpl:71
 }

-//line lib/promrelabel/debug.qtpl:64
+//line lib/promrelabel/debug.qtpl:73
 func streamrelabelDebugFormInputs(qw422016 *qt422016.Writer, metric, relabelConfigs string) {
-//line lib/promrelabel/debug.qtpl:64
+//line lib/promrelabel/debug.qtpl:73
 	qw422016.N().S(`<div>Relabel configs:<br/><textarea name="relabel_configs" style="width: 100%; height: 15em" class="m-1">`)
-//line lib/promrelabel/debug.qtpl:67
-	qw422016.E().S(relabelConfigs)
-//line lib/promrelabel/debug.qtpl:67
-	qw422016.N().S(`</textarea></div><div>Labels:<br/><textarea name="metric" style="width: 100%; height: 5em" class="m-1">`)
-//line lib/promrelabel/debug.qtpl:72
-	qw422016.E().S(metric)
-//line lib/promrelabel/debug.qtpl:72
-	qw422016.N().S(`</textarea></div>`)
-//line lib/promrelabel/debug.qtpl:74
-}
-
-//line lib/promrelabel/debug.qtpl:74
-func writerelabelDebugFormInputs(qq422016 qtio422016.Writer, metric, relabelConfigs string) {
-//line lib/promrelabel/debug.qtpl:74
-	qw422016 := qt422016.AcquireWriter(qq422016)
-//line lib/promrelabel/debug.qtpl:74
-	streamrelabelDebugFormInputs(qw422016, metric, relabelConfigs)
-//line lib/promrelabel/debug.qtpl:74
-	qt422016.ReleaseWriter(qw422016)
-//line lib/promrelabel/debug.qtpl:74
-}
-
-//line lib/promrelabel/debug.qtpl:74
-func relabelDebugFormInputs(metric, relabelConfigs string) string {
-//line lib/promrelabel/debug.qtpl:74
-	qb422016 := qt422016.AcquireByteBuffer()
-//line lib/promrelabel/debug.qtpl:74
-	writerelabelDebugFormInputs(qb422016, metric, relabelConfigs)
-//line lib/promrelabel/debug.qtpl:74
-	qs422016 := string(qb422016.B)
-//line lib/promrelabel/debug.qtpl:74
-	qt422016.ReleaseByteBuffer(qb422016)
-//line lib/promrelabel/debug.qtpl:74
-	return qs422016
-//line lib/promrelabel/debug.qtpl:74
-}
-
 //line lib/promrelabel/debug.qtpl:76
-func streamrelabelDebugSteps(qw422016 *qt422016.Writer, dss []DebugStep, targetURL, targetID string) {
-//line lib/promrelabel/debug.qtpl:77
-	if len(dss) > 0 {
-//line lib/promrelabel/debug.qtpl:77
-		qw422016.N().S(`<div class="m-3"><b>Original labels:</b> <samp>`)
-//line lib/promrelabel/debug.qtpl:79
-		streammustFormatLabels(qw422016, dss[0].In)
-//line lib/promrelabel/debug.qtpl:79
-		qw422016.N().S(`</samp></div>`)
+	qw422016.E().S(relabelConfigs)
+//line lib/promrelabel/debug.qtpl:76
+	qw422016.N().S(`</textarea></div><div>Labels:<br/><textarea name="metric" style="width: 100%; height: 5em" class="m-1">`)
 //line lib/promrelabel/debug.qtpl:81
+	qw422016.E().S(metric)
+//line lib/promrelabel/debug.qtpl:81
+	qw422016.N().S(`</textarea></div>`)
+//line lib/promrelabel/debug.qtpl:83
 }
-//line lib/promrelabel/debug.qtpl:81
+
+//line lib/promrelabel/debug.qtpl:83
+func writerelabelDebugFormInputs(qq422016 qtio422016.Writer, metric, relabelConfigs string) {
+//line lib/promrelabel/debug.qtpl:83
+	qw422016 := qt422016.AcquireWriter(qq422016)
+//line lib/promrelabel/debug.qtpl:83
+	streamrelabelDebugFormInputs(qw422016, metric, relabelConfigs)
+//line lib/promrelabel/debug.qtpl:83
+	qt422016.ReleaseWriter(qw422016)
+//line lib/promrelabel/debug.qtpl:83
+}
+
+//line lib/promrelabel/debug.qtpl:83
+func relabelDebugFormInputs(metric, relabelConfigs string) string {
+//line lib/promrelabel/debug.qtpl:83
+	qb422016 := qt422016.AcquireByteBuffer()
+//line lib/promrelabel/debug.qtpl:83
+	writerelabelDebugFormInputs(qb422016, metric, relabelConfigs)
+//line lib/promrelabel/debug.qtpl:83
+	qs422016 := string(qb422016.B)
+//line lib/promrelabel/debug.qtpl:83
+	qt422016.ReleaseByteBuffer(qb422016)
+//line lib/promrelabel/debug.qtpl:83
+	return qs422016
+//line lib/promrelabel/debug.qtpl:83
+}
+
+//line lib/promrelabel/debug.qtpl:85
+func streamrelabelDebugSteps(qw422016 *qt422016.Writer, dss []DebugStep, targetURL, targetID string) {
+//line lib/promrelabel/debug.qtpl:86
+	if len(dss) > 0 {
+//line lib/promrelabel/debug.qtpl:86
+		qw422016.N().S(`<div class="m-3"><b>Original labels:</b> <samp>`)
+//line lib/promrelabel/debug.qtpl:88
+		streammustFormatLabels(qw422016, dss[0].In)
+//line lib/promrelabel/debug.qtpl:88
+		qw422016.N().S(`</samp></div>`)
+//line lib/promrelabel/debug.qtpl:90
+	}
+//line lib/promrelabel/debug.qtpl:90
 	qw422016.N().S(`<table class="table table-striped table-hover table-bordered table-sm"><thead><tr><th scope="col" style="width: 5%">Step</th><th scope="col" style="width: 25%">Relabeling Rule</th><th scope="col" style="width: 35%">Input Labels</th><th scope="col" stile="width: 35%">Output labels</a></tr></thead><tbody>`)
-//line lib/promrelabel/debug.qtpl:92
+//line lib/promrelabel/debug.qtpl:101
 	for i, ds := range dss {
-//line lib/promrelabel/debug.qtpl:94
+//line lib/promrelabel/debug.qtpl:103
 		inLabels := promutils.MustNewLabelsFromString(ds.In)
 		outLabels := promutils.MustNewLabelsFromString(ds.Out)
 		changedLabels := getChangedLabelNames(inLabels, outLabels)

-//line lib/promrelabel/debug.qtpl:97
+//line lib/promrelabel/debug.qtpl:106
 		qw422016.N().S(`<tr><td>`)
-//line lib/promrelabel/debug.qtpl:99
+//line lib/promrelabel/debug.qtpl:108
 		qw422016.N().D(i)
-//line lib/promrelabel/debug.qtpl:99
+//line lib/promrelabel/debug.qtpl:108
 		qw422016.N().S(`</td><td><b><pre class="m-2">`)
-//line lib/promrelabel/debug.qtpl:100
+//line lib/promrelabel/debug.qtpl:109
 		qw422016.E().S(ds.Rule)
-//line lib/promrelabel/debug.qtpl:100
+//line lib/promrelabel/debug.qtpl:109
 		qw422016.N().S(`</pre></b></td><td><div class="m-2" style="font-size: 0.9em" title="deleted and updated labels highlighted in red">`)
-//line lib/promrelabel/debug.qtpl:103
+//line lib/promrelabel/debug.qtpl:112
 		streamlabelsWithHighlight(qw422016, inLabels, changedLabels, "red")
-//line lib/promrelabel/debug.qtpl:103
+//line lib/promrelabel/debug.qtpl:112
 		qw422016.N().S(`</div></td><td><div class="m-2" style="font-size: 0.9em" title="added and updated labels highlighted in blue">`)
-//line lib/promrelabel/debug.qtpl:108
+//line lib/promrelabel/debug.qtpl:117
 		streamlabelsWithHighlight(qw422016, outLabels, changedLabels, "blue")
-//line lib/promrelabel/debug.qtpl:108
+//line lib/promrelabel/debug.qtpl:117
 		qw422016.N().S(`</div></td></tr>`)
-//line lib/promrelabel/debug.qtpl:112
-	}
-//line lib/promrelabel/debug.qtpl:112
-	qw422016.N().S(`</tbody></table>`)
-//line lib/promrelabel/debug.qtpl:115
-	if len(dss) > 0 {
-//line lib/promrelabel/debug.qtpl:115
-		qw422016.N().S(`<div class="m-3"><b>Resulting labels:</b> <samp>`)
-//line lib/promrelabel/debug.qtpl:117
-		streammustFormatLabels(qw422016, dss[len(dss)-1].Out)
-//line lib/promrelabel/debug.qtpl:117
-		qw422016.N().S(`</samp>`)
-//line lib/promrelabel/debug.qtpl:118
-		if targetURL != "" {
-//line lib/promrelabel/debug.qtpl:118
-			qw422016.N().S(`<div><b>Target URL:</b>`)
-//line lib/promrelabel/debug.qtpl:120
-			qw422016.N().S(` `)
-//line lib/promrelabel/debug.qtpl:120
-			qw422016.N().S(`<a href="`)
-//line lib/promrelabel/debug.qtpl:120
-			qw422016.E().S(targetURL)
-//line lib/promrelabel/debug.qtpl:120
-			qw422016.N().S(`" target="_blank">`)
-//line lib/promrelabel/debug.qtpl:120
-			qw422016.E().S(targetURL)
-//line lib/promrelabel/debug.qtpl:120
-			qw422016.N().S(`</a>`)
 //line lib/promrelabel/debug.qtpl:121
-			if targetID != "" {
-//line lib/promrelabel/debug.qtpl:122
+	}
+//line lib/promrelabel/debug.qtpl:121
+	qw422016.N().S(`</tbody></table>`)
+//line lib/promrelabel/debug.qtpl:124
+	if len(dss) > 0 {
+//line lib/promrelabel/debug.qtpl:124
+		qw422016.N().S(`<div class="m-3"><b>Resulting labels:</b> <samp>`)
+//line lib/promrelabel/debug.qtpl:126
+		streammustFormatLabels(qw422016, dss[len(dss)-1].Out)
+//line lib/promrelabel/debug.qtpl:126
+		qw422016.N().S(`</samp>`)
+//line lib/promrelabel/debug.qtpl:127
+		if targetURL != "" {
+//line lib/promrelabel/debug.qtpl:127
+			qw422016.N().S(`<div><b>Target URL:</b>`)
+//line lib/promrelabel/debug.qtpl:129
 			qw422016.N().S(` `)
-//line lib/promrelabel/debug.qtpl:122
-				qw422016.N().S(`(<a href="target_response?id=`)
-//line lib/promrelabel/debug.qtpl:123
-				qw422016.E().S(targetID)
-//line lib/promrelabel/debug.qtpl:123
-				qw422016.N().S(`" target="_blank" title="click to fetch target response on behalf of the scraper">response</a>)`)
-//line lib/promrelabel/debug.qtpl:124
-			}
-//line lib/promrelabel/debug.qtpl:124
-			qw422016.N().S(`</div>`)
-//line lib/promrelabel/debug.qtpl:126
-		}
-//line lib/promrelabel/debug.qtpl:126
-		qw422016.N().S(`</div>`)
-//line lib/promrelabel/debug.qtpl:128
-	}
 //line lib/promrelabel/debug.qtpl:129
-}
-
+			qw422016.N().S(`<a href="`)
 //line lib/promrelabel/debug.qtpl:129
-func writerelabelDebugSteps(qq422016 qtio422016.Writer, dss []DebugStep, targetURL, targetID string) {
+			qw422016.E().S(targetURL)
 //line lib/promrelabel/debug.qtpl:129
-	qw422016 := qt422016.AcquireWriter(qq422016)
+			qw422016.N().S(`" target="_blank">`)
 //line lib/promrelabel/debug.qtpl:129
-	streamrelabelDebugSteps(qw422016, dss, targetURL, targetID)
+			qw422016.E().S(targetURL)
 //line lib/promrelabel/debug.qtpl:129
-	qt422016.ReleaseWriter(qw422016)
-//line lib/promrelabel/debug.qtpl:129
-}
-
-//line lib/promrelabel/debug.qtpl:129
-func relabelDebugSteps(dss []DebugStep, targetURL, targetID string) string {
-//line lib/promrelabel/debug.qtpl:129
-	qb422016 := qt422016.AcquireByteBuffer()
-//line lib/promrelabel/debug.qtpl:129
-	writerelabelDebugSteps(qb422016, dss, targetURL, targetID)
-//line lib/promrelabel/debug.qtpl:129
-	qs422016 := string(qb422016.B)
-//line lib/promrelabel/debug.qtpl:129
-	qt422016.ReleaseByteBuffer(qb422016)
-//line lib/promrelabel/debug.qtpl:129
-	return qs422016
-//line lib/promrelabel/debug.qtpl:129
-}
-
+			qw422016.N().S(`</a>`)
+//line lib/promrelabel/debug.qtpl:130
+			if targetID != "" {
 //line lib/promrelabel/debug.qtpl:131
-func streamlabelsWithHighlight(qw422016 *qt422016.Writer, labels *promutils.Labels, highlight map[string]struct{}, color string) {
+				qw422016.N().S(` `)
+//line lib/promrelabel/debug.qtpl:131
+				qw422016.N().S(`(<a href="target_response?id=`)
+//line lib/promrelabel/debug.qtpl:132
+				qw422016.E().S(targetID)
+//line lib/promrelabel/debug.qtpl:132
+				qw422016.N().S(`" target="_blank" title="click to fetch target response on behalf of the scraper">response</a>)`)
 //line lib/promrelabel/debug.qtpl:133
+			}
+//line lib/promrelabel/debug.qtpl:133
+			qw422016.N().S(`</div>`)
+//line lib/promrelabel/debug.qtpl:135
+		}
+//line lib/promrelabel/debug.qtpl:135
+		qw422016.N().S(`</div>`)
+//line lib/promrelabel/debug.qtpl:137
+	}
+//line lib/promrelabel/debug.qtpl:138
+}
+
+//line lib/promrelabel/debug.qtpl:138
+func writerelabelDebugSteps(qq422016 qtio422016.Writer, dss []DebugStep, targetURL, targetID string) {
+//line lib/promrelabel/debug.qtpl:138
+	qw422016 := qt422016.AcquireWriter(qq422016)
+//line lib/promrelabel/debug.qtpl:138
+	streamrelabelDebugSteps(qw422016, dss, targetURL, targetID)
+//line lib/promrelabel/debug.qtpl:138
+	qt422016.ReleaseWriter(qw422016)
+//line lib/promrelabel/debug.qtpl:138
+}
+
+//line lib/promrelabel/debug.qtpl:138
+func relabelDebugSteps(dss []DebugStep, targetURL, targetID string) string {
+//line lib/promrelabel/debug.qtpl:138
+	qb422016 := qt422016.AcquireByteBuffer()
+//line lib/promrelabel/debug.qtpl:138
+	writerelabelDebugSteps(qb422016, dss, targetURL, targetID)
+//line lib/promrelabel/debug.qtpl:138
+	qs422016 := string(qb422016.B)
+//line lib/promrelabel/debug.qtpl:138
+	qt422016.ReleaseByteBuffer(qb422016)
+//line lib/promrelabel/debug.qtpl:138
+	return qs422016
+//line lib/promrelabel/debug.qtpl:138
+}
+
+//line lib/promrelabel/debug.qtpl:140
+func StreamRelabelDebugStepsJSON(qw422016 *qt422016.Writer, targetURL, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) {
+//line lib/promrelabel/debug.qtpl:140
+	qw422016.N().S(`{`)
+//line lib/promrelabel/debug.qtpl:142
+	if err != nil {
+//line lib/promrelabel/debug.qtpl:142
+		qw422016.N().S(`"status": "error","error":`)
+//line lib/promrelabel/debug.qtpl:144
+		qw422016.N().Q(fmt.Sprintf("Error: %s", err))
+//line lib/promrelabel/debug.qtpl:145
+	} else {
+//line lib/promrelabel/debug.qtpl:145
+		qw422016.N().S(`"status": "success",`)
+//line lib/promrelabel/debug.qtpl:147
+		if len(dss) > 0 {
+//line lib/promrelabel/debug.qtpl:147
+			qw422016.N().S(`"originalLabels":`)
+//line lib/promrelabel/debug.qtpl:148
+			qw422016.N().Q(string(mustFormatLabels(dss[0].In)))
+//line lib/promrelabel/debug.qtpl:148
+			qw422016.N().S(`,"resultingLabels":`)
+//line lib/promrelabel/debug.qtpl:149
+			qw422016.N().Q(string(mustFormatLabels(dss[len(dss)-1].Out)))
+//line lib/promrelabel/debug.qtpl:149
+			qw422016.N().S(`,`)
+//line lib/promrelabel/debug.qtpl:150
+		}
+//line lib/promrelabel/debug.qtpl:150
+		qw422016.N().S(`"steps": [`)
+//line lib/promrelabel/debug.qtpl:152
+		for i, ds := range dss {
+//line lib/promrelabel/debug.qtpl:154
+			inLabels := promutils.MustNewLabelsFromString(ds.In)
+			outLabels := promutils.MustNewLabelsFromString(ds.Out)
+			changedLabels := getChangedLabelNames(inLabels, outLabels)
+
+//line lib/promrelabel/debug.qtpl:157
+			qw422016.N().S(`{"inLabels":`)
+//line lib/promrelabel/debug.qtpl:159
+			qw422016.N().Q(labelsWithHighlight(inLabels, changedLabels, "red"))
+//line lib/promrelabel/debug.qtpl:159
+			qw422016.N().S(`,"outLabels":`)
+//line lib/promrelabel/debug.qtpl:160
+			qw422016.N().Q(labelsWithHighlight(outLabels, changedLabels, "blue"))
+//line lib/promrelabel/debug.qtpl:160
+			qw422016.N().S(`,"rule":`)
+//line lib/promrelabel/debug.qtpl:161
+			qw422016.N().Q(ds.Rule)
+//line lib/promrelabel/debug.qtpl:161
+			qw422016.N().S(`}`)
+//line lib/promrelabel/debug.qtpl:163
+			if i != len(dss)-1 {
+//line lib/promrelabel/debug.qtpl:163
+				qw422016.N().S(`,`)
+//line lib/promrelabel/debug.qtpl:163
+			}
+//line lib/promrelabel/debug.qtpl:164
+		}
+//line lib/promrelabel/debug.qtpl:164
+		qw422016.N().S(`]`)
+//line lib/promrelabel/debug.qtpl:166
+	}
+//line lib/promrelabel/debug.qtpl:166
+	qw422016.N().S(`}`)
+//line lib/promrelabel/debug.qtpl:168
+}
+
+//line lib/promrelabel/debug.qtpl:168
+func WriteRelabelDebugStepsJSON(qq422016 qtio422016.Writer, targetURL, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) {
+//line lib/promrelabel/debug.qtpl:168
+	qw422016 := qt422016.AcquireWriter(qq422016)
+//line lib/promrelabel/debug.qtpl:168
+	StreamRelabelDebugStepsJSON(qw422016, targetURL, targetID, dss, metric, relabelConfigs, err)
+//line lib/promrelabel/debug.qtpl:168
+	qt422016.ReleaseWriter(qw422016)
+//line lib/promrelabel/debug.qtpl:168
+}
+
+//line lib/promrelabel/debug.qtpl:168
+func RelabelDebugStepsJSON(targetURL, targetID string, dss []DebugStep, metric, relabelConfigs string, err error) string {
+//line lib/promrelabel/debug.qtpl:168
+	qb422016 := qt422016.AcquireByteBuffer()
+//line lib/promrelabel/debug.qtpl:168
+	WriteRelabelDebugStepsJSON(qb422016, targetURL, targetID, dss, metric, relabelConfigs, err)
+//line lib/promrelabel/debug.qtpl:168
+	qs422016 := string(qb422016.B)
+//line lib/promrelabel/debug.qtpl:168
+	qt422016.ReleaseByteBuffer(qb422016)
+//line lib/promrelabel/debug.qtpl:168
+	return qs422016
+//line lib/promrelabel/debug.qtpl:168
+}
+
+//line lib/promrelabel/debug.qtpl:170
+func streamlabelsWithHighlight(qw422016 *qt422016.Writer, labels *promutils.Labels, highlight map[string]struct{}, color string) {
+//line lib/promrelabel/debug.qtpl:172
 	labelsList := labels.GetLabels()
 	metricName := ""
 	for i, label := range labelsList {
@ -306,137 +442,137 @@ func streamlabelsWithHighlight(qw422016 *qt422016.Writer, labels *promutils.Labe
 		}
 	}

-//line lib/promrelabel/debug.qtpl:143
+//line lib/promrelabel/debug.qtpl:182
 	if metricName != "" {
-//line lib/promrelabel/debug.qtpl:144
+//line lib/promrelabel/debug.qtpl:183
 		if _, ok := highlight["__name__"]; ok {
-//line lib/promrelabel/debug.qtpl:144
+//line lib/promrelabel/debug.qtpl:183
 			qw422016.N().S(`<span style="font-weight:bold;color:`)
-//line lib/promrelabel/debug.qtpl:145
+//line lib/promrelabel/debug.qtpl:184
 			qw422016.E().S(color)
-//line lib/promrelabel/debug.qtpl:145
+//line lib/promrelabel/debug.qtpl:184
 			qw422016.N().S(`">`)
-//line lib/promrelabel/debug.qtpl:145
+//line lib/promrelabel/debug.qtpl:184
 			qw422016.E().S(metricName)
-//line lib/promrelabel/debug.qtpl:145
+//line lib/promrelabel/debug.qtpl:184
 			qw422016.N().S(`</span>`)
-//line lib/promrelabel/debug.qtpl:146
+//line lib/promrelabel/debug.qtpl:185
 		} else {
-//line lib/promrelabel/debug.qtpl:147
+//line lib/promrelabel/debug.qtpl:186
 			qw422016.E().S(metricName)
-//line lib/promrelabel/debug.qtpl:148
+//line lib/promrelabel/debug.qtpl:187
 		}
-//line lib/promrelabel/debug.qtpl:149
+//line lib/promrelabel/debug.qtpl:188
 		if len(labelsList) == 0 {
-//line lib/promrelabel/debug.qtpl:149
+//line lib/promrelabel/debug.qtpl:188
 			return
-//line lib/promrelabel/debug.qtpl:149
+//line lib/promrelabel/debug.qtpl:188
 		}
-//line lib/promrelabel/debug.qtpl:150
+//line lib/promrelabel/debug.qtpl:189
 	}
-//line lib/promrelabel/debug.qtpl:150
+//line lib/promrelabel/debug.qtpl:189
 	qw422016.N().S(`{`)
-//line lib/promrelabel/debug.qtpl:152
+//line lib/promrelabel/debug.qtpl:191
 	for i, label := range labelsList {
-//line lib/promrelabel/debug.qtpl:153
+//line lib/promrelabel/debug.qtpl:192
 		if _, ok := highlight[label.Name]; ok {
-//line lib/promrelabel/debug.qtpl:153
+//line lib/promrelabel/debug.qtpl:192
 			qw422016.N().S(`<span style="font-weight:bold;color:`)
-//line lib/promrelabel/debug.qtpl:154
+//line lib/promrelabel/debug.qtpl:193
 			qw422016.E().S(color)
-//line lib/promrelabel/debug.qtpl:154
+//line lib/promrelabel/debug.qtpl:193
 			qw422016.N().S(`">`)
-//line lib/promrelabel/debug.qtpl:154
+//line lib/promrelabel/debug.qtpl:193
 			qw422016.E().S(label.Name)
-//line lib/promrelabel/debug.qtpl:154
+//line lib/promrelabel/debug.qtpl:193
 			qw422016.N().S(`=`)
-//line lib/promrelabel/debug.qtpl:154
+//line lib/promrelabel/debug.qtpl:193
 			qw422016.E().Q(label.Value)
-//line lib/promrelabel/debug.qtpl:154
+//line lib/promrelabel/debug.qtpl:193
 			qw422016.N().S(`</span>`)
-//line lib/promrelabel/debug.qtpl:155
+//line lib/promrelabel/debug.qtpl:194
 		} else {
-//line lib/promrelabel/debug.qtpl:156
+//line lib/promrelabel/debug.qtpl:195
 			qw422016.E().S(label.Name)
-//line lib/promrelabel/debug.qtpl:156
+//line lib/promrelabel/debug.qtpl:195
 			qw422016.N().S(`=`)
-//line lib/promrelabel/debug.qtpl:156
+//line lib/promrelabel/debug.qtpl:195
 			qw422016.E().Q(label.Value)
-//line lib/promrelabel/debug.qtpl:157
+//line lib/promrelabel/debug.qtpl:196
 		}
-//line lib/promrelabel/debug.qtpl:158
+//line lib/promrelabel/debug.qtpl:197
 		if i < len(labelsList)-1 {
-//line lib/promrelabel/debug.qtpl:158
+//line lib/promrelabel/debug.qtpl:197
 			qw422016.N().S(`,`)
-//line lib/promrelabel/debug.qtpl:158
+//line lib/promrelabel/debug.qtpl:197
 			qw422016.N().S(` `)
-//line lib/promrelabel/debug.qtpl:158
+//line lib/promrelabel/debug.qtpl:197
 		}
-//line lib/promrelabel/debug.qtpl:159
+//line lib/promrelabel/debug.qtpl:198
 	}
-//line lib/promrelabel/debug.qtpl:159
+//line lib/promrelabel/debug.qtpl:198
 	qw422016.N().S(`}`)
-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 }

-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 func writelabelsWithHighlight(qq422016 qtio422016.Writer, labels *promutils.Labels, highlight map[string]struct{}, color string) {
-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 	qw422016 := qt422016.AcquireWriter(qq422016)
-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 	streamlabelsWithHighlight(qw422016, labels, highlight, color)
-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 	qt422016.ReleaseWriter(qw422016)
-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 }

-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 func labelsWithHighlight(labels *promutils.Labels, highlight map[string]struct{}, color string) string {
-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 	qb422016 := qt422016.AcquireByteBuffer()
-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 	writelabelsWithHighlight(qb422016, labels, highlight, color)
-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 	qs422016 := string(qb422016.B)
-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 	qt422016.ReleaseByteBuffer(qb422016)
-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 	return qs422016
-//line lib/promrelabel/debug.qtpl:161
+//line lib/promrelabel/debug.qtpl:200
 }

-//line lib/promrelabel/debug.qtpl:163
+//line lib/promrelabel/debug.qtpl:202
 func streammustFormatLabels(qw422016 *qt422016.Writer, s string) {
-//line lib/promrelabel/debug.qtpl:164
+//line lib/promrelabel/debug.qtpl:203
 	labels := promutils.MustNewLabelsFromString(s)

-//line lib/promrelabel/debug.qtpl:165
+//line lib/promrelabel/debug.qtpl:204
 	streamlabelsWithHighlight(qw422016, labels, nil, "")
-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 }

-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 func writemustFormatLabels(qq422016 qtio422016.Writer, s string) {
-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 	qw422016 := qt422016.AcquireWriter(qq422016)
-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 	streammustFormatLabels(qw422016, s)
-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 	qt422016.ReleaseWriter(qw422016)
-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 }

-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 func mustFormatLabels(s string) string {
-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 	qb422016 := qt422016.AcquireByteBuffer()
-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 	writemustFormatLabels(qb422016, s)
-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 	qs422016 := string(qb422016.B)
-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 	qt422016.ReleaseByteBuffer(qb422016)
-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 	return qs422016
-//line lib/promrelabel/debug.qtpl:166
+//line lib/promrelabel/debug.qtpl:205
 }
--- a/lib/promscrape/relabel_debug.go
+++ b/lib/promscrape/relabel_debug.go
@ -12,8 +12,13 @@ func WriteMetricRelabelDebug(w http.ResponseWriter, r *http.Request) {
 	targetID := r.FormValue("id")
 	metric := r.FormValue("metric")
 	relabelConfigs := r.FormValue("relabel_configs")
+	format := r.FormValue("format")
 	var err error

+	if format == "json" {
+		w.Header().Set("Content-Type", "application/json")
+	}
+
 	if metric == "" && relabelConfigs == "" && targetID != "" {
 		pcs, labels, ok := getMetricRelabelContextByTargetID(targetID)
 		if !ok {
@ -24,7 +29,7 @@ func WriteMetricRelabelDebug(w http.ResponseWriter, r *http.Request) {
 			relabelConfigs = pcs.String()
 		}
 	}
-	promrelabel.WriteMetricRelabelDebug(w, targetID, metric, relabelConfigs, err)
+	promrelabel.WriteMetricRelabelDebug(w, targetID, metric, relabelConfigs, format, err)
 }

 // WriteTargetRelabelDebug generates response for /target-relabel-debug page
@ -32,6 +37,7 @@ func WriteTargetRelabelDebug(w http.ResponseWriter, r *http.Request) {
 	targetID := r.FormValue("id")
 	metric := r.FormValue("metric")
 	relabelConfigs := r.FormValue("relabel_configs")
+	format := r.FormValue("format")
 	var err error

 	if metric == "" && relabelConfigs == "" && targetID != "" {
@ -44,5 +50,5 @@ func WriteTargetRelabelDebug(w http.ResponseWriter, r *http.Request) {
 			relabelConfigs = pcs.String()
 		}
 	}
-	promrelabel.WriteTargetRelabelDebug(w, targetID, metric, relabelConfigs, err)
+	promrelabel.WriteTargetRelabelDebug(w, targetID, metric, relabelConfigs, format, err)
 }