diff --git a/static/app/views/explore/tables/aggregatesTable.tsx b/static/app/views/explore/tables/aggregatesTable.tsx index 2ed4dd46b5ad4b..51ed1a61b63c75 100644 --- a/static/app/views/explore/tables/aggregatesTable.tsx +++ b/static/app/views/explore/tables/aggregatesTable.tsx @@ -5,9 +5,11 @@ import EmptyStateWarning from 'sentry/components/emptyStateWarning'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import Pagination from 'sentry/components/pagination'; import {CHART_PALETTE} from 'sentry/constants/chartPalette'; -import {IconWarning} from 'sentry/icons'; +import {IconArrow} from 'sentry/icons/iconArrow'; +import {IconWarning} from 'sentry/icons/iconWarning'; import {t} from 'sentry/locale'; import type {NewQuery} from 'sentry/types/organization'; +import {defined} from 'sentry/utils'; import EventView from 'sentry/utils/discover/eventView'; import type {Sort} from 'sentry/utils/discover/fields'; import { @@ -57,7 +59,7 @@ export function AggregatesTable({}: AggregatesTableProps) { Boolean ); }, [groupBys, visualizes]); - const [sorts] = useSorts({fields}); + const [sorts, setSorts] = useSorts({fields}); const [query] = useUserQuery(); const eventView = useMemo(() => { @@ -121,10 +123,34 @@ export function AggregatesTable({}: AggregatesTableProps) { label = formatParsedFunction(func); } + const direction = sorts.find(s => s.field === field)?.kind; + + function updateSort() { + const kind = direction === 'desc' ? 'asc' : 'desc'; + setSorts([{field, kind}]); + } + return ( - + {label} - + {defined(direction) && ( + + )} + ); })} @@ -184,3 +210,7 @@ const TopResultsIndicator = styled('div')<{index: number}>` return CHART_PALETTE[TOP_EVENTS_LIMIT - 1][p.index]; }}; `; + +const StyledTableHeadCell = styled(TableHeadCell)` + cursor: pointer; +`; diff --git a/static/app/views/explore/tables/spansTable.tsx b/static/app/views/explore/tables/spansTable.tsx index ef5902923d72cc..87360a4a3555e4 100644 --- a/static/app/views/explore/tables/spansTable.tsx +++ b/static/app/views/explore/tables/spansTable.tsx @@ -1,11 +1,14 @@ import {Fragment, useMemo} from 'react'; +import styled from '@emotion/styled'; import EmptyStateWarning from 'sentry/components/emptyStateWarning'; import LoadingIndicator from 'sentry/components/loadingIndicator'; import Pagination from 'sentry/components/pagination'; -import {IconWarning} from 'sentry/icons'; +import {IconArrow} from 'sentry/icons/iconArrow'; +import {IconWarning} from 'sentry/icons/iconWarning'; import {t} from 'sentry/locale'; import type {NewQuery} from 'sentry/types/organization'; +import {defined} from 'sentry/utils'; import EventView from 'sentry/utils/discover/eventView'; import {fieldAlignment} from 'sentry/utils/discover/fields'; import usePageFilters from 'sentry/utils/usePageFilters'; @@ -35,7 +38,7 @@ export function SpansTable({}: SpansTableProps) { const [dataset] = useDataset(); const [fields] = useSampleFields(); - const [sorts] = useSorts({fields}); + const [sorts, setSorts] = useSorts({fields}); const [query] = useUserQuery(); const eventView = useMemo(() => { @@ -98,10 +101,35 @@ export function SpansTable({}: SpansTableProps) { const fieldType = meta.fields?.[field]; const align = fieldAlignment(field, fieldType); const tag = stringTags[field] ?? numberTags[field] ?? null; + + const direction = sorts.find(s => s.field === field)?.kind; + + function updateSort() { + const kind = direction === 'desc' ? 'asc' : 'desc'; + setSorts([{field, kind}]); + } + return ( - + {tag?.name ?? field} - + {defined(direction) && ( + + )} + ); })} @@ -145,3 +173,7 @@ export function SpansTable({}: SpansTableProps) { ); } + +const StyledTableHeadCell = styled(TableHeadCell)` + cursor: pointer; +`;