feat: #22 add services list to the services page

Author: bohdan-shulha

app/Http/Controllers/ServiceController.php

@@ -18,7 +18,13 @@ class ServiceController extends Controller
      */
     public function index()
     {
-        return Inertia::render('Services/Index');
+        $services = Service::with(['latestDeployment' => function ($query) {
+            $query->with(['taskGroup' => function ($query) {
+                $query->with('latestTask');
+            }]);
+        }])->get();
+
+        return Inertia::render('Services/Index', ['services' => $services]);
     }
 
     /**

app/Models/Deployment.php

@@ -12,6 +12,7 @@
 use App\Models\NodeTasks\ApplyCaddyConfig\ApplyCaddyConfigMeta;
 use App\Traits\HasOwningTeam;
 use Illuminate\Database\Eloquent\Builder as EloquentBuilder;
+use Illuminate\Database\Eloquent\Relations\HasOne;
 use Illuminate\Database\Query\Builder as QueryBuilder;
 use Illuminate\Database\Eloquent\Casts\Json;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
@@ -40,6 +41,11 @@ public function service(): BelongsTo
         return $this->belongsTo(Service::class);
     }
 
+    public function taskGroup(): BelongsTo
+    {
+        return $this->belongsTo(NodeTaskGroup::class);
+    }
+
     public function makeResourceName($name): string
     {
         return $this->service->makeResourceName("dpl_". $this->id . "_" . $name);

app/Models/NodeTask.php

@@ -151,6 +151,7 @@ public function complete(AbstractTaskResult $result): void
         $this->save();
 
         if ($this->taskGroup->allTasksEnded()) {
+            $this->taskGroup->ended_at = now();
             $this->taskGroup->status = TaskStatus::Completed;
             $this->taskGroup->save();
         }
@@ -166,6 +167,7 @@ public function fail(AbstractTaskResult $result): void
         $this->result = $result;
         $this->save();
 
+        $this->taskGroup->ended_at = now();
         $this->taskGroup->status = TaskStatus::Failed;
         $this->taskGroup->save();
 

app/Models/NodeTaskGroup.php

@@ -10,6 +10,7 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\HasOne;
 use Symfony\Component\VarDumper\VarDumper;
 use function Psy\debug;
 
@@ -36,6 +37,11 @@ public function tasks(): HasMany
         return $this->hasMany(NodeTask::class, 'task_group_id');
     }
 
+    public function latestTask(): HasOne
+    {
+        return $this->hasOne(NodeTask::class, 'task_group_id')->latest();
+    }
+
     public function allTasksEnded() :bool
     {
         return ! $this->tasks()->whereNull('ended_at')->exists();

app/Models/Service.php

@@ -6,6 +6,7 @@
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\HasMany;
+use Illuminate\Database\Eloquent\Relations\HasOne;
 use Illuminate\Support\Str;
 
 class Service extends Model
@@ -30,6 +31,11 @@ public function deployments(): HasMany
         return $this->hasMany(Deployment::class);
     }
 
+    public function latestDeployment(): HasOne
+    {
+        return $this->hasOne(Deployment::class)->latest();
+    }
+
     public function makeResourceName($name): string
     {
         $name = dockerize_name("svc_" . $this->id . '_'. $name);

resources/js/Pages/Services/Index.vue

@@ -1,8 +1,14 @@
 <script setup>
 import AppLayout from "@/Layouts/AppLayout.vue";
-import NodeStatus from "@/Components/NodeStatus.vue";
 import {router} from "@inertiajs/vue3";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
+import TaskResult from "@/Components/NodeTasks/TaskResult.vue";
+import { Link } from '@inertiajs/vue3';
+
+
+const props = defineProps({
+  'services': Array
+})
 </script>
 
 <template>
@@ -19,8 +25,45 @@ import PrimaryButton from "@/Components/PrimaryButton.vue";
 
     <div class="py-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-this is your "Services" page.
+        <div class=" grid grid-cols-3 gap-4">
+          <div  v-for="service in props.services" :key="service.id">
+        <div
+             class="bg-white dark:bg-gray-800 shadow sm:rounded-lg"
+            >
+          <Link :href="route('services.show', {'service': service.id})" class="p-4 flex justify-between">
+            <div class="flex flex-col">
+              <span class="font-semibold text-lg">{{ service.name }}</span>
+              <span class="text-sm text-gray-500">{{ service.latest_deployment.data.dockerImage }}</span>
+            </div>
+
+            <div class="flex flex-col w-44 overflow-hidden ">
+              <span class="text-sm text-gray-500">{{ service.latest_deployment.data.internalDomain }}</span>
+              <span v-if="service.latest_deployment.data.caddy[0]"
+                    class="text-sm text-gray-400"
+              >
+                <span v-if="service.latest_deployment.data.caddy[0].publishedPort === 80">http://</span>
+                <span v-else-if="service.latest_deployment.data.caddy[0].publishedPort === 443">https://</span>
+                <span class="text-black">{{ service.latest_deployment.data.caddy[0].domain }}</span>
+                <span>{{ service.latest_deployment.data.caddy[0].path }}</span>
+              </span>
+              <span v-if="service.latest_deployment.data.caddy.length > 1"
+                    class="text-xs text-gray-400"
+              >(+{{ service.latest_deployment.data.caddy.length - 1 }} more)</span>
+            </div>
+
+<!--          <pre>{{service}}</pre>-->
+          </Link>
+          <ul  v-if="service.latest_deployment.task_group.latest_task.status !== 'completed'"
 
+               class="border-t-2 relative">
+          <TaskResult
+              :task="service.latest_deployment.task_group.latest_task"
+          class="">
+          </TaskResult>
+          </ul>
+        </div>
+          </div>
+        </div>
       </div>
     </div>
   </AppLayout>