v0.6.2b - Proxy Grafana Support for Dark Mode (#52)

Proxy t28 updates the proxy to include a grafana-dark style for PW_STYLE. This is to accommodate placing as iframe in newer Grafana versions (e.g. v9.4.14) while matching the background. See jasonacox/Powerwall-Dashboard#371.

Also includes updates to documentation for environmental variable explanations.

RELEASE.md

@@ -1,5 +1,9 @@
 # RELEASE NOTES
 
+## v0.6.2b - Proxy Grafana Support
+
+* Proxy t28: Add a `grafana-dark` style for `PW_STYLE` settings to accommodate placing as iframe in newer Grafana versions (e.g. v9.4.14). See https://github.com/jasonacox/Powerwall-Dashboard/discussions/371.
+
 ## v0.6.2a - Proxy Graceful Exit
 
 * Add alert PVS_a036_PvArcLockout by @JordanBelford in https://github.com/jasonacox/pypowerwall/pull/33

proxy/README.md

@@ -10,7 +10,7 @@ Docker: docker pull [jasonacox/pypowerwall](https://hub.docker.com/r/jasonacox/p
 
 ## Quick Start
 
-1. Run the Docker Container to listen on port 8675. Update the `-e` values for your Powerwall.
+1. Run the Docker Container to listen on port 8675. Update the `-e` values for your Powerwall (see [Environmental Settings](https://github.com/jasonacox/pypowerwall/tree/main/proxy#environmental-settings) for options):
 
     ```bash
     docker run \
@@ -25,6 +25,7 @@ Docker: docker pull [jasonacox/pypowerwall](https://hub.docker.com/r/jasonacox/p
     -e PW_CACHE_EXPIRE='5' \
     -e PW_DEBUG='no' \
     -e PW_HTTPS='no' \
+    -e PW_STYLE='clear' \
     --name pypowerwall \
     --restart unless-stopped \
     jasonacox/pypowerwall
@@ -135,6 +136,33 @@ Content does not render in iFrame or prompts you for a login:
 
 Documentation for using the API is located in [HELP.md](https://github.com/jasonacox/pypowerwall/blob/main/proxy/HELP.md#release-notes).
 
+## Environmental Settings
+
+The pyPowerwall Proxy will react to the following environmental variables with (defaults):
+
+Powerwall Settings
+
+* PW_PASSWORD - Powerwall customer password ("password")
+* PW_EMAIL - Powerwall customer email ("[email protected]")
+* PW_HOST - Powerwall hostname or IP address ("hostname")
+* PW_TIMEZONE - Local timezone ("America/Los_Angeles")
+
+Proxy Settings
+
+* PW_BIND_ADDRESS - IP address ("") - Required
+* PW_PORT - TCP port ("8675")
+* PW_DEBUG - Turn on debug logging ("no")
+* PW_CACHE_EXPIRE - Time to cache responses from Powerwall in sec ("5")
+* PW_BROWSER_CACHE - Sets Cache-Control for browser in sec ("0" = no-cache)
+* PW_TIMEOUT - Timeout waiting for Powerwall to respond in sec ("10")
+* PW_POOL_MAXSIZE - Concurrent connections to Powerwall ("15")
+* PW_HTTPS - Set https mode - see HTTPS section above ("no")
+* PW_STYLE - Background color style for iframe [animation](http://localhost:8675/example.html) ("clear") - options:
+    * clear (uses `transparent`)
+    * black or dakboard (uses `#000` ![#000](https://via.placeholder.com/12/000/000000.png?text=+))
+    * white (uses `#ffffff` ![#ffffff](https://via.placeholder.com/12/ffffff/000000.png?text=+))
+    * grafana (uses `#161719` ![#161719](https://via.placeholder.com/12/161719/000000.png?text=+))
+    * grafana-dark (uses `#111217` ![#111217](https://via.placeholder.com/12/111217/000000.png?text=+))
 
 ## Release Notes
 

proxy/RELEASE.md

@@ -1,5 +1,9 @@
 ## pyPowerwall Proxy Release Notes
 
+### Proxy t28 (14 Oct 2023)
+
+* Add a `grafana-dark` style for `PW_STYLE` settings to accommodate placing as iframe in newer Grafana versions (e.g. v9.4.14). See https://github.com/jasonacox/Powerwall-Dashboard/discussions/371.
+
 ### Proxy t27 (23 Sep 2023)
 
 * Add Add Graceful Exit with SIGTERM to fix condition where container does not stop gracefully as raised in https://github.com/jasonacox/pypowerwall/pull/49 by @rcasta74 .

proxy/server.py

@@ -28,7 +28,7 @@
 import ssl
 from transform import get_static, inject_js
 
-BUILD = "t27"
+BUILD = "t28"
 ALLOWLIST = [
     '/api/status', '/api/site_info/site_name', '/api/meters/site',
     '/api/meters/solar', '/api/sitemaster', '/api/powerwalls', 

proxy/web/grafana-dark.js

@@ -0,0 +1,89 @@
+'use strict'
+
+// Grafana Dark Theme
+// Clear IndexedDB to prevent auth hangup in the proxied Powerwall web app.
+try {
+    window.indexedDB.databases().then((dbs) => {
+        dbs.forEach(db => { window.indexedDB.deleteDatabase(db.name) });
+    });
+} catch (error) {
+    document.write("Browser blocking indexedDB - Turn off incognito mode.");
+}
+
+function injectScriptAndUse() {
+    return new Promise((resolve, reject) => {
+        var body = document.getElementsByTagName("body")[0];
+        var script = document.createElement("script");
+        script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js";
+        script.onload = function () {
+            resolve();
+        };
+        body.appendChild(script);
+    });
+}
+
+injectScriptAndUse().then(() => {
+    console.log("Applying Grafana customization");
+    triggerOnMutation(formatPowerwallForGrafana);
+});
+
+function triggerOnMutation(cb) {
+    // Create an observer instance
+    var observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+            var newNodes = mutation.addedNodes; // DOM NodeList
+            if (newNodes !== null) { // If there are new nodes added
+                if (cb) cb();
+            }
+        });
+    });
+
+    // Configuration of the observer:
+    var config = {
+        attributes: true,
+        childList: true,
+        subtree: true,
+    };
+
+    var target = $("#root")[0];
+
+    // Pass in the target node, as well as the observer options
+    observer.observe(target, config);
+}
+
+function formatPowerwallForGrafana() {
+    // Hide elements.
+    $('.overview-menu, #logout, .footer, .compact-btn-row, .toast-list, .power-flow-header, .btn').hide();
+
+    // Set alignment
+    $('.core-layout__viewport').css({
+        padding: 0,
+        margin: 0,
+    });
+
+    $('.power-flow-header').css({
+        "padding-top": 0,
+    });
+
+    $('.power-flow-grid').css({
+        width: "100%",
+        left: 0,
+        right: 0,
+        margin: 0,
+        "padding-top": 0,
+        "position": "fixed",
+    });
+
+    $('.app').css({
+        "overflow-y": "hidden",
+    });
+
+    // Set colors
+    $('body').css({
+        "background-color": "#111217",
+    });
+
+    $('.power-flow-grid.active').css({
+        "background-color": "#111217",
+    });
+}