feat(explore): Allow sorting by clicking on table header (#80388)

This enables changing the sort by clicking on the table header in both the samples and aggregate mode in explore.
getsentry · Nov 7, 2024 · d67ecc7 · d67ecc7
1 parent 4ba6360
commit d67ecc7
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 8 deletions.
diff --git 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 (
-                <TableHeadCell align={align} key={i} isFirst={i === 0}>
+                <StyledTableHeadCell
+                  align={align}
+                  key={i}
+                  isFirst={i === 0}
+                  onClick={updateSort}
+                >
                   <span>{label}</span>
-                </TableHeadCell>
+                  {defined(direction) && (
+                    <IconArrow
+                      size="xs"
+                      direction={
+                        direction === 'desc'
+                          ? 'down'
+                          : direction === 'asc'
+                            ? 'up'
+                            : undefined
+                      }
+                    />
+                  )}
+                </StyledTableHeadCell>
               );
             })}
           </TableRow>
@@ -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
@@ -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 (
-                <TableHeadCell align={align} key={i} isFirst={i === 0}>
+                <StyledTableHeadCell
+                  align={align}
+                  key={i}
+                  isFirst={i === 0}
+                  onClick={updateSort}
+                >
                   <span>{tag?.name ?? field}</span>
-                </TableHeadCell>
+                  {defined(direction) && (
+                    <IconArrow
+                      size="xs"
+                      direction={
+                        direction === 'desc'
+                          ? 'down'
+                          : direction === 'asc'
+                            ? 'up'
+                            : undefined
+                      }
+                    />
+                  )}
+                </StyledTableHeadCell>
               );
             })}
           </TableRow>
@@ -145,3 +173,7 @@ export function SpansTable({}: SpansTableProps) {
     </Fragment>
   );
 }
+
+const StyledTableHeadCell = styled(TableHeadCell)`
+  cursor: pointer;
+`;