83 lines
5.5 KiB
PHP
83 lines
5.5 KiB
PHP
<div class="bg-white rounded-lg shadow-lg p-6 mb-6" x-data="snapshotTable()" x-init="fetchSnapshots()">
|
|
<h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
|
|
<svg class="w-5 h-5 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
{{ __('Danh sách Snapshot') }}
|
|
</h2>
|
|
<div x-show="loading" class="text-center py-6">
|
|
<span class="text-gray-500 text-sm">{{ __('Đang tải snapshot...') }}</span>
|
|
</div>
|
|
<template x-if="!loading && snapshots.length > 0">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 mt-2">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Tên</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Mô tả</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Ngày tạo
|
|
</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Trạng thái
|
|
</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Dung lượng
|
|
</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Thao tác
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template x-for="snap in snapshots" :key="snap.name">
|
|
<tr>
|
|
<td class="px-4 py-2 text-sm text-gray-700" x-text="snap.name"></td>
|
|
<td class="px-4 py-2 text-sm text-gray-700" x-text="snap.description"></td>
|
|
<td class="px-4 py-2 text-sm text-gray-700" x-text="snap.created"></td>
|
|
<td class="px-4 py-2 text-sm text-gray-700">
|
|
<span x-text="snap.is_current ? 'Hiện tại' : ''"></span>
|
|
</td>
|
|
<td class="px-4 py-2 text-sm text-gray-700" x-text="formatSize(snap.size_gb, snap.size_mb)">
|
|
</td>
|
|
<td class="px-4 py-2 text-sm text-gray-700">
|
|
<div class="flex space-x-2">
|
|
<button @click="revertSnapshot(snap.name)"
|
|
class="inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
|
|
:disabled="snap.is_current"
|
|
:class="snap.is_current ? 'opacity-50 cursor-not-allowed' : ''"
|
|
title="Khôi phục về snapshot này">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6">
|
|
</path>
|
|
</svg>
|
|
Revert
|
|
</button>
|
|
|
|
<button @click="deleteSnapshot(snap.name)"
|
|
class="inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors"
|
|
:disabled="snap.is_current"
|
|
:class="snap.is_current ? 'opacity-50 cursor-not-allowed' : ''"
|
|
title="Xóa snapshot này">
|
|
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor"
|
|
viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
|
|
</path>
|
|
</svg>
|
|
Xóa
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
<div x-cloak x-show="!loading && snapshots.length === 0" class="text-center py-6 text-gray-400">
|
|
{{ __('Không có snapshot nào.') }}
|
|
</div>
|
|
</div>
|