Comments (2)
HIG-4748 Create unified alert detail page
from highlight.
To create a unified alert detail page, follow these steps:
-
Create a new component: Create a new file
UnifiedAlertPage.tsx
in the/frontend/src/pages/Alerts
directory. -
Import necessary components and hooks:
import { Button } from '@components/Button';
import Select from '@components/Select/Select';
import { toast } from '@components/Toaster';
import { useCreateLogAlertMutation, useDeleteLogAlertMutation, useUpdateLogAlertMutation, useCreateErrorAlertMutation, useDeleteErrorAlertMutation, useUpdateErrorAlertMutation, useCreateSessionAlertMutation, useDeleteSessionAlertMutation, useUpdateSessionAlertMutation } from '@graph/hooks';
import { Box, Container, Form, Stack, Text } from '@highlight-run/ui/components';
import { useParams } from '@util/react-router/useParams';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import LoadingBox from '@/components/LoadingBox';
import { namedOperations } from '@/graph/generated/operations';
import { useSearchTime } from '@/hooks/useSearchTime';
import AlertTitleField from '@/pages/Alerts/components/AlertTitleField/AlertTitleField';
import AlertNotifyForm from '@/pages/Alerts/components/AlertNotifyForm/AlertNotifyForm';
import { DEFAULT_FREQUENCY } from '@/pages/Alerts/AlertConfigurationCard/AlertConfigurationConstants';
import { findAlert, getFrequencyOption } from '@/pages/Alerts/utils/AlertsUtils';
import * as styles from './styles.css';
- Define the component:
const UnifiedAlertPage = () => {
const { alert_id, alert_type } = useParams<{ alert_id: string, alert_type: string }>();
const isCreate = alert_id === undefined;
const createStr = isCreate ? 'create' : 'update';
const [initialQuery, setInitialQuery] = useState('');
const [formValues, setFormValues] = useState({
name: '',
belowThreshold: false,
slackChannels: [],
discordChannels: [],
microsoftTeamsChannels: [],
webhookDestinations: [],
emails: [],
threshold: undefined,
frequency: Number(DEFAULT_FREQUENCY),
threshold_window: Number(DEFAULT_FREQUENCY),
loaded: false,
});
const navigate = useNavigate();
useEffect(() => {
// Fetch alert data based on alert_type and alert_id
// Set initial form values
}, [alert_id, alert_type]);
const handleSave = () => {
// Handle save logic based on alert_type
};
const handleDelete = () => {
// Handle delete logic based on alert_type
};
return (
<Box width="full" background="raised" p="8">
<Box border="dividerWeak" borderRadius="6" width="full" shadow="medium" background="default" display="flex" flexDirection="column" height="full">
{formValues.loaded ? (
<>
<Box display="flex" justifyContent="flex-end" alignItems="center" borderBottom="dividerWeak" px="8" py="6" cssClass={styles.header}>
<Box display="flex" alignItems="center" gap="4">
<Button kind="secondary" size="small" emphasis="low" onClick={() => navigate(-1)}>Cancel</Button>
{!isCreate && <Button kind="danger" size="small" emphasis="low" onClick={handleDelete}>Delete Alert</Button>}
<Button kind="primary" size="small" emphasis="high" onClick={handleSave}>{capitalize(createStr)} alert</Button>
</Box>
</Box>
<Container display="flex" flexDirection="column" py="24" gap="40">
<Form>
<Stack gap="40">
<AlertTitleField />
{/* Add other form fields based on alert_type */}
<AlertNotifyForm />
</Stack>
</Form>
</Container>
</>
) : <LoadingBox />}
</Box>
</Box>
);
};
export default UnifiedAlertPage;
- Update the router: Modify
AlertsRouter.tsx
to include the new unified alert page route.
import UnifiedAlertPage from '@/pages/Alerts/UnifiedAlertPage';
// Add new routes
<Route path="unified/:alert_type/new" element={<UnifiedAlertPage />} />
<Route path="unified/:alert_type/:alert_id" element={<UnifiedAlertPage />} />
- Handle form fields and mutations: Implement logic to handle form fields and mutations based on
alert_type
inUnifiedAlertPage.tsx
.
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/AlertsRouter.tsx
/frontend/src/pages/Alerts
/frontend/src/pages/Alerts/components
/frontend/src/pages/Alerts/utils
from highlight.
Related Issues (20)
- Can't install highlight-io 0.8.4 HOT 1
- Small UI bugs on issue creation HOT 2
- create e2e test for asset replacement with asset transform HOT 1
- nextjs rewrites overwritten HOT 2
- Remove trace propagation headers on spans that shouldn't be tracked HOT 1
- OpenAI Prompt to long for traces HOT 1
- Build client in Reflame previews HOT 1
- Cannot search metric_name on metrics product HOT 1
- fix retool connection HOT 1
- Triage issue HOT 2
- Error alert config causing no alerts HOT 1
- Make docs on how to use custom browser opentelemetry to send data to Highlight HOT 1
- Error Monitoring Feedback HOT 1
- Get rid of colored avatar placeholders and replace it with the grey new one HOT 1
- Make default time buckets in graphs more useful HOT 1
- Add design for Video Tutorials in Metrics/Alerts HOT 1
- Update alert documentation HOT 1
- Ability to max(created_date) on session metrics HOT 1
- Fix network request trace view HOT 1
- Look at setting up long task instrumentation HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from highlight.