Add highlighting support for exemplars

fhemberger · Dec 23, 2024 · 3e36940 · 3e36940
1 parent 6c01cfe
commit 3e36940
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/extension/js/background.js b/extension/js/background.js
@@ -36,16 +36,24 @@ const formatPrometheusMetrics = (body) => {
       }
 
       // line is a metric
-      tmp = line.match(/^([\w_]+)(?:\{(.*)\})?\x20(.+)/)
+      tmp = line.match(/^(?<metric_name>[\w_]+)(?:\{(?<metric_labels>.*?)\})?\x20(?<metric_value>[^\s]+)(?<exemplar>\x20?#\x20?(?:\{(?<exemplar_labels>.*?)\})?\x20(?<exemplar_value>(.+)))?/)
       if (tmp && tmp.length > 1) {
-        let [_, metricName, labels, value] = tmp // eslint-disable-line no-unused-vars
+        if (tmp.groups.metric_labels) {
+          tmp.groups.metric_labels = tmp.groups.metric_labels.replace(/([^,]+?)="(.*?)",?/g, '<dt class="label-key" role="associationlistitemkey">$1</dt><dd class="label-value" role="associationlistitemvalue">$2</dd>')
+          tmp.groups.metric_labels = `<dl class="labels" role="associationlist">${tmp.groups.metric_labels}</dl>`
+        }
+
+        let exemplar = ''
+        if (tmp.groups.exemplar) {
+          if (tmp.groups.exemplar_labels) {
+            tmp.groups.exemplar_labels = tmp.groups.exemplar_labels.replace(/([^,]+?)="(.*?)",?/g, '<dt class="label-key" role="associationlistitemkey">$1</dt><dd class="label-value" role="associationlistitemvalue">$2</dd>')
+            tmp.groups.exemplar_labels = `<dl class="labels" role="associationlist">${tmp.groups.exemplar_labels}</dl>`
+          }
 
-        if (labels) {
-          labels = labels.replace(/([^,]+?)="(.*?)",?/g, '<dt class="label-key" role="associationlistitemkey">$1</dt><dd class="label-value" role="associationlistitemvalue">$2</dd>')
-          labels = `<dl class="labels" role="associationlist">${labels}</dl>`
+          exemplar = `<span class="exemplar aria-label="Exemplar"> <span aria-hidden="true">#</span> ${tmp.groups.exemplar_labels || ''} ${tmp.groups.exemplar_value}</span>`
         }
 
-        return `<span class="metric-name">${metricName}</span>${labels || ''} <span class="value">${value}</span>`
+        return `<span class="metric-name">${tmp.groups.metric_name}</span>${tmp.groups.metric_labels || ''} <span class="value">${tmp.groups.metric_value}</span>${exemplar}`
       }
 
       // line is something else, do nothing

diff --git a/extension/js/content.js b/extension/js/content.js
@@ -66,7 +66,7 @@ const renderFormattedHTML = (html) => {
       --red-2: #ca1243;
 
       --orange-1: #b76b01;
-      --orange-1: #cb7701;
+      --orange-2: #cb7701;
     }
 
     @media (prefers-color-scheme: dark) {
@@ -131,6 +131,10 @@ const renderFormattedHTML = (html) => {
     .label-key   { color: var(--blue) }
     .label-value { color: var(--green) }
     .comment     { color: var(--mono-2) }
+
+    .exemplar              { color: var(--mono-2) }
+    .exemplar .label-key   { color: var(--orange-1) }
+    .exemplar .label-value { color: var(--orange-2) }
     `
 
   // Insert CSS