Merge branch 'main' into getting-started-component

Author: elizabetdev

.changeset/yellow-files-deny.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Update some forms to work better with React 19

docker/hyperdx/Dockerfile

@@ -82,7 +82,7 @@ ENTRYPOINT ["sh", "/etc/local/entry.sh"]
 
 # all-in-one base ############################################################################################
 FROM hairyhenderson/gomplate:v4.3.3-alpine AS gomplate
-FROM clickhouse/clickhouse-server:${CLICKHOUSE_VERSION}-alpine AS all-in-one-base 
+FROM clickhouse/clickhouse-server:${CLICKHOUSE_VERSION}-alpine AS all-in-one-base
 
 ARG CODE_VERSION
 ARG USER_UID=10001
@@ -110,9 +110,8 @@ COPY --from=hyperdx ./clickhouseConfig.xml /etc/clickhouse-server/config.xml
 COPY --from=otel-collector ./config.yaml /etc/otelcol-contrib/config.yaml
 COPY --from=otel-collector ./supervisor_docker.yaml.tmpl /etc/otel/supervisor.yaml.tmpl
 
-# Copy otel-collector entrypoint and log rotation scripts
+# Copy otel-collector entrypoint script
 COPY --from=otel-collector --chmod=755 ./entrypoint.sh /otel-entrypoint.sh
-COPY --from=otel-collector --chmod=755 ./log-rotator.sh /log-rotator.sh
 
 # Copy gomplate binary from the gomplate image
 COPY --from=gomplate /bin/gomplate /usr/local/bin/gomplate

docker/otel-collector/log-tailer.sh

@@ -1,6 +1,5 @@
 #!/bin/sh
 # Generic log tailer script that follows a log file and echoes new lines to stdout
-# Handles file rotation and truncation (e.g., when used with log-rotator.sh)
 # Usage: log-tailer.sh <log_file_path> [sleep_interval]
 
 # Parse arguments

packages/api/.env.e2e

@@ -15,5 +15,6 @@ OPAMP_PORT=24320
 
 # Auto-create default connections and sources for new teams
 # Uses public demo ClickHouse instance with pre-populated data
