Skip to content

refactor: Create TileAlertEditor component #2085

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kodiakhq merged 1 commit into from
Apr 9, 2026
Merged

refactor: Create TileAlertEditor component #2085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/two-rocks-punch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@hyperdx/app": patch
---

refactor: Create TileAlertEditor component
2 changes: 1 addition & 1 deletion packages/app/src/components/Alerts.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const WebhookChannelForm = <T extends object>(

return (
<div>
<Group gap="md" justify="space-between">
<Group gap="md" justify="space-between" align="flex-start">
<Select
data-testid="select-webhook"
comboboxProps={{
Expand Down
80 changes: 41 additions & 39 deletions packages/app/src/components/ChartEditor/RawSqlChartEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,38 +133,49 @@ export default function RawSqlChartEditor({
}, [sources, connection]);

return (
<Stack>
<Group align="center" gap={0}>
<Text pe="md" size="sm">
Connection
</Text>
<ConnectionSelectControlled
control={control}
name="connection"
size="xs"
/>
<Group align="center" gap={8} mx="md">
<Text size="sm" ps="md">
Source
<Stack gap="xs">
Copy link
Copy Markdown
Contributor Author

@pulpdrew pulpdrew Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also slightly adjusted the layout here to reduce the height of the Raw SQL editor.

Image

<Group align="center" gap={0} justify="space-between">
<Group align="center" gap={0}>
<Text pe="md" size="sm">
Connection
</Text>
{isDashboardForm && (
<Tooltip
label="Optional. Required to apply dashboard filters to this chart."
pe="md"
>
<IconHelpCircle size={14} className="cursor-pointer" />
</Tooltip>
)}
<ConnectionSelectControlled
control={control}
name="connection"
size="xs"
/>
<Group align="center" gap={8} mx="md">
<Text size="sm" ps="md">
Source
</Text>
{isDashboardForm && (
<Tooltip
label="Optional. Required to apply dashboard filters to this chart."
pe="md"
>
<IconHelpCircle size={14} className="cursor-pointer" />
</Tooltip>
)}
</Group>
<SourceSelectControlled
control={control}
name="source"
connectionId={connection}
size="xs"
clearable
placeholder="None"
sourceSchemaPreview={sourceSchemaPreview}
/>
</Group>
<Group gap="xs">
<Button
onClick={onOpenDisplaySettings}
size="compact-sm"
variant="secondary"
>
Display Settings
</Button>
</Group>
<SourceSelectControlled
control={control}
name="source"
connectionId={connection}
size="xs"
clearable
placeholder="None"
sourceSchemaPreview={sourceSchemaPreview}
/>
</Group>
<RawSqlChartInstructions displayType={displayType ?? DisplayType.Table} />
<Box style={{ position: 'relative' }}>
Expand All @@ -179,15 +190,6 @@ export default function RawSqlChartEditor({
/>
<div className={resizeStyles.resizeYHandle} onMouseDown={startResize} />
</Box>
<Group justify="flex-end">
<Button
onClick={onOpenDisplaySettings}
size="compact-sm"
variant="secondary"
>
Display Settings
</Button>
</Group>
</Stack>
);
}
124 changes: 15 additions & 109 deletions packages/app/src/components/DBEditTimeChartForm/ChartEditorControls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@ import {
FieldErrors,
UseFormClearErrors,
UseFormSetValue,
useWatch,
} from 'react-hook-form';
import { NativeSelect, NumberInput } from 'react-hook-form-mantine';
import { TableConnection } from '@hyperdx/common-utils/dist/core/metadata';
import { isBuilderChartConfig } from '@hyperdx/common-utils/dist/guards';
import {
Expand All @@ -15,20 +13,9 @@ import {
SourceKind,
TSource,
} from '@hyperdx/common-utils/dist/types';
import {
Button,
Divider,
Flex,
Group,
Paper,
Stack,
Switch,
Text,
} from '@mantine/core';
import { Box, Button, Divider, Flex, Group, Switch, Text } from '@mantine/core';
import { IconBell, IconCirclePlus } from '@tabler/icons-react';

import { AlertChannelForm } from '@/components/Alerts';
import { AlertScheduleFields } from '@/components/AlertScheduleFields';
import {
ChartEditorFormState,
SavedChartConfigWithSelectArray,
Expand All @@ -39,16 +26,10 @@ import SourceSchemaPreview from '@/components/SourceSchemaPreview';
import { SourceSelectControlled } from '@/components/SourceSelect';
import { SQLInlineEditorControlled } from '@/components/SQLEditor/SQLInlineEditor';
import { IS_LOCAL_MODE } from '@/config';
import { optionsToSelectData } from '@/utils';
import {
ALERT_CHANNEL_OPTIONS,
DEFAULT_TILE_ALERT,
intervalToMinutes,
TILE_ALERT_INTERVAL_OPTIONS,
TILE_ALERT_THRESHOLD_TYPE_OPTIONS,
} from '@/utils/alerts';
import { DEFAULT_TILE_ALERT } from '@/utils/alerts';

import { ChartSeriesEditor } from './ChartSeriesEditor';
import { TileAlertEditor } from './TileAlertEditor';

type ChartEditorControlsProps = {
control: Control<ChartEditorFormState>;
Expand Down Expand Up @@ -103,18 +84,6 @@ export function ChartEditorControls({
onSubmit,
openDisplaySettings,
}: ChartEditorControlsProps) {
const alertChannelType = useWatch({ control, name: 'alert.channel.type' });
const alertScheduleOffsetMinutes = useWatch({
control,
name: 'alert.scheduleOffsetMinutes',
});
const maxAlertScheduleOffsetMinutes = alert?.interval
? Math.max(intervalToMinutes(alert.interval) - 1, 0)
: 0;
const alertIntervalLabel = alert?.interval
? TILE_ALERT_INTERVAL_OPTIONS[alert.interval]
: undefined;

return (
<>
<Flex mb="md" align="center" justify="space-between">
Expand Down Expand Up @@ -274,20 +243,19 @@ export function ChartEditorControls({
/>
)}
{(displayType === DisplayType.Line ||
displayType === DisplayType.StackedBar ||
displayType === DisplayType.Number) &&
dashboardId &&
!alert &&
!IS_LOCAL_MODE && (
<Button
variant="subtle"
data-testid="alert-button"
size="sm"
color={alert ? 'red' : 'gray'}
onClick={() =>
setValue('alert', alert ? undefined : DEFAULT_TILE_ALERT)
}
onClick={() => setValue('alert', DEFAULT_TILE_ALERT)}
>
<IconBell size={14} className="me-2" />
{!alert ? 'Add Alert' : 'Remove Alert'}
Add Alert
</Button>
)}
</Group>
Expand Down Expand Up @@ -334,76 +302,14 @@ export function ChartEditorControls({
</Flex>
)}
{alert && !isRawSqlInput && (
<Paper my="sm">
<Stack gap="xs" data-testid="alert-details">
<Paper px="md" py="sm" radius="xs">
<Text size="xxs" opacity={0.5} mb={4}>
Trigger
</Text>
<Group gap="xs">
<Text size="sm" opacity={0.7}>
Alert when the value
</Text>
<NativeSelect
data={optionsToSelectData(TILE_ALERT_THRESHOLD_TYPE_OPTIONS)}
size="xs"
name={`alert.thresholdType`}
control={control}
/>
<NumberInput
size="xs"
w={80}
control={control}
name={`alert.threshold`}
/>
over
<NativeSelect
data={optionsToSelectData(TILE_ALERT_INTERVAL_OPTIONS)}
size="xs"
name={`alert.interval`}
control={control}
/>
<Text size="sm" opacity={0.7}>
window via
</Text>
<NativeSelect
data={optionsToSelectData(ALERT_CHANNEL_OPTIONS)}
size="xs"
name={`alert.channel.type`}
control={control}
/>
</Group>
{alert?.createdBy && (
<Text size="xs" opacity={0.6} mt="xs">
Created by {alert.createdBy.name || alert.createdBy.email}
</Text>
)}
<AlertScheduleFields
control={control}
setValue={setValue}
scheduleOffsetName="alert.scheduleOffsetMinutes"
scheduleStartAtName="alert.scheduleStartAt"
scheduleOffsetMinutes={alertScheduleOffsetMinutes}
maxScheduleOffsetMinutes={maxAlertScheduleOffsetMinutes}
offsetWindowLabel={
alertIntervalLabel
? `from each ${alertIntervalLabel} window`
: 'from each alert window'
}
/>
</Paper>
<Paper px="md" py="sm" radius="xs">
<Text size="xxs" opacity={0.5} mb={4}>
Send to
</Text>
<AlertChannelForm
control={control}
type={alertChannelType}
namePrefix="alert."
/>
</Paper>
</Stack>
</Paper>
<Box mt="sm">
<TileAlertEditor
control={control}
setValue={setValue}
alert={alert}
onRemove={() => setValue('alert', undefined)}
/>
</Box>
)}
</>
);
Expand Down
Loading
Loading