feat(home): Data gets refreshed every 10s

Status-Page · Mar 19, 2021 · f208af8 · f208af8
1 parent d2a00ec
commit f208af8
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 30 deletions.
diff --git a/resources/views/home/components.blade.php b/resources/views/home/components.blade.php
@@ -6,7 +6,7 @@
     return ComponentGroup::getGroups();
 });
 ?>
-<div class="mt-12">
+<div class="mt-12" wire:poll.10s wire:poll.keep-alive>
     @foreach($component_groups as $group)
         <div x-data="{ open{{ $group->id }}: {{ $group->shouldExpand() }} }" class="shadow sm:rounded-md bg-white text-black dark:bg-discordBlack dark:text-white">
             <div class="px-4 py-5 sm:px-6 mt-2 border-b border-gray-200 dark:border-discordDark cursor-pointer" @click="open{{ $group->id }} = !open{{ $group->id }}">

diff --git a/resources/views/home/incidents.blade.php b/resources/views/home/incidents.blade.php
@@ -24,7 +24,7 @@
 });
 
 ?>
-<div class="mt-6">
+<div class="mt-6" wire:poll.10s wire:poll.keep-alive>
     @if($incidents->count() > 0)
         @foreach($incidents as $incident)
             <div class="bg-white text-black dark:bg-bodyBG dark:text-white border-{{ $incident->getImpactColor() }} border-2 rounded-md shadow mb-2">

diff --git a/resources/views/home/metrics.blade.php b/resources/views/home/metrics.blade.php
@@ -5,11 +5,6 @@
                 Metrics
             </h2>
             <div class="space-x-2 flex items-center">
-                <div wire:loading>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6 animate-spin">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                    </svg>
-                </div>
                 <x-input.group borderless paddingless for="lastHours" label="Last" inline="true">
                     <x-input.select wire:model="lastHours" id="lastHours" class="rounded-md">
                         <option value="24">1 Day</option>

diff --git a/resources/views/home/past-incidents.blade.php b/resources/views/home/past-incidents.blade.php
@@ -1,4 +1,4 @@
-<div class="mt-12">
+<div class="mt-12" wire:poll.10s wire:poll.keep-alive>
     <h2 class="text-2xl">
         Past Incidents
     </h2>

diff --git a/resources/views/home/upcoming-maintenances.blade.php b/resources/views/home/upcoming-maintenances.blade.php
@@ -4,30 +4,32 @@
 
 $upcoming_maintenances = Incident::query()->where([['status', '=', 0], ['type', '=', 1], ['visibility', '=', true]])->get();
 ?>
-@if($upcoming_maintenances->count() > 0)
-    <div class="mt-12">
-        <h2 class="text-2xl">
-            Scheduled Maintenance
-        </h2>
-        @foreach($upcoming_maintenances as $maintenance)
-            <div class="w-full">
-                <div class="mt-4 text-xl w-full">
-                    <span class="font-bold text-{{ $maintenance->getImpactColor() }}">{{ $maintenance->title }}</span> <span class="float-right text-sm text-gray-400">Scheduled for: {{ $maintenance->scheduled_at }}</span>
+<div wire:poll.10s wire:poll.keep-alive>
+    @if($upcoming_maintenances->count() > 0)
+        <div class="mt-12">
+            <h2 class="text-2xl">
+                Scheduled Maintenance
+            </h2>
+            @foreach($upcoming_maintenances as $maintenance)
+                <div class="w-full">
+                    <div class="mt-4 text-xl w-full">
+                        <span class="font-bold text-{{ $maintenance->getImpactColor() }}">{{ $maintenance->title }}</span> <span class="float-right text-sm text-gray-400">Scheduled for: {{ $maintenance->scheduled_at }}</span>
+                    </div>
                 </div>
-            </div>
-            <div class="my-2 w-full border-t border-gray-300"></div>
-            <div class="mb-12">
-                @foreach($maintenance->incidentUpdates()->orderBy('id', 'desc')->get() as $update)
-                    <div class="mb-2">
-                        <span class="font-bold">{{ $update->getUpdateType() }}</span> - <span class="markdown-content">{!! \Illuminate\Support\Str::markdown($update->text) !!}<br>
+                <div class="my-2 w-full border-t border-gray-300"></div>
+                <div class="mb-12">
+                    @foreach($maintenance->incidentUpdates()->orderBy('id', 'desc')->get() as $update)
+                        <div class="mb-2">
+                            <span class="font-bold">{{ $update->getUpdateType() }}</span> - <span class="markdown-content">{!! \Illuminate\Support\Str::markdown($update->text) !!}<br>
                         <span class="text-gray-400">{{ $update->updated_at }} by {{ $update->getReporter()->name }}</span>
-                    </div>
-                @endforeach
-                <span class="text-sm text-gray-400">Affected Components: {{ $maintenance->components()->get()->map(function ($component){
+                        </div>
+                    @endforeach
+                    <span class="text-sm text-gray-400">Affected Components: {{ $maintenance->components()->get()->map(function ($component){
                                                                                                     return $component->group()->name.' - '.$component->name;
                                                                                                 })->implode('; ') }}
                             </span>
-            </div>
-        @endforeach
-    </div>
-@endif
+                </div>
+            @endforeach
+        </div>
+    @endif
+</div>
diff --git a/resources/views/livewire/home/home.blade.php b/resources/views/livewire/home/home.blade.php
@@ -6,6 +6,13 @@
                     <h1 class="inline">{{ config('app.name') }}</h1>
                 </div>
                 <div class="space-x-2 flex items-center">
+                    <div>
+                        <div wire:loading>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6 animate-spin">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                            </svg>
+                        </div>
+                    </div>
                     @auth()
                         <div>
                             <a href="{{ route('dashboard') }}" target="_blank">