Fix styling issues and add new badge class in app.css
This commit is contained in:
Andras Bacsai
@@ -133,6 +133,11 @@ tr td:first-child {
|
|||||||
@apply inline-block w-3 h-3 text-xs font-bold leading-none border rounded-full border-neutral-200 dark:border-black;
|
@apply inline-block w-3 h-3 text-xs font-bold leading-none border rounded-full border-neutral-200 dark:border-black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.badge-absolute {
|
||||||
|
@apply absolute top-0 right-0 w-2 h-2 border-none rounded-t-none rounded-r-none;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.badge-success {
|
.badge-success {
|
||||||
@apply bg-success;
|
@apply bg-success;
|
||||||
}
|
}
|
||||||
@@ -195,7 +200,7 @@ tr td:first-child {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
@apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
|
@apply relative flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 bg-white border text-black dark:text-white hover:text-black border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:no-underline;
|
||||||
}
|
}
|
||||||
.box-boarding {
|
.box-boarding {
|
||||||
@apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black ;
|
@apply flex lg:flex-row flex-col p-2 transition-colors cursor-pointer min-h-[4rem] dark:bg-coolgray-100 dark:text-white bg-neutral-50 border border-neutral-200 dark:border-black hover:bg-neutral-100 dark:hover:bg-coollabs-100 dark:hover:text-white hover:text-black hover:no-underline text-black ;
|
||||||
|
|||||||
@@ -50,321 +50,311 @@
|
|||||||
<template x-for="item in filteredApplications" :key="item.id">
|
<template x-for="item in filteredApplications" :key="item.id">
|
||||||
<span>
|
<span>
|
||||||
<a class="h-24 box group" :href="item.hrefLink">
|
<a class="h-24 box group" :href="item.hrefLink">
|
||||||
<div class="flex flex-col w-full px-4 mx-2">
|
<div class="flex flex-col w-full">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2 px-4">
|
||||||
<div class="pb-2 box-title" x-text="item.name"></div>
|
<div class="pb-2 truncate box-title" x-text="item.name"></div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
<template x-if="item.status.startsWith('running')">
|
<template x-if="item.status.startsWith('running')">
|
||||||
<div title="running" class="mt-1 bg-success badge "></div>
|
<div title="running" class="bg-success badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('exited')">
|
<template x-if="item.status.startsWith('exited')">
|
||||||
<div title="exited" class="mt-1 bg-error badge "></div>
|
<div title="exited" class="bg-error badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('restarting')">
|
<template x-if="item.status.startsWith('restarting')">
|
||||||
<div title="restarting" class="mt-1 bg-warningbadge "></div>
|
<div title="restarting" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('degraded')">
|
<template x-if="item.status.startsWith('degraded')">
|
||||||
<div title="degraded" class="mt-1 bg-warning badge "></div>
|
<div title="degraded" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-full truncate box-description" x-text="item.description"></div>
|
<div class="max-w-full px-4 truncate box-description" x-text="item.description"></div>
|
||||||
<div class="max-w-full truncate box-description" x-text="item.fqdn"></div>
|
<div class="max-w-full px-4 truncate box-description" x-text="item.fqdn"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
|
<div class="flex gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
|
||||||
<template x-for="tag in item.tags">
|
<template x-for="tag in item.tags">
|
||||||
<div class="tag"
|
<div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
||||||
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
|
||||||
</template>
|
</template>
|
||||||
<div class="add-tag"
|
<div class="add-tag" @click.prevent="goto(item)">Add tag</div>
|
||||||
@click.prevent="goto(item)">Add tag</div>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template x-for="item in filteredPostgresqls" :key="item.id">
|
<template x-for="item in filteredPostgresqls" :key="item.id">
|
||||||
<span>
|
<span>
|
||||||
<a class="h-24 box group" :href="item.hrefLink">
|
<a class="h-24 box group" :href="item.hrefLink">
|
||||||
<div class="flex flex-col px-4 mx-2">
|
<div class="flex flex-col w-full">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2 px-4">
|
||||||
<div class="pb-2 font-bold box-title" x-text="item.name"></div>
|
<div class="pb-2 truncate box-title" x-text="item.name"></div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
<template x-if="item.status.startsWith('running')">
|
<template x-if="item.status.startsWith('running')">
|
||||||
<div title="running" class="mt-1 bg-success badge "></div>
|
<div title="running" class="bg-success badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('exited')">
|
<template x-if="item.status.startsWith('exited')">
|
||||||
<div title="exited" class="mt-1 bg-error badge "></div>
|
<div title="exited" class="bg-error badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('restarting')">
|
<template x-if="item.status.startsWith('restarting')">
|
||||||
<div title="restarting" class="mt-1 bg-warningbadge "></div>
|
<div title="restarting" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('degraded')">
|
<template x-if="item.status.startsWith('degraded')">
|
||||||
<div title="degraded" class="mt-1 bg-warning badge "></div>
|
<div title="degraded" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-full truncate box-description" x-text="item.description"></div>
|
<div class="max-w-full px-4 truncate box-description" x-text="item.description"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
|
<div class="flex gap-1 pt-1 group-hover:dark:text-white group-hover:text-black group min-h-6">
|
||||||
<template x-for="tag in item.tags">
|
<template x-for="tag in item.tags">
|
||||||
<div class="tag"
|
<div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
||||||
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
|
||||||
</template>
|
</template>
|
||||||
<div class="add-tag"
|
<div class="add-tag" @click.prevent="goto(item)">Add tag</div>
|
||||||
@click.prevent="goto(item)">Add tag</div>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template x-for="item in filteredRedis" :key="item.id">
|
<template x-for="item in filteredRedis" :key="item.id">
|
||||||
<span>
|
<span>
|
||||||
<a class="h-24 box group" :href="item.hrefLink">
|
<a class="h-24 box group" :href="item.hrefLink">
|
||||||
<div class="flex flex-col px-4 mx-2">
|
<div class="flex flex-col w-full">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2 px-4">
|
||||||
<div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
|
<div class="pb-2 truncate box-title" x-text="item.name"></div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
<template x-if="item.status.startsWith('running')">
|
<template x-if="item.status.startsWith('running')">
|
||||||
<div title="running" class="mt-1 bg-success badge "></div>
|
<div title="running" class="bg-success badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('exited')">
|
<template x-if="item.status.startsWith('exited')">
|
||||||
<div title="exited" class="mt-1 bg-error badge "></div>
|
<div title="exited" class="bg-error badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('restarting')">
|
<template x-if="item.status.startsWith('restarting')">
|
||||||
<div title="restarting" class="mt-1 bg-warningbadge "></div>
|
<div title="restarting" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('degraded')">
|
<template x-if="item.status.startsWith('degraded')">
|
||||||
<div title="degraded" class="mt-1 bg-warning badge "></div>
|
<div title="degraded" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-full truncate description" x-text="item.description"></div>
|
<div class="max-w-full px-4 truncate description" x-text="item.description"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
||||||
<template x-for="tag in item.tags">
|
<template x-for="tag in item.tags">
|
||||||
<div class="tag"
|
<div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
||||||
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
|
||||||
</template>
|
</template>
|
||||||
<div class="add-tag"
|
<div class="add-tag" @click.prevent="goto(item)">Add tag</div>
|
||||||
@click.prevent="goto(item)">Add tag</div>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template x-for="item in filteredMongodbs" :key="item.id">
|
<template x-for="item in filteredMongodbs" :key="item.id">
|
||||||
<span>
|
<span>
|
||||||
<a class="h-24 box group" :href="item.hrefLink">
|
<a class="h-24 box group" :href="item.hrefLink">
|
||||||
<div class="flex flex-col px-4 mx-2">
|
<div class="flex flex-col w-full">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2 px-4">
|
||||||
<div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
|
<div class="pb-2 truncate box-title" x-text="item.name"></div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
<template x-if="item.status.startsWith('running')">
|
<template x-if="item.status.startsWith('running')">
|
||||||
<div title="running" class="mt-1 bg-success badge "></div>
|
<div title="running" class="bg-success badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('exited')">
|
<template x-if="item.status.startsWith('exited')">
|
||||||
<div title="exited" class="mt-1 bg-error badge "></div>
|
<div title="exited" class="bg-error badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('restarting')">
|
<template x-if="item.status.startsWith('restarting')">
|
||||||
<div title="restarting" class="mt-1 bg-warningbadge "></div>
|
<div title="restarting" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('degraded')">
|
<template x-if="item.status.startsWith('degraded')">
|
||||||
<div title="degraded" class="mt-1 bg-warning badge "></div>
|
<div title="degraded" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-full truncate description" x-text="item.description"></div>
|
<div class="max-w-full px-4 truncate description" x-text="item.description"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
||||||
<template x-for="tag in item.tags">
|
<template x-for="tag in item.tags">
|
||||||
<div class="tag"
|
<div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
||||||
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
|
||||||
</template>
|
</template>
|
||||||
<div class="add-tag"
|
<div class="add-tag" @click.prevent="goto(item)">Add tag</div>
|
||||||
@click.prevent="goto(item)">Add tag</div>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template x-for="item in filteredMysqls" :key="item.id">
|
<template x-for="item in filteredMysqls" :key="item.id">
|
||||||
<span>
|
<span>
|
||||||
<a class="h-24 box group" :href="item.hrefLink">
|
<a class="h-24 box group" :href="item.hrefLink">
|
||||||
<div class="flex flex-col px-4 mx-2">
|
<div class="flex flex-col w-full">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2 px-4">
|
||||||
<div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
|
<div class="pb-2 truncate box-title" x-text="item.name"></div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
<template x-if="item.status.startsWith('running')">
|
<template x-if="item.status.startsWith('running')">
|
||||||
<div title="running" class="mt-1 bg-success badge "></div>
|
<div title="running" class="bg-success badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('exited')">
|
<template x-if="item.status.startsWith('exited')">
|
||||||
<div title="exited" class="mt-1 bg-error badge "></div>
|
<div title="exited" class="bg-error badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('restarting')">
|
<template x-if="item.status.startsWith('restarting')">
|
||||||
<div title="restarting" class="mt-1 bg-warningbadge "></div>
|
<div title="restarting" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('degraded')">
|
<template x-if="item.status.startsWith('degraded')">
|
||||||
<div title="degraded" class="mt-1 bg-warning badge "></div>
|
<div title="degraded" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-full truncate description" x-text="item.description"></div>
|
<div class="max-w-full px-4 truncate description" x-text="item.description"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
||||||
<template x-for="tag in item.tags">
|
<template x-for="tag in item.tags">
|
||||||
<div class="tag"
|
<div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
||||||
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
|
||||||
</template>
|
</template>
|
||||||
<div class="add-tag"
|
<div class="add-tag" @click.prevent="goto(item)">Add tag</div>
|
||||||
@click.prevent="goto(item)">Add tag</div>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template x-for="item in filteredMariadbs" :key="item.id">
|
<template x-for="item in filteredMariadbs" :key="item.id">
|
||||||
<span>
|
<span>
|
||||||
<a class="h-24 box group" :href="item.hrefLink">
|
<a class="h-24 box group" :href="item.hrefLink">
|
||||||
<div class="flex flex-col px-4 mx-2">
|
<div class="flex flex-col w-full">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2 px-4">
|
||||||
<div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
|
<div class="pb-2 truncate box-title" x-text="item.name"></div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
<template x-if="item.status.startsWith('running')">
|
<template x-if="item.status.startsWith('running')">
|
||||||
<div title="running" class="mt-1 bg-success badge "></div>
|
<div title="running" class="bg-success badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('exited')">
|
<template x-if="item.status.startsWith('exited')">
|
||||||
<div title="exited" class="mt-1 bg-error badge "></div>
|
<div title="exited" class="bg-error badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('restarting')">
|
<template x-if="item.status.startsWith('restarting')">
|
||||||
<div title="restarting" class="mt-1 bg-warningbadge "></div>
|
<div title="restarting" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('degraded')">
|
<template x-if="item.status.startsWith('degraded')">
|
||||||
<div title="degraded" class="mt-1 bg-warning badge "></div>
|
<div title="degraded" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-full truncate description" x-text="item.description"></div>
|
<div class="max-w-full px-4 truncate description" x-text="item.description"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
||||||
<template x-for="tag in item.tags">
|
<template x-for="tag in item.tags">
|
||||||
<div class="tag"
|
<div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
||||||
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
|
||||||
</template>
|
</template>
|
||||||
<div class="add-tag"
|
<div class="add-tag" @click.prevent="goto(item)">Add tag</div>
|
||||||
@click.prevent="goto(item)">Add tag</div>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template x-for="item in filteredKeydbs" :key="item.id">
|
<template x-for="item in filteredKeydbs" :key="item.id">
|
||||||
<span>
|
<span>
|
||||||
<a class="h-24 box group" :href="item.hrefLink">
|
<a class="h-24 box group" :href="item.hrefLink">
|
||||||
<div class="flex flex-col px-4 mx-2">
|
<div class="flex flex-col w-full">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2 px-4">
|
||||||
<div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
|
<div class="pb-2 truncate box-title" x-text="item.name"></div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
<template x-if="item.status.startsWith('running')">
|
<template x-if="item.status.startsWith('running')">
|
||||||
<div title="running" class="mt-1 bg-success badge "></div>
|
<div title="running" class="bg-success badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('exited')">
|
<template x-if="item.status.startsWith('exited')">
|
||||||
<div title="exited" class="mt-1 bg-error badge "></div>
|
<div title="exited" class="bg-error badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('restarting')">
|
<template x-if="item.status.startsWith('restarting')">
|
||||||
<div title="restarting" class="mt-1 bg-warningbadge "></div>
|
<div title="restarting" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('degraded')">
|
<template x-if="item.status.startsWith('degraded')">
|
||||||
<div title="degraded" class="mt-1 bg-warning badge "></div>
|
<div title="degraded" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-full truncate description" x-text="item.description"></div>
|
<div class="max-w-full px-4 truncate description" x-text="item.description"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
||||||
<template x-for="tag in item.tags">
|
<template x-for="tag in item.tags">
|
||||||
<div class="tag"
|
<div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
||||||
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
|
||||||
</template>
|
</template>
|
||||||
<div class="add-tag"
|
<div class="add-tag" @click.prevent="goto(item)">Add tag</div>
|
||||||
@click.prevent="goto(item)">Add tag</div>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template x-for="item in filteredDragonflies" :key="item.id">
|
<template x-for="item in filteredDragonflies" :key="item.id">
|
||||||
<span>
|
<span>
|
||||||
<a class="h-24 box group" :href="item.hrefLink">
|
<a class="h-24 box group" :href="item.hrefLink">
|
||||||
<div class="flex flex-col px-4 mx-2">
|
<div class="flex flex-col w-full">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2 px-4">
|
||||||
<div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
|
<div class="pb-2 truncate box-title" x-text="item.name"></div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
<template x-if="item.status.startsWith('running')">
|
<template x-if="item.status.startsWith('running')">
|
||||||
<div title="running" class="mt-1 bg-success badge "></div>
|
<div title="running" class="bg-success badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('exited')">
|
<template x-if="item.status.startsWith('exited')">
|
||||||
<div title="exited" class="mt-1 bg-error badge "></div>
|
<div title="exited" class="bg-error badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('restarting')">
|
<template x-if="item.status.startsWith('restarting')">
|
||||||
<div title="restarting" class="mt-1 bg-warningbadge "></div>
|
<div title="restarting" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('degraded')">
|
<template x-if="item.status.startsWith('degraded')">
|
||||||
<div title="degraded" class="mt-1 bg-warning badge "></div>
|
<div title="degraded" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-full truncate description" x-text="item.description"></div>
|
<div class="max-w-full px-4 truncate description" x-text="item.description"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
||||||
<template x-for="tag in item.tags">
|
<template x-for="tag in item.tags">
|
||||||
<div class="tag"
|
<div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
||||||
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
|
||||||
</template>
|
</template>
|
||||||
<div class="add-tag"
|
<div class="add-tag" @click.prevent="goto(item)">Add tag</div>
|
||||||
@click.prevent="goto(item)">Add tag</div>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template x-for="item in filteredClickhouses" :key="item.id">
|
<template x-for="item in filteredClickhouses" :key="item.id">
|
||||||
<span>
|
<span>
|
||||||
<a class="h-24 box group" :href="item.hrefLink">
|
<a class="h-24 box group" :href="item.hrefLink">
|
||||||
<div class="flex flex-col px-4 mx-2">
|
<div class="flex flex-col w-full">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2 px-4">
|
||||||
<div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
|
<div class="pb-2 truncate box-title" x-text="item.name"></div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
<template x-if="item.status.startsWith('running')">
|
<template x-if="item.status.startsWith('running')">
|
||||||
<div title="running" class="mt-1 bg-success badge "></div>
|
<div title="running" class="bg-success badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('exited')">
|
<template x-if="item.status.startsWith('exited')">
|
||||||
<div title="exited" class="mt-1 bg-error badge "></div>
|
<div title="exited" class="bg-error badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('restarting')">
|
<template x-if="item.status.startsWith('restarting')">
|
||||||
<div title="restarting" class="mt-1 bg-warningbadge "></div>
|
<div title="restarting" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('degraded')">
|
<template x-if="item.status.startsWith('degraded')">
|
||||||
<div title="degraded" class="mt-1 bg-warning badge "></div>
|
<div title="degraded" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-full truncate description" x-text="item.description"></div>
|
<div class="max-w-full px-4 truncate description" x-text="item.description"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
||||||
<template x-for="tag in item.tags">
|
<template x-for="tag in item.tags">
|
||||||
<div class="tag"
|
<div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
||||||
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
|
||||||
</template>
|
</template>
|
||||||
<div class="add-tag"
|
<div class="add-tag" @click.prevent="goto(item)">Add tag</div>
|
||||||
@click.prevent="goto(item)">Add tag</div>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
<template x-for="item in filteredServices" :key="item.id">
|
<template x-for="item in filteredServices" :key="item.id">
|
||||||
<span>
|
<span>
|
||||||
<a class="h-24 box group" :href="item.hrefLink">
|
<a class="h-24 box group" :href="item.hrefLink">
|
||||||
<div class="flex flex-col px-4 mx-2">
|
<div class="flex flex-col w-full">
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2 px-4">
|
||||||
<div class="pb-2 font-bold dark:text-white" x-text="item.name"></div>
|
<div class="pb-2 truncate box-title" x-text="item.name"></div>
|
||||||
|
<div class="flex-1"></div>
|
||||||
<template x-if="item.status.startsWith('running')">
|
<template x-if="item.status.startsWith('running')">
|
||||||
<div title="running" class="mt-1 bg-success badge "></div>
|
<div title="running" class="bg-success badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('exited')">
|
<template x-if="item.status.startsWith('exited')">
|
||||||
<div title="exited" class="mt-1 bg-error badge "></div>
|
<div title="exited" class="bg-error badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('restarting')">
|
<template x-if="item.status.startsWith('restarting')">
|
||||||
<div title="restarting" class="mt-1 bg-warningbadge "></div>
|
<div title="restarting" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
<template x-if="item.status.startsWith('degraded')">
|
<template x-if="item.status.startsWith('degraded')">
|
||||||
<div title="degraded" class="mt-1 bg-warning badge "></div>
|
<div title="degraded" class="bg-warning badge badge-absolute"></div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
<div class="max-w-full truncate description" x-text="item.description"></div>
|
<div class="max-w-full px-4 truncate description" x-text="item.description"></div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
<div class="flex gap-1 pt-1 group-hover:dark:text-white group min-h-6">
|
||||||
<template x-for="tag in item.tags">
|
<template x-for="tag in item.tags">
|
||||||
<div class="tag"
|
<div class="tag" @click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
||||||
@click.prevent="gotoTag(tag.name)" x-text="tag.name"></div>
|
|
||||||
</template>
|
</template>
|
||||||
<div class="add-tag"
|
<div class="add-tag" @click.prevent="goto(item)">Add tag</div>
|
||||||
@click.prevent="goto(item)">Add tag</div>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user