feat: Added dashboard for Alert Quality

[vikashsprem]

Closes #1779 /claim #1779

📑 Description

✅ Checks

• [ ] My pull request adheres to the code style of this project
• [ ] My code requires changes to the documentation
• [ ] I have updated the documentation as required
• [ ] All the tests have passed

ℹ Additional Information

[vercel[bot]]

@vikashsprem is attempting to deploy a commit to the KeepHQ Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[Matvey-Kuk]

Hey @vikashsprem how is it going? :)

[vikashsprem]

Hey, @Matvey-Kuk going great, need some time to complete it.

[vikashsprem]

Hey @Matvey-Kuk, @rajeshj11 is also collaborating with me (To complete this issue sooner). Most of the portions are completed. Thank you.

[vikashsprem]

Hey @Matvey-Kuk, Please review this PR and let me know if any changes.

[Matvey-Kuk]

Hey @vikashsprem I see you added a separate page for this dashboard, what do you think of making it a widget for the dashboard we already have? :)

[vikashsprem]

Hey @Matvey-Kuk , Thanks for the suggestion! My concern with making it a widget is that the separate page allows us to include more detailed functionality without crowding the main dashboard. But I'm happy to discuss and find the best approach!

[Matvey-Kuk]

@vikashsprem the main dashboard has a timeframe selector, also we're planning to add more widgets to this dashboard in the future to allow users to tail dashboards to their needs.

[vikashsprem]

@Matvey-Kuk Got it, that makes sense! I'll look into transitioning the separate page into a widget.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
keep	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 8:18am

[talboren]

Hey @vikashsprem

Please note that the build fails 158:17 Error: React Hook "useEffect" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. react-hooks/rules-of-hooks

Check it out with npm run build

[vikashsprem]

Hey @vikashsprem

Please note that the build fails 158:17 Error: React Hook "useEffect" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. react-hooks/rules-of-hooks

Check it out with npm run build

Okay let me check, I going to fix it now.

[vikashsprem]

Hey @talboren, Now you can check it out it has been fixed now.

[talboren]

@vikashsprem please note that now you have some linters failing

[rajesh-jonnalagadda]

steps:

1. Go to dashboards.
2. create a dashboard or use an existing dashboard.
3. click on the add widget.
4. choose widget type as generic metrics
5. select the generic metrics(right now we have one generic report)
6. and click on add widget.

expected: should able to see the new alert quality report in the dashbaord

[vikashsprem]

@Matvey-Kuk @talboren As you suggested we have implemented. Now it's ready for review.

https://github.com/user-attachments/assets/0e44415c-2f4b-4c2d-a36b-5744cd12ad7b

[talboren]

Hey @vikashsprem I'm adding my comments here:

1. Custom Metric doesn't work, what is it?
2. Fields are strange, it doesn't show all the fields like in the feed
3. The time range is weird and user cannot understand what time frame is he looking at. it should be "everything" unless specified otherwise (unless timeframe is provided I mean)
4. The table shows providers by the provider type. In case I have 5 Grafana's it shows Grafana 5 times. It should group by the provider id and also mention that in the table so I can identify which provider exactly.

https://github.com/user-attachments/assets/ebbbadfe-cf04-4730-ba5f-76de4340784c

https://github.com/user-attachments/assets/fb0ff0d6-813c-4ecb-81ef-8c52a2b6feee

[rajesh-jonnalagadda]

Hey @vikashsprem I'm adding my comments here:

1. Custom Metric doesn't work, what is it?
2. Fields are strange, it doesn't show all the fields like in the feed
3. The time range is weird and user cannot understand what time frame is he looking at. it should be "everything" unless specified otherwise (unless timeframe is provided I mean)
4. The table shows providers by the provider type. In case I have 5 Grafana's it shows Grafana 5 times. It should group by the provider id and also mention that in the table so I can identify which provider exactly.

CleanShot.2024-10-07.at.11.41.43.mp4 CleanShot.2024-10-07.at.11.40.24.mp4

1. Custom Metric doesn't work, what is it? it is just another widget type. not implemented(we can remove if we want to)

2. Fields are strange, it doesn't show all the fields like in the feed Regarding the fields. we have restricted only three fields. @Matvey-Kuk also agreed with it.

3. The time range is weird and user cannot understand what time frame is he looking at. it should be "everything" unless specified otherwise (unless timeframe is provided I mean) Currently, if time frame is not mentioned we are taking lat seven days. this we need to rework. will work on it

4. The table shows providers by the provider type. In case I have 5 Grafana's it shows Grafana 5 times. It should group by the provider id and also mention that in the table so I can identify which provider exactly. I am confused here. we are grouping by product_type. in the above screen share how come 5 grafana have different product_type? If we get the SQL data that would more useful to replicate the issue. (we will also again check the aggregation query and get back to you)

