feat: new check editor #1280
feat: new check editor #1280
Conversation
- dump code on to fresh `main` branch - add feature flag `synthetic-monitoring-check-editor` (`FeatureName.CheckEditor`) - wire up routes (edit/new) - create submit handler hook - create after save nav hook for checks - add new datasource method
- remove `console.log` (except one)
- add RegExp support for checking "known" log messages
Script size changes
Totals
|
- fix eslint import error
- handle navigation on error (wip)
- remove console.log
- Remove unused files - restructure/rename components
- add "goto error" functionallity - setup all checks/sections with error fields
- fix bug that would case app to explode if invalid checktype was supplied
- enable `<ConfirmLeavingPage />` - remove unused code - update README.md
- add feature concept
- fix feature concept panic render
- add secrets to right aside
- fix word-break on log `msg`
- `adhoc-check`: handle use of `expect` - move components to own files - handle submit and submitting better
- handle form errors for adhoc checks
- fix: handle form errors for adhoc checks
- handle custom section labels - better handling of existing checks (edit)
- handle custom section labels - better handling of existing checks (edit) - add tests
- handle custom section labels - better handling of existing checks (edit) - add tests
- handle custom section labels - better handling of existing checks (edit) - add tests
- handle custom section labels - better handling of existing checks (edit) - add tests
- add more tests
- fix active label bug
- add label limits to label section
- polish loading behaviour
There was a problem hiding this comment.
Firstly: 👏👏👏
I love the experience and find it much nicer to use than what we currently have. I demoed it to 600 people yesterday because the thought of demoing adhoc checks in their production state didn't appeal to me at all -- so now we are beholden to getting this out in a timely manner 😬
Secondly: scope creep 🙈 This could have been multiple PRs so let's plan a little better for the future but we are where we are now and I am happy to push through with the mega PR.
I haven't looked at any code yet. As soon as you give me the go-ahead I will go through it in detail.
So onto...
BUGS 🐛 🐞
Undraggable handle
Screen.Recording.2025-10-10.at.11.38.56.mov
I've found if I drag the righthand sidebar right over I can't make it bigger again. Are we able to have a minimum size that the lefthand size has to remain?
Also the steps overflow into the righthand sidebar when it is large enough.
Different behaviour for the test buttons
Screen.Recording.2025-10-10.at.11.42.42.mov
The test button by Grot behaves differently to the test button at the top in terms of disabling / triggering validation / moving to the step that needs fixing.
I don't think it needs to disable if the form is invalid, it should just retrigger validation and change the active step.
Frequency missing issue
Screen.Recording.2025-10-10.at.11.50.28.mov
When there is an invalid frequency has the step validation as green.
Persistent error icons
Screen.Recording.2025-10-10.at.11.57.23.mov
When I fix errors in the request options I'd expect the error icons in the tabs to update (and be removed) as soon as they are valid, like the behaviour we have in the wizard steps.
Persistent header (and label) entry
I also find the ever-present empty Name / Value entry for headers and labels a bit odd as I add new entries. I understand it when there are no entries but I don't think it is needed once there is one filled in entry. I also don't like the focus automatically moves to the new entry -- especially with the ever-present entry beneath so the focus moves to the second-to-last entry.
No validation check for when timeout is greater than frequency
When the frequency is less than the timeout, it should invalidate the frequency field and add the appropriate error like it does in v1:
Changing request type wipes the form
If I've gone through all five steps of the wizard form and filled in the details, if I review the form and decide maybe I want a ping instead of a http request in the first step and select it, it:
a) doesn't keep the options that are compatible (such as job, probes, etc.)
b) doesn't return the values I entered for the previously selected request type
We have both of this behaviours in v1 so would be good to keep them.
Scroll doesn't reset when navigating sections
Screen.Recording.2025-10-10.at.12.16.43.mov
The scroll position doesn't reset to the top when navigating between steps. My expectation would be it resets to the top and I work my way back down again.
Monaco editor double scrollbar
Screen.Recording.2025-10-10.at.12.20.30.mov
There is a native OS scrollbar alongside the Monaco scrollbar now in scripted / browser checks.
Multistep live validation update
Screen.Recording.2025-10-10.at.12.25.31.mov
This is the same issue as the error icon in the request options for the API endpoint check types. In Multi step for both the requests and the assertions the error icon doesn't disappear after you have typed a valid input.
NITS
I have a few more than this but I'm keeping quiet as we can discuss and fix them after this mega PR goes in 😃 .
Screen.Recording.2025-10-10.at.12.32.50.mov
The only real nit I have is sometimes I lose the save button because the wizard form section I am on is scrollable and I don't realise I have to scroll to find it. I wonder if we should put it in two locations to ensure it has maximum visibility (such as also a page action in the top right) or maybe move it so it is 'stuck' to the bottom of the RHS so it is always visible?
I also wonder if we should change it from Save -> Create / Create check on a new form?
- fix: different behaviour for the test buttons
- fix: different behaviour for the test buttons - fix: monaco editor double scrollbar - fix: undraggable handle - fix: remove unused fields (scripted check) - fix: scroll doesn't reset when navigating sections - fix: frequency missing issue - fix: no validation check for when timeout is greater than frequency
- refactor: checkster context and check usage - fix: changing request type wipes the form - refactor: move code to hook - fix: multistep live validation update
- fix: broken test
- migrate CommonFields.payload.test
Screen.Recording.2025-10-10.at.11.38.56.movFound some funkiness with the error message here and it persisting when fixing it. Screen.Recording.2025-10-13.at.09.40.08.movAlso some peculiar behaviour with being unable to access the proxy tab when there are a certain type of error in the header tab? Screen.Recording.2025-10-13.at.09.43.44.movIt doesn't scroll down to the frequency input when there is an error with it. 
Can no longer access MultiStep / Scripted or Browser checks. Defaults to the API Endpoint form. |
- fix: check type missing (NewCheckV2).
- fix: FormTab resetting (particular for "proxy")
- fix: sticky field array root errors
- fix: scroll to error fallback
|
Pushed some fancy new commits 🥳 |
- fix/refactor: scroll to error fallback - fix: focus scripts - fix: bug after refactoring
- fix/skip: broken tests
Screen.Recording.2025-10-15.at.10.26.44.movFound the check type selection automatically validates the form when I first arrive on it. It also doesn't update the query parameter in the URL. 
Grot also looks a little unwell to me! |
Screen.Recording.2025-10-15.at.10.38.04.movAlso found that for MultiStep for query parameters it didn't go to the right tab with the error. Screen.Recording.2025-10-15.at.10.40.13.movWhen the error was in the variable dropdown:
Screen.Recording.2025-10-15.at.10.41.50.movIn MultiStep when I add several assertions, it doesn't scroll down to the one with the error either. |
Screen.Recording.2025-10-15.at.10.45.30.movBit of a smaller UX issue which I don't mind if we tackle after this PR but when I'm using my laptop with it zoomed in (16" MacBook Pro with 125% zoom), the editor starts to feel pretty claustrophobic -- especially when doing scripted / browser checks. I know I was complaining about the double scrollbar and the non-visible save button at times so not sure what the easy fix is here. Maybe a toggle or some such to expand the editor? Probably a larger consideration to tackle so let's work on this afterwards. With that said, I wonder if a quick win is to get rid of the section title for a bit of extra real estate? We know what section we are in via the wizard form steps. 
|
- fix: form skipping all steps on check type change
- fix: form skipping all steps on check type change - fix: FormTabs not activating error tab unless already mounted - fix: multi http add query param button text - fix: variables not expanding on error - fix: variables not registered as a section error
|
✅ Probe API Server Mappings Verification Passed The |
- import from CheckEditor instead of duplicating
- import from CheckEditor instead of duplicating (continuation)
- refactor: hide section `h2` by default
2 participants
Reworked check editor for synthethic checks
Complete re-creation of the current check Form.
WIP
How to test
synthetic-monitoring-check-editorAdhoc check example (blackbox exporter)
Adhoc check example (k6/multihttp)
Adhoc check example (k6)