Add UI (#98)

* update extended glob pattern to use regex pattern which is more portable

* update docker compose script to be compat with osx shell and create port override options

* Add web UI and update supporting files

* kubernetes and testing updates

Author: aknot242

FEATURES.md

@@ -1,6 +1,6 @@
-## Supported features
+# Supported features
 
-### NGINX Control plane support
+## NGINX Control plane support
 
 NGINX Declarative API has been tested with the following NGINX control plane releases:
 
@@ -9,7 +9,6 @@ NGINX Declarative API has been tested with the following NGINX control plane rel
 | NGINX Instance Manager    | 2.18+                | 2.20+                |        |
 | NGINX One Console         | General availability | General availability |        |
 
-
 ### NGINX `http` and `stream` servers
 
 | Feature                     | API v5.4 | API v5.5 | Notes                                                                                                                                                                                                     |
@@ -32,7 +31,6 @@ NGINX Declarative API has been tested with the following NGINX control plane rel
 | NGINX Plus REST API access  | X        | X        |                                                                                                                                                                                                           |
 | NGINX App Protect WAF       | X        | X        | NGINX Instance Manager only<li>Per-policy CRUD at `server` and `location` level</li><li>Support for dataplane-based bundle compilation</li><li>Security policies can be fetched from source of truth</li> |
 
-
 ### HTTP Locations
 
 Locations `.declaration.http.servers[].locations[].uri` match modifiers in `.declaration.http.servers[].locations[].urimatch` can be:
@@ -115,7 +113,7 @@ See the [Postman collection](/contrib/) for usage examples
 #### Examples
 
 ACME issuer profiles to be defined under `.declaration.http.acme_issuers[]`
-For full details for all fields see https://nginx.org/en/docs/http/ngx_http_acme_module.html 
+For full details for all fields see https://nginx.org/en/docs/http/ngx_http_acme_module.html
 
 ```json
 {
@@ -458,6 +456,7 @@ Example hooks:
     }
 ]
 ```
+
 - `js_periodic` - see https://nginx.org/en/docs/http/ngx_http_js_module.html#js_periodic
 
 ```json
@@ -543,11 +542,11 @@ DNS resolver profiles to be defined under `.declaration.http.resolvers[]`
 |-----------------|----------|----------|-------|
 | Logging formats | X        | X        |       |
 
-
 #### Examples
 
 Access and error logging available in `.declaration.http.servers[].log` and `.declaration.http.servers[].locations[].log`
 See:
+
 * Access log: https://nginx.org/en/docs/http/ngx_http_log_module.html#access_log
 * Logging to syslog: https://nginx.org/en/docs/syslog.html
 * Error log: https://nginx.org/en/docs/ngx_core_module.html#error_log
@@ -568,6 +567,7 @@ See:
 
 Access logging formats to be defined in `.declaration.http.logformats[]`
 See:
+
 * Access log format: https://nginx.org/en/docs/http/ngx_http_log_module.html#log_format
 
 ```json

README.md

@@ -9,7 +9,7 @@ This project supports [F5 NGINX Instance Manager](https://docs.nginx.com/nginx-i
 
 ## 📚 Overview
 
-At its core, the NGINX Declarative API supports **declarative configuration management** by letting users define what the state of NGINX *should be*, rather than how to get there. It eliminates the need for procedural changes by processing user-defined JSON payloads into valid and optimized NGINX configurations. 
+At its core, the NGINX Declarative API supports **declarative configuration management** by letting users define what the state of NGINX *should be*, rather than how to get there. It eliminates the need for procedural changes by processing user-defined JSON payloads into valid and optimized NGINX configurations.
 
 This tool is ideal for managing NGINX in **modern, dynamic infrastructures** such as CI/CD environments, containerized applications (like Kubernetes), or large-scale proxy server setups.
 
@@ -21,7 +21,6 @@ This tool is ideal for managing NGINX in **modern, dynamic infrastructures** suc
 - ✅ **Dynamic Updates**: Handle frequent configuration changes in highly dynamic environments.
 - ✅ **Seamless Scalability**: Simplifies managing NGINX setups in high-scale distributed architectures.
 
-
 GitOps integration is supported: source of truth is checked for updates (F5 WAF for NGINX policies, TLS certificates, keys and chains/bundles, Swagger/OpenAPI definitions, snippets) and NGINX configurations are automatically kept in sync.
 
 ### 📝 Use Cases

contrib/docker-compose/README.md

@@ -9,7 +9,7 @@ Software prerequisites are:
 
 Usage:
 
-```
+```bash
 $ git clone https://github.com/f5devcentral/NGINX-Declarative-API
 $ cd NGINX-Declarative-API/contrib/docker-compose
 $ ./nginx-dapi.sh 
@@ -26,23 +26,25 @@ NGINX Declarative API - https://github.com/f5devcentral/NGINX-Declarative-API/
  -h                             - This help
  -c [start|stop|build]          - Deployment command
  -a <port>                      - Custom port for NGINX Declarative API (default: 5000)
+ -w <port>                      - Custom port for Web UI (default: 3000)
  -d <port>                      - Custom port for Developer Portal (default: 5001)
  -r <port>                      - Custom port for Redis (default: 6379)
 
  === Examples:
 
  Deploy NGINX Declarative API:                  ./nginx-dapi.sh -c start
  Deploy with custom Declarative API port:       ./nginx-dapi.sh -c start -a 8080
+ Deploy with custom Web UI port:                ./nginx-dapi.sh -c start -w 8080
  Deploy with custom DevPortal port:             ./nginx-dapi.sh -c start -d 8081
- Deploy with all custom ports:                  ./nginx-dapi.sh -c start -a 8080 -d 8081 -r 6380
+ Deploy with all custom ports:                  ./nginx-dapi.sh -c start -a 8080 -w 8081 -d 8082 -r 6380
  Remove NGINX Declarative API:                  ./nginx-dapi.sh -c stop
  Build docker images:                           ./nginx-dapi.sh -c build
 
 ```
 
 ## Building docker images
 
-```
+```bash
 $ ./nginx-dapi.sh -c build
 -> Building NGINX Declarative API Docker images
 [+] Building 3.6s (24/24) FINISHED
@@ -59,46 +61,110 @@ nginx-declarative-api             latest    0d76c5a4338b   1 minutes ago    168M
 ## How to run
 
 1. Start NGINX Declarative API using the provided `nginx-dapi.sh` script
-2. Start Postman using the collection provided [here](/contrib/postman)
+2. Start Postman using the [Postman collection](/contrib/postman)
 
 Starting:
 
 ```commandline
 $ ./nginx-dapi.sh -c start
 -> Deploying NGINX Declarative API
    NGINX Declarative API port: 5000
+   Web UI port: 3000
    Developer Portal port: 5001
    Redis port: 6379
 [+] Building 0.0s (0/0)
+[+] Running 5/5
+ ✔ Network nginx-dapi_dapi-network  Created 
+ ✔ Container redis                  Started 
+ ✔ Container devportal              Started 
+ ✔ Container nginx-dapi             Started
+ ✔ Container nginx-dapi-webui       Started 
+```
+
+Access the Web UI at <http://localhost:3000>
+
+## Local Development Mode
+
+For active development on the Web UI, you can run it locally with hot-reload while keeping the backend services in Docker:
+
+1. **Start backend services only:**
+
+```bash
+$ docker-compose -f docker-compose.dev.yaml up -d
 [+] Running 4/4
  ✔ Network nginx-dapi_dapi-network  Created 
  ✔ Container redis                  Started 
  ✔ Container devportal              Started 
- ✔ Container nginx-dapi             Started 
+ ✔ Container nginx-dapi             Started
+```
+
+1. **Run Web UI locally:**
+
+```bash
+$ cd ../../webui
+$ npm install  # first time only
+$ npm run dev
+
+NGINX Declarative API Web UI
+  ➜  Local:   http://localhost:3000/
+```
+
+The Vite dev server automatically proxies API requests to the containerized backend on `localhost:5000`.
+
+**Using custom ports:**
+
+If you started the backend with a custom DAPI port (e.g., `-a 8088`), you need to set the corresponding environment variable for the webui:
+
+```bash
+$ ./nginx-dapi.sh -c start -m dev -a 8088
+
+# Then in the webui directory:
+$ cd ../../webui
+$ VITE_DAPI_PORT=8088 npm run dev
 ```
 
+Or use the script with default ports:
+
+```bash
+$ ./nginx-dapi.sh -c start -m dev
+
+# Then in the webui directory:
+$ cd ../../webui
+$ npm run dev  # Defaults to port 5000
+```
+
+**Benefits:**
+
+- ⚡ Fast hot-reload for UI changes
+- 🐛 Full browser debugging capabilities
+- 🔧 Backend services isolated in containers
+- 🔄 Easy to restart individual services
+
 Starting with custom ports (useful when default ports are in use):
 
 ```commandline
-$ ./nginx-dapi.sh -c start -a 8080 -d 8081 -r 6380
+$ ./nginx-dapi.sh -c start -a 8080 -w 8081 -d 8082 -r 6380
 -> Deploying NGINX Declarative API
    NGINX Declarative API port: 8080
-   Developer Portal port: 8081
+   Web UI port: 8081
+   Developer Portal port: 8082
    Redis port: 6380
 [+] Building 0.0s (0/0)
 [+] Running 4/4
  ✔ Network nginx-dapi_dapi-network  Created 
  ✔ Container redis                  Started 
  ✔ Container devportal              Started 
- ✔ Container nginx-dapi             Started 
+ ✔ Container nginx-dapi             Started
+ ✔ Container nginx-dapi-webui       Started 
 ```
 
 Stopping:
 
 ```commandline
 $ ./nginx-dapi.sh -c stop
 -> Undeploying NGINX Declarative API
-[+] Running 4/4
+[+] Running 5/5
+ ✔ Container nginx-dapi-webui       Removed
  ✔ Container nginx-dapi             Removed 
  ✔ Container devportal              Removed 
  ✔ Container redis                  Removed 

contrib/docker-compose/docker-compose.dev.yaml

@@ -0,0 +1,45 @@
+volumes:
+  redis_data:
+
+services:
+  redis:
+    image: redis
+    container_name: "redis"
+    restart: always
+    ports:
+      - "${REDIS_PORT:-6379}:6379"
+    networks:
+      - dapi-network
+    volumes:
+      - redis_data:/data:rw
+
+  devportal:
+    image: nginx-declarative-api-devportal
+    build:
+      context: ../devportal/redocly
+      dockerfile: Dockerfile
+    user: "${USERID}:${USERGROUP}"
+    container_name: "devportal"
+    restart: always
+    ports:
+      - "${DEVPORTAL_PORT:-5001}:5000"
+    networks:
+      - dapi-network
+
+  nginx-dapi:
+    image: nginx-declarative-api
+    build:
+      context: ../../
+      dockerfile: Dockerfile
+    user: "${USERID}:${USERGROUP}"
+    container_name: "nginx-dapi"
+    restart: always
+    depends_on:
+      - redis
+    ports:
+      - "${DAPI_PORT:-5000}:5000"
+    networks:
+      - dapi-network
+
+networks:
+  dapi-network:

contrib/docker-compose/docker-compose.yaml

@@ -41,5 +41,21 @@ services:
     networks:
       - dapi-network
 
+  webui:
+    image: nginx-declarative-api-webui
+    build:
+      context: ../../webui
+      dockerfile: Dockerfile
+    container_name: "nginx-dapi-webui"
+    restart: always
+    depends_on:
+      - nginx-dapi
+    environment:
+      - DAPI_PORT=5000
+    ports:
+      - "${WEBUI_PORT:-3000}:80"
+    networks:
+      - dapi-network
+
 networks:
   dapi-network:

contrib/docker-compose/nginx-dapi.sh

@@ -11,14 +11,19 @@ $0 [options]\n\n
 === Options:\n\n
 -h\t\t\t\t- This help\n
 -c [start|stop|build]\t\t- Deployment command\n
+-m [full|dev]\t\t\t- Deployment mode: full (with webui container) or dev (backend only for local webui development) (default: full)\n
 -a <port>\t\t\t- Custom port for NGINX Declarative API (default: 5000)\n
+-w <port>\t\t\t- Custom port for Web UI (default: 3000, only for full mode)\n
 -d <port>\t\t\t- Custom port for Developer Portal (default: 5001)\n
 -r <port>\t\t\t- Custom port for Redis (default: 6379)\n\n
 === Examples:\n\n
-Deploy NGINX Declarative API:\t\t\t$0 -c start\n
+Deploy NGINX Declarative API (full):\t\t$0 -c start\n
+Deploy in dev mode (no webui container):\t$0 -c start -m dev\n
 Deploy with custom Declarative API port:\t$0 -c start -a 8080\n
+Deploy dev mode with custom ports:\t\t$0 -c start -m dev -a 8080 -d 8081 -r 6380\n
+Deploy with custom Web UI port:\t\t$0 -c start -w 8080\n
 Deploy with custom DevPortal port:\t\t$0 -c start -d 8081\n
-Deploy with all custom ports:\t\t\t$0 -c start -a 8080 -d 8081 -r 6380\n
+Deploy with all custom ports:\t\t\t$0 -c start -a 8080 -w 8081 -d 8082 -r 6380\n
 Remove NGINX Declarative API:\t\t\t$0 -c stop\n
 Build docker images:\t\t\t\t$0 -c build\n
 "
@@ -37,11 +42,17 @@ USERNAME=`whoami`
 export USERID=`id -u $USERNAME`
 export USERGROUP=`id -g $USERNAME`
 export DAPI_PORT=${DAPI_PORT:-5000}
+export WEBUI_PORT=${WEBUI_PORT:-3000}
 export DEVPORTAL_PORT=${DEVPORTAL_PORT:-5001}
 export REDIS_PORT=${REDIS_PORT:-6379}
 
-echo "-> Deploying NGINX Declarative API"
+echo "-> Deploying NGINX Declarative API ($DEPLOY_MODE mode)"
 echo "   NGINX Declarative API port: $DAPI_PORT"
+if [ "$DEPLOY_MODE" = "full" ]; then
+  echo "   Web UI port: $WEBUI_PORT"
+else
+  echo "   Web UI: Run locally with 'cd ../../webui && npm run dev'"
+fi
 echo "   Developer Portal port: $DEVPORTAL_PORT"
 echo "   Redis port: $REDIS_PORT"
 COMPOSE_HTTP_TIMEOUT=240 docker-compose -p $PROJECT_NAME -f $DOCKER_COMPOSE_YAML up -d --remove-orphans
@@ -80,10 +91,10 @@ COMPOSE_HTTP_TIMEOUT=240 docker-compose -p $PROJECT_NAME -f $DOCKER_COMPOSE_YAML
 # Main
 #
 
-DOCKER_COMPOSE_YAML="docker-compose.yaml"
 PROJECT_NAME="nginx-dapi"
+DEPLOY_MODE="full"
 
-while getopts 'hc:a:d:r:' OPTION
+while getopts 'hc:m:a:w:d:r:' OPTION
 do
   case "$OPTION" in
     h)
@@ -92,9 +103,15 @@ do
     c)
       ACTION=$OPTARG
     ;;
+    m)
+      DEPLOY_MODE=$OPTARG
+    ;;
     a)
       DAPI_PORT=$OPTARG
     ;;
+    w)
+      WEBUI_PORT=$OPTARG
+    ;;
     d)
       DEVPORTAL_PORT=$OPTARG
     ;;
@@ -104,11 +121,24 @@ do
   esac
 done
 
+# Set docker-compose file based on mode
+if [ "$DEPLOY_MODE" = "dev" ]; then
+  DOCKER_COMPOSE_YAML="docker-compose.dev.yaml"
+else
+  DOCKER_COMPOSE_YAML="docker-compose.yaml"
+fi
+
 if [ -z "${ACTION}" ] || [[ ! "${ACTION}" =~ ^(start|stop|build)$ ]]
 then
   usage
 fi
 
+if [[ ! "${DEPLOY_MODE}" =~ ^(full|dev)$ ]]
+then
+  echo "Error: Invalid mode '${DEPLOY_MODE}'. Must be 'full' or 'dev'"
+  usage
+fi
+
 case "$ACTION" in
   start)
     nginx_dapi_start