feat: search between resources

app/Livewire/Project/Resource/Index.php

@@ -10,7 +10,15 @@ class Index extends Component
 {
     public Project $project;
     public Environment $environment;
-    public function mount () {
+    public $applications = [];
+    public $postgresqls = [];
+    public $redis = [];
+    public $mongodbs = [];
+    public $mysqls = [];
+    public $mariadbs = [];
+    public $services = [];
+    public function mount()
+    {
         $project = currentTeam()->load(['projects'])->projects->where('uuid', request()->route('project_uuid'))->first();
         if (!$project) {
             return redirect()->route('dashboard');
@@ -21,6 +29,83 @@ public function mount () {
         }
         $this->project = $project;
         $this->environment = $environment;
+        $this->applications = $environment->applications->sortBy('name');
+        $this->applications = $this->applications->map(function ($application) {
+            if (data_get($application, 'environment.project.uuid')) {
+                $application->hrefLink = route('project.application.configuration', [
+                    'project_uuid' => data_get($application, 'environment.project.uuid'),
+                    'environment_name' => data_get($application, 'environment.name'),
+                    'application_uuid' => data_get($application, 'uuid')
+                ]);
+            }
+            return $application;
+        });
+        $this->postgresqls = $environment->postgresqls->sortBy('name');
+        $this->postgresqls =  $this->postgresqls->map(function ($postgresql) {
+            if (data_get($postgresql, 'environment.project.uuid')) {
+                $postgresql->hrefLink = route('project.database.configuration', [
+                    'project_uuid' => data_get($postgresql, 'environment.project.uuid'),
+                    'environment_name' => data_get($postgresql, 'environment.name'),
+                    'database_uuid' => data_get($postgresql, 'uuid')
+                ]);
+            }
+            return $postgresql;
+        });
+        $this->redis = $environment->redis->sortBy('name');
+        $this->redis = $this->redis->map(function ($redis) {
+            if (data_get($redis, 'environment.project.uuid')) {
+                $redis->hrefLink = route('project.database.configuration', [
+                    'project_uuid' => data_get($redis, 'environment.project.uuid'),
+                    'environment_name' => data_get($redis, 'environment.name'),
+                    'database_uuid' => data_get($redis, 'uuid')
+                ]);
+            }
+            return $redis;
+        });
+        $this->mongodbs = $environment->mongodbs->sortBy('name');
+        $this->mongodbs = $this->mongodbs->map(function ($mongodb) {
+            if (data_get($mongodb, 'environment.project.uuid')) {
+                $mongodb->hrefLink = route('project.database.configuration', [
+                    'project_uuid' => data_get($mongodb, 'environment.project.uuid'),
+                    'environment_name' => data_get($mongodb, 'environment.name'),
+                    'database_uuid' => data_get($mongodb, 'uuid')
+                ]);
+            }
+            return $mongodb;
+        });
+        $this->mysqls = $environment->mysqls->sortBy('name');
+        $this->mysqls = $this->mysqls->map(function ($mysql) {
+            if (data_get($mysql, 'environment.project.uuid')) {
+                $mysql->hrefLink = route('project.database.configuration', [
+                    'project_uuid' => data_get($mysql, 'environment.project.uuid'),
+                    'environment_name' => data_get($mysql, 'environment.name'),
+                    'database_uuid' => data_get($mysql, 'uuid')
+                ]);
+            }
+            return $mysql;
+        });
+        $this->mariadbs = $environment->mariadbs->sortBy('name');
+        $this->mariadbs = $this->mariadbs->map(function ($mariadb) {
+            if (data_get($mariadb, 'environment.project.uuid')) {
+                $mariadb->hrefLink = route('project.database.configuration', [
+                    'project_uuid' => data_get($mariadb, 'environment.project.uuid'),
+                    'environment_name' => data_get($mariadb, 'environment.name'),
+                    'database_uuid' => data_get($mariadb, 'uuid')
+                ]);
+            }
+            return $mariadb;
+        });
+        $this->services = $environment->services->sortBy('name');
+        $this->services = $this->services->map(function ($service) {
+            if (data_get($service, 'environment.project.uuid')) {
+                $service->hrefLink = route('project.service.configuration', [
+                    'project_uuid' => data_get($service, 'environment.project.uuid'),
+                    'environment_name' => data_get($service, 'environment.name'),
+                    'service_uuid' => data_get($service, 'uuid')
+                ]);
+            }
+            return $service;
+        });
     }
     public function render()
     {

resources/css/app.css

@@ -80,7 +80,7 @@ .box-without-bg {
 }
 
 .description {
-    @apply pt-2 text-xs font-bold text-neutral-500 group-hover:text-white;
+    @apply text-xs font-bold text-neutral-500 group-hover:text-white;
 }
 
 .lds-heart {

resources/views/livewire/project/resource/index.blade.php

@@ -44,54 +44,188 @@ class="font-normal text-white normal-case border-none rounded hover:no-underline
         <a href="{{ route('project.resource.create', ['project_uuid' => request()->route('project_uuid'), 'environment_name' => request()->route('environment_name')]) }}  "
             class="items-center justify-center box">+ Add New Resource</a>
     @endif
-    <div class="grid gap-2 lg:grid-cols-2">
+    <div x-data="searchComponent()">
-        @foreach ($environment->applications->sortBy('name') as $application)
+        <x-forms.input placeholder="Search for name, fqdn..." class="w-full" x-model="search" />
-            <a class="relative box group"
+        <div class="grid gap-2 pt-4 lg:grid-cols-2">
-                href="{{ route('project.application.configuration', [$project->uuid, $environment->name, $application->uuid]) }}">
+            <template x-for="item in filteredApplications" :key="item.id">
-                <div class="flex flex-col mx-6">
+                <a class="relative box group" :href="item.hrefLink">
-                    <div class="font-bold text-white">{{ $application->name }}</div>
+                    <div class="flex flex-col mx-6">
-                    <div class="description">{{ $application->description }}</div>
+                        <div class="pb-2 font-bold text-white" x-text="item.name"></div>
-                </div>
+                        <div class="description" x-text="item.description"></div>
-                @if (Str::of(data_get($application, 'status'))->startsWith('running'))
+                        <div class="description" x-text="item.fqdn"></div>
-                    <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
+                    </div>
-                @elseif (Str::of(data_get($application, 'status'))->startsWith('exited'))
+                    <template x-if="item.status.startsWith('running')">
-                    <div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
+                        <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
-                @elseif (Str::of(data_get($application, 'status'))->startsWith('restarting'))
+                    </template>
-                    <div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
+                    <template x-if="item.status.startsWith('exited')">
-                @endif
+                        <div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
-            </a>
+                    </template>
-        @endforeach
+                    <template x-if="item.status.startsWith('restarting')">
-        @foreach ($environment->databases()->sortBy('name') as $database)
+                        <div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
-            <a class="relative box group"
+                    </template>
-                href="{{ route('project.database.configuration', [$project->uuid, $environment->name, $database->uuid]) }}">
+                </a>
-                <div class="flex flex-col mx-6">
+            </template>
-                    <div class="font-bold text-white">{{ $database->name }}</div>
+            <template x-for="item in filteredPostgresqls" :key="item.id">
-                    <div class="description">{{ $database->description }}</div>
+                <a class="relative box group" :href="item.hrefLink">
-                </div>
+                    <div class="flex flex-col mx-6">
-                @if (Str::of(data_get($database, 'status'))->startsWith('running'))
+                        <div class="font-bold text-white" x-text="item.name"></div>
-                    <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
+                        <div class="description" x-text="item.description"></div>
-                @elseif (Str::of(data_get($database, 'status'))->startsWith('exited'))
+                    </div>
-                    <div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
+                    <template x-if="item.status.startsWith('running')">
-                @elseif (Str::of(data_get($database, 'status'))->startsWith('restaring'))
+                        <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
-                    <div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
+                    </template>
-                @endif
+                    <template x-if="item.status.startsWith('exited')">
-            </a>
+                        <div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
-        @endforeach
+                    </template>
-        @foreach ($environment->services->sortBy('name') as $service)
+                    <template x-if="item.status.startsWith('restarting')">
-            <a class="relative box group"
+                        <div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
-                href="{{ route('project.service.configuration', [$project->uuid, $environment->name, $service->uuid]) }}">
+                    </template>
-                <div class="flex flex-col mx-6">
+                </a>
-                    <div class="font-bold text-white">{{ $service->name }}</div>
+            </template>
-                    <div class="description">{{ $service->description }}</div>
+            <template x-for="item in filteredRedis" :key="item.id">
-                </div>
+                <a class="relative box group" :href="item.hrefLink">
-                @if (Str::of(serviceStatus($service))->startsWith('running'))
+                    <div class="flex flex-col mx-6">
-                    <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
+                        <div class="font-bold text-white" x-text="item.name"></div>
-                @elseif (Str::of(serviceStatus($service))->startsWith('degraded'))
+                        <div class="description" x-text="item.description"></div>
-                    <div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
+                    </div>
-                @elseif (Str::of(serviceStatus($service))->startsWith('exited'))
+                    <template x-if="item.status.startsWith('running')">
-                    <div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
+                        <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
-                @endif
+                    </template>
-            </a>
+                    <template x-if="item.status.startsWith('exited')">
-        @endforeach
+                        <div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
+                    </template>
+                    <template x-if="item.status.startsWith('restarting')">
+                        <div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
+                    </template>
+                </a>
+            </template>
+            <template x-for="item in filteredMongodbs" :key="item.id">
+                <a class="relative box group" :href="item.hrefLink">
+                    <div class="flex flex-col mx-6">
+                        <div class="font-bold text-white" x-text="item.name"></div>
+                        <div class="description" x-text="item.description"></div>
+                    </div>
+                    <template x-if="item.status.startsWith('running')">
+                        <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
+                    </template>
+                    <template x-if="item.status.startsWith('exited')">
+                        <div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
+                    </template>
+                    <template x-if="item.status.startsWith('restarting')">
+                        <div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
+                    </template>
+                </a>
+            </template>
+            <template x-for="item in filteredMysqls" :key="item.id">
+                <a class="relative box group" :href="item.hrefLink">
+                    <div class="flex flex-col mx-6">
+                        <div class="font-bold text-white" x-text="item.name"></div>
+                        <div class="description" x-text="item.description"></div>
+                    </div>
+                    <template x-if="item.status.startsWith('running')">
+                        <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
+                    </template>
+                    <template x-if="item.status.startsWith('exited')">
+                        <div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
+                    </template>
+                    <template x-if="item.status.startsWith('restarting')">
+                        <div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
+                    </template>
+                </a>
+            </template>
+            <template x-for="item in filteredMariadbs" :key="item.id">
+                <a class="relative box group" :href="item.hrefLink">
+                    <div class="flex flex-col mx-6">
+                        <div class="font-bold text-white" x-text="item.name"></div>
+                        <div class="description" x-text="item.description"></div>
+                    </div>
+                    <template x-if="item.status.startsWith('running')">
+                        <div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
+                    </template>
+                    <template x-if="item.status.startsWith('exited')">
+                        <div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
+                    </template>
+                    <template x-if="item.status.startsWith('restarting')">
+                        <div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
+                    </template>
+                </a>
+            </template>
+        </div>
     </div>
 </div>
+
+<script>
+    function searchComponent() {
+        return {
+            search: '',
+            applications: @js($applications),
+            postgresqls: @js($postgresqls),
+            redis: @js($redis),
+            mongodbs: @js($mongodbs),
+            mysqls: @js($mysqls),
+            mariadbs: @js($mariadbs),
+            get filteredApplications() {
+                if (this.search === '') {
+                    return this.applications;
+                }
+                this.applications = Object.values(this.applications);
+                return this.applications.filter(item => {
+                    return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
+                        item.fqdn?.toLowerCase().includes(this.search.toLowerCase()) ||
+                        item.description?.toLowerCase().includes(this.search.toLowerCase());
+                });
+            },
+            get filteredPostgresqls() {
+                if (this.search === '') {
+                    return this.postgresqls;
+                }
+                this.postgresqls = Object.values(this.postgresqls);
+                return this.postgresqls.filter(item => {
+                    return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
+                        item.description?.toLowerCase().includes(this.search.toLowerCase());
+                });
+            },
+            get filteredRedis() {
+                if (this.search === '') {
+                    return this.redis;
+                }
+                this.redis = Object.values(this.redis);
+                return this.redis.filter(item => {
+                    return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
+                        item.description?.toLowerCase().includes(this.search.toLowerCase());
+                });
+            },
+            get filteredMongodbs() {
+                if (this.search === '') {
+                    return this.mongodbs;
+                }
+                this.mongodbs = Object.values(this.mongodbs);
+                return this.mongodbs.filter(item => {
+                    return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
+                        item.description?.toLowerCase().includes(this.search.toLowerCase());
+                });
+            },
+            get filteredMysqls() {
+                if (this.search === '') {
+                    return this.mysqls;
+                }
+                this.mysqls = Object.values(this.mysqls);
+                return this.mysqls.filter(item => {
+                    return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
+                        item.description?.toLowerCase().includes(this.search.toLowerCase());
+                });
+            },
+            get filteredMariadbs() {
+                if (this.search === '') {
+                    return this.mariadbs;
+                }
+                this.mariadbs = Object.values(this.mariadbs);
+                return this.mariadbs.filter(item => {
+                    return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
+                        item.description?.toLowerCase().includes(this.search.toLowerCase());
+                });
+            },
+
+        };
+    }
+</script>