Hi all, got a bit carried away this afternoon and started work on bringing editing of your front-end files into the Node-RED admin ui!
Once this feature is ready, you won't need to (but of course still can if you want to) get to the host OS's filing system in order to make changes to your uibuilder ui. Simply open the node's admin interface, select the file and update as needed using Node-RED's built-in ACE editor.
If you like living on the edge, you can give this a go by installing direct from the adminui-editor branch on GitHub.
Do note, however, that this is very much a 1st beta, you can't yet update the files, I've only got as far as being able to read them in and display them in an editor component.
Next I need to be able to take any updates and send back to the file.
I also need to read up on using the ACE editor in order to fix up some niggles.
If you are interested in seeing where I intend to go with this, please have a look at Issue 43 on GitHub. Also feel free to add comments either here or there about what you would like to see.
This was actually a lot easier than I expected - as always, many thanks to Nick, Dave and others for creating such a powerful and easy to use too.
Regards, Julian.
1 Like
Beta8 version is now on GitHub for anyone who wants to test it.
The edit and save functions are now working so you can actually edit files via the Node-RED admin UI!
Changelog:
v1.1.0-beta8
Please see Issue #43 For the design details for this release.
WARNING This version should certainly be considered beta quality. In particular, there are no parameter checks on the API calls so this version should never be exposed to potentially hostile environments (e.g. the Internet). Also, there are currently no checks to prevent you losing changes to edits if you close the admin window.
-
NEW The node properties window in the admin UI now provides an "Edit Source Files" button. If clicked, the main properties are hidden and a file editor is shown. You can currently select any existing file in the
src folder for the current instance and edit it. You can then save, reset or close the editor.
- It is still a little too easy to lose changes by loading a different file or closing the properties window, reloading the interface, etc. More work is needed on the UI to help prevent this.
- The delete button doesn't currently work.
-
NEW Add admin API's and start of admin property ui for editing the front-end files in Node-RED.
- File list API (get
/uiblistfiles ) gets all files in the instances src folder and populates a select drop-down. File list is rebuilt every time the properties admin ui window is opened. Requires user to have uibuilder.read permissions.
- File read API (get
/uibgetfile ) reads the content of a file. Restricted to the node instances src folder. Requires user to have uibuilder.read permissions.
- File write API (post
/uibputfile ) writes the updated content of a file. Restricted to the node instances src folder. Requires user to have uibuilder.write permissions.
-
NEW The node now tracks how many instances of uibuilder have been added to your flows. It tracks by ID and retains the url used. In a future release, this will be used to ensure that unique URL's are used.
-
NEW uibuilder index page (only prototype for now, not fully formed)
- Index page API (get
/uibindex ) lists all of the main URL's served by all uibuilder node instances in the flows. Requires user to have uibuilder.read permissions.
-
CHANGED Improved logging. Naming is more consistent, don't log to Node-RED log if Winston not used. Include instance url in Winston log line header for clarity. Increase Winston log file size. Logging also improved for debugging uibuilderfe.js.
-
DOCUMENTED The front-end code for jQuery seems to move about randomly! It is in one of two places, if you get an error with the default location (the
dist sub-path), remove dist/ from the url.
-
CHANGED
package.json 'pack' script changed to 'packfe' to avoid clash with npm's native pack script.
The flags have been rearranged to make things more compact. The "Edit Source Files" button has been added.
The list of files you can edit. Any text file in the front-end src folder can be edited.
A file being edited. The file type is set automatically but you can change it.
When you have edited the file, the close & delete buttons along with the file chooser and edit button are disabled until you either save or reset the file.
I think that's about it for the v1.1.0 release. If I get time, I'll add some validation on the parameters for the API's.
I've updated the design document (Issue 43) and bumped some of the more advanced features to v.1.2, I will move these back to the TODO page soon.
If you want anything else adding at this time - this is your last chance to shout for a little while.
1 Like
