Merge branch 'main' into sr/hdx-249

hyperdxio · Mar 3, 2024 · 1aa7481 · 1aa7481
2 parents 7a30fd3 + bc1e84b
commit 1aa7481
Show file tree

Hide file tree

Showing 16 changed files with 416 additions and 3,551 deletions.
diff --git a/.changeset/smooth-falcons-report.md b/.changeset/smooth-falcons-report.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Allow to interact with page while log side panel is open
diff --git a/packages/api/src/clickhouse/index.ts b/packages/api/src/clickhouse/index.ts
@@ -1715,7 +1715,7 @@ export const getMultiSeriesChart = async ({
 
     queries = await Promise.all(
       series.map(s => {
-        if (s.type != 'time' && s.type != 'table') {
+        if (s.type != 'time' && s.type != 'table' && s.type != 'number') {
           throw new Error(`Unsupported series type: ${s.type}`);
         }
         if (s.table != 'logs' && s.table != null) {
@@ -1727,7 +1727,7 @@ export const getMultiSeriesChart = async ({
           endTime,
           field: s.field,
           granularity,
-          groupBy: s.groupBy,
+          groupBy: s.type === 'number' ? [] : s.groupBy,
           propertyTypeMappingsModel,
           q: s.where,
           sortOrder: s.type === 'table' ? s.sortOrder : undefined,
@@ -1746,7 +1746,7 @@ export const getMultiSeriesChart = async ({
 
     queries = await Promise.all(
       series.map(s => {
-        if (s.type != 'time' && s.type != 'table') {
+        if (s.type != 'time' && s.type != 'table' && s.type != 'number') {
           throw new Error(`Unsupported series type: ${s.type}`);
         }
         if (s.table != 'metrics') {
@@ -1764,13 +1764,13 @@ export const getMultiSeriesChart = async ({
           endTime,
           name: s.field,
           granularity,
-          groupBy: s.groupBy,
           sortOrder: s.type === 'table' ? s.sortOrder : undefined,
           q: s.where,
           startTime,
           teamId,
           dataType: s.metricDataType,
           propertyTypeMappingsModel,
+          groupBy: s.type === 'number' ? [] : s.groupBy,
         });
       }),
     );

diff --git a/packages/app/jest.config.js b/packages/app/jest.config.js
@@ -1,13 +1,10 @@
 module.exports = {
   preset: 'ts-jest/presets/js-with-ts',
-  testEnvironment: '@deploysentinel/jest-rtl-debugger/environment',
-  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+  testEnvironment: 'jsdom',
   globalSetup: '<rootDir>/global-setup.js',
   roots: ['<rootDir>/src'],
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
-    '^.+\\.(css|scss|sass)$':
-      '@deploysentinel/jest-rtl-debugger/transforms/css',
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -32,7 +32,6 @@
     "date-fns": "^2.28.0",
     "date-fns-tz": "^2.0.0",
     "esbuild": "^0.14.47",
-    "eslint-config-next": "13",
     "fuse.js": "^6.6.2",
     "immer": "^9.0.21",
     "jotai": "^2.5.1",
@@ -91,11 +90,10 @@
     "use-query-params": "^2.1.2"
   },
   "devDependencies": {
-    "@deploysentinel/jest-rtl-debugger": "^0.2.3",
     "@jedmao/location": "^3.0.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/hyperdx__lucene": "npm:@types/lucene",
     "@types/intercom-web": "^2.8.18",
     "@types/jest": "^28.1.6",
@@ -114,11 +112,12 @@
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",
     "eslint": "^8.34.0",
-    "eslint-config-next": "^12.3.3",
+    "eslint-config-next": "13",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "jest": "^28.1.3",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8.4.35",
     "ts-jest": "^28.0.7",
     "typescript": "^4.9.5"

diff --git a/packages/app/setup-jest.ts b/packages/app/setup-jest.ts
diff --git a/packages/app/src/ChartUtils.tsx b/packages/app/src/ChartUtils.tsx
@@ -2,7 +2,13 @@ import { useMemo, useRef, useState } from 'react';
 import { add } from 'date-fns';
 import Select from 'react-select';
 import AsyncSelect from 'react-select/async';
-import { Divider, Group, Paper, SegmentedControl } from '@mantine/core';
+import {
+  Divider,
+  Group,
+  Paper,
+  SegmentedControl,
+  Select as MSelect,
+} from '@mantine/core';
 
 import { NumberFormatInput } from './components/NumberFormat';
 import api from './api';
@@ -77,6 +83,23 @@ export enum Granularity {
   ThirtyDay = '30 day',
 }
 
+export const GRANULARITY_SECONDS_MAP: Record<Granularity, number> = {
+  [Granularity.ThirtySecond]: 30,
+  [Granularity.OneMinute]: 60,
+  [Granularity.FiveMinute]: 5 * 60,
+  [Granularity.TenMinute]: 10 * 60,
+  [Granularity.FifteenMinute]: 15 * 60,
+  [Granularity.ThirtyMinute]: 30 * 60,
+  [Granularity.OneHour]: 60 * 60,
+  [Granularity.TwoHour]: 2 * 60 * 60,
+  [Granularity.SixHour]: 6 * 60 * 60,
+  [Granularity.TwelveHour]: 12 * 60 * 60,
+  [Granularity.OneDay]: 24 * 60 * 60,
+  [Granularity.TwoDay]: 2 * 24 * 60 * 60,
+  [Granularity.SevenDay]: 7 * 24 * 60 * 60,
+  [Granularity.ThirtyDay]: 30 * 24 * 60 * 60,
+};
+
 export const isGranularity = (value: string): value is Granularity => {
   return Object.values(Granularity).includes(value as Granularity);
 };
@@ -465,34 +488,26 @@ export function MetricNameSelect({
   }, [metricNamesData]);
 
   return (
-    <AsyncSelect
-      isLoading={isLoading}
-      isDisabled={isError}
+    <MSelect
+      disabled={isLoading || isError}
+      variant="filled"
       placeholder={
         isLoading
           ? 'Loading...'
           : isError
           ? 'Unable to load metrics'
           : 'Select a metric...'
       }
-      loadOptions={input => {
-        return Promise.resolve(
-          options.filter(v =>
-            input.length > 0
-              ? v.value.toLowerCase().includes(input.toLowerCase())
-              : true,
-          ),
-        );
+      data={options}
+      limit={100}
+      comboboxProps={{
+        position: 'bottom-start',
+        width: 'auto',
       }}
-      defaultOptions={options}
-      value={
-        value != null
-          ? options.find(v => v.value === value)
-          : { value: undefined, label: 'None' }
-      }
-      onChange={opt => setValue(opt?.value)}
-      className="ds-select"
-      classNamePrefix="ds-react-select"
+      value={value ?? undefined}
+      searchable
+      clearable
+      onChange={value => setValue(value ?? undefined)}
     />
   );
 }

diff --git a/packages/app/src/DashboardPage.tsx b/packages/app/src/DashboardPage.tsx
@@ -189,12 +189,18 @@ const Tile = forwardRef(
         : type === 'number'
         ? {
             type,
-            table: chart.series[0].table ?? 'logs',
-            aggFn: chart.series[0].aggFn,
             field: chart.series[0].field ?? '', // TODO: Fix in definition
-            where: buildAndWhereClause(query, chart.series[0].where),
-            dateRange,
             numberFormat: chart.series[0].numberFormat,
+            series: chart.series.map(s => ({
+              ...s,
+              where: buildAndWhereClause(
+                query,
+                s.type === 'number' ? s.where : '',
+              ),
+            })),
+            dateRange,
+            granularity:
+              granularity ?? convertDateRangeToGranularityString(dateRange, 60),
           }
         : {
             type,