Display logs

av3nger · Nov 6, 2023 · 024f31d · 024f31d
1 parent a2c8dee
commit 024f31d
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 6 deletions.
diff --git a/app/modules/class-logging.php b/app/modules/class-logging.php
@@ -13,6 +13,8 @@
 
 namespace CF_Images\App\Modules;
 
+use CF_Images\App\Traits;
+
 if ( ! defined( 'WPINC' ) ) {
 	die;
 }
@@ -23,6 +25,8 @@
  * @since 1.6.0
  */
 class Logging extends Module {
+	use Traits\Ajax;
+
 	/**
 	 * Log file.
 	 *
@@ -45,6 +49,10 @@ public function init() {
 		}
 
 		add_action( 'cf_images_log', array( $this, 'log' ), 10, 5 );
+
+		if ( wp_doing_ajax() ) {
+			add_action( 'wp_ajax_cf_images_get_logs', array( $this, 'ajax_get_logs' ) );
+		}
 	}
 
 	/**
@@ -96,4 +104,22 @@ public function log( $message, ...$args ) {
 		flock( $fp, LOCK_UN );
 		fclose( $fp ); // phpcs:ignore WordPress.WP.AlternativeFunctions
 	}
+
+	/**
+	 * Get logs.
+	 *
+	 * @since 1.6.0
+	 */
+	public function ajax_get_logs() {
+		$this->check_ajax_request( true );
+
+		if ( empty( $this->log_file ) ) {
+			wp_send_json_error( __( 'Log file not found.', 'cf-images' ) );
+			return;
+		}
+
+		$content = file_get_contents( $this->log_file ); // phpcs:ignore WordPress.WP.AlternativeFunctions
+
+		wp_send_json_success( $content );
+	}
 }
diff --git a/assets/_src/app.scss b/assets/_src/app.scss
@@ -63,6 +63,11 @@ $switch-background-active: $blue;
 	& input[type="checkbox"]:disabled:checked:before {
 		display: none;
 	}
+
+	& .cf-images-logs {
+		overflow-y: scroll;
+		max-height: 400px;
+	}
 }
 
 // Remove extra WordPress stuff.

diff --git a/assets/_src/routes/misc/logs.tsx b/assets/_src/routes/misc/logs.tsx
@@ -1,26 +1,53 @@
+/**
+ * External dependencies
+ */
+import { useEffect, useState } from 'react';
+
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { post } from '../../js/helpers/post';
+
 /**
  * Cloudflare Images experimental settings routes.
  *
  * @class
  */
 const Logs = () => {
+	const [error, setError] = useState('');
+	const [logs, setLogs] = useState('');
+
+	useEffect(() => {
+		post('cf_images_get_logs')
+			.then((response: ApiResponse) => {
+				if (!response.success && response.data) {
+					setError(response.data);
+					return;
+				}
+
+				setLogs(response.data);
+			})
+			.catch(window.console.log);
+	}, []);
+
 	return (
 		<section className="card">
 			<div className="card-content">
 				<div className="content">
 					<p className="title is-4">{__('Logs', 'cf-images')}</p>
 
-					<pre>
-						{__(
-							'Below is a list of links to resources that will help you get started or get additional help:',
-							'cf-images'
-						)}
-					</pre>
+					{error && (
+						<div className="notification is-warning">
+							<p>{error}</p>
+						</div>
+					)}
+
+					{logs && <pre className="cf-images-logs">{logs}</pre>}
 				</div>
 			</div>
 		</section>