Initial commit

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,2 @@
+node_modules/**
+chrome-webstore-release.zip

README.md

@@ -0,0 +1,24 @@
+# Prometheus Formatter
+
+Chrome Extension which makes plain Prometheus metrics easier to read.
+
+###### before:
+![](_images/before.png)
+
+###### after:
+![](_images/after.png)
+
+
+## Installation
+
+* clone/download this repo,
+* open Chrome and go to `chrome://chrome/extensions/`,
+* enable "Developer mode",
+* click "Load unpacked extension",
+* select the `extension` folder in this repo.
+
+
+## License
+
+[MIT](extension/LICENSE.txt)
+

extension/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Frederic Hemberger
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

extension/js/background.js

@@ -0,0 +1,53 @@
+/* global chrome, console */
+
+(function () {
+  'use strict'
+
+  // Listen for requests from content pages wanting to set up a port
+  chrome.extension.onConnect.addListener(function (port) {
+    if (port.name !== 'promformat') {
+      console.error(`[Prometheus Formatter] unknown port name "${port.name}". Aborting.`)
+      return
+    }
+
+    port.onMessage.addListener(function (msg) {
+      if (msg.name !== 'SENDING TEXT') {
+        return
+      }
+
+      let html = msg.payload
+        .split(/\r?\n/)
+        .map(line => {
+          // line is a comment
+          if (/^#/.test(line)) {
+            return `<span class="comment">${line}</span>`
+          }
+
+          // line is a metric
+          let tmp = line.match(/^(?<metric>[\w_]+)(?:\{(?<tags>.*)\})?\x20(?<value>.+)/)
+          if (tmp && tmp.length > 1) {
+            let { metric, tags, value } = tmp.groups
+            if (tags) {
+              tags = tags.replace(/([^,]+?)="(.+?)"/g, '<span class="label-key">$1</span>="<span class="label-value">$2</span>"')
+              tags = `{${tags}}`
+            }
+
+            return `<span class="metric">${metric}</span>${tags || ''} <span class="value">${value}</span>`
+          }
+
+          // line is something else, do nothing
+          return line
+        })
+        .join('<br>')
+
+      // Post the HTML string to the content script
+      port.postMessage({
+        name: 'FORMATTED',
+        payload: html
+      })
+
+      // Disconnect
+      port.disconnect()
+    })
+  })
+}())

extension/js/content.js

@@ -0,0 +1,88 @@
+/* global chrome, console */
+
+(function () {
+  'use strict'
+
+  const compress = (text) => text.replace(/\s+/g, '')
+
+  const maxBodyLength = 3000000 // 3MB
+
+  const style = compress(`
+    pre {
+      display:none
+    }
+    #promformat {
+      font-family: monospace;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+    }
+    .comment {
+      color: #6a737d;
+      display: inline-block;
+    }
+    br + .comment {
+      padding-top: 1em;
+    }
+    .comment + br + .comment {
+        padding-top: 0;
+    }
+
+    .metric      { color: #000 }
+    .value       { color: #ff20ed }
+    .label-key   { color: blue }
+    .label-value { color: green }
+    `)
+
+  const port = chrome.extension.connect({name: 'promformat'})
+
+  // Add listener to receive response from BG when ready
+  port.onMessage.addListener(function (msg) {
+    switch (msg.name) {
+      case 'FORMATTED' :
+        // Insert CSS
+        const promformatStyle = document.createElement('style')
+        document.head.appendChild(promformatStyle)
+        promformatStyle.insertAdjacentHTML('beforeend', style)
+
+        // Insert HTML content
+        const promformatContent = document.createElement('div')
+        promformatContent.id = 'promformat'
+        document.body.appendChild(promformatContent)
+
+        promformatContent.innerHTML = msg.payload
+        break
+
+      default :
+        throw new Error('Message not understood: ' + msg.name)
+    }
+  })
+
+  function ready () {
+    // Check if it is a Prometheus plain text response
+    // This is quite a basic assumption, as the browser cannot access the
+    // 'version' part of the content type to verify.
+    if (
+      document.contentType !== 'text/plain' ||
+      !['/metrics', '/federate', '/probe'].includes(document.location.pathname)
+    ) {
+      return
+    }
+
+    // Check if plain text wrapped in <pre> element exists and doesn't exceed maxBodyLength
+    const pre = document.body.querySelector('pre')
+    const rawBody = pre && pre.innerText
+
+    if (!rawBody || rawBody.length > maxBodyLength) {
+      port.disconnect()
+      return
+    }
+
+    // Post the contents of the PRE
+    port.postMessage({
+      name: 'SENDING TEXT',
+      payload: rawBody
+    })
+  }
+
+  document.addEventListener('DOMContentLoaded', ready, false)
+})()

extension/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "Prometheus Formatter",
+  "version": "1.0.0",
+  "manifest_version": 2,
+  "description": "Makes plain Prometheus metrics easier to read.",
+  "homepage_url": "https://github.com/fhemberger/chrome-prometheus-formatter",
+  "minimum_chrome_version": "60",
+  "icons": {
+    "128": "icons/128.png",
+    "48": "icons/48.png",
+    "32": "icons/32.png"
+  },
+  "background": {
+    "scripts": ["js/background.js"]
+  },
+  "content_scripts": [
+    { "matches": ["<all_urls>"], "js": ["js/content.js"], "run_at": "document_start" }
+  ],
+  "permissions":["*://*/*", "<all_urls>"]
+}