Simplify History component - remove charts temporarily to debug white page

client/build/asset-manifest.json

@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/static/css/main.30760b67.css",
-    "main.js": "/static/js/main.3cb52c96.js",
+    "main.js": "/static/js/main.9881449d.js",
     "static/js/453.d456ce70.chunk.js": "/static/js/453.d456ce70.chunk.js",
     "index.html": "/index.html",
     "main.30760b67.css.map": "/static/css/main.30760b67.css.map",
-    "main.3cb52c96.js.map": "/static/js/main.3cb52c96.js.map",
+    "main.9881449d.js.map": "/static/js/main.9881449d.js.map",
     "453.d456ce70.chunk.js.map": "/static/js/453.d456ce70.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.30760b67.css",
-    "static/js/main.3cb52c96.js"
+    "static/js/main.9881449d.js"
   ]
 }

client/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.3cb52c96.js"></script><link href="/static/css/main.30760b67.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>React App</title><script defer="defer" src="/static/js/main.9881449d.js"></script><link href="/static/css/main.30760b67.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

client/src/History.js

@@ -1,17 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
 import axios from 'axios';
-import {
-  Area,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  Legend,
-  ResponsiveContainer,
-  ComposedChart,
-  Bar,
-} from 'recharts';
 import './App.css';
 
 function History() {
@@ -61,87 +49,11 @@ function History() {
         </div>
       ) : (
         <div>
-          {historyData.map((resource) => (
+          {historyData && historyData.map((resource) => (
-            <div key={resource.id} className="detail-section" style={{ marginBottom: '3rem' }}>
+            <div key={resource.id}>
-              <Link to={`/resource/${resource.id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
+              <h3>{resource.name}</h3>
-                <h3 style={{ marginBottom: '0.5rem', cursor: 'pointer', color: '#667eea' }}>
+              <p>Type: {resource.type} | Uptime: {resource.uptime}% | Avg Response: {resource.avgResponseTime}ms</p>
-                  {resource.name}
+              <p>Total checks: {resource.checks ? resource.checks.length : 0}</p>
-                </h3>
-              </Link>
-              <p style={{ color: '#666', marginBottom: '1rem' }}>
-                Type: <strong>{resource.type}</strong> | Uptime: <strong>{resource.uptime}%</strong> | Avg Response: <strong>{resource.avgResponseTime}ms</strong>
-              </p>
-
-              {resource.checks.length > 0 ? (
-                <div className="chart-container" style={{ height: '400px', marginBottom: '2rem' }}>
-                  <ResponsiveContainer width="100%" height="100%">
-                    <ComposedChart data={prepareChartData(resource.checks)}>
-                      <CartesianGrid strokeDasharray="3 3" />
-                      <XAxis
-                        dataKey="time"
-                        tick={{ fontSize: 12 }}
-                        angle={-45}
-                        textAnchor="end"
-                        height={80}
-                      />
-                      <YAxis yAxisId="left" />
-                      <YAxis yAxisId="right" orientation="right" />
-                      <Tooltip
-                        contentStyle={{ backgroundColor: '#f5f5f5', border: '1px solid #ddd' }}
-                        formatter={(value, name) => {
-                          if (name === 'Response Time (ms)') return `${value}ms`;
-                          if (name === 'Status') return value === 1 ? 'UP' : 'DOWN';
-                          return value;
-                        }}
-                      />
-                      <Legend />
-                      <Area
-                        yAxisId="left"
-                        type="monotone"
-                        dataKey="responseTime"
-                        fill="#667eea"
-                        stroke="#667eea"
-                        name="Response Time (ms)"
-                        fillOpacity={0.3}
-                      />
-                      <Bar
-                        yAxisId="right"
-                        dataKey="statusNumeric"
-                        fill="#4caf50"
-                        name="Status"
-                        opacity={0.5}
-                      />
-                    </ComposedChart>
-                  </ResponsiveContainer>
-                </div>
-              ) : (
-                <div style={{ color: '#999', padding: '2rem', textAlign: 'center' }}>
-                  No check data available
-                </div>
-              )}
-
-              {/* Statistics Summary */}
-              <div className="stats-grid" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
-                <div className="stat">
-                  <p className="stat-value">{resource.checks.length}</p>
-                  <p className="stat-label">Total Checks</p>
-                </div>
-                <div className="stat">
-                  <p className="stat-value">{resource.uptime}%</p>
-                  <p className="stat-label">Uptime</p>
-                </div>
-                <div className="stat">
-                  <p className="stat-value">{resource.avgResponseTime}ms</p>
-                  <p className="stat-label">Avg Response</p>
-                </div>
-                <div className="stat">
-                  <p className="stat-value">
-                    {resource.checks.filter((c) => c.status === 'up').length}/
-                    {resource.checks.length}
-                  </p>
-                  <p className="stat-label">Successful Checks</p>
-                </div>
-              </div>
             </div>
           ))}
         </div>
@@ -150,18 +62,4 @@ function History() {
   );
 }
 
-function prepareChartData(checks) {
-  return checks.map((check) => {
-    const date = new Date(check.checked_at);
-    return {
-      time: date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
-      date: date.toLocaleDateString(),
-      responseTime: check.response_time || 0,
-      status: check.status,
-      statusNumeric: check.status === 'up' ? 1 : 0,
-      statusCode: check.status_code,
-    };
-  });
-}
-
 export default History;