diff --git a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx index 4472f5bb1139..c257200e27d7 100644 --- a/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/sessions/sessionsPage.tsx @@ -26,7 +26,11 @@ import emptyTableResultsIcon from "../assets/emptyState/empty-table-results.svg" import SQLActivityError from "../sqlActivity/errorComponent"; import { Pagination, ResultsPerPageLabel } from "src/pagination"; -import { SortSetting, ISortedTablePagination } from "src/sortedtable"; +import { + SortSetting, + ISortedTablePagination, + updateSortSettingQueryParamsOnTab, +} from "src/sortedtable"; import { Loading } from "src/loading"; import { Anchor } from "src/anchor"; import { EmptyTable } from "src/empty"; @@ -137,7 +141,18 @@ export class SessionsPage extends React.Component< } componentDidUpdate = (): void => { + const { history, sortSetting } = this.props; + this.props.refreshSessions(); + updateSortSettingQueryParamsOnTab( + "Sessions", + sortSetting, + { + ascending: false, + columnTitle: "statementAge", + }, + history, + ); }; onChangePage = (current: number): void => { diff --git a/pkg/ui/workspaces/cluster-ui/src/sortedtable/tableHead/tableHead.tsx b/pkg/ui/workspaces/cluster-ui/src/sortedtable/tableHead/tableHead.tsx index a8f330c632f6..3ec0078acb7e 100644 --- a/pkg/ui/workspaces/cluster-ui/src/sortedtable/tableHead/tableHead.tsx +++ b/pkg/ui/workspaces/cluster-ui/src/sortedtable/tableHead/tableHead.tsx @@ -35,20 +35,18 @@ export const TableHead: React.FC = ({ const cellContentWrapper = cx("inner-content-wrapper"); const arrowsClass = cx("sortable__actions"); - function handleSort(picked: boolean, columnTitle: string) { + function handleSort( + newColumnSelected: boolean, + columnTitle: string, + prevValue: boolean, + ) { // If the columnTitle is different than the previous value, initial sort - // descending. If the same columnTitle is clicked multiple times consecutively, - // first change to ascending, then remove the sort key. - const ASCENDING = true; - const DESCENDING = false; - - const direction = picked ? ASCENDING : DESCENDING; - const sortElementColumnTitle = - picked && sortSetting.ascending ? null : columnTitle; + // descending. If is the same columnTitle the value is updated. + const ascending = newColumnSelected ? false : !prevValue; onChangeSortSetting({ - ascending: direction, - columnTitle: sortElementColumnTitle, + ascending, + columnTitle, }); } @@ -58,15 +56,21 @@ export const TableHead: React.FC = ({ {expandableConfig && } {columns.map((c: SortableColumn, idx: number) => { const sortable = c.columnTitle !== (null || undefined); - const picked = c.name === sortSetting.columnTitle; + const newColumnSelected = c.name !== sortSetting.columnTitle; const style = { textAlign: c.titleAlign }; - const cellAction = sortable ? () => handleSort(picked, c.name) : null; + const cellAction = sortable + ? () => handleSort(newColumnSelected, c.name, sortSetting.ascending) + : null; const cellClasses = cx( "head-wrapper__cell", "sorted__cell", sortable && "sorted__cell--sortable", - sortSetting.ascending && picked && "sorted__cell--ascending", - !sortSetting.ascending && picked && "sorted__cell--descending", + sortSetting.ascending && + !newColumnSelected && + "sorted__cell--ascending", + !sortSetting.ascending && + !newColumnSelected && + "sorted__cell--descending", firstCellBordered && idx === 0 && "cell-header", ); const titleClasses = c.hideTitleUnderline ? "" : cx("column-title");