diff --git a/frontend/src/container/ExplorerOrderBy/index.tsx b/frontend/src/container/ExplorerOrderBy/index.tsx
new file mode 100644
index 0000000000..5374510084
--- /dev/null
+++ b/frontend/src/container/ExplorerOrderBy/index.tsx
@@ -0,0 +1,72 @@
+import { Select, Spin } from 'antd';
+import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
+import { useOrderByFilter } from 'container/QueryBuilder/filters/OrderByFilter/useOrderByFilter';
+import { selectStyle } from 'container/QueryBuilder/filters/QueryBuilderSearch/config';
+import { useGetAggregateKeys } from 'hooks/queryBuilder/useGetAggregateKeys';
+import { memo, useMemo } from 'react';
+import { StringOperators } from 'types/common/queryBuilder';
+
+function ExplorerOrderBy({ query, onChange }: OrderByFilterProps): JSX.Element {
+ const {
+ debouncedSearchText,
+ selectedValue,
+ aggregationOptions,
+ generateOptions,
+ createOptions,
+ handleChange,
+ handleSearchKeys,
+ } = useOrderByFilter({ query, onChange });
+
+ const { data, isFetching } = useGetAggregateKeys(
+ {
+ aggregateAttribute: query.aggregateAttribute.key,
+ dataSource: query.dataSource,
+ aggregateOperator: query.aggregateOperator,
+ searchText: debouncedSearchText,
+ },
+ {
+ keepPreviousData: true,
+ },
+ );
+
+ const options = useMemo(() => {
+ const keysOptions = createOptions(data?.payload?.attributeKeys || []);
+
+ const customOptions = createOptions([
+ { key: 'timestamp', isColumn: true, type: null, dataType: null },
+ ]);
+
+ const baseOptions = [
+ ...customOptions,
+ ...(query.aggregateOperator === StringOperators.NOOP
+ ? []
+ : aggregationOptions),
+ ...keysOptions,
+ ];
+
+ return generateOptions(baseOptions);
+ }, [
+ aggregationOptions,
+ createOptions,
+ data?.payload?.attributeKeys,
+ generateOptions,
+ query.aggregateOperator,
+ ]);
+
+ return (
+ : null}
+ onChange={handleChange}
+ />
+ );
+}
+
+export default memo(ExplorerOrderBy);
diff --git a/frontend/src/container/LogExplorerQuerySection/index.tsx b/frontend/src/container/LogExplorerQuerySection/index.tsx
index 7f4983d27c..3cd972c2fa 100644
--- a/frontend/src/container/LogExplorerQuerySection/index.tsx
+++ b/frontend/src/container/LogExplorerQuerySection/index.tsx
@@ -1,13 +1,15 @@
import { Button } from 'antd';
import { initialQueriesMap, PANEL_TYPES } from 'constants/queryBuilder';
+import ExplorerOrderBy from 'container/ExplorerOrderBy';
import { QueryBuilder } from 'container/QueryBuilder';
+import { OrderByFilterProps } from 'container/QueryBuilder/filters/OrderByFilter/OrderByFilter.interfaces';
import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
import { useGetPanelTypesQueryParam } from 'hooks/queryBuilder/useGetPanelTypesQueryParam';
import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
import { useShareBuilderUrl } from 'hooks/queryBuilder/useShareBuilderUrl';
import { ButtonWrapperStyled } from 'pages/LogsExplorer/styles';
import { prepareQueryWithDefaultTimestamp } from 'pages/LogsExplorer/utils';
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
import { DataSource } from 'types/common/queryBuilder';
function LogExplorerQuerySection(): JSX.Element {
@@ -23,6 +25,7 @@ function LogExplorerQuerySection(): JSX.Element {
}, [updateAllQueriesOperators]);
useShareBuilderUrl(defaultValue);
+
const filterConfigs: QueryBuilderProps['filterConfigs'] = useMemo(() => {
const isTable = panelTypes === PANEL_TYPES.TABLE;
const config: QueryBuilderProps['filterConfigs'] = {
@@ -32,11 +35,26 @@ function LogExplorerQuerySection(): JSX.Element {
return config;
}, [panelTypes]);
+ const renderOrderBy = useCallback(
+ ({ query, onChange }: OrderByFilterProps): JSX.Element => (
+
+ ),
+ [],
+ );
+
+ const queryComponents = useMemo(
+ (): QueryBuilderProps['queryComponents'] => ({
+ ...(panelTypes === PANEL_TYPES.LIST ? { renderOrderBy } : {}),
+ }),
+ [panelTypes, renderOrderBy],
+ );
+
return (