Add alert state changes to alert detail page about highlight HOT 2 OPEN

HIG-4749 Add alert state changes to alert detail page

from highlight.

To add alert state changes to the alert detail page, follow these steps:

1. Update Context: Modify AlertsContext.tsx to include state changes.

2. Modify ErrorAlertPage:

   • File: /frontend/src/pages/Alerts/ErrorAlert/ErrorAlertPage.tsx
   • Add state change logic where alert details are fetched and displayed.

3. Modify SessionAlertPage:

   • File: /frontend/src/pages/Alerts/SessionAlert/SessionAlertPage.tsx
   • Add state change logic where alert details are fetched and displayed.

4. Modify LogAlertPage:

   • File: /frontend/src/pages/Alerts/LogAlert/LogAlertPage.tsx
   • Add state change logic where alert details are fetched and displayed.

Example code snippet to add state changes:

// Inside the useEffect where alert details are fetched
useEffect(() => {
  if (alert) {
    // Existing code to set alert details
    // Add state change logic here
    setAlertStateChanges(alert.stateChanges);
  }
}, [alert]);

// Render state changes in the component
<Box>
  <Text>State Changes:</Text>
  {alertStateChanges.map((change, index) => (
    <Text key={index}>{change}</Text>
  ))}
</Box>

Ensure to replace alertStateChanges with the appropriate state variable and adjust the rendering logic as needed.

References

/frontend/src/pages/Alerts/ErrorAlert/ErrorAlertPage.tsx
/frontend/src/pages/Alerts/SessionAlert/SessionAlertPage.tsx
/frontend/src/pages/Alerts/LogAlert/LogAlertPage.tsx
/frontend/src/pages/Alerts/AlertsContext/AlertsContext.tsx
/frontend/src/pages/Alerts
/frontend/src/pages/Alerts/components/AlertNotifyForm/AlertNotifyForm.tsx
/frontend/src/pages/Alerts/utils/AlertsUtils.ts

Ask Greptile

from highlight.