Condense Site Status (#212)

Fixes #203
WordPress · Nov 10, 2018 · 396355f · 396355f
1 parent 4222ef8
commit 396355f
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 34 deletions.
diff --git a/assets/javascript/site-status/site-status-tests.js b/assets/javascript/site-status/site-status-tests.js
@@ -23,6 +23,7 @@ jQuery( document ).ready(function( $ ) {
 			data,
 			function( response ) {
 				$test.html( response );
+                $( document ).trigger( 'health-check:site-status-classification' );
 				runNextSiteStatusTest();
 			}
 		);

diff --git a/assets/javascript/site-status/test-result-grouper.js b/assets/javascript/site-status/test-result-grouper.js
@@ -0,0 +1,27 @@
+jQuery( document ).ready(function( $ ) {
+    function HealthCheckSiteStatusClassification() {
+        $( 'tr', '#health-check-site-status-test-wrapper' ).each(function() {
+            var $span = $( 'span', $( this ) ),
+                $noEntries;
+
+            if ( $( this ).hasClass( 'health-check-site-status-test' ) || $span.hasClass( 'spinner' ) ) {
+                return true;
+            }
+
+            $noEntries = $( '.no-entries', '#health-check-accordion-block-' + $span.attr( 'class' ) );
+
+            if ( $noEntries.length > 0 ) {
+                $noEntries.remove();
+            }
+
+            $( 'tbody', '#health-check-accordion-block-' + $span.attr( 'class' ) ).append( '<tr>' + $( this ).html() + '</tr>' );
+            $( this ).remove();
+        } );
+    }
+
+    $( document ).on( 'health-check:site-status-classification', function() {
+        HealthCheckSiteStatusClassification();
+    } );
+
+    HealthCheckSiteStatusClassification();
+});
diff --git a/assets/sass/health-check.scss b/assets/sass/health-check.scss
@@ -92,6 +92,8 @@ body {
 		/* Diff viewer styles */
 		@import "modules/diff-viewer";
 
+		/* Site Status styles */
+		@import "modules/site-status";
 	}
 }
 

diff --git a/assets/sass/modules/_site-status.scss b/assets/sass/modules/_site-status.scss
@@ -0,0 +1,4 @@
+#health-check-site-status-test-wrapper {
+
+	display: none;
+}
diff --git a/package.json b/package.json
@@ -41,4 +41,4 @@
     "url": "https://github.com/WordPress/health-check"
   },
   "version": "0.1.0"
-}
+}
diff --git a/src/pages/site-status.php b/src/pages/site-status.php
@@ -19,39 +19,91 @@
 		</p>
 	</div>
 
