mostly css

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

@@ -39,9 +39,9 @@ class Previews extends Component
     {
         ['rate_limit_remaining' => $rate_limit_remaining, 'data' => $data] = get_from_git_api($this->application->source, "/repos/{$this->application->git_repository}/pulls");
         $this->rate_limit_remaining = $rate_limit_remaining;
-        $this->pull_requests = $data;
+        $this->pull_requests = $data->sortBy('number')->values();
     }
-    public function deploy(int $pull_request_id)
+    public function deploy(int $pull_request_id, string|null $pull_request_html_url)
     {
         try {
             $this->set_deployment_uuid();
@@ -50,6 +50,7 @@ class Previews extends Component
                 ApplicationPreview::create([
                     'application_id' => $this->application->id,
                     'pull_request_id' => $pull_request_id,
+                    'pull_request_html_url' => $pull_request_html_url
                 ]);
             }
             queue_application_deployment(
@@ -58,6 +59,11 @@ class Previews extends Component
                 force_rebuild: true,
                 pull_request_id: $pull_request_id,
             );
+            return redirect()->route('project.application.deployments', [
+                'project_uuid' => $this->parameters['project_uuid'],
+                'application_uuid' => $this->parameters['application_uuid'],
+                'environment_name' => $this->parameters['environment_name'],
+            ]);
         } catch (\Throwable $th) {
             return general_error_handler($th, $this);
         }

app/Models/ApplicationPreview.php

