Add custom React config panel via Module Federation#267
Open
msallin wants to merge 1 commit into
Open
Conversation
msallin
force-pushed
the
feat/config-panel
branch
3 times, most recently
from
June 3, 2026 10:19
15dc8cc to
ead81bb
Compare
msallin
force-pushed
the
feat/config-panel
branch
from
June 11, 2026 15:42
ead81bb to
dd245d0
Compare
Adds a signalk-plugin-configurator-style panel so the admin UI renders a purpose-built React form for derived-data instead of the schema-driven RJSF view. Same approach as signalk-to-nmea0183 PR SignalK#154 (Unicode glyphs for path status, inline SVG for action icons, no FontAwesome). The panel groups the 30+ calculators by category in collapsible cards with a search box, shows each calculator's required SignalK paths with live availability icons (✅ has data, ❓ value is null, ❌ not present), and renders per-calc extras inline — including a dedicated array-of- objects editor for cpa_tcpa notification zones and tankVolume calibration pairs. Top-level globals (default_ttl, engine/battery/tank/ air instance lists) live in their own card; ❗DEPRECATED calculators get a badge. The existing plugin.schema()/uiSchema() form remains untouched and serves as the fallback for older server versions that don't load federated panels. Build wiring mirrors the nmea0183 plugin: - `signalk-plugin-configurator` keyword on package.json - webpack.config.js bundles src/configpanel/PluginConfigurationPanel.tsx via ModuleFederationPlugin, sharing react/react-dom as singletons - tsconfig.build.json excludes the panel (compiled by webpack via ts-loader) - public/ added to the package's files list Replaces the docs/screenshots/1_placeholder.png placeholder (added in the webapp displayName/appIcon change) with four real config-panel screenshots, and points package.json `signalk.screenshots` at them. Screenshots regenerated against a sample-data SK server in Docker.
msallin
force-pushed
the
feat/config-panel
branch
from
June 27, 2026 12:48
dd245d0 to
8516f4e
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Mirrors the approach taken in SignalK/signalk-to-nmea0183 #154: adds a
signalk-plugin-configuratorkeyword and a webpack-built Module Federation panel so the admin UI renders a purpose-built React form for derived-data instead of the schema-driven RJSF view. The plainplugin.schema()form is left intact as the fallback for older SK server versions.What the panel does
/signalk/v1/api/vessels/self)cpa_tcpanotification zones andtankVolumecalibration pairs)default_ttl,engine/battery/tank/air_instances) live in their own card at the top❗DEPRECATEDcalculators get a badge so they stand outNo new runtime dependencies — Unicode for icons, inline SVG for the trash button (no FontAwesome).
Screenshots
Overview (empty config, groups collapsed):

Several calcs enabled across groups with live path status:

cpa_tcpasettings expanded showing the notification-zones array editor:Mobile (393 px):

Build wiring
keywordsaddssignalk-plugin-configuratorwebpack.config.jsbundlessrc/configpanel/PluginConfigurationPanel.tsxviaModuleFederationPlugin, sharingreact/react-domas singletonstsconfig.build.jsonexcludes the panel (it compiles via ts-loader inside webpack)package.jsonaddspublic/tofilesandbuild:configtoprepublishOnlyHow the panel discovers calcs
It fetches
/skServer/plugins, locatesderived-data, and walksschema.properties+uiSchema['ui:order']to build a flat catalog. A boolean property whose title ends with the[paths]suffix is treated as a calc toggle; everything else under the same group attaches to the previous calc as "extras". This keeps the plugin's existing schema as the source of truth — no new server-side endpoints, no changes toplugin.start()orupdateSchema().Testing
npm run typecheckcleannpm test— 316 passing (unchanged)npm run build:configproducespublic/remoteEntry.jsand chunks (~30 KiB total)cr.signalk.io/signalk/signalk-server:latestimage with--sample-nmea0183-data(the docker harness lives in the gitignoreddocker-test/folder)Out of scope
❎/👍/❌legend) — that surface is unchanged so users on older servers still get sensible RJSF output