-DEFAULT_CONNECTIONS='[{"name":"Demo ClickHouse","host":"https://sql-clickhouse.clickhouse.com","username":"otel_demo","password":""}]'
-DEFAULT_SOURCES='[{"from":{"databaseName":"otel_v2","tableName":"otel_logs"},"kind":"log","timestampValueExpression":"TimestampTime","name":"Demo Logs","displayedTimestampValueExpression":"Timestamp","implicitColumnExpression":"Body","serviceNameExpression":"ServiceName","eventAttributesExpression":"LogAttributes","resourceAttributesExpression":"ResourceAttributes","defaultTableSelectExpression":"Timestamp,ServiceName,SeverityText,Body","severityTextExpression":"SeverityText","traceIdExpression":"TraceId","spanIdExpression":"SpanId","connection":"Demo ClickHouse","traceSourceId":"Traces","metricSourceId":"Demo Metrics"},{"from":{"databaseName":"otel_v2","tableName":"otel_traces"},"kind":"trace","timestampValueExpression":"Timestamp","name":"Demo Traces","displayedTimestampValueExpression":"Timestamp","implicitColumnExpression":"SpanName","serviceNameExpression":"ServiceName","eventAttributesExpression":"SpanAttributes","resourceAttributesExpression":"ResourceAttributes","defaultTableSelectExpression":"Timestamp,ServiceName,StatusCode,round(Duration/1e6),SpanName","traceIdExpression":"TraceId","spanIdExpression":"SpanId","durationExpression":"Duration","durationPrecision":9,"parentSpanIdExpression":"ParentSpanId","spanNameExpression":"SpanName","spanKindExpression":"SpanKind","statusCodeExpression":"StatusCode","statusMessageExpression":"StatusMessage","connection":"Demo ClickHouse","logSourceId":"Demo Logs","metricSourceId":"Demo Metrics"},{"from":{"databaseName":"otel_v2","tableName":""},"kind":"metric","timestampValueExpression":"TimeUnix","name":"Demo Metrics","resourceAttributesExpression":"ResourceAttributes","serviceNameExpression":"ServiceName","metricTables":{"gauge":"otel_metrics_gauge","histogram":"otel_metrics_histogram","sum":"otel_metrics_sum","summary":"otel_metrics_summary","exponential histogram":"otel_metrics_exponential_histogram"},"connection":"Demo ClickHouse","logSourceId":"Demo Logs","traceSourceId":"Demo Traces"}]'
+DEFAULT_CONNECTIONS='[{"name":"local","host":"https://sql-clickhouse.clickhouse.com","username":"otel_demo","password":""}]'
+DEFAULT_SOURCES='[{"kind":"log","name":"Demo Logs","connection":"local","from":{"databaseName":"otel_v2","tableName":"otel_logs"},"timestampValueExpression":"TimestampTime","defaultTableSelectExpression":"Timestamp, ServiceName, SeverityText, Body","serviceNameExpression":"ServiceName","severityTextExpression":"SeverityText","eventAttributesExpression":"LogAttributes","resourceAttributesExpression":"ResourceAttributes","traceIdExpression":"TraceId","spanIdExpression":"SpanId","implicitColumnExpression":"Body","displayedTimestampValueExpression":"Timestamp","sessionSourceId":"Demo Sessions","traceSourceId":"Demo Traces","metricSourceId":"Demo Metrics"},{"kind":"trace","name":"Demo Traces","connection":"local","from":{"databaseName":"otel_v2","tableName":"otel_traces"},"timestampValueExpression":"Timestamp","defaultTableSelectExpression":"Timestamp, ServiceName, StatusCode, round(Duration / 1e6), SpanName","serviceNameExpression":"ServiceName","eventAttributesExpression":"SpanAttributes","resourceAttributesExpression":"ResourceAttributes","traceIdExpression":"TraceId","spanIdExpression":"SpanId","implicitColumnExpression":"SpanName","durationExpression":"Duration","durationPrecision":9,"parentSpanIdExpression":"ParentSpanId","spanKindExpression":"SpanKind","spanNameExpression":"SpanName","logSourceId":"Demo Logs","statusCodeExpression":"StatusCode","statusMessageExpression":"StatusMessage","spanEventsValueExpression":"Events","metricSourceId":"Demo Metrics","sessionSourceId":"Demo Sessions"},{"kind":"metric","name":"Demo Metrics","connection":"local","from":{"databaseName":"otel_v2","tableName":""},"timestampValueExpression":"TimeUnix","serviceNameExpression":"ServiceName","metricTables":{"gauge":"otel_metrics_gauge","histogram":"otel_metrics_histogram","sum":"otel_metrics_sum","summary":"otel_metrics_summary","exponential histogram":"otel_metrics_exponential_histogram"},"resourceAttributesExpression":"ResourceAttributes","logSourceId":"Demo Logs"},{"kind":"session","name":"Demo Sessions","connection":"local","from":{"databaseName":"otel_v2","tableName":"hyperdx_sessions"},"timestampValueExpression":"TimestampTime","defaultTableSelectExpression":"Timestamp, ServiceName, Body","serviceNameExpression":"ServiceName","severityTextExpression":"SeverityText","eventAttributesExpression":"LogAttributes","resourceAttributesExpression":"ResourceAttributes","traceSourceId":"Demo Traces","traceIdExpression":"TraceId","spanIdExpression":"SpanId","implicitColumnExpression":"Body"},{"kind":"trace","name":"ClickPy Traces","connection":"local","from":{"databaseName":"otel_clickpy","tableName":"otel_traces"},"timestampValueExpression":"Timestamp","defaultTableSelectExpression":"Timestamp, ServiceName, StatusCode, round(Duration / 1e6), SpanName","serviceNameExpression":"ServiceName","eventAttributesExpression":"SpanAttributes","resourceAttributesExpression":"ResourceAttributes","traceIdExpression":"TraceId","spanIdExpression":"SpanId","implicitColumnExpression":"SpanName","durationExpression":"Duration","durationPrecision":9,"parentSpanIdExpression":"ParentSpanId","spanKindExpression":"SpanKind","spanNameExpression":"SpanName","statusCodeExpression":"StatusCode","statusMessageExpression":"StatusMessage","spanEventsValueExpression":"Events","highlightedTraceAttributeExpressions":[{"sqlExpression":"if((SpanAttributes['http.route']) LIKE '%dashboard%', concat('https://clickpy.clickhouse.com', path(SpanAttributes['http.target'])), '')","alias":"clickpy_link"}],"sessionSourceId":"ClickPy Sessions"},{"kind":"session","name":"ClickPy Sessions","connection":"local","from":{"databaseName":"otel_clickpy","tableName":"hyperdx_sessions"},"timestampValueExpression":"TimestampTime","defaultTableSelectExpression":"Timestamp, ServiceName, Body","serviceNameExpression":"ServiceName","severityTextExpression":"SeverityText","eventAttributesExpression":"LogAttributes","resourceAttributesExpression":"ResourceAttributes","traceSourceId":"ClickPy Traces","traceIdExpression":"TraceId","spanIdExpression":"SpanId","implicitColumnExpression":"Body"}]'
+