-	<table class="widefat striped health-check-table">
-		<tbody>
-		<?php
-		$tests = Health_Check_Site_Status::get_tests();
-		foreach ( $tests['direct'] as $test ) :
-			?>
-			<tr>
-				<td><?php echo esc_html( $test['label'] ); ?></td>
-				<td class="" data-site-status="<?php echo esc_attr( $test['test'] ); ?>">
-					<?php
-					$test_function = sprintf(
-						'test_%s',
-						$test['test']
-					);
-
-					if ( method_exists( $health_check_site_status, $test_function ) && is_callable( array( $health_check_site_status, $test_function ) ) ) {
-						call_user_func( array( $health_check_site_status, $test_function ) );
-					}
-					?>
-				</td>
-			</tr>
-		<?php endforeach; ?>
-
-		<?php foreach ( $tests['async'] as $test ) : ?>
-			<tr>
-				<td><?php echo esc_html( $test['label'] ); ?></td>
-				<td class="health-check-site-status-test" data-site-status="<?php echo esc_attr( $test['test'] ); ?>">
-					<span class="spinner is-active"></span>
-				</td>
-			</tr>
-		<?php endforeach; ?>
-		</tbody>
-	</table>
+	<dl id="health-check-tools" role="presentation" class="health-check-accordion">
+		<dt role="heading" aria-level="2">
+			<button aria-expanded="true" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-error" id="health-check-accordion-heading-error" type="button">
+			<span class="title">
+				<span class="error"></span> <?php esc_html_e( 'Critical items that need immediate attention', 'health-check' ); ?>
+			</span>
+				<span class="icon"></span>
+			</button>
+		</dt>
+		<dd id="health-check-accordion-block-error" role="region" aria-labelledby="health-check-accordion-heading-error" class="health-check-accordion-panel">
+			<table class="widefat striped health-check-table">
+				<tbody>
+					<tr class="no-entries"><td><?php esc_html_e( 'There are no critical items that needs immediate attention at this time.', 'health-check' ); ?></td></tr>
+				</tbody>
+			</table>
+		</dd>
+
+		<dt role="heading" aria-level="2">
+			<button aria-expanded="true" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-warning" id="health-check-accordion-heading-warning" type="button">
+			<span class="title">
+				<span class="warning"></span> <?php esc_html_e( 'Non-critical items that may improve your experience', 'health-check' ); ?>
+			</span>
+				<span class="icon"></span>
+			</button>
+		</dt>
+		<dd id="health-check-accordion-block-warning" role="region" aria-labelledby="health-check-accordion-heading-warning" class="health-check-accordion-panel">
+			<table class="widefat striped health-check-table">
+				<tbody>
+					<tr class="no-entries"><td><?php esc_html_e( 'There are no pending improvements at this time.', 'health-check' ); ?></td></tr>
+				</tbody>
+			</table>
+		</dd>
+
+		<dt role="heading" aria-level="2">
+			<button aria-expanded="false" class="health-check-accordion-trigger" aria-controls="health-check-accordion-block-good" id="health-check-accordion-heading-good" type="button">
+			<span class="title">
+				<span class="good"></span> <?php esc_html_e( 'Items with no issues detected', 'health-check' ); ?>
+			</span>
+				<span class="icon"></span>
+			</button>
+		</dt>
+		<dd id="health-check-accordion-block-good" role="region" aria-labelledby="health-check-accordion-heading-good" class="health-check-accordion-panel" hidden="hidden">
+			<table class="widefat striped health-check-table">
+				<tbody>
+					<tr class="no-entries"><td><?php esc_html_e( 'None of the site tests are passing at this time.', 'health-check' ); ?></td></tr>
+				</tbody>
+			</table>
+		</dd>
+	</dl>
+
+	<div id="health-check-site-status-test-wrapper">
+		<table class="widefat striped health-check-table">
+			<tbody>
+			<?php
+			$tests = Health_Check_Site_Status::get_tests();
+			foreach ( $tests['direct'] as $test ) :
+				?>
+				<tr>
+					<td><?php echo esc_html( $test['label'] ); ?></td>
+					<td class="" data-site-status="<?php echo esc_attr( $test['test'] ); ?>">
+						<?php
+						$test_function = sprintf(
+							'test_%s',
+							$test['test']
+						);
+
+						if ( method_exists( $health_check_site_status, $test_function ) && is_callable( array( $health_check_site_status, $test_function ) ) ) {
+							call_user_func( array( $health_check_site_status, $test_function ) );
+						}
+						?>
+					</td>
+				</tr>
+			<?php endforeach; ?>
+
+			<?php foreach ( $tests['async'] as $test ) : ?>
+				<tr>
+					<td><?php echo esc_html( $test['label'] ); ?></td>
+					<td class="health-check-site-status-test" data-site-status="<?php echo esc_attr( $test['test'] ); ?>">
+						<span class="spinner is-active"></span>
+					</td>
+				</tr>
+			<?php endforeach; ?>
+			</tbody>
+		</table>
+	</div>
 
 	<?php
 	include_once( HEALTH_CHECK_PLUGIN_DIRECTORY . '/modals/js-result-warnings.php' );