feat: Add custom trace-level attributes above trace waterfall

Author: pulpdrew

.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,
+      highlightedAttributeExpressions: {
+        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,22 +1092,39 @@ 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(),
-      });
-      return `/search?${qParams.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) {
+        const qParams = new URLSearchParams({
+          where: where || '',
+          whereLanguage: whereLanguage || 'sql',
+          from: searchedTimeRange[0].getTime().toString(),
+          to: searchedTimeRange[1].getTime().toString(),
+          source: source.id,
+          isLive: 'false',
+          liveInterval: interval.toString(),
+        });
+        return `/search?${qParams.toString()}`;
+      } else {
+        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(),
+        });
+        return `/search?${qParams.toString()}`;
+      }
     },
     [
       interval,
@@ -1829,6 +1847,7 @@ function DBSearchPage() {
                             dbSqlRowTableConfig,
                             isChildModalOpen: isDrawerChildModalOpen,
                             setChildModalOpen: setDrawerChildModalOpen,
+                            source: searchedSource,
                           }}
                           config={dbSqlRowTableConfig}
                           sourceId={searchedConfig.source}

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

@@ -47,9 +47,11 @@ export type RowSidePanelContextProps = {
   generateSearchUrl?: ({
     where,
     whereLanguage,
+    source,
   }: {
     where: SearchConfig['where'];
     whereLanguage: SearchConfig['whereLanguage'];
+    source?: TSource;
   }) => string;
   generateChartUrl?: (config: {
     aggFn: string;
@@ -62,6 +64,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,
         }) ?? '/'
       );
     },