Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Oct 2, 2025
Merged

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
263302f
refactor: table connections standardized and single by default. Special
knudtty Sep 22, 2025
aba00ec
Merge branch 'main' into aaron/tableconnection-cleanup
knudtty Sep 22, 2025
8479a5d
explicitly allow only tableConnection or tableConnections for input
knudtty Sep 24, 2025
0e6871e
readd test for multiple metadata
knudtty Sep 24, 2025
322865e
Merge branch 'main' into aaron/tableconnection-cleanup
knudtty Sep 24, 2025
e08a65f
Merge branch 'main' into aaron/tableconnection-cleanup
knudtty Oct 2, 2025
1987e10
fix linting
knudtty Oct 2, 2025
8f64691
add changeset
knudtty Oct 2, 2025
bd2ecc2
Merge branch 'main' into aaron/tableconnection-cleanup
kodiakhq[bot] Oct 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/app/src/DBSearchPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1277,7 +1277,7 @@ function DBSearchPage() {
</Group>
<Box style={{ minWidth: 100, flexGrow: 1 }}>
<SQLInlineEditorControlled
tableConnections={tcFromSource(inputSourceObj)}
tableConnection={tcFromSource(inputSourceObj)}
control={control}
name="select"
defaultValue={inputSourceObj?.defaultTableSelectExpression}
Expand All @@ -1291,7 +1291,7 @@ function DBSearchPage() {
</Box>
<Box style={{ maxWidth: 400, width: '20%' }}>
<SQLInlineEditorControlled
tableConnections={tcFromSource(inputSourceObj)}
tableConnection={tcFromSource(inputSourceObj)}
control={control}
name="orderBy"
defaultValue={defaultOrderBy}
Expand Down Expand Up @@ -1413,7 +1413,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')"
Expand All @@ -1432,7 +1432,7 @@ function DBSearchPage() {
}
luceneInput={
<SearchInputV2
tableConnections={tcFromSource(inputSourceObj)}
tableConnection={tcFromSource(inputSourceObj)}
control={control}
name="where"
onLanguageChange={lang =>
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/DBSearchPageAlertModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ const AlertForm = ({
grouped by
</Text>
<SQLInlineEditorControlled
tableConnections={tcFromSource(source)}
tableConnection={tcFromSource(source)}
control={control}
name={`groupBy`}
placeholder="SQL Columns"
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/NamespaceDetailsSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/NodeDetailsSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/PodDetailsSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
8 changes: 5 additions & 3 deletions packages/app/src/SearchInputV2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export class LuceneLanguageFormatter implements ILanguageFormatter {

const luceneLanguageFormatter = new LuceneLanguageFormatter();
export default function SearchInputV2({
tableConnection,
tableConnections,
placeholder = 'Search your events for anything...',
size = 'sm',
Expand All @@ -38,7 +39,8 @@ export default function SearchInputV2({
'data-testid': dataTestId,
...props
}: {
tableConnections?: TableConnection | TableConnection[];
tableConnection?: TableConnection;
tableConnections?: TableConnection[];
placeholder?: string;
size?: 'xs' | 'sm' | 'lg';
zIndex?: number;
Expand All @@ -59,9 +61,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,
},
);
Expand Down
4 changes: 2 additions & 2 deletions packages/app/src/ServicesDashboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -955,7 +955,7 @@ function ServicesDashboardPage() {
control={control}
sqlInput={
<SQLInlineEditorControlled
tableConnections={tcFromSource(source)}
tableConnection={tcFromSource(source)}
onSubmit={onSubmit}
control={control}
name="where"
Expand All @@ -972,7 +972,7 @@ function ServicesDashboardPage() {
}
luceneInput={
<SearchInputV2
tableConnections={tcFromSource(source)}
tableConnection={tcFromSource(source)}
control={control}
name="where"
onLanguageChange={lang =>
Expand Down
4 changes: 2 additions & 2 deletions packages/app/src/SessionSubpanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')"
Expand All @@ -498,7 +498,7 @@ export default function SessionSubpanel({
/>
) : (
<SearchInputV2
tableConnections={tcFromSource(traceSource)}
tableConnection={tcFromSource(traceSource)}
control={control}
name="where"
language="lucene"
Expand Down
4 changes: 2 additions & 2 deletions packages/app/src/SessionsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -467,7 +467,7 @@ export default function SessionsPage() {
}
luceneInput={
<SearchInputV2
tableConnections={tcFromSource(traceTrace)}
tableConnection={tcFromSource(traceTrace)}
control={control}
name="where"
onLanguageChange={lang =>
Expand Down
4 changes: 2 additions & 2 deletions packages/app/src/components/ContextSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')"
Expand All @@ -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"
Expand Down
16 changes: 8 additions & 8 deletions packages/app/src/components/DBEditTimeChartForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ function ChartSeriesEditorComponent({
}}
>
<SQLInlineEditorControlled
tableConnections={{
tableConnection={{
databaseName,
tableName: tableName ?? '',
connectionId: connectionId ?? '',
Expand All @@ -299,7 +299,7 @@ function ChartSeriesEditorComponent({
<Text size="sm">Where</Text>
{aggConditionLanguage === 'sql' ? (
<SQLInlineEditorControlled
tableConnections={{
tableConnection={{
databaseName,
tableName: tableName ?? '',
connectionId: connectionId ?? '',
Expand All @@ -316,7 +316,7 @@ function ChartSeriesEditorComponent({
/>
) : (
<SearchInputV2
tableConnections={{
tableConnection={{
connectionId: connectionId ?? '',
databaseName: databaseName ?? '',
tableName: tableName ?? '',
Expand All @@ -342,7 +342,7 @@ function ChartSeriesEditorComponent({
<div style={{ minWidth: 300 }}>
<SQLInlineEditorControlled
parentRef={parentRef}
tableConnections={{
tableConnection={{
databaseName,
tableName: tableName ?? '',
connectionId: connectionId ?? '',
Expand Down Expand Up @@ -733,7 +733,7 @@ export default function EditTimeChartForm({
</Text>
<div style={{ flexGrow: 1 }}>
<SQLInlineEditorControlled
tableConnections={tcFromSource(tableSource)}
tableConnection={tcFromSource(tableSource)}
control={control}
name={`groupBy`}
placeholder="SQL Columns"
Expand Down Expand Up @@ -809,7 +809,7 @@ export default function EditTimeChartForm({
) : (
<Flex gap="xs" direction="column">
<SQLInlineEditorControlled
tableConnections={tcFromSource(tableSource)}
tableConnection={tcFromSource(tableSource)}
control={control}
name="select"
placeholder={
Expand All @@ -821,7 +821,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')"
Expand All @@ -831,7 +831,7 @@ export default function EditTimeChartForm({
/>
) : (
<SearchInputV2
tableConnections={{
tableConnection={{
connectionId: tableSource?.connection ?? '',
databaseName: databaseName ?? '',
tableName: tableName ?? '',
Expand Down
29 changes: 8 additions & 21 deletions packages/app/src/components/DBSearchPageFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { memo, useCallback, useEffect, useId, useMemo, useState } from 'react';
import {
TableMetadata,
tcFromChartConfig,
tcFromSource,
} from '@hyperdx/common-utils/dist/metadata';
import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
Expand Down Expand Up @@ -517,28 +518,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));
Expand Down Expand Up @@ -610,7 +597,7 @@ const DBSearchPageFiltersComponent = ({
isLoading: isFacetsLoading,
isFetching: isFacetsFetching,
} = useGetKeyValues({
chartConfigs: { ...chartConfig, dateRange },
chartConfig: { ...chartConfig, dateRange },
limit: keyLimit,
keys: keysToFetch,
});
Expand Down
2 changes: 1 addition & 1 deletion packages/app/src/components/DBTracePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions packages/app/src/components/KubernetesFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const FilterSelect: React.FC<FilterSelectProps> = ({
dataTestId,
}) => {
const { data, isLoading } = useGetKeyValues({
chartConfigs: chartConfig,
chartConfig,
keys: [`${metricSource.resourceAttributesExpression}['${fieldName}']`],
});

Expand Down Expand Up @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions packages/app/src/components/MetricNameSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
11 changes: 8 additions & 3 deletions packages/app/src/components/SQLInlineEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import CodeMirror, {
tooltips,
} from '@uiw/react-codemirror';

import { useAllFields } from '@/hooks/useMetadata';
import { useMultipleAllFields } from '@/hooks/useMetadata';
import { useQueryHistory } from '@/utils';

import InputLanguageSwitch from './InputLanguageSwitch';
Expand Down Expand Up @@ -105,7 +105,8 @@ const AUTOCOMPLETE_LIST_FOR_SQL_FUNCTIONS = [
const AUTOCOMPLETE_LIST_STRING = ` ${AUTOCOMPLETE_LIST_FOR_SQL_FUNCTIONS.join(' ')}`;

type SQLInlineEditorProps = {
tableConnections?: TableConnection | TableConnection[];
tableConnection?: TableConnection;
tableConnections?: TableConnection[];
autoCompleteFields?: Field[];
filterField?: (field: Field) => boolean;
value: string;
Expand Down Expand Up @@ -142,6 +143,7 @@ const styleTheme = EditorView.baseTheme({
});

export default function SQLInlineEditor({
tableConnection,
tableConnections,
filterField,
onChange,
Expand All @@ -159,7 +161,10 @@ export default function SQLInlineEditor({
queryHistoryType,
parentRef,
}: SQLInlineEditorProps) {
const { data: fields } = useAllFields(tableConnections ?? []);
const _tableConnections = tableConnection
? [tableConnection]
: tableConnections;
const { data: fields } = useMultipleAllFields(_tableConnections ?? []);
const filteredFields = useMemo(() => {
return filterField ? fields?.filter(filterField) : fields;
}, [fields, filterField]);
Expand Down
Loading
Loading