fix: dashboard listing default sorting by updatedAt (#5200)

* fix: dashboard listing default sorting by createdAt

* fix: respect pagination options

* fix: make it backwards compatible

* fix: sort by default by updated at

* fix: sort by default by updated at

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -34,7 +34,7 @@ import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useNotifications } from 'hooks/useNotifications';
 import history from 'lib/history';
-import { get, isEmpty, isNull, isUndefined } from 'lodash-es';
+import { get, isEmpty } from 'lodash-es';
 import {
 	ArrowDownWideNarrow,
 	ArrowUpRight,
@@ -195,7 +195,6 @@ function DashboardsList(): JSX.Element {
 	}, [sortOrder]);
 
 	const sortHandle = (key: string): void => {
-		console.log(dashboards);
 		if (!dashboards) return;
 		if (key === 'createdAt') {
 			sortDashboardsByCreatedAt(dashboards);
@@ -214,13 +213,6 @@ function DashboardsList(): JSX.Element {
 		}
 	};
 
-	useEffect(() => {
-		if (!isUndefined(sortOrder.columnKey) && !isNull(sortOrder.columnKey)) {
-			sortHandle(sortOrder.columnKey);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [dashboards]);
-
 	function handlePageSizeUpdate(page: number): void {
 		setSortOrder((order) => ({
 			...order,
@@ -233,8 +225,25 @@ function DashboardsList(): JSX.Element {
 			searchString,
 			dashboardListResponse,
 		);
-		setDashboards(filteredDashboards || []);
-	}, [dashboardListResponse, searchString]);
+		if (sortOrder.columnKey === 'updatedAt') {
+			sortDashboardsByUpdatedAt(filteredDashboards || []);
+		} else if (sortOrder.columnKey === 'createdAt') {
+			sortDashboardsByCreatedAt(filteredDashboards || []);
+		} else if (sortOrder.columnKey === 'null') {
+			setSortOrder({
+				columnKey: 'updatedAt',
+				order: 'descend',
+				pagination: sortOrder.pagination || '1',
+			});
+			sortDashboardsByUpdatedAt(filteredDashboards || []);
+		}
+	}, [
+		dashboardListResponse,
+		searchString,
+		setSortOrder,
+		sortOrder.columnKey,
+		sortOrder.pagination,
+	]);
 
 	const [newDashboardState, setNewDashboardState] = useState({
 		loading: false,
@@ -810,6 +819,7 @@ function DashboardsList(): JSX.Element {
 											showTotal: showPaginationItem,
 											showSizeChanger: false,
 											onChange: (page): void => handlePageSizeUpdate(page),
+											current: Number(sortOrder.pagination),
 											defaultCurrent: Number(sortOrder.pagination) || 1,
 										}
 									}

frontend/src/container/NewDashboard/DashboardDescription/index.tsx

@@ -5,6 +5,7 @@ import { Button, Card, Input, Modal, Popover, Tag, Typography } from 'antd';
 import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn';
 import { dashboardHelpMessage } from 'components/facingIssueBtn/util';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
+import { QueryParams } from 'constants/query';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
 import ROUTES from 'constants/routes';
 import { DeleteButton } from 'container/ListOfDashboard/TableComponents/DeleteButton';
@@ -258,6 +259,7 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 		urlQuery.set('columnKey', listSortOrder.columnKey as string);
 		urlQuery.set('order', listSortOrder.order as string);
 		urlQuery.set('page', listSortOrder.pagination as string);
+		urlQuery.delete(QueryParams.relativeTime);
 
 		const generatedUrl = `${ROUTES.ALL_DASHBOARD}?${urlQuery.toString()}`;
 		history.replace(generatedUrl);

frontend/src/lib/uPlotLib/getUplotChartOptions.ts

@@ -68,7 +68,7 @@ function getStackedSeries(apiResponse: QueryData[]): QueryData[] {
 		const { values } = series[i];
 		for (let j = 0; j < values.length; j++) {
 			values[j][1] = String(
-				parseFloat(values[j][1]) + parseFloat(series[i + 1].values[j][1]),
+				parseFloat(values[j]?.[1]) + parseFloat(series[i + 1].values[j]?.[1]),
 			);
 		}
 

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -52,7 +52,7 @@ const DashboardContext = createContext<IDashboardContext>({
 	layouts: [],
 	panelMap: {},
 	setPanelMap: () => {},
-	listSortOrder: { columnKey: null, order: null, pagination: '1' },
+	listSortOrder: { columnKey: 'createdAt', order: 'descend', pagination: '1' },
 	setListSortOrder: () => {},
 	setLayouts: () => {},
 	setSelectedDashboard: () => {},
@@ -88,9 +88,9 @@ export function DashboardProvider({
 	const paginationParam = params.get('page');
 
 	const [listSortOrder, setListSortOrder] = useState({
-		columnKey: orderColumnParam,
-		order: orderQueryParam,
-		pagination: paginationParam,
+		columnKey: orderColumnParam || 'updatedAt',
+		order: orderQueryParam || 'descend',
+		pagination: paginationParam || '1',
 	});
 
 	const dispatch = useDispatch<Dispatch<AppActions>>();

frontend/src/providers/Dashboard/types.ts

@@ -16,15 +16,15 @@ export interface IDashboardContext {
 	panelMap: Record<string, { widgets: Layout[]; collapsed: boolean }>;
 	setPanelMap: React.Dispatch<React.SetStateAction<Record<string, any>>>;
 	listSortOrder: {
-		columnKey: string | null;
-		order: string | null;
-		pagination: string | null;
+		columnKey: string;
+		order: string;
+		pagination: string;
 	};
 	setListSortOrder: Dispatch<
 		SetStateAction<{
-			columnKey: string | null;
-			order: string | null;
-			pagination: string | null;
+			columnKey: string;
+			order: string;
+			pagination: string;
 		}>
 	>;
 	setLayouts: React.Dispatch<React.SetStateAction<Layout[]>>;