feat: Add custom trace-level attributes above trace waterfall

.changeset/honest-mice-applaud.md

@@ -0,0 +1,7 @@
+---
+"@hyperdx/common-utils": patch
+"@hyperdx/api": patch
+"@hyperdx/app": patch
+---
+
+feat: Add custom trace-level attributes above trace waterfall

packages/api/src/models/source.ts

@@ -66,6 +66,9 @@ export const Source = mongoose.model<ISource>(
       statusCodeExpression: String,
       statusMessageExpression: String,
       spanEventsValueExpression: String,
+      highlightedTraceAttributeExpressions: {
+        type: mongoose.Schema.Types.Array,
+      },
 
       metricTables: {
         type: {

packages/app/src/DBSearchPage.tsx

@@ -34,6 +34,7 @@ import {
   DisplayType,
   Filter,
   SourceKind,
+  TSource,
 } from '@hyperdx/common-utils/dist/types';
 import {
   ActionIcon,
@@ -1091,21 +1092,32 @@ function DBSearchPage() {
     ({
       where,
       whereLanguage,
+      source,
     }: {
       where: SearchConfig['where'];
       whereLanguage: SearchConfig['whereLanguage'];
+      source?: TSource;
     }) => {
       const qParams = new URLSearchParams({
-        where: where || searchedConfig.where || '',
         whereLanguage: whereLanguage || 'sql',
         from: searchedTimeRange[0].getTime().toString(),
         to: searchedTimeRange[1].getTime().toString(),
-        select: searchedConfig.select || '',
-        source: searchedSource?.id || '',
-        filters: JSON.stringify(searchedConfig.filters ?? []),
         isLive: 'false',
         liveInterval: interval.toString(),
       });
+
+      // When generating a search based on a different source,
+      // filters and select for the current source are not preserved.
+      if (source && source.id !== searchedSource?.id) {
+        qParams.append('where', where || '');
+        qParams.append('source', source.id);
+      } else {
+        qParams.append('select', searchedConfig.select || '');
+        qParams.append('where', where || searchedConfig.where || '');
+        qParams.append('filters', JSON.stringify(searchedConfig.filters ?? []));
+        qParams.append('source', searchedSource?.id || '');
+      }
+
       return `/search?${qParams.toString()}`;
     },
     [
@@ -1829,6 +1841,7 @@ function DBSearchPage() {
                             dbSqlRowTableConfig,
                             isChildModalOpen: isDrawerChildModalOpen,
                             setChildModalOpen: setDrawerChildModalOpen,
+                            source: searchedSource,
                           }}
                           config={dbSqlRowTableConfig}
                           sourceId={searchedConfig.source}

packages/app/src/components/DBHighlightedAttributesList.tsx

@@ -0,0 +1,67 @@
+import { useContext, useMemo } from 'react';
+import { TSource } from '@hyperdx/common-utils/dist/types';
+import { Flex } from '@mantine/core';
+
+import { RowSidePanelContext } from './DBRowSidePanel';
+import EventTag from './EventTag';
+
+export type HighlightedAttribute = {
+  source: TSource;
+  displayedKey: string;
+  value: string;
+  sql: string;
+  lucene?: string;
+};
+
+export function DBHighlightedAttributesList({
+  attributes = [],
+}: {
+  attributes: HighlightedAttribute[];
+}) {
+  const {
+    onPropertyAddClick,
+    generateSearchUrl,
+    source: contextSource,
+  } = useContext(RowSidePanelContext);
+
+  const sortedAttributes = useMemo(() => {
+    return attributes.sort(
+      (a, b) =>
+        a.displayedKey.localeCompare(b.displayedKey) ||
+        a.value.localeCompare(b.value),
+    );
+  }, [attributes]);
+
+  return (
+    <Flex wrap="wrap" gap="2px" mb="md">
+      {sortedAttributes.map(({ displayedKey, value, sql, lucene, source }) => (
+        <EventTag
+          displayedKey={displayedKey}
+          name={lucene ? lucene : sql}
+          nameLanguage={lucene ? 'lucene' : 'sql'}
+          value={value as string}
+          key={`${displayedKey}-${value}-${source.id}`}
+          {...(onPropertyAddClick && contextSource?.id === source.id
+            ? {
+                onPropertyAddClick,
+                sqlExpression: sql,
+              }
+            : {
+                onPropertyAddClick: undefined,
+                sqlExpression: undefined,
+              })}
+          generateSearchUrl={
+            generateSearchUrl
+              ? (query, queryLanguage) =>
+                  generateSearchUrl({
+                    where: query || '',
+                    whereLanguage: queryLanguage ?? 'lucene',
+                    source,
+                  })
+              : undefined
+          }
+        />
+      ))}
+    </Flex>
+  );
+}

packages/app/src/components/DBRowOverviewPanel.tsx

@@ -81,11 +81,11 @@ export function RowOverviewPanel({
       : {};
 
   const _generateSearchUrl = useCallback(
-    (query?: string, timeRange?: [Date, Date]) => {
+    (query?: string, queryLanguage?: 'sql' | 'lucene') => {
       return (
         generateSearchUrl?.({
           where: query,
-          whereLanguage: 'lucene',
+          whereLanguage: queryLanguage,
         }) ?? '/'
       );
     },
@@ -195,8 +195,6 @@ export function RowOverviewPanel({
               <Box px="md">
                 <NetworkPropertySubpanel
                   eventAttributes={flattenedEventAttributes}
-                  onPropertyAddClick={onPropertyAddClick}
-                  generateSearchUrl={_generateSearchUrl}
                 />
               </Box>
             </Accordion.Panel>

packages/app/src/components/DBRowSidePanel.tsx

@@ -46,9 +46,11 @@ export type RowSidePanelContextProps = {
   generateSearchUrl?: ({
     where,
     whereLanguage,
+    source,
   }: {
     where: SearchConfig['where'];
     whereLanguage: SearchConfig['whereLanguage'];
+    source?: TSource;
   }) => string;
   generateChartUrl?: (config: {
     aggFn: string;
@@ -61,6 +63,7 @@ export type RowSidePanelContextProps = {
   dbSqlRowTableConfig?: ChartConfigWithDateRange;
   isChildModalOpen?: boolean;
   setChildModalOpen?: (open: boolean) => void;
+  source?: TSource;
 };
 
 export const RowSidePanelContext = createContext<RowSidePanelContextProps>({});

packages/app/src/components/DBRowSidePanelHeader.tsx

@@ -175,11 +175,11 @@ export default function DBRowSidePanelHeader({
   const maxBoxHeight = 120;
 
   const _generateSearchUrl = useCallback(
-    (query?: string, timeRange?: [Date, Date]) => {
+    (query?: string, queryLanguage?: 'sql' | 'lucene') => {
       return (
         generateSearchUrl?.({
           where: query,
-          whereLanguage: 'lucene',
+          whereLanguage: queryLanguage,
         }) ?? '/'
       );
     },