Adding sorting events

GITHUB_PR_NUMBER: 10724
GITHUB_PR_URL: #10724

PR-URL: hasura/graphql-engine-mono#11217
Co-authored-by: jack-chan-123 <[email protected]>
Co-authored-by: Rakesh Emmadi <[email protected]>
Co-authored-by: Varun Choudhary <[email protected]>
GitOrigin-RevId: 61ad5f32b50faac33e60d018f3b012f28e04c48d

Author: 4 people

frontend/libs/console/legacy-ce/src/lib/components/Common/FilterQuery/state.ts

@@ -25,7 +25,7 @@ import { EventKind } from '../../Services/Events/types';
 import { isNotDefined } from '../utils/jsUtils';
 
 const defaultFilter = makeValueFilter('', null, '');
-const defaultSort = makeOrderBy('', 'asc');
+const defaultSort = makeOrderBy('created_at', 'asc', 'last');
 const defaultState = makeFilterState([defaultFilter], [defaultSort], 10, 0);
 
 export type TriggerOperation = 'pending' | 'processed' | 'invocation';
@@ -56,6 +56,7 @@ export const useFilterQuery = (
 
     const offsetValue = isNotDefined(offset) ? state.offset : offset;
     const limitValue = isNotDefined(limit) ? state.limit : limit;
+    const sortsValue = newSorts ?? state.sorts;
 
     let query = {};
     const endpoint = endpoints.metadata;
@@ -66,13 +67,16 @@ export const useFilterQuery = (
           'one_off',
           limitValue ?? 10,
           offsetValue ?? 0,
-          triggerOp
+          triggerOp,
+          undefined,
+          sortsValue
         );
       } else {
         query = getEventInvocations(
           'one_off',
           limitValue ?? 10,
-          offsetValue ?? 0
+          offsetValue ?? 0,
+          undefined
         );
       }
     } else if (triggerType === 'cron') {
@@ -82,7 +86,8 @@ export const useFilterQuery = (
           limitValue ?? 10,
           offsetValue ?? 0,
           triggerOp,
-          triggerName
+          triggerName,
+          sortsValue
         );
       } else {
         query = getEventInvocations(
@@ -160,8 +165,8 @@ export const useFilterQuery = (
   const setter: SetFilterState = {
     sorts: (sorts: OrderBy[]) => {
       const newSorts = [...sorts];
-      if (!sorts.length || sorts[sorts.length - 1].column) {
-        newSorts.push(defaultSort);
+      if (!sorts.some(s => s.column === 'created_at')) {
+        newSorts.push(makeOrderBy('created_at', 'asc', 'last'));
       }
       setState(s => ({
         ...s,

frontend/libs/console/legacy-ce/src/lib/components/Services/Events/Common/Components/EventsSubTable.tsx

@@ -19,8 +19,9 @@ interface Props extends InjectedReduxProps {
   rows: any[];
   rowsFormatted: any[];
   headings: {
-    Header: string;
+    Header: string | React.ReactNode;
     accessor: string;
+    id?: string;
   }[];
   event: Event;
   makeAPICall?: boolean;

frontend/libs/console/legacy-ce/src/lib/components/Services/Events/Common/Components/EventsTable.tsx

@@ -4,7 +4,7 @@ import ReactTable, {
   ComponentPropsGetter0,
 } from 'react-table';
 import 'react-table/react-table.css';
-import { FaTimes } from 'react-icons/fa';
+import { FaTimes, FaSort, FaSortUp, FaSortDown } from 'react-icons/fa';
 import { Button } from '../../../../../new-components/Button';
 import { FilterTableProps, GridHeadingProps } from './types';
 import { ordinalColSort } from '../../../Data/utils';
@@ -42,6 +42,7 @@ interface Props extends FilterTableProps {
     onSuccess: () => void
   ) => void;
   triggerType?: SupportedEvents;
+  triggerOp?: 'pending' | 'processed' | 'invocation';
 }
 const EventsTable: React.FC<Props> = props => {
   const {
@@ -52,23 +53,27 @@ const EventsTable: React.FC<Props> = props => {
     identifier,
     onCancelEvent,
     triggerType,
+    triggerOp,
   } = props;
   const [, setCurrentPage] = React.useState(0);
   const [, setPageSize] = React.useState(filterState.limit ?? 10);
   const sortedColumns = columns.sort(ordinalColSort);
   let shouldSortColumn = true;
+
+  // For debugging - log the props to see what's being passed
+  React.useEffect(() => {
+    console.log('EventsTable props:', { triggerType, triggerOp });
+  }, [triggerType, triggerOp]);
   const sortByColumn = (col: string) => {
-    // Remove all the existing order_bys
     const existingColSort = filterState.sorts.find(s => s.column === col);
-    if (existingColSort && existingColSort.type === 'asc') {
-      runQuery({
-        sorts: [makeOrderBy(col, 'desc')],
-      });
-    } else {
-      runQuery({
-        sorts: [makeOrderBy(col, 'asc')],
-      });
-    }
+    const newSort =
+      existingColSort && existingColSort.type === 'asc'
+        ? makeOrderBy(col, 'desc')
+        : makeOrderBy(col, 'asc');
+
+    runQuery({
+      sorts: [newSort],
+    });
   };
   const changePage = (page: number) => {
     if (filterState.offset !== page * filterState.limit) {
@@ -119,20 +124,72 @@ const EventsTable: React.FC<Props> = props => {
   const gridHeadings = [expanderActions];
   sortedColumns.forEach(column => {
     if (column !== 'actions') {
-      gridHeadings.push({
-        Header: column,
-        accessor: column,
-      });
+      // Only add sort icons for one-off and cron triggers
+      // and not for event triggers (data)
+      if (triggerType && triggerType !== 'data') {
+        // For debugging - always show sort icons regardless of triggerOp
+        const existingSort = filterState.sorts.find(s => s.column === column);
+
+        // Create a header with the column name and sort icon
+        const headerContent = (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              width: '100%',
+            }}
+          >
+            <span>{column}</span>
+            {existingSort ? (
+              existingSort.type === 'asc' ? (
+                <FaSortUp style={{ marginLeft: '5px', fontSize: '16px' }} />
+              ) : (
+                <FaSortDown style={{ marginLeft: '5px', fontSize: '16px' }} />
+              )
+            ) : (
+              <FaSort
+                style={{ marginLeft: '5px', opacity: 0.5, fontSize: '16px' }}
+              />
+            )}
+          </div>
+        );
+
+        gridHeadings.push({
+          Header: headerContent,
+          accessor: column,
+          id: column, // Ensure we have an id for the column
+        });
+      } else {
+        // For event triggers or other cases, just use the column name
+        gridHeadings.push({
+          Header: column,
+          accessor: column,
+          id: column, // Ensure we have an id for the column
+        });
+      }
     }
   });
   const invocationColumns = ['http_status', 'id', 'created_at'];
   const invocationDataTriggerColumns = ['http_status', 'id', 'created_at'];
-  const invocationGridHeadings: GridHeadingProps[] = [expanderActions];
+  const invocationGridHeadings: {
+    Header: string | React.ReactNode;
+    accessor: string;
+    id?: string;
+    width?: number;
+    expander?: boolean;
+    Expander?: React.FC<{
+      isExpanded: boolean;
+      viewIndex: number;
+    }>;
+  }[] = [expanderActions];
+
   const addToGridHeadings = (headAccArr: string[]) => {
     headAccArr.forEach(column => {
       invocationGridHeadings.push({
         Header: column,
         accessor: column,
+        id: column,
       });
     });
   };
@@ -161,25 +218,41 @@ const EventsTable: React.FC<Props> = props => {
     };
   });
   const getTheadThProps: ComponentPropsGetterC = (
-    finalState,
-    some,
+    _finalState,
+    _some,
     column
-  ) => ({
-    onClick: () => {
-      if (
-        column &&
-        column.Header &&
-        shouldSortColumn &&
-        column.Header !== 'Actions'
-      ) {
-        sortByColumn(column.Header as string);
-      }
-      shouldSortColumn = true;
-    },
-  });
+  ) => {
+    if (!column) {
+      return {};
+    }
+
+    // Get the column ID or Header text
+    const columnId =
+      column.id || (typeof column.Header === 'string' ? column.Header : '');
+
+    // Only enable sorting for one-off and cron triggers (not for event triggers)
+    if (triggerType && triggerType !== 'data') {
+      return {
+        onClick: () => {
+          if (
+            column.Header &&
+            shouldSortColumn &&
+            column.Header !== 'Actions'
+          ) {
+            sortByColumn(columnId);
+          }
+          shouldSortColumn = true;
+        },
+        style: { cursor: 'pointer' },
+      };
+    }
+
+    // For event triggers or other cases, don't add click handler
+    return {};
+  };
   const getResizerProps: ComponentPropsGetter0 = (
-    finalState,
-    none,
+    _finalState,
+    _none,
     column,
     ctx
   ) => ({

frontend/libs/console/legacy-ce/src/lib/components/Services/Events/Common/Components/types.ts

@@ -15,8 +15,9 @@ export type FilterTableProps = {
 };
 
 export type GridHeadingProps = {
-  Header: string;
+  Header: string | React.ReactNode;
   accessor: string;
+  id?: string;
   width?: number;
   expander?: boolean;
   Expander?: React.FC<{

frontend/libs/console/legacy-ce/src/lib/metadata/queryUtils.ts

@@ -23,6 +23,7 @@ import { TriggerOperation } from '../components/Common/FilterQuery/state';
 import { isEmpty } from '../components/Common/utils/jsUtils';
 import { Nullable } from '../components/Common/utils/tsUtils';
 import { getDataSourcePrefix } from './dataSource.utils';
+import { OrderBy } from '@hasura/dc-api-types';
 
 export const metadataQueryTypes = [
   'add_source',
@@ -813,7 +814,8 @@ export const getEventInvocations = (
   type: SupportedEvents,
   limit: number,
   offset: number,
-  triggerName?: string // is required for cron
+  triggerName?: string, // is required for cron
+  sorts?: OrderBy[]
 ) => {
   const query = {
     type: 'get_scheduled_event_invocations',
@@ -837,6 +839,7 @@ export const getEventInvocations = (
       ...query.args,
       limit,
       offset,
+      ...(sorts && sorts.length > 0 ? { order_by: sorts } : {}),
       get_rows_count: false,
     },
   };
@@ -847,7 +850,8 @@ export const getScheduledEvents = (
   limit: number,
   offset: number,
   triggerOp: Exclude<TriggerOperation, 'invocation'>,
-  triggerName?: string // is required for cron triggers
+  triggerName?: string, // is required for cron triggers
+  sorts?: any
 ) => {
   const query = {
     type: 'get_scheduled_events',
@@ -886,6 +890,7 @@ export const getScheduledEvents = (
       limit,
       offset,
       get_rows_count: false,
+      ...(sorts && sorts.length > 0 ? { order_by: sorts } : {}),
     },
   };
 };

server/src-lib/Hasura/App.hs

@@ -843,8 +843,8 @@ instance MonadMetadataStorage AppM where
   unlockScheduledEvents a b = runInSeparateTx $ unlockScheduledEventsTx a b
   unlockAllLockedScheduledEvents = runInSeparateTx unlockAllLockedScheduledEventsTx
   clearFutureCronEvents = runInSeparateTx . dropFutureCronEventsTx
-  getOneOffScheduledEvents a b c = runInSeparateTx $ getOneOffScheduledEventsTx a b c
-  getCronEvents a b c d = runInSeparateTx $ getCronEventsTx a b c d
+  getOneOffScheduledEvents a b c d = runInSeparateTx $ getOneOffScheduledEventsTx a b c d
+  getCronEvents a b c d e = runInSeparateTx $ getCronEventsTx a b c d e
   getScheduledEventInvocations a = runInSeparateTx $ getScheduledEventInvocationsTx a
   deleteScheduledEvent a b = runInSeparateTx $ deleteScheduledEventTx a b
 

server/src-lib/Hasura/Backends/Postgres/SQL/DML.hs

@@ -198,6 +198,14 @@ instance ToSQL OrderByItem where
   toSQL (OrderByItem expr ordering nullsOrder) =
     toSQL expr <~> toSQL ordering <~> toSQL nullsOrder
 
+instance J.FromJSON OrderByItem where
+  parseJSON = J.withObject "OrderByItem" $ \o -> do
+    colText <- o J..: "column"
+    orderByType <- o J..:? "type"
+    nulls <- o J..:? "nulls"
+    let expr = SEUnsafe colText
+    pure $ OrderByItem expr orderByType nulls
+
 -- | Order by ascending or descending
 data OrderType = OTAsc | OTDesc
   deriving (Show, Eq, Generic, Data)

server/src-lib/Hasura/Eventing/ScheduledTrigger.hs

@@ -1047,16 +1047,20 @@ getOneOffScheduledEventsTx ::
   ScheduledEventPagination ->
   [ScheduledEventStatus] ->
   RowsCountOption ->
+  [S.OrderByItem] ->
   PG.TxE QErr (WithOptionalTotalCount [OneOffScheduledEvent])
-getOneOffScheduledEventsTx pagination statuses getRowsCount = do
+getOneOffScheduledEventsTx pagination statuses getRowsCount orderByList = do
   let table = QualifiedObject "hdb_catalog" $ TableName "hdb_scheduled_events"
       statusFilter = mkScheduledEventStatusFilter statuses
+      orderByExp = case NE.nonEmpty orderByList of
+        Nothing -> scheduledTimeOrderBy
+        Just orderByExp' -> S.OrderByExp orderByExp'
       select =
         S.mkSelect
           { S.selExtr = [S.selectStar],
             S.selFrom = Just $ S.mkSimpleFromExp table,
             S.selWhere = Just $ S.WhereFrag statusFilter,
-            S.selOrderBy = Just scheduledTimeOrderBy
+            S.selOrderBy = Just orderByExp
           }
       sql = PG.fromBuilder $ toSQL $ mkPaginationSelectExp select pagination getRowsCount
   executeWithOptionalTotalCount sql getRowsCount
@@ -1066,17 +1070,21 @@ getCronEventsTx ::
   ScheduledEventPagination ->
   [ScheduledEventStatus] ->
   RowsCountOption ->
+  [S.OrderByItem] ->
   PG.TxE QErr (WithOptionalTotalCount [CronEvent])
-getCronEventsTx triggerName pagination status getRowsCount = do
+getCronEventsTx triggerName pagination status getRowsCount orderByList = do
   let triggerNameFilter =
         S.BECompare S.SEQ (S.SEIdentifier $ Identifier "trigger_name") (S.SELit $ triggerNameToTxt triggerName)
       statusFilter = mkScheduledEventStatusFilter status
+      orderByExp = case NE.nonEmpty orderByList of
+        Nothing -> scheduledTimeOrderBy
+        Just orderByExp' -> S.OrderByExp orderByExp'
       select =
         S.mkSelect
           { S.selExtr = [S.selectStar],
             S.selFrom = Just $ S.mkSimpleFromExp cronEventsTable,
             S.selWhere = Just $ S.WhereFrag $ S.BEBin S.AndOp triggerNameFilter statusFilter,
-            S.selOrderBy = Just scheduledTimeOrderBy
+            S.selOrderBy = Just orderByExp
           }
       sql = PG.fromBuilder $ toSQL $ mkPaginationSelectExp select pagination getRowsCount
   executeWithOptionalTotalCount sql getRowsCount