update node health heart

app/Filament/Components/Tables/Columns/NodeHealthColumn.php

@@ -2,12 +2,12 @@
 
 namespace App\Filament\Components\Tables\Columns;
 
+use Filament\Support\Enums\Alignment;
 use Filament\Tables\Columns\IconColumn;
+use Illuminate\Support\Facades\Blade;
 
 class NodeHealthColumn extends IconColumn
 {
-    protected string $view = 'livewire.columns.version-column';
-
     protected function setUp(): void
     {
         parent::setUp();
@@ -16,4 +16,29 @@ class NodeHealthColumn extends IconColumn
 
         $this->alignCenter();
     }
+
+    public function toEmbeddedHtml(): string
+    {
+        $alignment = $this->getAlignment();
+
+        $attributes = $this->getExtraAttributeBag()
+            ->class([
+                'fi-ta-icon',
+                'fi-inline' => $this->isInline(),
+                'fi-ta-icon-has-line-breaks' => $this->isListWithLineBreaks(),
+                'fi-wrapped' => $this->canWrap(),
+                ($alignment instanceof Alignment) ? "fi-align-{$alignment->value}" : (is_string($alignment) ? $alignment : ''),
+            ])
+            ->toHtml();
+
+        // TODO: poll every 10 secs
+        return Blade::render(<<<'BLADE'
+            <div <?= $attributes ?>>
+                @livewire('node-system-information', ['node' => $record, 'lazy' => true])
+            </div>
+        BLADE, [
+            'attributes' => $attributes,
+            'record' => $this->getRecord(),
+        ]);
+    }
 }

app/Livewire/NodeSystemInformation.php

@@ -3,29 +3,48 @@
 namespace App\Livewire;
 
 use App\Models\Node;
-use Illuminate\View\View;
+use Filament\Support\Enums\IconSize;
+use Filament\Tables\View\Components\Columns\IconColumnComponent\IconComponent;
+use Illuminate\View\ComponentAttributeBag;
+use Livewire\Attributes\Locked;
 use Livewire\Component;
 
+use function Filament\Support\generate_icon_html;
+
 class NodeSystemInformation extends Component
 {
+    #[Locked]
     public Node $node;
 
-    public string $sizeClasses;
+    public function render(): string
-
-    public function render(): View
     {
-        return view('livewire.node-system-information');
+        $systemInformation = $this->node->systemInformation();
+        $exception = $systemInformation['exception'] ?? null;
+        $version = $systemInformation['version'] ?? null;
+
+        $tooltip = $exception ? 'Error connecting to node!<br>Check browser console for details.' : $version;
+
+        $icon = 'tabler-heart' . ($exception ? '-off' : 'beat');
+        $color = $exception ? 'danger' : 'success';
+
+        // TODO: add exception to browser console
+        return generate_icon_html($icon, attributes: (new ComponentAttributeBag())
+            ->merge([
+                'x-tooltip' => '{
+            content: "' . $tooltip . '",
+            theme: $store.theme,
+            allowHTML: true,
+            placement: "bottom",
+        }',
+            ], escape: false)
+            ->color(IconComponent::class, $color), size: IconSize::Large)
+            ->toHtml();
     }
 
     public function placeholder(): string
     {
-        return <<<'HTML'
+        return generate_icon_html('tabler-heart-question', attributes: (new ComponentAttributeBag())
-        <div>
+            ->color(IconComponent::class, 'warning'), size: IconSize::Large)
-            <x-filament::icon
+            ->toHtml();
-                :icon="'tabler-heart-question'"
-                @class(['fi-ta-icon-item', $sizeClasses, 'fi-color-custom text-custom-500 dark:text-custom-400', 'fi-color-warning'])
-            />
-        </div>
-        HTML;
     }
 }

resources/views/livewire/columns/version-column.blade.php

@@ -1,31 +0,0 @@
-@php
-    use Filament\Support\Enums\IconSize;
-
-    $node = $getRecord();
-    $size = $getSize($node) ?? IconSize::Large;
-
-    $sizeClasses = match ($size) {
-        IconSize::ExtraSmall, 'xs' => 'fi-ta-icon-item-size-xs h-3 w-3',
-        IconSize::Small, 'sm' => 'fi-ta-icon-item-size-sm h-4 w-4',
-        IconSize::Medium, 'md' => 'fi-ta-icon-item-size-md h-5 w-5',
-        IconSize::Large, 'lg' => 'fi-ta-icon-item-size-lg h-6 w-6',
-        IconSize::ExtraLarge, 'xl' => 'fi-ta-icon-item-size-xl h-7 w-7',
-        IconSize::TwoExtraLarge, '2xl' => 'fi-ta-icon-item-size-2xl h-8 w-8',
-        default => $size,
-    }
-@endphp
-
-<div
-    {{
-        $attributes
-            ->merge($getExtraAttributes(), escape: false)
-            ->class([
-                'fi-ta-icon flex gap-1.5',
-                'flex-wrap' => $canWrap(),
-                'px-3 py-4' => ! $isInline(),
-                'flex-col' => $isListWithLineBreaks(),
-            ])
-    }}
->
-    @livewire('node-system-information', ['node' => $node, 'lazy' => true, 'sizeClasses' => $sizeClasses])
-</div>

resources/views/livewire/node-system-information.blade.php

@@ -1,29 +0,0 @@
-<div wire:poll.10s>
-    @php
-        $exception = $node->systemInformation()['exception'] ?? null;
-        $version = $node->systemInformation()['version'] ?? null;
-        $content = $exception ? 'Error connecting to node!<br>Check browser console for details.' : $version;
-        $icon = 'tabler-heart' . ($exception ? '-off' : 'beat');
-        $animated = $exception ? '' : 'animate-pulse';
-        $condition = $exception ? 'danger' : 'success';
-        $class = ['fi-ta-icon-item', $sizeClasses, 'fi-color-custom text-custom-500 dark:text-custom-400', 'fi-color-'.$condition, $animated];
-    @endphp
-    <x-filament::icon
-        x-tooltip="{
-                content: '{{ $content }}',
-                theme: $store.theme,
-                allowHTML: true,
-                placement: 'bottom',
-            }"
-        :icon='$icon'
-        @class($class)
-    />
-    @if($exception)
-        @script
-        <script>
-            console.error('{{ $exception }} ');
-        </script>
-        @endscript
-    @endif
-</div>
-