deployments

app/Http/Livewire/Project/Application/Deployments.php

@@ -10,16 +10,32 @@ class Deployments extends Component
     public int $application_id;
     public $deployments = [];
     public string $current_url;
+    public int $skip = 0;
+    public int $default_take = 8;
+    public bool $show_next = true;
+
     public function mount()
     {
         $this->current_url = url()->current();
     }
-    public function reloadDeployments()
+    public function reload_deployments()
     {
-        $this->loadDeployments();
+        $this->load_deployments();
     }
-    public function loadDeployments()
+    public function load_deployments(int|null $take = null)
     {
-        $this->deployments = Application::find($this->application_id)->deployments();
+        ray('Take' . $take);
+        if ($take) {
+            ray('Take is not null');
+            $this->skip = $this->skip + $take;
+        }
+
+        $take = $this->default_take;
+        $this->deployments = Application::find($this->application_id)->deployments($this->skip, $take);
+
+        if (count($this->deployments) !== 0 && count($this->deployments) < $take) {
+            $this->show_next = false;
+            return;
+        }
     }
 }

app/Models/Application.php

@@ -144,9 +144,10 @@ class Application extends BaseModel
         return $this->morphMany(LocalPersistentVolume::class, 'resource');
     }
 
-    public function deployments()
+    public function deployments(int $skip = 0, int $take = 10)
     {
-        return ApplicationDeploymentQueue::where('application_id', $this->id)->orderBy('created_at', 'desc')->get();
+        ray('Skip ' . $skip . ' Take ' . $take);
+        return ApplicationDeploymentQueue::where('application_id', $this->id)->orderBy('created_at', 'desc')->skip($skip)->take($take)->get();
     }
     public function get_deployment(string $deployment_uuid)
     {

resources/views/livewire/project/application/deployments.blade.php

@@ -1,7 +1,15 @@
- <div class="flex flex-col gap-2 pt-2" wire:init='loadDeployments' wire:poll.5000ms='reloadDeployments'>
+ <div class="flex flex-col gap-2 pt-2 " wire:init='load_deployments'
-     <div wire:loading wire:target='loadDeployments'>
+     @if ($skip == 0) wire:poll.5000ms='reload_deployments' @endif>
-         <x-loading />
+     <div>
+         <h3>Actions</h3>
+         @if ($show_next)
+             <x-forms.button isHighlighted wire:click="load_deployments({{ $default_take }})">Load More
+                 Deployments</x-forms.button>
+         @else
+             <x-forms.button disabled>No More Deployments</x-forms.button>
+         @endif
      </div>
+     <h3>Deployments</h3>
      @foreach ($deployments as $deployment)
          <a @class([
              'bg-coolgray-200 p-2 border-l border-dashed transition-colors hover:no-underline',
@@ -19,6 +27,10 @@
      @endif
      class="hover:no-underline">
      <div class="flex flex-col justify-start">
+         <div>
+             {{ $deployment->deployment_uuid }} <span class="text-sm text-warning">></span>
+             {{ $deployment->status }}
+         </div>
          @if (data_get($deployment, 'pull_request_id'))
              <div>
                  Pull Request #{{ data_get($deployment, 'pull_request_id') }}
@@ -27,29 +39,57 @@
                  @endif
              </div>
          @elseif (data_get($deployment, 'is_webhook'))
-             <div>Webhook (commit
+             <div>Webhook (sha
                  @if (data_get($deployment, 'commit'))
                      {{ data_get($deployment, 'commit') }})
                  @else
                      HEAD)
                  @endif
              </div>
-         @else
-             <div>Commit:
-                 @if (data_get($deployment, 'commit'))
-                     {{ data_get($deployment, 'commit') }}
-                 @else
-                     HEAD
          @endif
-             </div>
+
-         @endif
+         <div class="flex flex-col" x-data="elapsedTime('{{ $deployment->deployment_uuid }}', '{{ $deployment->status }}', '{{ $deployment->created_at }}', '{{ $deployment->updated_at }}')">
-         <div>
+             <div>Finished <span x-text="measure_since_started()">0s</span> in <span class="font-bold text-white"
-             {{ $deployment->status }}
+                     x-text="measure_finished_time()">0s</span></div>
-         </div>
-         <div>
-             {{ $deployment->created_at }}
          </div>
      </div>
      </a>
      @endforeach
+
+     <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
+     <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/utc.js"></script>
+     <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/relativeTime.js"></script>
+     <script>
+         document.addEventListener('alpine:init', () => {
+             let timers = {};
+
+             dayjs.extend(window.dayjs_plugin_utc);
+             dayjs.extend(window.dayjs_plugin_relativeTime);
+
+             Alpine.data('elapsedTime', (uuid, status, created_at, updated_at) => ({
+                 finished_time: '0s',
+                 started_time: '0s',
+                 init() {
+                     if (timers[uuid]) {
+                         clearInterval(timers[uuid]);
+                     }
+                     if (status === 'in_progress') {
+                         timers[uuid] = setInterval(() => {
+                             this.finished_time = dayjs().diff(dayjs.utc(created_at),
+                                 'second') + 's'
+                         }, 1000);
+                     } else {
+                         let seconds = dayjs.utc(updated_at).diff(dayjs.utc(created_at), 'second')
+                         this.finished_time = seconds + 's';
+                     }
+                 },
+                 measure_finished_time() {
+                     return this.finished_time;
+                 },
+                 measure_since_started() {
+                     return dayjs.utc(created_at).fromNow();
+                 }
+             }))
+         })
+     </script>
  </div>