Custom Webhook Integration

[ShubhamPalriwala]

Problem

Closes #787
Till now, users could only add Slack Alerts, this PR introduces the ability to add custom webhooks extensively.

Solution

• Add Custom Webhooks
• Ability to test the webhook endpoint before adding it and get realtime response
• Disable slack when it is not configured
• NOT a breaking change, compatible with previous releases
• Icons have been cloned as SVG files from the Figma file provided.
• The userflow is exactly as per the Loom video.
• New DeleteAlertView Component has been created as per the designs
• Post request's body is for the test endpoint is:

{
  "view": "Test Connection",
  "message": "Cost alert",
  "from": "Komiser"
}

• Post request's body is for an alert message is:

{
  "view": "rich",
  "message": "Cost alert",
  "cost": 0.08381685558808585
}

• View controller to track and manage the user state for alerts
• Variables across the dashboard have been renamed to a conventional alert from slackAlert
• Naming conventions
  • alertMethod: is the alert a CustomWebhook or Slack
  • alertType: is the alert Budget or Usage
• The alert table in the database sees a new field called isSlack for each alert to distinguish the method.

How to Test

• Slack:
  1. Do not pass the Slack webhook in config and make sure that the option is disabled but you are able to set the webhook alert
  2. Now pass the slack webhook in config and make sure you are able to set both slack and webhook alerts
  3. Verify the slack alert in the hook you have provided in config
• Custom Webhook:
  1. Use https://webhook.site/ to get a custom webhook URL for yourself
  2. Create a new custom webhook alert from the UI and pass the custom webhook URL you received from above.
  3. Hit on test endpoint and see it getting validated
  4. Pass a Secret now and create the webhook.
  5. Once the cronjob runs again, you should be able to see the secret as a Req Header in the webhook receiver.

Screenshots

• Will make a walkthrough screen recording and put it up for easier verification! Here you go
  https://www.loom.com/share/969eafd580d84b71917ff9d9c9f6c253

Notes

• Add documentation for the POST request body format that we make once agreed upon by the team.
• I wasn't able to run go-bindata-assetfs -o template.go dist/ dist/assets/images/ so if any of the maintainers can help me by running that for me on this PR, it'd be really helpful (maintainers have edit access to this).

PS: This was my first time dealing with React as well as Next so do let me know if by any chance any anti-practice is followed (I tried my best not to!). 🥂 to a productive weekend haha!

Checklist

• Code follows the contributing guidelines
• Changes have been thoroughly tested
• Documentation has been updated, if necessary: feat: alerts docs.komiser.io#82
• Any dependencies have been added to the project, if necessary NONE

[mlabouardy]

@ShubhamPalriwala if the user tried to create a Slack alert on an existing alerts table, the following error is returned:

This can be fixed by writing a migration script to add isSlack column (if doesn't exists) to the table upon Komiser launch (see example)

[ShubhamPalriwala]

hi @mlabouardy, I have made the request changes except for the migration script, can you help me with that please :/

[mlabouardy]

LGTM 🚀