From 8b02a4dc0933c4f774ea63bdb30035f72989cb8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Maneiro?= <583546+oandregal@users.noreply.github.com> Date: Thu, 6 Feb 2025 23:08:46 +0100 Subject: [PATCH] Remove local state for date and use URL query instead --- client/hosting/logs/controller.tsx | 4 +- client/sites/tools/logs/hooks/use-data.ts | 10 ++- client/sites/tools/logs/index.tsx | 90 ++++++++++++++--------- 3 files changed, 63 insertions(+), 41 deletions(-) diff --git a/client/hosting/logs/controller.tsx b/client/hosting/logs/controller.tsx index a211f36897b2c..2020ce8fe78ae 100644 --- a/client/hosting/logs/controller.tsx +++ b/client/hosting/logs/controller.tsx @@ -7,7 +7,7 @@ export function phpErrorLogs( context: PageJSContext, next: () => void ) { context.primary = (
- +
); @@ -18,7 +18,7 @@ export function webServerLogs( context: PageJSContext, next: () => void ) { context.primary = (
- +
); diff --git a/client/sites/tools/logs/hooks/use-data.ts b/client/sites/tools/logs/hooks/use-data.ts index ce6d012e7138b..33e54e1178b1e 100644 --- a/client/sites/tools/logs/hooks/use-data.ts +++ b/client/sites/tools/logs/hooks/use-data.ts @@ -15,11 +15,13 @@ const EMPTY_ARRAY: ( ServerLog | PHPLog )[] = []; const useData = ( { view, logType, - dateRange, + dateFrom, + dateTo, }: { view: View; logType: LogType; - dateRange: { startTime: Moment; endTime: Moment }; + dateFrom: Moment; + dateTo: Moment; } ) => { const siteId = useSelector( getSelectedSiteId ); const severity = getFilterValue( view, 'severity' ); @@ -28,8 +30,8 @@ const useData = ( { const { data, isFetching } = useSiteLogsQuery( siteId, { logType, - start: dateRange.startTime.unix(), - end: dateRange.endTime.unix(), + start: dateFrom.unix(), + end: dateTo.unix(), filter: buildFilter( logType, severity, requestType, status ), sortOrder: view.sort?.direction, pageSize: view.perPage, diff --git a/client/sites/tools/logs/index.tsx b/client/sites/tools/logs/index.tsx index 73905f2fc7d0e..c2c41e6df31c6 100644 --- a/client/sites/tools/logs/index.tsx +++ b/client/sites/tools/logs/index.tsx @@ -1,3 +1,4 @@ +import page from '@automattic/calypso-router'; import { Button, __experimentalToggleGroupControl as ToggleGroupControl, @@ -249,7 +250,13 @@ export const SiteLogs = ( { ); }; -export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => { +export const SiteLogsDataViews = ( { + logType, + query, +}: { + logType: LogType; + query: { from: string; to: string }; +} ) => { // TODO: // - DataViews: // - styling issues: spacing left/right @@ -266,48 +273,61 @@ export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => { const { __ } = useI18n(); const moment = useLocalizedMoment(); const siteGmtOffset = useCurrentSiteGmtOffset(); - const getLatestDateRange = useCallback( () => { - const startTime = moment().subtract( 7, 'd' ); - const endTime = moment(); - return { startTime, endTime }; - }, [ moment ] ); // Can we actually derive an unique ID from the data? const getItemId = useMemo( () => () => uuid(), [] ); - const [ dateRange, setDateRange ] = useState( () => { - const latest = getLatestDateRange(); - const dateRangeQuery = getDateRangeQueryParam( moment ); - return { - startTime: dateRangeQuery.startTime || latest.startTime, - endTime: dateRangeQuery.endTime || latest.endTime, - }; - } ); - const handleTimeRangeChange = ( newStart: Moment | null, newEnd: Moment | null ) => { + const startTime = useMemo( () => { + const from = parseInt( query.from || '', 10 ); + if ( ! isNaN( from ) ) { + return moment.unix( from ); + } + + return moment().subtract( 7, 'd' ); + }, [ query.from, moment ] ); + + const endTime = useMemo( () => { + const to = parseInt( query.to || '', 10 ); + if ( ! isNaN( to ) ) { + return moment.unix( to ); + } + + return moment(); + }, [ query.to, moment ] ); + + const handleTimeRangeChange = ( newStartTime: Moment | null, newEndTime: Moment | null ) => { if ( - ( ! newStart && ! newEnd ) || - ( dateRange.startTime.isSame( newStart ) && dateRange.endTime.isSame( newEnd ) ) + ( ! newStartTime && ! newEndTime ) || + ( startTime.isSame( newStartTime ) && endTime.isSame( newEndTime ) ) ) { return; } - // setIsMobileOpen( false ); // TODO - let startTime = newStart || dateRange.startTime; - let endTime = newEnd || dateRange.endTime; - if ( ! startTime.isValid() || ! endTime.isValid() ) { - const latest = getLatestDateRange(); - startTime = latest.startTime; - endTime = latest.endTime; + let from = newStartTime || startTime; + let to = newEndTime || endTime; + if ( ! from.isValid() || ! to.isValid() || from.isAfter( to ) ) { + from = moment().subtract( 7, 'd' ); + to = moment(); } - setDateRange( { startTime, endTime } ); - // setAutoRefresh( false ); // TODO - updateDateRangeQueryParam( { startTime, endTime } ); + const url = new URL( window.location.href ); + url.searchParams.set( 'from', from.unix().toString( 10 ) ); + url.searchParams.set( 'to', to.unix().toString( 10 ) ); + // todo: when to clear the query? + // url.searchParams.delete( 'from' ); + // url.searchParams.delete( 'to' ); + + page.replace( url.pathname + url.search ); }; const fields = useFields( { logType } ); const [ view, setView ] = useView( { logType } ); - const { data, paginationInfo, isLoading } = useData( { view, logType, dateRange } ); + const { data, paginationInfo, isLoading } = useData( { + view, + logType, + dateFrom: startTime, + dateTo: endTime, + } ); useEffect( () => { setView( ( view: View ) => ( { ...view, @@ -323,8 +343,8 @@ export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => { const onDownloadLogs = useCallback( () => { downloadLogs( { logType, - startDateTime: dateRange.startTime, - endDateTime: dateRange.endTime, + startDateTime: startTime, + endDateTime: endTime, filter: buildFilter( logType, getFilterValue( view, 'severity' ), @@ -332,7 +352,7 @@ export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => { getFilterValue( view, 'request_status' ) ), } ); - }, [ downloadLogs, logType, dateRange, view ] ); + }, [ downloadLogs, logType, startTime, endTime, view ] ); return ( <> @@ -356,11 +376,11 @@ export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => { handleTimeRangeChange( value, null ) } gmtOffset={ siteGmtOffset } min={ moment.unix( 0 ) } // The UI goes weird when the unix timestamps go negative, so don't allow it - max={ dateRange.endTime } + max={ endTime } /> @@ -369,11 +389,11 @@ export const SiteLogsDataViews = ( { logType }: { logType: LogType } ) => { handleTimeRangeChange( null, value ) } gmtOffset={ siteGmtOffset } max={ moment() } - min={ dateRange.startTime } + min={ startTime } />