Joseph.Rawlings
9e899cb947
New Blade layout, copy, and visual system for the monitoring tab; RRD hosts use data-statistics-chart hooks; tables use pxStatTableKit and data-statistics-data-row; network and comparison panels use new selectors; CSV helpers renamed (pxExport*); modals and telemetry refreshed. Made-with: Cursor
202 lines
11 KiB
PHP
202 lines
11 KiB
PHP
<!-- Delete Confirmation Modal -->
|
|
<div x-data="{ open: false, statId: null, statDate: '', statCpu: '', statMemory: '', statDisk: '', statStatus: '' }"
|
|
@open-delete-stat-modal.window="open = true; statId = $event.detail.id; statDate = $event.detail.date; statCpu = $event.detail.cpu; statMemory = $event.detail.memory; statDisk = $event.detail.disk; statStatus = $event.detail.status">
|
|
<!-- Modal Backdrop -->
|
|
<div x-cloak x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
style="display: none;">
|
|
</div>
|
|
<!-- Modal -->
|
|
<div x-cloak x-show="open"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@click.self="open = false"
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
style="display: none;">
|
|
<div class="relative bg-background-secondary ring-1 ring-neutral/40 rounded-2xl shadow-xl max-w-md w-full mx-4">
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-danger/20 flex items-center justify-center">
|
|
<x-ri-delete-bin-line class="size-5 text-danger" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold tracking-tight">Drop this sample?</h3>
|
|
<p class="text-sm text-base/70">Removal is permanent.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4 p-4 bg-background rounded-xl ring-1 ring-neutral/30">
|
|
<p class="text-sm text-base/70 mb-2">Snapshot on the chopping block:</p>
|
|
<div class="space-y-1 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-base/70">Captured:</span>
|
|
<span class="font-semibold" x-text="statDate"></span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-base/70">CPU load:</span>
|
|
<span class="font-semibold"><span x-text="statCpu"></span>%</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-base/70">RAM load:</span>
|
|
<span class="font-semibold"><span x-text="statMemory"></span>%</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-base/70">Disk load:</span>
|
|
<span class="font-semibold"><span x-text="statDisk"></span>%</span>
|
|
</div>
|
|
<template x-if="statStatus">
|
|
<div class="flex justify-between">
|
|
<span class="text-base/70">Guest state:</span>
|
|
<span class="font-semibold">
|
|
<span class="px-2 py-1 rounded text-xs font-semibold"
|
|
:class="statStatus === 'running' ? 'bg-success/20 text-success' : 'bg-inactive/20 text-inactive'"
|
|
x-text="statStatus.charAt(0).toUpperCase() + statStatus.slice(1)"></span>
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex gap-3 justify-end">
|
|
<x-button.secondary @click="open = false">
|
|
Keep
|
|
</x-button.secondary>
|
|
<x-button.danger @click="$wire.deleteStatistic(statId); open = false">
|
|
<x-loading target="deleteStatistic" />
|
|
<div wire:loading.remove wire:target="deleteStatistic">
|
|
Remove
|
|
</div>
|
|
<div wire:loading wire:target="deleteStatistic">
|
|
Removing…
|
|
</div>
|
|
</x-button.danger>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Clear Statistics Confirmation Modal -->
|
|
<div x-data="{ showClearStatisticsModal: @entangle('showClearStatisticsModal') }">
|
|
<!-- Modal Backdrop -->
|
|
<div x-cloak x-show="showClearStatisticsModal"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="$wire.closeClearStatisticsModal()"
|
|
@keydown.escape.window="$wire.closeClearStatisticsModal()"
|
|
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
style="display: none;">
|
|
</div>
|
|
<!-- Modal -->
|
|
<div x-cloak x-show="showClearStatisticsModal"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@click.self="$wire.closeClearStatisticsModal()"
|
|
@keydown.escape.window="$wire.closeClearStatisticsModal()"
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
style="display: none;">
|
|
<div class="relative bg-background-secondary ring-1 ring-neutral/40 rounded-2xl shadow-xl max-w-md w-full mx-4">
|
|
<div class="p-6">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-danger/20 flex items-center justify-center">
|
|
<x-ri-alert-line class="size-5 text-danger" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold tracking-tight">Wipe the entire archive?</h3>
|
|
<p class="text-sm text-base/70">Every stored sample for this VM disappears.</p>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 p-4 bg-background rounded-xl ring-1 ring-neutral/30 text-sm text-base/80 space-y-2">
|
|
<p>Scheduled captures and manual pins are removed together.</p>
|
|
<p class="text-base/60">There is no recycle bin.</p>
|
|
</div>
|
|
<div class="flex gap-3 justify-end">
|
|
<x-button.secondary wire:click="closeClearStatisticsModal">
|
|
Abort
|
|
</x-button.secondary>
|
|
<x-button.danger wire:click="clearStatisticsHistory">
|
|
<x-loading target="clearStatisticsHistory" />
|
|
<div wire:loading.remove wire:target="clearStatisticsHistory">
|
|
Purge everything
|
|
</div>
|
|
<div wire:loading wire:target="clearStatisticsHistory">
|
|
Purging…
|
|
</div>
|
|
</x-button.danger>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Export Info Modal -->
|
|
<div x-data="{ showExportInfoModal: @entangle('showExportInfoModal') }">
|
|
<!-- Modal Backdrop -->
|
|
<div x-cloak x-show="showExportInfoModal"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="$wire.closeExportInfoModal()"
|
|
@keydown.escape.window="$wire.closeExportInfoModal()"
|
|
class="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
|
|
style="display: none;">
|
|
</div>
|
|
<!-- Modal -->
|
|
<div x-cloak x-show="showExportInfoModal"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@click.self="$wire.closeExportInfoModal()"
|
|
@keydown.escape.window="$wire.closeExportInfoModal()"
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4"
|
|
style="display: none;">
|
|
<div class="relative bg-background-secondary ring-1 ring-neutral/40 rounded-2xl shadow-xl max-w-md w-full mx-4">
|
|
<div class="p-6 space-y-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-info/20 flex items-center justify-center">
|
|
<x-ri-information-line class="size-5 text-info" />
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold tracking-tight">CSV needs data</h3>
|
|
<p class="text-sm text-base/70">Populate the grid first, then retry the download.</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm text-base/80">{{ $exportInfoMessage }}</p>
|
|
<div class="flex justify-end gap-3">
|
|
<x-button.secondary wire:click="closeExportInfoModal">
|
|
Got it
|
|
</x-button.secondary>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|