feat: add colors to event patterns based on severitytext (#841)

Ref: HDX-1738

Author: knudtty

.changeset/thick-melons-film.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+add severitytext coloring to event patterns

packages/app/src/DBSearchPage.tsx

@@ -1579,6 +1579,7 @@ function DBSearchPage() {
                       analysisMode === 'results' && (
                         <DBSqlRowTable
                           config={dbSqlRowTableConfig}
+                          sourceId={searchedConfig.source ?? ''}
                           onRowExpandClick={onRowExpandClick}
                           highlightedLineId={rowId ?? undefined}
                           enabled={isReady}

packages/app/src/components/DBRowTable.tsx

@@ -47,11 +47,13 @@ import { useTableMetadata } from '@/hooks/useMetadata';
 import useOffsetPaginatedQuery from '@/hooks/useOffsetPaginatedQuery';
 import { useGroupedPatterns } from '@/hooks/usePatterns';
 import useRowWhere from '@/hooks/useRowWhere';
+import { useSource } from '@/source';
 import { UNDEFINED_WIDTH } from '@/tableUtils';
 import { FormatTime } from '@/useFormatTime';
 import { useUserPreferences } from '@/useUserPreferences';
 import {
   getLogLevelClass,
+  logLevelColor,
   useLocalStorage,
   usePrevious,
   useWindowSize,
@@ -363,7 +365,7 @@ export const RawLogTable = memo(
                     <PatternTrendChart
                       data={value.data}
                       dateRange={value.dateRange}
-                      // color={color}
+                      color={logLevelColor(info.row.original.severityText)}
                     />
                   </div>
                 );
@@ -898,6 +900,7 @@ export function selectColumnMapWithoutAdditionalKeys(
 
 export function DBSqlRowTable({
   config,
+  sourceId,
   onError,
   onRowExpandClick,
   highlightedLineId,
@@ -908,6 +911,7 @@ export function DBSqlRowTable({
   denoiseResults = false,
 }: {
   config: ChartConfigWithDateRange;
+  sourceId?: string;
   onRowExpandClick?: (where: string) => void;
   highlightedLineId: string | undefined;
   queryKeyPrefix?: string;
@@ -990,11 +994,13 @@ export function DBSqlRowTable({
     }
   }, [isError, onError, error]);
 
+  const { data: source } = useSource({ id: sourceId });
   const patternColumn = columns[columns.length - 1];
   const groupedPatterns = useGroupedPatterns({
     config,
     samples: 10_000,
     bodyValueExpression: patternColumn ?? '',
+    severityTextExpression: source?.severityTextExpression ?? '',
     totalCount: undefined,
     enabled: denoiseResults,
   });

packages/app/src/components/PatternSidePanel.tsx

@@ -10,6 +10,7 @@ import { DrawerBody, DrawerHeader } from '@/components/DrawerUtils';
 import { Pattern } from '@/hooks/usePatterns';
 import {
   PATTERN_COLUMN_ALIAS,
+  SEVERITY_TEXT_COLUMN_ALIAS,
   TIMESTAMP_COLUMN_ALIAS,
 } from '@/hooks/usePatterns';
 import useRowWhere from '@/hooks/useRowWhere';
@@ -43,6 +44,7 @@ export default function PatternSidePanel({
     const map = new Map<string, { _type: JSDataType | null }>([
       [TIMESTAMP_COLUMN_ALIAS, { _type: JSDataType.Date }],
       [PATTERN_COLUMN_ALIAS, { _type: JSDataType.String }],
+      [SEVERITY_TEXT_COLUMN_ALIAS, { _type: JSDataType.String }],
       [serviceNameExpression, { _type: JSDataType.String }],
     ]);
     return map;
@@ -52,6 +54,7 @@ export default function PatternSidePanel({
     return {
       [TIMESTAMP_COLUMN_ALIAS]: 'Timestamp',
       [serviceNameExpression]: 'Service',
+      [SEVERITY_TEXT_COLUMN_ALIAS]: 'level',
       [PATTERN_COLUMN_ALIAS]: 'Body',
     };
   }, [serviceNameExpression]);
@@ -60,6 +63,7 @@ export default function PatternSidePanel({
     return [
       TIMESTAMP_COLUMN_ALIAS,
       serviceNameExpression,
+      SEVERITY_TEXT_COLUMN_ALIAS,
       PATTERN_COLUMN_ALIAS,
     ];
   }, [serviceNameExpression]);

packages/app/src/components/PatternTable.tsx

@@ -39,6 +39,7 @@ export default function PatternTable({
       config,
       samples: SAMPLES,
       bodyValueExpression,
+      severityTextExpression: source?.severityTextExpression ?? '',
       totalCount,
     });
 
@@ -57,7 +58,12 @@ export default function PatternTable({
         wrapLines={true}
         isLoading={isLoading}
         rows={sortedGroupedResults ?? []}
-        displayedColumns={['__hdx_pattern_trend', 'countStr', 'pattern']}
+        displayedColumns={[
+          '__hdx_pattern_trend',
+          'countStr',
+          'severityText',
+          'pattern',
+        ]}
         onRowExpandClick={row => setSelectedPattern(row as Pattern)}
         hasNextPage={false}
         fetchNextPage={() => {}}
@@ -68,6 +74,7 @@ export default function PatternTable({
           __hdx_pattern_trend: 'Trend',
           countStr: 'Count',
           pattern: 'Pattern',
+          severityText: 'level',
         }}
       />
       {selectedPattern && source && (

packages/app/src/hooks/usePatterns.tsx

@@ -98,6 +98,7 @@ async function mineEventPatterns(logs: string[], pyodide: any) {
 
 export const PATTERN_COLUMN_ALIAS = '__hdx_pattern_field';
 export const TIMESTAMP_COLUMN_ALIAS = '__hdx_timestamp';
+export const SEVERITY_TEXT_COLUMN_ALIAS = '__hdx_severity_text';
 
 export type SampleLog = {
   [PATTERN_COLUMN_ALIAS]: string;
@@ -112,15 +113,17 @@ export type Pattern = {
   samples: SampleLog[];
 };
 
-export function usePatterns({
+function usePatterns({
   config,
   samples,
   bodyValueExpression,
+  severityTextExpression,
   enabled = true,
 }: {
   config: ChartConfigWithDateRange;
   samples: number;
   bodyValueExpression: string;
+  severityTextExpression?: string;
   enabled?: boolean;
 }) {
   const configWithPrimaryAndPartitionKey = useConfigWithPrimaryAndPartitionKey({
@@ -129,6 +132,9 @@ export function usePatterns({
     select: [
       `${bodyValueExpression} as ${PATTERN_COLUMN_ALIAS}`,
       `${config.timestampValueExpression} as ${TIMESTAMP_COLUMN_ALIAS}`,
+      ...(severityTextExpression
+        ? [`${severityTextExpression} as ${SEVERITY_TEXT_COLUMN_ALIAS}`]
+        : []),
     ].join(','),
     // TODO: Proper sampling
     orderBy: [{ ordering: 'DESC', valueExpression: 'rand()' }],
@@ -186,19 +192,22 @@ export function useGroupedPatterns({
   config,
   samples,
   bodyValueExpression,
+  severityTextExpression,
   totalCount,
   enabled = true,
 }: {
   config: ChartConfigWithDateRange;
   samples: number;
   bodyValueExpression: string;
+  severityTextExpression?: string;
   totalCount?: number;
   enabled?: boolean;
 }) {
   const { data: results, isFetching } = usePatterns({
     config,
     samples,
     bodyValueExpression,
+    severityTextExpression,
     enabled,
   });
   const columnMap = useMemo(() => {
@@ -258,6 +267,7 @@ export function useGroupedPatterns({
         pattern: rows[rows.length - 1].__hdx_pattern, // last pattern is usually the most up to date templated pattern
         count,
         countStr: `~${count}`,
+        severityText: rows[rows.length - 1].__hdx_severity_text, // last severitytext is usually representative of the entire pattern set
         samples: rows,
         __hdx_pattern_trend: {
           data: Object.entries(bucketCounts).map(([bucket, count]) => ({