Log Results Sorting

.changeset/young-eyes-build.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Add Sorting Feature to all search tables

packages/app/src/ClickhousePage.tsx

@@ -363,13 +363,31 @@ function InsertsTab({
           </Text>
           <DBTableChart
             config={{
+              dateRange: searchedTimeRange,
               select: [
-                `count() as "Part Count"`,
-                `sum(rows) as Rows`,
-                'database as Database',
-                'table as Table',
-                'partition as Partition',
-              ].join(','),
+                {
+                  aggFn: 'count',
+                  valueExpression: '',
+                  alias: 'Part Count',
+                },
+                {
+                  aggFn: 'sum',
+                  valueExpression: 'rows',
+                  alias: 'Rows',
+                },
+                {
+                  valueExpression: 'database',
+                  alias: 'Database',
+                },
+                {
+                  valueExpression: 'table',
+                  alias: 'Table',
+                },
+                {
+                  valueExpression: 'partition',
+                  alias: 'Partition',
+                },
+              ],
               from: {
                 databaseName: 'system',
                 tableName: 'parts',
@@ -661,10 +679,22 @@ function ClickhousePage() {
                 <DBTableChart
                   config={{
                     select: [
-                      `count() as "Count"`,
-                      `sum(query_duration_ms) as "Total Duration (ms)"`,
-                      `any(query) as "Query Example"`,
-                    ].join(','),
+                      {
+                        aggFn: 'count',
+                        valueExpression: '',
+                        alias: `Count`,
+                      },
+                      {
+                        aggFn: 'sum',
+                        valueExpression: 'query_duration_ms',
+                        alias: `Total Duration (ms)`,
+                      },
+                      {
+                        aggFn: 'any',
+                        valueExpression: 'query',
+                        alias: `Query Example`,
+                      },
+                    ],
                     dateRange: searchedTimeRange,
                     from,
                     where: `(

packages/app/src/DBSearchPage.tsx

@@ -56,6 +56,7 @@ import {
 } from '@mantine/hooks';
 import { notifications } from '@mantine/notifications';
 import { useIsFetching } from '@tanstack/react-query';
+import { SortingState } from '@tanstack/react-table';
 import CodeMirror from '@uiw/react-codemirror';
 
 import { ContactSupportText } from '@/components/ContactSupportText';
@@ -75,10 +76,7 @@ import { Tags } from '@/components/Tags';
 import { TimePicker } from '@/components/TimePicker';
 import WhereLanguageControlled from '@/components/WhereLanguageControlled';
 import { IS_LOCAL_MODE } from '@/config';
-import {
-  useAliasMapFromChartConfig,
-  useQueriedChartConfig,
-} from '@/hooks/useChartConfig';
+import { useAliasMapFromChartConfig } from '@/hooks/useChartConfig';
 import { useExplainQuery } from '@/hooks/useExplainQuery';
 import { withAppNav } from '@/layout';
 import {
@@ -104,7 +102,10 @@ import PatternTable from './components/PatternTable';
 import SourceSchemaPreview from './components/SourceSchemaPreview';
 import { useTableMetadata } from './hooks/useMetadata';
 import { useSqlSuggestions } from './hooks/useSqlSuggestions';
-import { parseAsStringWithNewLines } from './utils/queryParsers';
+import {
+  parseAsSortingStateString,
+  parseAsStringWithNewLines,
+} from './utils/queryParsers';
 import api from './api';
 import { LOCAL_STORE_CONNECTIONS_KEY } from './connection';
 import { DBSearchPageAlertModal } from './DBSearchPageAlertModal';
@@ -1155,6 +1156,24 @@ function DBSearchPage() {
     [onSubmit],
   );
 
+  const onSortingChange = useCallback(
+    (sortState: SortingState | null) => {
+      setIsLive(false);
+      const sort = sortState?.at(0);
+      setSearchedConfig({
+        orderBy: sort
+          ? `${sort.id} ${sort.desc ? 'DESC' : 'ASC'}`
+          : defaultOrderBy,
+      });
+    },
+    [setIsLive, defaultOrderBy, setSearchedConfig],
+  );
+  // Parse the orderBy string into a SortingState. We need the string
+  // version in other places so we keep this parser separate.
+  const orderByConfig = parseAsSortingStateString.parse(
+    searchedConfig.orderBy ?? '',
+  );
+
   const handleTimeRangeSelect = useCallback(
     (d1: Date, d2: Date) => {
       onTimeRangeSelect(d1, d2);
@@ -1831,6 +1850,8 @@ function DBSearchPage() {
                           onError={handleTableError}
                           denoiseResults={denoiseResults}
                           collapseAllRows={collapseAllRows}
+                          onSortingChange={onSortingChange}
+                          initialSortBy={orderByConfig ? [orderByConfig] : []}
                         />
                       )}
                   </>