packages/app/eslint.config.mjs

@@ -7,6 +7,9 @@ import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import prettierConfig from 'eslint-config-prettier';
 import simpleImportSort from 'eslint-plugin-simple-import-sort';
 import prettierPlugin from 'eslint-plugin-prettier/recommended';
+import playwrightPlugin from 'eslint-plugin-playwright';
+import reactHookFormPlugin from 'eslint-plugin-react-hook-form';
+import { fixupPluginRules } from '@eslint/compat';
 
 export default [
   js.configs.recommended,
@@ -38,6 +41,7 @@ export default [
       react: reactPlugin,
       'react-hooks': reactHooksPlugin,
       'simple-import-sort': simpleImportSort,
+      'react-hook-form': fixupPluginRules(reactHookFormPlugin), // not compatible with eslint 9 yet
     },
     rules: {
       ...nextPlugin.configs.recommended.rules,
@@ -80,6 +84,7 @@ export default [
       ],
       'react-hooks/exhaustive-deps': 'error',
       'no-console': ['error', { allow: ['warn', 'error'] }],
+      'react-hook-form/no-use-watch': 'error',
     },
     languageOptions: {
       parser: tseslint.parser,
@@ -116,11 +121,14 @@ export default [
   },
   {
     files: ['tests/e2e/**/*.{ts,js}'],
+    ...playwrightPlugin.configs['flat/recommended'],
     rules: {
+      ...playwrightPlugin.configs['flat/recommended'].rules,
       'no-console': 'off',
       'no-empty': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
       '@next/next/no-html-link-for-pages': 'off',
+      'playwright/no-networkidle': 'off', // temporary until we have a better way to deal with react re-renders
     },
   },
   ...storybook.configs['flat/recommended'],

packages/app/package.json

@@ -104,6 +104,7 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
+    "@eslint/compat": "^2.0.0",
     "@hookform/devtools": "^4.3.1",
     "@jedmao/location": "^3.0.0",
     "@playwright/test": "^1.57.0",
@@ -134,6 +135,8 @@
     "@types/react-table": "^7.7.14",
     "@types/sqlstring": "^2.3.2",
     "eslint-config-next": "^16.0.10",
+    "eslint-plugin-playwright": "^2.4.0",
+    "eslint-plugin-react-hook-form": "^0.3.1",
     "eslint-plugin-storybook": "10.1.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.2.0",
@@ -144,7 +147,7 @@
     "postcss": "^8.4.38",
     "postcss-preset-mantine": "^1.15.0",
     "prettier": "^3.3.2",
-    "storybook": "^10.1.4",
+    "storybook": "^10.1.10",
     "stylelint": "^16.26.1",
     "stylelint-config-standard-scss": "^16.0.0",
     "stylelint-prettier": "^5.0.3",

packages/app/src/AppNav.components.tsx

@@ -47,17 +47,8 @@ export const AppNavCloudBanner = () => {
     <div className="my-3 bg-muted rounded p-2 text-center">
       <span className="fs-8">Ready to deploy on ClickHouse Cloud?</span>
       <div className="mt-2 mb-2">
-        <Link
-          href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started#deploy-with-clickhouse-cloud"
-          passHref
-          legacyBehavior
-        >
-          <Button
-            variant="light"
-            size="xs"
-            component="a"
-            className="hover-color-white"
-          >
+        <Link href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started#deploy-with-clickhouse-cloud">
+          <Button variant="light" size="xs" className="hover-color-white">
             Get Started for Free
           </Button>
         </Link>

packages/app/src/AuthPage.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { NextSeo } from 'next-seo';
 import cx from 'classnames';
-import { SubmitHandler, useForm } from 'react-hook-form';
+import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import {
   Button,
   Notification,
@@ -45,7 +45,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
     handleSubmit,
     formState: { errors, isSubmitting },
     setError,
-    watch,
+    control,
   } = useForm<FormData>({
     reValidateMode: 'onSubmit',
   });
@@ -67,8 +67,16 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
     }
   }, [installation, isRegister, router]);
 
