diff --git a/static/app/views/explore/contexts/pageParamsContext/index.spec.tsx b/static/app/views/explore/contexts/pageParamsContext/index.spec.tsx index 83df3a759e8304..5ab12b88076c9c 100644 --- a/static/app/views/explore/contexts/pageParamsContext/index.spec.tsx +++ b/static/app/views/explore/contexts/pageParamsContext/index.spec.tsx @@ -8,7 +8,6 @@ import { PageParamsProvider, useExplorePageParams, useSetExplorePageParams, - useSetExploreSortBys, } from 'sentry/views/explore/contexts/pageParamsContext'; import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode'; import { @@ -18,10 +17,12 @@ import { Visualize, } from 'sentry/views/explore/contexts/pageParamsContext/visualizes'; import { + useSetQueryParamsAggregateSortBys, useSetQueryParamsFields, useSetQueryParamsGroupBys, useSetQueryParamsMode, useSetQueryParamsQuery, + useSetQueryParamsSortBys, useSetQueryParamsVisualizes, } from 'sentry/views/explore/queryParams/context'; import {SpansQueryParamsProvider} from 'sentry/views/explore/spans/spansQueryParamsProvider'; @@ -56,7 +57,8 @@ describe('PageParamsProvider', () => { let setGroupBys: ReturnType; let setMode: ReturnType; let setQuery: ReturnType; - let setSortBys: ReturnType; + let setSortBys: ReturnType; + let setAggregateSortBys: ReturnType; let setVisualizes: ReturnType; function Component() { @@ -66,7 +68,8 @@ describe('PageParamsProvider', () => { setGroupBys = useSetQueryParamsGroupBys(); setMode = useSetQueryParamsMode(); setQuery = useSetQueryParamsQuery(); - setSortBys = useSetExploreSortBys(); + setSortBys = useSetQueryParamsSortBys(); + setAggregateSortBys = useSetQueryParamsAggregateSortBys(); setVisualizes = useSetQueryParamsVisualizes(); return
; } @@ -393,7 +396,7 @@ describe('PageParamsProvider', () => { ], }); - act(() => setSortBys([{field: 'max(span.duration)', kind: 'desc'}])); + act(() => setAggregateSortBys([{field: 'max(span.duration)', kind: 'desc'}])); expect(pageParams).toEqual( expect.objectContaining({ @@ -428,7 +431,7 @@ describe('PageParamsProvider', () => { ], }); - act(() => setSortBys([{field: 'avg(span.duration)', kind: 'desc'}])); + act(() => setAggregateSortBys([{field: 'avg(span.duration)', kind: 'desc'}])); expect(pageParams).toEqual( expect.objectContaining({ @@ -463,7 +466,7 @@ describe('PageParamsProvider', () => { ], }); - act(() => setSortBys([{field: 'sdk.name', kind: 'desc'}])); + act(() => setAggregateSortBys([{field: 'sdk.name', kind: 'desc'}])); expect(pageParams).toEqual( expect.objectContaining({ @@ -495,7 +498,7 @@ describe('PageParamsProvider', () => { ], }); - act(() => setSortBys([{field: 'sdk.version', kind: 'desc'}])); + act(() => setAggregateSortBys([{field: 'sdk.version', kind: 'desc'}])); expect(pageParams).toEqual( expect.objectContaining({ diff --git a/static/app/views/explore/contexts/pageParamsContext/index.tsx b/static/app/views/explore/contexts/pageParamsContext/index.tsx index 4f9f54107adf94..c2e32e4b27f24c 100644 --- a/static/app/views/explore/contexts/pageParamsContext/index.tsx +++ b/static/app/views/explore/contexts/pageParamsContext/index.tsx @@ -249,18 +249,6 @@ export function useExploreDataset(): DiscoverDatasets { return DiscoverDatasets.SPANS; } -export function useExploreSortBys(): Sort[] { - const pageParams = useExplorePageParams(); - return pageParams.mode === Mode.AGGREGATE - ? pageParams.aggregateSortBys - : pageParams.sortBys; -} - -export function useExploreAggregateSortBys(): Sort[] { - const pageParams = useExplorePageParams(); - return pageParams.aggregateSortBys; -} - export function useExploreTitle(): string | undefined { const pageParams = useExplorePageParams(); return pageParams.title; @@ -497,18 +485,3 @@ export function useSetExplorePageParams(): ( [location, navigate, readablePageParams, managedFields, setManagedFields] ); } - -export function useSetExploreSortBys() { - const pageParams = useExplorePageParams(); - const setPageParams = useSetExplorePageParams(); - return useCallback( - (sortBys: Sort[]) => { - setPageParams( - pageParams.mode === Mode.AGGREGATE - ? {aggregateSortBys: sortBys} - : {sampleSortBys: sortBys} - ); - }, - [pageParams, setPageParams] - ); -} diff --git a/static/app/views/explore/hooks/useAddToDashboard.tsx b/static/app/views/explore/hooks/useAddToDashboard.tsx index 4e83678088245c..89c4141ebdfa8a 100644 --- a/static/app/views/explore/hooks/useAddToDashboard.tsx +++ b/static/app/views/explore/hooks/useAddToDashboard.tsx @@ -13,16 +13,15 @@ import { WidgetType, } from 'sentry/views/dashboards/types'; import {handleAddQueryToDashboard} from 'sentry/views/discover/utils'; -import { - useExploreDataset, - useExploreSortBys, -} from 'sentry/views/explore/contexts/pageParamsContext'; +import {useExploreDataset} from 'sentry/views/explore/contexts/pageParamsContext'; import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode'; import {formatSort} from 'sentry/views/explore/contexts/pageParamsContext/sortBys'; import { + useQueryParamsAggregateSortBys, useQueryParamsGroupBys, useQueryParamsMode, useQueryParamsQuery, + useQueryParamsSortBys, useQueryParamsVisualizes, } from 'sentry/views/explore/queryParams/context'; import {ChartType} from 'sentry/views/insights/common/components/chart'; @@ -41,10 +40,13 @@ export function useAddToDashboard() { const mode = useQueryParamsMode(); const dataset = useExploreDataset(); const groupBys = useQueryParamsGroupBys(); - const sortBys = useExploreSortBys(); + const sampleSortBys = useQueryParamsSortBys(); + const aggregateSortBys = useQueryParamsAggregateSortBys(); const visualizes = useQueryParamsVisualizes(); const query = useQueryParamsQuery(); + const sortBys = mode === Mode.SAMPLES ? sampleSortBys : aggregateSortBys; + const getEventView = useCallback( (visualizeIndex: number) => { const yAxis = visualizes[visualizeIndex]!.yAxis; diff --git a/static/app/views/explore/hooks/useExploreAggregatesTable.tsx b/static/app/views/explore/hooks/useExploreAggregatesTable.tsx index 6215d7978b4604..edc2b02bfffd7a 100644 --- a/static/app/views/explore/hooks/useExploreAggregatesTable.tsx +++ b/static/app/views/explore/hooks/useExploreAggregatesTable.tsx @@ -4,16 +4,14 @@ import type {NewQuery} from 'sentry/types/organization'; import {defined} from 'sentry/utils'; import EventView from 'sentry/utils/discover/eventView'; import usePageFilters from 'sentry/utils/usePageFilters'; -import { - useExploreDataset, - useExploreSortBys, -} from 'sentry/views/explore/contexts/pageParamsContext'; +import {useExploreDataset} from 'sentry/views/explore/contexts/pageParamsContext'; import {isGroupBy} from 'sentry/views/explore/contexts/pageParamsContext/aggregateFields'; import {formatSort} from 'sentry/views/explore/contexts/pageParamsContext/sortBys'; import type {SpansRPCQueryExtras} from 'sentry/views/explore/hooks/useProgressiveQuery'; import {useProgressiveQuery} from 'sentry/views/explore/hooks/useProgressiveQuery'; import { useQueryParamsAggregateFields, + useQueryParamsAggregateSortBys, useQueryParamsExtrapolate, } from 'sentry/views/explore/queryParams/context'; import {useSpansQuery} from 'sentry/views/insights/common/queries/useSpansQuery'; @@ -66,7 +64,7 @@ function useExploreAggregatesTableImp({ const dataset = useExploreDataset(); const aggregateFields = useQueryParamsAggregateFields({validate: true}); - const sorts = useExploreSortBys(); + const aggregateSortBys = useQueryParamsAggregateSortBys(); const fields = useMemo(() => { // When rendering the table, we want the group bys first @@ -95,14 +93,14 @@ function useExploreAggregatesTableImp({ id: undefined, name: 'Explore - Span Aggregates', fields, - orderby: sorts.map(formatSort), + orderby: aggregateSortBys.map(formatSort), query, version: 2, dataset, }; return EventView.fromNewQueryWithPageFilters(discoverQuery, selection); - }, [dataset, fields, sorts, query, selection]); + }, [dataset, fields, aggregateSortBys, query, selection]); const result = useSpansQuery({ enabled, diff --git a/static/app/views/explore/hooks/useExploreSpansTable.tsx b/static/app/views/explore/hooks/useExploreSpansTable.tsx index d32d13ca307eff..2caf3c8e542d61 100644 --- a/static/app/views/explore/hooks/useExploreSpansTable.tsx +++ b/static/app/views/explore/hooks/useExploreSpansTable.tsx @@ -4,10 +4,7 @@ import type {NewQuery} from 'sentry/types/organization'; import {defined} from 'sentry/utils'; import EventView from 'sentry/utils/discover/eventView'; import usePageFilters from 'sentry/utils/usePageFilters'; -import { - useExploreDataset, - useExploreSortBys, -} from 'sentry/views/explore/contexts/pageParamsContext'; +import {useExploreDataset} from 'sentry/views/explore/contexts/pageParamsContext'; import { useProgressiveQuery, type SpansRPCQueryExtras, @@ -15,6 +12,7 @@ import { import { useQueryParamsExtrapolate, useQueryParamsFields, + useQueryParamsSortBys, } from 'sentry/views/explore/queryParams/context'; import {useSpansQuery} from 'sentry/views/insights/common/queries/useSpansQuery'; @@ -66,7 +64,7 @@ function useExploreSpansTableImp({ const dataset = useExploreDataset(); const fields = useQueryParamsFields(); - const sortBys = useExploreSortBys(); + const sortBys = useQueryParamsSortBys(); const visibleFields = useMemo( () => (fields.includes('id') ? fields : ['id', ...fields]), diff --git a/static/app/views/explore/hooks/useExploreTimeseries.tsx b/static/app/views/explore/hooks/useExploreTimeseries.tsx index adffbb04ccd429..5bc55c34c60482 100644 --- a/static/app/views/explore/hooks/useExploreTimeseries.tsx +++ b/static/app/views/explore/hooks/useExploreTimeseries.tsx @@ -4,10 +4,7 @@ import {defined} from 'sentry/utils'; import {dedupeArray} from 'sentry/utils/dedupeArray'; import {MutableSearch} from 'sentry/utils/tokenizeSearch'; import {determineSeriesSampleCountAndIsSampled} from 'sentry/views/alerts/rules/metric/utils/determineSeriesSampleCount'; -import { - useExploreAggregateSortBys, - useExploreDataset, -} from 'sentry/views/explore/contexts/pageParamsContext'; +import {useExploreDataset} from 'sentry/views/explore/contexts/pageParamsContext'; import {formatSort} from 'sentry/views/explore/contexts/pageParamsContext/sortBys'; import {DEFAULT_VISUALIZATION} from 'sentry/views/explore/contexts/pageParamsContext/visualizes'; import {useChartInterval} from 'sentry/views/explore/hooks/useChartInterval'; @@ -17,6 +14,7 @@ import { } from 'sentry/views/explore/hooks/useProgressiveQuery'; import {useTopEvents} from 'sentry/views/explore/hooks/useTopEvents'; import { + useQueryParamsAggregateSortBys, useQueryParamsExtrapolate, useQueryParamsGroupBys, useQueryParamsVisualizes, @@ -71,7 +69,7 @@ function useExploreTimeseriesImpl({ }: UseExploreTimeseriesOptions): UseExploreTimeseriesResults { const dataset = useExploreDataset(); const groupBys = useQueryParamsGroupBys(); - const sortBys = useExploreAggregateSortBys(); + const sortBys = useQueryParamsAggregateSortBys(); const visualizes = useQueryParamsVisualizes({validate: true}); const [interval] = useChartInterval(); const topEvents = useTopEvents(); diff --git a/static/app/views/explore/multiQueryMode/locationUtils.tsx b/static/app/views/explore/multiQueryMode/locationUtils.tsx index 55a36457022b81..38967910b8b60e 100644 --- a/static/app/views/explore/multiQueryMode/locationUtils.tsx +++ b/static/app/views/explore/multiQueryMode/locationUtils.tsx @@ -140,7 +140,7 @@ type WritableExploreQueryParts = { fields?: string[]; groupBys?: readonly string[]; query?: string; - sortBys?: Sort[]; + sortBys?: readonly Sort[]; yAxes?: string[]; }; diff --git a/static/app/views/explore/queryParams/context.tsx b/static/app/views/explore/queryParams/context.tsx index bbf96bc70fd938..09da9436e3b96f 100644 --- a/static/app/views/explore/queryParams/context.tsx +++ b/static/app/views/explore/queryParams/context.tsx @@ -388,6 +388,17 @@ export function useQueryParamsAggregateSortBys(): readonly Sort[] { return queryParams.aggregateSortBys; } +export function useSetQueryParamsAggregateSortBys() { + const setQueryParams = useSetQueryParams(); + + return useCallback( + (aggregateSortBys: Sort[]) => { + setQueryParams({aggregateSortBys}); + }, + [setQueryParams] + ); +} + export function useQueryParamsAggregateCursor(): string { const queryParams = useQueryParams(); return queryParams.aggregateCursor; diff --git a/static/app/views/explore/spans/spansQueryParams.tsx b/static/app/views/explore/spans/spansQueryParams.tsx index 5636db34e34457..a19c3680e9b403 100644 --- a/static/app/views/explore/spans/spansQueryParams.tsx +++ b/static/app/views/explore/spans/spansQueryParams.tsx @@ -101,6 +101,15 @@ export function getTargetWithReadableQueryParams( updateNullableLocation(target, SPANS_MODE_KEY, writableQueryParams.mode); updateNullableLocation(target, SPANS_FIELD_KEY, writableQueryParams.fields); + updateNullableLocation( + target, + SPANS_SORT_KEY, + writableQueryParams.sortBys === null + ? null + : writableQueryParams.sortBys?.map( + sort => `${sort.kind === 'desc' ? '-' : ''}${sort.field}` + ) + ); updateNullableLocation( target, @@ -109,6 +118,15 @@ export function getTargetWithReadableQueryParams( JSON.stringify(aggregateField) ) ); + updateNullableLocation( + target, + SPANS_AGGREGATE_SORT_KEY, + writableQueryParams.aggregateSortBys === null + ? null + : writableQueryParams.aggregateSortBys?.map( + sort => `${sort.kind === 'desc' ? '-' : ''}${sort.field}` + ) + ); return target; } diff --git a/static/app/views/explore/tables/aggregatesTable.tsx b/static/app/views/explore/tables/aggregatesTable.tsx index 306048855eea24..1b988ad9a07366 100644 --- a/static/app/views/explore/tables/aggregatesTable.tsx +++ b/static/app/views/explore/tables/aggregatesTable.tsx @@ -30,10 +30,6 @@ import { TableStatus, useTableStyles, } from 'sentry/views/explore/components/table'; -import { - useExploreSortBys, - useSetExploreSortBys, -} from 'sentry/views/explore/contexts/pageParamsContext'; import {isGroupBy} from 'sentry/views/explore/contexts/pageParamsContext/aggregateFields'; import {useTraceItemTags} from 'sentry/views/explore/contexts/spanTagsContext'; import type {AggregatesTableResult} from 'sentry/views/explore/hooks/useExploreAggregatesTable'; @@ -42,10 +38,12 @@ import {TOP_EVENTS_LIMIT, useTopEvents} from 'sentry/views/explore/hooks/useTopE import { useQueryParamsAggregateCursor, useQueryParamsAggregateFields, + useQueryParamsAggregateSortBys, useQueryParamsFields, useQueryParamsGroupBys, useQueryParamsQuery, useQueryParamsVisualizes, + useSetQueryParamsAggregateSortBys, } from 'sentry/views/explore/queryParams/context'; import {FieldRenderer} from 'sentry/views/explore/tables/fieldRenderer'; import {prettifyAggregation, viewSamplesTarget} from 'sentry/views/explore/utils'; @@ -66,8 +64,8 @@ export function AggregatesTable({aggregatesTableResult}: AggregatesTableProps) { const fields = useQueryParamsFields(); const groupBys = useQueryParamsGroupBys(); const visualizes = useQueryParamsVisualizes(); - const sorts = useExploreSortBys(); - const setSorts = useSetExploreSortBys(); + const sorts = useQueryParamsAggregateSortBys(); + const setSorts = useSetQueryParamsAggregateSortBys(); const query = useQueryParamsQuery(); const cursor = useQueryParamsAggregateCursor(); diff --git a/static/app/views/explore/tables/spansTable.tsx b/static/app/views/explore/tables/spansTable.tsx index 186ad410c1825b..dc9e2c8153519c 100644 --- a/static/app/views/explore/tables/spansTable.tsx +++ b/static/app/views/explore/tables/spansTable.tsx @@ -22,14 +22,14 @@ import { TableStatus, useTableStyles, } from 'sentry/views/explore/components/table'; -import { - useExploreSortBys, - useSetExploreSortBys, -} from 'sentry/views/explore/contexts/pageParamsContext'; import {useTraceItemTags} from 'sentry/views/explore/contexts/spanTagsContext'; import type {SpansTableResult} from 'sentry/views/explore/hooks/useExploreSpansTable'; import {usePaginationAnalytics} from 'sentry/views/explore/hooks/usePaginationAnalytics'; -import {useQueryParamsFields} from 'sentry/views/explore/queryParams/context'; +import { + useQueryParamsFields, + useQueryParamsSortBys, + useSetQueryParamsSortBys, +} from 'sentry/views/explore/queryParams/context'; import {FieldRenderer} from './fieldRenderer'; @@ -39,8 +39,8 @@ interface SpansTableProps { export function SpansTable({spansTableResult}: SpansTableProps) { const fields = useQueryParamsFields(); - const sortBys = useExploreSortBys(); - const setSortBys = useSetExploreSortBys(); + const sortBys = useQueryParamsSortBys(); + const setSortBys = useSetQueryParamsSortBys(); const visibleFields = useMemo( () => (fields.includes('id') ? [...fields] : ['id', ...fields]), diff --git a/static/app/views/explore/toolbar/index.spec.tsx b/static/app/views/explore/toolbar/index.spec.tsx index 764bc2c7ddda30..c9ed27763e6eaa 100644 --- a/static/app/views/explore/toolbar/index.spec.tsx +++ b/static/app/views/explore/toolbar/index.spec.tsx @@ -14,17 +14,16 @@ import { import {openAddToDashboardModal} from 'sentry/actionCreators/modal'; import ProjectsStore from 'sentry/stores/projectsStore'; -import { - PageParamsProvider, - useExploreSortBys, -} from 'sentry/views/explore/contexts/pageParamsContext'; +import {PageParamsProvider} from 'sentry/views/explore/contexts/pageParamsContext'; import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode'; import {TraceItemAttributeProvider} from 'sentry/views/explore/contexts/traceItemAttributeContext'; import { useQueryParamsAggregateFields, + useQueryParamsAggregateSortBys, useQueryParamsFields, useQueryParamsGroupBys, useQueryParamsMode, + useQueryParamsSortBys, useQueryParamsVisualizes, useSetQueryParamsMode, } from 'sentry/views/explore/queryParams/context'; @@ -426,7 +425,7 @@ describe('ExploreToolbar', () => { it('allows changing sort by in samples mode', async () => { let sortBys: any; function Component() { - sortBys = useExploreSortBys(); + sortBys = useQueryParamsSortBys(); return ; } render( @@ -483,7 +482,7 @@ describe('ExploreToolbar', () => { let setMode: any; function Component() { setMode = useSetQueryParamsMode(); - sortBys = useExploreSortBys(); + sortBys = useQueryParamsAggregateSortBys(); return ; } render( @@ -553,11 +552,13 @@ describe('ExploreToolbar', () => { }); it('allows for different sort bys on samples and aggregates mode', async () => { - let sortBys: any; + let samplesSortBys: any; + let aggregateSortBys: any; let setMode: any; function Component() { setMode = useSetQueryParamsMode(); - sortBys = useExploreSortBys(); + samplesSortBys = useQueryParamsSortBys(); + aggregateSortBys = useQueryParamsAggregateSortBys(); return ; } @@ -569,27 +570,27 @@ describe('ExploreToolbar', () => { const section = screen.getByTestId('section-sort-by'); - expect(sortBys).toEqual([{field: 'timestamp', kind: 'desc'}]); + expect(samplesSortBys).toEqual([{field: 'timestamp', kind: 'desc'}]); await userEvent.click(within(section).getByRole('button', {name: 'Desc'})); await userEvent.click(within(section).getByRole('option', {name: 'Asc'})); - expect(sortBys).toEqual([{field: 'timestamp', kind: 'asc'}]); + expect(samplesSortBys).toEqual([{field: 'timestamp', kind: 'asc'}]); act(() => setMode(Mode.AGGREGATE)); - expect(sortBys).toEqual([{field: 'count(span.duration)', kind: 'desc'}]); + expect(aggregateSortBys).toEqual([{field: 'count(span.duration)', kind: 'desc'}]); await userEvent.click(within(section).getByRole('button', {name: 'Desc'})); await userEvent.click(within(section).getByRole('option', {name: 'Asc'})); - expect(sortBys).toEqual([{field: 'count(span.duration)', kind: 'asc'}]); + expect(aggregateSortBys).toEqual([{field: 'count(span.duration)', kind: 'asc'}]); act(() => setMode(Mode.SAMPLES)); - expect(sortBys).toEqual([{field: 'timestamp', kind: 'asc'}]); + expect(samplesSortBys).toEqual([{field: 'timestamp', kind: 'asc'}]); act(() => setMode(Mode.AGGREGATE)); - expect(sortBys).toEqual([{field: 'count(span.duration)', kind: 'asc'}]); + expect(aggregateSortBys).toEqual([{field: 'count(span.duration)', kind: 'asc'}]); }); it('opens compare queries', async () => { diff --git a/static/app/views/explore/toolbar/toolbarSaveAs.tsx b/static/app/views/explore/toolbar/toolbarSaveAs.tsx index 8a099f43fac5be..0f247858c75e1f 100644 --- a/static/app/views/explore/toolbar/toolbarSaveAs.tsx +++ b/static/app/views/explore/toolbar/toolbarSaveAs.tsx @@ -27,22 +27,22 @@ import usePageFilters from 'sentry/utils/usePageFilters'; import useProjects from 'sentry/utils/useProjects'; import {Dataset} from 'sentry/views/alerts/rules/metric/types'; import {ToolbarSection} from 'sentry/views/explore/components/toolbar/styles'; -import { - useExploreId, - useExploreSortBys, -} from 'sentry/views/explore/contexts/pageParamsContext'; +import {useExploreId} from 'sentry/views/explore/contexts/pageParamsContext'; import {useAddToDashboard} from 'sentry/views/explore/hooks/useAddToDashboard'; import {useChartInterval} from 'sentry/views/explore/hooks/useChartInterval'; import {useGetSavedQuery} from 'sentry/views/explore/hooks/useGetSavedQueries'; import {useSpansSaveQuery} from 'sentry/views/explore/hooks/useSaveQuery'; import {generateExploreCompareRoute} from 'sentry/views/explore/multiQueryMode/locationUtils'; import { + useQueryParamsAggregateSortBys, useQueryParamsFields, useQueryParamsGroupBys, useQueryParamsMode, useQueryParamsQuery, + useQueryParamsSortBys, useQueryParamsVisualizes, } from 'sentry/views/explore/queryParams/context'; +import {Mode} from 'sentry/views/explore/queryParams/mode'; import {isVisualizeFunction} from 'sentry/views/explore/queryParams/visualize'; import {TraceItemDataset} from 'sentry/views/explore/types'; import {getAlertsUrl} from 'sentry/views/insights/common/utils/getAlertsUrl'; @@ -60,7 +60,8 @@ export function ToolbarSaveAs() { const groupBys = useQueryParamsGroupBys(); const visualizes = useQueryParamsVisualizes(); const fields = useQueryParamsFields(); - const sortBys = useExploreSortBys(); + const sampleSortBys = useQueryParamsSortBys(); + const aggregateSortBys = useQueryParamsAggregateSortBys(); const mode = useQueryParamsMode(); const id = useExploreId(); const visualizeYAxes = useMemo( @@ -68,6 +69,8 @@ export function ToolbarSaveAs() { [visualizes] ); + const sortBys = mode === Mode.SAMPLES ? sampleSortBys : aggregateSortBys; + const [interval] = useChartInterval(); const project = diff --git a/static/app/views/explore/toolbar/toolbarSortBy.tsx b/static/app/views/explore/toolbar/toolbarSortBy.tsx index 255a46eec59a1e..0d692a46ede00f 100644 --- a/static/app/views/explore/toolbar/toolbarSortBy.tsx +++ b/static/app/views/explore/toolbar/toolbarSortBy.tsx @@ -12,18 +12,18 @@ import { ToolbarRow, ToolbarSection, } from 'sentry/views/explore/components/toolbar/styles'; -import { - useExploreSortBys, - useSetExploreSortBys, -} from 'sentry/views/explore/contexts/pageParamsContext'; import {Mode} from 'sentry/views/explore/contexts/pageParamsContext/mode'; import {useSortByFields} from 'sentry/views/explore/hooks/useSortByFields'; import {Tab, useTab} from 'sentry/views/explore/hooks/useTab'; import { + useQueryParamsAggregateSortBys, useQueryParamsFields, useQueryParamsGroupBys, useQueryParamsMode, + useQueryParamsSortBys, useQueryParamsVisualizes, + useSetQueryParamsAggregateSortBys, + useSetQueryParamsSortBys, } from 'sentry/views/explore/queryParams/context'; export function ToolbarSortBy() { @@ -32,8 +32,14 @@ export function ToolbarSortBy() { const groupBys = useQueryParamsGroupBys(); const visualizes = useQueryParamsVisualizes(); - const sorts = useExploreSortBys(); - const setSorts = useSetExploreSortBys(); + const sampleSortBys = useQueryParamsSortBys(); + const setSampleSortBys = useSetQueryParamsSortBys(); + const aggregateSortBys = useQueryParamsAggregateSortBys(); + const setAggregateSortBys = useSetQueryParamsAggregateSortBys(); + const [sorts, setSorts] = + mode === Mode.SAMPLES + ? [sampleSortBys, setSampleSortBys] + : [aggregateSortBys, setAggregateSortBys]; const [tab] = useTab(); diff --git a/static/app/views/explore/utils.tsx b/static/app/views/explore/utils.tsx index a96a9c50ab237a..bae0fcd6a68c69 100644 --- a/static/app/views/explore/utils.tsx +++ b/static/app/views/explore/utils.tsx @@ -274,7 +274,7 @@ export function generateTargetQuery({ projects: Project[]; row: Record; search: MutableSearch; - sorts: Sort[]; + sorts: readonly Sort[]; yAxes: string[]; }) { search = search.copy(); @@ -372,7 +372,7 @@ export function viewSamplesTarget({ projects: Project[]; query: string; row: Record; - sorts: Sort[]; + sorts: readonly Sort[]; visualizes: readonly Visualize[]; }) { const search = new MutableSearch(query);