refactor: update caching duration for network analysis and enhance layout structure in statistics view for improved readability
This commit is contained in:
@@ -149,13 +149,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-1 gap-6 xl:grid-cols-2 transition-[max-height] duration-300 ease-out"
|
||||
:class="chartsLoaded ? 'max-h-none' : 'max-h-[260px] overflow-hidden'"
|
||||
<!-- Telemetry Grid - 2x2 Layout for all 4 metrics -->
|
||||
<div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
|
||||
|
||||
<!-- Processor Utilization Section -->
|
||||
<section
|
||||
class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-theme-sm overflow-hidden transition-all duration-500 ease-out hover:shadow-md"
|
||||
:class="chartsLoaded ? 'opacity-100' : 'opacity-80'"
|
||||
>
|
||||
<!-- Processor Utilization Graph -->
|
||||
<div>
|
||||
<div class="bg-white dark:bg-gray-900 hover:shadow-theme-sm border border-gray-200 dark:border-gray-800 p-4 rounded-xl transition-all duration-200">
|
||||
<div class="bg-white dark:bg-gray-900 p-4 rounded-xl transition-all duration-200">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
@@ -245,11 +247,14 @@
|
||||
<div id="cpu-chart" wire:ignore></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Network Traffic Graph -->
|
||||
<div>
|
||||
<div class="bg-white dark:bg-gray-900 hover:shadow-theme-sm border border-gray-200 dark:border-gray-800 p-4 rounded-xl transition-all duration-200">
|
||||
<!-- Network Traffic Section -->
|
||||
<section
|
||||
class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-theme-sm overflow-hidden transition-all duration-500 ease-out hover:shadow-md"
|
||||
:class="chartsLoaded ? 'opacity-100' : 'opacity-80'"
|
||||
>
|
||||
<div class="bg-white dark:bg-gray-900 p-4 rounded-xl transition-all duration-200">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
@@ -339,11 +344,14 @@
|
||||
<div id="network-chart" wire:ignore></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Memory Utilization Graph -->
|
||||
<div>
|
||||
<div class="bg-white dark:bg-gray-900 hover:shadow-theme-sm border border-gray-200 dark:border-gray-800 p-4 rounded-xl transition-all duration-200">
|
||||
<!-- Memory Utilization Section -->
|
||||
<section
|
||||
class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-theme-sm overflow-hidden transition-all duration-500 ease-out hover:shadow-md"
|
||||
:class="chartsLoaded ? 'opacity-100' : 'opacity-80'"
|
||||
>
|
||||
<div class="bg-white dark:bg-gray-900 p-4 rounded-xl transition-all duration-200">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
@@ -433,11 +441,14 @@
|
||||
<div id="memory-chart" wire:ignore></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Storage I/O Graph -->
|
||||
<div>
|
||||
<div class="bg-white dark:bg-gray-900 hover:shadow-theme-sm border border-gray-200 dark:border-gray-800 p-4 rounded-xl transition-all duration-200">
|
||||
<!-- Storage I/O Section -->
|
||||
<section
|
||||
class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl p-6 shadow-theme-sm overflow-hidden transition-all duration-500 ease-out hover:shadow-md"
|
||||
:class="chartsLoaded ? 'opacity-100' : 'opacity-80'"
|
||||
>
|
||||
<div class="bg-white dark:bg-gray-900 p-4 rounded-xl transition-all duration-200">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
@@ -527,7 +538,9 @@
|
||||
<div id="disk-chart" wire:ignore></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div> <!-- End Telemetry Grid -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -2185,6 +2198,7 @@
|
||||
|
||||
<!-- Network Analysis Section -->
|
||||
<div
|
||||
wire:poll.30s="loadNetworkAnalysis"
|
||||
class="relative bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-2xl overflow-hidden shadow-theme-sm mt-6"
|
||||
id="network-analysis-card"
|
||||
style="width: 100%;"
|
||||
@@ -2264,9 +2278,32 @@
|
||||
<p class="text-xs text-base/60">
|
||||
Deep visibility into firewall sessions, security threats, and top consumers of bandwidth powered by the Core Router API.
|
||||
</p>
|
||||
@if($networkAnalysis['lastUpdated'])
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-success-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-success-500"></span>
|
||||
</span>
|
||||
<p class="text-xs text-base/50">
|
||||
Streaming · Last updated {{ \Carbon\Carbon::parse($networkAnalysis['lastUpdated'])->diffForHumans() }}
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
wire:click="loadNetworkAnalysis"
|
||||
wire:loading.attr="disabled"
|
||||
wire:loading.class="opacity-50 cursor-not-allowed"
|
||||
class="bg-background border border-neutral px-3 py-2 rounded-md text-sm font-semibold hover:bg-background/80 flex items-center gap-2 h-[calc(0.5rem*2+1.25rem)]"
|
||||
title="Refresh Now"
|
||||
>
|
||||
<x-ri-refresh-line class="size-4" wire:loading.class="animate-spin" wire:target="loadNetworkAnalysis" />
|
||||
<span wire:loading.remove wire:target="loadNetworkAnalysis">Refresh</span>
|
||||
<span wire:loading wire:target="loadNetworkAnalysis">Refreshing...</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
wire:click="exportNetworkAnalysis"
|
||||
|
||||
Reference in New Issue
Block a user