[web] support dynamic REST API port in Web UI (#3353)

jwhui · web-flow · commit 3017a8869be2 · 2026-05-21T17:06:12.000-07:00
This commit resolves the issue where the Web UI topology graph
failed to display when the agent REST API port differed from the
default 8081.

Changes:
- main.cpp: Added -A and -P CLI args to configure agent REST address
  and port on WebServer. Stored the parsed port number in a local
  variable during verification to avoid redundant parsing.
- web_server: Added a new endpoint /get_rest_api_info to expose
  the configured agent REST address and port.
- app.js: Dynamically queries /get_rest_api_info on load to
  initialize host and port; falls back to loopback and 8081 if
  undefined, and window.location.hostname if looped back.
  Introduced a new formatRestAddr helper function to format target
  host/port strings cleanly (wrapping IPv6 loopback/any hosts inside
  brackets).
- s6 run: Passes OT_REST_LISTEN_ADDR and OT_REST_LISTEN_PORT env
  variables from the docker environment to otbr-web.
- dind_web.exp: Refactored the expect script to run a two-stage
  verification covering both default (127.0.0.1:8081) and custom
  (0.0.0.0:9090) values, verifying direct REST API responsiveness
  from the host on the custom port.
diff --git a/etc/docker/border-router/rootfs/etc/s6-overlay/s6-rc.d/otbr-web/run b/etc/docker/border-router/rootfs/etc/s6-overlay/s6-rc.d/otbr-web/run
@@ -36,6 +36,12 @@ readonly OT_WEB_LISTEN_ADDR
 OT_WEB_LISTEN_PORT="${OT_WEB_LISTEN_PORT:-8080}"
 readonly OT_WEB_LISTEN_PORT
 
+OT_REST_LISTEN_ADDR="${OT_REST_LISTEN_ADDR:-127.0.0.1}"
+readonly OT_REST_LISTEN_ADDR
+
+OT_REST_LISTEN_PORT="${OT_REST_LISTEN_PORT:-8081}"
+readonly OT_REST_LISTEN_PORT
+
 echo "Starting otbr-web..."
 
-exec stdbuf -oL /usr/sbin/otbr-web -I "${OT_THREAD_IF}" -d6 -s -a "${OT_WEB_LISTEN_ADDR}" -p "${OT_WEB_LISTEN_PORT}"
+exec stdbuf -oL /usr/sbin/otbr-web -I "${OT_THREAD_IF}" -d6 -s -a "${OT_WEB_LISTEN_ADDR}" -p "${OT_WEB_LISTEN_PORT}" -A "${OT_REST_LISTEN_ADDR}" -P "${OT_REST_LISTEN_PORT}"
diff --git a/src/web/main.cpp b/src/web/main.cpp
@@ -73,19 +73,24 @@ int main(int argc, char **argv)
     const char  *interfaceName  = nullptr;
     const char  *httpListenAddr = nullptr;
     const char  *httpPort       = nullptr;
+    const char  *restListenAddr = nullptr;
+    const char  *restListenPort = nullptr;
     otbrLogLevel logLevel       = OTBR_LOG_INFO;
     int          ret            = 0;
     int          opt;
     uint16_t     port          = OT_HTTP_PORT;
     bool         syslogDisable = false;
 
-    while ((opt = getopt(argc, argv, "d:I:p:va:s")) != -1)
+    while ((opt = getopt(argc, argv, "d:I:p:va:sA:P:")) != -1)
     {
         switch (opt)
         {
         case 'a':
             httpListenAddr = optarg;
             break;
+        case 'A':
+            restListenAddr = optarg;
+            break;
         case 'd':
             logLevel = static_cast<otbrLogLevel>(atoi(optarg));
             break;
@@ -99,6 +104,14 @@ int main(int argc, char **argv)
             port = atoi(httpPort);
             break;
 
+        case 'P':
+            restListenPort = optarg;
+            {
+                int portNum = atoi(restListenPort);
+                VerifyOrExit(portNum > 0 && portNum <= 65535, ret = -1);
+            }
+            break;
+
         case 'v':
             PrintVersion();
             ExitNow();
@@ -109,7 +122,9 @@ int main(int argc, char **argv)
             break;
 
         default:
-            fprintf(stderr, "Usage: %s [-d DEBUG_LEVEL] [-I interfaceName] [-p port] [-a listenAddress] [-v]\n",
+            fprintf(stderr,
+                    "Usage: %s [-d DEBUG_LEVEL] [-I interfaceName] [-p port] [-a listenAddress] [-A restListenAddress] "
+                    "[-P restListenPort] [-v]\n",
                     argv[0]);
             ExitNow(ret = -1);
             break;
@@ -143,6 +158,7 @@ int main(int argc, char **argv)
     signal(SIGINT, HandleSignal);
 
     sServer.reset(new otbr::Web::WebServer());
+    sServer->SetRestApiInfo(restListenAddr, restListenPort);
     if (sServer->StartWebServer(interfaceName, httpListenAddr, port) != OTBR_ERROR_NONE)
     {
         ret = -1;
diff --git a/src/web/web-service/frontend/res/js/app.js b/src/web/web-service/frontend/res/js/app.js
@@ -439,7 +439,19 @@
         };
 
         $scope.restServerPort = '8081';
-        $scope.ipAddr = window.location.hostname + ':' + $scope.restServerPort;
+        var formatRestAddr = function(host, port) {
+            return (host.indexOf(':') > -1) ? '[' + host + ']:' + port : host + ':' + port;
+        };
+        $scope.ipAddr = formatRestAddr(window.location.hostname, $scope.restServerPort);
+
+        $http.get('get_rest_api_info').then(function(response) {
+            if (response.data.error == 0) {
+                $scope.restServerPort = response.data.port;
+                var host = response.data.host;
+                var targetHost = (host && host !== '127.0.0.1' && host !== 'localhost' && host !== '0.0.0.0' && host !== '::1' && host !== '::') ? host : window.location.hostname;
+                $scope.ipAddr = formatRestAddr(targetHost, $scope.restServerPort);
+            }
+        });
 
         // Basic information line
         $scope.basicInfo = {
diff --git a/src/web/web-service/web_server.cpp b/src/web/web-service/web_server.cpp
@@ -36,6 +36,7 @@
 #include "web/web-service/web_server.hpp"
 
 #include <errno.h>
+#include <json/json.h>
 #include <string.h>
 
 #include "common/code_utils.hpp"
@@ -50,31 +51,49 @@
 #define OT_GET_QRCODE_PATH "^/get_qrcode$"
 #define OT_SET_NETWORK_PATH "^/settings$"
 #define OT_COMMISSIONER_START_PATH "^/commission$"
+#define OT_GET_REST_API_INFO_PATH "^/get_rest_api_info$"
 #define OT_REQUEST_METHOD_GET "GET"
 #define OT_REQUEST_METHOD_POST "POST"
 #define OT_RESPONSE_SUCCESS_STATUS "HTTP/1.1 200 OK\r\n"
 #define OT_RESPONSE_HEADER_LENGTH "Content-Length: "
 #define OT_RESPONSE_HEADER_CSS_TYPE "\r\nContent-Type: text/css"
 #define OT_RESPONSE_HEADER_TEXT_HTML_TYPE "\r\nContent-Type: text/html; charset=utf-8"
-#define OT_RESPONSE_HEADER_TYPE "Content-Type: application/json\r\n charset=utf-8"
+#define OT_RESPONSE_HEADER_TYPE "application/json; charset=utf-8"
 #define OT_RESPONSE_PLACEHOLD "\r\n\r\n"
 #define OT_RESPONSE_FAILURE_STATUS "HTTP/1.1 400 Bad Request\r\n"
 #define OT_BUFFER_SIZE 1024
 
+static const char kDefaultRestListenAddr[] = "127.0.0.1";
+static const char kDefaultRestListenPort[] = "8081";
+
 namespace otbr {
 namespace Web {
 
 using httplib::Request;
 using httplib::Response;
 
 WebServer::WebServer(void)
+    : mRestListenAddr(kDefaultRestListenAddr)
+    , mRestListenPort(kDefaultRestListenPort)
 {
 }
 
 WebServer::~WebServer(void)
 {
 }
 
+void WebServer::SetRestApiInfo(const char *aRestListenAddr, const char *aRestListenPort)
+{
+    if (aRestListenAddr != nullptr)
+    {
+        mRestListenAddr = aRestListenAddr;
+    }
+    if (aRestListenPort != nullptr)
+    {
+        mRestListenPort = aRestListenPort;
+    }
+}
+
 void WebServer::Init()
 {
     std::string networkName, extPanId;
@@ -97,6 +116,7 @@ otbrError WebServer::StartWebServer(const char *aIfName, const char *aListenAddr
     ResponseGetStatus();
     ResponseGetAvailableNetwork();
     ResponseCommission();
+    ResponseGetRestApiInfo();
     mServer.set_mount_point("/", WEB_FILE_PATH);
 
     if (!mServer.listen(aListenAddr, aPort))
@@ -284,5 +304,22 @@ std::string WebServer::HandleCommission(const std::string &aCommissionRequest)
     return mWpanService.HandleCommission(aCommissionRequest);
 }
 
+void WebServer::ResponseGetRestApiInfo(void)
+{
+    mServer.Get(OT_GET_REST_API_INFO_PATH, [this](const Request &aRequest, Response &aResponse) {
+        OTBR_UNUSED_VARIABLE(aRequest);
+        Json::Value               root;
+        Json::StreamWriterBuilder writerBuilder;
+        std::string               response;
+
+        root["error"] = OTBR_ERROR_NONE;
+        root["port"]  = mRestListenPort;
+        root["host"]  = mRestListenAddr;
+
+        response = Json::writeString(writerBuilder, root);
+        aResponse.set_content(response, OT_RESPONSE_HEADER_TYPE);
+    });
+}
+
 } // namespace Web
 } // namespace otbr
diff --git a/src/web/web-service/web_server.hpp b/src/web/web-service/web_server.hpp
@@ -79,6 +79,14 @@ class WebServer
      */
     void StopWebServer(void);
 
+    /**
+     * This method sets the REST API listen address and port.
+     *
+     * @param[in] aRestListenAddr  The pointer to the REST API listen address.
+     * @param[in] aRestListenPort  The pointer to the REST API listen port.
+     */
+    void SetRestApiInfo(const char *aRestListenAddr, const char *aRestListenPort);
+
 private:
     typedef std::string (*HttpRequestCallback)(const std::string &aRequest, void *aUserData);
     static std::string HandleJoinNetworkRequest(const std::string &aJoinRequest, void *aUserData);
@@ -110,11 +118,14 @@ class WebServer
     void ResponseGetAvailableNetwork(void);
     void DefaultHttpResponse(void);
     void ResponseCommission(void);
+    void ResponseGetRestApiInfo(void);
 
     void Init(void);
 
     httplib::Server        mServer;
     otbr::Web::WpanService mWpanService;
+    std::string            mRestListenAddr;
+    std::string            mRestListenPort;
 };
 
 } // namespace Web
diff --git a/tests/scripts/expect/dind_web.exp b/tests/scripts/expect/dind_web.exp
@@ -29,39 +29,55 @@
 
 source "tests/scripts/expect/_common.exp"
 
-proc start_otbr_docker_web {name sim_app sim_id pty1 pty2} {
+proc start_otbr_docker_web {name sim_app sim_id pty1 pty2 {rest_addr ""} {rest_port ""}} {
     # Start the container using its native /init entrypoint (s6-overlay) and custom environment variables
-    exec docker run -d \
-        --name $name \
-        --network infrastructure-link \
-        --cap-add=NET_ADMIN \
-        --privileged \
-        --add-host=host.docker.internal:host-gateway \
-        --sysctl net.ipv6.conf.all.disable_ipv6=0 \
-        --sysctl net.ipv4.conf.all.forwarding=1 \
-        --sysctl net.ipv4.conf.default.forwarding=1 \
-        --sysctl net.ipv6.conf.all.forwarding=1 \
-        --sysctl net.ipv6.conf.default.forwarding=1 \
-        -v $pty2:/dev/ttyUSB0 \
-        -e OT_RCP_DEVICE=spinel+hdlc+uart:///dev/ttyUSB0 \
-        -e OT_INFRA_IF=eth0 \
-        -e OT_THREAD_IF=wpan0 \
-        -e OT_WEB_LISTEN_ADDR=0.0.0.0 \
-        -p 8080:8080 \
-        $::env(EXP_OTBR_DOCKER_IMAGE)
-    sleep 2
+    set docker_opts [list \
+        "docker" "run" "-d" \
+        "--name" $name \
+        "--network" "infrastructure-link" \
+        "--cap-add=NET_ADMIN" \
+        "--privileged" \
+        "--add-host=host.docker.internal:host-gateway" \
+        "--sysctl" "net.ipv6.conf.all.disable_ipv6=0" \
+        "--sysctl" "net.ipv4.conf.all.forwarding=1" \
+        "--sysctl" "net.ipv4.conf.default.forwarding=1" \
+        "--sysctl" "net.ipv6.conf.all.forwarding=1" \
+        "--sysctl" "net.ipv6.conf.default.forwarding=1" \
+        "-v" "$pty2:/dev/ttyUSB0" \
+        "-e" "OT_RCP_DEVICE=spinel+hdlc+uart:///dev/ttyUSB0" \
+        "-e" "OT_INFRA_IF=eth0" \
+        "-e" "OT_THREAD_IF=wpan0" \
+        "-e" "OT_WEB_LISTEN_ADDR=0.0.0.0" \
+        "-p" "8080:8080" \
+    ]
+
+    if {$rest_addr != ""} {
+        lappend docker_opts "-e" "OT_REST_LISTEN_ADDR=$rest_addr"
+    }
+    if {$rest_port != ""} {
+        lappend docker_opts "-e" "OT_REST_LISTEN_PORT=$rest_port"
+        lappend docker_opts "-p" "$rest_port:$rest_port"
+    }
+
+    lappend docker_opts $::env(EXP_OTBR_DOCKER_IMAGE)
 
-    # Now start the simulated RCP binary on the host in a dedicated script restart loop and track its PID
-    exec bash -c "echo 'while true; do \"\$1\" \"\$2\" <\"\$3\" >\"\$3\"; sleep 1; done' > /tmp/ot_rcp_web_loop.sh"
-    exec bash -c "bash /tmp/ot_rcp_web_loop.sh \"$sim_app\" \"$sim_id\" \"$pty1\" </dev/null >/dev/null 2>&1 & echo \$! > /tmp/ot_rcp_web_loop.pid"
-    sleep 5
+    eval exec $docker_opts
+    sleep 2
 }
 
 set ptys [create_socat 1]
 set pty1 [lindex $ptys 0]
 set pty2 [lindex $ptys 1]
 set container "otbr-test-container-web"
 
+# Start the simulated RCP binary on the host in a dedicated script restart loop keeping PTY open
+exec bash -c "exec 3<>$pty1; while true; do \"$::env(EXP_OT_RCP_PATH)\" 2 <&3 >&3; sleep 1; done </dev/null >/tmp/ot_rcp_web.log 2>&1 & echo \$! > /tmp/ot_rcp_web_loop.pid"
+sleep 5
+
+# ==========================================
+# SCENARIO 1: Verification with Default Values
+# ==========================================
+send_user -- "--- SCENARIO 1: Testing Web UI and REST API with Default Values ---\n"
 start_otbr_docker_web $container $::env(EXP_OT_RCP_PATH) 2 $pty1 $pty2
 
 # Wait for otbr-agent to create the domain socket
@@ -74,7 +90,53 @@ for {set i 0} {$i < 10} {incr i} {
     sleep 2
 }
 if {!$socket_ready} {
-    send_user "Error: ot-ctl failed to communicate with otbr-agent\n"; exit 1
+    send_user "Error: ot-ctl failed to communicate with otbr-agent in Scenario 1\n"; exit 1
+}
+
+# 1. Verify get_rest_api_info returns default values
+send_user "Testing Web UI get_rest_api_info for defaults (127.0.0.1:8081)...\n"
+set rest_info [exec curl -s http://127.0.0.1:8080/get_rest_api_info]
+send_user "get_rest_api_info response: $rest_info\n"
+if {[string first "8081" $rest_info] == -1 || [string first "127.0.0.1" $rest_info] == -1} {
+    send_user "Error: Default REST API port/address not found in get_rest_api_info response\n"
+    exit 1
+}
+send_user "Scenario 1 get_rest_api_info verified successfully!\n"
+
+send_user "Scenario 1 default REST API verified successfully!\n"
+
+# Clean up Scenario 1 container and PTYs
+exec docker stop $container
+exec docker rm $container
+catch {exec bash -c "kill \$(cat /tmp/ot_rcp_web_loop.pid) 2>/dev/null"}
+dispose_all
+sleep 2
+
+# Re-create socat PTYs and RCP loop for Scenario 2
+set ptys [create_socat 1]
+set pty1 [lindex $ptys 0]
+set pty2 [lindex $ptys 1]
+
+exec bash -c "exec 3<>$pty1; while true; do \"$::env(EXP_OT_RCP_PATH)\" 2 <&3 >&3; sleep 1; done </dev/null >/tmp/ot_rcp_web.log 2>&1 & echo \$! > /tmp/ot_rcp_web_loop.pid"
+sleep 5
+
+# ==========================================
+# SCENARIO 2: Verification with Custom Values
+# ==========================================
+send_user -- "--- SCENARIO 2: Testing Web UI and REST API with Custom Values (0.0.0.0:9090) ---\n"
+start_otbr_docker_web $container $::env(EXP_OT_RCP_PATH) 2 $pty1 $pty2 "0.0.0.0" "9090"
+
+# Wait for otbr-agent to create the domain socket
+set socket_ready false
+for {set i 0} {$i < 10} {incr i} {
+    if {![catch {exec docker exec -i $container ot-ctl state}]} {
+        set socket_ready true
+        break
+    }
+    sleep 2
+}
+if {!$socket_ready} {
+    send_user "Error: ot-ctl failed to communicate with otbr-agent in Scenario 2\n"; exit 1
 }
 
 # Stop Thread and down interface initially so we can form network via Web UI
@@ -93,7 +155,7 @@ for {set i 0} {$i < 15} {incr i} {
     sleep 2
 }
 if {!$web_ready} {
-    send_user "Error: Web UI index.html validation failed\n"
+    send_user "Error: Web UI index.html validation failed in Scenario 2\n"
     exit 1
 }
 send_user "Web UI index.html validated successfully!\n"
@@ -115,6 +177,26 @@ if {[string first "success" $result] == -1} {
 }
 send_user "Web UI form_network validated successfully!\n"
 
+# 1. Verify get_rest_api_info returns custom values
+send_user "Testing Web UI get_rest_api_info for custom port 9090 and address 0.0.0.0...\n"
+set rest_info [exec curl -s http://127.0.0.1:8080/get_rest_api_info]
+send_user "get_rest_api_info response: $rest_info\n"
+if {[string first "9090" $rest_info] == -1 || [string first "0.0.0.0" $rest_info] == -1} {
+    send_user "Error: Custom REST API port 9090 or address 0.0.0.0 not found in get_rest_api_info response\n"
+    exit 1
+}
+send_user "Scenario 2 get_rest_api_info verified successfully!\n"
+
+# 2. Verify REST API directly from host on custom port 9090
+send_user "Testing REST API response from host on custom port 9090...\n"
+set rest_node [exec curl -s http://127.0.0.1:9090/api/node]
+send_user "api/node response: $rest_node\n"
+if {[string first "networkName" $rest_node] == -1} {
+    send_user "Error: REST API on custom port 9090 failed to respond correctly from host\n"
+    exit 1
+}
+send_user "Scenario 2 custom REST API responsiveness verified successfully!\n"
+
 catch {exec bash -c "kill \$(cat /tmp/ot_rcp_web_loop.pid) 2>/dev/null"}
 
 exec docker stop $container
