Node-RED

[New Release] node-red-contrib-uibuilder - v3.1.3

Share Your Nodes
#1

UPDATE 2021-01-19: Please note that due to problems with npm, uibuilder no longer installs vue and bootstrap-vue for you. You need to install these yourself now as of v3.1.3.

#cd <userDir>
npm install vue@"2.*" bootstrap-vue@"2.*"

I will try to find a way to install these or at least prompt you from within Node-RED in some future update.

npm is hopelessly broken in this respect and there doesn't appear to be any safe way to call npm install from inside an npm install preinstall or postinstall script.

Hi all, I am pleased to announce another release of uibuilder. This time it is both a feature release as well as a bug fix.

If you make use of the file editor in uibuilder, you will certainly enjoy this release.

You can now manage any folders and files within your instances root folder. Create and delete folders and files to any depth. You get better notifications about what happened as well.

There is a new per-instance information page that should be a lot easier to read than the existing details page. Great for working out all those URL's and folder locations or other issues.

You now also have direct access to the technical docs. These have long been part of the npm package but they are now exposed as a new web app.

Of course, more bugs have been squished and there has been another round of code rationalisation. Including starting to move to a better API structure that is more consistent with fewer endpoints. That part is a work in progress.

Lots more to do of course but the release of the v3 branch made it possible to push forward much faster (if time permits!). Check out the To Do list in the WIKI along with project, milestone and issue pages if you want to see where things are headed.

Changelog

Fixed

  • Issue #106 Editor: When editing files, a filename with a leading dot did not set the filetype correctly.

  • Issue #105 Editor: Attempting to edit a hidden file (with a leading dot) resulted in an error and white screen.

New

  • Issue #108 You can now view the uibuilder package docs (the ones in this package) by going to the url <node-red-editor-url>/uibuilder/techdocs.

    The package docs use Docsify for formatting. The docs include a search feature as well.

    The docs are linked to from both the uibuilder help information panel and from a new button in the configuration panel.

  • The config editor has a new button Instance Details. clicking the button will show a new page in a new tab. The page contains debug details of the exact settings for the uibuilder instance. This should help people better understand all of the settings including folders and urls.

Changed

