nate/skywatch
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify History component - remove charts temporarily to debug white page

Browse Source
This commit is contained in:
nmemmert committed 2025-12-10 15:36:48 -05:00
1 parent 7214238f33
commit 3b6d5c2eb5
3 files changed
+9 -111
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/build/asset-manifest.json
+3 -3
View File
@@ -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
View File
@@ -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
+5 -107
View File
@@ -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) => (
<div key={resource.id} className="detail-section" style={{ marginBottom: '3rem' }}>
<Link to={`/resource/${resource.id}`} style={{ textDecoration: 'none', color: 'inherit' }}>
<h3 style={{ marginBottom: '0.5rem', cursor: 'pointer', color: '#667eea' }}>
{resource.name}
</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>
{historyData && historyData.map((resource) => (
<div key={resource.id}>
<h3>{resource.name}</h3>
<p>Type: {resource.type} | Uptime: {resource.uptime}% | Avg Response: {resource.avgResponseTime}ms</p>
<p>Total checks: {resource.checks ? resource.checks.length : 0}</p>
</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;