diff --git a/.changeset/smooth-falcons-report.md b/.changeset/smooth-falcons-report.md new file mode 100644 index 000000000..dae066917 --- /dev/null +++ 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 index 1f0cd38a3..7add58cb4 100644 --- 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 index 8b98c91d4..d55c019c0 100644 --- 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: ['/setup-jest.ts'], + testEnvironment: 'jsdom', globalSetup: '/global-setup.js', roots: ['/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 index aa4c62a63..7cd7401a4 100644 --- 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 deleted file mode 100644 index d94902df7..000000000 --- a/packages/app/setup-jest.ts +++ /dev/null @@ -1,5 +0,0 @@ -import setup from '@deploysentinel/jest-rtl-debugger/setup'; - -import '@testing-library/jest-dom'; - -setup(); diff --git a/packages/app/src/ChartUtils.tsx b/packages/app/src/ChartUtils.tsx index 6604c8703..03d6b40f3 100644 --- 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.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,9 +488,9 @@ export function MetricNameSelect({ }, [metricNamesData]); return ( - { - 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 index 81280b234..2c3458d77 100644 --- 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, diff --git a/packages/app/src/EditChartForm.tsx b/packages/app/src/EditChartForm.tsx index 7c618c26a..4b3951535 100644 --- a/packages/app/src/EditChartForm.tsx +++ b/packages/app/src/EditChartForm.tsx @@ -370,12 +370,11 @@ export const EditNumberChartForm = ({ const chartConfig = useMemo(() => { return _editedChart != null && _editedChart.series[0].type === 'number' ? { - aggFn: _editedChart.series[0].aggFn ?? 'count', - table: _editedChart.series[0].table ?? 'logs', field: _editedChart.series[0].field ?? '', // TODO: Fix in definition - where: _editedChart.series[0].where, dateRange, numberFormat: _editedChart.series[0].numberFormat, + series: _editedChart.series, + granularity: convertDateRangeToGranularityString(dateRange, 60), } : null; }, [_editedChart, dateRange]); @@ -393,9 +392,6 @@ export const EditNumberChartForm = ({ return null; } - const labelWidth = 320; - const aggFn = _editedChart.series[0].aggFn ?? 'count'; - return (
{ @@ -419,105 +415,14 @@ export const EditNumberChartForm = ({ placeholder="Chart Name" /> -
-
- Aggregation Function -
-
-