diff --git a/.changeset/tricky-dodos-report.md b/.changeset/tricky-dodos-report.md new file mode 100644 index 000000000..dbbded8f4 --- /dev/null +++ b/.changeset/tricky-dodos-report.md @@ -0,0 +1,5 @@ +--- +"@hyperdx/app": patch +--- + +fix: add json compatibility for infrastructure tab diff --git a/packages/app/src/components/DBRowDataPanel.tsx b/packages/app/src/components/DBRowDataPanel.tsx index 02503fb86..d6535d72a 100644 --- a/packages/app/src/components/DBRowDataPanel.tsx +++ b/packages/app/src/components/DBRowDataPanel.tsx @@ -1,4 +1,5 @@ import { useMemo } from 'react'; +import { flatten } from 'flat'; import type { ResponseJSON } from '@hyperdx/common-utils/dist/clickhouse'; import { SourceKind, TSource } from '@hyperdx/common-utils/dist/types'; import { Box } from '@mantine/core'; @@ -36,7 +37,7 @@ export function useRowData({ const severityTextExpr = source.severityTextExpression || source.statusCodeExpression; - return useQueriedChartConfig( + const queryResult = useQueriedChartConfig( { connection: source.connection, select: [ @@ -125,6 +126,38 @@ export function useRowData({ enabled: rowId != null, }, ); + + // Normalize resource and event attributes to always use flat keys for both JSON and Map columns + const normalizedData = useMemo(() => { + if (!queryResult.data?.data?.[0]) { + return queryResult.data; + } + + const row = queryResult.data.data[0]; + const normalizedRow = { ...row }; + + if (row[ROW_DATA_ALIASES.RESOURCE_ATTRIBUTES]) { + normalizedRow[ROW_DATA_ALIASES.RESOURCE_ATTRIBUTES] = flatten( + row[ROW_DATA_ALIASES.RESOURCE_ATTRIBUTES], + ); + } + + if (row[ROW_DATA_ALIASES.EVENT_ATTRIBUTES]) { + normalizedRow[ROW_DATA_ALIASES.EVENT_ATTRIBUTES] = flatten( + row[ROW_DATA_ALIASES.EVENT_ATTRIBUTES], + ); + } + + return { + ...queryResult.data, + data: [normalizedRow], + }; + }, [queryResult.data]); + + return { + ...queryResult, + data: normalizedData, + }; } export function getJSONColumnNames(meta: ResponseJSON['meta'] | undefined) { diff --git a/packages/app/src/components/DBRowOverviewPanel.tsx b/packages/app/src/components/DBRowOverviewPanel.tsx index 34e5b1eac..34b90262c 100644 --- a/packages/app/src/components/DBRowOverviewPanel.tsx +++ b/packages/app/src/components/DBRowOverviewPanel.tsx @@ -1,5 +1,4 @@ import { useCallback, useContext, useMemo } from 'react'; -import { flatten } from 'flat'; import isString from 'lodash/isString'; import pickBy from 'lodash/pickBy'; import { SourceKind, TSource } from '@hyperdx/common-utils/dist/types'; @@ -70,17 +69,9 @@ export function RowOverviewPanel({ return false; }); - // memo - const resourceAttributes = useMemo(() => { - return flatten>( - firstRow?.__hdx_resource_attributes ?? EMPTY_OBJ, - ); - }, [firstRow?.__hdx_resource_attributes]); - - const _eventAttributes = firstRow?.__hdx_event_attributes ?? EMPTY_OBJ; - const flattenedEventAttributes = useMemo(() => { - return flatten>(_eventAttributes); - }, [_eventAttributes]); + const resourceAttributes = firstRow?.__hdx_resource_attributes ?? EMPTY_OBJ; + const flattenedEventAttributes = + firstRow?.__hdx_event_attributes ?? EMPTY_OBJ; const dataAttributes = eventAttributesExpr && diff --git a/packages/app/src/components/DBRowSidePanel.tsx b/packages/app/src/components/DBRowSidePanel.tsx index 2695398c7..2d1d86ffd 100644 --- a/packages/app/src/components/DBRowSidePanel.tsx +++ b/packages/app/src/components/DBRowSidePanel.tsx @@ -233,11 +233,11 @@ const DBRowSidePanel = ({ if (!source?.resourceAttributesExpression || !normalizedRow) { return false; } + + const resourceAttrs = normalizedRow['__hdx_resource_attributes']; return ( - normalizedRow[source.resourceAttributesExpression]?.['k8s.pod.uid'] != - null || - normalizedRow[source.resourceAttributesExpression]?.['k8s.node.name'] != - null + resourceAttrs?.['k8s.pod.uid'] != null || + resourceAttrs?.['k8s.node.name'] != null ); } catch (e) { console.error(e);