environment-banner.user.js

// ==UserScript==
// @name         Environment Banner
// @version      1.0.0
// @description  Inject a small box at the top of a Grafana page to display the environment based on the URL
// @author       You
// @include        /^.*\.weu\.grafana\.azure\.com\/.*$/
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const url = window.location.href;
    let env = null;
    let color = null;

    if (url.includes('-dev-')) {
        env = 'dev';
        color = 'rgba(0, 128, 0, 0.8)'; // semi-transparent green
    } else if (url.includes('-acc-')) {
        env = 'acc';
        color = 'rgba(255, 165, 0, 0.85)'; // semi-transparent orange
    } else if (url.includes('-prd-')) {
        env = 'prd';
        color = 'rgba(255, 0, 0, 0.85)'; // semi-transparent red
    }

    if (!env) return;

    const box = document.createElement('div');
    box.textContent = env.toUpperCase();
    box.style.position = 'fixed';
    box.style.top = '2px'; // vertical spacing
    box.style.left = '50%';
    box.style.transform = 'translateX(-50%)';
    box.style.backgroundColor = color;
    box.style.color = 'white';
    box.style.fontFamily = 'monospace';
    box.style.fontSize = '14px';
    box.style.padding = '6px 12px';
    box.style.borderRadius = '8px';
    box.style.boxShadow = '0 2px 6px rgba(0, 0, 0, 0.2)';
    box.style.zIndex = '999999';
    box.style.pointerEvents = 'none'; // don't block clicks

    document.body.appendChild(box);
})();