mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-26 07:13:41 +01:00
45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<template>
|
|
<InfiniteLoader :onLoadMore="fetchMore" :enabled="!loadingMore && messages.length > 10" />
|
|
<ul role="status" class="flex animate-pulse flex-col gap-4 p-4" v-if="loading || noLogs">
|
|
<div class="flex flex-row gap-2" v-for="size in ['w-3/5', 'w-2/3', 'w-9/12', 'w-1/2']">
|
|
<div class="h-3 w-40 shrink-0 rounded-full bg-base-content/50 opacity-50"></div>
|
|
<div class="h-3 rounded-full bg-base-content/50 opacity-50" :class="size"></div>
|
|
</div>
|
|
<span class="sr-only">Loading...</span>
|
|
</ul>
|
|
<slot :messages="messages" v-else></slot>
|
|
<IndeterminateBar :color />
|
|
</template>
|
|
|
|
<script lang="ts" setup generic="T">
|
|
import { LogStreamSource } from "@/composable/eventStreams";
|
|
|
|
const { entity, streamSource } = $defineProps<{
|
|
streamSource: (t: Ref<T>) => LogStreamSource;
|
|
entity: T;
|
|
}>();
|
|
|
|
const { messages, loadOlderLogs, isLoadingMore, opened, loading, error } = streamSource($$(entity));
|
|
const { loadingMore } = useLoggingContext();
|
|
const color = computed(() => {
|
|
if (error.value) return "error";
|
|
if (loading.value) return "secondary";
|
|
if (opened.value) return "primary";
|
|
return "error";
|
|
});
|
|
|
|
const noLogs = computed(() => messages.value.length === 0);
|
|
|
|
defineExpose({
|
|
clear: () => (messages.value = []),
|
|
});
|
|
|
|
const fetchMore = async () => {
|
|
if (!isLoadingMore.value) {
|
|
loadingMore.value = true;
|
|
await loadOlderLogs();
|
|
loadingMore.value = false;
|
|
}
|
|
};
|
|
</script>
|