initial config ui

[jsimonetti]

No description provided.

[jsimonetti]

@corneel27
With the documentation now added, a first test of the gui can be done.
I tried documenting the development process as much as possible, to help you with the initial testing.

In production, everything will be build in CI and no developer actions are required.
The build is entirely based on the pydantic config models and any change in the model will be reflected in the ui after build.

[corneel27]

I followed your instructions in the developerguide.
All went well until I first try to connect to: http://localhost:5173/config/
Then I get a webpage with this message:
Error loading configuration: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
Where must I look?

In the terminal I got these messages:

(venv3.13) ~/day-ahead-6/dao/frontend git:[config_gui]
pnpm dev

> day-ahead-config-ui@0.1.0 dev /home/cees/day-ahead-6/dao/frontend
> vite


  VITE v7.3.1  ready in 163 ms

  ➜  Local:   http://localhost:5173/config/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
09:14:32 [vite] http proxy error: /api/v2/config
Error: connect ECONNREFUSED 127.0.0.1:5000
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1637:16)
09:14:32 [vite] http proxy error: /api/v2/secrets
Error: connect ECONNREFUSED 127.0.0.1:5000
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1637:16)
09:14:32 [vite] http proxy error: /api/v2/config/uischema
Error: connect ECONNREFUSED 127.0.0.1:5000
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1637:16)
09:14:32 [vite] http proxy error: /api/v2/config/uischema
Error: connect ECONNREFUSED 127.0.0.1:5000
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1637:16) (x2)
09:14:32 [vite] http proxy error: /api/v2/config/schema
Error: connect ECONNREFUSED 127.0.0.1:5000
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1637:16)
09:14:32 [vite] http proxy error: /api/v2/config/schema
Error: connect ECONNREFUSED 127.0.0.1:5000
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1637:16) (x2)
09:14:32 [vite] http proxy error: /api/v2/config
Error: connect ECONNREFUSED 127.0.0.1:5000
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1637:16)
09:14:32 [vite] http proxy error: /api/v2/secrets
Error: connect ECONNREFUSED 127.0.0.1:5000
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1637:16)

[corneel27]

Sidenote.
It was not so good readable:

[corneel27]

Another question:
Shouldn't we bring the current rc5 (after testing and fixing) bring to a production/stable version before we do this config-ui-stuff?

[jsimonetti]

I followed your instructions in the developerguide. All went well until I first try to connect to: http://localhost:5173/config/ Then I get a webpage with this message: Error loading configuration: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data Where must I look?
Error: connect ECONNREFUSED 127.0.0.1:5000
at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1637:16)

It looks like the flask development backend (API) is not running. You start this in a different terminal. (python da_server.py)

Another question:
Shouldn't we bring the current rc5 (after testing and fixing) bring to a production/stable version before we do this config-ui-stuff?

Yes, i agree. But I think the current testing and fixing should be close to an end and should not interfere with this PR, except some model changes, but I can easily rebase.

[corneel27]

Yes, that did the trick.
Now it's working!
When the guide is also for other developers we should pay attention at this.

[corneel27]

I fast overlooked the new gui.
A first impression: looks great, thank you!

A few details and questions:

1. The menu-"tabs" are ordered on alphabet, can they have an other ordering (not essential)?
2. The config-items of the boiler and the heating (=heatpump) are now mixed, is it possible to separate them in two devices?
3. Shall I deliver and implement a list of possible matplotlib-themes, so you users can make a choice?
4. Can this separate website become part of the DAO dashboard and activated when users click on "Config"?

[jsimonetti]

I fast overlooked the new gui. A first impression: looks great, thank you!

A few details and questions:

1. The menu-"tabs" are ordered on alphabet, can they have an other ordering (not essential)?

In theory, yes.

2. The config-items of the boiler and the heating (=heatpump) are now mixed, is it possible to separate them in two devices?

Changing the specific models and regenerating the uischema should suffice for this.

3. Shall I deliver and implement a list of possible matplotlib-themes, so you users can make a choice?

The themes are dictated by MaterialUI available themes (jsonforms uses materialui for all form controls). I have not implemented any external theme support (for now).

4. Can this separate website become part of the DAO dashboard and activated when users click on "Config"?

Yes. For now I suggest leaving as seperate url during testing phases. The old Config button remains working and users have a choice. We can slowly move to a new ui.

[jsimonetti]

rebased to current main.

We can continue testing.

[corneel27]

I merged some PR;s into main and now I am going to publish 2026.4.3.rc1, I hope with this release the main problems are over.
If all goes well, I will publish 2026.4.3 tomorrow evening or wednesday.

In the meantime I shall test this PR.

[corneel27]

I tried to test, but should I still use the extra webpage?
Isn't now the time come to integrate the separate webpage in the dashboard?

[jsimonetti]

Yes, the seperate webpage is still there. I am not sure if we should change over big bang. But that is up to you. For the foreseeable future i would advise both methods to be useable, just as fallback.

[corneel27]

My proposal is:
I make an extra button besides "Config" (or better before) called "Config GUI", so both methods are usable.
You give me the url or python-function which can be called when the users push "ConfigUI" and I put it in the routes.py
You (or me) put tho whole npm-stuff and extra packages in the Dockerfile and/or run.sh
We first give it a try for us two.
When we are satisfied I make a rc.

How sounds that?

[jsimonetti]

Sounds like a plan.
I am short on time this week.
Can you make a start with the changes?

[corneel27]

As I told you: from next Friday I am on Holiday for a week.
Until then I can work on this project (in my spare time ;) )
I will start with the changes and keep you posted.

[corneel27]

I have made a begin.
Now I have a question:
Can all the "commands" in the developer_guide placed in the Dockerfile or are there commands in that guide which make use of the specific config-options of a user?
In that case they should be placed in run.sh.

[jsimonetti]

The commands for building the ui should (eventually) be done during a container build stage in Dockerfile

[jsimonetti]

I included the build in the dockerfile. I am on macos so cant check the action container build process.

Unfortunately I will not be able to help much with DAO for the coming months as a busy season is coming up for me. I will keep my eyes out for anything I can quickly assist with.

[corneel27]

Your changes on Dockerfile cross mine changes.
I will try to merge our changes.

I have found a way to test an "edge" version of our development (works only as an add-on/app) nor as a seperate container):

• add extra log/echo command's in the Dockerfile (if necessary)
• change the name and the slug in dao/config.yaml (add Edge and _edge), only in the test-branche (config_gui)
• comment the image line in config.yaml
• add a third DAO-repository to your "apps" in HA: https://github.com/corneel27/day-ahead/#config_gui
• build locally the test-app
• if started with success open a commandline in the test-app:
  docker exec -it addon_ff589f59_day_ahead_opt_edge bash
• check ff589f59, this can be different in your situation