Cloning monitors

[mxkaske]

Description

We should be able to 'create' or 'clone' a monitor to take all the settings with us (e.g. timeout, assertions, status page relationship, monitor tag relationship,...)

Include a new Dropdown Item

[Ipriyankrajai]

Hey @mxkaske , I would like to work on this.

[Ipriyankrajai]

Hello @mxkaske,

When the user clicks on the clone action, should I redirect them to the /monitors/new page and preload the values?

[mxkaske]

I like the idea but if we would like to preload the values but not save the cloned monitor some issue we will face is:

• How to pass thedefaultValues to /monitors/new: Via localStorage/sessionStorage but we will render on the client or via searchParams and we can render server-side
• Requires a change on handleSubmit of the form as we currently, we have:

    if (defaultValues) {
      await api.monitor.update.mutate(props);
    } else {
      await api.monitor.create.mutate(props);
    }

Probably, a simple if (defaultValues.id) ... could be it.

Otherwise, we could clone (+ maybe set active: false to avoid to test the endpoint immediately), save the monitor by default and redirect the user to /monitors/[id]/edit to be able to edit it right away.

What are your thoughts?

[Ipriyankrajai]

I prefer the second approach where we first create the monitor and then redirect the user to /monitors/[id]/edit.

[mxkaske]

Perfect! What we can do is deactivating the monitor onClone and add a ?active=true search param to override the defaultValue to be set the active value back to true.

    <MonitorForm
      defaultValues={{
        ...monitor,
        active: searchParams.get("active") || monitor.active
      }}
      {...}
    />

you might need to use zod for validation.