Skip to content

fix: Fix Services Dashboard bugs #1484

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
kodiakhq merged 8 commits into from
Dec 17, 2025
Merged

fix: Fix Services Dashboard bugs #1484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
83fd7f2
fix: Prevent errors from DESCRIBEing CTEs
pulpdrew Dec 12, 2025
3a71b3e
fix: Prevent extra Request Throughput refetches
pulpdrew Dec 15, 2025
17b0556
fix: Prevent extra Services Dashboard requests when switching sources
pulpdrew Dec 15, 2025
209c5b2
test: Fix integration test after renderChartConfig update
pulpdrew Dec 15, 2025
4bf27bc
fix: Prevent errors on services dashboard when source has metricTable…
pulpdrew Dec 16, 2025
5a54d45
fix: Fix render loop
pulpdrew Dec 16, 2025
58da5ee
fix: Use the right source value in effect
pulpdrew Dec 16, 2025
7644d23
Merge branch 'main' into drew/services-dashboard-fixes
pulpdrew Dec 17, 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
7 changes: 7 additions & 0 deletions .changeset/popular-coins-pretend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@hyperdx/common-utils": patch
"@hyperdx/api": patch
"@hyperdx/app": patch
---

fix: Fix bugs in the Services dashboard
4 changes: 2 additions & 2 deletions packages/api/src/clickhouse/__tests__/renderChartConfig.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ describe('renderChartConfig', () => {
{ aggFn: 'sum', valueExpression: 'strVal' },
],
from: {
databaseName: '',
databaseName: DEFAULT_DATABASE,
tableName: `agg_fn_str_test`,
},
where: '',
Expand Down Expand Up @@ -183,7 +183,7 @@ describe('renderChartConfig', () => {
{ aggFn: 'sum', valueExpression: 'strVal' },
],
from: {
databaseName: '',
databaseName: DEFAULT_DATABASE,
tableName: `agg_fn_default_test`,
},
where: '',
Expand Down
152 changes: 109 additions & 43 deletions packages/app/src/ServicesDashboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
useQueryState,
useQueryStates,
} from 'nuqs';
import { UseControllerProps, useForm } from 'react-hook-form';
import { UseControllerProps, useForm, useWatch } from 'react-hook-form';
import { tcFromSource } from '@hyperdx/common-utils/dist/core/metadata';
import { DEFAULT_AUTO_GRANULARITY_MAX_BUCKETS } from '@hyperdx/common-utils/dist/core/renderChartConfig';
import {
Expand Down Expand Up @@ -128,7 +128,7 @@ function ServiceSelectControlled({
const { expressions } = useServiceDashboardExpressions({ source });

const queriedConfig = {
...source,
timestampValueExpression: source?.timestampValueExpression || '',
from: {
databaseName: source?.from.databaseName || '',
tableName: source?.from.tableName || '',
Expand Down Expand Up @@ -240,7 +240,11 @@ export function EndpointLatencyChart({
'avg_duration_ns',
]}
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: appliedConfig.where || '',
whereLanguage: appliedConfig.whereLanguage || 'sql',
select: [
Expand Down Expand Up @@ -289,7 +293,11 @@ export function EndpointLatencyChart({
) : (
<DBHistogramChart
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: appliedConfig.where || '',
whereLanguage: appliedConfig.whereLanguage || 'sql',
select: [
Expand Down Expand Up @@ -343,7 +351,7 @@ function HttpTab({
if (!source || !expressions) return null;
if (reqChartType === 'overall') {
return {
...source,
...pick(source, ['timestampValueExpression', 'connection', 'from']),
where: appliedConfig.where || '',
whereLanguage: appliedConfig.whereLanguage || 'sql',
displayType: DisplayType.Line,
Expand Down Expand Up @@ -539,13 +547,14 @@ function HttpTab({
<DBTimeChart
sourceId={source.id}
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: appliedConfig.where || '',
whereLanguage: appliedConfig.whereLanguage || 'sql',
displayType:
reqChartType === 'overall'
? DisplayType.Line
: DisplayType.StackedBar,
displayType: DisplayType.Line,
select: [
{
aggFn: 'count' as const,
Expand Down Expand Up @@ -582,7 +591,11 @@ function HttpTab({
'error_requests',
]}
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: appliedConfig.where || '',
whereLanguage: appliedConfig.whereLanguage || 'sql',
select: [
Expand Down Expand Up @@ -703,7 +716,11 @@ function HttpTab({
'error_count',
]}
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: appliedConfig.where || '',
whereLanguage: appliedConfig.whereLanguage || 'sql',
select: [
Expand Down Expand Up @@ -1122,7 +1139,11 @@ function DatabaseTab({
'p50_duration_ns',
]}
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: appliedConfig.where || '',
whereLanguage: appliedConfig.whereLanguage || 'sql',
dateRange: searchedTimeRange,
Expand Down Expand Up @@ -1198,7 +1219,11 @@ function DatabaseTab({
'p50_duration_ns',
]}
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: appliedConfig.where || '',
whereLanguage: appliedConfig.whereLanguage || 'sql',
dateRange: searchedTimeRange,
Expand Down Expand Up @@ -1292,7 +1317,11 @@ function ErrorsTab({
<DBTimeChart
sourceId={source.id}
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: appliedConfig.where || '',
whereLanguage: appliedConfig.whereLanguage || 'sql',
displayType: DisplayType.StackedBar,
Expand Down Expand Up @@ -1341,13 +1370,34 @@ function ServicesDashboardPage() {

const { data: sources } = useSources();

const [appliedConfig, setAppliedConfig] = useQueryStates(appliedConfigMap);
const [appliedConfigParams, setAppliedConfigParams] =
useQueryStates(appliedConfigMap);

// Only use the source from the URL params if it is a trace source
const appliedConfig = useMemo(() => {
if (!sources?.length) return appliedConfigParams;

const traceSources = sources?.filter(s => s.kind === SourceKind.Trace);
const paramsSourceIdIsTraceSource = traceSources?.find(
s => s.id === appliedConfigParams.source,
);

const effectiveSourceId = paramsSourceIdIsTraceSource
? appliedConfigParams.source
: traceSources?.[0]?.id || '';

return {
...appliedConfigParams,
source: effectiveSourceId,
};
}, [appliedConfigParams, sources]);

const { control, watch, setValue, handleSubmit } = useForm({
values: {
defaultValues: {
where: '',
whereLanguage: 'sql' as 'sql' | 'lucene',
service: appliedConfig?.service || '',
source: appliedConfig?.source || sources?.[0]?.id,
source: appliedConfig?.source ?? '',
},
});

Expand All @@ -1357,11 +1407,19 @@ function ServicesDashboardPage() {
id: watch('source'),
});

// Update the `source` query parameter if the appliedConfig source changes
useEffect(() => {
if (sourceId && !appliedConfig.source) {
setAppliedConfig({ source: sourceId });
if (
appliedConfig.source &&
appliedConfig.source !== appliedConfigParams.source
) {
setAppliedConfigParams({ source: appliedConfig.source });
}
}, [appliedConfig.source, setAppliedConfig, sourceId]);
}, [
appliedConfig.source,
appliedConfigParams.source,
setAppliedConfigParams,
]);

const DEFAULT_INTERVAL = 'Past 1h';
const [displayedTimeInputValue, setDisplayedTimeInputValue] =
Expand All @@ -1374,7 +1432,7 @@ function ServicesDashboardPage() {
});

// For future use if Live button is added
const [isLive, setIsLive] = useState(false);
const [isLive, _setIsLive] = useState(false);

const { manualRefreshCooloff, refresh } = useDashboardRefresh({
searchedTimeRange,
Expand All @@ -1385,30 +1443,38 @@ function ServicesDashboardPage() {
const onSubmit = useCallback(() => {
onSearch(displayedTimeInputValue);
handleSubmit(values => {
setAppliedConfig(values);
setAppliedConfigParams(values);
})();
}, [handleSubmit, setAppliedConfig, onSearch, displayedTimeInputValue]);
}, [handleSubmit, setAppliedConfigParams, onSearch, displayedTimeInputValue]);

// Auto submit when service or source changes
// Auto-submit when source changes
useEffect(() => {
const normalizedService = service ?? '';
const appliedService = appliedConfig.service ?? '';
const normalizedSource = sourceId ?? '';
const appliedSource = appliedConfig.source ?? '';
const { unsubscribe } = watch((data, { name, type }) => {
if (
name === 'source' &&
type === 'change' &&
data.source &&
data.source !== appliedConfig.source
) {
onSubmit();
}
});
return () => unsubscribe();
}, [appliedConfig.source, onSubmit, watch]);
Comment on lines 1451 to +1463

@knudtty knudtty Dec 16, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be a useWatch with a control?

@pulpdrew pulpdrew Dec 16, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The intent here is to auto-submit the form when the form's source field changes.

With useWatch, I believe we'd then need an additional useEffect (like the one in the old version of this code) to trigger the onSubmit when source != appliedConfig.source. However, that resulted in render loops when navigating away from the page, since appliedConfig.source changes during navigation away (since the URL params are changing).

Is there a particular issue with this approach (watch callback) that I should be aware of?


if (
normalizedService !== appliedService ||
(normalizedSource && normalizedSource !== appliedSource)
) {
onSubmit();
}
}, [
service,
sourceId,
appliedConfig.service,
appliedConfig.source,
onSubmit,
]);
// Auto-submit when service changes
useEffect(() => {
const { unsubscribe } = watch((data, { name, type }) => {
if (
name === 'service' &&
type === 'change' &&
data.service !== appliedConfig.service
) {
onSubmit();
}
});
return () => unsubscribe();
}, [appliedConfig.service, onSubmit, watch]);
Comment on lines +1466 to +1477

@knudtty knudtty Dec 16, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto


return (
<Box p="sm">
Expand Down Expand Up @@ -1554,7 +1620,7 @@ const ServicesDashboardPageDynamic = dynamic(
},
);

// @ts-ignore
// @ts-expect-error Next.js layout typing
ServicesDashboardPageDynamic.getLayout = withAppNav;

export default ServicesDashboardPageDynamic;
13 changes: 11 additions & 2 deletions packages/app/src/components/ServiceDashboardDbQuerySidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useCallback, useMemo } from 'react';
import { pick } from 'lodash';
import { parseAsString, useQueryState } from 'nuqs';
import type { Filter } from '@hyperdx/common-utils/dist/types';
import { Drawer, Grid, Group, Text } from '@mantine/core';
Expand Down Expand Up @@ -97,7 +98,11 @@ export default function ServiceDashboardDbQuerySidePanel({
sourceId={sourceId}
hiddenSeries={['total_duration_ns']}
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: '',
whereLanguage: 'sql',
select: [
Expand Down Expand Up @@ -130,7 +135,11 @@ export default function ServiceDashboardDbQuerySidePanel({
<DBTimeChart
sourceId={sourceId}
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: '',
whereLanguage: 'sql',
select: [
Expand Down
3 changes: 2 additions & 1 deletion packages/app/src/components/ServiceDashboardEndpointPerformanceChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { pick } from 'lodash';
import { TSource } from '@hyperdx/common-utils/dist/types';
import { Group, Text } from '@mantine/core';

Expand Down Expand Up @@ -95,7 +96,7 @@ export default function ServiceDashboardEndpointPerformanceChart({
groupColumn="group"
valueColumn="Total Time Spent"
config={{
...source,
...pick(source, ['timestampValueExpression', 'connection', 'from']),
where: '',
whereLanguage: 'sql',
select: [
Expand Down
13 changes: 11 additions & 2 deletions packages/app/src/components/ServiceDashboardEndpointSidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useCallback, useMemo } from 'react';
import { pick } from 'lodash';
import { parseAsString, useQueryState } from 'nuqs';
import type { Filter } from '@hyperdx/common-utils/dist/types';
import { Drawer, Grid, Group, Text } from '@mantine/core';
Expand Down Expand Up @@ -104,7 +105,11 @@ export default function ServiceDashboardEndpointSidePanel({
sourceId={source.id}
hiddenSeries={['total_count', 'error_count']}
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: '',
whereLanguage: 'sql',
select: [
Expand Down Expand Up @@ -144,7 +149,11 @@ export default function ServiceDashboardEndpointSidePanel({
<DBTimeChart
sourceId={source.id}
config={{
...source,
...pick(source, [
'timestampValueExpression',
'connection',
'from',
]),
where: '',
whereLanguage: 'sql',
select: [
Expand Down
Loading
Loading