Using "Brimcap YAML Config File" causes stack trace and breaks Settings

[philrz]

Repro is with Zui commit 45bfd7c.

A community user emailed [email protected] with this problem:

I installed Zui a few days ago and wasn't aware that it was pre-configured with Suricata rules. I tried to set it up with a rules file, using the option in settings to load a YAML file. However, after loading the rules file, I encountered an error when opening the settings. I attempted to resolve the issue by reinstalling Zui, but the error persists. I also tried renaming the rules file to prevent it from loading, but the error persists despite these efforts.

Based on this description, it sounds like the file they were trying to load was not of the specific structure of what's described in the docs but rather a file of actual Suricata rules or some Suricata YAML config file that points at rules. As shown in the video below, if I drag such a file into the app, now each time I try to go into Settings I get a stack dump like the user reported:

Error: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
    at HTMLInputElement.set [as value] (file:///_next/static/chunks/framework-d2a24e5002b8cad4.js:9:7721)
    at et (file:///_next/static/chunks/framework-d2a24e5002b8cad4.js:9:9350)
    at file:///_next/static/chunks/framework-d2a24e5002b8cad4.js:9:99982
    at oS (file:///_next/static/chunks/framework-d2a24e5002b8cad4.js:9:103514)
    at ow (file:///_next/static/chunks/framework-d2a24e5002b8cad4.js:9:96624)
    at file:///_next/static/chunks/framework-d2a24e5002b8cad4.js:9:96431
    at ok (file:///_next/static/chunks/framework-d2a24e5002b8cad4.js:9:96438)
    at os (file:///_next/static/chunks/framework-d2a24e5002b8cad4.js:9:93209)
    at oi (file:///_next/static/chunks/framework-d2a24e5002b8cad4.js:9:91779)
    at E (file:///_next/static/chunks/framework-d2a24e5002b8cad4.js:33:1373)

Repro.mp4

It seems we could stand to increase the robustness here such that if we don't see valid YAML or it's YAML but not of the expected structure we just surface an error saying it can't be used.

[philrz]

It turns out this one is worse than I thought. I was making some improvements to the Custom Brimcap Config article and was re-testing the steps. I got to the part where I pointed Brimcap YAML Config File in Settings at the zeek-suricata.yml file referenced in the article (which is valid YAML). With a fresh installation of GA Zui v1.7.0 as shown in the video below, all it took to crash the app was to point the setting at the file once, then go back into Settings again.

Repro.mp4

Much the like the experience reported by the previous user, once this error occurs, the user can't get back into Settings without doing some careful/guided surgery on the appState.json, so we should probably try to address this issue ASAP.

[philrz]

Verified in Zui commit 66059b8.

As shown in the attached video, with the benefit of the redesigned Settings menu from #3044, now I can set the Brimcap YAML Config File, leave the Settings menu, and re-enter the Settings menu again without problems.

Verify.mp4

Thanks @jameskerr!