diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx index b4148ccf09..52a525d611 100644 --- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx +++ b/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, } } diff --git a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx b/frontend/src/container/NewDashboard/DashboardDescription/index.tsx index 10cbf1b8f0..f1288493bd 100644 --- a/frontend/src/container/NewDashboard/DashboardDescription/index.tsx +++ b/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); diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts index 0ad777216a..daf21e1429 100644 --- a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts +++ b/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]), ); } diff --git a/frontend/src/providers/Dashboard/Dashboard.tsx b/frontend/src/providers/Dashboard/Dashboard.tsx index cd290f6477..6e15b9e3b2 100644 --- a/frontend/src/providers/Dashboard/Dashboard.tsx +++ b/frontend/src/providers/Dashboard/Dashboard.tsx @@ -52,7 +52,7 @@ const DashboardContext = createContext({ 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>(); diff --git a/frontend/src/providers/Dashboard/types.ts b/frontend/src/providers/Dashboard/types.ts index ce3ccebe8d..d72c1839f5 100644 --- a/frontend/src/providers/Dashboard/types.ts +++ b/frontend/src/providers/Dashboard/types.ts @@ -16,15 +16,15 @@ export interface IDashboardContext { panelMap: Record; setPanelMap: React.Dispatch>>; 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>;