feat: add TLS Cert Expiry alert for TCP checks

[VikaCep]

Closes #1149
Depends on https://github.com/grafana/synthetic-monitoring-api/pull/1357

Add "TLS Certificate Close to Expiring" Alert for TCP Checks

Summary

This PR introduces support for the "TLS certificate close to expiring" alert for TCP checks in the synthetic monitoring app.

Details

• Feature:

  • Users can now enable a per-check alert for when the target’s TLS certificate is close to expiring on TCP checks.

• UI/UX:

  • The alert option is only available if TLS is enabled in the TCP check’s "TLS Config" section.
  • If TLS is not enabled, the alert checkbox is disabled and a warning message is displayed to inform the user that TLS must be enabled for this alert to function.
    

• Tests:

  • Added tests to verify:
    • The alert can be enabled and submitted when TLS is enabled.
    • The alert is disabled and a warning is shown when TLS is not enabled.

Screen.Recording.2025-05-23.at.14.50.09.mov

[VikaCep]

Since https://github.com/grafana/synthetic-monitoring-api/pull/1357 has been merged I've marked this as ready for review. However, I don't know if we want to include it in the public preview. Do we need to update the docs for it @ka3de?

[ka3de]

However, I don't know if we want to include it in the public preview. Do we need to update the docs for it @ka3de?

I would say this is not a must, but whenever it's ready we can merge it. Docs are updated in this PR which is ready to merge when the functionality is released.

[w1kman]

LGTM - I'm not sure about the orange/warning color for the text.
Seems a bit much. Perhaps double check with @vesnadean ?

[w1kman]

Why?

[VikaCep]

I've removed the error suppressions here and created a utility function to override feature flags in tests 👍

[vesnadean]

LGTM - I'm not sure about the orange/warning color for the text. Seems a bit much. Perhaps double check with @vesnadean ?

I see a couple options here:

1. If this checkbox is selected, we check whether TLS is enabled or not. If not, the alert won't work properly. In this case we display an error warning in red. I assume we don't have that logic in place atm?
2. We don't check if TLS is enabled or not, and this text is just for additional clarification. In this case we use the secondary text color.

[VikaCep]

Thanks @vesnadean! I took another look, and since we don’t want to allow saving the alert when TLS is off, I went ahead and added a validation rule to handle that case, to be consistent with other invalid scenarios:

Recording:
https://github.com/user-attachments/assets/2806aa6e-8ab3-4945-9659-3e8f364c4f44

This should help in cases where someone creates a check with the alert enabled and then later disables TLS by preventing that mismatch from being saved.

If we’d rather not go with validation, we could fall back to just showing the message in a secondary color like you suggested:

Let me know which alternative you think is best 🙏

[vesnadean]

@VikaCep The recording looks great, let's go with that option.

[w1kman]

LGTM! 👍🏻