diff --git a/client/src/Components/v2/design-elements/BasePage.tsx b/client/src/Components/v2/design-elements/BasePage.tsx index 4daf0cd16..22330f46d 100644 --- a/client/src/Components/v2/design-elements/BasePage.tsx +++ b/client/src/Components/v2/design-elements/BasePage.tsx @@ -100,7 +100,7 @@ export const BasePage = ({ interface BasePageWithStatesProps extends StackProps { loading: boolean; error: any; - items: any[]; + totalCount: number; bullets: string[] | unknown; page: string; actionButtonText: string; @@ -111,7 +111,7 @@ interface BasePageWithStatesProps extends StackProps { export const BasePageWithStates = ({ loading, error, - items, + totalCount, page, bullets, actionButtonText, @@ -119,9 +119,9 @@ export const BasePageWithStates = ({ children, ...props }: BasePageWithStatesProps) => { - const showLoading = loading && (!items || items.length === 0); + const showLoading = loading && totalCount === 0; - if (!loading && isEmpty(items)) { + if (!loading && totalCount === 0) { return ( { - if (!items) return true; - if (Array.isArray(items) && items.length === 0) return true; - return false; -}; - export const MonitorBasePageWithStates = ({ loading, error, - items, + totalCount, page, actionLink, children, @@ -171,7 +165,7 @@ export const MonitorBasePageWithStates = ({ }: MonitorBasePageWithStatesProps) => { const { t } = useTranslation(); - const showLoading = loading && (!items || items.length === 0); + const showLoading = loading && totalCount === 0; if (priorityFallback) { return ( @@ -185,7 +179,7 @@ export const MonitorBasePageWithStates = ({ ); } - if (!loading && isEmpty(items)) { + if (!loading && totalCount === 0) { return ( { - const { hasMore, ...rest } = props; + const { hasMore, itemsOnPage, ...rest } = props; const isSmall = useMediaQuery((theme: any) => theme.breakpoints.down("sm")); const theme = useTheme(); + + useEffect(() => { + if ( + typeof itemsOnPage === "number" && + itemsOnPage === 0 && + rest.count > 0 && + rest.page > 0 && + rest.onPageChange + ) { + rest.onPageChange(null, rest.page - 1); + } + }, [itemsOnPage, rest.count, rest.page, rest.onPageChange]); + const labelDisplayedRows = ({ from, to, diff --git a/client/src/Pages/Incidents/Components/IncidentTable.tsx b/client/src/Pages/Incidents/Components/IncidentTable.tsx index b500ed5ba..121f33123 100644 --- a/client/src/Pages/Incidents/Components/IncidentTable.tsx +++ b/client/src/Pages/Incidents/Components/IncidentTable.tsx @@ -215,6 +215,7 @@ export const IncidentsTable = ({ rowsPerPage={rowsPerPage} onPageChange={handlePageChange} onRowsPerPageChange={handleRowsPerPageChange} + itemsOnPage={incidents.length} /> ); diff --git a/client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx b/client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx index 2644f969e..ca236f45f 100644 --- a/client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx +++ b/client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx @@ -269,6 +269,7 @@ export const InfraMonitorsTable = ({ rowsPerPage={rowsPerPage} onPageChange={handlePageChange} onRowsPerPageChange={handleRowsPerPageChange} + itemsOnPage={monitors.length} /> ); diff --git a/client/src/Pages/Infrastructure/Monitors/index.tsx b/client/src/Pages/Infrastructure/Monitors/index.tsx index af7b3e899..abf241408 100644 --- a/client/src/Pages/Infrastructure/Monitors/index.tsx +++ b/client/src/Pages/Infrastructure/Monitors/index.tsx @@ -85,13 +85,6 @@ const InfrastructureMonitors = () => { return `/monitors/team/with-checks?${params.toString()}`; }, [page, rowsPerPage, filter, field, sortOrder]); - const { - data: monitors, - isLoading: monitorsLoading, - error, - refetch: refetchMonitors, - } = useGet("/monitors/team?type=hardware", {}, { keepPreviousData: true }); - const { data: monitorsWithChecksData, isLoading: monitorsWithChecksLoading, @@ -104,7 +97,7 @@ const InfrastructureMonitors = () => { ); const { summary, count } = monitorsWithChecksData ?? {}; - const isLoading = monitorsLoading || monitorsWithChecksLoading; + const isLoading = monitorsWithChecksLoading; // Delete hook const { deleteFn, loading: isDeleting } = useDelete(); @@ -114,7 +107,6 @@ const InfrastructureMonitors = () => { await deleteFn(`/monitors/${selectedMonitor.id}`); setSelectedMonitor(null); refetch(); - refetchMonitors(); }; const handleCancel = () => { @@ -124,8 +116,8 @@ const InfrastructureMonitors = () => { return ( diff --git a/client/src/Pages/Maintenance/MaintenanceWindowTable.tsx b/client/src/Pages/Maintenance/MaintenanceWindowTable.tsx index 9922c9cc6..53fe6bbee 100644 --- a/client/src/Pages/Maintenance/MaintenanceWindowTable.tsx +++ b/client/src/Pages/Maintenance/MaintenanceWindowTable.tsx @@ -185,6 +185,7 @@ export const MaintenanceWindowTable = ({ emptyViewText={t("common.table.empty")} /> { return ( diff --git a/client/src/Pages/Notifications/index.tsx b/client/src/Pages/Notifications/index.tsx index daf59e74a..37c8cbbed 100644 --- a/client/src/Pages/Notifications/index.tsx +++ b/client/src/Pages/Notifications/index.tsx @@ -45,7 +45,7 @@ const NotificationsPage = () => { } loading={isLoading || isValidating} error={!!error} - items={notifications ?? []} + totalCount={notifications?.length ?? 0} actionButtonText={t("pages.notifications.fallback.actionButton")} actionLink="/notifications/create" > diff --git a/client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx b/client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx index 37093c7a2..1dc9ce9df 100644 --- a/client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx +++ b/client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx @@ -248,6 +248,7 @@ export const PageSpeedMonitorsTable = ({ rowsPerPage={rowsPerPage} onPageChange={handlePageChange} onRowsPerPageChange={handleRowsPerPageChange} + itemsOnPage={monitors.length} /> ); diff --git a/client/src/Pages/PageSpeed/Monitors/index.tsx b/client/src/Pages/PageSpeed/Monitors/index.tsx index 887ec02c0..f6701a988 100644 --- a/client/src/Pages/PageSpeed/Monitors/index.tsx +++ b/client/src/Pages/PageSpeed/Monitors/index.tsx @@ -70,7 +70,7 @@ const PageSpeedMonitorsPage = () => { : undefined} diff --git a/client/src/Pages/StatusPage/StatusPages/index.tsx b/client/src/Pages/StatusPage/StatusPages/index.tsx index 3ad555512..85b84e638 100644 --- a/client/src/Pages/StatusPage/StatusPages/index.tsx +++ b/client/src/Pages/StatusPage/StatusPages/index.tsx @@ -43,7 +43,7 @@ const StatusPages = () => { t("pages.statusPages.fallback.checks", { returnObjects: true }) as string[] } error={!!error} - items={statusPages ?? []} + totalCount={statusPages?.length ?? 0} actionButtonText={t("pages.statusPages.fallback.actionButton")} actionLink="/status/create" > diff --git a/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx b/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx index cc225ad81..94c619672 100644 --- a/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx +++ b/client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx @@ -253,6 +253,7 @@ export const MonitorTable = ({ rowsPerPage={rowsPerPage} onPageChange={(_e, newPage) => setPage(newPage)} onRowsPerPageChange={(e) => setRowsPerPage(Number(e.target.value))} + itemsOnPage={monitors.length} /> ); diff --git a/client/src/Pages/Uptime/Monitors/index.tsx b/client/src/Pages/Uptime/Monitors/index.tsx index efd1a4d6e..64f179403 100644 --- a/client/src/Pages/Uptime/Monitors/index.tsx +++ b/client/src/Pages/Uptime/Monitors/index.tsx @@ -85,18 +85,6 @@ const UptimeMonitorsPage = () => { return `/monitors/team/with-checks?${params.toString()}`; }, [effectiveTypes, page, rowsPerPage, filter, field, sortOrder]); - // Data fetching - const { - data: monitors, - isLoading: monitorsLoading, - error, - refetch: refetchMonitorsAndSummary, - } = useGet( - "/monitors/team?type=http&type=ping&type=port&type=docker", - {}, - { keepPreviousData: true } - ); - const { data: monitorsWithChecksData, isLoading: monitorsWithChecksLoading, @@ -126,20 +114,19 @@ const UptimeMonitorsPage = () => { await deleteFn(`/monitors/${selectedMonitor.id}`); setSelectedMonitor(null); refetch(); - refetchMonitorsAndSummary(); }; const handleCancel = () => { setSelectedMonitor(null); }; - const isLoading = monitorsLoading || monitorsWithChecksLoading; + const isLoading = monitorsWithChecksLoading; return (