feat: search between resources
This commit is contained in:
Andras Bacsai
parent
dccb31d17e
commit
8d04fbdb74
@ -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()
|
||||
{
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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">
|
||||
@foreach ($environment->applications->sortBy('name') as $application)
|
||||
<a class="relative box group"
|
||||
href="{{ route('project.application.configuration', [$project->uuid, $environment->name, $application->uuid]) }}">
|
||||
<div class="flex flex-col mx-6">
|
||||
<div class="font-bold text-white">{{ $application->name }}</div>
|
||||
<div class="description">{{ $application->description }}</div>
|
||||
</div>
|
||||
@if (Str::of(data_get($application, 'status'))->startsWith('running'))
|
||||
<div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
|
||||
@elseif (Str::of(data_get($application, 'status'))->startsWith('exited'))
|
||||
<div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
|
||||
@elseif (Str::of(data_get($application, 'status'))->startsWith('restarting'))
|
||||
<div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
|
||||
@endif
|
||||
</a>
|
||||
@endforeach
|
||||
@foreach ($environment->databases()->sortBy('name') as $database)
|
||||
<a class="relative box group"
|
||||
href="{{ route('project.database.configuration', [$project->uuid, $environment->name, $database->uuid]) }}">
|
||||
<div class="flex flex-col mx-6">
|
||||
<div class="font-bold text-white">{{ $database->name }}</div>
|
||||
<div class="description">{{ $database->description }}</div>
|
||||
</div>
|
||||
@if (Str::of(data_get($database, 'status'))->startsWith('running'))
|
||||
<div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
|
||||
@elseif (Str::of(data_get($database, 'status'))->startsWith('exited'))
|
||||
<div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
|
||||
@elseif (Str::of(data_get($database, 'status'))->startsWith('restaring'))
|
||||
<div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
|
||||
@endif
|
||||
</a>
|
||||
@endforeach
|
||||
@foreach ($environment->services->sortBy('name') as $service)
|
||||
<a class="relative box group"
|
||||
href="{{ route('project.service.configuration', [$project->uuid, $environment->name, $service->uuid]) }}">
|
||||
<div class="flex flex-col mx-6">
|
||||
<div class="font-bold text-white">{{ $service->name }}</div>
|
||||
<div class="description">{{ $service->description }}</div>
|
||||
</div>
|
||||
@if (Str::of(serviceStatus($service))->startsWith('running'))
|
||||
<div class="absolute bg-success -top-1 -left-1 badge badge-xs"></div>
|
||||
@elseif (Str::of(serviceStatus($service))->startsWith('degraded'))
|
||||
<div class="absolute bg-warning -top-1 -left-1 badge badge-xs"></div>
|
||||
@elseif (Str::of(serviceStatus($service))->startsWith('exited'))
|
||||
<div class="absolute bg-error -top-1 -left-1 badge badge-xs"></div>
|
||||
@endif
|
||||
</a>
|
||||
@endforeach
|
||||
<div x-data="searchComponent()">
|
||||
<x-forms.input placeholder="Search for name, fqdn..." class="w-full" x-model="search" />
|
||||
<div class="grid gap-2 pt-4 lg:grid-cols-2">
|
||||
<template x-for="item in filteredApplications" :key="item.id">
|
||||
<a class="relative box group" :href="item.hrefLink">
|
||||
<div class="flex flex-col mx-6">
|
||||
<div class="pb-2 font-bold text-white" x-text="item.name"></div>
|
||||
<div class="description" x-text="item.description"></div>
|
||||
<div class="description" x-text="item.fqdn"></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 filteredPostgresqls" :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 filteredRedis" :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 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user