-  const currentPassword = watch('password', '');
-  const confirmPassword = watch('confirmPassword', '');
+  const currentPassword = useWatch({
+    control,
+    name: 'password',
+    defaultValue: '',
+  });
+  const confirmPassword = useWatch({
+    control,
+    name: 'confirmPassword',
+    defaultValue: '',
+  });
 
   const confirmPass = () => {
     return currentPassword === confirmPassword;

packages/app/src/ClickhousePage.tsx

@@ -1,12 +1,12 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import dynamic from 'next/dynamic';
 import {
   parseAsFloat,
   parseAsStringEnum,
   useQueryState,
   useQueryStates,
 } from 'nuqs';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { sql } from '@codemirror/lang-sql';
 import { format as formatSql } from '@hyperdx/common-utils/dist/sqlFormatter';
 import { DisplayType } from '@hyperdx/common-utils/dist/types';
@@ -436,17 +436,19 @@ function ClickhousePage() {
 
   const connection = _connection ?? connections?.[0]?.id ?? '';
 
-  const { control, watch } = useForm({
+  const { control } = useForm({
     values: {
       connection,
     },
   });
 
-  watch((data, { name, type }) => {
-    if (name === 'connection' && type === 'change') {
-      setConnection(data.connection ?? null);
+  const watchedConnection = useWatch({ control, name: 'connection' });
+
+  useEffect(() => {
+    if (watchedConnection !== connection) {
+      setConnection(watchedConnection ?? null);
     }
-  });
+  }, [watchedConnection, connection, setConnection]);
   const DEFAULT_INTERVAL = 'Past 1h';
   const [displayedTimeInputValue, setDisplayedTimeInputValue] =
     useState(DEFAULT_INTERVAL);

packages/app/src/DBChartPage.tsx

@@ -2,7 +2,7 @@ import { useCallback, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { parseAsJson, parseAsStringEnum, useQueryState } from 'nuqs';
-import { useForm } from 'react-hook-form';
+import { useForm, useWatch } from 'react-hook-form';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { SavedChartConfig, SourceKind } from '@hyperdx/common-utils/dist/types';
 import {
@@ -57,7 +57,7 @@ function AIAssistant({
     'ai-assistant-alert-dismissed',
     false,
   );
-  const { control, watch, setValue, handleSubmit } = useForm<{
+  const { control, setValue, handleSubmit } = useForm<{
     text: string;
     source: string;
   }>({