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

385 lines
24 KiB
PHP
Raw Normal View History

2024-01-07 15:23:41 +00:00
<div>
<div class="flex flex-col">
<div class="flex items-center gap-2">
<h1>Resources</h1>
@if ($environment->isEmpty())
<a class="font-normal text-white normal-case border-none rounded hover:no-underline btn btn-primary btn-sm no-animation"
href="{{ route('project.clone-me', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => request()->route('environment_name')]) }}">
Clone
</a>
@else
<a href="{{ route('project.resource.create', ['project_uuid' => request()->route('project_uuid'), 'environment_name' => request()->route('environment_name')]) }} "
class="font-normal text-white normal-case border-none rounded hover:no-underline btn btn-primary btn-sm no-animation">+
New</a>
<a class="font-normal text-white normal-case border-none rounded hover:no-underline btn btn-primary btn-sm no-animation"
href="{{ route('project.clone-me', ['project_uuid' => data_get($project, 'uuid'), 'environment_name' => request()->route('environment_name')]) }}">
Clone
</a>
@endif
2024-01-31 13:18:59 +00:00
<livewire:project.delete-environment :disabled="!$environment->isEmpty()" :environment_id="$environment->id" />
2024-01-07 15:23:41 +00:00
</div>
<nav class="flex pt-2 pb-10">
<ol class="flex items-center">
<li class="inline-flex items-center">
<a class="text-xs truncate lg:text-sm"
href="{{ route('project.show', ['project_uuid' => request()->route('project_uuid')]) }}">
{{ $project->name }}</a>
</li>
<li>
<div class="flex items-center">
<svg aria-hidden="true" class="w-4 h-4 mx-1 font-bold text-warning" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
<a class="text-xs truncate lg:text-sm"
href="{{ route('project.resource.index', ['environment_name' => request()->route('environment_name'), 'project_uuid' => request()->route('project_uuid')]) }}">{{ request()->route('environment_name') }}</a>
</div>
</li>
</ol>
</nav>
</div>
@if ($environment->isEmpty())
<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>
@else
<div x-data="searchComponent()">
<x-forms.input placeholder="Search for name, fqdn..." class="w-full" x-model="search" />
2024-02-03 11:39:07 +00:00
<div class="grid grid-cols-1 gap-4 pt-4 lg:grid-cols-2 xl:grid-cols-3">
<template x-for="item in filteredApplications" :key="item.id">
2024-02-09 12:57:37 +00:00
<span>
2024-02-01 14:38:12 +00:00
<a class="h-24 box group" :href="item.hrefLink">
<div class="flex flex-col mx-6">
2024-02-12 09:05:45 +00:00
<div class="flex gap-2">
<div class="pb-2 font-bold text-white" x-text="item.name"></div>
<template x-if="item.status.startsWith('running')">
<div title="running" class="mt-1 bg-success badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('exited')">
<div title="exited" class="mt-1 bg-error badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('restarting')">
<div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('degraded')">
<div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
</template>
</div>
2024-02-01 14:38:12 +00:00
<div class="description" x-text="item.description"></div>
<div class="description break-all" x-text="item.fqdn"></div>
2024-02-01 14:38:12 +00:00
</div>
</a>
<div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
<template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
@click.prevent="goto(item)">Add tag</div>
</div>
2024-02-01 14:38:12 +00:00
</span>
</template>
<template x-for="item in filteredPostgresqls" :key="item.id">
2024-02-09 12:57:37 +00:00
<span>
2024-02-02 10:50:28 +00:00
<a class="h-24 box group" :href="item.hrefLink">
<div class="flex flex-col mx-6">
2024-02-12 09:05:45 +00:00
<div class="flex gap-2">
<div class="pb-2 font-bold text-white" x-text="item.name"></div>
<template x-if="item.status.startsWith('running')">
<div title="running" class="mt-1 bg-success badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('exited')">
<div title="exited" class="mt-1 bg-error badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('restarting')">
<div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('degraded')">
<div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
</template>
</div>
2024-02-02 10:50:28 +00:00
<div class="description" x-text="item.description"></div>
</div>
</a>
<div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
<template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
@click.prevent="goto(item)">Add tag</div>
</div>
2024-02-02 10:50:28 +00:00
</span>
</template>
<template x-for="item in filteredRedis" :key="item.id">
2024-02-09 12:57:37 +00:00
<span>
2024-02-02 10:50:28 +00:00
<a class="h-24 box group" :href="item.hrefLink">
<div class="flex flex-col mx-6">
2024-02-12 09:05:45 +00:00
<div class="flex gap-2">
<div class="pb-2 font-bold text-white" x-text="item.name"></div>
<template x-if="item.status.startsWith('running')">
<div title="running" class="mt-1 bg-success badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('exited')">
<div title="exited" class="mt-1 bg-error badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('restarting')">
<div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('degraded')">
<div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
</template>
</div>
2024-02-02 10:50:28 +00:00
<div class="description" x-text="item.description"></div>
</div>
</a>
<div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
<template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
@click.prevent="goto(item)">Add tag</div>
</div>
2024-02-02 10:50:28 +00:00
</span>
</template>
<template x-for="item in filteredMongodbs" :key="item.id">
2024-02-09 12:57:37 +00:00
<span>
2024-02-02 10:50:28 +00:00
<a class="h-24 box group" :href="item.hrefLink">
<div class="flex flex-col mx-6">
2024-02-12 09:05:45 +00:00
<div class="flex gap-2">
<div class="pb-2 font-bold text-white" x-text="item.name"></div>
<template x-if="item.status.startsWith('running')">
<div title="running" class="mt-1 bg-success badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('exited')">
<div title="exited" class="mt-1 bg-error badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('restarting')">
<div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('degraded')">
<div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
</template>
</div>
2024-02-02 10:50:28 +00:00
<div class="description" x-text="item.description"></div>
</div>
</a>
<div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
<template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
@click.prevent="goto(item)">Add tag</div>
</div>
2024-02-02 10:50:28 +00:00
</span>
</template>
<template x-for="item in filteredMysqls" :key="item.id">
2024-02-09 12:57:37 +00:00
<span>
2024-02-02 10:50:28 +00:00
<a class="h-24 box group" :href="item.hrefLink">
<div class="flex flex-col mx-6">
2024-02-12 09:05:45 +00:00
<div class="flex gap-2">
<div class="pb-2 font-bold text-white" x-text="item.name"></div>
<template x-if="item.status.startsWith('running')">
<div title="running" class="mt-1 bg-success badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('exited')">
<div title="exited" class="mt-1 bg-error badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('restarting')">
<div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('degraded')">
<div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
</template>
</div>
2024-02-02 10:50:28 +00:00
<div class="description" x-text="item.description"></div>
</div>
</a>
<div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
<template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
@click.prevent="goto(item)">Add tag</div>
</div>
2024-02-02 10:50:28 +00:00
</span>
</template>
<template x-for="item in filteredMariadbs" :key="item.id">
2024-02-09 12:57:37 +00:00
<span>
2024-02-02 10:50:28 +00:00
<a class="h-24 box group" :href="item.hrefLink">
<div class="flex flex-col mx-6">
2024-02-12 09:05:45 +00:00
<div class="flex gap-2">
<div class="pb-2 font-bold text-white" x-text="item.name"></div>
<template x-if="item.status.startsWith('running')">
<div title="running" class="mt-1 bg-success badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('exited')">
<div title="exited" class="mt-1 bg-error badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('restarting')">
<div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('degraded')">
<div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
</template>
</div>
2024-02-02 10:50:28 +00:00
<div class="description" x-text="item.description"></div>
</div>
</a>
<div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
<template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
@click.prevent="goto(item)">Add tag</div>
</div>
2024-02-02 10:50:28 +00:00
</span>
</template>
<template x-for="item in filteredServices" :key="item.id">
2024-02-09 12:57:37 +00:00
<span>
2024-02-02 10:50:28 +00:00
<a class="h-24 box group" :href="item.hrefLink">
<div class="flex flex-col mx-6">
2024-02-12 09:05:45 +00:00
<div class="flex gap-2">
<div class="pb-2 font-bold text-white" x-text="item.name"></div>
<template x-if="item.status.startsWith('running')">
<div title="running" class="mt-1 bg-success badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('exited')">
<div title="exited" class="mt-1 bg-error badge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('restarting')">
<div title="restarting" class="mt-1 bg-warningbadge badge-xs"></div>
</template>
<template x-if="item.status.startsWith('degraded')">
<div title="degraded" class="mt-1 bg-warning badge badge-xs"></div>
</template>
</div>
2024-02-02 10:50:28 +00:00
<div class="description" x-text="item.description"></div>
</div>
</a>
<div class="flex gap-1 pt-1 group-hover:text-white group min-h-6">
<template x-for="tag in item.tags">
<div class="px-2 py-1 cursor-pointer description bg-coolgray-100 hover:bg-coolgray-300"
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
</template>
<div class="flex items-center px-2 text-xs cursor-pointer text-neutral-500/20 group-hover:text-white hover:bg-coolgray-300"
@click.prevent="goto(item)">Add tag</div>
</div>
2024-02-02 10:50:28 +00:00
</span>
</template>
</div>
2024-01-12 10:25:20 +00:00
</div>
@endif
2024-01-07 15:23:41 +00:00
</div>
2024-01-12 10:25:20 +00:00
<script>
2024-02-02 10:50:28 +00:00
function sortFn(a, b) {
return a.name.localeCompare(b.name)
}
2024-01-12 10:25:20 +00:00
function searchComponent() {
return {
search: '',
applications: @js($applications),
postgresqls: @js($postgresqls),
redis: @js($redis),
mongodbs: @js($mongodbs),
mysqls: @js($mysqls),
mariadbs: @js($mariadbs),
services: @js($services),
2024-02-01 14:38:12 +00:00
gotoTag(tag) {
window.location.href = '/tags/' + tag;
},
goto(item) {
const hrefLink = item.hrefLink;
window.location.href = `${hrefLink}#tags`;
},
2024-01-12 10:25:20 +00:00
get filteredApplications() {
if (this.search === '') {
2024-02-02 10:50:28 +00:00
return Object.values(this.applications).sort(sortFn);
2024-01-12 10:25:20 +00:00
}
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()) ||
2024-02-02 10:50:28 +00:00
item.description?.toLowerCase().includes(this.search.toLowerCase()) ||
item.tags?.some(tag => tag.name.toLowerCase().includes(this.search.toLowerCase()));
}).sort(sortFn);
2024-01-12 10:25:20 +00:00
},
get filteredPostgresqls() {
if (this.search === '') {
2024-02-02 10:50:28 +00:00
return Object.values(this.postgresqls).sort(sortFn);
2024-01-12 10:25:20 +00:00
}
this.postgresqls = Object.values(this.postgresqls);
return this.postgresqls.filter(item => {
return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
2024-02-02 10:50:28 +00:00
item.description?.toLowerCase().includes(this.search.toLowerCase()) ||
item.tags?.some(tag => tag.name.toLowerCase().includes(this.search.toLowerCase()));
}).sort(sortFn);
2024-01-12 10:25:20 +00:00
},
get filteredRedis() {
if (this.search === '') {
2024-02-02 10:50:28 +00:00
return Object.values(this.redis).sort(sortFn);
2024-01-12 10:25:20 +00:00
}
this.redis = Object.values(this.redis);
return this.redis.filter(item => {
return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
2024-02-02 10:50:28 +00:00
item.description?.toLowerCase().includes(this.search.toLowerCase()) ||
item.tags?.some(tag => tag.name.toLowerCase().includes(this.search.toLowerCase()));
}).sort(sortFn);
2024-01-12 10:25:20 +00:00
},
get filteredMongodbs() {
if (this.search === '') {
2024-02-02 10:50:28 +00:00
return Object.values(this.mongodbs).sort(sortFn);
2024-01-12 10:25:20 +00:00
}
this.mongodbs = Object.values(this.mongodbs);
return this.mongodbs.filter(item => {
return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
2024-02-02 10:50:28 +00:00
item.description?.toLowerCase().includes(this.search.toLowerCase()) ||
item.tags?.some(tag => tag.name.toLowerCase().includes(this.search.toLowerCase()));
}).sort(sortFn);
2024-01-12 10:25:20 +00:00
},
get filteredMysqls() {
if (this.search === '') {
2024-02-02 10:50:28 +00:00
return Object.values(this.mysqls).sort(sortFn);
2024-01-12 10:25:20 +00:00
}
this.mysqls = Object.values(this.mysqls);
return this.mysqls.filter(item => {
return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
2024-02-02 10:50:28 +00:00
item.description?.toLowerCase().includes(this.search.toLowerCase()) ||
item.tags?.some(tag => tag.name.toLowerCase().includes(this.search.toLowerCase()));
}).sort(sortFn);
2024-01-12 10:25:20 +00:00
},
get filteredMariadbs() {
if (this.search === '') {
2024-02-02 10:50:28 +00:00
return Object.values(this.mariadbs).sort(sortFn);
2024-01-12 10:25:20 +00:00
}
this.mariadbs = Object.values(this.mariadbs);
return this.mariadbs.filter(item => {
return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
2024-02-02 10:50:28 +00:00
item.description?.toLowerCase().includes(this.search.toLowerCase()) ||
item.tags?.some(tag => tag.name.toLowerCase().includes(this.search.toLowerCase()));
}).sort(sortFn);
2024-01-12 10:25:20 +00:00
},
get filteredServices() {
if (this.search === '') {
2024-02-02 10:50:28 +00:00
return Object.values(this.services).sort(sortFn);
}
this.services = Object.values(this.services);
return this.services.filter(item => {
return item.name.toLowerCase().includes(this.search.toLowerCase()) ||
2024-02-02 10:50:28 +00:00
item.description?.toLowerCase().includes(this.search.toLowerCase()) ||
item.tags?.some(tag => tag.name.toLowerCase().includes(this.search.toLowerCase()));
}).sort(sortFn);
},
2024-01-12 10:25:20 +00:00
};
}
</script>