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