some progress
This commit is contained in:
Doar Mihai
@@ -0,0 +1,232 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Uptime Monitoring')
|
||||
|
||||
@section('content')
|
||||
<div class="container-fluid">
|
||||
<!-- Page Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1 class="h2 mb-2">
|
||||
<i class="bi bi-arrow-up-circle text-primary"></i>
|
||||
Uptime Monitoring
|
||||
</h1>
|
||||
<p class="text-muted">Monitor website availability and response times across all your sites</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Overview -->
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-md-3">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="bg-primary bg-opacity-10 text-primary rounded p-3">
|
||||
<i class="bi bi-globe fs-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<div class="text-muted small">Total Sites</div>
|
||||
<div class="h4 mb-0">{{ $stats['total_sites'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="bg-success bg-opacity-10 text-success rounded p-3">
|
||||
<i class="bi bi-check-circle-fill fs-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<div class="text-muted small">Sites Up</div>
|
||||
<div class="h4 mb-0 text-success">{{ $stats['sites_up'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="bg-danger bg-opacity-10 text-danger rounded p-3">
|
||||
<i class="bi bi-x-circle-fill fs-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<div class="text-muted small">Sites Down</div>
|
||||
<div class="h4 mb-0 text-danger">{{ $stats['sites_down'] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="bg-info bg-opacity-10 text-info rounded p-3">
|
||||
<i class="bi bi-speedometer2 fs-4"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 ms-3">
|
||||
<div class="text-muted small">Avg Response</div>
|
||||
<div class="h4 mb-0">{{ $stats['avg_response_time'] }}ms</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sites List -->
|
||||
<div class="card border-0 shadow-sm">
|
||||
<div class="card-header bg-white border-bottom">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-list-check me-2"></i>
|
||||
All Sites
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
@if($sites->isNotEmpty())
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th>Website</th>
|
||||
<th>Status</th>
|
||||
<th>Last Check</th>
|
||||
<th>Response Time</th>
|
||||
<th>Uptime (30d)</th>
|
||||
<th class="text-end">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($sites as $site)
|
||||
@php
|
||||
$latestCheck = $site->uptimeChecks->first();
|
||||
$isOnline = $latestCheck && $latestCheck->is_online;
|
||||
@endphp
|
||||
<tr>
|
||||
<td>
|
||||
<div class="fw-semibold">{{ $site->name }}</div>
|
||||
<div class="small text-muted">{{ $site->url }}</div>
|
||||
</td>
|
||||
<td>
|
||||
@if(!$latestCheck)
|
||||
<span class="badge bg-secondary">
|
||||
<i class="bi bi-dash-circle"></i> Not Checked
|
||||
</span>
|
||||
@elseif($isOnline)
|
||||
<span class="badge bg-success">
|
||||
<i class="bi bi-check-circle-fill"></i> Online
|
||||
</span>
|
||||
@else
|
||||
<span class="badge bg-danger">
|
||||
<i class="bi bi-x-circle-fill"></i> Down
|
||||
</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
@if($latestCheck)
|
||||
<span class="text-muted">{{ $latestCheck->created_at->diffForHumans() }}</span>
|
||||
@else
|
||||
<span class="text-muted">—</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
@if($latestCheck && $latestCheck->response_time)
|
||||
<span class="fw-semibold">{{ round($latestCheck->response_time) }}ms</span>
|
||||
@else
|
||||
<span class="text-muted">—</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="progress" style="width: 100px; height: 8px;">
|
||||
<div class="progress-bar bg-success"
|
||||
style="width: 99.5%"></div>
|
||||
</div>
|
||||
<span class="small fw-semibold">99.5%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-end">
|
||||
<a href="{{ route('uptime.show', $site) }}" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-eye"></i> View Details
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@else
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-arrow-up-circle text-muted" style="font-size: 4rem; opacity: 0.3;"></i>
|
||||
<h5 class="mt-3">No Sites Being Monitored</h5>
|
||||
<p class="text-muted">Add sites to start monitoring their uptime.</p>
|
||||
<a href="{{ route('sites.create') }}" class="btn btn-primary mt-3">
|
||||
<i class="bi bi-plus-circle"></i> Add Site
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recent Checks -->
|
||||
@if($recentChecks->isNotEmpty())
|
||||
<div class="card border-0 shadow-sm mt-4">
|
||||
<div class="card-header bg-white border-bottom">
|
||||
<h5 class="mb-0">
|
||||
<i class="bi bi-clock-history me-2"></i>
|
||||
Recent Checks
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm mb-0">
|
||||
<thead class="bg-light">
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Site</th>
|
||||
<th>Status</th>
|
||||
<th>Response Time</th>
|
||||
<th>Status Code</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($recentChecks as $check)
|
||||
<tr>
|
||||
<td class="text-muted small">{{ $check->created_at->format('M d, H:i:s') }}</td>
|
||||
<td>{{ $check->site->name }}</td>
|
||||
<td>
|
||||
@if($check->is_online)
|
||||
<span class="badge bg-success">Online</span>
|
||||
@else
|
||||
<span class="badge bg-danger">Down</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>{{ round($check->response_time ?? 0) }}ms</td>
|
||||
<td>
|
||||
<span class="badge bg-{{ $check->status_code >= 200 && $check->status_code < 300 ? 'success' : 'warning' }}">
|
||||
{{ $check->status_code }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endsection
|
||||
@@ -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