97 lines
6.2 KiB
PHP
97 lines
6.2 KiB
PHP
@props(['invoice'])
|
|
|
|
<flux:modal name="snapshots" class="md:w-[48rem]" @close="$wire?.refresh && $wire.refresh()">
|
|
<div class="space-y-6" x-data="snapshotTable()" x-init="fetchSnapshots(true)">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<flux:heading size="lg">{{ __('Snapshot của máy ảo') }}</flux:heading>
|
|
<flux:text class="mt-1">{{ __('Xem, tạo mới, khôi phục hoặc xóa snapshot.') }}</flux:text>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<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">
|
|
{{ __('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.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>
|
|
{{ __('Khôi phục') }}
|
|
</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 class="border-t border-gray-200 pt-4"></div>
|
|
<div class="flex justify-end gap-2">
|
|
<flux:button size="sm" variant="ghost" icon="arrow-path" x-on:click="refreshSnapshots()">
|
|
{{ __('Tải lại') }}</flux:button>
|
|
<form method="POST" action="{{ route('service.create.snapshots') }}" id="snapshotForm">
|
|
@csrf
|
|
<input type="hidden" name="product_id" value="{{ $invoice->vm_id }}">
|
|
<flux:button size="sm" variant="primary" color="orange" type="submit"
|
|
onclick="handleSnapshotSubmit(event)">{{ __('Tạo snapshot') }}</flux:button>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</flux:modal>
|