@@ -7,6 +7,7 @@ class ApplicationPreview extends BaseModel
     protected $fillable = [
         'uuid',
         'pull_request_id',
+        'pull_request_html_url',
         'fqdn',
         'status',
         'application_id',

database/migrations/2023_03_27_081718_create_application_previews_table.php

@@ -15,6 +15,7 @@ return new class extends Migration
             $table->id();
             $table->string('uuid')->unique();
             $table->integer('pull_request_id');
+            $table->string('pull_request_html_url');
 
             $table->string('fqdn')->unique()->nullable();
             $table->string('status')->default('exited');

resources/css/app.css

@@ -40,10 +40,10 @@ select {
     @apply text-warning opacity-100;
 }
 button[type="button"] {
-    @apply btn btn-xs bg-coolgray-200 no-animation normal-case text-white rounded-none;
+    @apply btn btn-xs mt-1 bg-coolgray-200 no-animation normal-case text-white rounded;
 }
 button[type="submit"] {
-    @apply btn btn-xs no-animation normal-case text-white btn-primary rounded-none;
+    @apply btn btn-xs mt-1 no-animation normal-case text-white btn-primary rounded;
 }
 button[isWarning] {
     @apply text-error;
@@ -74,7 +74,7 @@ a {
     @apply text-white;
 }
 .box {
-    @apply flex items-center justify-center text-sm rounded-none cursor-pointer h-14 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white p-2 hover:no-underline transition-colors;
+    @apply flex items-center justify-center text-sm rounded-none min-h-12 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white p-2 hover:no-underline transition-colors;
 }
 
 .main-menu {

resources/views/components/applications/navbar.blade.php

@@ -1,4 +1,4 @@
-<nav class="flex gap-4 py-2 border-b-2 border-solid border-coolgray-200">
+<nav class="flex items-center gap-4 py-2 border-b-2 border-solid border-coolgray-200">
     <a class="{{ request()->routeIs('project.application.configuration') ? 'text-white' : '' }}"
         href="{{ route('project.application.configuration', [
             'project_uuid' => Route::current()->parameters()['project_uuid'],
@@ -18,18 +18,18 @@
     <div class="flex-1"></div>
 
     <div class="dropdown dropdown-bottom">
-        <button tabindex="0"
-            class="flex items-center justify-center h-full text-white normal-case bg-transparent border-none rounded btn btn-xs no-animation">
+        <x-forms.button tabindex="0">
             Open
             <x-chevron-down />
-        </button>
+        </x-forms.button>
         <ul tabindex="0"
-            class="text-xs text-white normal-case rounded min-w-max dropdown-content menu bg-coolgray-200">
+            class="mt-1 text-xs text-white normal-case rounded min-w-max dropdown-content menu bg-coolgray-200">
             @if (data_get($application, 'fqdn'))
                 <li>
                     <a class="text-xs hover:no-underline hover:bg-coollabs" target="_blank"
                         href="{{ $application->fqdn }}">
                         {{ $application->fqdn }}
+                        <x-external-link />
                     </a>
                 </li>
             @endif
@@ -40,13 +40,16 @@
                             <a class="text-xs hover:no-underline hover:bg-coollabs" target="_blank"
                                 href="http://localhost:{{ explode(':', $port)[0] }}">Port
                                 {{ explode(':', $port)[0] }}
+                                <x-external-link />
                             </a>
                         </li>
                     @else
                         <li>
                             <a class="text-xs hover:no-underline hover:bg-coollabs" target="_blank"
                                 href="http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">Port
-                                {{ $port }}</a>
+                                {{ $port }}
+                                <x-external-link />
+                            </a>
                         </li>
                     @endif
                 @endforeach

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

@@ -1,5 +1,9 @@
 <div x-data="{ deleteApplication: false }">
-    <h2>Danger Zone</h2>
-    <x-naked-modal show="deleteApplication" />
-    <x-forms.button x-on:click.prevent="deleteApplication = true">Delete this application</x-forms.button>
+    <h2 class="pb-0">Danger Zone</h2>
+    <div class="text-sm">Woah. I hope you know what are you doing.</div>
+    <h3 class="pb-0">Delete Application</h3>
+    <div class="text-sm">This will stop your containers, delete all related data, etc. Beware! There is no coming back!
+    </div>
+    <x-naked-modal show="deleteApplication" />
+    <x-forms.button x-on:click.prevent="deleteApplication = true">Delete</x-forms.button>
 </div>

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

@@ -1,13 +1,12 @@
 <div class="flex items-center gap-2">
     @if ($application->status === 'running')
         <div class="dropdown dropdown-bottom">
-            <button tabindex="0"
-                class="flex items-center justify-center h-full text-white normal-case rounded-none bg-primary btn btn-xs hover:bg-primary no-animation">
+            <x-forms.button isHighlighted tabindex="0" class="">
                 Actions
                 <x-chevron-down />
-            </button>
+            </x-forms.button>
             <ul tabindex="0"
-                class="text-xs text-white normal-case rounded min-w-max dropdown-content menu bg-coolgray-200">
+                class="mt-1 text-xs text-white normal-case rounded min-w-max dropdown-content menu bg-coolgray-200">
                 <li>
                     <div class="hover:bg-coollabs" wire:click='deploy'>Restart</div>
                 </li>
@@ -21,13 +20,12 @@
         </div>
     @else
         <div class="dropdown dropdown-bottom">
-            <button tabindex="0"
-                class="flex items-center justify-center h-full text-white normal-case rounded-none bg-primary btn btn-xs hover:bg-primary no-animation">
+            <x-forms.button isHighlighted tabindex="0" class="">
                 Actions
                 <x-chevron-down />
-            </button>
+            </x-forms.button>
             <ul tabindex="0"
-                class="text-xs text-white normal-case rounded min-w-max dropdown-content menu bg-coolgray-200">
+                class="mt-1 text-xs text-white normal-case rounded min-w-max dropdown-content menu bg-coolgray-200">
                 <li>
                     <div class="hover:bg-coollabs" wire:click='deploy'>Deploy</div>
                 </li>

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

@@ -1,6 +1,7 @@
 <div>
-    <h2>Destination</h2>
-    <div>
+    <h2 class="pb-0">Destination</h2>
+    <div class="text-sm">The destination server / network where your application will be deployed to.</div>
+    <div class="py-4">
         <p>Server: {{ data_get($destination, 'server.name') }}</p>
         <p>Destination: {{ $destination->network }}</p>
     </div>

resources/views/livewire/project/application/environment-variable/all.blade.php

@@ -1,5 +1,10 @@
 <div class="flex flex-col gap-2">
-    <h2>Environment Variables</h2>
+    <div>
+        <h2 class="pb-0">Environment Variables</h2>
+        <div class="text-sm">Environment (secrets) configuration. You can set variables for your Preview Deployments as
+            well
+            here.</div>
+    </div>
     @forelse ($application->environment_variables as $env)
         <livewire:project.application.environment-variable.show wire:key="environment-{{ $env->id }}"
             :env="$env" />

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

@@ -1,13 +1,13 @@
 <div>
     <form wire:submit.prevent='submit' class="flex flex-col">
         <div class="flex gap-2">
-            <h2>General</h2>
+            <h2 class="pb-0">General</h2>
             <x-forms.button type="submit">
                 Save
             </x-forms.button>
         </div>
-        <x-forms.checkbox instantSave id="is_static" label="Static website?" />
-        <div class="flex flex-col gap-2 pb-4">
+        <div class="text-sm">General configuration for your application.</div>
+        <div class="flex flex-col gap-2 py-4">
             <div class="flex flex-col items-end gap-2 xl:flex-row">
                 <x-forms.input class="w-full" id="application.name" label="Name" required />
                 <x-forms.input placeholder="https://coolify.io" class="w-full" id="application.fqdn" label="Domains"
@@ -32,13 +32,15 @@
                 <option disabled value="docker">Docker</option>
                 <option disabled value="compose">Compose</option>
             </x-forms.select>
+            <x-forms.checkbox instantSave id="is_static" label="Static website?" />
             @if ($application->settings->is_static)
                 <x-forms.select id="application.static_image" label="Static Image" required>
                     <option value="nginx:alpine">nginx:alpine</option>
                     <option disabled value="apache:alpine">apache:alpine</option>
                 </x-forms.select>
             @endif
-            <div class="flex flex-col gap-2 pb-6 xl:flex-row">
+            <h3>Build</h3>
+            <div class="flex flex-col gap-2 xl:flex-row">
                 <x-forms.input placeholder="pnpm install" id="application.install_command" label="Install Command" />
                 <x-forms.input placeholder="pnpm build" id="application.build_command" label="Build Command" />
                 <x-forms.input placeholder="pnpm start" id="application.start_command" label="Start Command" />
@@ -53,6 +55,7 @@
                     <x-forms.input placeholder="/" id="application.publish_directory" label="Publish Directory" />
                 @endif
             </div>
+            <h3>Network</h3>
             <div class="flex flex-col gap-2 xl:flex-row">
                 @if ($application->settings->is_static)
                     <x-forms.input id="application.ports_exposes" label="Ports Exposes" readonly />
@@ -72,10 +75,12 @@
                 helper="Your application will be available only on https if your domain starts with https://..."
                 instantSave id="is_force_https" label="Force Https" />
             <x-forms.checkbox helper="Automatically deploy new commits based on Git webhooks." instantSave
-                id="is_auto_deploy" label="Auto Deploy?" />
+                id="is_auto_deploy" label="Auto Deploy" />
             {{-- <x-forms.checkbox helper="Preview deployments" instantSave id="is_previews" label="Previews?" /> --}}
-            <x-forms.checkbox instantSave id="is_git_submodules_allowed" label="Git Submodules Allowed?" />
-            <x-forms.checkbox instantSave id="is_git_lfs_allowed" label="Git LFS Allowed?" />
+            <x-forms.checkbox instantSave id="is_git_submodules_allowed" label="Git Submodules"
+                helper="Allow Git Submodules during build process." />
+            <x-forms.checkbox instantSave id="is_git_lfs_allowed" label="Git LFS"
+                helper="Allow Git LFS during build process." />
             {{-- <x-forms.checkbox disabled instantSave id="is_dual_cert" label="Dual Certs?" />
             <x-forms.checkbox disabled instantSave id="is_custom_ssl" label="Is Custom SSL?" />
             <x-forms.checkbox disabled instantSave id="is_http2" label="Is Http2?" /> --}}

resources/views/livewire/project/application/preview/form.blade.php

@@ -1,9 +1,10 @@
 <form wire:submit.prevent='submit'>
     <div class="flex gap-2">
-        <h3 class="pt-0">Settings</h3>
+        <h2 class="pb-0">Previews Deployments</h2>
         <x-forms.button type="submit">Save</x-forms.button>
         <x-forms.button wire:click="resetToDefault">Reset to default</x-forms.button>
     </div>
+    <div class="pb-4 text-sm">Preview Deployments based on pull requests are here.</div>
     <div class="flex flex-col gap-2 pb-4">
         <x-forms.input id="application.preview_url_template" label="Preview URL Template"
             helper="Templates:<span class='text-helper'>@@{{ random }}</span> to generate random sub-domain each time a PR is deployed, <span class='text-helper'>@@{{ pr_id }}</span> to use pull request ID as sub-domain or <span class='text-helper'>@@{{ domain }}</span> to replace the domain name with the application's domain name." />

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

@@ -1,41 +1,52 @@
 <div>
-    <h2>Previews</h2>
+
     <livewire:project.application.preview.form :application="$application" />
     <h3>Pull Requests on Git</h3>
     <div>
-        <x-forms.button wire:loading.remove wire:target='load_prs' wire:click="load_prs">Load Pull Requests
+        <x-forms.button wire:click="load_prs">Load Pull Requests
         </x-forms.button>
         @isset($rate_limit_remaining)
-            <div class="text-sm">Requests remaning till rate limited: {{ $rate_limit_remaining }}</div>
+            <div class="pt-1 text-sm">Requests remaning till rate limited by Git: {{ $rate_limit_remaining }}</div>
         @endisset
-        <div wire:loading.remove wire:target='load_prs' class="pt-4">
         @if (count($pull_requests) > 0)
+            <div wire:loading.remove wire:target='load_prs' class="flex gap-4 py-8">
                 @foreach ($pull_requests as $pull_request)
-                    <div>
-                        <div>PR #{{ data_get($pull_request, 'number') }} | {{ data_get($pull_request, 'title') }}</div>
-                        <x-forms.button wire:click="deploy({{ data_get($pull_request, 'number') }})">Deploy
+                    <div class="flex flex-col gap-4 p-4 text-sm bg-coolgray-200 hover:bg-coolgray-300">
+                        <div class="text-base font-bold text-white">PR #{{ data_get($pull_request, 'number') }} |
+                            {{ data_get($pull_request, 'title') }}</div>
+                        <div class="flex items-center justify-start gap-2">
+                            <x-forms.button isHighlighted
+                                wire:click="deploy('{{ data_get($pull_request, 'number') }}', '{{ data_get($pull_request, 'html_url') }}')">
+                                Deploy
                             </x-forms.button>
+                            <a target="_blank" class="text-xs" href="{{ data_get($pull_request, 'html_url') }}">Open PR
+                                on
+                                Git
+                                <x-external-link />
+                            </a>
+                        </div>
                     </div>
                 @endforeach
+            </div>
         @endif
     </div>
-        <div wire:loading wire:target='load_prs'>
-            <x-loading />
-        </div>
-    </div>
     @if ($application->previews->count() > 0)
         <h3>Preview Deployments</h3>
         <div class="flex gap-6 text-sm">
             @foreach ($application->previews as $preview)
-                <div class="flex flex-col" x-init="$wire.loadStatus({{ data_get($preview, 'pull_request_id') }})">
+                <div class="flex flex-col p-4 bg-coolgray-200 " x-init="$wire.loadStatus('{{ data_get($preview, 'pull_request_id') }}')">
                     <div>PR #{{ data_get($preview, 'pull_request_id') }} | {{ data_get($preview, 'status') }}
                         @if (data_get($preview, 'status') !== 'exited')
                             | <a target="_blank" href="{{ data_get($preview, 'fqdn') }}">Open Preview
                                 <x-external-link />
                             </a>
                         @endif
+                        |
+                        <a target="_blank" href="{{ data_get($preview, 'pull_request_html_url') }}">Open PR on Git
+                            <x-external-link />
+                        </a>
                     </div>
-                    <div class="flex gap-2 pt-2">
+                    <div class="flex items-center gap-2 pt-6">
                         <x-forms.button isHighlighted wire:click="deploy({{ data_get($preview, 'pull_request_id') }})">
                             @if (data_get($preview, 'status') === 'exited')
                                 Deploy
@@ -44,9 +55,11 @@
                             @endif
                         </x-forms.button>
                         @if (data_get($preview, 'status') !== 'exited')
-                            <x-forms.button wire:click="stop({{ data_get($preview, 'pull_request_id') }})">Stop
+                            <x-forms.button wire:click="stop({{ data_get($preview, 'pull_request_id') }})">Remove
+                                Preview
                             </x-forms.button>
                         @endif
+
                     </div>
                 </div>
             @endforeach

resources/views/livewire/project/application/resource-limits.blade.php

@@ -1,20 +1,23 @@
 <div>
     <form wire:submit.prevent='submit' class="flex flex-col">
         <div class="flex gap-2">
-            <h2>Resource Limits</h2>
+            <h2 class="pb-0">Resource Limits</h2>
             <x-forms.button type='submit'>Save</x-forms.button>
         </div>
-        <div>Limit your container resources by CPU & memory.</div>
-        <h3>CPU</h3>
+        <div class="text-sm">Limit your container resources by CPU & memory.</div>
+        <h3>Limit CPUs</h3>
         <x-forms.input placeholder="1.5" label="Number of CPUs" id="application.limits_cpus" />
-        <x-forms.input placeholder="0-2" label="CPU set to use" id="application.limits_cpuset" />
+        <x-forms.input placeholder="0-2" label="CPU sets to use" id="application.limits_cpuset" />
         <x-forms.input placeholder="1024" label="CPU Weight" id="application.limits_cpu_shares" />
-        <h3>Memory</h3>
-        <x-forms.input placeholder="69b or 420k or 1337m or 1g" label="Limit" id="application.limits_memory" />
-        <x-forms.input placeholder="69b or 420k or 1337m or 1g" label="Swap" id="application.limits_memory_swap" />
+        <h3>Limit Memory</h3>
+        <x-forms.input placeholder="69b or 420k or 1337m or 1g" label="Soft Memory Limit"
+            id="application.limits_memory_reservation" />
+        <x-forms.input placeholder="69b or 420k or 1337m or 1g" label="Maximum Memory Limit"
+            id="application.limits_memory" />
+        <x-forms.input placeholder="69b or 420k or 1337m or 1g" label="Maximum Swap Limit"
+            id="application.limits_memory_swap" />
         <x-forms.input placeholder="0-100" type="number" min="0" max="100" label="Swappiness"
             id="application.limits_memory_swappiness" />
-        <x-forms.input placeholder="69b or 420k or 1337m or 1g" label="Soft Limit"
-            id="application.limits_memory_reservation" />
+
     </form>
 </div>

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

@@ -1,8 +1,9 @@
 <div x-init="$wire.loadImages">
     <div class="flex gap-2">
-        <h2>Rollback</h2>
-        <x-forms.button isHighlighted wire:click='loadImages'>Refresh</x-forms.button>
+        <h2 class="pb-0">Rollback</h2>
+        <x-forms.button isHighlighted wire:click='loadImages'>Reload Available Images</x-forms.button>
     </div>
+    <div class="pb-4 text-sm">You can easily rollback to a previously built image quickly.</div>
     <div wire:loading wire:target='loadImages'>
         <x-loading />
     </div>
@@ -10,7 +11,7 @@
         <div class="flex flex-wrap">
             @forelse ($images as $image)
                 <div class="w-2/4 p-2">
-                    <div class="rounded-lg shadow-lg bg-coolgray-200">
+                    <div class="rounded shadow-lg bg-coolgray-200">
                         <div class="p-2">
                             <div class="text-sm">
                                 @if (data_get($image, 'is_current'))
@@ -27,7 +28,8 @@
                                     Rollback
                                 </x-forms.button>
                             @else
-                                <x-forms.button wire:click="rollbackImage('{{ data_get($image, 'tag') }}')">
+                                <x-forms.button isHighlighted
+                                    wire:click="rollbackImage('{{ data_get($image, 'tag') }}')">
                                     Rollback
                                 </x-forms.button>
                             @endif

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

@@ -1,19 +1,25 @@
 <div>
-    <form wire:submit.prevent='submit' class="flex flex-col gap-2">
-        <div class="flex gap-4">
-            <h2>Source</h2>
+    <form wire:submit.prevent='submit' class="flex flex-col">
+        <div class="flex items-center gap-2">
+            <h2 class="pb-0">Source</h2>
             <x-forms.button type="submit">Save</x-forms.button>
-            <a target="_blank" href="{{ $application->gitCommits }}">
-                Commits
+        </div>
+        <div class="text-sm">Code source of your application.</div>
+        <div class="py-4 ">
+            <a target="_blank" class="hover:no-underline" href="{{ $application->gitCommits }}">
+                <x-forms.button>Open Commits on Git
                     <x-external-link />
+                </x-forms.button>
             </a>
-            <a target="_blank" href="{{ $application->gitBranchLocation }}">
-                Open Repository
+            <a target="_blank" class="hover:no-underline" href="{{ $application->gitBranchLocation }}">
+                <x-forms.button>Open Repository on Git
                     <x-external-link />
+                </x-forms.button>
             </a>
         </div>
         <x-forms.input placeholder="coollabsio/coolify-example" id="application.git_repository" label="Repository" />
         <x-forms.input placeholder="main" id="application.git_branch" label=" Branch" />
         <x-forms.input placeholder="HEAD" id="application.git_commit_sha" placeholder="HEAD" label="Commit SHA" />
+
     </form>
 </div>

resources/views/livewire/project/application/storages/add.blade.php

@@ -1,10 +1,8 @@
 <form wire:submit.prevent='submit' class="flex flex-col px-2 pt-10 max-w-fit">
-    <div class="flex gap-2">
+    <div class="flex items-end gap-2">
         <x-forms.input placeholder="pv-name" noDirty id="name" label="Name" required />
         <x-forms.input placeholder="/root" noDirty id="host_path" label="Source Path" />
         <x-forms.input placeholder="/tmp/root" noDirty id="mount_path" label="Destination Path" required />
-    </div>
-    <div class="pt-2">
         <x-forms.button type="submit">
             Add
         </x-forms.button>

resources/views/livewire/project/application/storages/all.blade.php

@@ -1,9 +1,12 @@
-<div class="flex flex-col gap-2">
-    <h2>Storages</h2>
+<div>
+    <h2 class="pb-0">Storages</h2>
+    <div class="text-sm">Persistent storage to preserve data between deployments.</div>
+    <div class="flex flex-col gap-2 py-4">
         @forelse ($application->persistentStorages as $storage)
             <livewire:project.application.storages.show wire:key="storage-{{ $storage->id }}" :storage="$storage" />
         @empty
             <p>There are no persistent storages attached for this application.</p>
         @endforelse
+    </div>
     <livewire:project.application.storages.add />
 </div>

resources/views/livewire/project/application/storages/show.blade.php

@@ -1,11 +1,9 @@
 <div x-data="{ deleteStorage: false }">
-    <form wire:submit.prevent='submit' class="flex flex-col px-2 max-w-fit">
-        <div class="flex gap-2">
+    <form wire:submit.prevent='submit' class="flex flex-col px-2">
+        <div class="flex items-end gap-2">
             <x-forms.input id="storage.name" label="Name" required />
             <x-forms.input id="storage.host_path" label="Source Path" />
             <x-forms.input id="storage.mount_path" label="Destination Path" required />
-        </div>
-        <div class="pt-2">
             <x-forms.button type="submit">
                 Update
             </x-forms.button>

resources/views/livewire/settings/form.blade.php

@@ -18,7 +18,6 @@
                 <x-forms.input type="number" id="settings.public_port_min" label="Public Port Min" />
                 <x-forms.input type="number" id="settings.public_port_max" label="Public Port Max" />
             </div>
-
         </div>
     </form>
 

resources/views/project/application/configuration.blade.php

@@ -31,6 +31,7 @@
             </a>
             <a :class="activeTab === 'previews' && 'text-white'"
                 @click.prevent="activeTab = 'previews'; window.location.hash = 'previews'" href="#">Previews
+                Deployments
             </a>
             <a :class="activeTab === 'rollback' && 'text-white'"
                 @click.prevent="activeTab = 'rollback'; window.location.hash = 'rollback'" href="#">Rollback

resources/views/project/application/deployment.blade.php

@@ -12,10 +12,10 @@
         </ul>
     </div>
     <x-applications.navbar :application="$application" />
-    <div class="pt-2 text-sm">{{ data_get($activity, 'properties.status') }}</div>
-    @if (data_get($activity, 'properties.status') === 'in_progress' ||
-            data_get($deployment, 'metadata.status') !== 'error' ||
-            data_get($deployment, 'metadata.status') !== 'finished')
+    <div class="pt-2 text-sm">Status: {{ data_get($activity, 'properties.status') }}</div>
+    @if (data_get($activity, 'properties.status') === 'in_progress' &&
+            (data_get($deployment, 'metadata.status') !== 'error' ||
+                data_get($deployment, 'metadata.status') !== 'finished'))
         <livewire:project.application.deployment-cancel :activity="$activity" :application="$application" :deployment_uuid="$deployment_uuid" />
     @endif
     <livewire:project.application.deployment-logs :activity="$activity" :deployment_uuid="$deployment_uuid" />