Skip to content

Commit 8ab3b42

Browse files
knudttyknudtty
authored
fix: fix play.hyperdx.io for those with stale demo instances (#926)
Fixes HDX-1835 I tested this by running the main branch first via `cd packages/app && yarn dev:local`, loading localhost:8080 and clicked demo servers, pasting the json from the HDX-1835 linear ticket into the `hdx-local-source` localStorage slot, verified some sources gave that permissions issue, then closed the tab. Then I checked out this branch, opened a new tab with localhost:8080, selected demo servers, and all demo sources work as expected
1 parent 661a1ec commit 8ab3b42

File tree

2 files changed

+168
-142
lines changed

2 files changed

+168
-142
lines changed

‎.changeset/cold-planets-report.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hyperdx/app": patch
3+
---
4+
5+
fix: fix demo instances for those with stale sources

‎packages/app/src/components/OnboardingModal.tsx‎

Lines changed: 163 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
1-
import { useEffect, useState } from 'react';
1+
import { useCallback, useEffect, useState } from 'react';
22
import { MetricsDataType, SourceKind } from '@hyperdx/common-utils/dist/types';
33
import { Button, Divider, Modal, Text } from '@mantine/core';
44
import { notifications } from '@mantine/notifications';
55

66
import { ConnectionForm } from '@/components/ConnectionForm';
77
import { IS_LOCAL_MODE } from '@/config';
88
import { useConnections, useCreateConnection } from '@/connection';
9-
import { useCreateSource, useSources, useUpdateSource } from '@/source';
9+
import {
10+
useCreateSource,
11+
useDeleteSource,
12+
useSources,
13+
useUpdateSource,
14+
} from '@/source';
1015

1116
import { TableSourceForm } from './SourceForm';
1217

@@ -40,6 +45,161 @@ export default function OnboardingModal({
4045
const createSourceMutation = useCreateSource();
4146
const createConnectionMutation = useCreateConnection();
4247
const updateSourceMutation = useUpdateSource();
48+
const deleteSourceMutation = useDeleteSource();
49+
50+
const handleDemoServerClick = useCallback(async () => {
51+
try {
52+
if (sources) {
53+
for (const source of sources) {
54+
// Clean out old demo sources. All new ones use the otel_v2 database
55+
if (
56+
source.connection === 'local' &&
57+
source.name.startsWith('Demo') &&
58+
source.from.databaseName !== 'otel_v2'
59+
) {
60+
await deleteSourceMutation.mutateAsync({
61+
id: source.id,
62+
});
63+
}
64+
}
65+
}
66+
await createConnectionMutation.mutateAsync({
67+
connection: {
68+
id: 'local',
69+
name: 'Demo',
70+
host: 'https://sql-clickhouse.clickhouse.com',
71+
username: 'otel_demo',
72+
password: '',
73+
},
74+
});
75+
const logSource = await createSourceMutation.mutateAsync({
76+
source: {
77+
kind: SourceKind.Log,
78+
name: 'Demo Logs',
79+
connection: 'local',
80+
from: {
81+
databaseName: 'otel_v2',
82+
tableName: 'otel_logs',
83+
},
84+
timestampValueExpression: 'TimestampTime',
85+
defaultTableSelectExpression:
86+
'Timestamp, ServiceName, SeverityText, Body',
87+
serviceNameExpression: 'ServiceName',
88+
severityTextExpression: 'SeverityText',
89+
eventAttributesExpression: 'LogAttributes',
90+
resourceAttributesExpression: 'ResourceAttributes',
91+
traceIdExpression: 'TraceId',
92+
spanIdExpression: 'SpanId',
93+
implicitColumnExpression: 'Body',
94+
displayedTimestampValueExpression: 'Timestamp',
95+
},
96+
});
97+
const traceSource = await createSourceMutation.mutateAsync({
98+
source: {
99+
kind: SourceKind.Trace,
100+
name: 'Demo Traces',
101+
connection: 'local',
102+
from: {
103+
databaseName: 'otel_v2',
104+
tableName: 'otel_traces',
105+
},
106+
timestampValueExpression: 'Timestamp',
107+
defaultTableSelectExpression:
108+
'Timestamp, ServiceName, StatusCode, round(Duration / 1e6), SpanName',
109+
serviceNameExpression: 'ServiceName',
110+
eventAttributesExpression: 'SpanAttributes',
111+
resourceAttributesExpression: 'ResourceAttributes',
112+
traceIdExpression: 'TraceId',
113+
spanIdExpression: 'SpanId',
114+
implicitColumnExpression: 'SpanName',
115+
durationExpression: 'Duration',
116+
durationPrecision: 9,
117+
parentSpanIdExpression: 'ParentSpanId',
118+
spanKindExpression: 'SpanKind',
119+
spanNameExpression: 'SpanName',
120+
logSourceId: 'l-758211293',
121+
statusCodeExpression: 'StatusCode',
122+
statusMessageExpression: 'StatusMessage',
123+
spanEventsValueExpression: 'Events',
124+
},
125+
});
126+
const metricsSource = await createSourceMutation.mutateAsync({
127+
source: {
128+
kind: SourceKind.Metric,
129+
name: 'Demo Metrics',
130+
connection: 'local',
131+
from: {
132+
databaseName: 'otel_v2',
133+
tableName: '',
134+
},
135+
timestampValueExpression: 'TimeUnix',
136+
serviceNameExpression: 'ServiceName',
137+
metricTables: {
138+
[MetricsDataType.Gauge]: 'otel_metrics_gauge',
139+
[MetricsDataType.Histogram]: 'otel_metrics_histogram',
140+
[MetricsDataType.Sum]: 'otel_metrics_sum',
141+
[MetricsDataType.Summary]: 'otel_metrics_summary',
142+
[MetricsDataType.ExponentialHistogram]:
143+
'otel_metrics_exponential_histogram',
144+
},
145+
resourceAttributesExpression: 'ResourceAttributes',
146+
logSourceId: logSource.id,
147+
},
148+
});
149+
const sessionSource = await createSourceMutation.mutateAsync({
150+
source: {
151+
kind: SourceKind.Session,
152+
name: 'Demo Sessions',
153+
connection: 'local',
154+
from: {
155+
databaseName: 'otel_v2',
156+
tableName: 'hyperdx_sessions',
157+
},
158+
timestampValueExpression: 'TimestampTime',
159+
defaultTableSelectExpression: 'Timestamp, ServiceName, Body',
160+
serviceNameExpression: 'ServiceName',
161+
severityTextExpression: 'SeverityText',
162+
eventAttributesExpression: 'LogAttributes',
163+
resourceAttributesExpression: 'ResourceAttributes',
164+
traceSourceId: traceSource.id,
165+
traceIdExpression: 'TraceId',
166+
spanIdExpression: 'SpanId',
167+
implicitColumnExpression: 'Body',
168+
},
169+
});
170+
await Promise.all([
171+
updateSourceMutation.mutateAsync({
172+
source: {
173+
...logSource,
174+
sessionSourceId: sessionSource.id,
175+
traceSourceId: traceSource.id,
176+
metricSourceId: metricsSource.id,
177+
},
178+
}),
179+
updateSourceMutation.mutateAsync({
180+
source: {
181+
...traceSource,
182+
logSourceId: logSource.id,
183+
sessionSourceId: sessionSource.id,
184+
metricSourceId: metricsSource.id,
185+
},
186+
}),
187+
]);
188+
notifications.show({
189+
title: 'Success',
190+
message: 'Connected to HyperDX demo server.',
191+
});
192+
setStep(undefined);
193+
} catch (err) {
194+
console.error(err);
195+
notifications.show({
196+
color: 'red',
197+
title: 'Error',
198+
message:
199+
'Could not connect to the HyperDX demo server, please try again later.',
200+
});
201+
}
202+
}, [createSourceMutation, createConnectionMutation, updateSourceMutation]);
43203

44204
return (
45205
<Modal
@@ -89,146 +249,7 @@ export default function OnboardingModal({
89249
variant="outline"
90250
w="100%"
91251
color="gray.4"
92-
onClick={async () => {
93-
try {
94-
await createConnectionMutation.mutateAsync({
95-
connection: {
96-
id: 'local',
97-
name: 'Demo',
98-
host: 'https://sql-clickhouse.clickhouse.com',
99-
username: 'otel_demo',
100-
password: '',
101-
},
102-
});
103-
const logSource = await createSourceMutation.mutateAsync({
104-
source: {
105-
kind: SourceKind.Log,
106-
name: 'Demo Logs',
107-
connection: 'local',
108-
from: {
109-
databaseName: 'otel_v2',
110-
tableName: 'otel_logs',
111-
},
112-
timestampValueExpression: 'TimestampTime',
113-
defaultTableSelectExpression:
114-
'Timestamp, ServiceName, SeverityText, Body',
115-
serviceNameExpression: 'ServiceName',
116-
severityTextExpression: 'SeverityText',
117-
eventAttributesExpression: 'LogAttributes',
118-
resourceAttributesExpression: 'ResourceAttributes',
119-
traceIdExpression: 'TraceId',
120-
spanIdExpression: 'SpanId',
121-
implicitColumnExpression: 'Body',
122-
displayedTimestampValueExpression: 'Timestamp',
123-
},
124-
});
125-
const traceSource = await createSourceMutation.mutateAsync({
126-
source: {
127-
kind: SourceKind.Trace,
128-
name: 'Demo Traces',
129-
connection: 'local',
130-
from: {
131-
databaseName: 'otel_v2',
132-
tableName: 'otel_traces',
133-
},
134-
timestampValueExpression: 'Timestamp',
135-
defaultTableSelectExpression:
136-
'Timestamp, ServiceName, StatusCode, round(Duration / 1e6), SpanName',
137-
serviceNameExpression: 'ServiceName',
138-
eventAttributesExpression: 'SpanAttributes',
139-
resourceAttributesExpression: 'ResourceAttributes',
140-
traceIdExpression: 'TraceId',
141-
spanIdExpression: 'SpanId',
142-
implicitColumnExpression: 'SpanName',
143-
durationExpression: 'Duration',
144-
durationPrecision: 9,
145-
parentSpanIdExpression: 'ParentSpanId',
146-
spanKindExpression: 'SpanKind',
147-
spanNameExpression: 'SpanName',
148-
logSourceId: 'l-758211293',
149-
statusCodeExpression: 'StatusCode',
150-
statusMessageExpression: 'StatusMessage',
151-
spanEventsValueExpression: 'Events',
152-
},
153-
});
154-
const metricsSource = await createSourceMutation.mutateAsync({
155-
source: {
156-
kind: SourceKind.Metric,
157-
name: 'Demo Metrics',
158-
connection: 'local',
159-
from: {
160-
databaseName: 'otel_v2',
161-
tableName: '',
162-
},
163-
timestampValueExpression: 'TimeUnix',
164-
serviceNameExpression: 'ServiceName',
165-
metricTables: {
166-
[MetricsDataType.Gauge]: 'otel_metrics_gauge',
167-
[MetricsDataType.Histogram]: 'otel_metrics_histogram',
168-
[MetricsDataType.Sum]: 'otel_metrics_sum',
169-
[MetricsDataType.Summary]: 'otel_metrics_summary',
170-
[MetricsDataType.ExponentialHistogram]:
171-
'otel_metrics_exponential_histogram',
172-
},
173-
resourceAttributesExpression: 'ResourceAttributes',
174-
logSourceId: logSource.id,
175-
},
176-
});
177-
const sessionSource = await createSourceMutation.mutateAsync({
178-
source: {
179-
kind: SourceKind.Session,
180-
name: 'Demo Sessions',
181-
connection: 'local',
182-
from: {
183-
databaseName: 'otel_v2',
184-
tableName: 'hyperdx_sessions',
185-
},
186-
timestampValueExpression: 'TimestampTime',
187-
defaultTableSelectExpression:
188-
'Timestamp, ServiceName, Body',
189-
serviceNameExpression: 'ServiceName',
190-
severityTextExpression: 'SeverityText',
191-
eventAttributesExpression: 'LogAttributes',
192-
resourceAttributesExpression: 'ResourceAttributes',
193-
traceSourceId: traceSource.id,
194-
traceIdExpression: 'TraceId',
195-
spanIdExpression: 'SpanId',
196-
implicitColumnExpression: 'Body',
197-
},
198-
});
199-
await Promise.all([
200-
updateSourceMutation.mutateAsync({
201-
source: {
202-
...logSource,
203-
sessionSourceId: sessionSource.id,
204-
traceSourceId: traceSource.id,
205-
metricSourceId: metricsSource.id,
206-
},
207-
}),
208-
updateSourceMutation.mutateAsync({
209-
source: {
210-
...traceSource,
211-
logSourceId: logSource.id,
212-
sessionSourceId: sessionSource.id,
213-
metricSourceId: metricsSource.id,
214-
},
215-
}),
216-
]);
217-
notifications.show({
218-
title: 'Success',
219-
message: 'Connected to HyperDX demo server.',
220-
});
221-
setStep(undefined);
222-
} catch (err) {
223-
console.error(err);
224-
notifications.show({
225-
color: 'red',
226-
title: 'Error',
227-
message:
228-
'Could not connect to the HyperDX demo server, please try again later.',
229-
});
230-
}
231-
}}
252+
onClick={handleDemoServerClick}
232253
>
233254
Connect to Demo Server
234255
</Button>

0 commit comments

Comments
 (0)