Alert view page designs

[linear]

Page showing alert details

• chart of history
• history of state
• can turn on/off
• details on alert
• copy graph to metric board

[linear]

HIG-4624 Alert view page designs

[greptile-apps]

To implement the alert view page with the specified features, you'll need to integrate and possibly extend functionalities from several components:

1. Chart of History & History of State:

   • Utilize the LogsHistogram component from LogAlertPage.tsx for displaying the chart of history. This component is responsible for rendering histogram charts based on log data.
   • For history of state, you might need to create a new component or extend an existing one to track and display changes in alert states over time.

2. Turn On/Off:

   • The AlertEnableSwitch component in the AlertEnableSwitch directory provides the UI and functionality to enable or disable alerts. You can use this component as is or extend it based on your requirements.

3. Details on Alert:

   • For displaying detailed information about an alert, you can reference the form components used in LogAlertPage.tsx, ErrorAlertPage.tsx, and SessionAlertPage.tsx. These components include various inputs and selections that could be repurposed or used as inspiration for displaying alert details.

4. Notification Configuration:

   • The AlertNotifyForm component from AlertNotifyForm.tsx handles the configuration of notification channels (e.g., Slack, Discord, Email). This component or its logic could be useful for a section in the alert view page that allows users to configure how they receive notifications for the alert.

You may need to adapt these components to fit the specific layout and functionality of your alert view page. Ensure to integrate them with the backend services to fetch and update the necessary data.

References

/frontend/src/pages/Alerts/LogAlert/LogAlertPage.tsx
/frontend/src/pages/Alerts/ErrorAlert/ErrorAlertPage.tsx
/frontend/src/pages/Alerts/SessionAlert/SessionAlertPage.tsx
/frontend/src/pages/Alerts/AlertEnableSwitch
/frontend/src/pages/Alerts/components/AlertNotifyForm/AlertNotifyForm.tsx

Ask Greptile