-
-
+ }
+ labelPosition="right"
+ mb={8}
+ mt="sm"
+ />
+
+
+ {tableSource?.kind === SourceKind.Metric && metricType && (
+
+ {
+ setValue(`${namePrefix}metricName`, value);
+ setValue(`${namePrefix}valueExpression`, 'Value');
+ }}
+ setMetricType={value =>
+ setValue(`${namePrefix}metricType`, value)
+ }
+ metricSource={tableSource}
+ data-testid="metric-name-selector"
+ error={errors?.metricName?.message}
+ onFocus={() => clearErrors(`${namePrefix}metricName`)}
+ />
+ {metricType === 'gauge' && (
+
+
+
+ )}
+
+ )}
+ {tableSource?.kind !== SourceKind.Metric && aggFn !== 'count' && (
+
+
+
+ )}
+ {(showWhere || showGroupBy || showHaving) && (
+
+ {showWhere && (
+ <>
+
Where
+
+
+
+
+ )}
+ {showGroupBy && (
+ <>
+
+ Group By
+
+
+
+
+ {showHaving && (
+ <>
+
+ Having
+
+
+
+
+
+ )}
+
+ )}
+
+ {tableSource?.kind === SourceKind.Metric && metricName && metricType && (
+
+ )}
+
+ );
+}
diff --git a/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
new file mode 100644
index 00000000..67736b90
--- /dev/null
+++ b/packages/app/src/components/DBEditTimeChartForm/EditTimeChartForm.tsx
@@ -0,0 +1,675 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Controller, useFieldArray, useForm, useWatch } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
+import {
+ displayTypeSupportsBuilderAlerts,
+ displayTypeSupportsRawSqlAlerts,
+} from '@hyperdx/common-utils/dist/core/utils';
+import { isRawSqlSavedChartConfig } from '@hyperdx/common-utils/dist/guards';
+import {
+ ChartConfigWithDateRange,
+ DisplayType,
+ SavedChartConfig,
+ SourceKind,
+ TSource,
+} from '@hyperdx/common-utils/dist/types';
+import {
+ Box,
+ Divider,
+ Flex,
+ SegmentedControl,
+ Tabs,
+ Text,
+ Textarea,
+} from '@mantine/core';
+import { useDisclosure, usePrevious } from '@mantine/hooks';
+import { notifications } from '@mantine/notifications';
+import {
+ IconChartLine,
+ IconChartPie,
+ IconList,
+ IconMarkdown,
+ IconNumbers,
+ IconTable,
+} from '@tabler/icons-react';
+
+import { getPreviousDateRange } from '@/ChartUtils';
+import ChartDisplaySettingsDrawer, {
+ ChartConfigDisplaySettings,
+} from '@/components/ChartDisplaySettingsDrawer';
+import RawSqlChartEditor from '@/components/ChartEditor/RawSqlChartEditor';
+import {
+ ChartEditorFormState,
+ SavedChartConfigWithSelectArray,
+} from '@/components/ChartEditor/types';
+import {
+ convertFormStateToChartConfig,
+ convertFormStateToSavedChartConfig,
+ convertSavedChartConfigToFormState,
+ isRawSqlDisplayType,
+ validateChartForm,
+} from '@/components/ChartEditor/utils';
+import { ErrorBoundary } from '@/components/Error/ErrorBoundary';
+import { InputControlled } from '@/components/InputControlled';
+import SaveToDashboardModal from '@/components/SaveToDashboardModal';
+import { getStoredLanguage } from '@/components/SearchInput/SearchWhereInput';
+import HDXMarkdownChart from '@/HDXMarkdownChart';
+import { getTraceDurationNumberFormat, useSource } from '@/source';
+import { normalizeNoOpAlertScheduleFields } from '@/utils/alerts';
+
+import { ChartActionBar } from './ChartActionBar';
+import { ChartEditorControls } from './ChartEditorControls';
+import { ChartPreviewPanel } from './ChartPreviewPanel';
+import { ErrorNotificationMessage } from './ErrorNotificationMessage';
+import {
+ buildChartConfigForExplanations,
+ computeDbTimeChartConfig,
+ displayTypeToActiveTab,
+ TABS_WITH_GENERATED_SQL,
+ zSavedChartConfig,
+} from './utils';
+
+type EditTimeChartFormProps = {
+ dashboardId?: string;
+ chartConfig: SavedChartConfig;
+ displayedTimeInputValue?: string;
+ dateRange: [Date, Date];
+ isSaving?: boolean;
+ onTimeRangeSearch?: (value: string) => void;
+ setChartConfig?: (chartConfig: SavedChartConfig) => void;
+ setDisplayedTimeInputValue?: (value: string) => void;
+ onSave?: (chart: SavedChartConfig) => void;
+ onClose?: () => void;
+ onDirtyChange?: (isDirty: boolean) => void;
+ onTimeRangeSelect?: (start: Date, end: Date) => void;
+ 'data-testid'?: string;
+ submitRef?: React.MutableRefObject<(() => void) | undefined>;
+ isDashboardForm?: boolean;
+ autoRun?: boolean;
+};
+
+export default function EditTimeChartForm({
+ dashboardId,
+ chartConfig,
+ displayedTimeInputValue,
+ dateRange,
+ isSaving,
+ onTimeRangeSearch,
+ setChartConfig,
+ setDisplayedTimeInputValue,
+ onSave,
+ onTimeRangeSelect,
+ onClose,
+ onDirtyChange,
+ 'data-testid': dataTestId,
+ submitRef,
+ isDashboardForm = false,
+ autoRun = false,
+}: EditTimeChartFormProps) {
+ const formValue: ChartEditorFormState = useMemo(
+ () => convertSavedChartConfigToFormState(chartConfig),
+ [chartConfig],
+ );
+
+ const {
+ control,
+ setValue,
+ handleSubmit,
+ register,
+ setError,
+ clearErrors,
+ formState: { errors, isDirty, dirtyFields },
+ } = useForm
({
+ defaultValues: formValue,
+ values: formValue,
+ resolver: zodResolver(zSavedChartConfig),
+ });
+
+ const {
+ fields,
+ append,
+ remove: removeSeries,
+ swap: swapSeries,
+ } = useFieldArray({
+ control,
+ name: 'series',
+ });
+
+ useEffect(() => {
+ onDirtyChange?.(isDirty);
+ }, [isDirty, onDirtyChange]);
+
+ const select = useWatch({ control, name: 'select' });
+ const sourceId = useWatch({ control, name: 'source' });
+ const alert = useWatch({ control, name: 'alert' });
+ const seriesReturnType = useWatch({ control, name: 'seriesReturnType' });
+ const groupBy = useWatch({ control, name: 'groupBy' });
+ const displayType =
+ useWatch({ control, name: 'displayType' }) ?? DisplayType.Line;
+ const markdown = useWatch({ control, name: 'markdown' });
+ const granularity = useWatch({ control, name: 'granularity' });
+ const configType = useWatch({ control, name: 'configType' });
+
+ const chartConfigAlert = chartConfig.alert;
+ const isRawSqlInput =
+ configType === 'sql' && isRawSqlDisplayType(displayType);
+
+ const { data: tableSource } = useSource({ id: sourceId });
+ const databaseName = tableSource?.from.databaseName;
+ const tableName = tableSource?.from.tableName;
+
+ const activeTab = displayTypeToActiveTab(displayType);
+
+ // When switching display types, remove the alert if the new display type doesn't support alerts
+ const previousDisplayType = usePrevious(displayType);
+ useEffect(() => {
+ if (displayType === previousDisplayType) return;
+ const displayTypeSupportsAlerts =
+ configType === 'sql'
+ ? displayTypeSupportsRawSqlAlerts(displayType)
+ : displayTypeSupportsBuilderAlerts(displayType);
+ if (!displayTypeSupportsAlerts) {
+ setValue('alert', undefined);
+ }
+ }, [configType, displayType, previousDisplayType, setValue]);
+
+ const showGeneratedSql = TABS_WITH_GENERATED_SQL.has(activeTab);
+
+ const showSampleEvents =
+ tableSource?.kind !== SourceKind.Metric && !isRawSqlInput;
+
+ const [
+ alignDateRangeToGranularity,
+ fillNulls,
+ compareToPreviousPeriod,
+ numberFormat,
+ ] = useWatch({
+ control,
+ name: [
+ 'alignDateRangeToGranularity',
+ 'fillNulls',
+ 'compareToPreviousPeriod',
+ 'numberFormat',
+ ],
+ });
+
+ const autoDetectedNumberFormat = useMemo(
+ () =>
+ getTraceDurationNumberFormat(
+ tableSource,
+ Array.isArray(select) ? select : undefined,
+ ),
+ [tableSource, select],
+ );
+
+ const displaySettings: ChartConfigDisplaySettings = useMemo(
+ () => ({
+ alignDateRangeToGranularity,
+ fillNulls,
+ compareToPreviousPeriod,
+ numberFormat,
+ }),
+ [
+ alignDateRangeToGranularity,
+ fillNulls,
+ compareToPreviousPeriod,
+ numberFormat,
+ ],
+ );
+
+ const [
+ displaySettingsOpened,
+ { open: openDisplaySettings, close: closeDisplaySettings },
+ ] = useDisclosure(false);
+
+ // Only update this on submit, otherwise we'll have issues
+ // with using the source value from the last submit
+ // (ex. ignoring local custom source updates)
+ const [queriedConfig, setQueriedConfig] = useState<
+ ChartConfigWithDateRange | undefined
+ >(undefined);
+ const [queriedSource, setQueriedSource] = useState(
+ undefined,
+ );
+
+ const setQueriedConfigAndSource = useCallback(
+ (config: ChartConfigWithDateRange, source: TSource | undefined) => {
+ setQueriedConfig(config);
+ setQueriedSource(source);
+ },
+ [],
+ );
+
+ const dbTimeChartConfig = useMemo(
+ () => computeDbTimeChartConfig(queriedConfig, alert),
+ [queriedConfig, alert],
+ );
+
+ const [saveToDashboardModalOpen, setSaveToDashboardModalOpen] =
+ useState(false);
+
+ const validateAndNormalize = useCallback(
+ (form: ChartEditorFormState) => {
+ const errors = validateChartForm(form, tableSource, setError);
+ if (errors.length > 0) return { errors, config: null };
+
+ const savedConfig = convertFormStateToSavedChartConfig(form, tableSource);
+ if (!savedConfig) return { errors: [], config: null };
+
+ const config = isRawSqlSavedChartConfig(savedConfig)
+ ? savedConfig
+ : {
+ ...savedConfig,
+ alert: normalizeNoOpAlertScheduleFields(
+ savedConfig.alert,
+ chartConfigAlert,
+ {
+ preserveExplicitScheduleOffsetMinutes:
+ dirtyFields.alert?.scheduleOffsetMinutes === true,
+ preserveExplicitScheduleStartAt:
+ dirtyFields.alert?.scheduleStartAt === true,
+ },
+ ),
+ };
+
+ return { errors: [], config };
+ },
+ [
+ tableSource,
+ setError,
+ chartConfigAlert,
+ dirtyFields.alert?.scheduleOffsetMinutes,
+ dirtyFields.alert?.scheduleStartAt,
+ ],
+ );
+
+ const onSubmit = useCallback(
+ (suppressErrorNotification: boolean = false) => {
+ handleSubmit(form => {
+ const { errors, config } = validateAndNormalize(form);
+ if (errors.length > 0) {
+ if (!suppressErrorNotification) {
+ notifications.show({
+ id: 'chart-error',
+ title: 'Invalid Chart',
+ message: ,
+ color: 'red',
+ });
+ }
+ return;
+ }
+
+ const queriedConfig = convertFormStateToChartConfig(
+ form,
+ dateRange,
+ tableSource,
+ );
+
+ if (config && queriedConfig) {
+ const isRawSqlChart =
+ form.configType === 'sql' && isRawSqlDisplayType(form.displayType);
+ setChartConfig?.(config);
+ setQueriedConfigAndSource(
+ queriedConfig,
+ isRawSqlChart ? undefined : tableSource,
+ );
+ }
+ })();
+ },
+ [
+ validateAndNormalize,
+ handleSubmit,
+ setChartConfig,
+ setQueriedConfigAndSource,
+ tableSource,
+ dateRange,
+ ],
+ );
+
+ useEffect(() => {
+ if (submitRef) {
+ submitRef.current = onSubmit;
+ }
+ }, [onSubmit, submitRef]);
+
+ const autoRunFired = useRef(false);
+ useEffect(() => {
+ if (autoRun && !autoRunFired.current && tableSource) {
+ autoRunFired.current = true;
+ onSubmit(true);
+ }
+ }, [autoRun, tableSource, onSubmit]);
+
+ const handleSave = useCallback(
+ (form: ChartEditorFormState) => {
+ const { errors, config } = validateAndNormalize(form);
+ if (errors.length > 0) {
+ notifications.show({
+ id: 'chart-error',
+ title: 'Invalid Chart',
+ message: ,
+ color: 'red',
+ });
+ return;
+ }
+
+ if (config) {
+ onSave?.(config);
+ }
+ },
+ [validateAndNormalize, onSave],
+ );
+
+ // Track previous values for detecting changes
+ const prevGranularityRef = useRef(granularity);
+ const prevDisplayTypeRef = useRef(displayType);
+ const prevConfigTypeRef = useRef(configType);
+
+ useEffect(() => {
+ // Emulate the granularity picker auto-searching similar to dashboards
+ if (granularity !== prevGranularityRef.current) {
+ prevGranularityRef.current = granularity;
+ onSubmit();
+ }
+ }, [granularity, onSubmit]);
+
+ useEffect(() => {
+ const displayTypeChanged = displayType !== prevDisplayTypeRef.current;
+ const configTypeChanged = configType !== prevConfigTypeRef.current;
+
+ if (displayTypeChanged || configTypeChanged) {
+ prevDisplayTypeRef.current = displayType;
+ prevConfigTypeRef.current = configType;
+
+ if (displayType === DisplayType.Search && typeof select !== 'string') {
+ setValue('select', '');
+ setValue('series', []);
+ }
+
+ if (displayType !== DisplayType.Search && !Array.isArray(select)) {
+ const defaultSeries: SavedChartConfigWithSelectArray['select'] = [
+ {
+ aggFn: 'count',
+ aggCondition: '',
+ aggConditionLanguage: getStoredLanguage() ?? 'lucene',
+ valueExpression: '',
+ },
+ ];
+ setValue('where', '');
+ setValue('select', defaultSeries);
+ setValue('series', defaultSeries);
+ }
+
+ // Don't auto-submit when config type changes, to avoid clearing form state (like source)
+ if (displayTypeChanged) {
+ // true = Suppress error notification (because we're auto-submitting)
+ onSubmit(true);
+ }
+ }
+ }, [displayType, select, setValue, onSubmit, configType]);
+
+ // Emulate the date range picker auto-searching similar to dashboards
+ useEffect(() => {
+ // eslint-disable-next-line react-hooks/set-state-in-effect
+ setQueriedConfig((config: ChartConfigWithDateRange | undefined) => {
+ if (config == null) {
+ return config;
+ }
+
+ return {
+ ...config,
+ dateRange,
+ };
+ });
+ }, [dateRange]);
+
+ const chartConfigForExplanations = useMemo(
+ () =>
+ buildChartConfigForExplanations({
+ queriedConfig,
+ queriedSourceId: queriedSource?.id,
+ tableSource,
+ chartConfig,
+ dateRange,
+ activeTab,
+ dbTimeChartConfig,
+ }),
+ [
+ queriedConfig,
+ queriedSource?.id,
+ tableSource,
+ chartConfig,
+ dateRange,
+ activeTab,
+ dbTimeChartConfig,
+ ],
+ );
+
+ const previousDateRange = getPreviousDateRange(dateRange);
+
+ // Need to force a rerender on change as the modal will not be mounted when initially rendered
+ const [parentRef, setParentRef] = useState(null);
+
+ const handleUpdateDisplaySettings = useCallback(
+ ({
+ numberFormat,
+ alignDateRangeToGranularity,
+ fillNulls,
+ compareToPreviousPeriod,
+ }: ChartConfigDisplaySettings) => {
+ setValue('numberFormat', numberFormat);
+ setValue('alignDateRangeToGranularity', alignDateRangeToGranularity);
+ setValue('fillNulls', fillNulls);
+ setValue('compareToPreviousPeriod', compareToPreviousPeriod);
+ onSubmit();
+ },
+ [setValue, onSubmit],
+ );
+
+ const tableConnection = useMemo(
+ () => tcFromSource(tableSource),
+ [tableSource],
+ );
+
+ return (
+
+
+ (
+
+
+ }
+ data-testid="chart-type-line"
+ >
+ Line/Bar
+
+ }
+ data-testid="chart-type-table"
+ >
+ Table
+
+ }
+ data-testid="chart-type-number"
+ >
+ Number
+
+ }
+ data-testid="chart-type-pie"
+ >
+ Pie
+
+ }
+ data-testid="chart-type-search"
+ >
+ Search
+
+ }
+ data-testid="chart-type-markdown"
+ >
+ Markdown
+
+
+
+ )}
+ />
+
+
+ Chart Name
+
+
+ {isRawSqlDisplayType(displayType) && (
+ (
+
+ )}
+ />
+ )}
+
+
+ {activeTab === 'markdown' ? (
+
+
+
+
+
+
+ ) : isRawSqlInput ? (
+
+ ) : (
+
+ )}
+
+
+
setValue(name, value)}
+ onSubmit={onSubmit}
+ />
+ setSaveToDashboardModalOpen(false)}
+ />
+
+
}
+ >
+ {errors.map(({ message }, index) => (
+ {message}
+ ))}
+
+ );
+};
diff --git a/packages/app/src/components/DBEditTimeChartForm/TileAlertEditor.tsx b/packages/app/src/components/DBEditTimeChartForm/TileAlertEditor.tsx
new file mode 100644
index 00000000..6c32621a
--- /dev/null
+++ b/packages/app/src/components/DBEditTimeChartForm/TileAlertEditor.tsx
@@ -0,0 +1,266 @@
+import {
+ Control,
+ Controller,
+ UseFormSetValue,
+ useWatch,
+} from 'react-hook-form';
+import {
+ AlertThresholdType,
+ isRangeThresholdType,
+} from '@hyperdx/common-utils/dist/types';
+import {
+ ActionIcon,
+ Alert,
+ Badge,
+ Box,
+ Collapse,
+ Group,
+ NativeSelect,
+ NumberInput,
+ Paper,
+ Text,
+ Tooltip,
+ UnstyledButton,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import {
+ IconChevronDown,
+ IconHelpCircle,
+ IconInfoCircleFilled,
+ IconTrash,
+} from '@tabler/icons-react';
+
+import api from '@/api';
+import { AlertChannelForm } from '@/components/Alerts';
+import { AckAlert } from '@/components/alerts/AckAlert';
+import { AlertHistoryCardList } from '@/components/alerts/AlertHistoryCards';
+import { AlertScheduleFields } from '@/components/AlertScheduleFields';
+import { ChartEditorFormState } from '@/components/ChartEditor/types';
+import { optionsToSelectData } from '@/utils';
+import {
+ ALERT_CHANNEL_OPTIONS,
+ intervalToMinutes,
+ TILE_ALERT_INTERVAL_OPTIONS,
+ TILE_ALERT_THRESHOLD_TYPE_OPTIONS,
+} from '@/utils/alerts';
+
+export function TileAlertEditor({
+ control,
+ setValue,
+ alert,
+ onRemove,
+ error,
+ warning,
+ tooltip,
+}: {
+ control: Control;
+ setValue: UseFormSetValue;
+ alert: NonNullable;
+ onRemove: () => void;
+ error?: string;
+ warning?: string;
+ tooltip?: string;
+}) {
+ const [opened, { toggle }] = useDisclosure(true);
+
+ const alertChannelType = useWatch({ control, name: 'alert.channel.type' });
+ const alertThresholdType = useWatch({ control, name: 'alert.thresholdType' });
+ const alertThreshold = useWatch({ control, name: 'alert.threshold' });
+ const alertThresholdMax = useWatch({ control, name: 'alert.thresholdMax' });
+ 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;
+
+ const { data: alertData } = api.useAlert(alert.id);
+ const alertItem = alertData?.data;
+
+ return (
+
+
+
+
+
+
+
+ Alert
+
+ {tooltip && (
+
+
+
+ )}
+ {error && (
+
+
+ Invalid Query
+
+
+ )}
+ {warning && (
+
+
+ Warning
+
+
+ )}
+
+
+
+
+ {alertItem && alertItem.history.length > 0 && (
+
+ )}
+ {alertItem && }
+
+
+
+
+
+
+
+
+
+
+
+ Trigger when the value
+
+ (
+ {
+ field.onChange(e);
+ if (
+ isRangeThresholdType(e.currentTarget.value) &&
+ alertThresholdMax == null
+ ) {
+ setValue('alert.thresholdMax', (alertThreshold ?? 0) + 1);
+ }
+ }}
+ />
+ )}
+ />
+ (
+
+ )}
+ />
+ {isRangeThresholdType(alertThresholdType as AlertThresholdType) && (
+ <>
+
+ and
+
+ (
+
+ )}
+ />
+
+ )}
+ over
+ (
+
+ )}
+ />
+
+ window via
+
+ (
+
+ )}
+ />
+
+ {alert?.createdBy && (
+
+ Created by {alert.createdBy.name || alert.createdBy.email}
+
+ )}
+
+
+ Send to
+
+
+ {(alertThresholdType === AlertThresholdType.EQUAL ||
+ alertThresholdType === AlertThresholdType.NOT_EQUAL) && (
+ }
+ color="gray"
+ py="xs"
+ mt="md"
+ >
+ Note: Floating-point query results are not rounded during equality
+ comparison.
+
+ )}
+
+
+
+ );
+}
diff --git a/packages/app/src/components/DBEditTimeChartForm/__tests__/ChartActionBar.test.tsx b/packages/app/src/components/DBEditTimeChartForm/__tests__/ChartActionBar.test.tsx
new file mode 100644
index 00000000..9d272e15
--- /dev/null
+++ b/packages/app/src/components/DBEditTimeChartForm/__tests__/ChartActionBar.test.tsx
@@ -0,0 +1,224 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { DisplayType } from '@hyperdx/common-utils/dist/types';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ChartEditorFormState } from '@/components/ChartEditor/types';
+
+import { ChartActionBar } from '../ChartActionBar';
+
+jest.mock('@/components/SQLEditor/SQLInlineEditor', () => ({
+ SQLInlineEditorControlled: (props: any) => (
+ {props.label}
+ ),
+}));
+
+jest.mock('@/components/TimePicker', () => ({
+ TimePicker: () => TimePicker
,
+}));
+
+jest.mock('@/GranularityPicker', () => ({
+ GranularityPickerControlled: () => (
+ Granularity
+ ),
+}));
+
+const defaultTableConnection = {
+ databaseName: 'default',
+ tableName: 'logs',
+ connectionId: 'default',
+};
+
+type WrapperProps = {
+ children: (props: { control: any; handleSubmit: any }) => React.ReactNode;
+ defaultValues?: Partial;
+};
+
+function FormWrapper({ children, defaultValues }: WrapperProps) {
+ const { control, handleSubmit } = useForm({
+ defaultValues: {
+ displayType: DisplayType.Line,
+ name: 'Test Chart',
+ select: [
+ {
+ aggFn: 'count',
+ aggCondition: '',
+ aggConditionLanguage: 'lucene',
+ valueExpression: '',
+ },
+ ],
+ where: '',
+ whereLanguage: 'lucene',
+ granularity: 'auto',
+ ...defaultValues,
+ },
+ });
+
+ return <>{children({ control, handleSubmit })};
+}
+
+const renderActionBar = (
+ overrides: Partial> = {},
+) => {
+ const onSubmit = jest.fn();
+ const handleSave = jest.fn();
+ const onSave = jest.fn();
+ const onClose = jest.fn();
+ const setSaveToDashboardModalOpen = jest.fn();
+
+ const result = renderWithMantine(
+
+ {({ control, handleSubmit }) => (
+
+ )}
+ ,
+ );
+
+ return {
+ ...result,
+ onSubmit,
+ handleSave,
+ onSave,
+ onClose,
+ setSaveToDashboardModalOpen,
+ };
+};
+
+describe('ChartActionBar', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ it('should render Save button when onSave is provided', () => {
+ renderActionBar();
+
+ expect(screen.getByTestId('chart-save-button')).toBeInTheDocument();
+ expect(screen.getByTestId('chart-save-button')).toHaveTextContent('Save');
+ });
+
+ it('should not render Save button when onSave is undefined', () => {
+ renderActionBar({ onSave: undefined });
+
+ expect(screen.queryByTestId('chart-save-button')).not.toBeInTheDocument();
+ });
+
+ it('should render Cancel button when onClose is provided', () => {
+ renderActionBar();
+
+ expect(screen.getByText('Cancel')).toBeInTheDocument();
+ });
+
+ it('should not render Cancel button when onClose is undefined', () => {
+ renderActionBar({ onClose: undefined });
+
+ expect(screen.queryByText('Cancel')).not.toBeInTheDocument();
+ });
+
+ it('should call onClose when Cancel is clicked', async () => {
+ const { onClose } = renderActionBar();
+
+ await userEvent.click(screen.getByText('Cancel'));
+
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+
+ it('should render Run button for non-markdown tabs', () => {
+ renderActionBar({ activeTab: 'time' });
+
+ expect(screen.getByTestId('chart-run-query-button')).toBeInTheDocument();
+ expect(screen.getByTestId('chart-run-query-button')).toHaveTextContent(
+ 'Run',
+ );
+ });
+
+ it('should not render Run button for markdown tab', () => {
+ renderActionBar({ activeTab: 'markdown' });
+
+ expect(
+ screen.queryByTestId('chart-run-query-button'),
+ ).not.toBeInTheDocument();
+ });
+
+ it('should call onSubmit when Run is clicked', async () => {
+ const { onSubmit } = renderActionBar();
+
+ await userEvent.click(screen.getByTestId('chart-run-query-button'));
+
+ expect(onSubmit).toHaveBeenCalledTimes(1);
+ });
+
+ it('should render granularity picker for time tab', () => {
+ renderActionBar({ activeTab: 'time' });
+
+ expect(screen.getByTestId('granularity-picker')).toBeInTheDocument();
+ });
+
+ it('should not render granularity picker for non-time tabs', () => {
+ renderActionBar({ activeTab: 'table' });
+
+ expect(screen.queryByTestId('granularity-picker')).not.toBeInTheDocument();
+ });
+
+ it('should render ORDER BY editor for table tab when not raw SQL', () => {
+ renderActionBar({ activeTab: 'table', isRawSqlInput: false });
+
+ expect(screen.getByTestId('sql-editor-order-by')).toBeInTheDocument();
+ });
+
+ it('should not render ORDER BY editor for table tab when raw SQL', () => {
+ renderActionBar({ activeTab: 'table', isRawSqlInput: true });
+
+ expect(screen.queryByTestId('sql-editor-order-by')).not.toBeInTheDocument();
+ });
+
+ it('should render TimePicker when time range props are provided', () => {
+ renderActionBar({
+ displayedTimeInputValue: 'Last 24h',
+ setDisplayedTimeInputValue: jest.fn(),
+ onTimeRangeSearch: jest.fn(),
+ });
+
+ expect(screen.getByTestId('time-picker')).toBeInTheDocument();
+ });
+
+ it('should not render TimePicker when time range props are missing', () => {
+ renderActionBar({
+ displayedTimeInputValue: undefined,
+ setDisplayedTimeInputValue: undefined,
+ onTimeRangeSearch: undefined,
+ });
+
+ expect(screen.queryByTestId('time-picker')).not.toBeInTheDocument();
+ });
+
+ it('should disable Cancel button when isSaving is true', () => {
+ renderActionBar({ isSaving: true });
+
+ expect(screen.getByText('Cancel').closest('button')).toBeDisabled();
+ });
+
+ it('should render action bar controls for raw SQL input mode', () => {
+ renderActionBar({ isRawSqlInput: true, activeTab: 'time' });
+
+ // The key regression test: action bar renders even for raw SQL
+ expect(screen.getByTestId('chart-save-button')).toBeInTheDocument();
+ expect(screen.getByText('Cancel')).toBeInTheDocument();
+ expect(screen.getByTestId('chart-run-query-button')).toBeInTheDocument();
+ expect(screen.getByTestId('granularity-picker')).toBeInTheDocument();
+ });
+});
diff --git a/packages/app/src/components/DBEditTimeChartForm/__tests__/ChartPreviewPanel.test.tsx b/packages/app/src/components/DBEditTimeChartForm/__tests__/ChartPreviewPanel.test.tsx
new file mode 100644
index 00000000..3463d867
--- /dev/null
+++ b/packages/app/src/components/DBEditTimeChartForm/__tests__/ChartPreviewPanel.test.tsx
@@ -0,0 +1,200 @@
+import React from 'react';
+import { SourceKind, TSource } from '@hyperdx/common-utils/dist/types';
+import { screen } from '@testing-library/react';
+
+import { ChartPreviewPanel } from '../ChartPreviewPanel';
+
+jest.mock('@/components/ChartSQLPreview', () => ({
+ __esModule: true,
+ default: () => Chart SQL Preview
,
+}));
+
+jest.mock('@/components/DBTimeChart', () => ({
+ DBTimeChart: () => Time Chart
,
+}));
+
+jest.mock('@/components/DBTableChart', () => ({
+ __esModule: true,
+ default: () => Table Chart
,
+}));
+
+jest.mock('@/components/DBNumberChart', () => ({
+ __esModule: true,
+ default: () => Number Chart
,
+}));
+
+jest.mock('@/components/DBPieChart', () => ({
+ DBPieChart: () => Pie Chart
,
+}));
+
+jest.mock('@/components/DBSqlRowTableWithSidebar', () => ({
+ __esModule: true,
+ default: () => SQL Row Table
,
+}));
+
+jest.mock('@/source', () => ({
+ getFirstTimestampValueExpression: jest.fn().mockReturnValue('Timestamp'),
+}));
+
+const dateRange: [Date, Date] = [
+ new Date('2024-01-01'),
+ new Date('2024-01-02'),
+];
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
+const mockTableSource = {
+ id: 'test-source',
+ kind: SourceKind.Log,
+ name: 'Test Source',
+ from: {
+ databaseName: 'default',
+ tableName: 'logs',
+ },
+ connection: 'default',
+ timestampValueExpression: 'Timestamp',
+} as TSource;
+
+const baseBuilderConfig = {
+ timestampValueExpression: 'Timestamp',
+ connection: 'default',
+ from: { databaseName: 'default', tableName: 'logs' },
+ select: [{ aggFn: 'count' as const, valueExpression: '' }],
+ where: '',
+ granularity: 'auto' as const,
+ dateRange,
+};
+
+const renderPanel = (
+ overrides: Partial> = {},
+) => {
+ return renderWithMantine(
+ ,
+ );
+};
+
+describe('ChartPreviewPanel', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe('when no query has been run', () => {
+ it('should show placeholder message', () => {
+ renderPanel({ queriedConfig: undefined });
+
+ expect(screen.getByText(/please start by defining/i)).toBeInTheDocument();
+ });
+
+ it('should not show placeholder for markdown tab', () => {
+ renderPanel({ queriedConfig: undefined, activeTab: 'markdown' });
+
+ expect(
+ screen.queryByText(/please start by defining/i),
+ ).not.toBeInTheDocument();
+ });
+ });
+
+ describe('when query is ready', () => {
+ it('should render time chart for time tab', () => {
+ renderPanel({
+ queriedConfig: baseBuilderConfig,
+ dbTimeChartConfig: baseBuilderConfig,
+ activeTab: 'time',
+ });
+
+ expect(screen.getByTestId('db-time-chart')).toBeInTheDocument();
+ });
+
+ it('should render table chart for table tab', () => {
+ renderPanel({
+ queriedConfig: baseBuilderConfig,
+ tableSource: mockTableSource,
+ activeTab: 'table',
+ });
+
+ expect(screen.getByTestId('db-table-chart')).toBeInTheDocument();
+ });
+
+ it('should render number chart for number tab', () => {
+ renderPanel({
+ queriedConfig: baseBuilderConfig,
+ activeTab: 'number',
+ });
+
+ expect(screen.getByTestId('db-number-chart')).toBeInTheDocument();
+ });
+
+ it('should render pie chart for pie tab', () => {
+ renderPanel({
+ queriedConfig: baseBuilderConfig,
+ activeTab: 'pie',
+ });
+
+ expect(screen.getByTestId('db-pie-chart')).toBeInTheDocument();
+ });
+
+ it('should not render time chart when dbTimeChartConfig is missing', () => {
+ renderPanel({
+ queriedConfig: baseBuilderConfig,
+ dbTimeChartConfig: undefined,
+ activeTab: 'time',
+ });
+
+ expect(screen.queryByTestId('db-time-chart')).not.toBeInTheDocument();
+ });
+ });
+
+ describe('generated SQL section', () => {
+ it('should show Generated SQL accordion when showGeneratedSql is true', () => {
+ renderPanel({
+ queriedConfig: baseBuilderConfig,
+ showGeneratedSql: true,
+ activeTab: 'time',
+ });
+
+ expect(screen.getByText('Generated SQL')).toBeInTheDocument();
+ });
+
+ it('should not show Generated SQL when showGeneratedSql is false', () => {
+ renderPanel({
+ queriedConfig: baseBuilderConfig,
+ showGeneratedSql: false,
+ activeTab: 'time',
+ });
+
+ expect(screen.queryByText('Generated SQL')).not.toBeInTheDocument();
+ });
+
+ it('should show Sample Matched Events when showSampleEvents is true', () => {
+ renderPanel({
+ queriedConfig: baseBuilderConfig,
+ showGeneratedSql: true,
+ showSampleEvents: true,
+ tableSource: mockTableSource,
+ activeTab: 'time',
+ });
+
+ expect(screen.getByText('Sample Matched Events')).toBeInTheDocument();
+ });
+
+ it('should not show Sample Matched Events when showSampleEvents is false', () => {
+ renderPanel({
+ queriedConfig: baseBuilderConfig,
+ showGeneratedSql: true,
+ showSampleEvents: false,
+ activeTab: 'time',
+ });
+
+ expect(
+ screen.queryByText('Sample Matched Events'),
+ ).not.toBeInTheDocument();
+ });
+ });
+});
diff --git a/packages/app/src/components/__tests__/DBEditTimeChartForm.test.tsx b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
similarity index 85%
rename from packages/app/src/components/__tests__/DBEditTimeChartForm.test.tsx
rename to packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
index cbe9ded3..5021139e 100644
--- a/packages/app/src/components/__tests__/DBEditTimeChartForm.test.tsx
+++ b/packages/app/src/components/DBEditTimeChartForm/__tests__/DBEditTimeChartForm.test.tsx
@@ -11,7 +11,7 @@ import userEvent from '@testing-library/user-event';
import { useSource } from '@/source';
-import DBEditTimeChartForm from '../DBEditTimeChartForm';
+import DBEditTimeChartForm from '..';
// Mock the hooks that fetch data
jest.mock('@/hooks/useFetchMetricResourceAttrs', () => ({
@@ -68,9 +68,10 @@ jest.mock('@/source', () => ({
return { data: undefined };
}),
getFirstTimestampValueExpression: jest.fn().mockReturnValue('Timestamp'),
+ getTraceDurationNumberFormat: jest.fn().mockReturnValue(undefined),
}));
-jest.mock('../MetricNameSelect', () => ({
+jest.mock('../../MetricNameSelect', () => ({
MetricNameSelect: (props: any) => {
const { error, onFocus, setMetricName, metricName } = props;
const testId = props['data-testid'];
@@ -93,7 +94,7 @@ jest.mock('../MetricNameSelect', () => ({
},
}));
-jest.mock('../SourceSelect', () => ({
+jest.mock('../../SourceSelect', () => ({
SourceSelectControlled: () => (