fix: connection creation revamp (#947)

Fixes HDX-1926

Author: knudtty

.changeset/young-plants-whisper.md

@@ -0,0 +1,7 @@
+---
+"@hyperdx/common-utils": patch
+"@hyperdx/api": patch
+"@hyperdx/app": patch
+---
+
+fix: remove id from post for connection creation endpoint

docker/hyperdx/entry.local.base.sh

@@ -63,7 +63,7 @@ npx concurrently \
   "--names=API,APP,ALERT-TASK" \
   "PORT=${HYPERDX_API_PORT:-8000} HYPERDX_APP_PORT=${HYPERDX_APP_PORT:-8080} node -r ./packages/api/tracing ./packages/api/index" \
   "cd ./packages/app/packages/app && HOSTNAME='0.0.0.0' HYPERDX_API_PORT=${HYPERDX_API_PORT:-8000} PORT=${HYPERDX_APP_PORT:-8080} node server.js" \
-  "node -r ./packages/api/tracing ./packages/api/tasks/index check-alerts"
+  "node -r ./packages/api/tracing ./packages/api/tasks/index check-alerts" \
   > /var/log/app.log 2>&1 &
 
 echo ""

package.json

@@ -30,8 +30,10 @@
   "scripts": {
     "setup": "yarn install && husky install",
     "app:dev": "npx concurrently -k -n 'API,APP,ALERTS-TASK,COMMON-UTILS' -c 'green.bold,blue.bold,yellow.bold,magenta' 'nx run @hyperdx/api:dev' 'nx run @hyperdx/app:dev' 'nx run @hyperdx/api:dev-task check-alerts' 'nx run @hyperdx/common-utils:dev'",
+    "app:dev:local": "npx concurrently -k -n 'APP,COMMON-UTILS' -c 'blue.bold,magenta' 'nx run @hyperdx/app:dev:local' 'nx run @hyperdx/common-utils:dev'",
     "app:lint": "nx run @hyperdx/app:ci:lint",
     "dev": "docker compose -f docker-compose.dev.yml up -d && yarn app:dev && docker compose -f docker-compose.dev.yml down",
+    "dev:local": "IS_LOCAL_APP_MODE='DANGEROUSLY_is_local_app_mode💀' yarn dev",
     "dev:down": "docker compose -f docker-compose.dev.yml down",
     "dev:compose": "docker compose -f docker-compose.dev.yml",
     "lint": "npx nx run-many -t ci:lint",

packages/api/src/routers/api/connections.ts

@@ -26,19 +26,19 @@ router.get('/', async (req, res, next) => {
 router.post(
   '/',
   validateRequest({
-    body: ConnectionSchema,
+    body: ConnectionSchema.omit({ id: true }),
   }),
   async (req, res, next) => {
     try {
       const { teamId } = getNonNullUserWithTeam(req);
 
-      await createConnection(teamId.toString(), {
+      const connection = await createConnection(teamId.toString(), {
         ...req.body,
         password: req.body.password ?? '',
         team: teamId,
       });
 
-      res.status(200).send();
+      res.status(200).send({ id: connection._id.toString() });
     } catch (e) {
       next(e);
     }

packages/app/src/components/ConnectionForm.tsx

@@ -146,8 +146,9 @@ export function ConnectionForm({
     };
 
     if (isNew) {
+      const { id, ...connection } = normalizedData;
       createConnection.mutate(
-        { connection: normalizedData },
+        { connection },
         {
           onSuccess: () => {
             notifications.show({

packages/app/src/components/OnboardingModal.tsx

@@ -63,20 +63,31 @@ export default function OnboardingModal({
           }
         }
       }
-      await createConnectionMutation.mutateAsync({
-        connection: {
-          id: 'local',
-          name: 'Demo',
-          host: 'https://sql-clickhouse.clickhouse.com',
-          username: 'otel_demo',
-          password: '',
+      let createdConnectionId = '';
+      await createConnectionMutation.mutateAsync(
+        {
+          connection: {
+            name: 'Demo',
+            host: 'https://sql-clickhouse.clickhouse.com',
+            username: 'otel_demo',
+            password: '',
+          },
         },
-      });
+        {
+          onSuccess(data) {
+            createdConnectionId = data.id;
+          },
+          onError(error) {
+            console.error('Failed to create demo connection: ', error);
+            return;
+          },
+        },
+      );
       const logSource = await createSourceMutation.mutateAsync({
         source: {
           kind: SourceKind.Log,
           name: 'Demo Logs',
-          connection: 'local',
+          connection: createdConnectionId,
           from: {
             databaseName: 'otel_v2',
             tableName: 'otel_logs',
@@ -98,7 +109,7 @@ export default function OnboardingModal({
         source: {
           kind: SourceKind.Trace,
           name: 'Demo Traces',
-          connection: 'local',
+          connection: createdConnectionId,
           from: {
             databaseName: 'otel_v2',
             tableName: 'otel_traces',
@@ -127,7 +138,7 @@ export default function OnboardingModal({
         source: {
           kind: SourceKind.Metric,
           name: 'Demo Metrics',
-          connection: 'local',
+          connection: createdConnectionId,
           from: {
             databaseName: 'otel_v2',
             tableName: '',
@@ -150,7 +161,7 @@ export default function OnboardingModal({
         source: {
           kind: SourceKind.Session,
           name: 'Demo Sessions',
-          connection: 'local',
+          connection: createdConnectionId,
           from: {
             databaseName: 'otel_v2',
             tableName: 'hyperdx_sessions',

packages/app/src/connection.ts

@@ -56,8 +56,12 @@ export function useConnections() {
 export function useCreateConnection() {
   const queryClient = useQueryClient();
 
-  return useMutation<void, Error, { connection: Connection }>({
-    mutationFn: async ({ connection }: { connection: Connection }) => {
+  return useMutation<
+    { id: string },
+    Error,
+    { connection: Omit<Connection, 'id'> }
+  >({
+    mutationFn: async ({ connection }) => {
       if (IS_LOCAL_MODE) {
         const isValid = await testLocalConnection({
           host: connection.host,
@@ -71,22 +75,25 @@ export function useCreateConnection() {
           );
         }
 
+        // id key in local connection and return value
+        const createdConnection = { id: 'local' };
+
         // should be only one connection
         setLocalConnections([
           {
             ...connection,
-            id: 'local',
+            ...createdConnection,
           },
         ]);
-        return;
+        return createdConnection;
       }
 
-      await hdxServer('connections', {
+      const res = await hdxServer('connections', {
         method: 'POST',
         json: connection,
-      });
+      }).json<{ id: string }>();
 
-      return;
+      return res;
     },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['connections'] });