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/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;