Editor, "Edit Source Files" improvements:

  • ALL folders and files within the <uibRoot>/<url> folder can now be edited.

  • Soft- or Hard-linked folders and files can now be used. This lets you put your front-end resources wherever you like as long as you create a soft or hard link into the <uibRoot>/<url> folder.

  • Added better information toasts on file create/delete actions.

    Pop-up notifications are now given when you create/delete folders and files.

  • Made keyboard enter button do the default action in the create dialog windows.

  • Added more information to the create/delete dialog windows. (url, folder name, file name)

  • Issue #102 Relaxed the file-type checks when editing files. Allows for use of more ACE file-types and prepares the way for the introduction of the Monaco editor in Node-RED v2.

  • Issue #107 Allowed the selection of any folder or sub-folders in the file editor.

    The editor still constrains you to the folder for the instance but any folder within that root can be viewed. New sub-folders can be created and existing ones deleted.

  • Issue #109 Persist the selection of folder and file when editing.

    This means that closing and reopening the editor will return to the last edited file.

    Uses browser local storage and so does not work with Internet Explorer (which hasn't been supported by uibuilder since v3.0.0).

  • Improved display when no file is available to edit or if the file cannot be opened.

  • Started moving to new v3 admin API's that are more consistent with less overheads.

  • Changed "Edit Source Files" button to say "Edit Files". Recognising the additional capabilities.

  • Changed button link names in the configuration panel to clarify and accommodate the 2 extra buttons for the instance details and technical docs links.

uibuilder.js:

  • Started to simplify and rationalise API checks and reporting. Deprecated /uibfiles, /uibnewfile, /uibdeletefile API's, replaced with new v3 admin API /uibuilder/admin/:url. Simplifies the admin API's, makes them more consistent and reduces the number of URL's.
  • Added v3 admin API's to create new and delete files and folders
  • Added /uibuilder/instance/<url> admin API. Is created for each instance. Calling it will show a detailed information page for the given uibuilder instance.

Other

  • Updated dependencies
  • Installer: Improved the post-install console message (Post Install takes a while). Also forces VueJS to v2.x (not v3 as yet which will soon be the latest version because there are currently too many breaking changes).
3 Likes
#2

Just updated to 3.1.0

I use NodeRed 1.2.7 and NodeJS 14.15.4
On Windows 7 and 10, all seems to be OK.

But I have some issue on Amazon Linux EC2.
Some info :

  • uibuilder launch and work OK
  • Open/widget and Tech Dos is OK
  • uibuilder details and Instance Details go to new page with "Unauthorized"
  • same issue with NodeJS v12.20.1 and v14.15.4
  • if I click Edit Files I get this
    Uibuilder
    Uibuilder743Ă—315 13.7 KB
#3

Did you deploy the node instance before editing?

Also, can you check whether ~/.node-red/uibuilder exists?

Do you have a user login set up for your node-red Editor?

#4

an you check whether ~/.node-red/uibuilder exists?
Exists. If I click Open/widget, demo page is opening OK

Do you have a user login set up for your node-red Editor?
Yes, I have on Linux. I don`t have on Windows

#5

OK, then everything relates to the same issue.

uibuilder secures its admin endpoints with uibuilder.read or uibuilder.write permissions. You need to make sure that your Editor user ids either have these permissions explicitly or that they have '*' permissions (everything).

#6

In settings.js I have :

adminAuth: {
type: "credentials",
users: [{
username: "admin",
password: "xxxxxxx",
permissions: "*"
}]
},

#7

I think we've seen this before. I don't think that the permissions work as described in the docs.

Permissions of '*' should give all permissions but they clearly don't. However, they DO work if you set the default to that permission. Just not if you set it for a user.

Let me do some more experiments. I'll come back in a bit.

#8

Just for test, I remove adminAuth in settings.js and issue is "solved"

#9

Right, after further tests NONE OF THE PERMISSIONS WORK at user level.

So I am going to do an emergency release to remove the permissions.

Unfortunately, this means that it will not be possible to prevent someone who has admin access from making changes to files and folders.

I tried replacing my custom permissions with 'read' and 'write' then tried clean logins from various different users with different permissions and none of them worked.

This is supposed to work in a custom node:

RED.httpAdmin.get('/uibgetfile', RED.auth.needsPermission('read'), function(req,res) {
    // .....
})

But it doesn't.

That is correct but you don't want to do that on an Internet connected version.

I am just doing an emergency change, it will be live in 10 or 15 minutes. You will then be able to use users but there will be no differentiation between read and write permissions.

#10

You will then be able to use users but there will be no differentiation between read and write permissions

In my case it would be no problem. I only have one user (admin)

#11

OK v3.1.1 is live, please update so that you can use users with the Editor.

1 Like
#12

Thanks, issue solved

#13

A quick note that there appears to be something odd happening to the uibuilder install if you are using Windows. But only where Windows is using the cmd shell not if you use PowerShell.

If you are running Node-RED on Windows, you should, I think, change your default shell to PowerShell so that Node-RED will use it rather than cmd when it installs nodes from the palette manager.

I am still investigating what is going on but it appears to be some kind of issue with npm.

Fresh install of Node-RED and uibuilder on Windows 10 (latest) with Node.js v14.15.0 and npm v6.14.11

I think I might have found an issue but I've no idea what is causing it. If I install everything using PowerShell, it all works fine. If I install using the "Node.js command prompt", npm fails to install the uibuilder dependencies.

So not just the node.js command prompt but command prompt in general. Here are two lists of the userDir/node_modules folder - the first after the uibuilder install but before the post install. The second after the post install.

image
image2995Ă—910 232 KB

When I install uibuilder using PowerShell, this is the result (before and after again):

image
image2125Ă—377 21 KB

As you can see, a totally different result. In the PowerShell case, the rest of the dependencies are installed in userDir/node_modules/node-red-contrib-uibuilder/node_modules instead of in the parent node_modules and it all works.

#14

Just to say that the same problem happens when installing on Linux as well.

Installation bug · Issue #110 · TotallyInformation/node-red-contrib-uibuilder (github.com)

I am investigating the cause and will find a fix. Expect 3.1.2 along - hopefully soon.

#15

Please see the update in the first post. v3.1.3 has now been published. Fixes Issue #110

#16

(not read the whole thread apologies if this has been discussed)
What issues are you having with mom? Surely just a normal dependency will install the transient dependencies when your nose is installed?

#17

I think something got lost in translation from your last post :grinning_face_with_smiling_eyes:

The issue with npm is that when you use a pre-install script (or post-install) from your package.json that tries to use npm to install another package, the whole thing blows up badly. Either the thing you are trying to originally install isn't or the thing that the pre/post-install script is installing doesn't get installed.

So far, I have found no workable way to automatically install a 2nd package while installing the 1st while both are installed at the same level

Please to take a look at the pre-install script that is still there in uibuilder v3.1.3, you will see the code I was trying to run in a function that I put in just to stop it running.

Please let me know if you find any reliable way to do this. What I'm trying to achieve is for Vue and bootstrap-vue to be installed into the same level (your Node-RED userDir) as uibuilder at the time you install uibuilder.

#18

I am pretty good with npm so I feel relatively confident that we can sort this.
First off why is this done as an install script rather than just having them installed as transient dependencies so they get installed automatically?
Also what do you mean by installed at the same level? For a long time npm has flattened the dependency tree so that everything is at the same level (except for incompatible transient dependencies which are installed in a tree).
Lastly I would ask why do you care where these dependencies are installed? To resolve the location of a dependency I would use request.resolve("vue-or-whatever)` which will tell you where it is whatever structure npm has chosen.

I have no idea how this package works and have not used it so talk to me like I'm an idiot. I apologise if I'm asking obvious stupid questions but I have no background on why or what you're trying to do. :slight_smile:

#19

Cool!

Originally, they were installed as standard dependencies of uibuilder. However, not everyone wants to use Vue or bootstrap-vue. Unfortunately, when installed this way, uibuilder had no way of letting you uninstall them safely since they were built into the package.json file of uibuilder. So then I tried to move them to be peer dependencies. But in all honesty, they are not actually peer dependencies of uibuilder, they are dependencies of your userDir in Node-RED.

So the requirement is to be able to, while installing uibuilder, also install vue and bootstrap-vue in such a way that they end up in the package.json file of your userDir. That way, they can be uninstalled by someone with access to the Node-RED editor.

That is almost but not quite true. Try installing something from a local folder on Windows.

As explained, if you install them as dependencies of uibuilder, you can't safely uninstall them. They have to be dependencies of your userDir folder.

That is independent of whether npm flattens the structure or not. It is dependent on which package.json file they end up in.

Which also doesn't always work as expected as I found out to my cost when building the package manager feature in uibuilder. Resolve only works if the package defines a "main" script. Not all front-end libraries actually do that. So it is not safe to assume that you can actually resolve a package. There also used to be some problems with resolution when installing local folders as packages though they seem to be fixed now.

Not at all, I'd love to have someone else take a look at things. I am not a full-time developer so I may well have overlooked something obvious.

Just to recap the requirements:

  • uibuilder provides a default template when installed. That template uses Vue and bootstrap-vue. Those are front-end libraries, they are not needed by Node-RED. It is preferred therefore that installing uibuilder also installs those packages. This is less confusing for users without web development experience.
  • Vue and bootstrap-vue need to end up in the dependencies section of the ~/.node-red/package.json file so that, if they are not needed for a particular installation, they can be removed using uibuilder's built-in package manager (or from the command line of course).

Thanks for looking at this.

#20

For interest, this is the code that I use to give me a better chance at actually finding the folder for a package so that I can add that folder to a serveStatic function which makes it available to your front-end as ./uibuilder/vendor/.....

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy