style: move types from renderChartConfig + add exceptions types (#568)

.changeset/gentle-jars-judge.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/common-utils": patch
+---
+
+style: move types from renderChartConfig + add exceptions types

packages/api/src/tasks/checkAlerts.ts

@@ -3,11 +3,11 @@
 // --------------------------------------------------------
 import * as clickhouse from '@hyperdx/common-utils/dist/clickhouse';
 import { getMetadata } from '@hyperdx/common-utils/dist/metadata';
+import { renderChartConfig } from '@hyperdx/common-utils/dist/renderChartConfig';
 import {
   ChartConfigWithOptDateRange,
-  renderChartConfig,
-} from '@hyperdx/common-utils/dist/renderChartConfig';
-import { DisplayType } from '@hyperdx/common-utils/dist/types';
+  DisplayType,
+} from '@hyperdx/common-utils/dist/types';
 import * as fns from 'date-fns';
 import * as fnsTz from 'date-fns-tz';
 import Handlebars, { HelperOptions } from 'handlebars';
@@ -708,6 +708,7 @@ export const processAlert = async (now: Date, alert: EnhancedAlert) => {
           connectionId = _source.connection.toString();
           chartConfig = {
             connection: connectionId,
+            displayType: firstTile.config.displayType,
             dateRange: [checkStartTime, checkEndTime],
             from: _source.from,
             granularity: `${windowSizeInMins} minute`,

packages/app/src/BenchmarkPage.tsx

@@ -366,7 +366,7 @@ function BenchmarkPage() {
                         },
                         granularity: '1 second' as const,
                         where: '',
-                        fillNulls: false as const,
+                        fillNulls: false,
                       }}
                       showDisplaySwitcher={false}
                     />

packages/app/src/ChartUtils.tsx

@@ -4,9 +4,10 @@ import Select from 'react-select';
 import AsyncSelect from 'react-select/async';
 import {
   ChartConfigWithDateRange,
+  DisplayType,
   SavedChartConfig,
-} from '@hyperdx/common-utils/dist/renderChartConfig';
-import { DisplayType, SQLInterval } from '@hyperdx/common-utils/dist/types';
+  SQLInterval,
+} from '@hyperdx/common-utils/dist/types';
 import {
   Divider,
   Group,

packages/app/src/DBChartPage.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import dynamic from 'next/dynamic';
 import { parseAsJson, parseAsStringEnum, useQueryState } from 'nuqs';
-import { SavedChartConfig } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { SavedChartConfig } from '@hyperdx/common-utils/dist/types';
 import { Box } from '@mantine/core';
 
 import { DEFAULT_CHART_CONFIG, Granularity } from '@/ChartUtils';

packages/app/src/DBDashboardPage.tsx

@@ -19,10 +19,8 @@ import { Controller, useForm } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 import {
   ChartConfigWithDateRange,
-  Filter,
-} from '@hyperdx/common-utils/dist/renderChartConfig';
-import {
   DisplayType,
+  Filter,
   SearchCondition,
   SearchConditionLanguage,
   SQLInterval,

packages/app/src/DBSearchPage.tsx

@@ -22,9 +22,9 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   ChartConfig,
   ChartConfigWithDateRange,
+  DisplayType,
   Filter,
-} from '@hyperdx/common-utils/dist/renderChartConfig';
-import { DisplayType } from '@hyperdx/common-utils/dist/types';
+} from '@hyperdx/common-utils/dist/types';
 import {
   ActionIcon,
   Box,

packages/app/src/ServicesDashboardPage.tsx

@@ -7,8 +7,7 @@ import {
   useQueryStates,
 } from 'nuqs';
 import { UseControllerProps, useForm } from 'react-hook-form';
-import type { Filter } from '@hyperdx/common-utils/dist/renderChartConfig';
-import { DisplayType, TSource } from '@hyperdx/common-utils/dist/types';
+import { DisplayType, Filter, TSource } from '@hyperdx/common-utils/dist/types';
 import {
   Box,
   Button,

packages/app/src/components/ChartSQLPreview.tsx

@@ -1,6 +1,6 @@
 import { format } from 'sql-formatter';
 import { sql } from '@codemirror/lang-sql';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import { Paper } from '@mantine/core';
 import CodeMirror from '@uiw/react-codemirror';
 

packages/app/src/components/DBDeltaChart.tsx

@@ -10,12 +10,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import {
-  ChartConfigWithOptDateRange,
-  Filter,
-  inverseSqlAstFilter,
-  SqlAstFilter,
-} from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithOptDateRange } from '@hyperdx/common-utils/dist/types';
 import { Box, Flex, Group, Pagination, Text } from '@mantine/core';
 
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';

packages/app/src/components/DBEditTimeChartForm.tsx

@@ -9,10 +9,11 @@ import {
 } from 'react-hook-form';
 import {
   ChartConfigWithDateRange,
+  DisplayType,
   Filter,
   SavedChartConfig,
-} from '@hyperdx/common-utils/dist/renderChartConfig';
-import { DisplayType, SelectList } from '@hyperdx/common-utils/dist/types';
+  SelectList,
+} from '@hyperdx/common-utils/dist/types';
 import {
   Accordion,
   Box,

packages/app/src/components/DBHeatmapChart.tsx

@@ -4,7 +4,7 @@ import type { Plugin } from 'uplot';
 import uPlot from 'uplot';
 import UplotReact from 'uplot-react';
 import { inferTimestampColumn } from '@hyperdx/common-utils/dist/clickhouse';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import { DisplayType } from '@hyperdx/common-utils/dist/types';
 import { Divider, Paper, Text } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';

packages/app/src/components/DBHistogramChart.tsx

@@ -11,7 +11,7 @@ import {
 } from 'recharts';
 import { CategoricalChartState } from 'recharts/types/chart/types';
 import { ClickHouseQueryError } from '@hyperdx/common-utils/dist/clickhouse';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import { Box, Code, Text } from '@mantine/core';
 
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';

packages/app/src/components/DBListBarChart.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import Link from 'next/link';
 import { ClickHouseQueryError } from '@hyperdx/common-utils/dist/clickhouse';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import { Box, Code, Flex, HoverCard, Text } from '@mantine/core';
 import { FloatingPosition } from '@mantine/core/lib/components/Floating';
 

packages/app/src/components/DBNumberChart.tsx

@@ -1,5 +1,5 @@
 import { ClickHouseQueryError } from '@hyperdx/common-utils/dist/clickhouse';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import { Box, Code, Flex, Text } from '@mantine/core';
 
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';

packages/app/src/components/DBRowTable.tsx

@@ -10,8 +10,10 @@ import {
   extractColumnReference,
   JSDataType,
 } from '@hyperdx/common-utils/dist/clickhouse';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/renderChartConfig';
-import { SelectList } from '@hyperdx/common-utils/dist/types';
+import {
+  ChartConfigWithDateRange,
+  SelectList,
+} from '@hyperdx/common-utils/dist/types';
 import { Box, Code, Flex, Text } from '@mantine/core';
 import { FetchNextPageOptions } from '@tanstack/react-query';
 import {

packages/app/src/components/DBSearchPageFilters.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import {
   Button,
   Checkbox,

packages/app/src/components/DBTableChart.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { ClickHouseQueryError } from '@hyperdx/common-utils/dist/clickhouse';
-import { ChartConfigWithOptDateRange } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithOptDateRange } from '@hyperdx/common-utils/dist/types';
 import { Box, Code, Text } from '@mantine/core';
 
 import { Table } from '@/HDXMultiSeriesTableChart';

packages/app/src/components/DBTimeChart.tsx

@@ -6,8 +6,10 @@ import {
   ClickHouseQueryError,
   formatResponseForTimeChart,
 } from '@hyperdx/common-utils/dist/clickhouse';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/renderChartConfig';
-import { DisplayType } from '@hyperdx/common-utils/dist/types';
+import {
+  ChartConfigWithDateRange,
+  DisplayType,
+} from '@hyperdx/common-utils/dist/types';
 import { Box, Button, Code, Collapse, Text } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 

packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { parseAsString, useQueryState } from 'nuqs';
 import Drawer from 'react-modern-drawer';
-import type { Filter } from '@hyperdx/common-utils/dist/renderChartConfig';
+import type { Filter } from '@hyperdx/common-utils/dist/types';
 import { Grid, Group, Text } from '@mantine/core';
 
 import { INTEGER_NUMBER_FORMAT, MS_NUMBER_FORMAT } from '@/ChartUtils';

packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from 'react';
 import { parseAsString, useQueryState } from 'nuqs';
 import Drawer from 'react-modern-drawer';
-import type { Filter } from '@hyperdx/common-utils/dist/renderChartConfig';
+import type { Filter } from '@hyperdx/common-utils/dist/types';
 import { Grid, Group, Text } from '@mantine/core';
 
 import {

packages/app/src/components/ServiceDashboardSlowestEventsTile.tsx

@@ -1,6 +1,5 @@
 import { ClickHouseQueryError } from '@hyperdx/common-utils/dist/clickhouse';
-import type { Filter } from '@hyperdx/common-utils/dist/renderChartConfig';
-import { TSource } from '@hyperdx/common-utils/dist/types';
+import type { Filter, TSource } from '@hyperdx/common-utils/dist/types';
 import { Box, Code, Group, Text } from '@mantine/core';
 
 import { ChartBox } from '@/components/ChartBox';

packages/app/src/dashboard.ts

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { parseAsJson, useQueryState } from 'nuqs';
-import { SavedChartConfig } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { SavedChartConfig } from '@hyperdx/common-utils/dist/types';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { hashCode } from '@/utils';

packages/app/src/hdxMTViews.ts

@@ -5,7 +5,6 @@ import {
   parameterizedQueryToSql,
 } from '@hyperdx/common-utils/dist/clickhouse';
 import {
-  ChartConfigWithOptDateRange,
   FIXED_TIME_BUCKET_EXPR_ALIAS,
   isNonEmptyWhereExpr,
   isUsingGroupBy,
@@ -13,6 +12,7 @@ import {
 } from '@hyperdx/common-utils/dist/renderChartConfig';
 import {
   AggregateFunction,
+  ChartConfigWithOptDateRange,
   DerivedColumn,
   SQLInterval,
 } from '@hyperdx/common-utils/dist/types';

packages/app/src/hooks/useChartConfig.tsx

@@ -4,10 +4,8 @@ import {
   ClickHouseQueryError,
   parameterizedQueryToSql,
 } from '@hyperdx/common-utils/dist/clickhouse';
-import {
-  ChartConfigWithOptDateRange,
-  renderChartConfig,
-} from '@hyperdx/common-utils/dist/renderChartConfig';
+import { renderChartConfig } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithOptDateRange } from '@hyperdx/common-utils/dist/types';
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 
 import { getClickhouseClient } from '@/clickhouse';

packages/app/src/hooks/useExplainQuery.tsx

@@ -1,7 +1,5 @@
-import {
-  ChartConfigWithDateRange,
-  renderChartConfig,
-} from '@hyperdx/common-utils/dist/renderChartConfig';
+import { renderChartConfig } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 
 import { getClickhouseClient } from '@/clickhouse';

packages/app/src/hooks/useMetadata.tsx

@@ -1,6 +1,6 @@
 import { ColumnMeta } from '@hyperdx/common-utils/dist/clickhouse';
 import { Field, TableMetadata } from '@hyperdx/common-utils/dist/metadata';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import {
   keepPreviousData,
   useQuery,

packages/app/src/hooks/useOffsetPaginatedQuery.tsx

@@ -5,10 +5,8 @@ import {
   ClickHouseQueryError,
   ColumnMetaType,
 } from '@hyperdx/common-utils/dist/clickhouse';
-import {
-  ChartConfigWithDateRange,
-  renderChartConfig,
-} from '@hyperdx/common-utils/dist/renderChartConfig';
+import { renderChartConfig } from '@hyperdx/common-utils/dist/renderChartConfig';
+import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 import {
   QueryClient,
   QueryFunction,

packages/app/src/searchFilters.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import produce from 'immer';
-import type { Filter } from '@hyperdx/common-utils/dist/renderChartConfig';
+import type { Filter } from '@hyperdx/common-utils/dist/types';
 
 export type FilterState = {
   [key: string]: Set<string>;

packages/app/src/types.ts

@@ -1,9 +1,12 @@
 import { z } from 'zod';
 import {
   DashboardSchema,
+  NumberFormat as _NumberFormat,
   SavedSearchSchema,
 } from '@hyperdx/common-utils/dist/types';
 
+export type NumberFormat = _NumberFormat;
+
 export type Team = {
   allowedAuthMethods: any[];
   apiKey?: string;
@@ -176,17 +179,6 @@ export type StacktraceBreadcrumb = {
   timestamp: number;
 };
 
-export type NumberFormat = {
-  output?: 'currency' | 'percent' | 'byte' | 'time' | 'number';
-  mantissa?: number;
-  thousandSeparated?: boolean;
-  average?: boolean;
-  decimalBytes?: boolean;
-  factor?: number;
-  currencySymbol?: string;
-  unit?: string;
-};
-
 export type AggFn =
   | 'avg_rate'
   | 'avg'

packages/common-utils/src/metadata.ts

@@ -8,10 +8,8 @@ import {
   JSDataType,
   tableExpr,
 } from '@/clickhouse';
-import {
-  ChartConfigWithDateRange,
-  renderChartConfig,
-} from '@/renderChartConfig';
+import { renderChartConfig } from '@/renderChartConfig';
+import type { ChartConfigWithDateRange } from '@/types';
 
 const DEFAULT_SAMPLE_SIZE = 1e6;
 

packages/common-utils/src/renderChartConfig.ts

@@ -7,12 +7,13 @@ import { CustomSchemaSQLSerializerV2, SearchQueryBuilder } from '@/queryParser';
 import {
   AggregateFunction,
   AggregateFunctionWithCombinators,
-  DisplayType,
+  ChartConfigWithDateRange,
+  ChartConfigWithOptDateRange,
   SearchCondition,
   SearchConditionLanguage,
   SelectList,
-  SelectSQLStatement,
   SortSpecificationList,
+  SqlAstFilter,
   SQLInterval,
 } from '@/types';
 import {
@@ -27,68 +28,6 @@ type ColumnRef = SQLParser.ColumnRef & {
   }[];
 };
 
-export type NumberFormat = {
-  output?: 'currency' | 'percent' | 'byte' | 'time' | 'number';
-  mantissa?: number;
-  thousandSeparated?: boolean;
-  average?: boolean;
-  decimalBytes?: boolean;
-  factor?: number;
-  currencySymbol?: string;
-  unit?: string;
-};
-
-export type SqlAstFilter = {
-  type: 'sql_ast';
-  operator: '=' | '<' | '>' | '!=' | '<=' | '>=';
-  // SQL Expressions
-  left: string;
-  right: string;
-};
-
-export type Filter =
-  | {
-      type: 'lucene' | 'sql';
-      condition: SearchCondition;
-    }
-  | SqlAstFilter;
-
-// Used to actually query the data in a given chart
-export type ChartConfig = {
-  displayType?: DisplayType;
-  numberFormat?: NumberFormat;
-  timestampValueExpression: string;
-  implicitColumnExpression?: string; // Where lucene will search if given bare terms
-  granularity?: SQLInterval | 'auto';
-  markdown?: string; // Markdown Content
-  filtersLogicalOperator?: 'AND' | 'OR'; // Default AND
-  filters?: Filter[]; // Additional filters to where clause
-  connection: string; // Connection ID
-  fillNulls?: number | false; // undefined = 0, false = no fill
-  selectGroupBy?: boolean; // Add groupBy elements to select statement (default behavior: true)
-  // TODO: Color support
-} & SelectSQLStatement;
-
-// Saved configuration, has a variable source ID that we pull at query time
-export type SavedChartConfig = {
-  name: string;
-  source: string;
-} & Omit<ChartConfig, 'timestampValueExpression' | 'from' | 'connection'>;
-
-type DateRange = {
-  dateRange: [Date, Date];
-  dateRangeStartInclusive?: boolean; // default true
-};
-
-export type ChartConfigWithDateRange = ChartConfig & DateRange;
-// For non-time-based searches (ex. grab 1 row)
-export type ChartConfigWithOptDateRange = Omit<
-  ChartConfig,
-  'timestampValueExpression'
-> & {
-  timestampValueExpression?: string;
-} & Partial<DateRange>;
-
 export const FIXED_TIME_BUCKET_EXPR_ALIAS = '__hdx_time_bucket';
 
 export function isUsingGroupBy(

packages/common-utils/src/types.ts

@@ -129,6 +129,47 @@ export type SelectSQLStatement = {
   limit?: Limit;
 };
 
+// -------------------------
+// EXCEPTIONS
+// -------------------------
+export type StacktraceFrame = {
+  filename: string;
+  function: string;
+  module?: string;
+  lineno: number;
+  colno: number;
+  in_app: boolean;
+  context_line?: string;
+  pre_context?: string[];
+  post_context?: string[];
+};
+
+export type StacktraceBreadcrumbCategory =
+  | 'ui.click'
+  | 'fetch'
+  | 'xhr'
+  | 'console'
+  | 'navigation'
+  | string;
+
+export type StacktraceBreadcrumb = {
+  type?: string;
+  level?: string;
+  event_id?: string;
+  category?: StacktraceBreadcrumbCategory;
+  message?: string;
+  data?: { [key: string]: any };
+  timestamp: number;
+};
+
+// -------------------------
+// WEBHOOKS
+// -------------------------
+export enum WebhookService {
+  Slack = 'slack',
+  Generic = 'generic',
+}
+
 // -------------------------
 // ALERTS
 // -------------------------
@@ -239,6 +280,8 @@ export const NumberFormatSchema = z.object({
   unit: z.string().optional(),
 });
 
+export type NumberFormat = z.infer<typeof NumberFormatSchema>;
+
 export const SqlAstFilterSchema = z.object({
   type: z.literal('sql_ast'),
   operator: z.enum(['=', '<', '>', '!=', '<=', '>=']),
@@ -246,6 +289,8 @@ export const SqlAstFilterSchema = z.object({
   right: z.string(),
 });
 
+export type SqlAstFilter = z.infer<typeof SqlAstFilterSchema>;
+
 export const FilterSchema = z.union([
   z.object({
     type: z.enum(['lucene', 'sql']),
@@ -254,17 +299,19 @@ export const FilterSchema = z.union([
   SqlAstFilterSchema,
 ]);
 
+export type Filter = z.infer<typeof FilterSchema>;
+
 export const _ChartConfigSchema = z.object({
-  displayType: z.nativeEnum(DisplayType),
+  displayType: z.nativeEnum(DisplayType).optional(),
   numberFormat: NumberFormatSchema.optional(),
   timestampValueExpression: z.string(),
   implicitColumnExpression: z.string().optional(),
-  granularity: z.string().optional(),
+  granularity: z.union([SQLIntervalSchema, z.literal('auto')]).optional(),
   markdown: z.string().optional(),
   filtersLogicalOperator: z.enum(['AND', 'OR']).optional(),
   filters: z.array(FilterSchema).optional(),
   connection: z.string(),
-  fillNulls: z.number().optional(),
+  fillNulls: z.union([z.number(), z.literal(false)]).optional(),
   selectGroupBy: z.boolean().optional(),
 });
 
@@ -273,6 +320,22 @@ export const ChartConfigSchema = z.intersection(
   SelectSQLStatementSchema,
 );
 
+export type ChartConfig = z.infer<typeof ChartConfigSchema>;
+
+export type DateRange = {
+  dateRange: [Date, Date];
+  dateRangeStartInclusive?: boolean; // default true
+};
+
+export type ChartConfigWithDateRange = ChartConfig & DateRange;
+// For non-time-based searches (ex. grab 1 row)
+export type ChartConfigWithOptDateRange = Omit<
+  ChartConfig,
+  'timestampValueExpression'
+> & {
+  timestampValueExpression?: string;
+} & Partial<DateRange>;
+
 export const SavedChartConfigSchema = z.intersection(
   z.intersection(
     z.object({