refactor: table connections standardized and single by default. Special case for dashboard (#1195)

knudtty · web-flow · commit 5210bb86a4e5 · 2025-10-02T21:33:53.000Z
Closes HDX-2469
diff --git a/.changeset/two-melons-admire.md b/.changeset/two-melons-admire.md
@@ -0,0 +1,6 @@
+---
+"@hyperdx/common-utils": patch
+"@hyperdx/app": patch
+---
+
+refactor: clean up table connections
diff --git a/packages/app/src/DBSearchPage.tsx b/packages/app/src/DBSearchPage.tsx
@@ -1265,7 +1265,7 @@ function DBSearchPage() {
           </Group>
           <Box style={{ minWidth: 100, flexGrow: 1 }}>
             <SQLInlineEditorControlled
-              tableConnections={tcFromSource(inputSourceObj)}
+              tableConnection={tcFromSource(inputSourceObj)}
               control={control}
               name="select"
               defaultValue={inputSourceObj?.defaultTableSelectExpression}
@@ -1279,7 +1279,7 @@ function DBSearchPage() {
           </Box>
           <Box style={{ maxWidth: 400, width: '20%' }}>
             <SQLInlineEditorControlled
-              tableConnections={tcFromSource(inputSourceObj)}
+              tableConnection={tcFromSource(inputSourceObj)}
               control={control}
               name="orderBy"
               defaultValue={defaultOrderBy}
@@ -1401,7 +1401,7 @@ function DBSearchPage() {
             sqlInput={
               <Box style={{ width: '75%', flexGrow: 1 }}>
                 <SQLInlineEditorControlled
-                  tableConnections={tcFromSource(inputSourceObj)}
+                  tableConnection={tcFromSource(inputSourceObj)}
                   control={control}
                   name="where"
                   placeholder="SQL WHERE clause (ex. column = 'foo')"
@@ -1421,7 +1421,7 @@ function DBSearchPage() {
             }
             luceneInput={
               <SearchInputV2
-                tableConnections={tcFromSource(inputSourceObj)}
+                tableConnection={tcFromSource(inputSourceObj)}
                 control={control}
                 name="where"
                 onLanguageChange={lang =>
diff --git a/packages/app/src/DBSearchPageAlertModal.tsx b/packages/app/src/DBSearchPageAlertModal.tsx
@@ -147,7 +147,7 @@ const AlertForm = ({
             grouped by
           </Text>
           <SQLInlineEditorControlled
-            tableConnections={tcFromSource(source)}
+            tableConnection={tcFromSource(source)}
             control={control}
             name={`groupBy`}
             placeholder="SQL Columns"
diff --git a/packages/app/src/DashboardFilters.tsx b/packages/app/src/DashboardFilters.tsx
@@ -31,7 +31,7 @@ const DashboardFilterSelect = ({
 
   const { data: keys, isLoading: isKeyValuesLoading } = useGetKeyValues(
     {
-      chartConfigs: {
+      chartConfig: {
         dateRange,
         timestampValueExpression: timestampValueExpression!,
         connection: connection!,
diff --git a/packages/app/src/DashboardFiltersModal.tsx b/packages/app/src/DashboardFiltersModal.tsx
@@ -179,7 +179,7 @@ const DashboardFilterEditForm = ({
               error={formState.errors.expression}
             >
               <SQLInlineEditorControlled
-                tableConnections={tableConnection}
+                tableConnection={tableConnection}
                 control={control}
                 name="expression"
                 placeholder="SQL column or expression"
diff --git a/packages/app/src/NamespaceDetailsSidePanel.tsx b/packages/app/src/NamespaceDetailsSidePanel.tsx
@@ -281,7 +281,7 @@ export default function NamespaceDetailsSidePanel({
 
   const { data: logServiceNames } = useGetKeyValues(
     {
-      chartConfigs: {
+      chartConfig: {
         from: logSource.from,
         where: `${logSource?.resourceAttributesExpression}.k8s.namespace.name:"${namespaceName}"`,
         whereLanguage: 'lucene',
diff --git a/packages/app/src/NodeDetailsSidePanel.tsx b/packages/app/src/NodeDetailsSidePanel.tsx
@@ -297,7 +297,7 @@ export default function NodeDetailsSidePanel({
 
   const { data: logServiceNames } = useGetKeyValues(
     {
-      chartConfigs: {
+      chartConfig: {
         from: logSource.from,
         where: `${logSource?.resourceAttributesExpression}.k8s.node.name:"${nodeName}"`,
         whereLanguage: 'lucene',
diff --git a/packages/app/src/PodDetailsSidePanel.tsx b/packages/app/src/PodDetailsSidePanel.tsx
@@ -285,7 +285,7 @@ export default function PodDetailsSidePanel({
 
   const { data: logServiceNames } = useGetKeyValues(
     {
-      chartConfigs: {
+      chartConfig: {
         from: logSource.from,
         where: `${logSource?.resourceAttributesExpression}.k8s.pod.name:"${podName}"`,
         whereLanguage: 'lucene',
diff --git a/packages/app/src/SearchInputV2.tsx b/packages/app/src/SearchInputV2.tsx
@@ -1,7 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
-import { Field, TableConnection } from '@hyperdx/common-utils/dist/metadata';
+import {
+  Field,
+  TableConnectionChoice,
+} from '@hyperdx/common-utils/dist/metadata';
 import { genEnglishExplanation } from '@hyperdx/common-utils/dist/queryParser';
 
 import AutocompleteInput from '@/AutocompleteInput';
@@ -25,6 +28,7 @@ export class LuceneLanguageFormatter implements ILanguageFormatter {
 
 const luceneLanguageFormatter = new LuceneLanguageFormatter();
 export default function SearchInputV2({
+  tableConnection,
   tableConnections,
   placeholder = 'Search your events for anything...',
   size = 'sm',
@@ -38,7 +42,6 @@ export default function SearchInputV2({
   'data-testid': dataTestId,
   ...props
 }: {
-  tableConnections?: TableConnection | TableConnection[];
   placeholder?: string;
   size?: 'xs' | 'sm' | 'lg';
   zIndex?: number;
@@ -49,7 +52,8 @@ export default function SearchInputV2({
   additionalSuggestions?: string[];
   queryHistoryType?: string;
   'data-testid'?: string;
-} & UseControllerProps<any>) {
+} & UseControllerProps<any> &
+  TableConnectionChoice) {
   const {
     field: { onChange, value },
   } = useController(props);
@@ -59,9 +63,9 @@ export default function SearchInputV2({
 
   const autoCompleteOptions = useAutoCompleteOptions(
     luceneLanguageFormatter,
-    value != null ? `${value}` : '', // value can be null at times
+    value != null ? `${value}` : '',
     {
-      tableConnections,
+      tableConnection: tableConnection ? tableConnection : tableConnections,
       additionalSuggestions,
     },
   );
diff --git a/packages/app/src/ServicesDashboardPage.tsx b/packages/app/src/ServicesDashboardPage.tsx
@@ -955,7 +955,7 @@ function ServicesDashboardPage() {
               control={control}
               sqlInput={
                 <SQLInlineEditorControlled
-                  tableConnections={tcFromSource(source)}
+                  tableConnection={tcFromSource(source)}
                   onSubmit={onSubmit}
                   control={control}
                   name="where"
@@ -973,7 +973,7 @@ function ServicesDashboardPage() {
               }
               luceneInput={
                 <SearchInputV2
-                  tableConnections={tcFromSource(source)}
+                  tableConnection={tcFromSource(source)}
                   control={control}
                   name="where"
                   onLanguageChange={lang =>
diff --git a/packages/app/src/SessionSubpanel.tsx b/packages/app/src/SessionSubpanel.tsx
@@ -488,7 +488,7 @@ export default function SessionSubpanel({
           >
             {whereLanguage === 'sql' ? (
               <SQLInlineEditorControlled
-                tableConnections={tcFromSource(traceSource)}
+                tableConnection={tcFromSource(traceSource)}
                 control={control}
                 name="where"
                 placeholder="SQL WHERE clause (ex. column = 'foo')"
@@ -498,7 +498,7 @@ export default function SessionSubpanel({
               />
             ) : (
               <SearchInputV2
-                tableConnections={tcFromSource(traceSource)}
+                tableConnection={tcFromSource(traceSource)}
                 control={control}
                 name="where"
                 language="lucene"
diff --git a/packages/app/src/SessionsPage.tsx b/packages/app/src/SessionsPage.tsx
@@ -449,7 +449,7 @@ export default function SessionsPage() {
                 sqlInput={
                   <Box style={{ width: '50%', flexGrow: 1 }}>
                     <SQLInlineEditorControlled
-                      tableConnections={tcFromSource(traceTrace)}
+                      tableConnection={tcFromSource(traceTrace)}
                       onSubmit={onSubmit}
                       control={control}
                       name="where"
@@ -468,7 +468,7 @@ export default function SessionsPage() {
                 }
                 luceneInput={
                   <SearchInputV2
-                    tableConnections={tcFromSource(traceTrace)}
+                    tableConnection={tcFromSource(traceTrace)}
                     control={control}
                     name="where"
                     onLanguageChange={lang =>
diff --git a/packages/app/src/components/ContextSidePanel.tsx b/packages/app/src/components/ContextSidePanel.tsx
@@ -260,7 +260,7 @@ export default function ContextSubpanel({
                 sqlInput={
                   originalLanguage === 'lucene' ? null : (
                     <SQLInlineEditorControlled
-                      tableConnections={tcFromSource(source)}
+                      tableConnection={tcFromSource(source)}
                       control={control}
                       name="where"
                       placeholder="SQL WHERE clause (ex. column = 'foo')"
@@ -273,7 +273,7 @@ export default function ContextSubpanel({
                 luceneInput={
                   originalLanguage === 'sql' ? null : (
                     <SearchInputV2
-                      tableConnections={tcFromSource(source)}
+                      tableConnection={tcFromSource(source)}
                       control={control}
                       name="where"
                       language="lucene"
diff --git a/packages/app/src/components/DBEditTimeChartForm.tsx b/packages/app/src/components/DBEditTimeChartForm.tsx
@@ -282,7 +282,7 @@ function ChartSeriesEditorComponent({
             }}
           >
             <SQLInlineEditorControlled
-              tableConnections={{
+              tableConnection={{
                 databaseName,
                 tableName: tableName ?? '',
                 connectionId: connectionId ?? '',
@@ -299,7 +299,7 @@ function ChartSeriesEditorComponent({
             <Text size="sm">Where</Text>
             {aggConditionLanguage === 'sql' ? (
               <SQLInlineEditorControlled
-                tableConnections={{
+                tableConnection={{
                   databaseName,
                   tableName: tableName ?? '',
                   connectionId: connectionId ?? '',
@@ -316,7 +316,7 @@ function ChartSeriesEditorComponent({
               />
             ) : (
               <SearchInputV2
-                tableConnections={{
+                tableConnection={{
                   connectionId: connectionId ?? '',
                   databaseName: databaseName ?? '',
                   tableName: tableName ?? '',
@@ -342,7 +342,7 @@ function ChartSeriesEditorComponent({
             <div style={{ minWidth: 300 }}>
               <SQLInlineEditorControlled
                 parentRef={parentRef}
-                tableConnections={{
+                tableConnection={{
                   databaseName,
                   tableName: tableName ?? '',
                   connectionId: connectionId ?? '',
@@ -732,7 +732,7 @@ export default function EditTimeChartForm({
                     </Text>
                     <div style={{ flexGrow: 1 }}>
                       <SQLInlineEditorControlled
-                        tableConnections={tcFromSource(tableSource)}
+                        tableConnection={tcFromSource(tableSource)}
                         control={control}
                         name={`groupBy`}
                         placeholder="SQL Columns"
@@ -808,7 +808,7 @@ export default function EditTimeChartForm({
           ) : (
             <Flex gap="xs" direction="column">
               <SQLInlineEditorControlled
-                tableConnections={tcFromSource(tableSource)}
+                tableConnection={tcFromSource(tableSource)}
                 control={control}
                 name="select"
                 placeholder={
@@ -820,7 +820,7 @@ export default function EditTimeChartForm({
               />
               {whereLanguage === 'sql' ? (
                 <SQLInlineEditorControlled
-                  tableConnections={tcFromSource(tableSource)}
+                  tableConnection={tcFromSource(tableSource)}
                   control={control}
                   name={`where`}
                   placeholder="SQL WHERE clause (ex. column = 'foo')"
@@ -830,7 +830,7 @@ export default function EditTimeChartForm({
                 />
               ) : (
                 <SearchInputV2
-                  tableConnections={{
+                  tableConnection={{
                     connectionId: tableSource?.connection ?? '',
                     databaseName: databaseName ?? '',
                     tableName: tableName ?? '',
diff --git a/packages/app/src/components/DBSearchPageFilters.tsx b/packages/app/src/components/DBSearchPageFilters.tsx
@@ -10,6 +10,7 @@ import {
 import cx from 'classnames';
 import {
   TableMetadata,
+  tcFromChartConfig,
   tcFromSource,
 } from '@hyperdx/common-utils/dist/metadata';
 import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
@@ -554,28 +555,14 @@ const DBSearchPageFiltersComponent = ({
   ) => {
     return _setFilterValue(property, value, action);
   };
-  const {
-    toggleFilterPin,
-    toggleFieldPin,
-    isFilterPinned,
-    isFieldPinned,
-    getPinnedFields,
-  } = usePinnedFilters(sourceId ?? null);
+  const { toggleFilterPin, toggleFieldPin, isFilterPinned, isFieldPinned } =
+    usePinnedFilters(sourceId ?? null);
   const { width, startResize } = useResizable(16, 'left');
 
-  const { data: countData } = useExplainQuery(chartConfig);
-  const numRows: number = countData?.[0]?.rows ?? 0;
-
-  const { data: jsonColumns } = useJsonColumns({
-    databaseName: chartConfig.from.databaseName,
-    tableName: chartConfig.from.tableName,
-    connectionId: chartConfig.connection,
-  });
-  const { data, isLoading, error } = useAllFields({
-    databaseName: chartConfig.from.databaseName,
-    tableName: chartConfig.from.tableName,
-    connectionId: chartConfig.connection,
-  });
+  const { data: jsonColumns } = useJsonColumns(tcFromChartConfig(chartConfig));
+  const { data, isLoading, error } = useAllFields(
+    tcFromChartConfig(chartConfig),
+  );
 
   const { data: source } = useSource({ id: sourceId });
   const { data: tableMetadata } = useTableMetadata(tcFromSource(source));
@@ -647,7 +634,7 @@ const DBSearchPageFiltersComponent = ({
     isLoading: isFacetsLoading,
     isFetching: isFacetsFetching,
   } = useGetKeyValues({
-    chartConfigs: { ...chartConfig, dateRange },
+    chartConfig: { ...chartConfig, dateRange },
     limit: keyLimit,
     keys: keysToFetch,
   });
diff --git a/packages/app/src/components/DBTracePanel.tsx b/packages/app/src/components/DBTracePanel.tsx
@@ -156,7 +156,7 @@ export default function DBTracePanel({
           </Text>
           <Flex>
             <SQLInlineEditorControlled
-              tableConnections={tcFromSource(parentSourceData)}
+              tableConnection={tcFromSource(parentSourceData)}
               name="traceIdExpression"
               placeholder="Log Trace ID Column (ex. trace_id)"
               control={traceIdControl}
diff --git a/packages/app/src/components/KubernetesFilters.tsx b/packages/app/src/components/KubernetesFilters.tsx
@@ -37,7 +37,7 @@ const FilterSelect: React.FC<FilterSelectProps> = ({
   dataTestId,
 }) => {
   const { data, isLoading } = useGetKeyValues({
-    chartConfigs: chartConfig,
+    chartConfig,
     keys: [`${metricSource.resourceAttributesExpression}['${fieldName}']`],
   });
 
@@ -240,7 +240,7 @@ export const KubernetesFilters: React.FC<KubernetesFiltersProps> = ({
         dataTestId="cluster-filter-select"
       />
       <SearchInputV2
-        tableConnections={tcFromSource(metricSource)}
+        tableConnection={tcFromSource(metricSource)}
         placeholder="Search query"
         language="lucene"
         name="searchQuery"
diff --git a/packages/app/src/components/MetricNameSelect.tsx b/packages/app/src/components/MetricNameSelect.tsx
@@ -79,19 +79,19 @@ function useMetricNames(
   }, [metricSource, dateRange]);
 
   const { data: gaugeMetrics } = useGetKeyValues({
-    chartConfigs: gaugeConfig,
+    chartConfig: gaugeConfig,
     keys: ['MetricName'],
     limit: MAX_METRIC_NAME_OPTIONS,
     disableRowLimit: true,
   });
   const { data: histogramMetrics } = useGetKeyValues({
-    chartConfigs: histogramConfig,
+    chartConfig: histogramConfig,
     keys: ['MetricName'],
     limit: MAX_METRIC_NAME_OPTIONS,
     disableRowLimit: true,
   });
   const { data: sumMetrics } = useGetKeyValues({
-    chartConfigs: sumConfig,
+    chartConfig: sumConfig,
     keys: ['MetricName'],
     limit: MAX_METRIC_NAME_OPTIONS,
     disableRowLimit: true,
diff --git a/packages/app/src/components/SQLInlineEditor.tsx b/packages/app/src/components/SQLInlineEditor.tsx
diff --git a/packages/app/src/components/SourceForm.tsx b/packages/app/src/components/SourceForm.tsx
diff --git a/packages/app/src/hooks/__tests__/useAutoCompleteOptions.test.tsx b/packages/app/src/hooks/__tests__/useAutoCompleteOptions.test.tsx
diff --git a/packages/app/src/hooks/__tests__/useMetadata.test.tsx b/packages/app/src/hooks/__tests__/useMetadata.test.tsx
diff --git a/packages/app/src/hooks/useAutoCompleteOptions.tsx b/packages/app/src/hooks/useAutoCompleteOptions.tsx
diff --git a/packages/app/src/hooks/useMetadata.tsx b/packages/app/src/hooks/useMetadata.tsx
diff --git a/packages/common-utils/src/metadata.ts b/packages/common-utils/src/metadata.ts

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ const DashboardFilterSelect = ({`
`31`	`31`
`32`	`32`	`const { data: keys, isLoading: isKeyValuesLoading } = useGetKeyValues(`
`33`	`33`	`{`
`34`		`- chartConfigs: {`
	`34`	`+ chartConfig: {`
`35`	`35`	`dateRange,`
`36`	`36`	`timestampValueExpression: timestampValueExpression!,`
`37`	`37`	`connection: connection!,`
Original file line number	Diff line number	Diff line change
`@@ -179,7 +179,7 @@ const DashboardFilterEditForm = ({`
`179`	`179`	`error={formState.errors.expression}`
`180`	`180`	`>`
`181`	`181`	`<SQLInlineEditorControlled`
`182`		`- tableConnections={tableConnection}`
	`182`	`+ tableConnection={tableConnection}`
`183`	`183`	`control={control}`
`184`	`184`	`name="expression"`
`185`	`185`	`placeholder="SQL column or expression"`
Original file line number	Diff line number	Diff line change
`@@ -281,7 +281,7 @@ export default function NamespaceDetailsSidePanel({`
`281`	`281`
`282`	`282`	`const { data: logServiceNames } = useGetKeyValues(`
`283`	`283`	`{`
`284`		`- chartConfigs: {`
	`284`	`+ chartConfig: {`
`285`	`285`	`from: logSource.from,`
`286`	`286`	where: `${logSource?.resourceAttributesExpression}.k8s.namespace.name:"${namespaceName}"`,
`287`	`287`	`whereLanguage: 'lucene',`
Original file line number	Diff line number	Diff line change
`@@ -297,7 +297,7 @@ export default function NodeDetailsSidePanel({`
`297`	`297`
`298`	`298`	`const { data: logServiceNames } = useGetKeyValues(`
`299`	`299`	`{`
`300`		`- chartConfigs: {`
	`300`	`+ chartConfig: {`
`301`	`301`	`from: logSource.from,`
`302`	`302`	where: `${logSource?.resourceAttributesExpression}.k8s.node.name:"${nodeName}"`,
`303`	`303`	`whereLanguage: 'lucene',`
Original file line number	Diff line number	Diff line change
`@@ -285,7 +285,7 @@ export default function PodDetailsSidePanel({`
`285`	`285`
`286`	`286`	`const { data: logServiceNames } = useGetKeyValues(`
`287`	`287`	`{`
`288`		`- chartConfigs: {`
	`288`	`+ chartConfig: {`
`289`	`289`	`from: logSource.from,`
`290`	`290`	where: `${logSource?.resourceAttributesExpression}.k8s.pod.name:"${podName}"`,
`291`	`291`	`whereLanguage: 'lucene',`