Merge branch 'main' into drew/fix-service-map-span-kind-values

Author: pulpdrew

.changeset/angry-pugs-drive.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Improvements to Webhooks rendering (grouping, icons, etc)

.changeset/chilled-chairs-design.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/common-utils": minor
+---
+
+Add support for visualizing histogram counts

.changeset/yellow-files-deny.md

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

.gitignore

@@ -73,4 +73,7 @@ docker-compose.prod.yml
 .volumes
 
 # NX
-.nx/
+.nx/
+
+# webstorm
+.idea

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/app/eslint.config.mjs

@@ -8,6 +8,8 @@ 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,
@@ -39,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,
@@ -81,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,

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",
@@ -135,6 +136,7 @@
     "@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",

packages/app/src/AlertsPage.tsx

@@ -37,6 +37,7 @@ import { ErrorBoundary } from '@/components/ErrorBoundary';
 import { PageHeader } from '@/components/PageHeader';
 
 import { isAlertSilenceExpired } from './utils/alerts';
+import { getWebhookChannelIcon } from './utils/webhookIcons';
 import api from './api';
 import { withAppNav } from './layout';
 import type { AlertsPageItem } from './types';
@@ -367,13 +368,11 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
   }, [alert]);
 
   const notificationMethod = React.useMemo(() => {
-    if (alert.channel.type === 'webhook') {
-      return (
-        <Group gap={2}>
-          Notify via <IconBrandSlack size={16} /> Webhook
-        </Group>
-      );
-    }
+    return (
+      <Group gap={5}>
+        Notify via {getWebhookChannelIcon(alert.channel.type)} Webhook
+      </Group>
+    );
   }, [alert]);
 
   const linkTitle = React.useMemo(() => {

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>