Proxy everything behind nginx

dashboards/dashboard.json

@@ -1060,7 +1060,7 @@
       "id": 13,
       "links": [],
       "options": {
-        "content": "<style>\ndiv.powerDiv {\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      background: url(public/img/load_big.gif) center center no-repeat;\n    }\ndiv.firmwareDiv {\n      width: 100%;\n      position: absolute;\n      text-align: center;\n      left: 0;\n      bottom: 0;\n      overflow: hidden;\n    }\niframe.powerFrame {\n      width: 400px;\n      height: 300px;\n      transform: scale(0);\n      transform-origin: center;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      border-style: none;\n    }\n</style>\n<div class=\"powerDiv\">\n    <iframe id=\"frame8675\" class=\"powerFrame\" src=\"/public/img/grafana_icon.svg\">IFRAME not supported by browser.</iframe>\n</div>\n<div class=\"firmwareDiv\">\n  <p class=\"version\" style=\"color:gray; text-align: center;\">Firmware</p>\n</div>\n<script>\n// Scale Animation when Window is Resized\nfunction scale() {\n  document.querySelectorAll('.powerFrame').forEach(scaled => {\n    parent = scaled.parentNode;\n    ratio = Math.min(1,parent.offsetWidth / scaled.offsetWidth, parent.offsetHeight / scaled.offsetHeight);\n    scaled.style.transform = 'translate(-50%, -50%) scale(' + ratio + ')';\n  })\n}\nwindow.addEventListener('resize', function(e){ scale(); }, false);\n\n// Display Firmware Version\nfunction showversion() {\n    var pwver = window.location.protocol + \"//\" + window.location.hostname + \":8675/version\";\n    $.getJSON(pwver, function(data) {\n        var text = `Firmware: ${data.version.split(\" \")[0]}`;\n        $(\".version\").html(text);\n    });\n    setTimeout(showversion, 60000);\n}\nshowversion();\n\n// Load Animation from pyPowerwall\nvar powerFrame = document.getElementById('frame8675');\npowerFrame.onload = function() {\n  // remove animated gif from background now that frame downloaded...\n  this.parentNode.setAttribute('style','background: none');\n  // and scale the frame to fit...\n  scale();\n}\npowerFrame.src = window.location.protocol + \"//\" + window.location.hostname + \":8675/\";\n</script>",
+        "content": "<style>\ndiv.powerDiv {\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n      background: url(public/img/load_big.gif) center center no-repeat;\n    }\ndiv.firmwareDiv {\n      width: 100%;\n      position: absolute;\n      text-align: center;\n      left: 0;\n      bottom: 0;\n      overflow: hidden;\n    }\niframe.powerFrame {\n      width: 400px;\n      height: 300px;\n      transform: scale(0);\n      transform-origin: center;\n      position: absolute;\n      left: 50%;\n      top: 50%;\n      border-style: none;\n    }\n</style>\n<div class=\"powerDiv\">\n    <iframe id=\"frame8675\" class=\"powerFrame\" src=\"/public/img/grafana_icon.svg\">IFRAME not supported by browser.</iframe>\n</div>\n<div class=\"firmwareDiv\">\n  <p class=\"version\" style=\"color:gray; text-align: center;\">Firmware</p>\n</div>\n<script>\n// Scale Animation when Window is Resized\nfunction scale() {\n  document.querySelectorAll('.powerFrame').forEach(scaled => {\n    parent = scaled.parentNode;\n    ratio = Math.min(1,parent.offsetWidth / scaled.offsetWidth, parent.offsetHeight / scaled.offsetHeight);\n    scaled.style.transform = 'translate(-50%, -50%) scale(' + ratio + ')';\n  })\n}\nwindow.addEventListener('resize', function(e){ scale(); }, false);\n\n// Display Firmware Version\nfunction showversion() {\n    var pwver = window.location.protocol + \"//\" + window.location.hostname + \":\" + window.location.port + \"/version\";\n    $.getJSON(pwver, function(data) {\n        var text = `Firmware: ${data.version.split(\" \")[0]}`;\n        $(\".version\").html(text);\n    });\n    setTimeout(showversion, 60000);\n}\nshowversion();\n\n// Load Animation from pyPowerwall\nvar powerFrame = document.getElementById('frame8675');\npowerFrame.onload = function() {\n  // remove animated gif from background now that frame downloaded...\n  this.parentNode.setAttribute('style','background: none');\n  // and scale the frame to fit...\n  scale();\n}\npowerFrame.src = window.location.protocol + \"//\" + window.location.hostname + \":\" + window.location.port + \"/panel.html\";\n</script>",
         "mode": "html"
       },
       "pluginVersion": "9.1.2",

grafana.env.sample

@@ -32,3 +32,8 @@ GF_SECURITY_ALLOW_EMBEDDING=true
 #GF_SERVER_PROTOCOL=https
 #GF_SERVER_CERT_FILE=/var/lib/grafana/cert.pem
 #GF_SERVER_CERT_KEY=/var/lib/grafana/key.pem
+
+# Serve Grafana from /grafana/
+GF_SERVER_ROOT_URL="%(protocol)s://%(domain)s:%(http_port)s/grafana/"
+GF_SERVER_SERVE_FROM_SUB_PATH=true
+

nginx-host.conf

@@ -0,0 +1,64 @@
+
+
+# this is required to proxy Grafana Live WebSocket connections.
+map $http_upgrade $connection_upgrade {
+	default upgrade;
+	'' close;
+}
+
+upstream grafana_host {
+	server grafana:9000;
+}
+
+upstream pypowerwall_host {
+	server pypowerwall:8675;
+}
+
+server {
+	listen 80 default_server;
+	listen [::]:80 default_server;
+
+	root /var/www/html;
+	server_name _;
+
+	# Proxy /grafana/* & co
+        location /grafana/api/live/ {
+                proxy_http_version 1.1;
+                proxy_set_header Upgrade $http_upgrade;
+                proxy_set_header Connection $connection_upgrade;
+                proxy_set_header Host $http_host;
+                proxy_pass http://grafana_host;
+        }
+        location /grafana/ {
+                proxy_set_header Host $http_host;
+                proxy_set_header X-Req-URI $request_uri;
+                proxy_set_header X-Req-Instance "grafana";
+                proxy_pass http://grafana_host;
+        }
+
+	# If location is EXACTLY /, Redirect to /grafana/
+	location = / {
+		absolute_redirect off;
+		return 301 /grafana/;
+	}
+
+	# If location is EXACTLY /panel.html,
+	# this should be rewritten to pypowerwall /
+	location = /panel.html {
+		rewrite (.*) / break;
+                proxy_set_header Host $http_host;
+                proxy_set_header X-Req-URI $request_uri;
+                proxy_set_header X-Req-Instance "panel";
+		proxy_redirect off;
+                proxy_pass http://pypowerwall_host;
+	}
+
+	# Pass any other location to pypowerwall
+	location / {
+		proxy_set_header Host $http_host;
+		proxy_set_header X-Req-URI $request_uri;
+		proxy_set_header X-Req-Instance "slash";
+		proxy_pass http://pypowerwall_host;
+	}
+
+}

powerwall.yml

@@ -96,3 +96,19 @@ services:
             - WEATHERCONF=/var/lib/weather/weather411.conf
         depends_on:
             - influxdb
+
+    nginx:
+        image: nginx:latest
+        container_name: nginx
+        hostname: nginx
+        restart: always
+        volumes:
+            - type: bind
+              source: ./nginx-host.conf
+              target: /etc/nginx/conf.d/default.conf
+              read_only: true
+        ports:
+            - target: 80
+              published: 8080
+              mode: host
+