Improve Dev Container Web App Visualization (#3551)

* Add Caddyfile to reverse proxy websockets
in an attempt to avoid authentication tokens in headers
when forwarding ports from codespaces via web interface

- https://docs.github.com/en/codespaces/developing-in-codespaces/forwarding-ports-in-your-codespace#using-command-line-tools-and-rest-clients-to-access-ports
- https://caddyserver.com/docs/quick-starts/reverse-proxy
- https://caddy.community/t/caddy-v2-how-to-proxy-websoket-v2ray-websocket-tls/7040/13

* Update caddy related tasks

* Rename Gzweb task to Gzweb Bridge
to make room for more gzweb tasks

* Add Gzweb Client Task

* Add Caddyfile to reverse proxy websockets
now for Gzweb

* Specify config file to avoid crosstalk
between caddy stop commands

* Fix reverse proxy for websockets
by correcting matcher using headers
as websocket request header value is lowercase for gzweb and foxglove

* Comment out log output files for debugging

* Simplify tasks by removing client tasks

* Stop tasks by using terminate
via the workbench.action.tasks.terminate command

* Move Caddyfile

* Add Web Server tasks

* Move Caddyfile

* Update log output file path

* Update root path

* Update reverse_proxy for both gzweb and foxglove
by using the path argument for respective matchers

- https://caddyserver.com/docs/caddyfile/matchers#path-matchers

* Use snippets
to keep Caddyfile DRY
- https://caddyserver.com/docs/caddyfile/concepts#snippets

* Use rewrite to catch trailing slash
as file_server defaults do not correct reverse_proxy.
This make typing the websocket URL more forgiving

- https://caddyserver.com/docs/caddyfile/patterns#trailing-slashes

* Improve websocket snippet
to keep Caddyfile DRY

* Use header_regexp for case-insensitive matching
given web port forwarding from Codespaces is odd
and rewrites the value of this header field to lowercases
even when local browser request is sent as `Upgrade`

* Add helper index page to web server
to link to web apps for reverse proxy

* Limit templates to fix gzweb
by adding matcher for only root index
otherwise gzweb's own index.html gets overwritten

* Add comments to Cadyfile
to document tricky configuration

* Stage working redirect

* Simplify index.html

* Add helper redirect to simplify foxglove
to set the respective queries values to automate websocket setup,
and ensure the websocket schema matches the https request

* Avoid hardcoding port number

* Clean up comments

* Use header to compute redirect
to take into account requesting forwarding
or more codespace port forwarding shenanigans

* Use shorthand placeholders
- https://caddyserver.com/docs/caddyfile/concepts#placeholders

* Formatting

* Keep trailing slash
to stay consistent with caddy file_server directive
that serves a 308 Permanent Redirect
for both foxglove and gzweb paths anyway

* Refactor matcher logic
to account for requests either from
host ports from local dev containers
or forwarded requests from codespace web port forwarding

* Split snippet into globals
for composability

* Update comments

* Add Placeholders
for debugging

* Use tables to center

* Use github markdown
- https://github.com/sindresorhus/github-markdown-css

* Simplify vars

* Rename vars

* Revert "Rename vars"
as dotted var names do not work in Caddyfile

This reverts commit 3e2d1b3.

* Add System Monitor
to debug CPU load and memory issues

* Update headings

* Update layout

* Update layout

* Add Foxglove layout for Nav2

* Symlink assets folder for web server

* Fetch Foxglove layout using layoutUrl
a new parameter to load layout json data from URL
- https://github.com/orgs/foxglove/discussions/217

* Cleanup

* Use fork to fetch Foxglove layout using layoutUrl
until this PR is merged:
- foxglove/studio#5987

* Update Caddyfile to handle relative root
by using local srv folder

* Inject mobile view html tags
using the caddy replace module
- https://caddyserver.com/docs/modules/http.handlers.replace_response
- https://github.com/caddyserver/replace-response

* Simplify Caddyfile

* Use snippet for apps

* Simplify Caddyfile

* Simplify Caddyfile

* Build caddy using custom modules

* Remove unused symlinks

* Add comments

* Use environment and defined variables for config
to avoid hard coded paths

* Add FoxgloveUrl to vars
for reuse in templates

* Fix trailing slash for DataSourceUrl

* Use exec to run gzserver with xvfb
to prevent ros launch from orphaning process
and ensure gzserver receives SIGTERM signal
given gzserver often hangs after only SIGINT
- https://unix.stackexchange.com/a/196053/213124

* Update redirect for foxglove
to redirect from path /foxglove/autolayout

* Add redirect for foxglove
to redirect from path /foxglove/autoconnect
but does not use LayoutUrl
as to not change from cached layout

* Use web app manifest
to set display as standalone
- https://web.dev/add-manifest/
- https://developer.mozilla.org/en-US/docs/Web/Manifest

* Template manifest files
to embed host info into app name

* Add manifests for other web apps

* Add shortcuts for Foxglove
- https://developer.mozilla.org/en-US/docs/Web/Manifest/shortcuts
- https://web.dev/app-shortcuts/

* Format

* Update comments

* Revert use of fork

* Remove debug directive

.devcontainer/caddy/Caddyfile

@@ -0,0 +1,122 @@
+# Snippet for global matchers and variables
+# to logically expression request conditions
+# E.g. for conditionally changing redirects
+(globals) {
+	# Use gzip compression for all responses
+	encode gzip
+
+	# Matcher for http request scheme. E.g. "http" or "https"
+	@http_scheme {
+		expression {http.request.scheme}=="https" || {header.X-Forwarded-Scheme}=="https"
+	}
+	# If any http scheme is "https", then use "wss"
+	vars @http_scheme WsScheme "wss"
+	# Else default to "ws"
+	vars WsScheme "ws"
+
+	# Matcher for forwarded request headers
+	@host_forwarded {
+		header X-Forwarded-Host *
+	}
+	# If http headers exists, then use them
+	vars @host_forwarded WsHost {header.X-Forwarded-Host}
+	# Else default to host in request
+	vars WsHost {http.request.hostport}
+
+	# Matcher for websocket connection upgrade requests
+	@websockets {
+		# Avoid case sensitivity issues when matching field values
+		# E.g. when values are rewritten by Codespace port forwarding
+		header_regexp Connection (?i)(Upgrade)
+		header Upgrade websocket
+	}
+}
+
+# Snippet for redirect with given URL queries values
+# to simplify remote development with web apps
+# E.g auto redirect websocket URL to match request scheme
+(redirect) {
+	# Configure redirect to match request scheme
+	vars LayoutUrl "/assets/nav2_foxglove_layout.json"
+	vars DataSourceUrl "{vars.WsScheme}://{vars.WsHost}{args.0}/"
+	redir /autoconnect "{args.0}/?ds=foxglove-websocket&ds.url={vars.DataSourceUrl}"
+	redir /autolayout "{args.0}/?ds=foxglove-websocket&ds.url={vars.DataSourceUrl}&layoutUrl={vars.LayoutUrl}"
+}
+
+# Snippet for dummy imports
+(dummy) {
+}
+
+# Snippet for enabling mobile web app features
+# to improve user experience on small screen devices
+# E.g. for enabling fullscreen mode on iOS and Android
+(mobile) {
+	# Match for directory redirects to index.html
+	route / {
+		# Inject link to manifest just after <head> tag
+		# https://developer.mozilla.org/docs/Web/Manifest
+		replace `<head>` `<head><link rel="manifest" href="manifest.json" />`
+	}
+	# Redirect relative handle_path'ed manifest.json to /manifests directory
+	redir /manifest.json /manifests{http.request.orig_uri.path.dir}manifest.json
+}
+
+# Snippet for hosted web app using websockets
+# to serve static files and reverse proxying connections
+# E.g. for serving GzWeb and Foxglove web apps
+(app) {
+	# Redirect implicit directory requests twards index.html
+	redir {args.0} {args.0}/
+	# handle and strip path prefix from redirect
+	handle_path {args.0}/* {
+		# Set root directory for static files
+		root * {args.1}
+		# Serve static files
+		file_server
+		# Enable mobile web app features
+		import mobile
+		# Reverse proxy websockets to backend address
+		reverse_proxy @websockets {args.2}
+		# Import custom snippets
+		import {args.3} {args.0}
+	}
+}
+
+# Listen for http requests on port 8080
+# regardless of hostname or domain address
+# E.g. whatever Codespaces assigns to host
+:8080 {
+	# Include global matchers and variables
+	import globals
+
+	# Handle main landing page
+	handle /* {
+		# Use relative path for root directory
+		root * srv
+		file_server
+		import mobile
+		# Render markdown files as html
+		templates
+		# Template manifest.json files
+		templates */manifest.json {
+			mime application/json
+		}
+	}
+
+	# Import app snippets for web apps
+	import app "/gzweb" "{$GZWEB_WS}/http/client" "localhost:9090" "dummy"
+	import app "/foxglove" "{$FOXGLOVE_WS}" "localhost:8765" "redirect"
+
+	# Handle glances web app
+	redir /glances /glances/
+	handle_path /glances/* {
+		import mobile
+		# Reverse proxy to glances backend
+		reverse_proxy * "localhost:61208"
+	}
+
+	# For debugging
+	# log {
+	# 	output file /var/log/caddy/server.log
+	# }
+}