mirror of
https://github.com/pelican-dev/panel.git
synced 2025-05-19 14:04:45 +02:00
Update Overview and Server List (#1151)
* Update Overview and Server List * Fix background on light mode
This commit is contained in:
Charles
GitHub
parent
c39c29e50b
commit
8d7eff13fb
@ -31,10 +31,6 @@ class ListServers extends ListRecords
|
||||
->searchable(['name']),
|
||||
]),
|
||||
])
|
||||
->contentGrid([
|
||||
'default' => 1,
|
||||
'md' => 2,
|
||||
])
|
||||
->recordUrl(fn (Server $server) => Console::getUrl(panel: 'server', tenant: $server))
|
||||
->emptyStateIcon('tabler-brand-docker')
|
||||
->emptyStateDescription('')
|
||||
|
||||
@ -4,7 +4,6 @@ namespace App\Filament\Server\Widgets;
|
||||
|
||||
use App\Enums\ContainerStatus;
|
||||
use App\Filament\Server\Components\SmallStatBlock;
|
||||
use App\Filament\Server\Components\StatBlock;
|
||||
use App\Models\Server;
|
||||
use Carbon\CarbonInterface;
|
||||
use Filament\Widgets\StatsOverviewWidget;
|
||||
@ -19,13 +18,12 @@ class ServerOverview extends StatsOverviewWidget
|
||||
protected function getStats(): array
|
||||
{
|
||||
return [
|
||||
StatBlock::make('Name', $this->server->name)
|
||||
->description($this->server->description)
|
||||
SmallStatBlock::make('Name', $this->server->name)
|
||||
->extraAttributes([
|
||||
'class' => 'overflow-x-auto',
|
||||
]),
|
||||
StatBlock::make('Status', $this->status()),
|
||||
StatBlock::make('Address', $this->server->allocation->address)
|
||||
SmallStatBlock::make('Status', $this->status()),
|
||||
SmallStatBlock::make('Address', $this->server->allocation->address)
|
||||
->extraAttributes([
|
||||
'class' => 'overflow-x-auto',
|
||||
]),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div
|
||||
class="grid grid-flow-row w-full p-3 rounded-lg shadow-sm overflow-hidden ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
|
||||
class="grid grid-flow-row w-full p-3 rounded-lg bg-white shadow-sm overflow-hidden ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
|
||||
<span>
|
||||
<span class="text-md font-medium text-gray-500 dark:text-gray-400">
|
||||
{{ $getLabel() }}
|
||||
|
||||
@ -13,55 +13,63 @@
|
||||
</style>
|
||||
</head>
|
||||
<div class="w-full">
|
||||
<!-- Wrapper for Positioning -->
|
||||
<div class="relative flex">
|
||||
<!-- Status Strip Outside the Box -->
|
||||
<div class="relative">
|
||||
<div
|
||||
class="absolute left-0 top-1 bottom-0 w-1 rounded-lg"
|
||||
style="background-color: {{ $server->condition->getColor(true) }};">
|
||||
</div>
|
||||
|
||||
<!-- Card Component -->
|
||||
<div class="flex-1 bg-gray-800 dark:text-white rounded-lg overflow-hidden p-3">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center mb-5 gap-2">
|
||||
<x-filament::icon-button
|
||||
:icon="$server->condition->getIcon()"
|
||||
:color="$server->condition->getColor()"
|
||||
:tooltip="$server->condition->getLabel()"
|
||||
size="xl"
|
||||
/>
|
||||
<h2 class="text-xl font-bold">
|
||||
{{ $server->name }}
|
||||
<span class="dark:text-gray-400">({{ $server->formatResource('uptime', type: ServerResourceType::Time) }})</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="bg-gray-800 dark:text-white overflow-hidden p-2">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<x-filament::icon-button
|
||||
:icon="$server->condition->getIcon()"
|
||||
:color="$server->condition->getColor()"
|
||||
:tooltip="$server->condition->getLabel()"
|
||||
size="xl"
|
||||
/>
|
||||
<h2 class="text-2xl font-semibold p-2">
|
||||
{{ $server->name }}
|
||||
<span class="dark:text-gray-400">
|
||||
({{ $server->formatResource('uptime', type: ServerResourceType::Time) }})
|
||||
</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Resource Usage -->
|
||||
<div class="flex justify-between text-center">
|
||||
<div>
|
||||
<p class="text-sm dark:text-gray-400">CPU</p>
|
||||
<p class="text-md font-semibold">{{ $server->formatResource('cpu_absolute', type: ServerResourceType::Percentage) }}</p>
|
||||
<hr class="p-0.5">
|
||||
<p class="text-xs dark:text-gray-400">{{ $server->formatResource('cpu', type: ServerResourceType::Percentage, limit: true) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm dark:text-gray-400">Memory</p>
|
||||
<p class="text-md font-semibold">{{ $server->formatResource('memory_bytes') }}</p>
|
||||
<hr class="p-0.5">
|
||||
<p class="text-xs dark:text-gray-400">{{ $server->formatResource('memory', limit: true) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm dark:text-gray-400">Disk</p>
|
||||
<p class="text-md font-semibold">{{ $server->formatResource('disk_bytes') }}</p>
|
||||
<hr class="p-0.5">
|
||||
<p class="text-xs dark:text-gray-400">{{ $server->formatResource('disk', limit: true) }}</p>
|
||||
</div>
|
||||
<div class="hidden sm:block">
|
||||
<p class="text-sm dark:text-gray-400">Network</p>
|
||||
<p class="text-md font-semibold">{{ $server->allocation->address }} </p>
|
||||
<div class="flex w-1/2 justify-between text-center">
|
||||
<div class="w-1/4">
|
||||
<p class="text-md dark:text-gray-400">CPU</p>
|
||||
<hr class="p-0.5">
|
||||
<p class="text-md font-semibold">
|
||||
{{ $server->formatResource('cpu_absolute', type: ServerResourceType::Percentage) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-1/4">
|
||||
<p class="text-md dark:text-gray-400">Memory</p>
|
||||
<hr class="p-0.5">
|
||||
<p class="text-md font-semibold">
|
||||
{{ $server->formatResource('memory_bytes') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-1/4 hidden sm:block">
|
||||
<p class="text-md dark:text-gray-400">Disk</p>
|
||||
<hr class="p-0.5">
|
||||
<p class="text-md font-semibold">
|
||||
{{ $server->formatResource('disk_bytes') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="w-1/4 hidden sm:block">
|
||||
<p class="text-md dark:text-gray-400">Network</p>
|
||||
<hr class="p-0.5">
|
||||
<p class="text-md font-semibold">
|
||||
{{ $server->allocation->address }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user