diff --git a/changes/issue-4572-sort-live-queries b/changes/issue-4572-sort-live-queries
new file mode 100644
index 0000000000..c8304144af
--- /dev/null
+++ b/changes/issue-4572-sort-live-queries
@@ -0,0 +1 @@
+* Users can sort all columns of live queries and live policies in the UI
\ No newline at end of file
diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesListWrapper.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesListWrapper.tsx
index 292592c560..fd7309e864 100644
--- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesListWrapper.tsx
+++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesListWrapper.tsx
@@ -45,7 +45,6 @@ const PoliciesListWrapper = ({
isLoading={isLoading}
defaultSortHeader={"name"}
defaultSortDirection={"asc"}
- manualSortBy
showMarkAllPages={false}
isAllPagesSelected={false}
disablePagination
diff --git a/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesTableConfig.tsx b/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesTableConfig.tsx
index 05badd5ec2..8cc2a93bf9 100644
--- a/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesTableConfig.tsx
+++ b/frontend/pages/policies/PolicyPage/components/PolicyQueriesListWrapper/PolicyQueriesTableConfig.tsx
@@ -4,8 +4,11 @@
import React from "react";
import { memoize } from "lodash";
-// @ts-ignore
+import { ColumnInstance } from "react-table";
+
import TextCell from "components/TableContainer/DataTable/TextCell/TextCell";
+import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCell";
+
import { IHostPolicyQuery } from "interfaces/host";
import sortUtils from "utilities/sort";
import PassIcon from "../../../../../../assets/images/icon-check-circle-green-16x16@2x.png";
@@ -14,10 +17,7 @@ import FailIcon from "../../../../../../assets/images/icon-exclamation-circle-re
// TODO functions for paths math e.g., path={PATHS.MANAGE_HOSTS + getParams(cellProps.row.original)}
interface IHeaderProps {
- column: {
- host: string;
- isSortedDesc: boolean;
- };
+ column: ColumnInstance & IDataColumn;
}
interface ICellProps {
@@ -45,17 +45,28 @@ const generateTableHeaders = (): IDataColumn[] => {
const tableHeaders: IDataColumn[] = [
{
title: "Host",
- Header: "Host",
- disableSortBy: true,
+ Header: (headerProps: IHeaderProps): JSX.Element => (
+
+ ),
accessor: "hostname",
Cell: (cellProps: ICellProps): JSX.Element => (
),
+ disableSortBy: false,
},
{
title: "Status",
- Header: "Status",
- disableSortBy: true,
+ Header: (headerProps: IHeaderProps) => (
+
+ ),
accessor: "query_results",
Cell: (cellProps: ICellProps): JSX.Element => (
<>
@@ -72,6 +83,7 @@ const generateTableHeaders = (): IDataColumn[] => {
)}
>
),
+ disableSortBy: false,
},
];
return tableHeaders;
diff --git a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx
index e599c6c98c..7aaf8cfc5b 100644
--- a/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx
+++ b/frontend/pages/queries/QueryPage/components/QueryResults/QueryResultsTableConfig.tsx
@@ -60,6 +60,7 @@ const resultsTableHeaders = (results: ICampaignQueryResult[]): Column[] => {
Cell: (cellProps: ICellProps) => cellProps?.cell?.value || null,
Filter: DefaultColumnFilter,
// filterType: "text",
+ disableSortBy: false,
};
});
return _unshiftHostname(headers);