[talboren]

Hey @vikashsprem I'm adding my comments here:

1. Custom Metric doesn't work, what is it?
2. Fields are strange, it doesn't show all the fields like in the feed
3. The time range is weird and user cannot understand what time frame is he looking at. it should be "everything" unless specified otherwise (unless timeframe is provided I mean)
4. The table shows providers by the provider type. In case I have 5 Grafana's it shows Grafana 5 times. It should group by the provider id and also mention that in the table so I can identify which provider exactly.

CleanShot.2024-10-07.at.11.41.43.mp4 CleanShot.2024-10-07.at.11.40.24.mp4

1. Custom Metric doesn't work, what is it? it is just another widget type. not implemented(we can remove if we want to)
2. Fields are strange, it doesn't show all the fields like in the feed Regarding the fields. we have restricted only three fields. @Matvey-Kuk also agreed with it.
3. The time range is weird and user cannot understand what time frame is he looking at. it should be "everything" unless specified otherwise (unless timeframe is provided I mean) Currently, if time frame is not mentioned we are taking lat seven days. this we need to rework. will work on it
4. The table shows providers by the provider type. In case I have 5 Grafana's it shows Grafana 5 times. It should group by the provider id and also mention that in the table so I can identify which provider exactly. I am confused here. we are grouping by product_type. in the above screen share how come 5 grafana have different product_type? If we get the SQL data that would more useful to replicate the issue. (we will also again check the aggregation query and get back to you)

Re #1: Please remove it if it's not implemented. Re #2: If @Matvey-Kuk confirmed this then OK. Re #3: It should at least mention that it's last 7 days. Changing the timeframe does nothing at the moment (you have no way to know if it changed something or not) Re #4: I honestly didn't understand. You can connect more than 1 tool of the same type to Keep. So for instance, I can have Grafana A sending alerts, Grafana B sending alerts, Grafana C sending alerts. Now we show the same data for the provider type therefore the data in the table is false.

Let me know if I can help anyhow!

cc: @Matvey-Kuk @vikashsprem @rajeshj11

[vikashsprem]

Hey @talboren @Matvey-Kuk It's ready for review. Please let us know if you have any concerns.

[codecov[bot]]

Codecov Report

Attention: Patch coverage is 40.62500% with 19 lines in your changes missing coverage. Please review.

Project coverage is 71.65%. Comparing base (7d90ae9) to head (8e3b1cc). Report is 33 commits behind head on main.

Files with missing lines	Patch %	Lines
keep/api/core/db.py	22.22%	7 Missing :warning:
keep/api/utils/time_stamp_helpers.py	41.66%	7 Missing :warning:
keep/api/routes/alerts.py	54.54%	5 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1977      +/-   ##
==========================================
+ Coverage   71.20%   71.65%   +0.44%     
==========================================
  Files         154      155       +1     
  Lines       14046    14360     +314     
==========================================
+ Hits        10002    10289     +287     
- Misses       4044     4071      +27     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[rajesh-jonnalagadda]

@talboren @Matvey-Kuk We have worked on the feedback changes. can you please review now

[Matvey-Kuk]

Will review shortly!

[rajesh-jonnalagadda]

For some reason it doesn't render for me even though the API call seems to be working perfecly:

To reproduce:

1. Remove db.
2. Shoot scripts/simulate_alerts.py
3. Create dashboard, add the widget.

Will check

[rajesh-jonnalagadda]

For some reason it doesn't render for me even though the API call seems to be working perfecly: To reproduce:

1. Remove db.
2. Shoot scripts/simulate_alerts.py
3. Create dashboard, add the widget.

Will check

Mostly post deletion. You have not installed any providers. We are showing only installed metrics Cc: @talboren

@Matvey-Kuk ^^ Have you checked my comment??

[rajesh-jonnalagadda]

@Matvey-Kuk @talboren I wanted to follow up on this PR, as it seems to have been pending for a while.

[rajesh-jonnalagadda]

@rajeshj11 sorry for late reply! I've checked with Tal, the thing is that once the alert pops up in Keep and it doesn't have an Installed provider, a new type of providers is getting created called "Linked Providers", they are acting as any other providers, and I think they should be represented in the table.

Could you please update the PR?

@Matvey-Kuk I did discuss this with @talboren. I proposed I will show all the provider type stats in separate table. Something like below.

Github(linked +installed) in a separate table. Gitlab(linked+installed)

Should I maintain separate table. Need conformation

[Matvey-Kuk]

@rajeshj11 I didn't mean a separate table, but just to include alerts from Linked + Installed in the widget you already added :)

[rajesh-jonnalagadda]

@rajeshj11 I didn't mean a separate table, but just to include alerts from Linked + Installed in the widget you already added :)

https://www.loom.com/share/03e52b1f785d4a039e47d0aa124c41b6

please check the demo