Dashboard: Refector dashboard to a dashboard framework library. (#1007)

Signed-off-by: Teo Koon Peng <teokoonpeng@gmail.com>

.github/demo-dashboard/Dockerfile

@@ -0,0 +1,44 @@
+FROM ubuntu:24.04
+ARG BRANCH=main
+
+### Build dashboard
+
+RUN apt update && apt install -y curl \
+  # required for api-server, which is a dev dependency of rmf-dashboard-framework
+  python3 python3-venv
+RUN curl -fsSL https://get.pnpm.io/install.sh | bash -
+  # shell runs in non-interactive mode, which does not source .bashrc so we need to set the PATH manually
+ENV PNPM_HOME /root/.local/share/pnpm
+ENV PATH "$PNPM_HOME:$PATH"
+# node-canvas does not have prebuilt binaries for latest lts (node 22)
+RUN pnpm env use --global 20
+
+# fetch sources
+RUN mkdir -p /ws \
+  && curl -L https://github.com/open-rmf/rmf-web/archive/$BRANCH.tar.gz -o rmf_web.tar.gz \
+  && tar zxf rmf_web.tar.gz -C /ws --strip-components=1
+
+# install deps
+RUN cd /ws \
+  && pnpm install --filter rmf-dashboard-framework...
+
+# replace configs and build
+RUN cd /ws/packages/rmf-dashboard-framework \
+  && pnpm build:example examples/demo
+
+### Set up bare minimum dashboard image
+
+FROM docker.io/ubuntu:24.04
+COPY --from=0 /ws/packages/rmf-dashboard-framework/examples/demo/dist /opt/dashboard
+
+RUN apt update && apt install -y curl
+
+RUN curl -fsSL https://get.pnpm.io/install.sh | bash -
+# shell runs in non-interactive mode, which does not source .bashrc so we need to set the PATH manually
+ENV PNPM_HOME /root/.local/share/pnpm
+ENV PATH "$PNPM_HOME:$PATH"
+RUN pnpm env use --global 20
+
+RUN pnpm add --global serve
+
+ENTRYPOINT ["serve", "-sn", "/opt/dashboard"]

.github/workflows/nightly.yml

@@ -45,13 +45,13 @@ jobs:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Build and push dashboard
+      - name: Build and push demo-dashboard
         uses: docker/build-push-action@v5
         with:
           push: true
           build-args: |
             BASE_IMAGE=ghcr.io/${{ github.repository }}/minimal-rmf:rolling
-          tags: ghcr.io/${{ github.repository }}/dashboard:latest
+          tags: ghcr.io/${{ github.repository }}/demo-dashboard:latest
           context: .github/dashboard
   build-api-server-image:
     needs: build-minimal-rmf-docker-images

.github/workflows/dashboard.yml → .github/workflows/rmf-dashboard-framework.yml

@@ -1,10 +1,9 @@
-name: dashboard
+name: rmf-dashboard-framework
 on:
   pull_request:
     paths:
-      - '.github/workflows/dashboard.yml'
-      - 'packages/dashboard/**'
-      - 'packages/react-components/**'
+      - '.github/workflows/rmf-dashboard-framework.yml'
+      - 'packages/rmf-dashboard-framework/**'
       - 'packages/rmf-models/**'
       - 'packages/api-client/**'
   push:
@@ -27,13 +26,13 @@ jobs:
     defaults:
       run:
         shell: bash
-        working-directory: packages/dashboard
+        working-directory: packages/rmf-dashboard-framework
     steps:
       - uses: actions/checkout@v4
       - name: bootstrap
         uses: ./.github/actions/bootstrap
         with:
-          package: rmf-dashboard
+          package: rmf-dashboard-framework
           skip-build: true
       - name: lint
         run: pnpm lint
@@ -42,4 +41,4 @@ jobs:
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v1
         with:
-          flags: dashboard
+          flags: rmf-dashboard-framework

README.md

@@ -1,4 +1,4 @@
-[![Nightly](https://github.com/open-rmf/rmf-web/actions/workflows/nightly.yml/badge.svg)](https://github.com/open-rmf/rmf-web/actions/workflows/nightly.yml) [![Dashboard End-to-End](https://github.com/open-rmf/rmf-web/actions/workflows/dashboard-e2e.yml/badge.svg)](https://github.com/open-rmf/rmf-web/actions/workflows/dashboard-e2e.yml) [![react-components](https://github.com/open-rmf/rmf-web/workflows/react-components/badge.svg)](https://github.com/open-rmf/rmf-web/actions?query=workflow%3Areact-components+branch%3Amain) [![dashboard](https://github.com/open-rmf/rmf-web/workflows/dashboard/badge.svg)](https://github.com/open-rmf/rmf-web/actions?query=workflow%3Adashboard+branch%3Amain) [![api-server](https://github.com/open-rmf/rmf-web/workflows/api-server/badge.svg)](https://github.com/open-rmf/rmf-web/actions?query=workflow%3Aapi-server+branch%3Amain) [![ros-translator](https://github.com/open-rmf/rmf-web/actions/workflows/ros-translator.yml/badge.svg)](https://github.com/open-rmf/rmf-web/actions/workflows/ros-translator.yml) [![api-client](https://github.com/open-rmf/rmf-web/actions/workflows/api-client.yml/badge.svg)](https://github.com/open-rmf/rmf-web/actions/workflows/api-client.yml) [![codecov](https://codecov.io/gh/open-rmf/rmf-web/branch/main/graph/badge.svg)](https://codecov.io/gh/open-rmf/rmf-web)
+[![Nightly](https://github.com/open-rmf/rmf-web/actions/workflows/nightly.yml/badge.svg)](https://github.com/open-rmf/rmf-web/actions/workflows/nightly.yml) [![Dashboard End-to-End](https://github.com/open-rmf/rmf-web/actions/workflows/dashboard-e2e.yml/badge.svg)](https://github.com/open-rmf/rmf-web/actions/workflows/dashboard-e2e.yml) [![rmf-dashboard-framework](https://github.com/open-rmf/rmf-web/actions/workflows/rmf-dashboard-framework.yml/badge.svg)](https://github.com/open-rmf/rmf-web/actions/workflows/rmf-dashboard-framework.yml) [![api-server](https://github.com/open-rmf/rmf-web/workflows/api-server/badge.svg)](https://github.com/open-rmf/rmf-web/actions?query=workflow%3Aapi-server+branch%3Amain) [![ros-translator](https://github.com/open-rmf/rmf-web/actions/workflows/ros-translator.yml/badge.svg)](https://github.com/open-rmf/rmf-web/actions/workflows/ros-translator.yml) [![api-client](https://github.com/open-rmf/rmf-web/actions/workflows/api-client.yml/badge.svg)](https://github.com/open-rmf/rmf-web/actions/workflows/api-client.yml) [![codecov](https://codecov.io/gh/open-rmf/rmf-web/branch/main/graph/badge.svg)](https://codecov.io/gh/open-rmf/rmf-web)
 
 # RMF Web
 
@@ -10,7 +10,7 @@ Open-RMF Web is a collection of packages that provide a web-based interface for
 - [Getting started from source](#getting-started-from-source)
 - [API server](packages/api-server)
 - [API client](packages/api-client)
-- [Dashboard](packages/dashboard)
+- [RMF Dashboard Framework](packages/rmf-dashboard-framework)
 - [Configuration](#configuration)
 - [Contribution guide](#contribution-guide)
 - [Roadmap](https://github.com/orgs/open-rmf/projects/10)
@@ -19,18 +19,18 @@ Open-RMF Web is a collection of packages that provide a web-based interface for
 
 These docker images are useful when trying out [`rmf_demos`](https://github.com/open-rmf/rmf_demos).
 
-Start the dashboard with host network access, `RMF_SERVER_URL` and `TRAJECTORY_SERVER_URL` configured accordingly. The dashboard will then accessible on `localhost:3000` by default.
+Start the demo dashboard with host network access, `RMF_SERVER_URL` and `TRAJECTORY_SERVER_URL` configured accordingly. The demo dashboard will then accessible on `localhost:3000` by default.
 
 ```bash
 docker run \
   --network host -it --rm \
   -e RMF_SERVER_URL=http://localhost:8000 \
   -e TRAJECTORY_SERVER_URL=ws://localhost:8006 \
-  ghcr.io/open-rmf/rmf-web/dashboard:latest
+  ghcr.io/open-rmf/rmf-web/demo-dashboard:latest
 ```
 
 > **Note**
-> The values provided for `RMF_SERVER_URL` and `TRAJECTORY_SERVER_URL` are default values when running the API server and `rmf_demos`, and can be modified to suit different setups.
+> The demo dashboard assumes that the api server is hosted locally on the default ports.
 
 Start the API server with host network access, and set up the correct `ROS_DOMAIN_ID` and ROS 2 RMW implementation that will be used in the rest of the Open-RMF system. The API server will use the default port at `localhost:8000`.
 
@@ -51,7 +51,7 @@ docker run \
 
 ### Prerequisites
 
-We currently support [Ubuntu 24.04](https://releases.ubuntu.com/noble/), [ROS 2 Jazzy](https://docs.ros.org/en/jazzy/index.html) and Open-RMF's [22.09](https://github.com/open-rmf/rmf/releases/tag/22.09) release. Other distributions may work as well, but is not guaranteed.
+We currently support [Ubuntu 24.04](https://releases.ubuntu.com/noble/), [ROS 2 Jazzy](https://docs.ros.org/en/jazzy/index.html) and the latest Open-RMF release. Other distributions may work as well, but is not guaranteed.
 
 Install pnpm and nodejs
 
@@ -91,7 +91,7 @@ pnpm install -w --filter <package>...
 
 ### Launching for development
 
-Source Open-RMF and launch the dashboard in development mode,
+Source Open-RMF and launch the demo dashboard in development mode,
 
 ```bash
 # For binary installation
@@ -100,11 +100,11 @@ source /opt/ros/jazzy/setup.bash
 # For source build
 source /path/to/workspace/install/setup.bash
 
-cd packages/dashboard
+cd packages/rmf-dashboard-framework
 pnpm start
 ```
 
-This starts up the API server (by default at port 8000) which sets up endpoints to communicate with an Open-RMF deployment, as well as begin compilation of the dashboard. Once completed, it can be viewed at [localhost:3000](http://localhost:3000).
+This starts up the API server (by default at port 8000) which sets up endpoints to communicate with an Open-RMF deployment, as well as begin compilation of the demo dashboard. Once completed, it can be viewed at [localhost:5173](http://localhost:5173).
 
 If presented with a login screen, use `user=admin password=admin`.
 
@@ -120,41 +120,19 @@ When developing individual components, it may be useful to start the dashboard a
 
 ```bash
 # Start the dashboard in dev, this monitors for changes in the dashboard package and performs rebuilds. A browser refresh is required after all automated builds.
-cd packages/dashboard
-pnpm run start:react
+cd packages/rmf-dashboard-framework
+pnpm start:example examples/demo
 
 # Start the API server, this will need to be restarted for any changes to be reflected
 cd packages/api-server
-pnpm run start
-```
-
-### Optimized build
-
-The dashboard can also be built statically for better performance.
-
-```bash
-cd packages/dashboard
-pnpm run build
-
-# Once completed
-npm install -g serve
-serve -s build
-```
-
-This only serves the frontend, the API server can be started manually to work with an Open-RMF deployment on another terminal instance,
-
-```bash
-# source Open-RMF before proceeding
-cd packages/api-server
-pnpm run start
+pnpm start
 ```
 
 # Contribution guide
 
 - For general contribution guidelines, see [CONTRIBUTING](CONTRIBUTING.md).
 - Follow [typescript guidelines](https://basarat.gitbook.io/typescript/styleguide).
-- When introducing a new feature or component in [`react-components`](packages/react-components), write tests and stories.
-- When introducing a new feature in [`dashboard`](packages/dashboard), write tests as well as [e2e](packages/dashboard-e2e) test whenever possible.
+- When introducing a new feature in [`rmf-dashboard-framework`](packages/rmf-dashboard-framework), write tests as well as [e2e](packages/dashboard-e2e) test whenever possible.
 - When introducing API changes with [`api-server`](packages/api-server),
   - If the new changes are to be used externally (outside of the web packages, with other Open-RMF packages for example), make changes to [`rmf_api_msgs`](https://github.com/open-rmf/rmf_api_msgs), before generating the required models using [this script](packages/api-server/generate-models.sh) with modified commit hashes.
   - Don't forget to update the API client with the newly added changes with [these instructions](packages/api-client/README.md/#generating-rest-api-client).
@@ -165,8 +143,8 @@ pnpm run start
 
 # Configuration
 
-- See the [rmf-dashboard](packages/dashboard/README.md#configuration) docs for the frontend build-time and run-time configurations.
 - See the [api-server](packages/api-server/README.md#configuration) docs for API server run-time configurations.
+- [rmf-dashboard-framework](packages/api-server/README.md) allows you to easily build a dashboard.
 
 # Troubleshooting
 

packages/api-client/package.json

@@ -6,7 +6,7 @@
   "browser": "lib/index.ts",
   "scripts": {
     "build": "tsc --build",
-    "prepack": "pnpm run clean && pnpm run --filter {.}... build && pnpm run lint",
+    "prepack": "pnpm run --filter {.}... build && pnpm run lint",
     "lint": "eslint --max-warnings 0 lib",
     "test": "vitest"
   },

packages/dashboard-e2e/package.json

@@ -20,7 +20,6 @@
     "@wdio/mocha-framework": "7.11.1",
     "@wdio/spec-reporter": "7.10.1",
     "concurrently": "^8.2.2",
-    "rmf-dashboard": "workspace:*",
     "serve": "^11.3.2",
     "ts-node": "^9.1.1",
     "typescript": "~5.5.4"