some progress
This commit is contained in:
Doar Mihai
@@ -0,0 +1,181 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Uptime Details - ' . $site->name)
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<!-- Page Header -->
|
||||
<div class="mb-4">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="{{ route('uptime.index') }}">Uptime Monitoring</a></li>
|
||||
<li class="breadcrumb-item active">{{ $site->name }}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h1 class="h2 mb-2">{{ $site->name }}</h1>
|
||||
<p class="text-muted">{{ $site->url }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="badge bg-success fs-6 px-3 py-2">
|
||||
<i class="bi bi-graph-up-arrow"></i> {{ $uptimePercentage }}% Uptime
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<i class="bi bi-percent text-success fs-1 mb-3"></i>
|
||||
<h3 class="mb-1">{{ $uptimePercentage }}%</h3>
|
||||
<p class="text-muted mb-0">Uptime (30 days)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<i class="bi bi-speedometer2 text-primary fs-1 mb-3"></i>
|
||||
<h3 class="mb-1">{{ round($avgResponseTime ?? 0) }}ms</h3>
|
||||
<p class="text-muted mb-0">Avg Response Time</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body text-center">
|
||||
<i class="bi bi-clock-history text-info fs-1 mb-3"></i>
|
||||
<h3 class="mb-1">{{ $uptimeChecks->count() }}</h3>
|
||||
<p class="text-muted mb-0">Total Checks</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Uptime Chart -->
|
||||
<div class="card border-0 shadow-sm mb-4">
|
||||
<div class="card-header bg-white">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-graph-up me-2"></i>
|
||||
Response Time Trend
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="responseTimeChart" height="100"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Check History -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-list-ul me-2"></i>
|
||||
Check History
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th>Date & Time</th>
|
||||
<th>Status</th>
|
||||
<th>Status Code</th>
|
||||
<th>Response Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($uptimeChecks as $check)
|
||||
<tr>
|
||||
<td>{{ $check->created_at->format('M d, Y H:i:s') }}</td>
|
||||
<td>
|
||||
@if($check->is_online)
|
||||
<span class="badge bg-success">
|
||||
<i class="bi bi-check-circle"></i> Online
|
||||
</span>
|
||||
@else
|
||||
<span class="badge bg-danger">
|
||||
<i class="bi bi-x-circle"></i> Down
|
||||
</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-{{ $check->status_code >= 200 && $check->status_code < 300 ? 'success' : ($check->status_code >= 300 && $check->status_code < 400 ? 'info' : 'danger') }}">
|
||||
{{ $check->status_code }}
|
||||
</span>
|
||||
</td>
|
||||
<td>{{ round($check->response_time ?? 0) }}ms</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" class="text-center py-4 text-muted">
|
||||
No uptime checks recorded yet.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@if($uptimeChecks->hasPages())
|
||||
<div class="card-footer bg-white">
|
||||
{{ $uptimeChecks->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const ctx = document.getElementById('responseTimeChart');
|
||||
if (!ctx) return;
|
||||
|
||||
const isDarkMode = localStorage.getItem('darkMode') === 'true';
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: @json($uptimeChecks->pluck('created_at')->map(fn($date) => $date->format('M d H:i'))->reverse()),
|
||||
datasets: [{
|
||||
label: 'Response Time (ms)',
|
||||
data: @json($uptimeChecks->pluck('response_time')->reverse()),
|
||||
borderColor: '#667eea',
|
||||
backgroundColor: 'rgba(102, 126, 234, 0.1)',
|
||||
borderWidth: 2,
|
||||
fill: true,
|
||||
tension: 0.4
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: isDarkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.06)'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user