fix(ui): update database control UI to check server functionality before displaying actions

This commit is contained in:
Andras Bacsai
2025-01-24 11:14:55 +01:00
parent 31ec952ca3
commit db8f0de8a3

View File

@@ -34,72 +34,79 @@
</a> </a>
@endif @endif
</nav> </nav>
<div class="flex flex-wrap gap-2 items-center"> @if ($database->destination->server->isFunctional())
@if (!str($database->status)->startsWith('exited')) <div class="flex flex-wrap gap-2 items-center">
<x-modal-confirmation title="Confirm Database Restart?" buttonTitle="Restart" submitAction="restart" @if (!str($database->status)->startsWith('exited'))
:actions="[ <x-modal-confirmation title="Confirm Database Restart?" buttonTitle="Restart" submitAction="restart"
'This database will be unavailable during the restart.', :actions="[
'If the database is currently in use data could be lost.', 'This database will be unavailable during the restart.',
]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Restart Database" 'If the database is currently in use data could be lost.',
:dispatchEvent="true" dispatchEventType="restartEvent"> ]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Restart Database"
<x-slot:button-title> :dispatchEvent="true" dispatchEventType="restartEvent">
<svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <x-slot:button-title>
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
stroke-width="2"> xmlns="http://www.w3.org/2000/svg">
<path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" /> <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
<path d="M20 4v5h-5" /> stroke-width="2">
</g> <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
</svg> <path d="M20 4v5h-5" />
Restart </g>
</x-slot:button-title> </svg>
</x-modal-confirmation> Restart
<x-modal-confirmation title="Confirm Database Stopping?" buttonTitle="Stop" submitAction="stop" </x-slot:button-title>
:checkboxes="$checkboxes" :actions="[ </x-modal-confirmation>
'This database will be stopped.', <x-modal-confirmation title="Confirm Database Stopping?" buttonTitle="Stop" submitAction="stop"
'If the database is currently in use data could be lost.', :checkboxes="$checkboxes" :actions="[
'All non-persistent data of this database (containers, networks, unused images) will be deleted (don\'t worry, no data is lost and you can start the database again).', 'This database will be stopped.',
]" :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" 'If the database is currently in use data could be lost.',
step2ButtonText="Stop Database" :dispatchEvent="true" dispatchEventType="stopEvent"> 'All non-persistent data of this database (containers, networks, unused images) will be deleted (don\'t worry, no data is lost and you can start the database again).',
<x-slot:button-title> ]" :confirmWithText="false" :confirmWithPassword="false"
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24" step1ButtonText="Continue" step2ButtonText="Stop Database" :dispatchEvent="true"
stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" dispatchEventType="stopEvent">
<x-slot:button-title>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
</path>
<path
d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
</path>
</svg>
Stop
</x-slot:button-title>
</x-modal-confirmation>
@else
<button @click="$wire.dispatch('startEvent')" class="gap-2 button">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
stroke-linejoin="round"> stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z"> <path d="M7 4v16l13 -8z" />
</path>
<path d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
</path>
</svg> </svg>
Stop Start
</x-slot:button-title> </button>
</x-modal-confirmation> @endif
@else @script
<button @click="$wire.dispatch('startEvent')" class="gap-2 button"> <script>
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" $wire.$on('startEvent', () => {
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" window.dispatchEvent(new CustomEvent('startdatabase'));
stroke-linejoin="round"> $wire.$call('start');
<path stroke="none" d="M0 0h24v24H0z" fill="none" /> });
<path d="M7 4v16l13 -8z" /> $wire.$on('stopEvent', () => {
</svg> $wire.$dispatch('info', 'Stopping database.');
Start $wire.$call('stop');
</button> });
@endif $wire.$on('restartEvent', () => {
@script $wire.$dispatch('info', 'Restarting database.');
<script> $wire.$call('restart');
$wire.$on('startEvent', () => { });
window.dispatchEvent(new CustomEvent('startdatabase')); </script>
$wire.$call('start'); @endscript
}); </div>
$wire.$on('stopEvent', () => { @else
$wire.$dispatch('info', 'Stopping database.'); <div class="text-error">Underlying server is not functional.</div>
$wire.$call('stop'); @endif
});
$wire.$on('restartEvent', () => {
$wire.$dispatch('info', 'Restarting database.');
$wire.$call('restart');
});
</script>
@endscript
</div>
</div> </div>
</nav> </nav>