fix: add json compatibility for infrastructure tab

Author: Ruben Hias

packages/app/src/components/DBInfraPanel.tsx

@@ -119,7 +119,7 @@ const InfraSubpanelGroup = ({
                       where,
                       groupBy: [],
                       aggFn: 'avg',
-                      field: `${fieldPrefix}cpu.utilization - Gauge`,
+                      field: `${fieldPrefix}cpu.usage - Gauge`,
                       table: 'metrics',
                       numberFormat: K8S_CPU_PERCENTAGE_NUMBER_FORMAT,
                     },

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';
@@ -23,7 +24,7 @@ export function useRowData({
   const severityTextExpr =
     source.severityTextExpression || source.statusCodeExpression;
 
-  return useQueriedChartConfig(
+  const queryResult = useQueriedChartConfig(
     {
       connection: source.connection,
       select: [
@@ -112,6 +113,36 @@ 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.__hdx_resource_attributes) {
+      normalizedRow.__hdx_resource_attributes = flatten(
+        row.__hdx_resource_attributes,
+      );
+    }
+
+    if (row.__hdx_event_attributes) {
+      normalizedRow.__hdx_event_attributes = flatten(row.__hdx_event_attributes);
+    }
+
+    return {
+      ...queryResult.data,
+      data: [normalizedRow],
+    };
+  }, [queryResult.data]);
+
+  return {
+    ...queryResult,
+    data: normalizedData,
+  };
 }
 
 export function getJSONColumnNames(meta: ResponseJSON['meta'] | undefined) {

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,8 @@ export function RowOverviewPanel({
     return false;
   });
 
-  // memo
-  const resourceAttributes = useMemo(() => {
-    return flatten<string, Record<string, string>>(
-      firstRow?.__hdx_resource_attributes ?? EMPTY_OBJ,
-    );
-  }, [firstRow?.__hdx_resource_attributes]);
-
-  const _eventAttributes = firstRow?.__hdx_event_attributes ?? EMPTY_OBJ;
-  const flattenedEventAttributes = useMemo(() => {
-    return flatten<string, Record<string, string>>(_eventAttributes);
-  }, [_eventAttributes]);
+  const resourceAttributes = firstRow?.__hdx_resource_attributes ?? EMPTY_OBJ;
+  const flattenedEventAttributes = firstRow?.__hdx_event_attributes ?? EMPTY_OBJ;
 
   const dataAttributes =
     eventAttributesExpr &&

packages/app/src/components/DBRowSidePanel.tsx

@@ -231,11 +231,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);