Add Proxmox server specifications display to service view

This commit is contained in:
2025-12-06 12:28:32 -05:00
parent 96f48014fe
commit ed54245c4b
2 changed files with 73 additions and 1 deletions

View File

@@ -30,7 +30,7 @@ class Show extends Component
public function mount() public function mount()
{ {
// Attach Proxmox server (if any) so we can show hostname on the service page // Attach Proxmox server (if any) so we can show hostname on the service page
$this->proxmoxServer = ProxmoxServer::where('service_id', $this->service->id)->first(); $this->proxmoxServer = ProxmoxServer::with('os')->where('service_id', $this->service->id)->first();
// Only fetch the actions if the service is active // Only fetch the actions if the service is active
if ($this->service->status == Service::STATUS_ACTIVE) { if ($this->service->status == Service::STATUS_ACTIVE) {

View File

@@ -125,6 +125,78 @@
</div> </div>
</div> </div>
<!-- Server Specifications Card (Proxmox) -->
@if($proxmoxServer)
@php
$cores = $service->product->settings()->where('key', 'cores')->first()?->value;
$memory = $service->product->settings()->where('key', 'memory')->first()?->value;
$disk = $service->product->settings()->where('key', 'disk')->first()?->value;
$bandwidth = $service->product->settings()->where('key', 'bandwidth')->first()?->value;
@endphp
<div class="bg-gradient-to-br from-background/50 to-background/20 border border-neutral/20 rounded-2xl p-6 backdrop-blur-sm hover:shadow-lg transition-all duration-300">
<div class="flex items-center gap-3 mb-6">
<x-ri-cpu-line class="size-6 text-primary" />
<h3 class="uppercase font-black text-color-base text-sm tracking-wider">Server Specifications</h3>
</div>
<div class="space-y-4">
@if($cores)
<div class="flex items-center justify-between py-3 px-4 bg-background/50 rounded-xl">
<span class="text-color-muted text-sm font-medium flex items-center gap-2">
<x-ri-cpu-line class="size-4" /> CPU Cores
</span>
<span class="font-bold text-color-base">{{ $cores }} {{ $cores == 1 ? 'Core' : 'Cores' }}</span>
</div>
@endif
@if($memory)
<div class="flex items-center justify-between py-3 px-4 bg-background/50 rounded-xl">
<span class="text-color-muted text-sm font-medium flex items-center gap-2">
<x-ri-ram-2-line class="size-4" /> Memory
</span>
<span class="font-bold text-color-base">
@if($memory >= 1024)
{{ round($memory / 1024, 1) }} GB
@else
{{ $memory }} MB
@endif
</span>
</div>
@endif
@if($disk)
<div class="flex items-center justify-between py-3 px-4 bg-background/50 rounded-xl">
<span class="text-color-muted text-sm font-medium flex items-center gap-2">
<x-ri-hard-drive-2-line class="size-4" /> Storage
</span>
<span class="font-bold text-color-base">{{ $disk }} GB</span>
</div>
@endif
@if($bandwidth)
<div class="flex items-center justify-between py-3 px-4 bg-background/50 rounded-xl">
<span class="text-color-muted text-sm font-medium flex items-center gap-2">
<x-ri-speed-line class="size-4" /> Bandwidth
</span>
<span class="font-bold text-color-base">
@if($bandwidth == 0 || $bandwidth == -1)
Unlimited
@elseif($bandwidth >= 1000)
{{ round($bandwidth / 1000, 1) }} TB
@else
{{ $bandwidth }} GB
@endif
</span>
</div>
@endif
@if($proxmoxServer->os)
<div class="flex items-center justify-between py-3 px-4 bg-background/50 rounded-xl">
<span class="text-color-muted text-sm font-medium flex items-center gap-2">
<x-ri-terminal-box-line class="size-4" /> Operating System
</span>
<span class="font-bold text-color-base">{{ $proxmoxServer->os->name }}</span>
</div>
@endif
</div>
</div>
@endif
<!-- Actions Card --> <!-- Actions Card -->
@if($service->cancellable || $service->upgradable || count($buttons) > 0) @if($service->cancellable || $service->upgradable || count($buttons) > 0)
<div class="bg-gradient-to-br from-background/50 to-background/20 border border-neutral/20 rounded-2xl p-6 backdrop-blur-sm hover:shadow-lg transition-all duration-300"> <div class="bg-gradient-to-br from-background/50 to-background/20 border border-neutral/20 rounded-2xl p-6 backdrop-blur-sm hover:shadow-lg transition-all duration-300">