add web UI placeholder (#1395)

Add an optional web UI interface for Martin, including docker-based cross-compilation support.  The UI itself is a placeholder with a logo, but will grow in subsequent PRs.

This was branched off of #1142 to
address the PR feedback from @nyurik .

---------

Co-authored-by: Yuri Astrakhan <[email protected]>
Co-authored-by: Tomer Ronen <[email protected]>
Co-authored-by: tomeronen <[email protected]>

.github/workflows/ci.yml

@@ -142,6 +142,9 @@ jobs:
           for target in "aarch64-unknown-linux-musl" "x86_64-unknown-linux-musl"; do
             echo -e "\n----------------------------------------------"
             echo "Building $target"
+            # See https://github.com/cross-rs/cross/issues/1526
+            # TODO: Remove this once a version after cross 0.2.5 is released
+            export CROSS_BUILD_OPTS="--output=type=docker"
             export "CARGO_TARGET_$(echo $target | tr 'a-z-' 'A-Z_')_RUSTFLAGS"='-C strip=debuginfo'
             cross build --release --target $target --workspace
             mkdir -p target_releases/$target

Cargo.toml

@@ -29,6 +29,7 @@ actix-cors = "0.7"
 actix-http = "3"
 actix-rt = "2"
 actix-web = "4"
+actix-web-static-files = "4"
 anyhow = "1.0"
 approx = "0.5.1"
 async-trait = "0.1"
@@ -80,6 +81,7 @@ spreet = { version = "0.11", default-features = false }
 sqlite-compressions = { version = "0.2.12", default-features = false, features = ["bsdiffraw", "gzip"] }
 sqlite-hashes = { version = "0.7.3", default-features = false, features = ["md5", "aggregate", "hex"] }
 sqlx = { version = "0.7", features = ["sqlite", "runtime-tokio"] }
+static-files = "0.2"
 subst = { version = "0.3", features = ["yaml"] }
 thiserror = "1"
 tile-grid = "0.6"

Cross.toml

@@ -0,0 +1,13 @@
+[build]
+pre-build = [
+    # install nodejs and npm to compile static web resources
+    # note that architecture could be the same as the container, not $CROSS_DEB_ARCH
+    # Need to use a fairly old Node.js version to support the old underlying docker image
+    "curl -fsSL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh",
+    "bash nodesource_setup.sh",
+    "apt-get install -y nodejs",
+    "node -v",
+    # Using old NPM, so must ensure correct access
+    "mkdir -p /.npm",
+    "chown -R 1001:127 /.npm",
+]

docs/src/config-file.md

@@ -38,6 +38,9 @@ cache_size_mb: 1024
 # If the client accepts multiple compression formats, and the tile source is not pre-compressed, which compression should be used. `gzip` is faster, but `brotli` is smaller, and may be faster with caching.  Default could be different depending on Martin version.
 preferred_encoding: gzip
 
+# Enable or disable Martin web UI. At the moment, only allows `enable-for-all` which enables the web UI for all connections. This may be undesirable in a production environment. [default: disable]
+web_ui: disable
+
 # Database configuration. This can also be a list of PG configs.
 postgres:
   # Database connection string. You can use env vars too, for example:

docs/src/run-with-cli.md

@@ -17,6 +17,9 @@ Options:
       --save-config <SAVE_CONFIG>
           Save resulting config to a file or use "-" to print to stdout. By default, only print if sources are auto-detected
 
+  -C, --cache-size <CACHE_SIZE>
+          Main cache size (in MB)
+
   -s, --sprite <SPRITE>
           Export a directory with SVG files as a sprite source. Can be specified multiple times
 
@@ -28,17 +31,25 @@ Options:
 
   -l, --listen-addresses <LISTEN_ADDRESSES>
           The socket address to bind. [DEFAULT: 0.0.0.0:3000]
+
       --base-path <BASE_PATH>
           Set TileJSON URL path prefix, ignoring X-Rewrite-URL header. Must begin with a `/`. Examples: `/`, `/tiles`
           
   -W, --workers <WORKERS>
           Number of web server workers
 
       --preferred-encoding <PREFERRED_ENCODING>
-          Martin server preferred tile encoding. If the client accepts multiple compression formats, and the tile source is not pre-compressed, which compression should be used. `gzip` is faster, but `brotli` is smaller, and may be faster with caching.  Default could be different depending on Martin version
+          Martin server preferred tile encoding. If the client accepts multiple compression formats, and the tile source is not pre-compressed, which compression should be used. `gzip` is faster, but `brotli` is smaller, and may be faster with caching.  Defaults to gzip
           
           [possible values: brotli, gzip]
           
+  -u, --webui <WEB_UI>
+          Control Martin web UI.  Disabled by default
+
+          Possible values:
+          - disable:        Disable Web UI interface. This is the default, but once implemented, the default will be enabled for localhost
+          - enable-for-all: Enable Web UI interface on all connections
+
   -b, --auto-bounds <AUTO_BOUNDS>
           Specify how bounds should be computed for the spatial PG tables. [DEFAULT: quick]
 

docs/src/using.md

@@ -4,7 +4,7 @@ Martin data is available via the HTTP `GET` endpoints:
 
 | URL                                     | Description                                    |
 |-----------------------------------------|------------------------------------------------|
-| `/`                                     | Status text, that will eventually show web UI  |
+| `/`                                     | Web UI                                         |
 | `/catalog`                              | [List of all sources](#catalog)                |
 | `/{sourceID}`                           | [Source TileJSON](#source-tilejson)            |
 | `/{sourceID}/{z}/{x}/{y}`               | Map Tiles                                      |

justfile

@@ -21,7 +21,7 @@ dockercompose := `if docker-compose --version &> /dev/null; then echo "docker-co
     {{ just_executable() }} --list --unsorted
 
 # Start Martin server
-run *ARGS:
+run *ARGS="--webui enable-for-all":
     cargo run -p martin -- {{ ARGS }}
 
 # Start Martin server
@@ -50,9 +50,13 @@ pg_dump *ARGS:
     pg_dump {{ ARGS }} {{ quote(DATABASE_URL) }}
 
 # Perform  cargo clean  to delete all build files
-clean: clean-test stop
+clean: clean-test stop && clean-martin-ui
     cargo clean
 
+clean-martin-ui:
+    rm -rf martin-ui/dist martin-ui/node_modules
+    cargo clean -p static-files
+
 # Delete test output files
 [private]
 clean-test:

martin-ui/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

martin-ui/README.md

@@ -0,0 +1,12 @@
+# Martin Web UI
+
+A web interface for previewing tiles served by Martin.
+
+### Run locally
+
+To run just the web interface
+
+```bash
+npm i
+npm run dev
+```

martin-ui/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <link rel="icon" type="image/x-icon" href="/_/assets/favicon.ico">
+    <meta property="og:url" content="https://maplibre.org"/>
+    <meta property="og:title" content="Martin — vector tiles server"/>
+    <meta property="og:description"
+          content="Blazing fast and lightweight PostGIS, MBtiles and PMtiles tile server, tile generation, and mbtiles tooling."/>
+    <meta property="og:image" content="/martin.png"/>
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/_/assets/favicons/ms-icon-144x144.png">
+    <meta name="theme-color" content="#ffffff">
+    <title>Martin — vector tiles server</title>
+</head>
+<body>
+<noscript>
+    You need to enable JavaScript to run this app.
+</noscript>
+<div id="root"></div>
+<script type="module" src="/src/main.tsx"></script>
+</body>
+</html>