Hosting dashboard: Rework site logs header and toolbar

client/hosting/logs/controller.tsx

@@ -1,14 +1,12 @@
 import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
-import { SiteLogs } from 'calypso/sites/tools/logs/components/site-logs';
-import { SiteLogsHeader } from 'calypso/sites/tools/logs/components/site-logs-header';
+import { SiteLogs } from 'calypso/sites/tools/logs';
 import { getSelectedSite } from 'calypso/state/ui/selectors';
 import type { Context as PageJSContext, Callback } from '@automattic/calypso-router';
 
 export function phpErrorLogs( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<div className="site-logs">
 			<PageViewTracker path="/site-logs/:site/php" title="PHP Error Logs" />
-			<SiteLogsHeader logType="php" />
 			<SiteLogs logType="php" />
 		</div>
 	);
@@ -20,7 +18,6 @@ export function webServerLogs( context: PageJSContext, next: () => void ) {
 	context.primary = (
 		<div className="site-logs">
 			<PageViewTracker path="/site-logs/:site/web" title="Web Server Logs" />
-			<SiteLogsHeader logType="web" />
 			<SiteLogs logType="web" />
 		</div>
 	);

client/sites/tools/controller.tsx

@@ -3,6 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { useSelector } from 'react-redux';
 import PageViewTracker from 'calypso/lib/analytics/page-view-tracker';
 import HostingFeatures from 'calypso/sites/hosting-features/components/hosting-features';
+import { SiteLogs } from 'calypso/sites/tools/logs';
 import { getSelectedSite, getSelectedSiteSlug } from 'calypso/state/ui/selectors';
 import { getRouteFromContext } from 'calypso/utils';
 import { SidebarItem, Sidebar, PanelWithSidebar } from '../components/panel-sidebar';
@@ -15,7 +16,6 @@ import {
 	Deployments,
 } from './deployments';
 import { indexPage } from './deployments/routes';
-import Logs from './logs';
 import Monitoring from './monitoring';
 import useSftpSshSettingTitle from './sftp-ssh/hooks/use-sftp-ssh-setting-title';
 import SftpSsh from './sftp-ssh/page';
@@ -168,7 +168,7 @@ export function phpErrorLogs( context: PageJSContext, next: () => void ) {
 				path={ getRouteFromContext( context ) }
 			/>
 			<ToolsSidebar />
-			<Logs logType="php" />
+			<SiteLogs logType="php" />
 		</PanelWithSidebar>
 	);
 	next();
@@ -182,7 +182,7 @@ export function webServerLogs( context: PageJSContext, next: () => void ) {
 				path={ getRouteFromContext( context ) }
 			/>
 			<ToolsSidebar />
-			<Logs logType="web" />
+			<SiteLogs logType="web" />
 		</PanelWithSidebar>
 	);
 	next();

client/sites/tools/logs/components/filter-params.ts

@@ -1,8 +1,7 @@
 import page from '@automattic/calypso-router';
+import { LogType } from 'calypso/sites/tools/logs';
 import type { Moment } from 'moment';
 
-export type SiteLogsTab = 'php' | 'web';
-
 interface SiteLogsTabParamsType {
 	[ key: string ]: string[];
 }
@@ -12,9 +11,9 @@ const SiteLogsTabParams: SiteLogsTabParamsType = {
 	web: [ 'from', 'to', 'request_type', 'request_status' ],
 };
 
-export function getPageQueryParam(): SiteLogsTab | null {
+export function getPageQueryParam(): LogType | null {
 	const param = new URL( window.location.href ).searchParams.get( 'page' );
-	return param && [ 'php', 'web' ].includes( param ) ? ( param as SiteLogsTab ) : null;
+	return param && [ 'php', 'web' ].includes( param ) ? ( param as LogType ) : null;
 }
 
 export function getDateRangeQueryParam( moment: typeof import('moment') ): {

client/sites/tools/logs/components/site-logs-header/index.tsx

@@ -1,29 +1,60 @@
-import { SegmentedControl } from '@automattic/components';
-import { translate } from 'i18n-calypso';
+import { Button } from '@wordpress/components';
+import { translate, useTranslate } from 'i18n-calypso';
 import InlineSupportLink from 'calypso/components/inline-support-link';
 import NavigationHeader from 'calypso/components/navigation-header';
-import { navigate } from 'calypso/lib/navigate';
+import { buildFilterParam, LogType } from 'calypso/sites/tools/logs';
+import { useSiteLogsDownloader } from 'calypso/sites/tools/logs/hooks/use-site-logs-downloader';
+import type { Moment } from 'moment';
 
 import './style.scss';
 
-export function SiteLogsHeader( { logType }: { logType: string } ) {
-	const options = [
-		{
-			value: 'php',
-			label: translate( 'PHP error' ),
-		},
-		{
-			value: 'web',
-			label: translate( 'Web server' ),
-		},
-	];
-
-	const switchType = ( newType: string ) => {
-		navigate( window.location.pathname.replace( /\/[^/]+$/, '/' + newType ) );
-	};
+const SiteLogsToolbarDownloadProgress = ( {
+	recordsDownloaded = 0,
+	totalRecordsAvailable = 0,
+} ) => {
+	const translate = useTranslate();
+
+	if ( totalRecordsAvailable === 0 ) {
+		return null;
+	}
 
 	return (
-		<div className="logs-header">
+		<span className="site-logs-toolbar__download-progress">
+			{ translate(
+				'Download progress: %(logRecordsDownloaded)d of %(totalLogRecordsAvailable)d records',
+				{
+					args: {
+						logRecordsDownloaded: recordsDownloaded,
+						totalLogRecordsAvailable: totalRecordsAvailable,
+					},
+				}
+			) }
+		</span>
+	);
+};
+
+type SiteLogsHeaderProps = {
+	endDateTime: Moment;
+	logType: LogType;
+	requestStatus: string;
+	requestType: string;
+	severity: string;
+	startDateTime: Moment;
+};
+
+export function SiteLogsHeader( {
+	endDateTime,
+	logType,
+	requestStatus,
+	requestType,
+	severity,
+	startDateTime,
+}: SiteLogsHeaderProps ) {
+	const { downloadLogs, state } = useSiteLogsDownloader( { roundDateRangeToWholeDays: false } );
+	const isDownloading = state.status === 'downloading';
+
+	return (
+		<div className="site-logs-header">
 			<NavigationHeader
 				title={ translate( 'Logs' ) }
 				subtitle={ translate(
@@ -35,22 +66,26 @@ export function SiteLogsHeader( { logType }: { logType: string } ) {
 					}
 				) }
 			/>
-			<div className="logs-header__selector-container">
-				<div className="logs-header__selector-heading">{ translate( 'Log type' ) }</div>
-				<SegmentedControl className="logs-header__selector-controls">
-					{ options.map( ( option ) => {
-						return (
-							<SegmentedControl.Item
-								key={ option.value }
-								value={ option.value }
-								selected={ option.value === logType }
-								onClick={ () => switchType( option.value ) }
-							>
-								{ option.label }
-							</SegmentedControl.Item>
-						);
-					} ) }
-				</SegmentedControl>
+
+			<div className="site-logs-header__download-container">
+				{ isDownloading && <SiteLogsToolbarDownloadProgress { ...state } /> }
+
+				<Button
+					className="site-logs-toolbar__download"
+					disabled={ isDownloading }
+					isBusy={ isDownloading }
+					variant="primary"
+					onClick={ () =>
+						downloadLogs( {
+							logType,
+							startDateTime,
+							endDateTime,
+							filter: buildFilterParam( logType, severity, requestType, requestStatus ),
+						} )
+					}
+				>
+					{ translate( 'Download logs' ) }
+				</Button>
 			</div>
 		</div>
 	);

client/sites/tools/logs/components/site-logs-header/style.scss

@@ -2,59 +2,42 @@
 @import "@wordpress/base-styles/breakpoints";
 @import "@wordpress/base-styles/mixins";
 
-.logs-header {
+.site-logs-header {
 	display: flex;
 	gap: 24px;
 	flex-wrap: wrap;
 	align-items: center;
 	justify-content: space-between;
-	margin-bottom: 16px;
+	margin-bottom: 24px;
+
+	@media (max-width: $break-medium) {
+		gap: 16px;
+	}
 
 	.navigation-header {
 		width: auto;
 		padding-bottom: 0;
-		margin-bottom: 16px;
-
-		@media (max-width: $break-medium) {
-			margin-bottom: 8px;
-		}
 	}
-}
 
-.logs-header__selector-container {
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-	align-self: flex-start;
-	gap: 10px;
-
-	@include break-medium {
-		flex-direction: row;
-		align-items: center;
-	}
+	.site-logs-header__download-container {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		align-self: center;
+		gap: 10px;
 
-	@media (max-width: $break-medium) {
-		width: 100%;
-	}
-}
-
-.logs-header__selector-heading {
-	font-weight: 400;
-	font-size: 0.875rem;
-	line-height: 20px;
-}
+		@include break-medium {
+			flex-direction: row;
+			align-items: center;
+		}
 
-.logs-header__selector-controls {
-	flex-grow: 1;
-	&.segmented-control .segmented-control__item:first-of-type .segmented-control__link {
-		border-top-left-radius: 4px;
-		border-bottom-left-radius: 4px;
-	}
-	&.segmented-control .segmented-control__item:last-of-type .segmented-control__link {
-		border-top-right-radius: 4px;
-		border-bottom-right-radius: 4px;
+		@media (max-width: $break-medium) {
+			width: 100%;
+		}
 	}
-	@include break-medium {
-		max-width: 329px;
+
+	.site-logs-toolbar__download {
+		height: 42px;
+		justify-content: center;
 	}
 }

client/sites/tools/logs/components/site-logs-table/index.tsx

@@ -3,10 +3,10 @@ import { useI18n } from '@wordpress/react-i18n';
 import clsx from 'clsx';
 import { memo, useMemo } from 'react';
 import { SiteLogsData } from 'calypso/data/hosting/use-site-logs-query';
+import { LogType } from 'calypso/sites/tools/logs';
+import { useCurrentSiteGmtOffset } from 'calypso/sites/tools/logs/hooks/use-current-site-gmt-offset';
 import { useSelector } from 'calypso/state';
 import { getCurrentUserLocale } from 'calypso/state/current-user/selectors';
-import { useCurrentSiteGmtOffset } from '../../hooks/use-current-site-gmt-offset';
-import { LogType } from '../site-logs';
 import SiteLogsTableRow from './site-logs-table-row';
 import { Skeleton } from './skeleton';
 import './style.scss';

client/sites/tools/logs/components/site-logs-table/site-logs-table-row.tsx

@@ -9,7 +9,7 @@ import { useLocalizedMoment } from 'calypso/components/localized-moment';
 import { SiteLogsData } from 'calypso/data/hosting/use-site-logs-query';
 import { useSelector } from 'calypso/state';
 import { getCurrentUserLocale } from 'calypso/state/current-user/selectors';
-import { LogType } from '../site-logs';
+import { LogType } from '../..';
 import SiteLogsExpandedContent from './site-logs-expanded-content';
 import './style.scss';
 

client/sites/tools/logs/components/site-logs-toolbar/date-time-picker.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import { useLocalizedMoment } from 'calypso/components/localized-moment';
 import type { Moment } from 'moment';
 
@@ -21,7 +22,15 @@ interface Props
 // The datetime-local input expects this specific format
 const INPUT_DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
 
-export function DateTimePicker( { value, onChange, gmtOffset = 0, max, min, ...rest }: Props ) {
+export function DateTimePicker( {
+	className,
+	value,
+	onChange,
+	gmtOffset = 0,
+	max,
+	min,
+	...rest
+}: Props ) {
 	const moment = useLocalizedMoment();
 
 	const onDateChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
@@ -33,7 +42,7 @@ export function DateTimePicker( { value, onChange, gmtOffset = 0, max, min, ...r
 
 	return (
 		<input
-			className="button"
+			className={ clsx( 'button', className ) }
 			type="datetime-local"
 			value={ value
 				.clone()